@extends('school.layouts.app')

@section('content')
<div class="w-full px-4 sm:px-6 lg:px-8">
    <!-- Header -->
    <div class="mb-5">
        <h1 class="text-2xl font-bold text-slate-800">User Management</h1>
        <p class="text-xs text-slate-400 mt-0.5">Reset passwords and manage user access for Staff and Students</p>
    </div>

    <!-- 3D World-Class Alert -->
    <div id="alert-box" class="fixed top-6 left-1/2 -translate-x-1/2 z-[100] hidden">
        <div id="alert-inner" class="relative px-6 py-4 rounded-2xl shadow-2xl text-sm font-bold text-white transform transition-all duration-500 scale-0 opacity-0 translate-y-[-20px]">
            <div class="absolute inset-0 rounded-2xl bg-gradient-to-br from-white/20 to-transparent pointer-events-none"></div>
            <div class="flex items-center gap-3 relative z-10">
                <i id="alert-icon" class="fa-solid text-lg"></i>
                <span id="alert-message"></span>
            </div>
            <div class="absolute -bottom-1 left-1/2 -translate-x-1/2 w-3 h-3 rotate-45" id="alert-arrow"></div>
        </div>
    </div>

      <!-- Filters -->
    <div class="bg-white rounded-xl border border-slate-200 shadow-sm p-4 mb-6">
        <form method="GET" action="{{ route('school.settings.users') }}" class="flex flex-wrap items-end gap-3">
            <div class="flex-1 min-w-[200px]">
                <label class="block text-[11px] font-semibold text-slate-500 uppercase tracking-wider mb-1">Search</label>
                <input type="text" name="search" value="{{ request('search') }}" placeholder="Name, Code, Email..." 
                       class="w-full px-3 py-2 rounded-lg border border-slate-200 text-sm outline-none focus:ring-2 focus:ring-indigo-500">
            </div>
            <div class="w-40">
                <label class="block text-[11px] font-semibold text-slate-500 uppercase tracking-wider mb-1">User Type</label>
                <select name="type" onchange="this.form.submit()" class="w-full px-3 py-2 rounded-lg border border-slate-200 text-sm outline-none focus:ring-2 focus:ring-indigo-500">
                    <option value="all" {{ $type == 'all' ? 'selected' : '' }}>All Users</option>
                    <option value="staff" {{ $type == 'staff' ? 'selected' : '' }}>Staff Only</option>
                    <option value="students" {{ $type == 'students' ? 'selected' : '' }}>Students Only</option>
                </select>
            </div>
            <div class="w-48">
                <label class="block text-[11px] font-semibold text-slate-500 uppercase tracking-wider mb-1">Session</label>
                <select name="session_id" onchange="this.form.submit()" class="w-full px-3 py-2 rounded-lg border border-slate-200 text-sm outline-none focus:ring-2 focus:ring-indigo-500">
                    <option value="">All Sessions</option>
                    @foreach($sessions as $s)
                        <option value="{{ $s->id }}" {{ $sessionFilter == $s->id ? 'selected' : '' }}>{{ $s->session_name }}</option>
                    @endforeach
                </select>
            </div>
            <button type="submit" class="px-5 py-2 bg-indigo-600 text-white rounded-lg font-semibold text-sm hover:bg-indigo-700 transition-colors shadow-sm">
                <i class="fa-solid fa-magnifying-glass mr-1"></i> Search
            </button>
                       @if(request('search') || request('type') != 'all' || request()->has('session_id'))
                <a href="{{ route('school.settings.users') }}" class="px-4 py-2 text-slate-500 text-sm font-semibold hover:text-slate-700">
                    <i class="fa-solid fa-rotate-left mr-1"></i> Reset
                </a>
            @endif
        </form>
    </div>

    <!-- Users Table -->
    <div class="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden">
        <table class="w-full text-left">
            <thead class="bg-slate-50 border-b border-slate-100">
                <tr>
                    <th class="p-4 text-xs font-bold text-slate-500 uppercase w-12">#</th>                    
                    <th class="p-4 text-xs font-bold text-slate-500 uppercase">Session</th>
                    <th class="p-4 text-xs font-bold text-slate-500 uppercase">Name</th>
                    <th class="p-4 text-xs font-bold text-slate-500 uppercase">Code / Adm.No.</th>
                    <th class="p-4 text-xs font-bold text-slate-500 uppercase">Type</th>
                    <th class="p-4 text-xs font-bold text-slate-500 uppercase">User ID</th>
                    <th class="p-4 text-xs font-bold text-slate-500 uppercase">Department/Class</th>
                    <th class="p-4 text-xs font-bold text-slate-500 uppercase">Contact</th>
                    <th class="p-4 text-xs font-bold text-slate-500 uppercase text-center">Status</th>
                    <th class="p-4 text-xs font-bold text-slate-500 uppercase text-right">Actions</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-slate-50">
                @forelse($users as $index => $u)
                @php
                    $isActive = ($u->type == 'Staff' && $u->status == 1) || ($u->type == 'Student' && $u->status == 'Active');
                    $typeSlug = $u->type == 'Staff' ? 'staff' : 'student';
                @endphp
                <tr class="hover:bg-slate-50 transition-all {{ !$isActive ? 'opacity-60 bg-slate-50' : '' }}">
                    <td class="p-4 text-sm text-slate-400">{{ $users->firstItem() + $index }}</td>
                    <td class="p-4 text-xs text-slate-500">
                        {{ $u->session_name ?? '—' }}
                    </td>
                    <td class="p-4">
                        <div class="text-sm font-semibold {{ $isActive ? 'text-slate-700' : 'text-slate-400 line-through' }}">{{ $u->name }}</div>
                        <div class="text-[10px] text-slate-400">{{ $u->email }}</div>
                    </td>
                    <td class="p-4 text-sm font-mono text-slate-600 bg-slate-50 rounded">{{ $u->code }}</td>
                    <td class="p-4">
                        <span class="px-2 py-1 rounded-full text-[10px] font-bold {{ $u->type == 'Staff' ? 'bg-indigo-100 text-indigo-600' : 'bg-emerald-100 text-emerald-600' }}">
                            {{ $u->type }}
                        </span>
                    </td>
                    <td class="p-4 text-sm font-mono text-slate-600 bg-slate-50 rounded">{{ $u->user_id }}</td>
                    <td class="p-4 text-sm text-slate-600">
                        <div class="font-medium">{{ $u->designation }}</div>
                        <div class="text-[10px] text-slate-400">{{ $u->department }}</div>
                    </td>
                    <td class="p-4 text-sm text-slate-600">{{ $u->phone }}</td>
                    <td class="p-4 text-center">
                        <span class="px-2 py-1 rounded-full text-[10px] font-bold {{ $isActive ? 'bg-emerald-100 text-emerald-600' : 'bg-red-100 text-red-600' }}">
                            {{ $isActive ? 'ACTIVE' : 'INACTIVE' }}
                        </span>
                    </td>
                    <td class="p-4 text-right space-x-1">
                        <button onclick="openResetModal('{{ $typeSlug }}', {{ $u->id }}, '{{ $u->name }}')" 
                                class="px-3 py-1.5 bg-amber-50 text-amber-600 rounded-lg text-xs font-bold hover:bg-amber-100 transition-all border border-amber-200">
                            <i class="fa-solid fa-key mr-1"></i> Reset
                        </button>
                        
                        @if($isActive)
                            <button onclick="confirmToggle('{{ $typeSlug }}', {{ $u->id }}, '{{ $u->name }}', 'deactivate')" 
                                    class="px-3 py-1.5 bg-red-50 text-red-600 rounded-lg text-xs font-bold hover:bg-red-100 transition-all border border-red-200">
                                <i class="fa-solid fa-user-slash mr-1"></i> Deactivate
                            </button>
                        @else
                            <button onclick="confirmToggle('{{ $typeSlug }}', {{ $u->id }}, '{{ $u->name }}', 'reactivate')" 
                                    class="px-3 py-1.5 bg-emerald-50 text-emerald-600 rounded-lg text-xs font-bold hover:bg-emerald-100 transition-all border border-emerald-200">
                                <i class="fa-solid fa-user-check mr-1"></i> Reactivate
                            </button>
                        @endif
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="9" class="p-10 text-center text-slate-400">
                        <i class="fa-solid fa-users-slash text-2xl mb-2 block"></i>
                        No users found.
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    <!-- Pagination -->
    <div class="mt-4">
        {{ $users->links() }}
    </div>
