@extends('layouts.app')

@section('content')
    <div id="loading-overlay">
        <div class="spinner"></div>
    </div>
    <!-- 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 -->
                @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">
                    <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">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">Platform Type</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">{{ $user->email }}</td>
                            <td class="px-4 py-2 text-gray-800">
                                @if($user->department_id == 1)
                                    Soil and Water Conservation Department
                                @elseif($user->department_id == 2)
                                    Directorate of Agricultural Engineering
                                @elseif($user->department_id == 3)
                                    Both  
                                @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 text-gray-800">{{ $user->platform_type }}</td>
                            <td class="px-4 py-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">
        <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">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 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">Soil and Water Conservation Department</option>
                        <option value="2">Directorate of Agricultural Engineering</option>
                        <option value="3">Both</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="all">All</option>
                        @foreach($divisions as $division)
                            <option value="{{ $division->id }}">{{ $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 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 relative">
                    <label for="password" class="block font-medium mb-1">Password</label>
                    <div class="relative">
                        <input type="password" id="password" name="password"
                            class="w-full border rounded-lg p-2 pr-10 inputusers" placeholder="Enter your password">
                        <span id="togglePassword"
                            class="absolute right-3 top-1/2 transform -translate-y-1/2 cursor-pointer text-gray-500 hover:text-gray-700">
                            <svg style="position: relative; right: 30px;" id="eyeIcon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
                                <circle cx="12" cy="12" r="3"></circle>
                            </svg>
                        </span>
                    </div>
                </div>

              <div class="form-group">
                <label class="block font-medium mb-1">Active/Inactive</label>
                <select id="activeInactive" class="w-full border rounded-lg p-2 mb-4">
                    <option value="">Select State</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')
    @vite('resources/js/admin-forms/user.js')
    <script>
        // Password eye toggle functionality
        document.addEventListener('DOMContentLoaded', function () {
            const togglePassword = document.getElementById('togglePassword');
            const passwordInput = document.getElementById('password');
            const eyeIcon = document.getElementById('eyeIcon');

            if (togglePassword && passwordInput && eyeIcon) {
                togglePassword.addEventListener('click', function () {
                    // Toggle password visibility
                    if (passwordInput.type === 'password') {
                        passwordInput.type = 'text';
                        // Change to eye-off icon
                        eyeIcon.innerHTML = `
                        <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"></path>
                        <line x1="1" y1="1" x2="23" y2="23"></line>
                    `;
                    } else {
                        passwordInput.type = 'password';
                        // Change back to eye icon
                        eyeIcon.innerHTML = `
                        <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
                        <circle cx="12" cy="12" r="3"></circle>
                    `;
                    }
                });
            }
        });

        window.userPermissions = @json(auth()->user()->getAllPermissions()->pluck('name')->toArray());
    </script>
@endsection

</rewritten_file>