@extends('layouts.app')

@section('dashboard-title')
<h3 style="margin-top: 26px">GIS Dashboard</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">
                        <div class="kt-menu-item text-mono kt-menu-item-filter border-b-2 border-b-transparent kt-menu-item-active:border-b-mono kt-menu-item-here:border-b-mono"
                            data-kt-menu-item-placement="bottom-start"
                            data-kt-menu-item-placement-rtl="bottom-end"
                            data-kt-menu-item-toggle="dropdown"
                            data-kt-menu-item-trigger="click|lg:hover">

                            <div class="kt-menu-link gap-1.5 px-1" tabindex="0">

                                <!-- ✅ JUST ADD THIS CLASS -->
                                <span class="top-navbar-title text-mono akt-menu-title filter-title text-nowrap text-sm kt-menu-item-active:font-medium kt-menu-item-here:font-medium">
                                    Components
                                </span>

                                <span class="kt-menu-arrow">
                                    <i class="ki-filled ki-down text-xs text-muted-foreground"></i>
                                </span>
                            </div>

                            <div class="kt-menu-dropdown kt-menu-default py-2 min-w-[200px]" style="max-height: 500px !important">



                                <div class="kt-menu-item">
                                    <a class="kt-menu-link gis-item" data-type="plinth" href="javascript:void(0)">
                                        <span class="kt-menu-title" style="font-size: 16px;">Plinth</span>
                                    </a>
                                </div>

                                <div class="kt-menu-item">
                                    <a class="kt-menu-link gis-item" data-type="lintel" href="javascript:void(0)">
                                        <span class="kt-menu-title" style="font-size: 16px;">Lintel</span>
                                    </a>
                                </div>

                                <div class="kt-menu-item">
                                    <a class="kt-menu-link gis-item" data-type="roof" href="javascript:void(0)">
                                        <span class="kt-menu-title" style="font-size: 16px;">Roof</span>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <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="Search" name="search" :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 PLINTH
                            </h3>
                            <h2 class="text-center" id="totalWatercourse"></h2>
                        </div>
                    </div>

                </div>
                <div class="kt-card mt-3">
                    <div style="height: 55vh; 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>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>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>Latitude:</span>
                                <span id="latitude" style="font-weight: bold;">-</span>
                            </div>
                            <div class="flex justify-between">
                                <span>Longitude:</span>
                                <span id="longitude" 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>