</div>

<!-- Reset Password Modal -->
@php
    $hasResetErrors = $errors->has('new_password') || $errors->has('new_password_confirmation') || $errors->has('user_type') || $errors->has('user_id');
@endphp

<div id="reset-modal" class="fixed inset-0 z-50 {{ $hasResetErrors ? 'flex' : 'hidden' }} bg-black/60 backdrop-blur-sm items-center justify-center p-4">
    <div class="bg-white w-full max-w-md rounded-2xl shadow-2xl transform transition-all overflow-hidden">
        <div class="bg-amber-500 p-5 text-white flex justify-between items-center">
            <h4 class="text-sm font-bold uppercase tracking-wide"><i class="fa-solid fa-key mr-2"></i> Reset Password</h4>
            <button onclick="closeResetModal()" class="text-white/80 hover:text-white"><i class="fa-solid fa-times"></i></button>
        </div>
        
        <form id="reset-form" method="POST" action="{{ route('school.settings.users.reset-password') }}" class="p-6 space-y-4">
            @csrf
            <input type="hidden" name="user_type" id="reset-user-type" value="{{ old('user_type') }}">
            <input type="hidden" name="user_id" id="reset-user-id" value="{{ old('user_id') }}">
            
            @if ($errors->any())
                <div class="p-3 bg-red-50 border border-red-200 rounded-xl">
                    <ul class="list-disc ml-4 text-xs text-red-600 font-medium space-y-0.5">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif
            
            <div class="bg-slate-50 p-3 rounded-lg border border-slate-100">
                <p class="text-xs text-slate-500">Resetting password for:</p>
                <p id="reset-user-name" class="text-sm font-bold text-slate-700 mt-1">{{ old('user_name', 'User') }}</p>
            </div>

            <div>
                <label class="block text-[11px] font-semibold text-slate-500 uppercase tracking-wider mb-1">New Password <span class="text-red-500">*</span></label>
                <input type="password" name="new_password" id="new-password" required minlength="6"
                       class="w-full px-3 py-2 rounded-lg border border-slate-200 text-sm outline-none focus:ring-2 focus:ring-amber-500"
                       placeholder="Minimum 6 characters">
                @error('new_password')
                    <span class="text-[10px] text-red-500 font-medium mt-1 block">{{ $message }}</span>
                @enderror
            </div>

            <div>
                <label class="block text-[11px] font-semibold text-slate-500 uppercase tracking-wider mb-1">Confirm Password <span class="text-red-500">*</span></label>
                <input type="password" name="new_password_confirmation" required
                       class="w-full px-3 py-2 rounded-lg border border-slate-200 text-sm outline-none focus:ring-2 focus:ring-amber-500"
                       placeholder="Re-enter password">
                @error('new_password_confirmation')
                    <span class="text-[10px] text-red-500 font-medium mt-1 block">{{ $message }}</span>
                @enderror
            </div>

            <div class="flex justify-end gap-3 pt-2">
                <button type="button" onclick="closeResetModal()" class="px-4 py-2 text-sm font-bold text-slate-500 hover:text-slate-700">Cancel</button>
                <button type="submit" class="px-6 py-2 bg-amber-500 text-white rounded-lg text-sm font-bold hover:bg-amber-600 shadow-md transition-all">
                    <i class="fa-solid fa-check mr-1"></i> Reset Password
                </button>
            </div>
        </form>
    </div>
