@extends('layouts.app')

@section('dashboard-title')
    <div class="flex items-center justify-between w-full">
    <!-- Centered Title -->
    <h3 class="flex-1">STREAM BANK STABILIZATION - PROGRESS DASHBOARD</h3>
     <span class="me-5 pe-1 dashboard-date">
        Updated: {{ $dashboardDate->format('F d, Y') }}
    </span>
</div>
@endsection
@section('extra_margin', 'style=margin-top:32px;')

@section('content')
    <div id="loading-overlay">
        <div class="spinner"></div>
    </div>
    <!-- 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">
                            <!-- Financial Year 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">
                                        Financial Year
                                    </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">
                                        <!-- populated dynamically -->
                                    </ul>
                                </div>
                            </div>

                            <!-- 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" value="Completed"
                                                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" value="Under Progress"
                                                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>

                            <!-- structure 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">
                                        Structure
                                    </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="structure-select-all" type="checkbox"
                                                class="form-check-input w-4 h-4 border-gray-300 rounded focus:ring-0"
                                                checked>
                                            <label for="structure-select-all"
                                                class="ms-2 text-gray-700 text-sm font-medium">Select All</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>
            @can('dataset export')
                <div class="flex items-center ml-auto me-2 export-btn-box">
                    <a href="{{ route('export.streambankstabilization') }}">
                        <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>
                            Dataset
                        </button>
                    </a>
                </div>
            @endcan
            <!-- 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-2.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 id="targets"></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 id="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 id="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 -->
                        <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 id="avg_days"></h2>
                            </div>
                            <p>Commencement to Commissioning</p>
                        </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%">
                                    Average Irrigated Area (Acres)
                                </h4>
                                <h2 id="avg_irrigation_area"></h2>
                            </div>
                        </div>
                    </div>


                </div>

                <div class="watercourses-section2 space-y-2">
                    <div class="kt-card">
                        <div class="flex justify-center card-head-title" 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 class="chart-wrapper">

                                <div id="achievedChart">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="kt-card">
                        <div class="flex justify-center card-head-title" 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 class="chart-wrapper">

                                <div id="monthlyPerformanceChart"></div>
                            </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="financial-progress">
                                <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);" id="total_released_amount"></h2>
                                <div class="text-end" style="width: 45%">
                                    <h4>
                                        PROJECT SHARE RELEASED
                                    </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);" id="total_worderOrder_amount"></h2>
                                <div class="text-end" style="width: 45%">
                                    <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" id="project_share"></h2>
                                <div class="text-end" style="width: 45%">
                                    <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" id="farmer_share_received"></h2>
                                <div class="text-end" style="width: 45%">
                                    <h4>
                                        FARMER's SHARE RECEIVED
                                    </h4>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="kt-card mt-3">
                        <div class="flex justify-center card-head-title" 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 class="chart-wrapper">

                                <div id="watercourseChart_2">
                                </div>
                            </div>
                        </div>

                    </div>
                </div>


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

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

@section('scripts')
    @vite('resources/js/component-a/stream-bank.js')
@endsection

</rewritten_file>