@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 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-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 mb-4">
            <!-- Search Box on Left -->
            <div id="customSearch" class="flex items-center gap-2">
                <input type="text" id="search" placeholder="Search Divisions"
                    class="form-search px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:bg-primary">
            </div>

            <!-- Add New Division button -->
            @can('division view')
            <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 Division
            </button>
            @endcan
        </div>

        <!-- Divisions Table -->
        <table id="division_table" class="divide-y divide-gray-200 w-full">
            <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">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">Actions</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-200 form-body">
                <!-- Rows will be dynamically loaded via JS -->
            </tbody>
        </table>
    </div>
</div>
<!-- End of Container -->

<!-- Modal -->
<div id="modal" class="model hidden management fixed inset-0 bg-black bg-opacity-40 flex justify-center items-center z-50">
    <div class="modal-content bg-white rounded-xl p-5 w-full max-w-md">
        <!-- Modal Header -->

        <div class="modal-header flex justify-between items-center mb-4">
            <h2 id="modalTitle" class="text-lg font-semibold">Division</h2>
            <button id="closeModal" class="text-xl font-bold">✕</button>
        </div>

        <!-- Modal Body -->
        <div class="modal-body mb-4">
            <div class="form-group">
                <label for="zoneSelect" class="form-label">Zone</label>
                <select id="zoneSelect"  class="w-full">
                </select>
            </div>

            <div class="form-group flex flex-col gap-2">
                <label for="divisionName" class="form-label">Division</label>
                <input id="divisionName" type="text" placeholder="Enter division name"
                    class="w-full">
                <input type="hidden" id="divisionId">
            </div>
        </div>

        <!-- Modal Footer -->
        <div class="modal-footer flex justify-end gap-2">
            <button id="cancel"
                class="px-4 py-2 bg-gray-300 text-black rounded-lg hover:bg-gray-400 transition">Cancel</button>
            <button id="saveBtn"
                class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition">Submit</button>
        </div>
    </div>
</div>
@endsection

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

<script type="text/template" id="division-action-buttons">
    @can('division edit')
        <button class="edit-btn px-2 py-1 bg-yellow-500 text-white rounded-md">Edit</button>
    @endcan
    @can('division delete')
        <button class="delete-btn px-2 py-1 bg-red-600 text-white rounded-md">Delete</button>
    @endcan
</script>