@extends('layouts.app')

@section('dashboard-title')
    <h3 class="">INSTALLATION OF TUBE WELL - PROGRESS 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>

                             <!-- Category 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">
            Category
        </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="category-all" type="checkbox"
                    class="form-check-input w-4 h-4 border-gray-300 rounded focus:ring-0"
                    checked>
                <label for="category-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="flex justify-between gap-5 lg:gap-7.5 items-stretch">

                <div class="watercourses-section1 lg:col-span-1 space-y-2">
                    <div class="kt-card">
                        <div class="kt-card-content watercourses-left-card1 flex flex-col place-content-center">
                            <!-- Chart Title -->
                            <div class="flex justify-between items-center">
                                <h4>PROJECT TARGETS</h4>
                                <h2>5000</h2>
                            </div>
                        </div>

                    </div>

                    <div class="kt-card">
                        <!-- Chart Title -->
                        <div class="kt-card-content watercourses-left-card2 flex flex-col place-content-center">

                            <!-- Chart Title -->
                            <div class="flex justify-between items-center">
                                <h4 style="width: 50%">
                                    TOTAL CONSTRUCTED
                                </h4>   
                                <h2 class="total_constructed">{{ $total_constructed }}</h2>
                            </div>
                        </div>
                    </div>



                    <div class="kt-card">
                        <!-- Chart Title -->
                        <div class="kt-card-content watercourses-left-card3 flex flex-col place-content-center">
                            <div class="flex justify-between items-center">
                                <h4 style="width: 50%">
                                    UNDER- CONSTRUCTION
                                </h4>
                                <h2 class="under_constructed">{{ $under_constructed }}</h2>
                            </div>
                        </div>
                    </div>
                    <div class="kt-card">
                        <!-- Chart Title -->
                        <div class="kt-card-content watercourses-left-card4 flex flex-col place-content-center">
                            <div class="flex justify-between items-center">
                                <h4 style="width: 50%">
                                    DECLARED STUCK UP
                                </h4>
                                <h2>0</h2>
                            </div>
                        </div>
                    </div>
                    <div class="kt-card">
                        <!-- Chart Title -->
                        <div class="kt-card-content watercourses-left-card4 flex flex-col place-content-center">
                            <div class="flex justify-between items-center">
                                <h4 style="width: 50%">
                                    AT WORK ORDER STAGE
                                </h4>
                                <h2>0</h2>
                            </div>
                        </div>
                    </div>
                    <div class="kt-card">
                        <!-- Chart Title -->
                          @php
                            $avg_days_r = round($avg_days, 1);
                        @endphp
                        <div class="kt-card-content watercourses-left-card4 flex flex-col place-content-center">
                            <div class="flex justify-between items-center">
                                <h4 style="width: 50%">
                                    AVERAGE DAYS
                                </h4>
                                <h2>{{ $avg_days_r }}</h2>
                            </div>
                            <p>Commencement to Commissioning</p>
                        </div>
                    </div>
                    <div class="kt-card">
                        <!-- Chart Title -->
                         @php
                            $avg_irrigation_area_r = round($avg_irrigation_area, 0);
                        @endphp
                        <div class="kt-card-content watercourses-left-card4 flex flex-col place-content-center">
                            <div class="flex justify-between items-center">
                                <h4 style="width: 50%">
                                    Average Irrigated Area (Acres)
                                </h4>
                                <h2 class="avg_irrigation_area">{{ $avg_irrigation_area_r }}</h2>
                            </div>
                        </div>
                    </div>
                    <div class="kt-card">
                        <!-- Chart Title -->
                        @php
                            $discharge_lps = round($discharge_lps, 0);
                        @endphp
                        <div class="kt-card-content watercourses-left-card4 flex flex-col place-content-center">
                            <div class="flex justify-between items-center">
                                <h4 style="width: 50%">
                                    Average Discharge (LPS)
                                </h4>
                                <h2 class="discharge_lps">{{ $discharge_lps }}</h2>
                            </div>
                        </div>
                    </div>

                    <div class="kt-card">
                        <!-- Chart Title -->
                        <div class="kt-card-content watercourses-left-card4 flex flex-col place-content-center">
                            <h3>Tube Well Categories</h3>
                            <div id="categoryCountsContainer">
                            @foreach ($categoryCounts as $categoryCount)
                                <div class="flex justify-between items-center">    
                                    <h3 class="text-success">{{ $categoryCount['category_of_scheme'] }}</h3>
                                    <h2>{{ $categoryCount['count'] }}</h2>
                                </div>
                            @endforeach
                        </div>
                            
                        </div>
                    </div>


                </div>

                <div class="watercourses-section2 space-y-2">
                    <div class="kt-card">
                        <div class="flex justify-center" style="background-color: var(--danger-color); color: var(--mono);border-top-left-radius: calc(var(--radius) + 4px);
                                   border-top-right-radius: calc(var(--radius) + 4px);">
                            <h3 class="text-center">
                                TARGET vs ACHIEVED
                            </h3>
                        </div>
                        <div class="kt-card-content flex flex-col place-content-center">

                            <!-- Chart Title -->


                            <!-- Chart Container -->
                            <div id="achievedChart" data-categories='@json($achievedCount->pluck("financial_year"))'
                                data-values='@json($achievedCount->pluck("total_records"))' class="w-full h-[350px]">
                            </div>
                        </div>
                    </div>
                    <div class="kt-card">
                        <div class="flex justify-center" style="background-color: var(--primary-color); color: var(--mono);border-top-left-radius: calc(var(--radius) + 4px);
                                   border-top-right-radius: calc(var(--radius) + 4px);">
                            <h3 class="text-center">
                                MONTH WISE PROGRESS COMPARISON
                            </h3>
                        </div>
                        <div class="kt-card-content flex flex-col place-content-center">

                            <!-- Chart Title -->


                            <!-- Chart Container -->
                            <div id="monthlyPerformanceChart" data-categories='@json($months)'
                                data-series='@json($monthlySeries)' class="w-full h-[450px]"></div>

                        </div>
                    </div>

                </div>

                <div class="watercourses-section3 space-y-2">
                    <div class="kt-card">
                        <!-- Chart Title -->
                        <div class="kt-card-content watercourses-right-card1 flex flex-col place-content-center">
                            <div class="flex justify-between items-center">
                                <h4>
                                    FINANCIAL PROGRESS
                                </h4>
                            </div>
                        </div>
                    </div>
                    <div class="kt-card">
                        <!-- Chart Title -->
                        <div class="kt-card-content watercourses-right-card2 flex flex-col place-content-center">
                            <div class="flex justify-between items-center">
                                <h2 style="color: var(--mono);" class="total_released_amount">{{ $total_released_amount }}</h2>
                                <div class="text-end" style="width: 40%">
                                    <h4>
                                        TOTAL RELEASED AMOUNT
                                    </h4>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="kt-card">
                        <!-- Chart Title -->
                        <div class="kt-card-content watercourses-right-card3 flex flex-col place-content-center">
                            <div class="flex justify-between items-center">
                                <h2 style="color: var(--mono);" class="total_worderOrder_amount">{{ $total_worderOrder_amount }}</h2>
                                <div class="text-end" style="width: 40%">
                                    <h4>
                                        TOTAL WORK ORDER AMOUNT
                                    </h4>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="kt-card">
                        <!-- Chart Title -->
                        <div class="kt-card-content watercourses-left-card4 flex flex-col place-content-center">
                            <div class="flex justify-between items-center">
                                <h2 style="color: #1a73e8" class="project_share">{{ $project_share }}</h2>
                                <div class="text-end" style="width: 40%">
                                    <h4>
                                        PROJECT SHARE
                                    </h4>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="kt-card">
                        <!-- Chart Title -->
                        <div class="kt-card-content watercourses-left-card4 flex flex-col place-content-center">
                            <div class="flex justify-between items-center">
                                <h2 style="color: #1a73e8" class="farmer_share_received">{{ $farmer_share_received }}</h2>
                                <div class="text-end" style="width: 40%">
                                    <h4>
                                        FARMER's SHARE RECEIVED
                                    </h4>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="kt-card mt-3">
                        <div class="flex justify-center" style="background-color: var(--primary-color); color: var(--mono);border-top-left-radius: calc(var(--radius) + 4px);
                                   border-top-right-radius: calc(var(--radius) + 4px);">
                            <h3 class="text-center">
                                YEAR WISE RELEASED AMOUNT
                            </h3>
                        </div>
                        <div class="kt-card-content flex flex-col place-content-center">

                            <div id="watercourseChart_2"
                                data-categories='@json($year_wise_released_amount->pluck("financial_year"))'
                                data-values='@json($year_wise_released_amount->pluck("ts_amount_govt_share_80"))'>
                            </div>
                        </div>

                    </div>
                </div>


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

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

@section('scripts')
    @vite('resources/js/component-b/installation.js')
@endsection

</rewritten_file>