@extends('back.layout')

@section('content')
    <main class="main-content w-full px-[var(--margin-x)] pb-8">
        <div class="grid grid-cols-12 gap-4 sm:gap-5 lg:gap-6">
            <div class="col-span-12">
                <div class="card">
                    <div class="border-b border-slate-200 p-4 dark:border-navy-500 sm:px-5">
                        <div class="flex items-center justify-between space-x-2">
                            <div class="flex items-center">
                                <div
                                    class="flex h-7 w-7 items-center justify-center rounded-lg bg-primary/10 p-1 text-primary dark:bg-accent-light/10 dark:text-accent-light">
                                    <i class="fa-solid fa-user-pen"></i>
                                </div>
                                <h4 class="text-lg font-medium text-slate-700 dark:text-navy-100" style="margin-left: 7px;">
                                    Modifier l'utilisateur
                                </h4>
                            </div>
                            <div>
                                <a href="{{ route('users.show', $user->id) }}"
                                    class="btn bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">
                                    Retour
                                </a>
                            </div>
                        </div>
                    </div>

                    @if (session('success'))
                        <div class="alert-success fixed top-4 right-4 z-50 max-w-sm rounded-lg border-l-4 border-green-500 bg-green-100 p-4 text-green-800 shadow-lg dark:bg-green-900 dark:text-green-200 animate-fade-in"
                            x-data="{ show: true }" x-show="show" x-init="setTimeout(() => show = false, 5000)"
                            x-transition:leave="transition ease-in-out duration-500" x-transition:leave-start="opacity-100"
                            x-transition:leave-end="opacity-0">
                            <div class="flex items-center space-x-3">
                                <svg class="h-6 w-6 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M5 13l4 4L19 7"></path>
                                </svg>
                                <span style="color: white; font-weight: bold">{{ session('success') }}</span>
                            </div>
                        </div>
                    @endif

                    @if (session('error'))
                        <div class="alert-error fixed top-4 right-4 z-50 max-w-sm rounded-lg border-l-4 border-red-500 bg-red-100 p-4 text-red-800 shadow-lg dark:bg-red-900 dark:text-red-200 animate-fade-in"
                            x-data="{ show: true }" x-show="show" x-init="setTimeout(() => show = false, 5000)"
                            x-transition:leave="transition ease-in-out duration-500" x-transition:leave-start="opacity-100"
                            x-transition:leave-end="opacity-0">
                            <div class="flex items-center space-x-3">
                                <svg class="h-6 w-6 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                </svg>
                                <span style="color: white; font-weight: bold">{{ session('error') }}</span>
                            </div>
                        </div>
                    @endif

                    <form method="POST" action="{{ route('users.update', $user->id) }}" class="space-y-4 p-4 sm:p-5"
                        enctype="multipart/form-data">
                        @csrf
                        @method('PUT')

                        <!-- PHOTO DE PROFIL -->
                        <div class="grid grid-cols-1 gap-4">
                            <div class="flex flex-col items-center space-y-4">
                                <div class="avatar h-24 w-24">
                                    @if($user->profile_photo_path)
                                        <img class="rounded-full object-cover" src="{{ Storage::url($user->profile_photo_path) }}" alt="Photo de profil">
                                    @else
                                        <div class="is-initial rounded-full bg-primary text-xl uppercase text-white">
                                            {{ substr($user->name, 0, 1) }}
                                        </div>
                                    @endif
                                </div>
                                
                                <div class="w-full max-w-md">
                                    <label class="block">
                                        <span class="font-medium text-slate-600 dark:text-navy-100">Photo de profil</span>
                                        <div class="mt-1.5 flex items-center space-x-2">
                                            <input id="profile-photo-input" name="profile_photo" type="file" accept="image/*" 
                                                class="form-input w-full rounded-lg border border-slate-300 bg-transparent px-3 py-2 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent">
                                        </div>
                                        <p class="mt-1 text-xs text-slate-400">Formats acceptés: JPG, PNG. Max 2MB.</p>
                                        @error('profile_photo')
                                            <span style="color:red">{{ $message }}</span>
                                        @enderror
                                    </label>
                                    
                                    @if($user->profile_photo_path)
                                        <div class="flex items-center mt-2">
                                            <input type="checkbox" id="remove_photo" name="remove_photo" value="1" class="form-checkbox is-outline h-5 w-5 rounded border-slate-400/70 before:bg-primary checked:border-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:before:bg-accent dark:checked:border-accent dark:hover:border-accent dark:focus:border-accent">
                                            <label for="remove_photo" class="ml-2 text-sm text-slate-600 dark:text-navy-100">Supprimer la photo actuelle</label>
                                        </div>
                                    @endif
                                </div>
                            </div>
                        </div>

                        <!-- EMAIL & TÉLÉPHONE -->
                        <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                            <label class="block">
                                <span>Email <span style="color:red">*</span></span>
                                <input name="email" type="email" value="{{ old('email', $user->email) }}"
                                    class="form-input mt-1.5 w-full rounded-lg border border-slate-300 bg-transparent px-3 py-2 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
                                    placeholder="Email" required>
                                @error('email')
                                    <span style="color:red">{{ $message }}</span>
                                @enderror
                            </label>

                            <label class="block">
                                <span>Téléphone</span>
                                <input name="telephone" type="text"
                                    value="{{ old('telephone', $user->telephone) }}"
                                    class="form-input mt-1.5 w-full rounded-lg border border-slate-300 bg-transparent px-3 py-2 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
                                    placeholder="+33123456789">
                                @error('telephone')
                                    <span style="color:red">{{ $message }}</span>
                                @enderror
                            </label>
                        </div>

                        <!-- NOM & MOT DE PASSE (optionnel) -->
                        <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                            <label class="block">
                                <span>Nom complet <span style="color:red">*</span></span>
                                <input name="name" type="text" value="{{ old('name', $user->name) }}"
                                    class="form-input mt-1.5 w-full rounded-lg border border-slate-300 bg-transparent px-3 py-2 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
                                    placeholder="Nom complet" required>
                                @error('name')
                                    <span style="color:red">{{ $message }}</span>
                                @enderror
                            </label>

                            <label class="block">
                                <span>Nouveau mot de passe <small>(laisser vide pour ne pas modifier)</small></span>
                                <input name="password" type="password"
                                    class="form-input mt-1.5 w-full rounded-lg border border-slate-300 bg-transparent px-3 py-2 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
                                    placeholder="••••••••">
                                @error('password')
                                    <span style="color:red">{{ $message }}</span>
                                @enderror
                            </label>
                        </div>

                        <!-- RÔLE & PAYS -->
                        <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                            <label class="block">
                                <span>Rôle <span style="color:red">*</span></span>
                                <select name="role"
                                    class="form-select mt-1.5 w-full rounded-lg border border-slate-300 px-3 py-2 bg-white focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent">
                                    <option value="" disabled>Sélectionnez un rôle</option>
                                    @foreach(\Spatie\Permission\Models\Role::whereIn('name', ['Admin', 'Editor', 'Service'])->get() as $role)
                                        <option value="{{ $role->name }}" {{ $user->hasRole($role) ? 'selected' : '' }}>{{ $role->name }}</option>
                                    @endforeach
                                </select>
                                @error('role')
                                    <span style="color:red">{{ $message }}</span>
                                @enderror
                            </label>

                            <label class="block">
                                <span>Pays</span>
                                <input name="pays" type="text" value="{{ old('pays', $user->pays) }}"
                                    class="form-input mt-1.5 w-full rounded-lg border border-slate-300 bg-transparent px-3 py-2 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
                                    placeholder="Pays">
                                @error('pays')
                                    <span style="color:red">{{ $message }}</span>
                                @enderror
                            </label>
                        </div>

                        <!-- ADRESSE & COMPLÉMENT -->
                        <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                            <label class="block">
                                <span>Adresse</span>
                                <input name="adresse" type="text" value="{{ old('adresse', $user->adresse) }}"
                                    class="form-input mt-1.5 w-full rounded-lg border border-slate-300 bg-transparent px-3 py-2 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
                                    placeholder="Adresse">
                                @error('adresse')
                                    <span style="color:red">{{ $message }}</span>
                                @enderror
                            </label>

                            <label class="block">
                                <span>Complément d'adresse</span>
                                <input name="complement_adresse" type="text"
                                    value="{{ old('complement_adresse', $user->complement_adresse) }}"
                                    class="form-input mt-1.5 w-full rounded-lg border border-slate-300 bg-transparent px-3 py-2 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
                                    placeholder="Complément">
                                @error('complement_adresse')
                                    <span style="color:red">{{ $message }}</span>
                                @enderror
                            </label>
                        </div>

                        <!-- CODE POSTAL & VILLE -->
                        <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                            <label class="block">
                                <span>Code postal</span>
                                <input name="code_postal" type="text"
                                    value="{{ old('code_postal', $user->code_postal) }}"
                                    class="form-input mt-1.5 w-full rounded-lg border border-slate-300 bg-transparent px-3 py-2 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
                                    placeholder="Code postal">
                                @error('code_postal')
                                    <span style="color:red">{{ $message }}</span>
                                @enderror
                            </label>

                            <label class="block">
                                <span>Ville</span>
                                <input name="ville" type="text" value="{{ old('ville', $user->ville) }}"
                                    class="form-input mt-1.5 w-full rounded-lg border border-slate-300 bg-transparent px-3 py-2 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
                                    placeholder="Ville">
                                @error('ville')
                                    <span style="color:red">{{ $message }}</span>
                                @enderror
                            </label>
                        </div>

                        <!-- STATUT DU COMPTE -->
                        <div class="grid grid-cols-1 gap-4">
                            <label class="block">
                                <span>Statut du compte <span style="color:red">*</span></span>
                                <select name="statut"
                                    class="form-select mt-1.5 w-full rounded-lg border border-slate-300 px-3 py-2 bg-white focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent">
                                    <option value="0" {{ !$user->statut ? 'selected' : '' }}>Actif</option>
                                    <option value="1" {{ $user->statut ? 'selected' : '' }}>Bloqué</option>
                                </select>
                                @error('statut')
                                    <span style="color:red">{{ $message }}</span>
                                @enderror
                            </label>
                        </div>

                        <!-- PERMISSIONS SPÉCIFIQUES -->
                        <div class="grid grid-cols-1 gap-4">
                            <label class="block">
                                <span class="font-medium text-slate-600 dark:text-navy-100">Permissions spécifiques</span>
                                <div class="mt-1.5 p-3 border border-slate-300 rounded-lg">
                                    <!-- Recherche -->
                                    <div class="mb-3">
                                        <label class="block">
                                            <input type="text" id="permission-search" placeholder="Rechercher une permission..." 
                                                class="form-input w-full rounded-lg border border-slate-300 bg-transparent px-3 py-2 placeholder:text-slate-400/70">
                                        </label>
                                    </div>
                                    
                                    <!-- Liste des permissions -->
                                    <div class="grid grid-cols-1 gap-2 sm:grid-cols-2 md:grid-cols-3 max-h-60 overflow-y-auto">
                                        @php
                                            $userPermissions = $user->getDirectPermissions()->pluck('name')->toArray();
                                        @endphp
                                        
                                        @foreach(\Spatie\Permission\Models\Permission::all() as $permission)
                                            <div class="permission-item">
                                                <label class="inline-flex items-center space-x-2">
                                                    <input type="checkbox" name="permissions[]" value="{{ $permission->name }}"
                                                        {{ in_array($permission->name, $userPermissions) ? 'checked' : '' }}
                                                        class="form-checkbox is-basic h-5 w-5 rounded border-slate-400/70 checked:border-primary checked:bg-primary hover:border-primary focus:border-primary">
                                                    <span class="text-sm permission-name">{{ $permission->name }}</span>
                                                </label>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                                @error('permissions')
                                    <span style="color:red">{{ $message }}</span>
                                @enderror
                            </label>
                        </div>

                        <!-- ACTIONS -->
                        <div class="flex justify-center space-x-2 pt-4">
                            <a href="{{ route('users.show', $user->id) }}"
                                class="btn space-x-2 bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">
                                <span>Annuler</span>
                            </a>
                            <button type="submit"
                                class="btn space-x-2 bg-primary font-medium text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90">
                                <span>Enregistrer</span>
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </main>

    <script>
        // Prévisualisation de l'image
        document.getElementById('profile-photo-input').addEventListener('change', function(event) {
            const file = event.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    const avatar = document.querySelector('.avatar');
                    
                    // Supprime l'image ou la div initiale existante
                    while (avatar.firstChild) {
                        avatar.removeChild(avatar.firstChild);
                    }
                    
                    // Crée une nouvelle image avec la prévisualisation
                    const img = document.createElement('img');
                    img.src = e.target.result;
                    img.className = 'rounded-full object-cover';
                    img.alt = 'Photo de profil';
                    avatar.appendChild(img);
                };
                reader.readAsDataURL(file);
            }
        });

        // Si on coche la suppression de photo
        const removeCheckbox = document.getElementById('remove_photo');
        if (removeCheckbox) {
            removeCheckbox.addEventListener('change', function() {
                if (this.checked) {
                    const avatar = document.querySelector('.avatar');
                    
                    // Supprime l'image existante
                    while (avatar.firstChild) {
                        avatar.removeChild(avatar.firstChild);
                    }
                    
                    // Crée l'initiale
                    const initial = document.createElement('div');
                    initial.className = 'is-initial rounded-full bg-primary text-xl uppercase text-white';
                    initial.textContent = '{{ substr($user->name, 0, 1) }}';
                    avatar.appendChild(initial);
                    
                    // Désactive l'input de fichier
                    document.getElementById('profile-photo-input').value = '';
                }
            });
        }

        // Filtre des permissions
        document.getElementById('permission-search').addEventListener('input', function(e) {
            const searchText = e.target.value.toLowerCase();
            const items = document.querySelectorAll('.permission-item');
            
            items.forEach(item => {
                const permissionName = item.querySelector('.permission-name').textContent.toLowerCase();
                if (permissionName.includes(searchText)) {
                    item.style.display = '';
                } else {
                    item.style.display = 'none';
                }
            });
        });
    </script>
@endsection