@extends('layouts.admin')

@section('admin_title', 'Manage Users')

@section('admin_content')
<div class="space-y-6 animate-fade-in">
    <!-- Header Block -->
    <div class="bg-white p-4 md:p-6 rounded-2xl border border-slate-200/80 shadow-sm">
        <h1 class="text-xl md:text-2xl font-bold text-slate-800 tracking-tight">User Accounts</h1>
        <p class="text-slate-500 text-sm mt-1">Create new Admin and User accounts, assign roles, or reset passwords. Public registration is only available for Super Admins.</p>
    </div>

    <!-- Main Grid -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        
        <!-- Left: List of existing Admins/Users -->
        <div class="lg:col-span-2 bg-white rounded-2xl border border-slate-200/80 shadow-sm overflow-hidden flex flex-col">
            <div class="px-6 py-4 border-b border-slate-100 bg-slate-50/50">
                <h3 class="font-bold text-slate-800 text-sm tracking-wide flex items-center gap-1.5">
                    <i class="fa-solid fa-users text-dav-500"></i> Active User Accounts
                </h3>
            </div>
            
            <div class="table-responsive flex-grow">
                <table class="table table-hover align-middle mb-0 text-sm">
                    <thead class="table-light text-slate-500 uppercase font-semibold text-[11px] tracking-wider border-t border-slate-100">
                        <tr>
                            <th class="px-6 py-3">Name</th>
                            <th class="px-6 py-3">Email</th>
                            <th class="px-6 py-3">Role</th>
                            <th class="px-6 py-3">Created Date</th>
                            <th class="px-6 py-3 text-right">Actions</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100 text-slate-700">
                        @forelse($users as $user)
                            <tr>
                                <td class="px-6 py-3.5 font-semibold text-slate-800">{{ $user->name }}</td>
                                <td class="px-6 py-3.5 text-slate-500 font-medium">{{ $user->email }}</td>
                                <td class="px-6 py-3.5">
                                    @if($user->role === 'super_admin')
                                        <span class="badge bg-purple-100 text-purple-800 border border-purple-200 font-extrabold px-2.5 py-1 text-xs rounded-lg uppercase tracking-wide">
                                            Super Admin
                                        </span>
                                    @elseif($user->role === 'admin')
                                        <span class="badge bg-amber-100 text-amber-800 border border-amber-200 font-extrabold px-2.5 py-1 text-xs rounded-lg uppercase tracking-wide">
                                            Admin
                                        </span>
                                    @else
                                        <span class="badge bg-blue-100 text-blue-800 border border-blue-200 font-extrabold px-2.5 py-1 text-xs rounded-lg uppercase tracking-wide">
                                            User
                                        </span>
                                    @endif
                                </td>
                                <td class="px-6 py-3.5 text-slate-400 font-medium">{{ $user->created_at->format('Y-m-d H:i') }}</td>
                                <td class="px-6 py-3.5 text-right">
                                    <div class="d-flex gap-2 justify-content-end">
                                        @if($user->role !== 'super_admin')
                                            <button onclick="openChangeRoleModal({{ $user->id }}, '{{ addslashes($user->name) }}', '{{ $user->role }}')" class="btn btn-sm btn-outline-primary border-slate-200 text-dav-500 hover:bg-blue-50 rounded-xl px-2.5 py-2 font-bold text-xs flex items-center gap-1.5">
                                                <i class="fa-solid fa-user-tag"></i> Change Role
                                            </button>
                                        @endif

                                        @if($user->role !== 'super_admin' || $user->id === auth()->id())
                                            <button onclick="openResetModal({{ $user->id }}, '{{ addslashes($user->name) }}')" class="btn btn-sm btn-outline-warning border-slate-200 text-amber-600 hover:bg-amber-50 rounded-xl px-2.5 py-2 font-bold text-xs flex items-center gap-1.5">
                                                <i class="fa-solid fa-key"></i> Reset Password
                                            </button>
                                        @endif

                                        @if($user->role !== 'super_admin' && $user->id !== auth()->id())
                                            <form action="{{ route('admin.users.destroy', $user) }}" method="POST"
                                                  onsubmit="return confirm('Are you sure you want to delete user {{ addslashes($user->name) }}?');"
                                                  style="margin:0;display:inline;">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="btn btn-sm btn-outline-danger border-slate-200 text-rose-600 hover:bg-rose-50 rounded-xl px-2.5 py-2 font-bold text-xs flex items-center gap-1.5" title="Delete User">
                                                    <i class="fa-solid fa-trash-can"></i> Delete
                                                </button>
                                            </form>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="5" class="text-center py-12 text-slate-400">
                                    <i class="fa-solid fa-user-slash text-4xl block text-slate-200 mb-2"></i>
                                    <span class="font-medium text-sm">No user accounts created yet.</span>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Right: Create User Form -->
        <div class="bg-white rounded-2xl border border-slate-200/80 shadow-sm overflow-hidden h-fit">
            <div class="px-6 py-4 border-b border-slate-100 bg-slate-50/50">
                <h3 class="font-bold text-slate-800 text-sm tracking-wide flex items-center gap-1.5">
                    <i class="fa-solid fa-user-plus text-emerald-500"></i> Create User Account
                </h3>
            </div>
            
            <form action="{{ route('admin.users.store') }}" method="POST" class="p-6 space-y-4">
                @csrf

                @if($errors->any() && !session('reset_error_user_id'))
                    <div class="p-4 rounded-xl bg-rose-50 border border-rose-100 text-rose-700 text-xs space-y-1">
                        @foreach($errors->all() as $error)
                            <div class="flex items-center gap-2">
                                <i class="fa-solid fa-circle-exclamation text-rose-500"></i>
                                <span>{{ $error }}</span>
                            </div>
                        @endforeach
                    </div>
                @endif

                <div class="space-y-1">
                    <label for="name" class="text-xs font-bold text-slate-700 uppercase tracking-wider block">Full Name</label>
                    <input type="text" id="name" name="name" class="form-control py-2.5 rounded-xl text-sm border-slate-200 font-medium" placeholder="Enter full name" value="{{ old('name') }}" required>
                </div>

                <div class="space-y-1">
                    <label for="email" class="text-xs font-bold text-slate-700 uppercase tracking-wider block">Email Address</label>
                    <input type="email" id="email" name="email" class="form-control py-2.5 rounded-xl text-sm border-slate-200 font-medium" placeholder="Enter email address" value="{{ old('email') }}" required>
                </div>

                <div class="space-y-1">
                    <label for="role" class="text-xs font-bold text-slate-700 uppercase tracking-wider block">Role</label>
                    <select id="role" name="role" class="form-select py-2.5 rounded-xl text-sm border-slate-200 font-medium" required>
                        <option value="admin" {{ old('role') === 'admin' ? 'selected' : '' }}>Admin (Write Access)</option>
                        <option value="user" {{ old('role') === 'user' ? 'selected' : '' }}>User (Read Only)</option>
                    </select>
                </div>

                <div class="space-y-1">
                    <label for="password" class="text-xs font-bold text-slate-700 uppercase tracking-wider block">Password</label>
                    <input type="password" id="password" name="password" class="form-control py-2.5 rounded-xl text-sm border-slate-200 font-medium" placeholder="Enter password" required>
                </div>

                <div class="space-y-1">
                    <label for="password_confirmation" class="text-xs font-bold text-slate-700 uppercase tracking-wider block">Confirm Password</label>
                    <input type="password" id="password_confirmation" name="password_confirmation" class="form-control py-2.5 rounded-xl text-sm border-slate-200 font-medium" placeholder="Confirm password" required>
                </div>

                <div class="pt-2">
                    <button type="submit" class="w-full btn btn-primary bg-dav-500 hover:bg-dav-600 border-0 rounded-pill py-2.5 font-bold shadow-md hover-lift flex items-center justify-center gap-1.5 text-sm">
                        <i class="fa-solid fa-plus text-xs"></i> Create Account
                    </button>
                </div>
            </form>
        </div>

    </div>
