@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 Role"
                        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 Role Manage
                </button>
            </div>


            <table id="user_form" 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">Roles</th>
                        <th class="px-4 py-2 text-left text-sm font-semibold text-gray-600 text-mono">last Update</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="assign-per-modal" class="model hidden">
        <div class="modal-content kt-scrollable-y-auto">
            <!-- Modal Header -->
            <div class="modal-header">
                <h2 id="modalTitle">Role Managment</h2>
                <button id="closeModal">✕</button>
            </div>

            <!-- Modal Body -->
            <div class="modal-body">
           <!-- Form Content -->
             <form id="multiStepForm">
                    <!-- Tabs Wrapper -->
<div class="overflow-x-auto whitespace-nowrap scrollbar-hide mb-4">
  <ul id="formTabs" class="flex text-sm font-medium text-body w-full">
      
    <!-- Tab 1 -->
    <li class="w-1/2"> 
      <a href="#" data-step="step1"
        class="tab-link flex items-center justify-center text-body 
               border border-default rounded-l-lg font-medium leading-5 text-sm px-4 py-2.5 bg-gray-200">Screen</a>
    </li>

    <!-- Tab 2 -->
    <li class="w-1/2">
      <a href="#" data-step="step2"
        class="tab-link flex items-center ms-2 justify-center text-body 
               border border-default rounded-r-lg font-medium leading-5 text-sm px-4 py-2.5 bg-gray-200">Forms</a>
    </li>

  </ul>
</div>

<!-- Form Steps -->
<div class="form-step" id="step1">
  <div class="container mt-5 rounded bg-white shadow-lg" style="max-width: 800px;">
      <div class="overflow-x-auto" class="modal-body scrollable-modal">
        <table class="w-full border border-gray-300">
           <tbody>
             <tr>
              <td class="border p-2">1</td>
              <td class="border p-2">Dashboard</td>
              <td class="border p-2 text-center"><input type="checkbox" /></td> 
            </tr>

            <tr>
              <td class="border p-2">2</td>
              <td class="border p-2">Water Pond</td>
              <td class="border p-2 text-center"><input type="checkbox" /></td>
            </tr>

            <tr>
              <td class="border p-2">3</td>
              <td class="border p-2">Check Dam</td>
              <td class="border p-2 text-center"><input type="checkbox" /></td>
            </tr>
          </tbody>
        </table>
</div>
  </div>
</div>

<div class="form-step hidden" id="step2">
  <div class="container mt-5 rounded bg-white shadow-lg" style="max-width: 800px;">
    <div class="overflow-x-auto" class="modal-body scrollable-modal">
        <table class="w-full border border-gray-300">
        <thead>
            <tr class="bg-gray-200 text-left">
              <th class="border p-2">ID</th>
              <th class="border p-2">Forms</th>
              <th class="border p-2 text-center">Create</th>
              <th class="border p-2 text-center">Edit</th>
              <th class="border p-2 text-center">Delete</th>
            </tr>
          </thead>

          <tbody>
             <tr>
              <td class="border p-2">1</td>
              <td class="border p-2">Division</td>
              <td class="border p-2 text-center"><input type="checkbox" /></td>
              <td class="border p-2 text-center"><input type="checkbox" /></td>
              <td class="border p-2 text-center"><input type="checkbox" /></td>
              
            </tr>

            <tr>
              <td class="border p-2">2</td>
              <td class="border p-2">District</td>
              <td class="border p-2 text-center"><input type="checkbox" /></td>
              <td class="border p-2 text-center"><input type="checkbox" /></td>
              <td class="border p-2 text-center"><input type="checkbox" /></td>
            </tr>

            <tr>
              <td class="border p-2">3</td>
              <td class="border p-2">Tehsil</td>
              <td class="border p-2 text-center"><input type="checkbox" /></td>
              <td class="border p-2 text-center"><input type="checkbox" /></td>
              <td class="border p-2 text-center"><input type="checkbox" /></td>
            
            </tr>

            <tr>
              <td class="border p-2">4</td>
              <td class="border p-2">Water Pond</td>
              <td class="border p-2 text-center"><input type="checkbox" /></td>
              <td class="border p-2 text-center"><input type="checkbox" /></td>
              <td class="border p-2 text-center"><input type="checkbox" /></td>
              
          </tbody>
        </table>
      </div>

  </div>
</div>


            <!-- Modal Footer -->
            <div class="modal-footer">
                <button id="cancel">Cancel</button>
                <button id="saveBtn">Save</button>
            </div>
        </div>
    </div>
    </div> --}}
@endsection

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

</rewritten_file>