@extends('layouts.app')

@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">
        <div class="rounded-t-xl border border-input border-b-input bg-background flex items-stretch grow">
        <!-- Container -->
        <div class="kt-container-fluid flex justify-between 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">
                <div class="kt-menu-item 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 text-nowrap text-sm text-foreground kt-menu-item-active:text-mono kt-menu-item-active:font-medium kt-menu-item-here:text-mono kt-menu-item-here:font-medium kt-menu-item-show:text-mono kt-menu-link-hover:text-mono">
                        Zone/Unit
                    </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">
                                    <!-- Header -->
                                

                                    <!-- Checkboxes -->
                                    <ul class="divide-y divide-gray-200">
                                        <li class="flex items-center px-3 py-2 hover:bg-gray-100">
                                            <input id="zone-unit" type="checkbox" class="form-check-input w-4 h-4  border-gray-300 rounded focus:ring-0" checked>
                                            <label for="zone-unit" class="ms-2 text-gray-700 text-sm font-medium">Zone/Unit</label>
                                        </li>
                                        <li class="flex items-center px-3 py-2 hover:bg-gray-100">
                                            <input id="punjab" type="checkbox" class="form-check-input w-4 h-4 border-gray-300 rounded focus:ring-0" checked>
                                            <label for="punjab" class="ms-2 text-gray-700 text-sm font-medium">Punjab</label>
                                        </li>
                                        <li class="flex items-center px-3 py-2 hover:bg-gray-100">
                                            <input id="kp" type="checkbox" class="form-check-input w-4 h-4 border-gray-300 rounded focus:ring-0" checked>
                                            <label for="kp" class="ms-2 text-gray-700 text-sm font-medium">KP</label>
                                        </li>
                                        <li class="flex items-center px-3 py-2 hover:bg-gray-100">
                                            <input id="ict" type="checkbox" class="form-check-input w-4 h-4  border-gray-300 rounded focus:ring-0" checked>
                                            <label for="ict" class="ms-2 text-gray-700 text-sm font-medium">ICT</label>
                                        </li>
                                        <li class="flex items-center px-3 py-2 hover:bg-gray-100">
                                            <input id="gb" type="checkbox" class="form-check-input w-4 h-4 border-gray-300 rounded focus:ring-0" checked>
                                            <label for="gb" class="ms-2 text-gray-700 text-sm font-medium">GB</label>
                                        </li>
                                        <li class="flex items-center px-3 py-2 hover:bg-gray-100">
                                            <input id="balochistan" type="checkbox" class="form-check-input w-4 h-4 border-gray-300 rounded focus:ring-0" checked>
                                            <label for="balochistan" class="ms-2 text-gray-700 text-sm font-medium">Balochistan</label>
                                        </li>
                                        <li class="flex items-center px-3 py-2 hover:bg-gray-100">
                                            <input id="ajk" type="checkbox" class="form-check-input w-4 h-4 border-gray-300 rounded focus:ring-0" checked>
                                            <label for="ajk" class="ms-2 text-gray-700 text-sm font-medium">AJK</label>
                                        </li>
                                    </ul>
                                </div>
                </div>          
                </div>
            </div>
            </div>
            
        </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-1">
    <div class="kt-card h-full">
        <div class="kt-card-content flex flex-col items-center justify-center p-6 gap-6">

            <!-- Gauge Chart -->
            <div id="watercourseGauge_1" class="w-full max-w-[400px]"></div>
             <div class="watercourseGauge-value">
                <span>0</span>
                <span>47,000</span>
            </div>

            <!-- Gauge Label -->
            <div class="graph-title-text-lg text-white text-center rounded-md py-2 px-4 text-lg shadow-md">
                LINNED WATERCOURSES
            </div>

            <!-- Donut Charts -->
            <div class="flex flex-col lg:flex-row items-center justify-center gap-6 mt-2">
                <div class="flex flex-col items-center">
                    <div id="donutICR1" class="w-[160px] h-[160px]"></div>
                    <div class="graph-title-text-sm text-white text-center rounded-md py-1.5 px-3 text-sm shadow-md">
                        UNDER LINING AT ICR-I
                    </div>
                </div>

                <div class="flex flex-col items-center">
                    <div id="donutICR2" class="w-[160px] h-[160px]"></div>
                    <div class="graph-title-text-sm text-white text-center rounded-md py-1.5 px-3 text-sm shadow-md">
                        UNDER LINING AT ICR-II
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>




