@extends('layouts.app')

@section('dashboard-title')
<h3 style="margin-top: 26px">GIS Dashboard - (Component-III)</h3>
@endsection

@section('content')
<!-- Inner Navbar -->
<div class="flex items-stretch {{ request()->is('gis*') ? '' : 'lg:fixed' }} z-5 top-(--header-height) start-(--sidebar-width) end-5 h-(--navbar-height) mx-5 lg:mx-0 bg-muted"
    id="navbar">
    <div class="rounded-t-xl border border-input border-b-input filter-container flex items-stretch grow nav-color">
        <button
            id="reset-filters"
            style="font-size:19px; font-family:Oswald, sans-serif !important"
            class="px-4 text-white flex items-center whitespace-nowrap">
            Reset Filters
        </button>
        <!-- Container -->
        <div class="kt-container-fluid flex justify-center items-stretch gap-5">
            <div class="grid items-stretch">
                <div class="kt-scrollable-x-auto flex items-stretch">
                    <div class="kt-menu gap-5 lg:gap-7.5" data-kt-menu="true" data-is-gis-dashboard="true">
                       
                        <x-dropdown-filter title="Lot" name="lot" :options="[]" searchable="true" />
                        <x-dropdown-filter title="District" name="district" :options="[]" searchable="true" />
                        <x-dropdown-filter title="Tehsil" name="tehsil" :options="[]" searchable="true" />
                        <x-dropdown-filter title="Residence" name="residence" :options="[]" searchable="true" />
                        <x-dropdown-filter title="UC" name="uc" :options="[]" searchable="true" />
                        <x-dropdown-filter title="Cnic" name="cnic" :options="[]" searchable="true" />
                        <x-dropdown-filter title="HRU" name="hru" :options="[]" searchable="true" />
                        <x-dropdown-filter title="Beneficiary" name="beneficiary" :options="[]" searchable="true" />

                    </div>
                </div>
            </div>
        </div>
        <!-- @can('data export')
        <div class="flex items-center ml-auto me-2 export-white">
            <a href="{{ url('/api/export-watercourse') }}"
                class="export-btn flex items-center gap-2 px-4 py-2 text-black font-semibold rounded-lg shadow-sm hover:shadow-md transition-all duration-200 whitespace-nowrap">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 12v8m0 0l-4-4m4 4l4-4" />
                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 4v8" />
                </svg>
                Dataset
            </a>
        </div>
        @endcan -->
        <!-- End of Container -->
    </div>
</div>
<!-- End of Inner Navbar -->


<!-- Container -->
<div class="kt-container-fluid" style="margin-top: 32px">
    <div class="grid gap-5 lg:gap-7.5 mb-5">

        <!-- begin: grid -->
        <div class="grid lg:grid-cols-3 gap-5 lg:gap-7.5 items-stretch">
            <div class="lg:col-span-2">
                <div class="kt-card h-full">
                    <div id="map" class=""></div>
                </div>
            </div>

            <div class="lg:col-span-1">
                <div class="kt-card">
                    <div class="kt-card-content gis-dashboard-right-card1 flex flex-col place-content-center">

                        <!-- Chart Title -->
                        <div class="justify-center">
                            <h3 class="text-center gis-left-title">
                                TOTAL BENEFICIARIES
                            </h3>
                            <h2 class="text-center" id="totalWatercourse"></h2>
                        </div>
                    </div>

                </div>
                <div class="kt-card mt-3">
                    <div style="height: 75vh; color: #000; font-size: 20px; font-family:Arial; padding:25px" class="gis-right-details kt-card-content gis-dashboard-right-card2 flex flex-col">

                        <div class="space-y-4">
                             <div class="flex justify-between">
                                <span>UUID:</span>
                                <span id="uuid" style="font-weight: bold;">-</span>
                            </div>
                             <div class="flex justify-between">
                                <span>Lot:</span>
                                <span id="lot" style="font-weight: bold;">-</span>
                            </div>
                            <div class="flex justify-between">
                                <span>District:</span>
                                <span id="district" style="font-weight: bold;">-</span>
                            </div>
                            <div class="flex justify-between">
                                <span>Tehsil:</span>
                                <span id="tehsil" style="font-weight: bold;">-</span>
                            </div>
                             <div class="flex justify-between">
                                <span>UC:</span>
                                <span id="uc" style="font-weight: bold;">-</span>
                            </div>
                            <!-- <div class="flex justify-between">
                                <span>Village:</span>
                                <span id="village" style="font-weight: bold;">-</span>
                            </div> -->
                            <!-- <div class="flex justify-between">
                                <span>Residence:</span>
                                <span id="residence" style="font-weight: bold;">-</span>
                            </div> -->
                            <div class="flex justify-between">
                                <span>Beneficiary Name:</span>
                                <span id="beneficiary_name" style="font-weight: bold;">-</span>
                            </div>
                            <div class="flex justify-between">
                                <span>CNIC:</span>
                                <span id="cnic" style="font-weight: bold;">-</span>
                            </div>
                            <div class="flex justify-between">
                                <span>VRC Established:</span>
                                <span id="vrcEstablished" style="font-weight: bold;">-</span>
                            </div>
                            <!-- <div class="flex justify-between">
                                <span>Approved by QA Firm:</span>
                                <span id="approvedQA" style="font-weight: bold;">-</span>
                            </div>
                            <div class="flex justify-between">
                                <span>Approved by CEO:</span>
                                <span id="approvedCEO" style="font-weight: bold;">-</span>
                            </div>
                             <div class="flex justify-between">
                                <span>Plinth Completion Date:</span>
                                <span id="plinthCompletion" style="font-weight: bold;">-</span>
                            </div>
                             <div class="flex justify-between">
                                <span>Lintel Completion Date:</span>
                                <span id="lintelCompletion" style="font-weight: bold;">-</span>
                            </div>
                             <div class="flex justify-between">
                                <span>Roof Completion Date:</span>
                                <span id="roofCompletion" style="font-weight: bold;">-</span>
                            </div>
                             <div class="flex justify-between">
                                <span>100% Completed:</span>
                                <span id="completed" style="font-weight: bold;">-</span>
                            </div> -->
                        </div>
                    </div>

                </div>
            </div>


        </div>
        <!-- end: grid -->
    </div>

</div>
<!-- End of Container -->
@endsection

@section('scripts')
@vite('resources/js/pages/gis-dashboard.js')
@vite('resources/js/generic-filter.js')
@endsection

</rewritten_file>