@extends('layouts.app')
@section('dashboard-title')
    <h3>WST - 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 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-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-wst-dashboard="true">

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

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

                                    <x-dropdown-filter
                                        title="District"
                                        name="district"
                                        :api="'/api/district/list'"
                                        dependsOn="division"
                                        :options="[]"
                                        searchable="true" />

                                    <x-dropdown-filter
                                        title="Tehsil"
                                        name="tehsil"
                                        :api="'/api/tehsil/list'"
                                        dependsOn="district"
                                        :options="[]"
                                        searchable="true" />

                                    <!-- <x-dropdown-filter
                                        title="Financial Year"
                                        name="financial_year"
                                        :options="[]"
                                        searchable="true" /> -->


                                    <!-- <x-dropdown-filter title="Canal" :options="['Select All', 'Canal 1', 'Canal 2']"
                                        searchable="true" />

                                    <x-dropdown-filter title="Status" :options="['Select All', 'Active', 'Inactive']"
                                        searchable="true" />

                                    <x-dropdown-filter title="Search" :options="['Select All', 'Search1', 'Search2']"
                                        searchable="true" /> -->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        @can('data export')
        <div class="flex items-center ml-auto me-2 export-white">
            <a href="{{ url('/api/export-wst') }}"
                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="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">
                        <div class="text-center">
                            <h4>PROJECT TARGETS</h4>
                        </div>
                        <!-- Chart Title -->
                        <div class="flex justify-between items-center">
                            <h4>PC-1</h4>
                            <h2 id="pc1Targets"></h2>
                        </div>
                        <div class="flex justify-between items-center">
                            <h4>AWP&B</h4>
                            <h2 id="AWPBTargets"></h2>
                        </div>
                    </div>

                </div>

                <div class="kt-card wst-card" data-type="totalWst" style="cursor: pointer;">
                    <!-- 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%">
                                COMPLETED
                            </h4>
                            <h2 id="totalWst"></h2>
                        </div>
                    </div>
                </div>




                <div class="kt-card wst-card" style="background-color:#FFB300; cursor: pointer;" data-type="atWODStage">
                    <!-- 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%">
                                UNDER PROGRESS AT WORK ORDER STAGE
                            </h4>
                            <h2 id="atWODStage" style="color: #000000;font-size:3.75em">
                                </h3>
                        </div>
                    </div>
                </div>


                <div class="kt-card wst-card" data-type="WODPending" style="cursor: pointer;">
                    <!-- Chart Title -->
                    <div class="kt-card-content watercourses-left-card3 flex flex-col place-content-center" style="background-color:#FFF !important">
                        <div class="flex justify-between items-center">
                            <h4 style="width: 50%">
                                WORK ORDER PENDING
                            </h4>
                            <h2 id="WODPending" style="color: #FFB300;font-size:2.25em !important"></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 id="watercourseChart" class="w-full h-[450px]"></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 LINED WATERCOURSES COMPARISON
                        </h3>
                    </div>
                    <div class="kt-card-content flex flex-col place-content-center">

                        <!-- Chart Title -->


                        <!-- Chart Container -->
                        <div id="monthlyPerformanceChart" 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="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="projectShareReleased"></h2>
                            <div class="text-end" style="width: 50%">
                                <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="totalWorkOrderAmount"></h2>
                            <div class="text-end" style="width: 50%">
                                <h4>
                                    TOTAL WORK ORDER 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);" id="projectShare"></h2>
                            <div class="text-end" style="width: 50%">
                                <h4>
                                    PROJECT SHARE
                                </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="farmerShareReceived"></h2>
                            <div class="text-end" style="width: 50%">
                                <h4>
                                    FARMER's SHARE RECEIVED
                                </h4>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- <div class="kt-card mt-3">
                    <div class="kt-card-content flex flex-col place-content-center">

                        <div id="watercourseChart_2" class="w-full h-[450px]"></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">
                            YEAR WISE RELEASED AMOUNT
                        </h3>
                    </div>
                    <div class="kt-card-content flex flex-col place-content-center">

                        <!-- Chart Title -->


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

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


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

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

<!-- District-wise Summary Modal -->
<div id="wstModal" class="model hidden management">
    <div class="modal-content kt-scrollable-y-auto">
        <div class="modal-header">
            <h2 id="modalTitle">District Wise</h2>
            <button id="closeModal">✕</button>
        </div>
        <div class="modal-body">
            <div class="kt-container-fluid">
                <div class="grid gap-5 lg:gap-1.5 mb-5">
                    <table id="districtWstTable" class="table w-full">
                        <thead>
                            <!-- Dynamic financial-year headers will be inserted here -->
                        </thead>
                        <tbody>
                            <!-- District-wise rows will be inserted here dynamically -->
                        </tbody>
                        <tfoot class="bg-gray-200 font-bold" style="font-weight: 600; background-color:#f2f2f2">
                            <!-- Sub Total row will be inserted here -->
                        </tfoot>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

<style>
    .modal-body {
        padding: 0 !important;
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }

    .model.management .modal-content {
        width: 50% !important;
        /* increase from 40% to 70% */
        max-width: 90% !important;
        /* optional, keeps it from exceeding 90% of screen width */
        max-height: 90%;
        background: #fff;
        border-radius: 0.5rem;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
        transform: scale(0.95);
        opacity: 0;
        transition: transform 0.3s ease, opacity 0.3s ease;
    }

    .table {
        width: 100%;
        border-collapse: collapse;
        font-family: "Open Sans" !important;
    }

    .table th,
    .table td {
        padding: 0.65rem 1rem;
        border: 1px solid #e2e8f0;
        text-align: center;
        font-size: 0.875rem;
    }

    .table thead th {
        background-color: #1D3319;
        /* Primary blue */
        color: #fff;
        font-weight: 600;
    }

    .table tbody tr:hover {
        background-color: #f2f2f2;
        /* Light hover */
        cursor: pointer;
    }

    .dataTables_wrapper .dataTables_filter input {
        border: 1px solid #cbd5e1;
        padding: 0.25rem 0.5rem;
        border-radius: 0.25rem;
        width: 200px;
    }

    .dataTables_wrapper .dataTables_length select {
        border: 1px solid #cbd5e1;
        border-radius: 0.25rem;
        padding: 0.25rem;
    }

    #districtWstTable td,
    #districtWstTable th,
    #districtWstTable tfoot td {
        text-align: left !important;
    }
</style>

@section('scripts')
@vite('resources/js/pages/wst.js')
@vite('resources/js/generic-filter.js')
@endsection

</rewritten_file>