@extends('smartadmin::layout')

@section('title')
@lang('Participation Dashboard')
@endsection

@section('breadcrumbs')
@include('smartadmin::components.breadcrumbs', ['category' => 'Dashboard', 'sub_category' => '', 'page_title' => 'Participation Dashboard'])
@endsection

@section('subheader')
@include('smartadmin::components.subheader', ['icon' => 'globe', 'page_title' => $la_name.' - PARTICIPATION DASHBOARD', 'sub_title' => 'SubTitle', 'badge_text' => 'STICKER', 'punch_line' => 'This dashboard displays the total physical activity participation data in the local authority, collected from multiple sources, including leisure operators, community programmes, sports clubs and Sport England Active Lives survey.', 'sub_header' => ''])
@endsection

@section('content')

<div class="row">
</div>

<div class="row">
    <div class="col-xl-12">
        <div id="panel-1" class="panel">
            <div class="panel-hdr">
                <h2>
                    Filters
                </h2>
                @include('smartadmin::components.panel_toolbar')
            </div>
            <div class="panel-container show">
            	
            	{{-- <form id="filter_form"> --}}
	                <div class="panel-content">
                        <br>
	                    @include('filters.datefilter', ['start_date' => $start_date, 'end_date' => $end_date])
	                </div>
	                <div class="panel-content border-faded border-left-0 border-right-0 border-bottom-0">
	                    <div class="row">
	                        <div class="ml-md-auto col-md-4">
	                        </div>
	                        <div class="col-md-4">
	                        </div>
	                        <div class="col-md-3"> 
                            {{-- <div class="col-md-auto"> --}}
	                            {{-- <div class="form-group mb-3"> --}}
                                    <div class="row">
                                    <div class="col-6">
                                        <button class="btn btn-primary" id="reset_and_submit">
                                            <span class="fal fa-sync mr-1"></span>
                                            RESET FILTERS
                                        </button>
                                    </div>
                                    <div class="col-6">
                                        <button class="btn btn-primary" id="submit">
                                            <span class="fal fa-check mr-1"></span>
                                            SUBMIT FILTERS
                                        </button>
                                    </div>
                                    </div>
	                                
	                            {{-- </div> --}}
	                        </div>
	                    </div>
	                </div>
	            {{-- </form> --}}

            </div>
        </div>
    </div>
</div>


<div id="spinner" style="text-align: center;">
    <div class="spinner-border spinner-border-lg text-primary" role="status">
        <span class="sr-only"></span>        
    </div>
    <br>
    <span style="font-size: smaller; font-weight: 500; color: #2c89b9;"><label>DASHBOARD LOADING...</label></span>
</div>
<div id="splash"></div>

@endsection

@section('pr-css')
@endsection

@section('pr-scripts')
@endsection

@push('scripts')

<script type="text/javascript">

	$("#submit").click(function() 
	{
		$.ajax({
            type: 'POST',
            url: "{{ route('dashboard.participation_splash') }}",
            data: 
            {
                'start_date'    : $('#start_date').val(),
                'end_date'      : $('#end_date').val(),
                'reset'         : 0
            },
            beforeSend: function()
            {
                $('#spinner').show();
                $('#splash').empty();
                $('#submit').prop('disabled', true);
                $('#reset_and_submit').prop('disabled', true);
            },
            success: function(msg)
            {
                $('#spinner').hide();
                $('#splash').show().html(msg);
                $('#submit').prop('disabled', false);
                $('#reset_and_submit').prop('disabled', false);

            }
        });
	});

    $("#reset_and_submit").click(function() 
    {
        $.ajax({
            type: 'POST',
            url: "{{ route('dashboard.participation_splash') }}",
            data: 
            {
                'start_date'    : $('#start_date').val(),
                'end_date'      : $('#end_date').val(),
                'reset'         : 1
            },
            beforeSend: function()
            {
                $('#spinner').show();
                $('#splash').empty();
                $('#submit').prop('disabled', true);
                $('#reset_and_submit').prop('disabled', true);
            },
            success: function(msg)
            {
                $('#spinner').hide();
                $('#splash').show().html(msg);
                $('#submit').prop('disabled', false);
                $('#reset_and_submit').prop('disabled', false);
            }
        });
    });

	$( document ).ready(function() 
	{
	 	$("#start_date").val('{{$start_date}}');
        $("#end_date").val('{{$end_date}}');
        $('#submit').trigger('click');
	});
</script>
@endpush