@extends('layouts.app')
@section('title', 'ADP Schemes Map')

@push('stylesheets')
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<link rel="stylesheet" href="{{ asset('css/maps/adp-schemes-map.css') }}">
@endpush

@section('contents')
<section class="content pms-adp-map">
    <div class="container-fluid px-0">
        <div class="pms-adp-map__workspace">
            <aside class="pms-adp-map__filters" aria-label="Map filters">
                <form id="filterForm" method="GET" action="{{ route('map.adp-schemes') }}" class="pms-adp-map__filters-form">
                    <div class="pms-adp-map__filters-scroll">
                        <div class="pms-adp-map__filters-heading">
                            <i class="fas fa-sliders-h" aria-hidden="true"></i>
                            <span>Map filters</span>
                        </div>

                        <div class="pms-adp-map__filter-block">
                            <label class="pms-adp-map__filter-label" for="mapStyleSelect">Map style</label>
                            <select class="form-control form-control-sm" id="mapStyleSelect" aria-label="Base map style">
                                <option value="CartoDB Voyager">CartoDB Voyager</option>
                            </select>
                        </div>

                        <div class="pms-adp-map__filter-group">
                            <button type="button" class="pms-adp-map__filter-group-toggle" data-toggle="collapse" data-target="#mapFilterLocation" aria-expanded="true" aria-controls="mapFilterLocation">
                                <span>Location</span>
                                <i class="fas fa-chevron-down pms-adp-map__filter-group-chevron" aria-hidden="true"></i>
                            </button>
                            <div id="mapFilterLocation" class="collapse show">
                                <div class="pms-adp-map__filter-group-body">
                                    <div class="pms-adp-map__filter-block">
                                        <label class="pms-adp-map__filter-label" for="districtInput">District</label>
                                        <div class="searchable-dropdown" id="districtDropdown">
                                            <input type="text" class="form-control form-control-sm" id="districtInput" placeholder="All" autocomplete="off">
                                            <input type="hidden" id="districtValue" name="district" value="{{ $filters['district'] }}">
                                            <div class="dropdown-options" id="districtOptions"></div>
                                        </div>
                                    </div>
                                    <div class="pms-adp-map__filter-block">
                                        <label class="pms-adp-map__filter-label" for="talukaInput">Taluka</label>
                                        <div class="searchable-dropdown" id="talukaDropdown">
                                            <input type="text" class="form-control form-control-sm" id="talukaInput" placeholder="All" autocomplete="off">
                                            <input type="hidden" id="talukaValue" name="taluka" value="{{ $filters['taluka'] }}">
                                            <div class="dropdown-options" id="talukaOptions"></div>
                                        </div>
                                    </div>
                                    <div class="pms-adp-map__filter-block">
                                        <label class="pms-adp-map__filter-label" for="ucInput">UC</label>
                                        <div class="searchable-dropdown" id="ucDropdown">
                                            <input type="text" class="form-control form-control-sm" id="ucInput" placeholder="All" autocomplete="off">
                                            <input type="hidden" id="ucValue" name="uc" value="{{ $filters['uc'] }}">
                                            <div class="dropdown-options" id="ucOptions"></div>
                                        </div>
                                    </div>
                                    <div class="pms-adp-map__filter-block">
                                        <label class="pms-adp-map__filter-label" for="townInput">Town</label>
                                        <div class="searchable-dropdown" id="townDropdown">
                                            <input type="text" class="form-control form-control-sm" id="townInput" placeholder="All" autocomplete="off">
                                            <input type="hidden" id="townValue" name="town" value="{{ $filters['town'] }}">
                                            <div class="dropdown-options" id="townOptions"></div>
                                        </div>
                                    </div>
                                    <div class="pms-adp-map__filter-block">
                                        <label class="pms-adp-map__filter-label" for="naConstituencyInput">NA Constituency</label>
                                        <div class="searchable-dropdown" id="naConstituencyDropdown">
                                            <input type="text" class="form-control form-control-sm" id="naConstituencyInput" placeholder="All" autocomplete="off">
                                            <input type="hidden" id="naConstituencyValue" name="na_constituency" value="{{ $filters['na_constituency'] }}">
                                            <div class="dropdown-options" id="naConstituencyOptions"></div>
                                        </div>
                                    </div>
                                    <div class="pms-adp-map__filter-block">
                                        <label class="pms-adp-map__filter-label" for="psConstituencyInput">PS Constituency</label>
                                        <div class="searchable-dropdown" id="psConstituencyDropdown">
                                            <input type="text" class="form-control form-control-sm" id="psConstituencyInput" placeholder="All" autocomplete="off">
                                            <input type="hidden" id="psConstituencyValue" name="ps_constituency" value="{{ $filters['ps_constituency'] }}">
                                            <div class="dropdown-options" id="psConstituencyOptions"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="pms-adp-map__filter-group">
                            <button type="button" class="pms-adp-map__filter-group-toggle collapsed" data-toggle="collapse" data-target="#mapFilterResponsibility" aria-expanded="false" aria-controls="mapFilterResponsibility">
                                <span>Responsibility</span>
                                <i class="fas fa-chevron-down pms-adp-map__filter-group-chevron" aria-hidden="true"></i>
                            </button>
                            <div id="mapFilterResponsibility" class="collapse">
                                <div class="pms-adp-map__filter-group-body">
                                    <div class="pms-adp-map__filter-block">
                                        <label class="pms-adp-map__filter-label" for="adInput">A.D</label>
                                        <div class="searchable-dropdown" id="adDropdown">
                                            <input type="text" class="form-control form-control-sm" id="adInput" placeholder="All" autocomplete="off">
                                            <input type="hidden" id="adValue" name="ad" value="{{ $filters['ad'] }}">
                                            <div class="dropdown-options" id="adOptions"></div>
                                        </div>
                                    </div>
                                    <div class="pms-adp-map__filter-block">
                                        <label class="pms-adp-map__filter-label" for="eaInput">E.A</label>
                                        <div class="searchable-dropdown" id="eaDropdown">
                                            <input type="text" class="form-control form-control-sm" id="eaInput" placeholder="All" autocomplete="off">
                                            <input type="hidden" id="eaValue" name="ea" value="{{ $filters['ea'] }}">
                                            <div class="dropdown-options" id="eaOptions"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="pms-adp-map__filter-group">
                            <button type="button" class="pms-adp-map__filter-group-toggle collapsed" data-toggle="collapse" data-target="#mapFilterMecInfo" aria-expanded="false" aria-controls="mapFilterMecInfo">
                                <span>MEC Information</span>
                                <i class="fas fa-chevron-down pms-adp-map__filter-group-chevron" aria-hidden="true"></i>
                            </button>
                            <div id="mapFilterMecInfo" class="collapse">
                                <div class="pms-adp-map__filter-group-body">
                                    <div class="pms-adp-map__filter-block">
                                        <label class="pms-adp-map__filter-label" for="visitationFilter">Visitation</label>
                                        <select name="visitation" id="visitationFilter" class="form-control form-control-sm">
                                            <option value="all" @selected($filters['visitation'] === 'all')>All</option>
                                            <option value="visited" @selected($filters['visitation'] === 'visited')>Visited</option>
                                            <option value="not_visited" @selected($filters['visitation'] === 'not_visited')>Not visited</option>
                                        </select>
                                    </div>
                                    <div class="pms-adp-map__filter-block">
                                        <label class="pms-adp-map__filter-label" for="mecStatusFilter">MEC Assessment</label>
                                        <select name="mec_status" id="mecStatusFilter" class="form-control form-control-sm">
                                            <option value="all" @selected($filters['mec_status'] === 'all')>All</option>
                                            <option value="Satisfactory" @selected($filters['mec_status'] === 'Satisfactory')>Satisfactory</option>
                                            <option value="Un-Satisfactory" @selected($filters['mec_status'] === 'Un-Satisfactory')>Un-Satisfactory</option>
                                        </select>
                                    </div>
                                    <div class="pms-adp-map__filter-block">
                                        <label class="pms-adp-map__filter-label" for="mecSectorFilter">MEC Sector</label>
                                        <select name="mec_sector" id="mecSectorFilter" class="form-control form-control-sm">
                                            <option value="all" @selected($filters['mec_sector'] === 'all')>All</option>
                                            @foreach ($filterOptions['mec_sectors'] as $mecSectorOption)
                                                <option value="{{ $mecSectorOption }}" @selected($filters['mec_sector'] === $mecSectorOption)>{{ $mecSectorOption }}</option>
                                            @endforeach
                                            @if ($filters['mec_sector'] !== 'all' && ! in_array($filters['mec_sector'], $filterOptions['mec_sectors'], true))
                                                <option value="{{ $filters['mec_sector'] }}" selected>{{ $filters['mec_sector'] }}</option>
                                            @endif
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <button type="submit" class="btn btn-primary btn-sm btn-block mb-2 pms-adp-map__apply-filters-btn">
                            <i class="fas fa-search mr-1"></i> Apply Filters
                        </button>
                    </div>

                    <div class="pms-adp-map__filters-footer">
                        <button type="button" class="btn btn-default btn-block btn-sm" id="resetFilters">
                            Clear all filters
                        </button>
                    </div>
                </form>
            </aside>

            <div class="pms-adp-map__canvas">
                <span class="badge badge-secondary pms-adp-map__year-badge">ADP Schemes {{ date('Y') }}</span>
                <div id="sindhMap" role="application" aria-label="Geographical locations map"></div>
                <button type="button" class="btn btn-sm pms-adp-map__lines-btn" id="drawLineBtn">
                    <i class="fas fa-chart-line mr-1 pms-adp-map__lines-btn-icon" aria-hidden="true"></i>
                    <span class="pms-adp-map__lines-btn-text">Draw connection lines</span>
                </button>
                <div class="pms-adp-map__legend is-collapsed" id="adpMapLegend">
                    <button
                        type="button"
                        class="pms-adp-map__legend-toggle"
                        id="adpMapLegendToggle"
                        aria-expanded="false"
                        aria-controls="adpMapLegendBody"
                    >
                        <span class="pms-adp-map__legend-toggle-label">Map legend</span>
                        <i class="fas fa-chevron-up pms-adp-map__legend-toggle-chevron" aria-hidden="true"></i>
                    </button>
                    <div class="pms-adp-map__legend-body" id="adpMapLegendBody">
                    @if ($useMecSectorMarkers ?? false)
                        @php
                            $mecMarkerLegend = [
                                ['file' => 'infra.jpeg', 'label' => 'Infrastructure'],
                                ['file' => 'infra_sat.jpeg', 'label' => 'Infrastructure · Satisfactory'],
                                ['file' => 'infra_unsat.jpeg', 'label' => 'Infrastructure · Un-Satisfactory'],
                                ['file' => 'social.jpeg', 'label' => 'Social'],
                                ['file' => 'social_sat.jpeg', 'label' => 'Social · Satisfactory'],
                                ['file' => 'social_unsat.jpeg', 'label' => 'Social · Un-Satisfactory'],
                                ['file' => 'production.jpeg', 'label' => 'Production'],
                                ['file' => 'production_sat.jpeg', 'label' => 'Production · Satisfactory'],
                                ['file' => 'production_unsat.jpeg', 'label' => 'Production · Un-Satisfactory'],
                            ];
                        @endphp
                        <div class="pms-adp-map__legend-mec-grid">
                            @foreach ($mecMarkerLegend as $legendItem)
                                <span class="pms-adp-map__legend-mec-item" title="{{ $legendItem['label'] }}">
                                    <img src="{{ asset('assets/img/map_markers/' . $legendItem['file']) }}" alt="{{ $legendItem['label'] }}" class="pms-adp-map__legend-mec-pin" loading="lazy">
                                    <span class="pms-adp-map__legend-mec-label">{{ $legendItem['label'] }}</span>
                                </span>
                            @endforeach
                        </div>
                    @else
                        <div class="pms-adp-map__legend-items">
                            <span class="pms-adp-map__legend-item">
                                <span class="pms-adp-map__legend-dot pms-adp-map__legend-dot--muted"></span>
                                Not assessed
                            </span>
                            <span class="pms-adp-map__legend-item">
                                <span class="pms-adp-map__legend-dot pms-adp-map__legend-dot--success"></span>
                                Published: Satisfactory
                            </span>
                            <span class="pms-adp-map__legend-item">
                                <span class="pms-adp-map__legend-dot pms-adp-map__legend-dot--danger"></span>
                                Published: Un-Satisfactory
                            </span>
                        </div>
                    @endif
                    <div class="pms-adp-map__legend-footer">
                        <span class="pms-adp-map__legend-item pms-adp-map__legend-item--divider">
                            <i class="fas fa-code-branch text-primary"></i>
                            Connection lines
                        </span>
                        <span class="pms-adp-map__legend-attrib" id="mapAttribution">Leaflet</span>
                    </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection

@push('scripts')
<script>
window.PMS_ADP_MAP_CONFIG = {!! json_encode([
    'indexUrl' => route('map.adp-schemes'),
    'filters' => $filters,
    'schemes' => $schemes,
    'stats' => $stats,
    'districts' => $filterOptions['districts'],
    'na_constituencies' => $filterOptions['na_constituencies'],
    'ps_constituencies' => $filterOptions['ps_constituencies'],
    'talukas' => $filterOptions['talukas'],
    'towns' => $filterOptions['towns'],
    'ucs' => $filterOptions['ucs'],
    'departments' => $filterOptions['departments'],
    'ea_agencies' => $filterOptions['ea_agencies'],
    'mec_sectors' => $filterOptions['mec_sectors'],
    'useMecSectorMarkers' => (bool) ($useMecSectorMarkers ?? false),
    'mapMarkersBaseUrl' => asset('assets/img/map_markers'),
], JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_AMP | JSON_HEX_QUOT | JSON_UNESCAPED_UNICODE) !!};
</script>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script src="{{ asset('js/pms-display-text.js') }}"></script>
<script src="{{ asset('js/maps/adp-schemes-map.js') }}"></script>
@endpush