</div>

<!-- Password Reset Modal -->
<div class="modal fade" id="resetPasswordModal" tabindex="-1" aria-labelledby="resetPasswordModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content rounded-2xl border-0 shadow-2xl overflow-hidden">
            <div class="bg-gradient-to-br from-dav-600 to-dav-500 text-white p-5 flex items-center justify-between">
                <div class="flex items-center gap-2">
                    <i class="fa-solid fa-key text-xl"></i>
                    <h3 class="text-md font-bold" id="resetPasswordModalLabel">Reset User Password</h3>
                </div>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            
            <form id="reset-password-form" method="POST" action="" class="p-6 space-y-4">
                @csrf
                <div class="bg-slate-50 p-3 rounded-xl border border-slate-100">
                    <span class="text-xs text-slate-500 block">Resetting password for:</span>
                    <strong id="reset-admin-name" class="text-sm text-slate-800 block mt-1">User Name</strong>
                </div>

                <div class="space-y-1">
                    <label for="reset_password" class="text-xs font-semibold text-slate-500 uppercase tracking-wider block">New Password</label>
                    <input type="password" id="reset_password" name="password" class="form-control py-2.5 rounded-xl text-sm border-slate-200 font-medium" placeholder="••••••••" required>
                </div>

                <div class="space-y-1">
                    <label for="reset_password_confirmation" class="text-xs font-semibold text-slate-500 uppercase tracking-wider block">Confirm New Password</label>
                    <input type="password" id="reset_password_confirmation" name="password_confirmation" class="form-control py-2.5 rounded-xl text-sm border-slate-200 font-medium" placeholder="••••••••" required>
                </div>

                <div class="pt-4 border-t border-slate-100 flex justify-end gap-2">
                    <button type="button" class="btn btn-outline-secondary rounded-pill px-4 py-2 text-xs font-semibold" data-bs-dismiss="modal">
                        Cancel
                    </button>
                    <button type="submit" class="btn btn-warning text-slate-900 bg-amber-500 hover:bg-amber-600 border-0 rounded-pill px-5 py-2 text-xs font-bold shadow-md hover-lift">
                        Reset Password
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Change Role Modal -->
<div class="modal fade" id="changeRoleModal" tabindex="-1" aria-labelledby="changeRoleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content rounded-2xl border-0 shadow-2xl overflow-hidden">
            <div class="bg-gradient-to-br from-dav-600 to-dav-500 text-white p-5 flex items-center justify-between">
                <div class="flex items-center gap-2">
                    <i class="fa-solid fa-user-tag text-xl"></i>
                    <h3 class="text-md font-bold" id="changeRoleModalLabel">Change User Role</h3>
                </div>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            
            <form id="change-role-form" method="POST" action="" class="p-6 space-y-4">
                @csrf
                <div class="bg-slate-50 p-3 rounded-xl border border-slate-100">
                    <span class="text-xs text-slate-500 block">Changing role for:</span>
                    <strong id="change-user-name" class="text-sm text-slate-800 block mt-1">User Name</strong>
                </div>

                <div class="space-y-1">
                    <label for="change_role_select" class="text-xs font-semibold text-slate-500 uppercase tracking-wider block">Select New Role</label>
                    <select id="change_role_select" name="role" class="form-select py-2.5 rounded-xl text-sm border-slate-200 font-medium" required>
                        <option value="admin">Admin (Write Access)</option>
                        <option value="user">User (Read Only)</option>
                    </select>
                </div>

                <div class="pt-4 border-t border-slate-100 flex justify-end gap-2">
                    <button type="button" class="btn btn-outline-secondary rounded-pill px-4 py-2 text-xs font-semibold" data-bs-dismiss="modal">
                        Cancel
                    </button>
                    <button type="submit" class="btn btn-primary bg-dav-500 hover:bg-dav-600 border-0 rounded-pill px-5 py-2 text-xs font-bold shadow-md hover-lift">
                        Update Role
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    // Cache modal instances so Bootstrap doesn't create duplicate backdrops
    let _resetModalInstance = null;
    let _roleModalInstance  = null;

    function getOrCreateModal(id) {
        const el = document.getElementById(id);
        return bootstrap.Modal.getInstance(el) || new bootstrap.Modal(el, { backdrop: true, keyboard: true });
    }

    // Clean up stuck backdrops whenever any modal fully hides
    document.querySelectorAll('.modal').forEach(function(el) {
        el.addEventListener('hidden.bs.modal', function () {
            document.querySelectorAll('.modal-backdrop').forEach(function(bd) { bd.remove(); });
            document.body.classList.remove('modal-open');
            document.body.style.removeProperty('overflow');
            document.body.style.removeProperty('padding-right');
        });
    });

    function openResetModal(userId, userName) {
        const form = document.getElementById('reset-password-form');
        form.action = `/admin/users/${userId}/reset-password`;
        document.getElementById('reset-admin-name').innerText = userName;
        document.getElementById('reset_password').value = '';
        document.getElementById('reset_password_confirmation').value = '';
        getOrCreateModal('resetPasswordModal').show();
    }

    function openChangeRoleModal(userId, userName, currentRole) {
        const form = document.getElementById('change-role-form');
        form.action = `/admin/users/${userId}/update-role`;
        document.getElementById('change-user-name').innerText = userName;
        document.getElementById('change_role_select').value = currentRole;
        getOrCreateModal('changeRoleModal').show();
    }
</script>
@endsection