</div>

<!-- 3D Confirm Modal -->
<div id="confirm-modal" class="fixed inset-0 z-50 hidden items-center justify-center p-4">
    <div class="absolute inset-0 bg-black/40 backdrop-blur-sm transition-opacity" onclick="closeConfirmModal()"></div>
    <div class="relative bg-white w-full max-w-sm rounded-3xl shadow-2xl transform transition-all duration-300 scale-90 opacity-0" id="confirm-inner">
        <div class="p-8 text-center">
            <div id="confirm-icon-wrap" class="w-20 h-20 mx-auto mb-5 rounded-full flex items-center justify-center text-3xl shadow-lg transform transition-transform duration-500">
                <i id="confirm-icon" class="fa-solid"></i>
            </div>
            <h3 id="confirm-title" class="text-lg font-black text-slate-800 mb-2"></h3>
            <p id="confirm-body" class="text-sm text-slate-500 mb-6 leading-relaxed"></p>
            <div class="flex gap-3 justify-center">
                <button onclick="closeConfirmModal()" class="px-5 py-2.5 text-sm font-bold text-slate-500 hover:text-slate-700 bg-slate-50 rounded-xl border border-slate-200 transition-all">
                    Cancel
                </button>
                <a id="confirm-action" href="#" class="px-6 py-2.5 text-sm font-bold text-white rounded-xl shadow-lg transition-all hover:shadow-xl active:scale-95">
                    Confirm
                </a>
            </div>
        </div>
    </div>
</div>

<script>
    // ========== 3D ALERT SYSTEM ==========
    function showAlert(message, type = 'success') {
        const box = document.getElementById('alert-box');
        const inner = document.getElementById('alert-inner');
        const icon = document.getElementById('alert-icon');
        const msg = document.getElementById('alert-message');
        const arrow = document.getElementById('alert-arrow');

        msg.textContent = message;
        box.classList.remove('hidden');

        if (type === 'success') {
            inner.className = 'relative px-6 py-4 rounded-2xl shadow-2xl text-sm font-bold text-white transform transition-all duration-500 scale-0 opacity-0 translate-y-[-20px] bg-gradient-to-br from-emerald-500 to-emerald-700';
            icon.className = 'fa-solid fa-circle-check text-lg';
            arrow.className = 'absolute -bottom-1 left-1/2 -translate-x-1/2 w-3 h-3 rotate-45 bg-emerald-600';
        } else {
            inner.className = 'relative px-6 py-4 rounded-2xl shadow-2xl text-sm font-bold text-white transform transition-all duration-500 scale-0 opacity-0 translate-y-[-20px] bg-gradient-to-br from-red-500 to-red-700';
            icon.className = 'fa-solid fa-triangle-exclamation text-lg';
            arrow.className = 'absolute -bottom-1 left-1/2 -translate-x-1/2 w-3 h-3 rotate-45 bg-red-600';
        }

        // Animate in
        requestAnimationFrame(() => {
            inner.classList.remove('scale-0', 'opacity-0', 'translate-y-[-20px]');
            inner.classList.add('scale-100', 'opacity-100', 'translate-y-0');
        });

        // Auto dismiss
        setTimeout(() => {
            inner.classList.remove('scale-100', 'opacity-100', 'translate-y-0');
            inner.classList.add('scale-0', 'opacity-0', 'translate-y-[-20px]');
            setTimeout(() => box.classList.add('hidden'), 500);
        }, 3500);
    }

    // Show session flash alerts
    @if(session('success'))
        document.addEventListener('DOMContentLoaded', () => showAlert("{{ session('success') }}", 'success'));
    @endif
    @if(session('error'))
        document.addEventListener('DOMContentLoaded', () => showAlert("{{ session('error') }}", 'error'));
    @endif

    // ========== RESET PASSWORD MODAL ==========
    function openResetModal(userType, userId, userName) {
        document.getElementById('reset-user-type').value = userType;
        document.getElementById('reset-user-id').value = userId;
        document.getElementById('reset-user-name').textContent = userName;
        document.getElementById('new-password').value = '';
        
        const modal = document.getElementById('reset-modal');
        modal.classList.remove('hidden');
        modal.classList.add('flex');
    }

    function closeResetModal() {
        const modal = document.getElementById('reset-modal');
        modal.classList.add('hidden');
        modal.classList.remove('flex');
    }

    document.getElementById('reset-modal').addEventListener('click', function(e) {
        if (e.target === this) closeResetModal();
    });

    // ========== 3D CONFIRM MODAL ==========
    function confirmToggle(type, id, name, action) {
        const modal = document.getElementById('confirm-modal');
        const inner = document.getElementById('confirm-inner');
        const iconWrap = document.getElementById('confirm-icon-wrap');
        const icon = document.getElementById('confirm-icon');
        const title = document.getElementById('confirm-title');
        const body = document.getElementById('confirm-body');
        const btn = document.getElementById('confirm-action');

        const route = "{{ route('school.settings.users.toggle', ['type' => ':type', 'id' => ':id']) }}"
            .replace(':type', type)
            .replace(':id', id);

        btn.href = route;

        if (action === 'deactivate') {
            iconWrap.className = 'w-20 h-20 mx-auto mb-5 rounded-full flex items-center justify-center text-3xl shadow-lg transform transition-transform duration-500 bg-gradient-to-br from-red-100 to-red-200 text-red-600';
            icon.className = 'fa-solid fa-user-slash';
            title.textContent = 'Deactivate User?';
            title.className = 'text-lg font-black text-red-600 mb-2';
            body.innerHTML = 'You are about to <strong class="text-red-600">deactivate</strong> <br><span class="font-bold text-slate-700">' + name + '</span><br>This user will no longer be able to log in.';
            btn.className = 'px-6 py-2.5 text-sm font-bold text-white rounded-xl shadow-lg transition-all hover:shadow-xl active:scale-95 bg-gradient-to-br from-red-500 to-red-700 hover:from-red-600 hover:to-red-800';
            btn.innerHTML = '<i class="fa-solid fa-user-slash mr-1"></i> Deactivate';
        } else {
            iconWrap.className = 'w-20 h-20 mx-auto mb-5 rounded-full flex items-center justify-center text-3xl shadow-lg transform transition-transform duration-500 bg-gradient-to-br from-emerald-100 to-emerald-200 text-emerald-600';
            icon.className = 'fa-solid fa-user-check';
            title.textContent = 'Reactivate User?';
            title.className = 'text-lg font-black text-emerald-600 mb-2';
            body.innerHTML = 'You are about to <strong class="text-emerald-600">reactivate</strong> <br><span class="font-bold text-slate-700">' + name + '</span><br>This user will be able to log in again.';
            btn.className = 'px-6 py-2.5 text-sm font-bold text-white rounded-xl shadow-lg transition-all hover:shadow-xl active:scale-95 bg-gradient-to-br from-emerald-500 to-emerald-700 hover:from-emerald-600 hover:to-emerald-800';
            btn.innerHTML = '<i class="fa-solid fa-user-check mr-1"></i> Reactivate';
        }

        modal.classList.remove('hidden');
        modal.classList.add('flex');
        
        requestAnimationFrame(() => {
            inner.classList.remove('scale-90', 'opacity-0');
            inner.classList.add('scale-100', 'opacity-100');
            iconWrap.classList.add('animate-bounce');
            setTimeout(() => iconWrap.classList.remove('animate-bounce'), 1000);
        });
    }

    function closeConfirmModal() {
        const modal = document.getElementById('confirm-modal');
        const inner = document.getElementById('confirm-inner');
        
        inner.classList.remove('scale-100', 'opacity-100');
        inner.classList.add('scale-90', 'opacity-0');
        
        setTimeout(() => {
            modal.classList.add('hidden');
            modal.classList.remove('flex');
        }, 300);
    }
</script>
@endsection