@extends('layouts.dashboard')

@section('title', 'Mon Profil - Sciences Afrique')
@section('page-title', 'Mon Profil')
@section('page-subtitle', 'Gérez vos informations personnelles')

@php
    // Calculate profile completion
    $fields = ['name', 'email', 'bio', 'profile_photo'];
    if ($user->isStudent()) {
        $profileFields = ['matricule', 'faculty_id', 'department_id', 'level'];
    } elseif ($user->isTeacher()) {
        $profileFields = ['phone', 'office', 'specialties'];
    } else {
        $profileFields = ['employee_id'];
    }
    $total = count($fields) + count($profileFields);
    $filled = collect($fields)->filter(fn($f) => !empty($user->$f))->count()
            + collect($profileFields)->filter(fn($f) => !empty($profile->$f ?? null))->count();
    $completion = $total > 0 ? round(($filled / $total) * 100) : 0;

    $completionColor = $completion >= 80 ? '#22c55e' : ($completion >= 50 ? '#f59e0b' : '#ef4444');
    $completionLabel = $completion >= 80 ? 'Excellent !' : ($completion >= 50 ? 'Bien avancé' : 'À compléter');
@endphp

@section('content')
<div class="max-w-6xl mx-auto">

    {{-- Flash Messages --}}
    @if(session('success'))
        <div class="mb-6 flex items-center gap-3 px-5 py-4 bg-green-50 border border-green-200 rounded-2xl text-green-700 text-sm font-semibold">
            <i class="fa-solid fa-circle-check text-green-500"></i>
            {{ session('success') }}
        </div>
    @endif
    @if($errors->any())
        <div class="mb-6 flex items-start gap-3 px-5 py-4 bg-red-50 border border-red-200 rounded-2xl text-red-700 text-sm">
            <i class="fa-solid fa-triangle-exclamation text-red-400 mt-0.5"></i>
            <ul class="list-disc list-inside space-y-1">
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">

        {{-- ========== LEFT COLUMN : Profile Card ========== --}}
        <div class="lg:col-span-1 space-y-5">

            {{-- Profile Card --}}
            <div class="bg-white rounded-3xl shadow-sm border border-gray-100 overflow-hidden">
                {{-- Cover --}}
                <div class="h-24 bg-gradient-to-r from-blue-600 via-indigo-600 to-purple-600 relative">
                    <div class="absolute inset-0 opacity-20" style="background-image: url(\"data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.4'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E\");"></div>
                </div>

                {{-- Avatar upload --}}
                <div class="px-6 pb-6">
                    <div class="-mt-12 mb-4 flex items-end justify-between">
                        <form id="photoForm" action="{{ route('profile.update.general') }}" method="POST" enctype="multipart/form-data">
                            @csrf @method('PUT')
                            <input type="hidden" name="name" value="{{ $user->name }}">
                            <input type="hidden" name="email" value="{{ $user->email }}">
                            <label for="photo-upload" class="cursor-pointer group relative block w-24 h-24">
                                @if($user->profile_photo)
                                    <img src="{{ asset('storage/' . $user->profile_photo) }}"
                                         alt="{{ $user->name }}"
                                         class="w-24 h-24 rounded-2xl object-cover ring-4 ring-white shadow-lg">
                                @else
                                    <div class="w-24 h-24 rounded-2xl bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center ring-4 ring-white shadow-lg">
                                        <span class="text-3xl font-bold text-white">{{ strtoupper(substr($user->name, 0, 1)) }}</span>
                                    </div>
                                @endif
                                <div class="absolute inset-0 rounded-2xl bg-black/40 opacity-0 group-hover:opacity-100 transition-all flex items-center justify-center">
                                    <i class="fa-solid fa-camera text-white text-xl"></i>
                                </div>
                            </label>
                            <input id="photo-upload" type="file" name="profile_photo" accept="image/*" class="hidden"
                                   onchange="document.getElementById('photoForm').submit()">
                        </form>
                        <span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-bold
                            {{ $user->isStudent() ? 'bg-blue-100 text-blue-700' : ($user->isTeacher() ? 'bg-purple-100 text-purple-700' : 'bg-amber-100 text-amber-700') }}">
                            @if($user->isStudent()) <i class="fa-solid fa-graduation-cap"></i> Étudiant
                            @elseif($user->isTeacher()) <i class="fa-solid fa-chalkboard-teacher"></i> Enseignant
                            @else <i class="fa-solid fa-crown"></i> Admin
                            @endif
                        </span>
                    </div>

                    <h2 class="text-xl font-bold text-gray-900">{{ $user->name }}</h2>
                    <p class="text-sm text-gray-500 mt-0.5">{{ $user->email }}</p>

                    @if($user->bio)
                        <p class="mt-3 text-sm text-gray-600 leading-relaxed">{{ $user->bio }}</p>
                    @else
                        <p class="mt-3 text-sm text-gray-400 italic">Aucune biographie renseignée</p>
                    @endif

                    {{-- Quick info chips --}}
                    <div class="mt-4 flex flex-wrap gap-2">
                        @if($user->isStudent() && $profile->faculty)
                            <span class="inline-flex items-center gap-1 px-2.5 py-1 bg-gray-100 rounded-lg text-xs text-gray-600 font-medium">
                                <i class="fa-solid fa-university text-xs"></i> {{ $profile->faculty->name }}
                            </span>
                        @endif
                        @if($user->isStudent() && $profile->level)
                            <span class="inline-flex items-center gap-1 px-2.5 py-1 bg-gray-100 rounded-lg text-xs text-gray-600 font-medium">
                                <i class="fa-solid fa-layer-group text-xs"></i> {{ $profile->level }}
                            </span>
                        @endif
                        @if($user->isTeacher() && $profile->office)
                            <span class="inline-flex items-center gap-1 px-2.5 py-1 bg-gray-100 rounded-lg text-xs text-gray-600 font-medium">
                                <i class="fa-solid fa-door-open text-xs"></i> {{ $profile->office }}
                            </span>
                        @endif
                        @if($user->isTeacher() && $profile->phone)
                            <span class="inline-flex items-center gap-1 px-2.5 py-1 bg-gray-100 rounded-lg text-xs text-gray-600 font-medium">
                                <i class="fa-solid fa-phone text-xs"></i> {{ $profile->phone }}
                            </span>
                        @endif
                    </div>
                </div>
            </div>

            {{-- Profile Completion Card --}}
            <div class="bg-white rounded-3xl shadow-sm border border-gray-100 p-6">
                <div class="flex items-center justify-between mb-3">
                    <h3 class="font-bold text-gray-800 text-sm">Complétion du profil</h3>
                    <span class="text-lg font-black" style="color: {{ $completionColor }}">{{ $completion }}%</span>
                </div>

                {{-- Circular progress --}}
                <div class="flex items-center gap-4 mb-4">
                    <div class="relative w-20 h-20 shrink-0">
                        <svg class="w-20 h-20 -rotate-90" viewBox="0 0 36 36">
                            <path d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" 
                                  fill="none" stroke="#e5e7eb" stroke-width="3"/>
                            <path d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" 
                                  fill="none" stroke="{{ $completionColor }}" stroke-width="3"
                                  stroke-dasharray="{{ $completion }}, 100"
                                  stroke-linecap="round"/>
                        </svg>
                        <div class="absolute inset-0 flex items-center justify-center">
                            <span class="text-xs font-bold text-gray-700">{{ $completionLabel }}</span>
                        </div>
                    </div>
                    <div class="flex-1 space-y-2">
                        @foreach([
                            ['label' => 'Nom', 'done' => !empty($user->name)],
                            ['label' => 'Email', 'done' => !empty($user->email)],
                            ['label' => 'Photo', 'done' => !empty($user->profile_photo)],
                            ['label' => 'Biographie', 'done' => !empty($user->bio)],
                        ] as $item)
                            <div class="flex items-center gap-2">
                                @if($item['done'])
                                    <i class="fa-solid fa-circle-check text-green-500 text-xs w-4"></i>
                                @else
                                    <i class="fa-regular fa-circle text-gray-300 text-xs w-4"></i>
                                @endif
                                <span class="text-xs {{ $item['done'] ? 'text-gray-600' : 'text-gray-400' }}">{{ $item['label'] }}</span>
                            </div>
                        @endforeach
                    </div>
                </div>

                @if($completion < 100)
                    <p class="text-xs text-gray-500 bg-blue-50 rounded-xl px-3 py-2 border border-blue-100">
                        <i class="fa-solid fa-lightbulb text-blue-400 mr-1"></i>
                        Complétez votre profil pour améliorer votre visibilité
                    </p>
                @endif
            </div>

            {{-- Stats card --}}
            <div class="bg-gradient-to-br from-blue-600 to-indigo-700 rounded-3xl shadow-sm p-6 text-white">
                <h3 class="font-bold text-sm text-blue-100 mb-4">Activité</h3>
                <div class="grid grid-cols-2 gap-3">
                    <div class="bg-white/10 rounded-2xl p-3 text-center">
                        <span class="block text-2xl font-black">{{ $user->enrollments()->count() }}</span>
                        <span class="text-xs text-blue-100">Cours inscrits</span>
                    </div>
                    <div class="bg-white/10 rounded-2xl p-3 text-center">
                        <span class="block text-2xl font-black">{{ $user->total_points ?? 0 }}</span>
                        <span class="text-xs text-blue-100">Points XP</span>
                    </div>
                </div>
            </div>
        </div>

        {{-- ========== RIGHT COLUMN : Forms ========== --}}
        <div class="lg:col-span-2" x-data="{ tab: 'general' }">

            {{-- Tab navigation --}}
            <div class="bg-white rounded-3xl shadow-sm border border-gray-100 mb-5">
                <nav class="flex overflow-x-auto">
                    <button @click="tab='general'"
                            :class="tab==='general' ? 'border-b-2 border-blue-600 text-blue-600 bg-blue-50/50' : 'text-gray-500 hover:text-gray-700 hover:bg-gray-50'"
                            class="flex items-center gap-2 px-6 py-4 font-semibold text-sm transition-all whitespace-nowrap first:rounded-tl-3xl">
                        <i class="fa-solid fa-user"></i> Général
                    </button>
                    <button @click="tab='academic'"
                            :class="tab==='academic' ? 'border-b-2 border-blue-600 text-blue-600 bg-blue-50/50' : 'text-gray-500 hover:text-gray-700 hover:bg-gray-50'"
                            class="flex items-center gap-2 px-6 py-4 font-semibold text-sm transition-all whitespace-nowrap">
                        @if($user->isStudent())
                            <i class="fa-solid fa-graduation-cap"></i> Académique
                        @elseif($user->isTeacher())
                            <i class="fa-solid fa-chalkboard-teacher"></i> Professionnel
                        @else
                            <i class="fa-solid fa-briefcase"></i> Administration
                        @endif
                    </button>
                    <button @click="tab='security'"
                            :class="tab==='security' ? 'border-b-2 border-blue-600 text-blue-600 bg-blue-50/50' : 'text-gray-500 hover:text-gray-700 hover:bg-gray-50'"
                            class="flex items-center gap-2 px-6 py-4 font-semibold text-sm transition-all whitespace-nowrap">
                        <i class="fa-solid fa-shield-halved"></i> Sécurité
                    </button>
                </nav>
            </div>

            {{-- GENERAL TAB --}}
            <div x-show="tab==='general'" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 translate-y-2" x-transition:enter-end="opacity-100 translate-y-0">
                <div class="bg-white rounded-3xl shadow-sm border border-gray-100 p-8">
                    <h2 class="text-lg font-bold text-gray-900 mb-6 flex items-center gap-2">
                        <span class="w-8 h-8 bg-blue-100 rounded-xl flex items-center justify-center">
                            <i class="fa-solid fa-user text-blue-600 text-sm"></i>
                        </span>
                        Informations personnelles
                    </h2>

                    <form action="{{ route('profile.update.general') }}" method="POST" enctype="multipart/form-data" class="space-y-5">
                        @csrf @method('PUT')

                        {{-- Photo upload section --}}
                        <div class="flex items-center gap-5 p-5 bg-gray-50 rounded-2xl border border-dashed border-gray-200">
                            @if($user->profile_photo)
                                <img src="{{ asset('storage/' . $user->profile_photo) }}"
                                     alt="{{ $user->name }}"
                                     class="w-16 h-16 rounded-xl object-cover shadow">
                            @else
                                <div class="w-16 h-16 rounded-xl bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center shadow">
                                    <span class="text-xl font-bold text-white">{{ strtoupper(substr($user->name, 0, 1)) }}</span>
                                </div>
                            @endif
                            <div class="flex-1">
                                <p class="text-sm font-bold text-gray-700 mb-1">Photo de profil</p>
                                <p class="text-xs text-gray-400 mb-2">JPG, PNG ou GIF — max 2 Mo</p>
                                <input type="file" name="profile_photo" accept="image/*"
                                       class="block w-full text-xs text-gray-500
                                              file:mr-3 file:py-1.5 file:px-4 file:rounded-lg file:border-0
                                              file:text-xs file:font-semibold file:bg-blue-600 file:text-white
                                              hover:file:bg-blue-700 file:cursor-pointer file:transition-colors"/>
                            </div>
                        </div>

                        <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                            <div>
                                <label class="block text-sm font-bold text-gray-700 mb-2">Nom complet *</label>
                                <input type="text" name="name" value="{{ old('name', $user->name) }}" required
                                       class="w-full px-4 py-3.5 bg-gray-50 border border-gray-200 rounded-xl focus:ring-4 focus:ring-blue-100 focus:border-blue-500 outline-none transition-all text-gray-800 font-medium @error('name') border-red-400 bg-red-50 @enderror">
                                @error('name') <p class="mt-1 text-xs text-red-500">{{ $message }}</p> @enderror
                            </div>
                            <div>
                                <label class="block text-sm font-bold text-gray-700 mb-2">Adresse email *</label>
                                <input type="email" name="email" value="{{ old('email', $user->email) }}" required
                                       class="w-full px-4 py-3.5 bg-gray-50 border border-gray-200 rounded-xl focus:ring-4 focus:ring-blue-100 focus:border-blue-500 outline-none transition-all text-gray-800 font-medium @error('email') border-red-400 bg-red-50 @enderror">
                                @error('email') <p class="mt-1 text-xs text-red-500">{{ $message }}</p> @enderror
                            </div>
                        </div>

                        <div>
                            <label class="block text-sm font-bold text-gray-700 mb-2">Biographie
                                <span class="font-normal text-gray-400">(visible sur votre profil)</span>
                            </label>
                            <textarea name="bio" rows="4" maxlength="1000"
                                      placeholder="Parlez-nous de vous : votre parcours, vos objectifs, vos centres d'intérêt..."
                                      class="w-full px-4 py-3.5 bg-gray-50 border border-gray-200 rounded-xl focus:ring-4 focus:ring-blue-100 focus:border-blue-500 outline-none transition-all text-gray-800 font-medium resize-none @error('bio') border-red-400 bg-red-50 @enderror">{{ old('bio', $user->bio) }}</textarea>
                            <p class="mt-1 text-xs text-gray-400 text-right">{{ strlen($user->bio ?? '') }}/1000</p>
                        </div>

                        <div class="pt-2">
                            <button type="submit"
                                    class="w-full py-4 bg-gradient-to-r from-blue-600 to-indigo-600 text-white font-bold rounded-2xl shadow-lg shadow-blue-500/25 hover:shadow-xl hover:shadow-blue-500/30 hover:-translate-y-0.5 transition-all duration-200 flex items-center justify-center gap-2">
                                <i class="fa-solid fa-check"></i>
                                Enregistrer les modifications
                            </button>
                        </div>
                    </form>
                </div>
            </div>

            {{-- ACADEMIC TAB --}}
            <div x-show="tab==='academic'" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 translate-y-2" x-transition:enter-end="opacity-100 translate-y-0">
                <div class="bg-white rounded-3xl shadow-sm border border-gray-100 p-8">
                    <h2 class="text-lg font-bold text-gray-900 mb-6 flex items-center gap-2">
                        <span class="w-8 h-8 bg-purple-100 rounded-xl flex items-center justify-center">
                            @if($user->isStudent())
                                <i class="fa-solid fa-graduation-cap text-purple-600 text-sm"></i>
                            @else
                                <i class="fa-solid fa-chalkboard-teacher text-purple-600 text-sm"></i>
                            @endif
                        </span>
                        @if($user->isStudent()) Informations académiques
                        @elseif($user->isTeacher()) Informations professionnelles
                        @else Informations administratives
                        @endif
                    </h2>

                    <form action="{{ route('profile.update.academic') }}" method="POST" class="space-y-5">
                        @csrf @method('PUT')

                        @if($user->isStudent())
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                                <div>
                                    <label class="block text-sm font-bold text-gray-700 mb-2">Matricule</label>
                                    <input type="text" name="matricule" value="{{ old('matricule', $profile->matricule) }}"
                                           placeholder="Ex: MA-2024-001"
                                           class="w-full px-4 py-3.5 bg-gray-50 border border-gray-200 rounded-xl focus:ring-4 focus:ring-blue-100 focus:border-blue-500 outline-none transition-all text-gray-800 font-medium">
                                </div>
                                <div>
                                    <label class="block text-sm font-bold text-gray-700 mb-2">Année académique</label>
                                    <input type="text" name="academic_year" value="{{ old('academic_year', $profile->academic_year) }}"
                                           placeholder="Ex: 2024-2025"
                                           class="w-full px-4 py-3.5 bg-gray-50 border border-gray-200 rounded-xl focus:ring-4 focus:ring-blue-100 focus:border-blue-500 outline-none transition-all text-gray-800 font-medium">
                                </div>
                            </div>

                            <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                                <div>
                                    <label class="block text-sm font-bold text-gray-700 mb-2">Faculté</label>
                                    <select name="faculty_id" id="faculty_id"
                                            onchange="loadDepartments(this.value)"
                                            class="w-full px-4 py-3.5 bg-gray-50 border border-gray-200 rounded-xl focus:ring-4 focus:ring-blue-100 focus:border-blue-500 outline-none transition-all text-gray-800 font-medium">
                                        <option value="">Sélectionner une faculté</option>
                                        @foreach($faculties as $faculty)
                                            <option value="{{ $faculty->id }}" {{ old('faculty_id', $profile->faculty_id) == $faculty->id ? 'selected' : '' }}>
                                                {{ $faculty->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                                <div>
                                    <label class="block text-sm font-bold text-gray-700 mb-2">Département</label>
                                    <select name="department_id" id="department_id"
                                            class="w-full px-4 py-3.5 bg-gray-50 border border-gray-200 rounded-xl focus:ring-4 focus:ring-blue-100 focus:border-blue-500 outline-none transition-all text-gray-800 font-medium">
                                        <option value="">Sélectionner un département</option>
                                        @foreach($departments as $dep)
                                            <option value="{{ $dep->id }}" {{ old('department_id', $profile->department_id) == $dep->id ? 'selected' : '' }}>
                                                {{ $dep->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            <div>
                                <label class="block text-sm font-bold text-gray-700 mb-2">Niveau d'études</label>
                                <div class="grid grid-cols-3 md:grid-cols-6 gap-2">
                                    @foreach(['L1' => 'Licence 1', 'L2' => 'Licence 2', 'L3' => 'Licence 3', 'M1' => 'Master 1', 'M2' => 'Master 2', 'D' => 'Doctorat'] as $val => $label)
                                        <label class="cursor-pointer">
                                            <input type="radio" name="level" value="{{ $val }}" class="sr-only peer"
                                                   {{ old('level', $profile->level) == $val ? 'checked' : '' }}>
                                            <div class="text-center px-2 py-3 rounded-xl border-2 border-gray-200 text-sm font-semibold text-gray-500
                                                        peer-checked:border-blue-500 peer-checked:bg-blue-50 peer-checked:text-blue-700
                                                        hover:border-blue-300 transition-all">
                                                {{ $val }}
                                            </div>
                                        </label>
                                    @endforeach
                                </div>
                            </div>

                        @elseif($user->isTeacher())
                            <div>
                                <label class="block text-sm font-bold text-gray-700 mb-3">Spécialités</label>
                                @php
                                    $specialties = old('specialties', $profile->specialties ?? []);
                                    if(is_string($specialties)) $specialties = json_decode($specialties, true) ?? [];
                                @endphp
                                <div class="flex flex-wrap gap-2">
                                    @foreach(['Mathématiques', 'Physique', 'Chimie', 'Informatique', 'Biologie', 'Économie', 'Droit', 'Lettres', 'Histoire', 'Géographie', 'Médecine', 'Ingénierie'] as $spec)
                                        <label class="cursor-pointer">
                                            <input type="checkbox" name="specialties[]" value="{{ $spec }}" class="sr-only peer"
                                                   {{ in_array($spec, $specialties) ? 'checked' : '' }}>
                                            <span class="inline-block px-4 py-2 rounded-xl border-2 border-gray-200 text-sm font-medium text-gray-500
                                                         peer-checked:border-purple-500 peer-checked:bg-purple-50 peer-checked:text-purple-700
                                                         hover:border-purple-300 transition-all">
                                                {{ $spec }}
                                            </span>
                                        </label>
                                    @endforeach
                                </div>
                            </div>

                            <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                                <div>
                                    <label class="block text-sm font-bold text-gray-700 mb-2">Bureau</label>
                                    <input type="text" name="office" value="{{ old('office', $profile->office) }}"
                                           placeholder="Ex: Bât. A, Salle 205"
                                           class="w-full px-4 py-3.5 bg-gray-50 border border-gray-200 rounded-xl focus:ring-4 focus:ring-blue-100 focus:border-blue-500 outline-none transition-all text-gray-800 font-medium">
                                </div>
                                <div>
                                    <label class="block text-sm font-bold text-gray-700 mb-2">Téléphone</label>
                                    <input type="tel" name="phone" value="{{ old('phone', $profile->phone) }}"
                                           placeholder="+225 XX XX XX XX"
                                           class="w-full px-4 py-3.5 bg-gray-50 border border-gray-200 rounded-xl focus:ring-4 focus:ring-blue-100 focus:border-blue-500 outline-none transition-all text-gray-800 font-medium">
                                </div>
                            </div>

                            <div>
                                <label class="block text-sm font-bold text-gray-700 mb-2">Signature numérique</label>
                                <textarea name="digital_signature" rows="3" maxlength="500"
                                          placeholder="Votre signature officielle pour les documents..."
                                          class="w-full px-4 py-3.5 bg-gray-50 border border-gray-200 rounded-xl focus:ring-4 focus:ring-blue-100 focus:border-blue-500 outline-none transition-all text-gray-800 font-medium resize-none">{{ old('digital_signature', $profile->digital_signature) }}</textarea>
                            </div>

                        @else
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                                <div>
                                    <label class="block text-sm font-bold text-gray-700 mb-2">ID Employé</label>
                                    <input type="text" name="employee_id" value="{{ old('employee_id', $profile->employee_id) }}"
                                           class="w-full px-4 py-3.5 bg-gray-50 border border-gray-200 rounded-xl focus:ring-4 focus:ring-blue-100 focus:border-blue-500 outline-none transition-all text-gray-800 font-medium">
                                </div>
                                <div>
                                    <label class="block text-sm font-bold text-gray-700 mb-2">Département</label>
                                    <input type="text" name="department" value="{{ old('department', $profile->department) }}"
                                           class="w-full px-4 py-3.5 bg-gray-50 border border-gray-200 rounded-xl focus:ring-4 focus:ring-blue-100 focus:border-blue-500 outline-none transition-all text-gray-800 font-medium">
                                </div>
                            </div>
                        @endif

                        <div class="pt-2">
                            <button type="submit"
                                    class="w-full py-4 bg-gradient-to-r from-purple-600 to-indigo-600 text-white font-bold rounded-2xl shadow-lg shadow-purple-500/25 hover:shadow-xl hover:shadow-purple-500/30 hover:-translate-y-0.5 transition-all duration-200 flex items-center justify-center gap-2">
                                <i class="fa-solid fa-check"></i>
                                Enregistrer les informations
                            </button>
                        </div>
                    </form>
                </div>
            </div>

            {{-- SECURITY TAB --}}
            <div x-show="tab==='security'" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 translate-y-2" x-transition:enter-end="opacity-100 translate-y-0">
                <div class="bg-white rounded-3xl shadow-sm border border-gray-100 p-8">
                    <h2 class="text-lg font-bold text-gray-900 mb-6 flex items-center gap-2">
                        <span class="w-8 h-8 bg-red-100 rounded-xl flex items-center justify-center">
                            <i class="fa-solid fa-shield-halved text-red-600 text-sm"></i>
                        </span>
                        Sécurité du compte
                    </h2>

                    <form action="{{ route('profile.update.security') }}" method="POST" class="space-y-5">
                        @csrf @method('PUT')

                        <div class="p-5 bg-amber-50 border border-amber-200 rounded-2xl flex items-start gap-3">
                            <i class="fa-solid fa-triangle-exclamation text-amber-500 mt-0.5"></i>
                            <p class="text-sm text-amber-800">Pour modifier votre mot de passe, entrez votre mot de passe actuel pour confirmer votre identité.</p>
                        </div>

                        <div>
                            <label class="block text-sm font-bold text-gray-700 mb-2">Mot de passe actuel *</label>
                            <input type="password" name="current_password" required
                                   class="w-full px-4 py-3.5 bg-gray-50 border border-gray-200 rounded-xl focus:ring-4 focus:ring-blue-100 focus:border-blue-500 outline-none transition-all text-gray-800 font-medium @error('current_password') border-red-400 bg-red-50 @enderror">
                            @error('current_password') <p class="mt-1 text-xs text-red-500">{{ $message }}</p> @enderror
                        </div>

                        <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                            <div>
                                <label class="block text-sm font-bold text-gray-700 mb-2">Nouveau mot de passe</label>
                                <input type="password" name="password" minlength="8"
                                       class="w-full px-4 py-3.5 bg-gray-50 border border-gray-200 rounded-xl focus:ring-4 focus:ring-blue-100 focus:border-blue-500 outline-none transition-all text-gray-800 font-medium @error('password') border-red-400 bg-red-50 @enderror">
                                @error('password') <p class="mt-1 text-xs text-red-500">{{ $message }}</p> @enderror
                                <p class="mt-1 text-xs text-gray-400">Min. 8 caractères — laisser vide pour ne pas changer</p>
                            </div>
                            <div>
                                <label class="block text-sm font-bold text-gray-700 mb-2">Confirmer le nouveau mot de passe</label>
                                <input type="password" name="password_confirmation"
                                       class="w-full px-4 py-3.5 bg-gray-50 border border-gray-200 rounded-xl focus:ring-4 focus:ring-blue-100 focus:border-blue-500 outline-none transition-all text-gray-800 font-medium">
                            </div>
                        </div>

                        {{-- 2FA toggle --}}
                        <div class="p-5 bg-gray-50 border border-gray-200 rounded-2xl flex items-center justify-between">
                            <div>
                                <h3 class="font-bold text-gray-800 text-sm">Authentification à deux facteurs</h3>
                                <p class="text-xs text-gray-500 mt-0.5">Couche de sécurité supplémentaire</p>
                            </div>
                            <label class="relative inline-flex items-center cursor-pointer">
                                <input type="checkbox" name="two_factor_enabled" value="1" class="sr-only peer"
                                       {{ $user->hasTwoFactorEnabled() ? 'checked' : '' }}>
                                <div class="w-11 h-6 bg-gray-300 rounded-full peer-focus:ring-4 peer-focus:ring-blue-100
                                            peer-checked:bg-blue-600 after:content-[''] after:absolute after:top-[2px] after:left-[2px]
                                            after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all
                                            peer-checked:after:translate-x-5 transition-all"></div>
                            </label>
                        </div>

                        <div class="pt-2">
                            <button type="submit"
                                    class="w-full py-4 bg-gradient-to-r from-red-500 to-rose-600 text-white font-bold rounded-2xl shadow-lg shadow-red-500/25 hover:shadow-xl hover:shadow-red-500/30 hover:-translate-y-0.5 transition-all duration-200 flex items-center justify-center gap-2">
                                <i class="fa-solid fa-shield-halved"></i>
                                Mettre à jour la sécurité
                            </button>
                        </div>
                    </form>
                </div>
            </div>

        </div>{{-- end right col --}}
    </div>{{-- end grid --}}
</div>

@push('scripts')
<script>
function loadDepartments(facultyId) {
    if (!facultyId) return;
    fetch(`/profile/departments/${facultyId}`)
        .then(r => r.json())
        .then(departments => {
            const select = document.getElementById('department_id');
            select.innerHTML = '<option value="">Sélectionner un département</option>';
            departments.forEach(dep => {
                const opt = document.createElement('option');
                opt.value = dep.id;
                opt.textContent = dep.name;
                select.appendChild(opt);
            });
        });
}
</script>
@endpush
@endsection