@extends('smartadmin::layout')


@section('title')
    @lang('MAP')
@endsection

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

@section('subheader')
    @include('smartadmin::components.subheader', ['icon' => 'globe', 'page_title' => 'LOCAL AREA PROFILE', 'sub_title' => 'SubTitle', 'badge_text' => 'STICKER', 'punch_line' => 'These dashboards and accompanying maps display data on the demographics and context of the local area including population, inclusion and diversity and an overview of facility provision.', 'sub_header' => ''])
@endsection

@section('content')

    @if($sub_role == 'CSP')
        <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-12">
                                    @include('filters.local_authority_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-4">
                                    <div class="row">
                                        <div class="col-6">
                                        </div>
                                        <div class="col-6">
                                            <button class="btn btn-primary" id="submit" style="float: right;">
                                                <span class="fal fa-check mr-1"></span>
                                                SUBMIT FILTERS
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <div id="spinner" style="text-align: center; display: none;">
            <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>LOADING...</label></span>
        </div>
    @endif

    <div id="splash"></div>

@endsection

@section('pr-css')
@endsection

@section('pr-scripts')
@endsection

@push('scripts')
    <script type="text/javascript">
        function getView(la_code) {
            $.ajax({
                type: 'POST',
                url: "{{ route('maps.local_area_profile.splash') }}",
                data:
                    {
                        'la_code': la_code,
                    },
                beforeSend: function () {
                    $('#spinner').show();
                    $('#splash').empty();
                    $('#submit').prop('disabled', true);
                },
                success: function (msg) {
                    $('#spinner').hide();
                    $('#splash').show().html(msg);
                    $('#submit').prop('disabled', false);
                    $("#js-map-content").css({padding: "0px"});
                }
            });
        }

        @if($sub_role == 'CSP')
            $("#submit").click(function () {
                getView($("#local_authority_filter").val())
            });
        @else
            getView('{{ $selected_la_code }}')
        @endif

        $(document).ready(function () {
            $("#js-map-content").css({padding: "0px"});
            $('html, body').css('overflowX', 'hidden');
            @if($sub_role == 'CSP')
                $('#submit').trigger('click');
            @endif
        });

    </script>
@endpush