@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">
                    <input type="text" id="search" placeholder="Search Tehsils"
                        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 Tehsil
                </button>
            </div>

            <table id="tehsil_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">Divison</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">Action</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-200">
                </tbody>
            </table>
        </div>
    </div>
    <!-- End of Container -->

<!-- Tehsil Modal -->
<div id="modal" class="model hidden">
    <div class="modal-content">
        <!-- Modal Header -->
        <div class="modal-header">
            <h2 id="modalTitle">Tehsil</h2>
            <button id="closeModal">✕</button>
        </div>

        <!-- Modal Body -->
        <div class="modal-body">
            <!-- Division Select -->
            <div class="form-group">
                <label for="division_id" class="form-label">Division</label>
                <select id="division_id" style="width: 100%"></select>
            </div>

            <!-- District Select -->
            <div class="form-group">
                <label for="district_id" class="form-label">District</label>
                <select id="district_id" style="width: 100%">
                    <option value="">Select District</option>
                </select>
            </div>

            <!-- Tehsil Name Input -->
            <div class="form-group">
                <label for="tehsilName" class="form-label">Tehsil Name</label>
                <input type="text" id="tehsilName" placeholder="Enter Tehsil Name" class="form-input w-full">
                <input type="hidden" id="tehsilId">
            </div>
        </div>

        <!-- Modal Footer -->
        <div class="modal-footer">
            <button id="cancel" class="btn btn-secondary">Cancel</button>
            <button id="saveBtn" class="btn btn-primary">Submit</button>
        </div>
    </div>
</div>



@endsection

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

</rewritten_file>