@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 nav-color">
            <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="form-search px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:bg-primary">
            </div>
            <!-- Page Length Dropdown -->

            @can('user create')
            <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>
            @endcan
        </div>

        <table id="user_table" class="divide-y divide-gray-200">
            <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> <!-- 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">Email</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">Platform Type</th>
                    <th class="px-4 py-2 text-right text-sm font-semibold text-gray-600 text-mono" style="padding-right: 65px;">Actions</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-200 form-body">
                @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">{{ $user->email }}</td>
                    <td class="px-4 py-2 text-gray-800">{{ $user->roles->first()->name ?? 'No Role' }}</td>
                    <td class="px-4 py-2 text-gray-800">{{ $user->platform_type }}</td>
                    <td class="px-4 py-2 flex justify-end gap-2">

                        @can('user edit')<button class="edit-btn px-2 py-1 bg-yellow-500 text-white rounded-md" data-id="{{ $user->id }}">Edit</button>@endcan
                        @can('user delete')<button class="delete-btn px-2 py-1 bg-red-600 text-white rounded-md" data-id="{{ $user->id }}">Delete</button>@endcan
                    </td>
                </tr>
                @empty
                @endforelse
            </tbody>
        </table>
    </div>
</div>
<!-- End of Container -->

<!-- Modal -->
<div id="modal" class="model hidden management">
    <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">Zone</label>
                <select id="zoneSelect" class="w-full border rounded-lg p-2 mb-4" required>
                    <!-- <option value="">Select Zone</option> -->
                    <!-- <option value="-1">All</option> -->

                </select>
            </div>
            <div class="form-group">
                <label class="block font-medium mb-1">Division</label>
                <select id="divisionSelect" class="w-full border rounded-lg p-2 mb-4" required>
                    <!-- <option value="">Select Division</option> -->
                    <!-- <option value="-1">All</option> -->
                    <!-- @foreach($divisions as $division)
                    <option value="{{ $division->id }}">{{ $division->division_name }}</option>
                    @endforeach -->
                </select>
            </div>

            <div class="form-group">
                <label class="block font-medium mb-1">District</label>
                <select id="districtSelect" class="w-full border rounded-lg p-2 mb-4" multiple required>
                    <!-- districts will populate based on division -->
                </select>
            </div>


            <div class="form-group">
                <label class="block font-medium mb-1">Platform Type</label>
                <select id="platform_type" class="w-full border rounded-lg p-2 mb-4" required>
                    <option value="">Select Platform Type</option>
                    <option value="web">Web</option>
                    <option value="app">App</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 }}" data-platform="{{ $role->platform_type }}">{{ $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 Email">
            </div>


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

                <!-- Eye icon inside input -->
                <span id="togglePassword"
                    class="absolute right-2 cursor-pointer flex items-center justify-center" style="top: 53%;">
                    <svg id="eyeIcon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#6f7275ff"
                        stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <!-- Eye outline -->
                        <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
                        <!-- Pupil -->
                        <circle cx="12" cy="12" r="3"></circle>
                        <!-- Slash line hidden by default -->
                        <line id="eyeSlash" x1="1" y1="1" x2="23" y2="23" stroke="#6f7275ff" stroke-width="2"
                            stroke-linecap="round" style="display:none;"></line>
                    </svg>
                </span>
            </div>

            <div class="form-group">
                <label class="block font-medium mb-1">Status</label>
                <select id="activeInactive" class="w-full border rounded-lg p-2 mb-4">
                    <option value="">Select Status</option>
                    <option value="1">Active</option>
                    <option value="0">In-Active</option>
                </select>
            </div>

        </div>

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



@endsection

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

</rewritten_file>