@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 nav-color">
            <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">
                <input type="text" id="search" placeholder="Search WST"
                    class="form-search px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:bg-primary">
            </div>

            <!-- Add New Zone button -->
            @can('wst create')
            <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>
            @endcan
        </div>


        <table id="watercourse_table" class="divide-y divide-gray-200">
            <thead class="bg-primary form-title">
                <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">WST 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">Type of structure</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 form-body">

            </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>

        <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>
        <!-- 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">
                <!-- STEP 1: WST Base -->
                <div id="step1" class="tab-content">
                    <div class="form-row">
                        <label>Status</label>
                        <input id="wst_status" name="wst_status" type="text" placeholder="Ts Pending"
                           >
                    </div>
                    <div class="form-row">
                        <label>Zone*</label>
                        <select id="zoneSelect" name="zone_id" ></select>
                    </div>

                    <div class="form-row">
                        <label >Division*</label>
                        <select id="divisionSelect" name="division_id"></select>
                    </div>

                    <div class="form-row">
                        <label >District*</label>
                        <select id="districtSelect" name="district_id" ></select>
                    </div>

                    <div class="form-row">
                        <label class="col-span-1 text-left">Tehsil*</label>
                        <select id="tehsilSelect" name="tehsil_id" ></select>
                    </div>

                    <div class="form-row">
                        <label >Type of Structure*</label>
                        <select id="type_of_structure" name="type_of_structure">
                            <option value="">Select Type</option>
                            <option value="square">Square</option>
                            <option value="rectangle">Rectangle</option>
                        </select>
                    </div>

                    <div class="form-row">
                        <label >Type of Lining*</label>
                        <select id="lining_type_id" name="lining_type_id"></select>
                    </div>

                    <div class="form-row">
                        <label>WST Name</label>
                        <input id="wst_name" name="wst_name" type="text" placeholder="">
                    </div>

                    <div class="form-row">
                        <label>UC*</label>
                        <input id="uc" name="uc" type="text" placeholder="">
                    </div>

                    <div class="form-row">
                        <label>Village*</label>
                        <input id="village" name="village" type="text" placeholder="">
                    </div>

                    <div class="form-row">
                        <label >Type of Irrigation Source*</label>
                        <select id="type_of_irrigation_id" name="irrigation_type_id" >
                            <option value="">Select Irrigation Type</option>
                            <option value="1">Canal Command Area</option>
                            <option value="2">Non-Canal Command Area</option>
                        </select>
                    </div>

                    <input type="hidden" id="irrigation_class" name="irrigation_class">

                    <!-- Non-Canal Source -->
                    <div class="form-row" id="non_canal_source_container" style="display:none;">
                        <label>Non Canal Source*</label>
                        <select id="non_canal_source_type" name="non_canal_source_type">
                            <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>

                    <div class="form-row" 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" placeholder="Enter source name">
                    </div>

                    <!-- Canal Fields -->
                    <div id="canal_fields_container" style="display:none;" >
                        <div class="form-row">
                            <label >Canal Type</label>
                            <select id="canal_type" name="canal_type"></select>
                        </div>
                        <div class="form-row">
                            <label>Canal</label>
                            <input type="text" id="canal" name="canal">
                        </div>
                        <div class="form-row">
                            <label >Distri</label>
                            <input type="text" id="distri" name="distri" >
                        </div>
                        <div class="form-row">
                            <label >Branch</label>
                            <input type="text" id="branch" name="branch" >
                        </div>
                        <div class="form-row">
                            <label >Minor</label>
                            <input type="text" id="minor" name="minor" >
                        </div>
                    </div>

                    <div class="form-row">
                        <label>Financial Year</label>
                        <select id="financial_year" name="financial_year" >
                            <option value="">Select 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="form-row">
                        <label>Comments (Identification Stage)</label>
                        <input id="wst_comments" name="wst_comments" type="text" placeholder="" >
                    </div>

                </div>

                <!-- STEP 2: WUA -->
                <div id="step2" class="tab-content">

                    <div class="form-row">
                        <label >Coordinates</label>
                        <input type="text" id="coordinates" name="coordinates" />
                    </div>

                    <div class="form-row">
                        <label>Picture</label>
                        <input type="file" id="picture" name="picture" accept="image/*" />
                    </div>

                    <div class="form-row">
                        <label>WUA Registration No.</label>
                        <input type="text" id="reg_no" name="reg_no" />
                    </div>

                    <div class="form-row">
                        <label>Registration Date</label>
                        <input type="date" id="registration_date" name="registration_date" />
                    </div>

                    <div class="form-row">
                        <label >President Name</label>
                        <input type="text" id="president_name" name="president_name"/>
                    </div>

                    <div class="form-row">
                        <label>CNIC</label>
                        <input type="text" id="cnic" name="cnic" />
                    </div>

                    <div class="form-row">
                        <label >Contact</label>
                        <input type="text" id="contact" name="contact" />
                    </div>

                    <div class="form-row">
                        <label>Total Shareholders</label>
                        <input type="number" id="total_shareholders" name="total_shareholders"  />
                    </div>

                    <div class="form-row">
                        <label>Male Members</label>
                        <input type="number" id="male_member" name="male_member" />
                    </div>

                    <div class="form-row">
                        <label >Female Members</label>
                        <input type="number" id="female_member" name="female_member" />
                    </div>

                    <div class="form-row">
                        <label >Total Members</label>
                        <input type="number" id="total_members" name="total_members" />
                    </div>

                    <div class="form-row">
                        <label >GCA (Acres)</label>
                        <input type="number" id="gca" name="gca" />
                    </div>

                    <div class="form-row">
                        <label >CCA (Acres)</label>
                        <input type="number" id="cca" name="cca"/>
                    </div>

                    <div class="form-row">
                        <label>WST Length (Meter)</label>
                        <input type="number" id="wst_length" name="wst_length" />
                    </div>

                    <div class="form-row">
                        <label>Sanctioned Lining Length (Meter)</label>
                        <input type="number" id="previous_lining_length" name="previous_lining_length" />
                    </div>

                    <div class="form-row">
                        <label >Design Discharge (Cusec)</label>
                        <input type="number" id="design_discharge_cusec" name="design_discharge_cusec" />
                    </div>

                    <div class="form-row">
                        <label >Design Discharge (LPS)</label>
                        <input type="number" id="design_discharge_lps" name="design_discharge_lps"/>
                    </div>

                    <div class="form-row">
                        <label>Comments (Profil Stage)</label>
                        <input type="text" id="wst_ua_comments" name="wst_ua_comments"  />
                    </div>
                    <div class="form-row">
                        <label>WUA Status</label>
                        <input type="text" id="wst_ua_status" name="wst_ua_status" placeholder="Pending">
                    </div>


                </div>

                <!-- STEP 3: Technical Sanction -->
                <div id="step3" class="tab-content">

                    <div class="form-row">
                        <label>In case of Revised TS press the button to update the TS Data</label>
                        <input id="revised_ts" name="revised_ts" type="text" placeholder="Revised TS"
                           >
                    </div>

                    <div class="form-row">
                        <label >Issuance Date</label>
                        <input type="date" id="issuance_date" name="issuance_date" />
                    </div>

                    <div class="form-row">
                        <label>Govt Share (Rs.)</label>
                        <input type="number" id="govt_share" name="govt_share"  />
                    </div>

                    <div class="form-row">
                        <label >Community Share (Rs.)</label>
                        <input type="number" id="community_share" name="community_share" />
                    </div>

                    <div class="form-row">
                        <label >Work Order Date</label>
                        <input type="date" id="work_order_date" name="work_order_date"/>
                    </div>

                    <div class="form-row">
                        <label >TS Comments</label>
                        <input type="text" id="wst_ts_comments" name="wst_ts_comments" />
                    </div>

                    <div class="form-row">
                        <label>TS Completion Status</label>
                        <input type="text" id="wst_ts_completion_status" name="wst_ts_completion_status" />
                    </div>
                </div>

                <!-- STEP 4: Milestone Payment -->
                <div id="step4" class="tab-content">

                    <div class="form-row">
                        <label>Payment Criteria</label>
                        <select id="payment_criteria" name="payment_criteria">
                            <option value="">Select Payment Criteria</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 Payments Released</option>
                        </select>
                    </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 Amount (Rs.)</label>
                        <input type="number" id="amount_1st_bill" name="amount_1st_bill" 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 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 Amount (Rs.)</label>
                        <input type="number" id="amount_2nd_bill" name="amount_2nd_bill" 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 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 Amount (Rs.)</label>
                        <input type="number" id="amount_3rd_bill" name="amount_3rd_bill" 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 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 Amount (Rs.)</label>
                        <input type="number" id="amount_4th_bill" name="amount_4th_bill" 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 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">Final Bill Amount (Rs.)</label>
                        <input type="number" id="amount_final_bill" name="amount_final_bill" 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">Final Bill Date</label>
                        <input type="date" id="date_final_bill" name="date_final_bill" 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">Milestone Payment Comments</label>
                        <input type="text" id="wst_mp_remarks" name="wst_mp_remarks" class="col-span-2 border p-2 rounded w-full" />
                    </div>
                </div>

                <!-- STEP 5: Verified Data -->
                <div id="step5" class="tab-content">

                    <div class="form-row">
                        <label>Completion Date</label>
                        <input type="date" id="completion_date" name="completion_date"/>
                    </div>

                    <div class="form-row">
                        <label>Verified Govt Share (Rs.)</label>
                        <input type="number" id="verified_govt_share" name="verified_govt_share"/>
                    </div>

                    <div class="form-row">
                        <label>Completion Year</label>
                        <select id="completion_year" name="completion_year">
                            <option value="">Select 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="form-row">
                        <label>Additional CCA (Acres)</label>
                        <input type="number" id="additional_cca" name="additional_cca"  />
                    </div>

                    <div class="form-row">
                        <label >Water Saving (%)</label>
                        <input type="number" id="water_saving_percentage" name="water_saving_percentage"  />
                    </div>

                    <div class="form-row">
                        <label >Water Losses Before Improvement</label>
                        <input type="number" id="water_losses_before" name="water_losses_before"/>
                    </div>

                    <div class="form-row">
                        <label >Water Losses After Improvement</label>
                        <input type="number" id="water_losses_after" name="water_losses_after"  />
                    </div>

                    <div class="form-row">
                        <label >Verified Data Remarks</label>
                        <input type="text" id="wst_vd_remarks" name="wst_vd_remarks" />
                    </div>

                </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>