@extends('layouts.app')

@section('dashboard-title')
<h3>NPIWC-II PROGRESS DASHBOARD</h3>
@endsection

@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 bg-background filter-container flex items-stretch grow nav-color">
        <!-- 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-dashboard="true">

                        <x-dropdown-filter
                            title="Zone/Unit"
                            name="zone"
                            :api="'/api/zone/list'"
                            :options="[]"
                            searchable="true" />

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

        <!-- Right section: Download icon -->
        @can('data export')
        <div class="flex items-center ml-auto me-2 export-white">
            <a href="{{ url('/api/export-dashboard') }}"
                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-1">
                <div class="kt-card h-full">
                    <div class="kt-card-content flex flex-col items-center justify-center">

                        <!-- Gauge Chart -->
                        <div class="w-full" style="margin-top: 10px;">
                            <div id="watercourseGauge_1"></div>

                            <!-- Start and End values -->
                            <div class="gauge-labels">
                                <span id="watercourseCurrent">0</span>
                                <span id="watercourseTarget"></span>
                            </div>
                        </div>





                        <!-- Gauge Label -->
                        <div class="graph-title-text-lg text-white text-center rounded-md py-2 px-4 text-lg shadow-md" style="width: 85%">
                            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">

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

                        <!-- Chart Container -->
                        <!-- previously added class class="w-full h-[450px]" -->
                        <div id="watercourseChart" class="w-full h-full"></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" style="background-color: #CFE2F1;">

                        <!-- Gauge Chart -->
                        <div class="w-full" style="margin-top: 10px;">
                            <div id="watercourseGauge_2"></div>

                            <div class="gauge-labels">
                                <span id="WSTCurrent">0</span>
                                <span id="WSTTarget"></span>
                            </div>

                        </div>

                        <!-- Gauge Label -->
                        <div class=" graph-title-text-lg text-white text-center rounded-md py-2 px-4 text-lg shadow-md" style="width: 85%">
                            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" style="background-color: #CFE2F1;">
                <div class="kt-card h-full" style="background-color: #CFE2F1;">
                    <div class="kt-card-content flex flex-col place-content-center">

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

                        <!-- Chart Container -->
                        <div id="watercourseChart_2" class="w-full h-full"></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 class="w-full" style="margin-top: 10px;">
                            <div id="watercourseGauge_3"></div>

                            <div class="gauge-labels">
                                <span id="pLLCurrent">0</span>
                                <span id="pLLTarget">47,000</span>
                            </div>
                        </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" style="width: 85%">
                            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">

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

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

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


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


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

@endsection

@section('scripts')
<!-- @vite('resources/js/pages/dashboard.js') -->
@vite('resources/js/generic-filter.js')

@endsection

</rewritten_file>
<!-- <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> -->


<!-- <script src="{{ asset('js/dashboard.js') }}"></script> -->