@extends('smartadmin::layout')

@section('title')
@lang('Active People Dashboard')
@endsection

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

@section('subheader')
@include('smartadmin::components.subheader', ['icon' => 'globe', 'page_title' => $la_name.' - ACTIVE PEOPLE DASHBOARD', 'sub_title' => 'SubTitle', 'badge_text' => 'STICKER', 'punch_line' => 'This dashboard displays the most dominant profile of participants based on age, gender, deprivation and Mosaic segmentation using the selected filters. The full breakdowns are then provided as graphs with benchmarks against the selected sport or programmes.', '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">
                        <div class="row">
                            <div class="col-6">
                                @include('filters.datefilter', ['start_date' => $start_date, 'end_date' => $end_date])
                            </div>
                            <div class="col-6">
                                @include('filters.datebenchmark', ['start_date' => $start_date, 'end_date' => $end_date])
                            </div>
                        </div>
	                	<div class="row">		                	
		                    <div class="col-6">
		                    	@include('filters.local_participant_filter')
		                    </div>
		                    <div class="col-3">
		                    	@include('filters.participant_benchmark_filter')
		                    </div>
		                    <div class="col-3">
		                    	@include('filters.population_benchmark_filter')
		                    </div>
	                    </div>
	                    
	                </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.activepeople_splash') }}",
            data: 
            {
                'start_date'                                : $('#start_date').val(),
                'end_date'                                  : $('#end_date').val(),
                'start_date_benchmark'                      : $('#start_date_benchmark').val(),
                'end_date_benchmark'                        : $('#end_date_benchmark').val(),
                'local_participants_filter'                 : $('#local_participants_filter').val(),
                'participant_benchmark_filter'              : $('#participant_benchmark_filter').val(),
                'population_benchmark_filter'               : $('#population_benchmark_filter').val(),
                'activity_provider_filter'                  : $('#activity_provider_filter').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.activepeople_splash') }}",
            data: 
            {
                'start_date'                                : $('#start_date').val(),
                'end_date'                                  : $('#end_date').val(),
                'start_date_benchmark'                      : $('#start_date_benchmark').val(),
                'end_date_benchmark'                        : $('#end_date_benchmark').val(),
                'local_participants_filter'                 : $('#local_participants_filter').val(),
                'participant_benchmark_filter'              : $('#participant_benchmark_filter').val(),
                'population_benchmark_filter'               : $('#population_benchmark_filter').val(),
                'activity_provider_filter'                  : $('#activity_provider_filter').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}}');
        $("#start_date_benchmark").val('{{$start_date}}');
        $("#end_date_benchmark").val('{{$end_date}}');
        $('#submit').trigger('click');
	});
</script>
@endpush