<div class="lg:col-span-2">
    <div class="kt-card h-full">
        <div class="kt-card-content flex flex-col place-content-center gap-5">

            <!-- Chart Title -->
            <div class="flex justify-center">
                <h2 class="text-center">
                    1- Improvement of Watercourses:
                </h2>
            </div>

            <!-- Chart Container -->
            <div id="watercourseChart" class="w-full h-[450px]"></div>

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

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

    {{-- section 2 --}}
    <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-1">
    <div class="kt-card h-full">
        <div class="kt-card-content flex flex-col items-center justify-center p-6 gap-6">

            <!-- Gauge Chart -->
            <div id="watercourseGauge_2" class="w-full max-w-[400px]"></div>
             <div class="watercourseGauge-value">
                <span>0</span>
                <span>11,610</span>
            </div>

            <!-- Gauge Label -->
            <div class="graph-title-text-lg text-white text-center rounded-md py-2 px-4 text-lg shadow-md">
                CONSTRUCTED WSTs
            </div>

            <!-- Donut Charts -->
            <div class="flex flex-col lg:flex-row items-center justify-center gap-6 mt-2">
                <div class="flex flex-col items-center">
                    <div id="donutICR3" class="w-[160px] h-[160px]"></div>
                    <div class="graph-title-text-sm text-white text-center rounded-md py-1.5 px-3 text-sm shadow-md">
                        UNDER PROCESS
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>




<div class="lg:col-span-2">
    <div class="kt-card h-full">
        <div class="kt-card-content flex flex-col place-content-center gap-5">

            <!-- Chart Title -->
            <div class="flex justify-center">
                <h2 class="text-center">
                    2- Construction of Water Storage Tanks:
                </h2>
            </div>

            <!-- Chart Container -->
            <div id="watercourseChart_2" class="w-full h-[450px]"></div>

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

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



     {{-- section 3 --}}
    <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-1">
    <div class="kt-card h-full">
        <div class="kt-card-content flex flex-col items-center justify-center p-6 gap-6">

            <!-- Gauge Chart -->
            <div id="watercourseGauge_3" class="w-full max-w-[400px]"></div>
             <div class="watercourseGauge-value">
                <span>0</span>
                <span>47,000</span>
            </div>

            <!-- Gauge Label -->
            <div class="graph-title-text-lg text-white font-bold text-center rounded-md py-2 px-4 text-lg shadow-md">
                PLL DELIVERED
            </div>

            <!-- Donut Charts -->
            <div class="flex flex-col lg:flex-row items-center justify-center gap-6 mt-2">
                <div class="flex flex-col items-center">
                    <div id="donutICR4" class="w-[160px] h-[160px]"></div>
                    <div class="graph-title-text-sm text-white text-center rounded-md py-1.5 px-3 text-sm shadow-md">
                        UNDER PROCESS
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>




<div class="lg:col-span-2">
    <div class="kt-card h-full">
        <div class="kt-card-content flex flex-col place-content-center gap-5">

            <!-- Chart Title -->
            <div class="flex justify-center">
                <h2 class="text-center">
                    3- Provision of Precision Laser Land Leveler
                </h2>
            </div>

            <!-- Chart Container -->
            <div id="watercourseChart_3" class="w-full h-[450px]"></div>

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

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


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

@section('scripts')
    @vite('resources/js/app.js')
@endsection

</rewritten_file>