@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 Watercourse
                </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>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-200">
                    <tr data-id="1" data-name="Punjab">
                        <td class="px-4 py-2 text-gray-800">1</td>
                        <td class="px-4 py-2 text-gray-800">Punjab</td>
                        <td class="px-4 py-2 text-gray-800">12/11/2025</td>
                        <td class="px-4 py-2">
                            <button class="edit-btn px-2 py-1 bg-yellow-500 text-white rounded-md">Edit</button>
                            <button class="delete-btn px-2 py-1 bg-red-600 text-white rounded-md">delete</button>
                        </td>
                    </tr>
                    <tr data-id="2" data-name="Punjab">
                        <td class="px-4 py-2 text-gray-800">2</td>
                        <td class="px-4 py-2 text-gray-800">AJK</td>
                        <td class="px-4 py-2 text-gray-800">13/11/2025</td>
                        <td class="px-4 py-2">
                            <button class="edit-btn px-2 py-1 bg-yellow-500 text-white rounded-md">Edit</button>
                            <button class="delete-btn px-2 py-1 bg-red-600 text-white rounded-md">delete</button>
                        </td>
                    </tr>
                </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 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 ===== -->
            <div id="step1" class="tab-content">
           <div>

<!-- ZONE -->
<div class="flex items-center justify-between gap-4 mb-3">
    <label class="w-40 text-gray-700 font-medium">Zone*</label>
    <div class="flex-1">
        <select id="zoneSelect" class="w-full border p-2 rounded">
            <option value="">Select Zone</option>
            <option value="KP">KP</option>
            <option value="Punjab">Punjab</option>
        </select>
    </div>
</div>

<!-- DIVISION -->
<div id="divisionWrapper" class="hidden">
    <div class="flex items-center justify-between gap-4 mb-3">
        <label class="w-40 text-gray-700 font-medium">Division*</label>
        <div class="flex-1">
            <select id="divisionSelect" class="select2 w-full">
                <option value="">Select Division</option>
            </select>
        </div>
    </div>
</div>

<!-- DISTRICT -->
<div id="districtWrapper" class="hidden">
    <div class="flex items-center justify-between gap-4 mb-3">
        <label class="w-40 text-gray-700 font-medium">District*</label>
        <div class="flex-1">
            <select id="districtSelect" class="select2 w-full">
                <option value="">Select District</option>
            </select>
        </div>
    </div>
</div>

<!-- TEHSIL -->
<div id="tehsilWrapper" class="hidden">
    <div class="flex items-center justify-between gap-4 mb-3">
        <label class="w-40 text-gray-700 font-medium">Tehsil*</label>
        <div class="flex-1">
            <select id="tehsilSelect" class="select2 w-full">
                <option value="">Select Tehsil</option>
            </select>
        </div>
    </div>
</div>


</div>


            </div>

            <div id="step2" class="tab-content hidden">
                <p>Profile Info Content Here...</p>
            </div>

            <div id="step3" class="tab-content hidden">
                <p>Issuance of TS Content Here...</p>
            </div>

            <div id="step4" class="tab-content hidden">
                <p>Milestone Payments Content Here...</p>
            </div>

            <div id="step5" class="tab-content hidden">
                <p>Verified Data Content Here...</p>
            </div>
            <!-- ===== END TAB CONTENT ===== -->

        </div>

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

    </div>
</div>



@endsection

@section('scripts')
    @vite('resources/js/admin-forms/watercourses.js')
@endsection

</rewritten_file>