@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">
                    <select id="pageLengthSelect" class="border px-2 py-2 rounded-md">
                        <option value="10" selected>10</option>
                        <option value="25">25</option>
                        <option value="50">50</option>
                    </select>
                    <input type="text" id="search" placeholder="Search User"
                        class="px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:bg-primary">
                </div>
                <!-- Page Length Dropdown -->

                <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 User
                </button>
            </div>

            <table id="user_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>  <!-- Changed -->
            <th class="px-4 py-2 text-left text-sm font-semibold text-gray-600 text-mono">Name</th>
            <th class="px-4 py-2 text-left text-sm font-semibold text-gray-600 text-mono">Department</th>
            <th class="px-4 py-2 text-left text-sm font-semibold text-gray-600 text-mono">Role</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">
        @forelse ($users as $index => $user)  <!-- Added $index -->
        <tr data-id="{{ $user->id }}" data-name="{{ $user->name }}">
            <td class="px-4 py-2 text-gray-800">{{ $index + 1 }}</td>  <!-- SR. No -->
            <td class="px-4 py-2 text-gray-800">{{ $user->name }}</td>
            <td class="px-4 py-2 text-gray-800">
                @if($user->department_id == 1)
                    Water
                @elseif($user->department_id == 2)
                    Agriculture
                @else
                    {{ $user->department_id }}
                @endif
            </td>
            <td class="px-4 py-2 text-gray-800">{{ $user->roles->first()->name ?? 'No Role' }}</td>
            <td class="px-4 py-2">
                <button class="edit-btn px-2 py-1 bg-yellow-500 text-white rounded-md" data-id="{{ $user->id }}">Edit</button>
                <button class="delete-btn px-2 py-1 bg-red-600 text-white rounded-md" data-id="{{ $user->id }}">Delete</button>
            </td>
        </tr>
        @empty
        @endforelse
    </tbody>
</table>
        </div>
    </div>
    <!-- End of Container -->

    <!-- Modal -->
    <div id="modal" class="model hidden">
        <div class="modal-content kt-scrollable-y-auto">
            <!-- Modal Header -->
            <div class="modal-header">
                <h2 id="modalTitle">Division</h2>
                <button id="closeModal">✕</button>
            </div>

            <!-- Modal Body -->
            <div class="modal-body">
                    <input type="hidden" id="userId" name="user_id">
                <div class="form-group">
                    <label class="block font-medium mb-1">Department</label>
                    <select id="dept" class="w-full border rounded-lg p-2 mb-4" required>
                        <option value="">Select Department</option>
                        <option value="1">Water</option>
                        <option value="2">Agriculture</option>
                    </select>
                </div>


                <div id="role">
                    <label class="block font-medium mb-1">Role</label>
                    <select id="roleOptions" class="w-full border rounded-lg p-2 mb-4" required>
                        <option value="">Select Role</option>
                        @forelse ($roles as $role)
                            <option value="{{ $role->id }}">{{ $role->name }}</option>
                        @empty

                        @endforelse

                    </select>
                </div>

                <div class="mb-4">
                    <label for="username" class="block font-medium mb-1">Username</label>
                    <input type="text" id="username" name="username" class="w-full border rounded-lg p-2 inputusers"
                        placeholder="Enter your username">
                </div>

                <div class="mb-4">
                    <label for="email" class="block font-medium mb-1">Email</label>
                    <input type="email" id="email" name="email" class="w-full border rounded-lg p-2 inputusers"
                        placeholder="Enter your username">
                </div>


                <div class="mb-4">
                    <label for="password" class="block font-medium mb-1">Password</label>
                    <input type="text" id="password" name="password" class="w-full border rounded-lg p-2 inputusers"
                        placeholder="Enter your username">
                </div>

            </div>

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



@endsection

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

</rewritten_file>