@extends('layouts.app')

@section('dashboard-title')
    <h3 class="">SOLARIZATION 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">

                            <!-- 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_solar_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>District:</span>
        <span id="district">-</span>
    </div>
    <div class="flex justify-between">
        <span>Farmer Name:</span>
        <span id="farmer_name">-</span>
    </div>
    <div class="flex justify-between">
        <span>CNIC No:</span>
        <span id="cnic_no">-</span>
    </div>
    <div class="flex justify-between">
        <span>Contact No:</span>
        <span id="contact_no">-</span>
    </div>
    <div class="flex justify-between">
        <span>Category of Scheme:</span>
        <span id="category">-</span>
    </div>
    <div class="flex justify-between">
        <span>Discharge (LPS):</span>
        <span id="discharge">-</span>
    </div>
    <div class="flex justify-between">
        <span>Financial Year:</span>
        <span id="financial_year">-</span>
    </div>
    <div class="flex justify-between">
        <span>Total Irrigated Area (Acres):</span>
        <span id="total_area">-</span>
    </div>
    <div class="flex justify-between">
        <span>Improved Scheme by WCKP (Yes/No):</span>
        <span id="improved_scheme">-</span>
    </div>
    <div class="flex justify-between">
        <span>Govt Share (80 %):</span>
        <span id="govt_share">-</span>
    </div>
    <div class="flex justify-between">
        <span>Farmer Share (20 %):</span>
        <span id="farmer_share">-</span>
    </div>
    <div class="flex justify-between">
        <span>Date of Commencement:</span>
        <span id="commencement_date">-</span>
    </div>
    <div class="flex justify-between">
        <span>Date of Commissioning:</span>
        <span id="completion_date">-</span>
    </div>
    <div class="flex justify-between">
        <span>Date of FCR:</span>
        <span id="fcr_date">-</span>
    </div>
</div>

                        </div>

                    </div>
                </div>

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

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

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

@endsection

</rewritten_file>