@extends('layouts.app')

@section('title', 'Mi Perfil')

@section('content')
    <div class="flex justify-center items-start min-h-screen pb-12">
        <div class="w-full max-w-4xl">

            <!-- Success Message -->
            <!-- Success Message (Toast) -->
            @if (session('success'))
                <div x-data="{ show: true }" x-show="show" x-init="setTimeout(() => show = false, 5000)"
                    class="fixed bottom-4 right-4 z-[100] bg-emerald-600 text-white px-6 py-4 rounded-xl shadow-2xl flex items-center gap-3 animate-bounce-in border border-white/20">
                    <svg class="w-6 h-6 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>
                    <span class="font-bold">{{ session('success') }}</span>
                    <button @click="show = false" class="ml-auto opacity-80 hover:opacity-100">&times;</button>
                </div>
            @endif

            <div x-data="{
                                                    photoName: null,
                                                    photoPreview: null,
                                                    updatePhotoPreview() {
                                                        const photo = this.$refs.photo.files[0];
                                                        if (! photo) return;

                                                        if(photo.size > 2097152) { 
                                                            window.dispatchEvent(new CustomEvent('notify', { 
                                                                detail: { type: 'error', title: 'Error', message: 'El archivo es demasiado grande. Máximo 2MB.' } 
                                                            }));
                                                            this.$refs.photo.value = null; 
                                                            return; 
                                                        }

                                                        const reader = new FileReader();
                                                        reader.onload = (e) => {
                                                            this.photoPreview = e.target.result;
                                                        };
                                                        reader.readAsDataURL(photo);
                                                    }
                                                }"
                class="glass-card-premium rounded-xl shadow-2xl overflow-hidden relative border border-white/20 dark:border-slate-700/50">

                <!-- Premium Header (Solid Blue) -->
                <div class="bg-blue-600 p-8 text-white relative rounded-t-xl">
                    <!-- Background Decoration (Isolated Overflow) -->
                    <div class="absolute inset-0 overflow-hidden rounded-t-xl pointer-events-none">
                        <div class="absolute top-0 right-0 p-6 opacity-10">
                            <svg class="w-40 h-40 transform rotate-12" fill="currentColor" viewBox="0 0 24 24">
                                <path
                                    d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" />
                            </svg>
                        </div>
                    </div>

                    <div class="relative z-10 flex items-center gap-6">
                        <div class="relative group cursor-pointer" @click.prevent="$refs.photo.click()">
                            <div
                                class="w-24 h-24 rounded-2xl bg-white/20 backdrop-blur-md shadow-inner flex items-center justify-center text-3xl font-bold border-2 border-white/30 overflow-hidden relative">
                                <!-- Current Avatar -->
                                <div x-show="!photoPreview" class="w-full h-full flex items-center justify-center">
                                    @if(auth()->user()->avatar)
                                        <img src="{{ asset('storage/' . auth()->user()->avatar) }}?v={{ time() }}"
                                            class="w-full h-full object-cover">
                                    @else
                                        {{ collect(explode(' ', auth()->user()->nombre))->map(fn($w) => substr($w, 0, 1))->take(2)->join('') }}
                                    @endif
                                </div>

                                <!-- New Avatar Preview -->
                                <div x-show="photoPreview" style="display: none;" class="w-full h-full">
                                    <span class="block w-full h-full bg-cover bg-no-repeat bg-center"
                                        :style="'background-image: url(\'' + photoPreview + '\');'">
                                    </span>
                                </div>

                                <!-- Overlay -->
                                <div
                                    class="absolute inset-0 bg-black/40 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
                                    <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z">
                                        </path>
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"></path>
                                    </svg>
                                </div>
                            </div>

                            <!-- Delete Button -->
                            @if(auth()->user()->avatar)
                                <div class="absolute -top-2 -right-2 z-50 pointer-events-auto"
                                    onclick="event.stopPropagation()">
                                    <form x-ref="avatarDestroyForm" action="{{ route('profile.avatar.destroy') }}" method="POST">
                                        @csrf @method('DELETE')
                                        <button type="button"
                                            @click="showConfirm('Eliminar Foto', '¿Eliminar foto de perfil?', () => $refs.avatarDestroyForm.submit())"
                                            class="bg-red-500 text-white rounded-full p-1.5 hover:bg-red-600 shadow-md border-2 border-white transition-transform transform hover:scale-110 flex items-center justify-center"
                                            title="Eliminar foto">
                                            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                    d="M6 18L18 6M6 6l12 12"></path>
                                            </svg>
                                        </button>
                                    </form>
                                </div>
                            @endif
                        </div>
                        <div>
                            <h2 class="text-3xl font-bold tracking-tight text-white mb-1">Mi Perfil</h2>
                            <p class="text-blue-100 font-medium opacity-90">Administre su información personal y seguridad.
                            </p>
                            <div class="mt-3 flex gap-2">
                                <span
                                    class="px-3 py-1 rounded-lg bg-white/20 backdrop-blur text-xs font-bold border border-white/10 shadow-sm">
                                    {{ auth()->user()->rol->nombre ?? 'Usuario' }}
                                </span>
                                <span
                                    class="px-3 py-1 rounded-lg bg-emerald-500/20 backdrop-blur text-xs font-bold border border-white/10 shadow-sm text-emerald-100">
                                    Activo
                                </span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="p-8 bg-white dark:bg-slate-900/50 backdrop-blur-xl">
                    <form method="POST" action="{{ route('profile.update') }}" class="space-y-8"
                        enctype="multipart/form-data">
                        <input type="file" name="avatar" id="avatarInput" class="hidden" x-ref="photo"
                            @change="updatePhotoPreview">
                        @csrf
                        @method('PUT')

                        <!-- Personal Info Section -->
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                            <div class="space-y-6">
                                <h3
                                    class="text-lg font-bold text-slate-800 dark:text-white border-b border-slate-200 dark:border-slate-700 pb-2 mb-4 flex items-center gap-2">
                                    <svg class="w-5 h-5 text-blue-500" fill="none" stroke="currentColor"
                                        viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
                                    </svg>
                                    Información Personal
                                </h3>

                                <div>
                                    <label for="profile_nombre"
                                        class="block text-xs font-bold uppercase tracking-wider text-slate-500 mb-2">Nombre
                                        Completo <span class="text-red-500 text-lg leading-none">*</span></label>
                                    <input type="text" id="profile_nombre" name="nombre"
                                        value="{{ old('nombre', $user->nombre) }}" required
                                        class="w-full bg-slate-100 dark:bg-slate-800 border border-slate-300 dark:border-slate-600 rounded-xl px-4 py-3 text-base font-semibold text-slate-800 dark:text-white focus:bg-white dark:focus:bg-slate-900 focus:ring-2 focus:ring-brand-orange focus:border-brand-orange transition-all placeholder-slate-400 shadow-sm @error('nombre') border-red-500 @enderror">
                                    @error('nombre')
                                        <p class="text-red-500 text-xs mt-1 font-bold">{{ $message }}</p>
                                    @enderror
                                </div>

                                <div>
                                    <label for="profile_email"
                                        class="block text-xs font-bold uppercase tracking-wider text-slate-500 mb-2">Correo
                                        Electrónico <span class="text-red-500 text-lg leading-none">*</span></label>
                                    <input type="email" id="profile_email" name="email"
                                        value="{{ old('email', $user->email) }}" required
                                        class="w-full bg-surface dark:bg-slate-800 border border-slate-300 dark:border-slate-600 rounded-xl px-4 py-3 text-base font-semibold text-slate-800 dark:text-white focus:bg-white dark:focus:bg-slate-900 focus:ring-2 focus:ring-brand-orange focus:border-brand-orange transition-all placeholder-slate-400 shadow-sm @error('email') border-red-500 @enderror">
                                    @error('email')
                                        <p class="text-red-500 text-xs mt-1 font-bold">{{ $message }}</p>
                                    @enderror
                                </div>
                            </div>

                            <!-- Address -->
                            <div>
                                <label for="profile_direccion"
                                    class="block text-xs font-bold uppercase tracking-wider text-slate-500 mb-2">Dirección
                                    Física</label>
                                <div class="relative">
                                    <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                                        <svg class="h-5 w-5 text-slate-400" fill="none" stroke="currentColor"
                                            viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z">
                                            </path>
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
                                        </svg>
                                    </div>
                                    <input type="text" id="profile_direccion" name="direccion"
                                        value="{{ old('direccion', $user->direccion) }}"
                                        class="w-full pl-11 px-4 py-3 bg-slate-100 dark:bg-slate-800 border border-slate-300 dark:border-slate-600 rounded-xl text-base font-semibold text-slate-800 dark:text-white focus:bg-white dark:focus:bg-slate-900 focus:ring-2 focus:ring-brand-orange focus:border-brand-orange transition-all placeholder-slate-400 shadow-sm">
                                </div>
                            </div>

                            <!-- Security Section -->
                            <div class="space-y-6">
                                <h3
                                    class="text-lg font-bold text-slate-800 dark:text-white border-b border-slate-200 dark:border-slate-700 pb-2 mb-4 flex items-center gap-2">
                                    <svg class="w-5 h-5 text-amber-500" fill="none" stroke="currentColor"
                                        viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z">
                                        </path>
                                    </svg>
                                    Seguridad (Opcional)
                                </h3>

                                <div
                                    class="bg-amber-50 dark:bg-amber-900/10 border border-amber-100 dark:border-amber-800/30 p-4 rounded-xl mb-4">
                                    <p
                                        class="text-xs text-amber-700 dark:text-amber-400 font-medium flex items-center gap-2">
                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                        </svg>
                                        Deje los campos de contraseña en blanco si no desea realizar cambios.
                                    </p>
                                </div>

                                <div>
                                    <label for="profile_current_password"
                                        class="block text-xs font-bold uppercase tracking-wider text-slate-500 mb-2">Contraseña
                                        Actual</label>
                                    <div class="relative" x-data="{ show: false }">
                                        <input :type="show ? 'text' : 'password'" id="profile_current_password"
                                            name="current_password"
                                            class="w-full bg-slate-100 dark:bg-slate-800 border border-slate-300 dark:border-slate-600 rounded-xl px-4 py-3 text-base font-semibold text-slate-800 dark:text-white focus:bg-white dark:focus:bg-slate-900 focus:ring-2 focus:ring-brand-orange focus:border-brand-orange transition-all placeholder-slate-400 shadow-sm @error('current_password') border-red-500 @enderror">
                                        <button type="button" @click="show = !show"
                                            class="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-600 p-2 rounded-full hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors">
                                            <svg x-show="!show" class="w-5 h-5" fill="none" stroke="currentColor"
                                                viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                    d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                    d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z">
                                                </path>
                                            </svg>
                                            <svg x-show="show" class="w-5 h-5" fill="none" stroke="currentColor"
                                                viewBox="0 0 24 24" style="display: none;">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                    d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21">
                                                </path>
                                            </svg>
                                        </button>
                                    </div>
                                    @error('current_password')
                                        <p class="text-red-500 text-xs mt-1 font-bold">{{ $message }}</p>
                                    @enderror
                                </div>

                                <div class="grid grid-cols-2 gap-4"
                                    x-data="{ password: '', confirm: '', show: false, showConfirm: false }">
                                    <div>
                                        <label for="profile_password"
                                            class="block text-xs font-bold uppercase tracking-wider text-slate-500 mb-2">Nueva
                                            Contraseña</label>
                                        <div class="relative">
                                            <input :type="show ? 'text' : 'password'" id="profile_password" name="password"
                                                x-model="password"
                                                class="w-full bg-slate-100 dark:bg-slate-800 border border-slate-300 dark:border-slate-600 rounded-xl px-4 py-3 text-base font-semibold text-slate-800 dark:text-white focus:bg-white dark:focus:bg-slate-900 focus:ring-2 focus:ring-brand-orange focus:border-brand-orange transition-all placeholder-slate-400 shadow-sm"
                                                :class="{'border-red-500': password.length > 0 && password.length < 8, 'border-green-500': password.length >= 8}">
                                            <button type="button" @click="show = !show"
                                                class="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-600 p-2 rounded-full hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors">
                                                <svg x-show="!show" class="w-5 h-5" fill="none" stroke="currentColor"
                                                    viewBox="0 0 24 24">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                        d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                        d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z">
                                                    </path>
                                                </svg>
                                                <svg x-show="show" class="w-5 h-5" fill="none" stroke="currentColor"
                                                    viewBox="0 0 24 24" style="display: none;">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                        d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21">
                                                    </path>
                                                </svg>
                                            </button>
                                        </div>
                                    </div>
                                    <div>
                                        <label for="profile_password_confirmation"
                                            class="block text-xs font-bold uppercase tracking-wider text-slate-500 mb-2">Confirmar</label>
                                        <div class="relative">
                                            <input :type="showConfirm ? 'text' : 'password'"
                                                id="profile_password_confirmation" name="password_confirmation"
                                                x-model="confirm"
                                                class="w-full bg-slate-100 dark:bg-slate-800 border border-slate-300 dark:border-slate-600 rounded-xl px-4 py-3 text-base font-semibold text-slate-800 dark:text-white focus:bg-white dark:focus:bg-slate-900 focus:ring-2 focus:ring-brand-orange focus:border-brand-orange transition-all placeholder-slate-400 shadow-sm"
                                                :class="{'border-red-500': confirm.length > 0 && confirm !== password, 'border-green-500': confirm.length > 0 && confirm === password}">
                                            <button type="button" @click="showConfirm = !showConfirm"
                                                class="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-600 p-2 rounded-full hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors">
                                                <svg x-show="!showConfirm" class="w-5 h-5" fill="none" stroke="currentColor"
                                                    viewBox="0 0 24 24">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                        d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                        d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z">
                                                    </path>
                                                </svg>
                                                <svg x-show="showConfirm" class="w-5 h-5" fill="none" stroke="currentColor"
                                                    viewBox="0 0 24 24" style="display: none;">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                        d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21">
                                                    </path>
                                                </svg>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="col-span-2 space-y-1">
                                        <p x-show="password.length > 0 && password.length < 8"
                                            class="text-xs text-red-500 font-bold flex items-center gap-1 transition-all">
                                            <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                    d="M6 18L18 6M6 6l12 12"></path>
                                            </svg> Mínimo 8 caracteres.
                                        </p>
                                        <p x-show="confirm.length > 0 && password !== confirm"
                                            class="text-xs text-red-500 font-bold flex items-center gap-1 transition-all">
                                            <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                    d="M6 18L18 6M6 6l12 12"></path>
                                            </svg> Las contraseñas no coinciden.
                                        </p>
                                        <p x-show="password.length >= 8 && password === confirm"
                                            class="text-xs text-emerald-500 font-bold flex items-center gap-1 transition-all">
                                            <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                    d="M5 13l4 4L19 7"></path>
                                            </svg> Contraseña válida.
                                        </p>
                                    </div>
                                    @error('password')
                                        <p class="text-red-500 text-xs mt-1 font-bold">{{ $message }}</p>
                                    @enderror
                                </div>
                            </div>

                            <!-- Action Bar -->
                            <div
                                class="flex items-center justify-end pt-6 border-t border-slate-100 dark:border-slate-700/50 mt-8 gap-4">
                                <button type="reset"
                                    class="px-6 py-3 text-slate-500 hover:text-slate-700 font-bold transition hover:bg-slate-100 rounded-xl">
                                    Cancelar
                                </button>
                                <button type="submit"
                                    class="px-8 py-3 bg-blue-600 hover:bg-blue-700 text-white font-bold rounded-xl shadow-lg shadow-blue-500/30 transition transform hover:scale-105 active:scale-95 flex items-center gap-2">
                                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M5 13l4 4L19 7"></path>
                                    </svg>
                                    Guardar Cambios
                                </button>
                            </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection