@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 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">
                        @include('includes.admin-forms-navbar')
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- End of Inner Navbar -->

<!-- Container -->
<div class="kt-container-fluid">
    <div class="grid mb-5">
        <div class="flex justify-between items-center">
            <!-- Search Box on Left -->
            <div id="customSearch" class="flex items-center gap-2">
                {{-- <label for="zoneSearch" class="font-medium text-gray-700">Search:</label> --}}
                <input type="text" id="search" placeholder="Search Watercourses"
                    class="px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:bg-primary">
            </div>

            <!-- Add New Zone button -->
            <button type="button" id="openModal"
                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">
                + Add New WST
            </button>
        </div>


        <table id="watercourse_table" class="divide-y divide-gray-200">
            <thead class="bg-primary">
                <tr>
                    <!-- <th class="px-4 py-2 text-left text-sm font-semibold text-gray-600 text-mono">SR.</th>
                    <th class="px-4 py-2 text-left text-sm font-semibold text-gray-600 text-mono">Watercourse</th>
                    <th class="px-4 py-2 text-left text-sm font-semibold text-gray-600 text-mono">Created At</th>
                    <th class="px-4 py-2 text-left text-sm font-semibold text-gray-600 text-mono">Actions</th> -->
                    <th class="px-4 py-2 text-left text-sm font-semibold text-gray-600 text-mono">ID</th>
                    <th class="px-4 py-2 text-left text-sm font-semibold text-gray-600 text-mono">Status</th>
                    <th class="px-4 py-2 text-left text-sm font-semibold text-gray-600 text-mono">Zone</th>
                    <th class="px-4 py-2 text-left text-sm font-semibold text-gray-600 text-mono">Division</th>
                    <th class="px-4 py-2 text-left text-sm font-semibold text-gray-600 text-mono">District</th>
                    <th class="px-4 py-2 text-left text-sm font-semibold text-gray-600 text-mono">Tehsil</th>
                    <th class="px-4 py-2 text-left text-sm font-semibold text-gray-600 text-mono">Scheme Name</th>
                    <th class="px-4 py-2 text-left text-sm font-semibold text-gray-600 text-mono">UC</th>
                    <th class="px-4 py-2 text-left text-sm font-semibold text-gray-600 text-mono">Village</th>
                    <th class="px-4 py-2 text-left text-sm font-semibold text-gray-600 text-mono">Category</th>
                    <th class="px-4 py-2 text-left text-sm font-semibold text-gray-600 text-mono">Type of Lining</th>
                    <th class="px-4 py-2 text-left text-sm font-semibold text-gray-600 text-mono">Financial Year</th>
                    <th class="px-4 py-2 text-left text-sm font-semibold text-gray-600 text-mono">Work Order Cancelled</th>
                    <th class="px-4 py-2 text-left text-sm font-semibold text-gray-600 text-mono">Actions</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-200">
                
            </tbody>
        </table>
    </div>
</div>
<!-- End of Container -->

<!-- Modal -->
<div id="modal"
    class="zone-model hidden fixed inset-0 bg-black/50 flex items-center justify-center p-4 z-50">

    <div class="watercourse-form-model modal-content kt-scrollable-y-auto bg-white rounded-lg w-full max-w-3xl max-h-[90vh] overflow-hidden flex flex-col">

        <!-- Modal Header -->
        <div class="modal-header flex justify-between items-center p-4 border-b">
            <h2 id="modalTitle" class="text-lg font-semibold">Watercourse</h2>
            <button id="closeModal" class="text-xl">✕</button>
        </div>

        <!-- Modal Body (Scrollable) -->
        <div class="modal-body overflow-y-auto p-4">

            <!-- ===== Scrollable Tabs ===== -->
            <div class="tabs-wrapper">
                <ul id="formTabs" class="tabs-list">

                    <li class="tab-item">
                        <a href="#" data-step="step1" class="tab-link active">Identification</a>
                    </li>

                    <li class="tab-item">
                        <a href="#" data-step="step2" class="tab-link">Profile-Info</a>
                    </li>

                    <li class="tab-item">
                        <a href="#" data-step="step3" class="tab-link">Issuance of TS</a>
                    </li>

                    <li class="tab-item">
                        <a href="#" data-step="step4" class="tab-link">Milestone Payments</a>
                    </li>

                    <li class="tab-item">
                        <a href="#" data-step="step5" class="tab-link">Verified Data</a>
                    </li>

                </ul>
            </div>

            <!-- ===== END Tabs ===== -->

            <!-- ===== TAB CONTENT ===== -->
            <form id="wcForm" enctype="multipart/form-data">
                <div id="step1" class="tab-content">

                    <!-- ZONE -->
                    <div class="flex items-center justify-between gap-4 mb-3">
                        <label class="w-40 text-gray-700 font-medium">Status</label>
                        <input id="wc_status" name="wc_status" type="text" placeholder="Ts Pending"
                            class="col-span-2 border p-2 rounded w-full">
                    </div>

                    <!-- <div class="flex items-center justify-between gap-4 mb-3">

                    <label class="w-40 text-gray-700 font-medium">Zone</label>
                    <input id="status" type="text" placeholder="KP"
                        class="col-span-2 border p-2 rounded w-full">
                </div> -->

                    <!-- <div class="grid grid-cols-3 items-center gap-4 mb-3">
                    <label class="col-span-1 text-left">Division*</label>
                    <select id="division" class="select2 col-span-2 border p-2 rounded w-full">
                        <option value="">Dera Ismail Khan</option>
                        <option value="1">khyber</option>
                        <option value="2">Bannu</option>
                        <option value="3">Hazara</option>
                    </select>
                </div> -->
                    <!-- <div class="grid grid-cols-3 items-center gap-4 mb-3">
                    <label class="col-span-1 text-left">District*</label>
                    <select id="division" class="select2 col-span-2 border p-2 rounded w-full">
                        <option value="">Dera Ismail Khan</option>
                        <option value="1">Hazara</option>
                        <option value="2">khyber</option>
                        <option value="3">Bannu</option>
                    </select>
                </div> -->
                    <!-- <div class="grid grid-cols-3 items-center gap-4 mb-3">
                    <label class="col-span-1 text-left">Tehsil*</label>
                    <select id="division" class="select2 col-span-2 border p-2 rounded w-full">
                        <option value="">Dera Ismail Khan</option>
                        <option value="1">Bannu</option>
                        <option value="2">Hazara</option>
                        <option value="3">khyber</option>
                    </select>
                </div> -->
                    <div class="grid grid-cols-3 items-center gap-4 mb-3">
                        <label class="col-span-1 text-left">Zone*</label>
                        <select id="zoneSelect" name="zone_id" class="col-span-2 border p-2 rounded w-full"></select>
                    </div>

                    <div class="grid grid-cols-3 items-center gap-4 mb-3">
                        <label class="col-span-1 text-left">Division*</label>
                        <select id="divisionSelect" name="division_id" class="col-span-2 border p-2 rounded w-full"></select>
                    </div>

                    <div class="grid grid-cols-3 items-center gap-4 mb-3">
                        <label class="col-span-1 text-left">District*</label>
                        <select id="districtSelect" name="district_id" class="col-span-2 border p-2 rounded w-full"></select>
                    </div>

                    <div class="grid grid-cols-3 items-center gap-4 mb-3">
                        <label class="col-span-1 text-left">Tehsil*</label>
                        <select id="tehsilSelect" name="tehsil_id" class="col-span-2 border p-2 rounded w-full"></select>
                    </div>

                    <div class="grid grid-cols-3 items-center gap-4 mb-3">
                        <label class="col-span-1 text-left">Catogary of Wc Improvement*</label>
                        <select id="wc_category" name="wc_category" class="select2 col-span-2 border p-2 rounded w-full">
                            <option value=""></option>
                            <option value="regular_new" id="regular_new">Regular(New)</option>
                            <option value="additional_lining" id="additional_lining">Additional lining</option>
                            <option value="rehabilitation_20yrs" id="rehabilitation_20yrs">20 Years Old(Rehabiliation/Restoration) </option>
                        </select>
                    </div>
                    <div class="grid grid-cols-3 items-center gap-4 mb-3">
                        <label class="col-span-1 text-left">Type of Lining*</label>
                        <select id="type_of_lining_id" name="type_of_lining_id" class="select2 col-span-2 border p-2 rounded w-full">
                            <!-- <option value="">Dera Ismail Khan</option>
                            <option value="1">Bannu</option> -->
                        </select>
                    </div>
                    <div class="flex items-center justify-between gap-4 mb-3">
                        <label class="w-40 text-gray-700 font-medium">Watercourse Scheme Name</label>
                        <input id="scheme_name" name="scheme_name" type="text" placeholder=""
                            class="col-span-2 border p-2 rounded w-full">
                    </div>
                    <div class="flex items-center justify-between gap-4 mb-3">
                        <label class="w-40 text-gray-700 font-medium">UC*</label>
                        <input id="uc" name="uc" type="text" placeholder=""
                            class="col-span-2 border p-2 rounded w-full">
                    </div>
                    <div class="flex items-center justify-between gap-4 mb-3">
                        <label class="w-40 text-gray-700 font-medium">Village*</label>
                        <input id="village" name="village" type="text" placeholder=""
                            class="col-span-2 border p-2 rounded w-full">
                    </div>

                    <!-- Irrigation Type -->
                    <div class="grid grid-cols-3 items-center gap-4 mb-3">
                        <label class="col-span-1 text-left">Type of Irrigation Source*</label>
                        <select id="type_of_irrigation_id" name="type_of_irrigation_id" class="select2 col-span-2 border p-2 rounded w-full">
                            <option value="">Select Irrigation Type</option>
                            <option value="2">Non-Canal Command Area</option>
                            <option value="1">Canal Command Area</option>
                        </select>
                    </div>
                    <input type="hidden" id="irrigation_class" name="irrigation_class">

                    <!-- Non-Canal Source Dropdown -->
                    <div class="grid grid-cols-3 items-center gap-4 mb-3" id="non_canal_source_container" style="display:none;">
                        <label class="col-span-1 text-left">Non Canal Source*</label>
                        <select id="non_canal_source_type" name="non_canal_source_type" class="select2 col-span-2 border p-2 rounded w-full">
                            <option value="">Select Source</option>
                            <option value="Tube Well">Tube Well</option>
                            <option value="Nallah">Nallah</option>
                            <option value="Dug Well">Dug Well</option>
                            <option value="Stream">Stream</option>
                            <option value="Spring">Spring</option>
                            <option value="River">River</option>
                            <option value="Other Source">Other Source</option>
                        </select>
                    </div>

                    <!-- Source Name Input -->
                    <div class="grid grid-cols-3 items-center gap-4 mb-3" id="source_name_container" style="display:none;">
                        <label class="col-span-1 text-left">Source Name*</label>
                        <input type="text" id="source_name" name="source_name" class="col-span-2 border p-2 rounded w-full" placeholder="Enter source name">
                    </div>

                    <!-- Canal Fields -->
                    <div id="canal_fields_container" style="display:none;">
                        <div class="grid grid-cols-3 items-center gap-4 mb-3">
                            <label class="col-span-1 text-left">Canal Type</label>
                            <select id="canal_type" name="canal_type" class="select2 col-span-2 border p-2 rounded w-full">
                                <option value="">Select Canal Type</option>
                                <option value="Perennial Canal">Perennial Canal</option>
                                <option value="Non-Perennial Canal">Non-Perennial Canal</option>
                            </select>
                        </div>
                        <div class="grid grid-cols-3 items-center gap-4 mb-3">
                            <label class="col-span-1 text-left">Canal</label>
                            <input type="text" id="canal" name="canal" class="col-span-2 border p-2 rounded w-full">
                        </div>
                        <div class="grid grid-cols-3 items-center gap-4 mb-3">
                            <label class="col-span-1 text-left">Distri</label>
                            <input type="text" id="distri" name="distri" class="col-span-2 border p-2 rounded w-full">
                        </div>
                        <div class="grid grid-cols-3 items-center gap-4 mb-3">
                            <label class="col-span-1 text-left">Branch</label>
                            <input type="text" id="branch" name="branch" class="col-span-2 border p-2 rounded w-full">
                        </div>
                        <div class="grid grid-cols-3 items-center gap-4 mb-3">
                            <label class="col-span-1 text-left">Minor</label>
                            <input type="text" id="minor" name="minor" class="col-span-2 border p-2 rounded w-full">
                        </div>
                    </div>


                    <div class="grid grid-cols-3 items-center gap-4 mb-3">
                        <label class="col-span-1 text-left">
                            Financial Year
                        </label>
                        <select id="financial_year" name="financial_year" class="select2 col-span-2 border p-2 rounded w-full">
                            <option>Select Financail Year</option>
                            <option value="2024-25">2024-25</option>
                            <option value="2023-24">2023-24</option>
                            <option value="2022-23">2022-23</option>
                            <option value="2021-22">2021-22</option>
                            <option value="2020-21">2020-21</option>
                            <option value="2019-20">2019-20</option>
                        </select>
                    </div>

                    <div class="flex items-center justify-between gap-4 mb-3">
                        <label class="w-40 text-gray-700 font-medium">Work Order Cancelled</label>
                        <input id="work_order_cancelled" name="work_order_cancelled" type="text" placeholder="Cancelled"
                            class="col-span-2 border p-2 text-center rounded w-full">
                    </div>

                    <div class="flex items-center justify-between gap-4 mb-3">
                        <label class="w-40 text-gray-700 font-medium"> Cancellation Reason*</label>
                        <input id="cancellation_reason" name="cancellation_reason" type="text" placeholder=""
                            class="col-span-2 border p-2 text-center rounded w-full">
                    </div>

                    <div class="flex items-center justify-between gap-4 mb-3">
                        <label class="w-40 text-gray-700 font-medium">If any comment related to identification stage*</label>
                        <input id="wc_remarks" name="wc_remarks" type="text" placeholder=""
                            class="col-span-2 border p-2 rounded w-full">
                    </div>
                    <label class="inline-flex gap-2 items-center">
                        <span class="">Completed</span>
                        <input type="checkbox" class="" />
                    </label>
                </div>

                <div id="step2" class="tab-content">
                    <!-- COordinates -->

                    <div class="flex items-center justify-between gap-4 mb-3">
                        <label class="w-40 text-gray-700 font-medium">Coordinates</label>
                        <input
                            type="text"
                            id="coordinates"
                            name="coordinates"
                            placeholder=" "
                            class="col-span-2 border p-2 rounded w-full" />
                    </div>

                    <div class="flex items-center justify-between gap-4 mb-3">
                        <label class="w-40 text-gray-700 font-medium">Picture of Watercourse-before Improvement</label>

                        <div class="w-full relative">
                            <!-- Hidden file input -->
                            <input
                                type="file"
                                id="picture"
                                name="picture"
                                class="hidden"
                                accept="image/*" />

                            <!-- Visible custom button -->
                            <div
                                onclick="document.getElementById('pictureInput').click()"
                                class="w-full border border-gray-300 rounded px-3 py-2 text-center cursor-pointer bg-gray-50 relative">
                                <svg
                                    xmlns="http://www.w3.org/2000/svg"
                                    class="w-6 h-6 text-gray-500 mx-auto"
                                    viewBox="0 0 24 24"
                                    fill="currentColor">
                                    <path
                                        d="M12 5c-3.86 0-7 3.14-7 7s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm0-3c1.1 0 2 .9 2 2h4l1.25 2.5H22c1.1 0 2 .9 2 2v10c0 
                                      1.1-.9 2-2 2H2c-1.1 0-2-.9-2-2V8c0-1.1.9-2 2-2h2.75L6 4h4c0-1.1.9-2 2-2z" />
                                </svg>
                                <span class="text-gray-500 block mt-1 text-sm"></span>
                            </div>
                        </div>
                    </div>

                    <div class="flex items-center justify-between gap-4 mb-3">
                        <label class=" w-40 text-gray-700 font-medium">WUA Registration No.</label>
                        <input
                            type="text"
                            id="reg_no"
                            name="reg_no"
                            placeholder=" "
                            class="col-span-2 border p-2 rounded w-full" />
                    </div>

                    <div class="flex items-center justify-between gap-4 mb-3">
                        <label class=" w-40 text-gray-700 font-medium">WUA Registration date</label>
                        <input
                            type="date"
                            id="registration_date"
                            name="registration_date"
                            placeholder=" "
                            class="col-span-2 border p-2 rounded w-full" />
                    </div>

                    <div class="flex items-center justify-between gap-4 mb-3">
                        <label class=" w-40 text-gray-700 font-medium">Name of WUA president</label>
                        <input
                            type="text"
                            id="president_name"
                            name="president_name"
                            placeholder=" "
                            class="col-span-2 border p-2 rounded w-full" />
                    </div>

                    <div class="flex items-center justify-between gap-4 mb-3">
                        <label class=" w-40 text-gray-700 font-medium">CNIC NO. of WUA President</label>
                        <input
                            type="number"
                            id="president_cnic"
                            name="president_cnic"
                            placeholder="0"
                            class="col-span-2 border p-2 rounded w-full" />
                    </div>

                    <div class="flex items-center justify-between gap-4 mb-3">
                        <label class=" w-40 text-gray-700 font-medium">Contact No.of WUA President</label>
                        <input
                            type="number"
                            id="contact_no"
                            name="contact_no"
                            placeholder="0"
                            class="col-span-2 border p-2 rounded w-full" />
                    </div>

                    <div class="flex items-center justify-between gap-4 mb-3">
                        <label class=" w-40 text-gray-700 font-medium">total Number of Shareholders</label>
                        <input
                            type="number"
                            id="total_shareholders"
                            name="total_shareholders"
                            placeholder="0"
                            class="col-span-2 border p-2 rounded w-full" />
                    </div>

                    <div class="flex items-center justify-between gap-4 mb-3">
                        <label class=" w-40 text-gray-700 font-medium">Male-Watercourse Association Mumbers</label>
                        <input
                            type="number"
                            id="male_members"
                            name="male_members"
                            placeholder="0"
                            class="col-span-2 border p-2 rounded w-full" />
                    </div>

                    <div class="flex items-center justify-between gap-4 mb-3">
                        <label class=" w-40 text-gray-700 font-medium">Female-Watercourse Association Mumbers</label>
                        <input
                            type="number"
                            id="female_members"
                            name="female_members"
                            placeholder="0"
                            class="col-span-2 border p-2 rounded w-full" />
                    </div>

                    <div class="flex items-center justify-between gap-4 mb-3">
                        <label class=" w-40 text-gray-700 font-medium">Total Watercourse Association Members</label>
                        <input
                            type="number"
                            id="total_wc_association_members"
                            name="total_wc_association_members"
                            placeholder="0"
                            class="col-span-2 border p-2 rounded w-full" />
                    </div>


                    <div class="flex items-center justify-between gap-4 mb-3">
                        <label class=" w-40 text-gray-700 font-medium">Gross Commsnd Area(GCA)-(Acres)</label>
                        <input
                            type="number"
                            id="gca"
                            name="gca"
                            placeholder="0.00"
                            class="col-span-2 border p-2 rounded w-full" />
                    </div>

                    <div class="flex items-center justify-between gap-4 mb-3">
                        <label class=" w-40 text-gray-700 font-medium">Cultural Command Area(CCA)-(Acres)</label>
                        <input
                            type="number"
                            id="cca"
                            name="cca"
                            placeholder="0.00"
                            class="col-span-2 border p-2 rounded w-full" />
                    </div>

                    <div class="flex items-center justify-between gap-4 mb-3">
                        <label class=" w-40 text-gray-700 font-medium">Total Length of Watercourse-(Meter)</label>
                        <input
                            type="number"
                            id="cca"
                            name="cca"
                            placeholder="0.00"
                            class="col-span-2 border p-2 rounded w-full" />
                    </div>

                    <div class="flex items-center justify-between gap-4 mb-3">
                        <label class=" w-40 text-gray-700 font-medium"> Sanctioned Lining Length of Watercourse(Meter)</label>
                        <input
                            type="number"
                            id="lining_length"
                            name="lining_length"
                            placeholder="0.00"
                            class="col-span-2 border p-2 rounded w-full" />
                    </div>

                    <div class="flex items-center justify-between gap-4 mb-3">
                        <label class=" w-40 text-gray-700 font-medium">Design Dischare(Cusec)</label>
                        <input
                            type="number"
                            id="design_discharge"
                            name="design_discharge"
                            placeholder="0.00"
                            class="col-span-2 border p-2 rounded w-full" />
                    </div>

                    <div class="flex items-center justify-between gap-4 mb-3">
                        <label class=" w-40 text-gray-700 font-medium">Design Dischare(LPS)</label>
                        <input
                            type="number"
                            id="design_discharge_lps"
                            name="design_discharge_lps"
                            placeholder="0.000"
                            class="col-span-2 border p-2 rounded w-full" />
                    </div>

                    <div class="flex items-center justify-between gap-4 mb-3">
                        <label class="w-40 text-gray-700 font-medium">If any comment related to Profil Stage*</label>
                        <input id="wua_remarks" name="wua_remarks" type="text" placeholder=""
                            class="col-span-2 border p-2 rounded w-full">
                    </div>
                    <label class="inline-flex gap-2 items-center">
                        <span class="">Completed</span>
                        <input type="checkbox" class="" />
                    </label>
                </div>

                <div id="step3" class="tab-content">

                    <div class="flex items-center justify-between gap-4 mb-3">
                        <label class="w-40 text-gray-700 font-medium">In case of Revised Ts press the button to update the TS Data</label>
                        <input id="ts_status" type="text" placeholder="Revised Ts"
                            class="col-span-2 border p-2 text-center rounded w-full">
                    </div>

                    <div class="flex items-center justify-between gap-4 mb-3">
                        <label class=" w-40 text-gray-700 font-medium">Total Amount(RS.)*</label>
                        <input
                            type="number"

                            placeholder="3"
                            class="col-span-2 border p-2 rounded w-full" />
                    </div>

                    <div class="flex items-center justify-between gap-4 mb-3">
                        <label class=" w-40 text-gray-700 font-medium">Issuance Date of Govt.Share</label>
                        <input
                            type="date"
                            id="ts_date"
                            name="ts_date"
                            placeholder=""
                            class="col-span-2 border p-2 rounded w-full" />
                    </div>

                    <div class="flex items-center justify-between gap-4 mb-3">
                        <label class=" w-40 text-gray-700 font-medium">Govt Share(RS.)</label>
                        <input
                            type="number"
                            id="govt_share"
                            name="govt_share"
                            placeholder="0"
                            class="col-span-2 border p-2 rounded w-full" />
                    </div>
                    <div class="flex items-center justify-between gap-4 mb-3">
                        <label class=" w-40 text-gray-700 font-medium">Community Share(RS.)*</label>
                        <input
                            type="number"
                            id="community_share"
                            name="community_share"
                            placeholder="0"
                            class="col-span-2 border p-2 rounded w-full" />
                    </div>

                    <div class="flex items-center justify-between gap-4 mb-3">
                        <label class=" w-40 text-gray-700 font-medium">Revised Govt.Share(RS.)</label>
                        <input
                            type="date"

                            placeholder=""
                            class="col-span-2 border p-2 rounded w-full" />
                    </div>

                    <div class="flex items-center justify-between gap-4 mb-3">
                        <label class=" w-40 text-gray-700 font-medium">Work Order Date*</label>
                        <input
                            type="date"
                            id="work_order_date"
                            name="work_order_date"
                            placeholder=""
                            class="col-span-2 border p-2 rounded w-full" />

                    </div>
                    <div class="flex items-center justify-between gap-4 mb-3">
                        <label class=" w-40 text-gray-700 font-medium">if any comment related to Profile stage</label>
                        <input
                            id="ts_remarks"
                            name="ts_remarks"
                            type="text"
                            class="col-span-2 border p-2 rounded w-full"
                            placeholder=" " />
                    </div>
                    <label class="inline-flex gap-2 items-center">
                        <span class="">Completed</span>
                        <input type="checkbox" class="" />
                    </label>


                </div>

                <div id="step4" class="tab-content">

                    <div class="flex items-center justify-between gap-4 mb-3">
                        <label class="w-40 text-gray-700 font-medium">
                            WC Payment Released Criteria</label>
                        <div>
                            <select id="payment_criteria" class="select2 col-span-2 border p-2 rounded w-full">
                                <option></option>
                                <option value="Only First Milestone Released">Only First Milestone Released</option>
                                <option value="Only First and Final Payment Released">Only First and Final Payment Released</option>
                                <option value="All Milestone Payments Released">All Milestone Payment Released</option>
                            </select>
                        </div>
                    </div>

                    <!-- 1st Bill -->
                    <div class="flex items-center justify-between gap-4 mb-3">
                        <label class="w-40 text-gray-700 font-medium">1st Bill Payment (Rs.)*</label>
                        <input type="number" id="amount_1st_bill" name="amount_1st_bill" placeholder="0" class="col-span-2 border p-2 rounded w-full" />
                    </div>
                    <div class="flex items-center justify-between gap-4 mb-3">
                        <label class="w-40 text-gray-700 font-medium">1st Bill Issuance Date</label>
                        <input type="date" id="date_1st_bill" name="date_1st_bill" class="col-span-2 border p-2 rounded w-full" />
                    </div>

                    <!-- 2nd Bill -->
                    <div class="flex items-center justify-between gap-4 mb-3">
                        <label class="w-40 text-gray-700 font-medium">2nd Bill Payment (Rs.)*</label>
                        <input type="number" id="amount_2nd_bill" name="amount_2nd_bill" placeholder="0" class="col-span-2 border p-2 rounded w-full" />
                    </div>
                    <div class="flex items-center justify-between gap-4 mb-3">
                        <label class="w-40 text-gray-700 font-medium">2nd Bill Issuance Date</label>
                        <input type="date" id="date_2nd_bill" name="date_2nd_bill" class="col-span-2 border p-2 rounded w-full" />
                    </div>

                    <!-- 3rd Bill -->
                    <div class="flex items-center justify-between gap-4 mb-3">
                        <label class="w-40 text-gray-700 font-medium">3rd Bill Payment (Rs.)*</label>
                        <input type="number" id="amount_3rd_bill" name="amount_3rd_bill" placeholder="0" class="col-span-2 border p-2 rounded w-full" />
                    </div>
                    <div class="flex items-center justify-between gap-4 mb-3">
                        <label class="w-40 text-gray-700 font-medium">3rd Bill Issuance Date</label>
                        <input type="date" id="date_3rd_bill" name="date_3rd_bill" class="col-span-2 border p-2 rounded w-full" />
                    </div>

                    <!-- 4th Bill -->
                    <div class="flex items-center justify-between gap-4 mb-3">
                        <label class="w-40 text-gray-700 font-medium">4th Bill Payment (Rs.)*</label>
                        <input type="number" id="amount_4th_bill" name="amount_4th_bill" placeholder="0" class="col-span-2 border p-2 rounded w-full" />
                    </div>
                    <div class="flex items-center justify-between gap-4 mb-3">
                        <label class="w-40 text-gray-700 font-medium">4th Bill Issuance Date</label>
                        <input type="date" id="date_4th_bill" name="date_4th_bill" class="col-span-2 border p-2 rounded w-full" />
                    </div>

                    <!-- Final Bill -->
                    <div class="flex items-center justify-between gap-4 mb-3">
                        <label class="w-40 text-gray-700 font-medium">Amount of ICR-II Released (Rs.)</label>
                        <input type="number" id="amount_final_bill" name="amount_final_bill" placeholder="0" class="col-span-2 border p-2 rounded w-full" />
                    </div>
                    <div class="flex items-center justify-between gap-4 mb-3">
                        <label class="w-40 text-gray-700 font-medium">Date of ICR-II Released</label>
                        <input type="date" id="date_final_bill" name="date_final_bill" class="col-span-2 border p-2 rounded w-full" />
                    </div>

                    <!-- Remarks -->
                    <div class="flex items-center justify-between gap-4 mb-3">
                        <label class="w-40 text-gray-700 font-medium">Payment Stage Comments</label>
                        <input type="text" id="mp_remarks" name="mp_remarks" placeholder="" class="col-span-2 border p-2 rounded w-full" />
                    </div>
                </div>


                <div id="step5" class="tab-content">
                    <label class="option-line mb-3">Verified Data:FCR Issued</label>
                    <br>
                    <div class="flex items-center justify-between gap-4 mb-3">
                        <label class=" w-40 text-gray-700 font-medium">Completion Date</label>
                        <input
                            type="date"
                            id="completion_date"
                            name="completion_date"
                            placeholder=""
                            class="col-span-2 border p-2 rounded w-full" />
                    </div>
                    <div class="flex items-center justify-between gap-4 mb-3">
                        <label class=" w-40 text-gray-700 font-medium">Verified Govt.Share(Rs)</label>
                        <input
                            type="number"
                            id="verified_govt_share"
                            name="verified_govt_share"
                            placeholder="0.00"
                            class="col-span-2 border p-2 rounded w-full" />
                    </div>
                    <div class="grid grid-cols-3 items-center gap-4 mb-3">
                        <label class="col-span-1 text-left">
                            Completion Year
                        </label>
                        <select id="completion_year" name="completion_year" class="select2 col-span-2 border p-2 rounded w-full">
                            <option></option>
                            <option value="2024-25">2024-25</option>
                            <option value="2023-24">2023-24</option>
                            <option value="2022-23">2022-23</option>
                            <option value="2021-22">2021-22</option>
                            <option value="2020-21">2020-21</option>
                            <option value="2019-20">2019-20</option>
                        </select>
                    </div>
                    <div class="flex items-center justify-between gap-4 mb-3">
                        <label class=" w-40 text-gray-700 font-medium">Additional CCA(Arces)</label>
                        <input
                            type="number"
                            id="additional_cca"
                            name="additional_cca"
                            placeholder="0.00"
                            class="col-span-2 border p-2 rounded w-full" />
                    </div>

                    <div class="flex items-center justify-between gap-4 mb-3">
                        <label class=" w-40 text-gray-700 font-medium">Water Saving(%)</label>
                        <input
                            type="number"
                            id="water_saving_percentage"
                            name="water_saving_percentage"
                            placeholder="% 0"
                            class="col-span-2 border p-2 rounded w-full" />
                    </div>
                    <div class="flex items-center justify-between gap-4 mb-3">
                        <label class=" w-40 text-gray-700 font-medium">Water Losses-Before Improvement</label>
                        <input
                            type="number"
                            id="water_losses_before"
                            name="water_losses_before"
                            placeholder="% 0.00"
                            class="col-span-2 border p-2 rounded w-full" />
                    </div>
                    <div class="flex items-center justify-between gap-4 mb-3">
                        <label class=" w-40 text-gray-700 font-medium">Water Losses-After Improvement</label>
                        <input
                            type="number"
                            id="water_losses_after"
                            name="water_losses_after"
                            placeholder="% 0.00"
                            class="col-span-2 border p-2 rounded w-full" />
                    </div>
                    <div class="flex items-center justify-between gap-4 mb-3">
                        <label class=" w-40 text-gray-700 font-medium">if any comment related to Payment Stage</label>
                        <input
                            type=""
                            id="vd_remarks"
                            name="vd_remarks"
                            placeholder=""
                            class="col-span-2 border p-2 rounded w-full" />
                    </div>
                    <label class="inline-flex gap-2 items-center">
                        <span class="">Completed</span>
                        <input type="checkbox" class="" />
                    </label>

                </div>


                <!-- ===== END TAB CONTENT ===== -->

        </div>

        <!-- Modal Footer -->
        <div class="modal-footer flex justify-end gap-2 p-4 border-t">
            <button id="prevBtn" type="button" class="px-4 py-2 bg-gray-300 rounded hidden">Previous</button>
            <button id="nextBtn" type="button" class="px-4 py-2 bg-primary text-white rounded">Next</button>
            <button id="submitBtn" type="submit" class="px-4 py-2 bg-green-600 text-white rounded hidden">Submit</button>

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



@endsection

@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
@vite('resources/js/admin-forms/admin-wst.js')
@endsection

</rewritten_file>