@extends('frontend_template')
@section('content')
<br><br>
<section class="user_list mb-5">
	<div class="container">
		<div class="row mb-3">         
            <div class="col-9">
                <h3>Audience Registration Report</h3>
            </div>
            <div class="col-3">
                <form method="GET" action="{{ url('report-audience-registration'); }}">
                    <select name="graph" class="form-control" onchange="this.form.submit()">
                        <option>Select Graph Type</option>
                        <option value="1" {{isset($_GET['graph']) && $_GET['graph'] == 1 ? 'Selected' :'selected'}}>Bar Graph</option>
                        <option value="2" {{isset($_GET['graph']) && $_GET['graph'] == 2 ? 'Selected' :''}}>Donught Graph</option>
                        <option value="3" {{isset($_GET['graph']) && $_GET['graph'] == 3 ? 'Selected' :''}}>Pie Graph</option>
                    </select>
                </form>
            </div>   
        </div>
        <div class="row">
            <div class="col-6">
                                <canvas id="bargraph" style="width:100%;max-width:500px"></canvas>
                            </div>
            <div class="col-6">
                <div class="table-responsive">
                    <table class="table table-bordered table-striped table-hover">
                        <tbody>
                            <tr class="table-dark">
                                <th>Attendance Registration</th>
                                <th>Count</th>
                            </tr>
                            <tr>
                                <th>Self Registration</th>
                                <th><a href="{{ url('audience-event-list?event_id='.$eid.'&event_key='.$ekey.'&self=1') }}" class="text-black">{{$self_count}}</a></th>
                            </tr>
                            <tr>
                                <th>Onsite Registration</th>
                                <th><a href="{{ url('audience-event-list?event_id='.$eid.'&event_key='.$ekey.'&onsite=1') }}" class="text-black">{{$onsite_count}}</a></th>
                            </tr>
                            <tr class="">
                                <th>Pre-Registered Registration</th>
                                <th><a href="{{ url('audience-event-list?event_id='.$eid.'&event_key='.$ekey.'&imported=1') }}" class="text-black">{{$imported_count}}</a></th>
                            </tr>
                            <tr class="">
                                <th>System Form Filled</th>
                                <th><a href="{{ url('audience-event-list?event_id='.$eid.'&event_key='.$ekey.'&sysfilled=1') }}" class="text-black">{{$sys_form_count}}</a></th>
                            </tr>
                            <tr class="table-danger">
                                <th>Total</th>
                                <th><a href="{{ url('audience-event-list?event_id='.$eid.'&event_key='.$ekey) }}" class="text-black">{{$total}}</a></th>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
	</div>
</section>
<br>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
@if(isset($_GET['graph']) && ($_GET['graph'] == 2 || $_GET['graph'] == 3 ))
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/emn178/chartjs-plugin-labels/src/chartjs-plugin-labels.js"></script>
@endif

<script type="text/javascript">
    var self_count = ;
    var onsite_count = ;
    var imported_count = ;
    var sys_form_count = ;
    var pieself_count = pieonsite_count = pieimported_count = piesys_form_count = 0;
    
    var xValues = ["Self", "Onsite", "Pre-Registered", "System Form Filled"];
    var yValues = [self_count, onsite_count, imported_count, sys_form_count];
    var pieYval = [pieself_count, pieonsite_count, pieimported_count, piesys_form_count];

    new Chart("bargraph", {
      type: "bar",
      data: {
        labels: xValues,
        datasets: [{
          backgroundColor: "