@extends('layouts.app')

@section('dashboard-title')
    <h3 class="">INSTALLATION OF TUBE WELL - GIS DASHBOARD</h3>
@endsection
@section('extra_margin', 'style=margin-top:32px;')


@section('content')
    <!-- Inner Navbar -->
    <div class="flex items-stretch lg:fixed z-5 top-(--header-height) start-(--sidebar-width) end-5 h-(--navbar-height) mx-5 lg:mx-0 bg-muted"
        id="navbar" style="margin-top: 32px">
        <div class="rounded-t-xl border border-input border-b-input filter-container flex items-stretch grow">
            <!-- 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">

                            @canany([
                                'gis dashboard water pond',
                                'gis dashboard check dam',
                                'gis dashboard water reservoir',
                                'gis dashboard stream bank',
                                'gis dashboard gated field',
                                'gis dashboard terracing',
                                'gis dashboard micro watershed',
                                'gis dashboard water seepage',
                                'gis dashboard agronomic',
                                'gis dashboard installation',
                                'gis dashboard solarization'
                            ])
                                <div class="kt-menu-item 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">
                                        <span class="kt-menu-title filter-title text-nowrap text-sm kt-menu-item-active:font-medium kt-menu-item-here:font-medium">
                                            Gis Dashboard
                                        </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]">

                                        @can('gis dashboard water pond')
                                            <div class="kt-menu-item">
                                                <a class="kt-menu-link gis-item" data-type="water_pond" href="javascript:void(0)">
                                                    <span class="kt-menu-title">Water Pond</span>
                                                </a>
                                            </div>
                                        @endcan

                                        @can('gis dashboard check dam')
                                            <div class="kt-menu-item">
                                                <a class="kt-menu-link gis-item" data-type="check_dam" href="javascript:void(0)">
                                                    <span class="kt-menu-title">Check Dam</span>
                                                </a>
                                            </div>
                                        @endcan

                                        @can('gis dashboard water reservoir')
                                            <div class="kt-menu-item">
                                                <a class="kt-menu-link gis-item" data-type="water_reservoir" href="javascript:void(0)">
                                                    <span class="kt-menu-title">Water Reservoir</span>
                                                </a>
                                            </div>
                                        @endcan

                                        @can('gis dashboard stream bank')
                                            <div class="kt-menu-item">
                                                <a class="kt-menu-link gis-item" data-type="stream_bank" href="javascript:void(0)">
                                                    <span class="kt-menu-title">Stream Bank Stabilization</span>
                                                </a>
                                            </div>
                                        @endcan

                                        @can('gis dashboard gated field')
                                            <div class="kt-menu-item">
                                                <a class="kt-menu-link gis-item" data-type="gated_inlet" href="javascript:void(0)">
                                                    <span class="kt-menu-title">Gated Field Inlet / Outlet Spillway</span>
                                                </a>
                                            </div>
                                        @endcan

                                        @can('gis dashboard terracing')
                                            <div class="kt-menu-item">
                                                <a class="kt-menu-link gis-item" data-type="terracing" href="javascript:void(0)">
                                                    <span class="kt-menu-title">Terracing</span>
                                                </a>
                                            </div>
                                        @endcan

                                        @can('gis dashboard micro watershed')
                                            <div class="kt-menu-item">
                                                <a class="kt-menu-link gis-item" data-type="micro_watershed" href="javascript:void(0)">
                                                    <span class="kt-menu-title">Micro Watershed Development</span>
                                                </a>
                                            </div>
                                        @endcan

                                        @can('gis dashboard water seepage')
                                            <div class="kt-menu-item">
                                                <a class="kt-menu-link gis-item" data-type="water_seepage" href="javascript:void(0)">
                                                    <span class="kt-menu-title">Water Seepage Harvesting Galleries</span>
                                                </a>
                                            </div>
                                        @endcan

                                        @can('gis dashboard agronomic')
                                            <div class="kt-menu-item">
                                                <a class="kt-menu-link gis-item" data-type="agronomic_low_cost" href="javascript:void(0)">
                                                    <span class="kt-menu-title">Agronomic Low Cost Interventions</span>
                                                </a>
                                            </div>
                                        @endcan

                                        @can('gis dashboard installation')
                                            <div class="kt-menu-item">
                                                <a class="kt-menu-link gis-item" data-type="installation" href="javascript:void(0)">
                                                    <span class="kt-menu-title">Installation of Tube Wells</span>
                                                </a>
                                            </div>
                                        @endcan

                                        @can('gis dashboard solarization')
                                            <div class="kt-menu-item">
                                                <a class="kt-menu-link gis-item" data-type="solarization" href="javascript:void(0)">
                                                    <span class="kt-menu-title">Solarization of Agricultural Tube Wells</span>
                                                </a>
                                            </div>
                                        @endcan

                                    </div>
                                </div>
                            @endcanany



                            <!-- Division Dropdown -->
                            <div class="kt-menu-item 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">
                                    <span
                                        class="kt-menu-title filter-title text-nowrap text-sm kt-menu-item-active:font-medium kt-menu-item-here:font-medium">
                                        Division
                                    </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-[220px] bg-white rounded-lg shadow-md">
                                    <div class="px-3 pb-2">
                                        <input type="text"
                                            class="form-control form-control-sm border border-gray-300 rounded px-2 py-1 w-full dropdown-search"
                                            placeholder="Search...">
                                    </div>
                                    <ul class="divide-y divide-gray-200 dropdown-list">
                                    </ul>
                                </div>
                            </div>

                            <!-- District Dropdown -->
                            <div class="kt-menu-item 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">
                                    <span
                                        class="kt-menu-title filter-title text-nowrap text-sm kt-menu-item-active:font-medium kt-menu-item-here:font-medium">
                                        District
                                    </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-[220px] bg-white rounded-lg shadow-md">
                                    <div class="px-3 pb-2">
                                        <input type="text"
                                            class="form-control form-control-sm border border-gray-300 rounded px-2 py-1 w-full dropdown-search"
                                            placeholder="Search...">
                                    </div>
                                    <ul class="divide-y divide-gray-200 dropdown-list">
                                    </ul>
                                </div>
                            </div>

                            <!-- Tehsil Dropdown -->
                            <div class="kt-menu-item 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">
                                    <span
                                        class="kt-menu-title filter-title text-nowrap text-sm kt-menu-item-active:font-medium kt-menu-item-here:font-medium">
                                        Tehsil
                                    </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-[220px] bg-white rounded-lg shadow-md">
                                    <div class="px-3 pb-2">
                                        <input type="text"
                                            class="form-control form-control-sm border border-gray-300 rounded px-2 py-1 w-full dropdown-search"
                                            placeholder="Search...">
                                    </div>
                                    <ul class="divide-y divide-gray-200 dropdown-list">
                                    </ul>
                                </div>
                            </div>

                            <!-- Village Dropdown -->
                            <div class="kt-menu-item 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">
                                    <span
                                        class="kt-menu-title filter-title text-nowrap text-sm kt-menu-item-active:font-medium kt-menu-item-here:font-medium">
                                        Village
                                    </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-[220px] bg-white rounded-lg shadow-md">
                                    <div class="px-3 pb-2">
                                        <input type="text"
                                            class="form-control form-control-sm border border-gray-300 rounded px-2 py-1 w-full dropdown-search"
                                            placeholder="Search...">
                                    </div>
                                    <ul class="divide-y divide-gray-200 dropdown-list">
                                    </ul>
                                </div>
                            </div>

                            <!-- Status Dropdown -->
                            <div class="kt-menu-item 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">
                                    <span
                                        class="kt-menu-title filter-title text-nowrap text-sm kt-menu-item-active:font-medium kt-menu-item-here:font-medium">
                                        Status
                                    </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-[220px] bg-white rounded-lg shadow-md">
                                    <div class="px-3 pb-2">
                                        <input type="text"
                                            class="form-control form-control-sm border border-gray-300 rounded px-2 py-1 w-full dropdown-search"
                                            placeholder="Search...">
                                    </div>
                                    <ul class="divide-y divide-gray-200 dropdown-list">
                                        <li class="flex items-center px-3 py-2 hover:bg-gray-100">
                                            <input id="status-select-all" type="checkbox"
                                                class="form-check-input w-4 h-4 border-gray-300 rounded focus:ring-0"
                                                checked>
                                            <label for="status-select-all"
                                                class="ms-2 text-gray-700 text-sm font-medium">Select All</label>
                                        </li>
                                        <li class="flex items-center px-3 py-2 hover:bg-gray-100">
                                            <input id="completed" type="checkbox"
                                                class="form-check-input w-4 h-4 border-gray-300 rounded focus:ring-0"
                                                checked>
                                            <label for="completed"
                                                class="ms-2 text-gray-700 text-sm font-medium">Completed</label>
                                        </li>
                                        <li class="flex items-center px-3 py-2 hover:bg-gray-100">
                                            <input id="under_progress" type="checkbox"
                                                class="form-check-input w-4 h-4 border-gray-300 rounded focus:ring-0"
                                                checked>
                                            <label for="under_progress" class="ms-2 text-gray-700 text-sm font-medium">Under
                                                Progress</label>
                                        </li>
                                    </ul>
                                </div>
                            </div>

                            <!-- search Dropdown -->
                            <div class="kt-menu-item 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">
                                    <span
                                        class="kt-menu-title filter-title text-nowrap text-sm kt-menu-item-active:font-medium kt-menu-item-here:font-medium">
                                        Search
                                    </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-[220px] bg-white rounded-lg shadow-md">
                                    <div class="px-3 pb-2">
                                        <input type="text"
                                            class="form-control form-control-sm border border-gray-300 rounded px-2 py-1 w-full dropdown-search"
                                            placeholder="Search...">
                                    </div>
                                    <ul class="divide-y divide-gray-200 dropdown-list">
                                        <li class="flex items-center px-3 py-2 hover:bg-gray-100">
                                            <input id="search-select-all" type="checkbox"
                                                class="form-check-input w-4 h-4 border-gray-300 rounded focus:ring-0"
                                                checked>
                                            <label for="search-select-all"
                                                class="ms-2 text-gray-700 text-sm font-medium">Select All</label>
                                        </li>
                                    </ul>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>

            </div>
            <div class="flex items-center ml-auto me-2">
                <button type="button"
                    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">
                    <!-- Clean download SVG -->
                    <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="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-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>
                    Export
                </button>
            </div>
            <!-- End of Container -->
        </div>
    </div>
    <!-- End of Inner Navbar -->

    <!-- Container -->
    <div class="kt-container-fluid">
        <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">
                                    TOTAL INSTALLED TUBE WELLS​
                                </h3>
                                <h2 class="text-center" id="total_install_tube_well">{{ $total_tubeWellDae }}</h2>
                            </div>
                        </div>

                    </div>
                    <div class="kt-card mt-3">
                        <div class="kt-card-content gis-dashboard-right-card2 flex flex-col place-content-center">

                            <div class="space-y-4">
                                <div class="flex justify-between">
                                    <span>Division:</span>
                                    <span id="division">-</span>
                                </div>
                                <div class="flex justify-between">
                                    <span>District:</span>
                                    <span id="district">-</span>
                                </div>
                                <div class="flex justify-between">
                                    <span>Tehsil:</span>
                                    <span id="tehsil">-</span>
                                </div>
                                <div class="flex justify-between">
                                    <span>Village:</span>
                                    <span id="village">-</span>
                                </div>
                                <div class="flex justify-between">
                                    <span>Farmer's Name:</span>
                                    <span id="farmer_name">-</span>
                                </div>
                                <div class="flex justify-between">
                                    <span>Name of WUA's President:</span>
                                    <span id="wua_president">-</span>
                                </div>
                                <div class="flex justify-between">
                                    <span>Category:</span>
                                    <span id="category">-</span>
                                </div>
                                <div class="flex justify-between">
                                    <span>Commencement Date:</span>
                                    <span id="commencement_date">-</span>
                                </div>
                                <div class="flex justify-between">
                                    <span>Completion Date:</span>
                                    <span id="completion_date">-</span>
                                </div>
                                <div class="flex justify-between">
                                    <span>Total Cost (Rs.):</span>
                                    <span id="total_cost">-</span>
                                </div>
                                <div class="flex justify-between">
                                    <span>Govt. Share (Rs.):</span>
                                    <span id="govt_share">-</span>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>

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

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

@section('scripts')
    @vite('resources/js/gis-dashboard/installation.js')

@endsection

</rewritten_file>