@extends('layouts.panel')

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

@section('content')
@php
    $user = Auth::guard('admin')->user() ?? Auth::user();
    $avatarUrl = 'https://ui-avatars.com/api/?name=' . urlencode($user->nombre_completo ?? 'User') . '&background=0ea5e9&color=fff';

    if ($user && !empty($user->foto_url) && $user->foto_url !== 'null') {
        $cleanPath = str_replace(['uploads / ', 'uploads/', 'uploads\ ', 'uploads\\'], '', $user->foto_url);
        $cleanPath = trim(str_replace('\\', '/', $cleanPath));
        if (str_starts_with($cleanPath, '/')) $cleanPath = substr($cleanPath, 1);
        
        if (!str_starts_with($cleanPath, 'http')) {
            $avatarUrl = url('/api/Security/uploads/' . $cleanPath);
        } else {
            $avatarUrl = $cleanPath;
        }
    }
@endphp

<div class="max-w-5xl mx-auto fade-in pb-12">
    
    {{-- Header Navigation --}}
    <div class="flex items-center justify-between mb-10">
        <div class="flex items-center gap-4">
            <a href="{{ route('manager.dashboard') }}" class="p-3 bg-white hover:bg-slate-50 rounded-2xl transition-all text-slate-400 shadow-sm border border-slate-100">
                <i data-lucide="arrow-left" class="w-5 h-5"></i>
            </a>
            <div>
                <h1 class="text-3xl font-[950] text-slate-900 tracking-tight">Mi Perfil</h1>
                <p class="text-xs text-slate-400 font-bold uppercase tracking-[0.2em] mt-1 text-indigo-500">Gestión de Cuenta Gerencial</p>
            </div>
        </div>
        <div class="flex gap-3">
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start">
        
        {{-- SIDEBAR: Información de Perfil --}}
        <div class="lg:col-span-4 space-y-6">
            <div class="bg-white rounded-[3rem] p-10 shadow-xl shadow-slate-100/50 border border-slate-50 text-center relative overflow-hidden group">
                {{-- Decorative Gradient --}}
                <div class="absolute top-0 left-0 right-0 h-32 bg-gradient-to-br from-indigo-600 via-purple-600 to-pink-500 opacity-5"></div>

                <div class="relative inline-block mb-8 pt-4">
                    <div class="absolute -inset-4 bg-gradient-to-tr from-indigo-500/20 to-purple-500/20 rounded-full blur-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-700"></div>
                    <img src="{{ $avatarUrl }}" 
                         class="w-40 h-40 rounded-[3.5rem] border-8 border-white shadow-2xl shadow-indigo-100 object-cover bg-slate-50 relative z-10 transition-transform duration-700 group-hover:scale-105">
                    
                    <div class="absolute bottom-2 right-2 z-20 w-12 h-12 bg-indigo-600 border-4 border-white rounded-[1.25rem] flex items-center justify-center text-white shadow-xl shadow-indigo-200">
                        <i data-lucide="shield-check" class="w-6 h-6 stroke-[2.5]"></i>
                    </div>
                </div>
                
                <h2 class="text-2xl font-[950] text-slate-900 leading-tight px-2 uppercase tracking-tight mb-2">
                    {{ $user->nombre_completo ?? 'Gerente Piter' }}
                </h2>
                
                <div class="flex flex-col items-center gap-2 mb-8">
                    <span class="inline-flex items-center gap-2 px-5 py-2 rounded-full bg-indigo-50 text-indigo-600 text-[10px] font-black uppercase tracking-[0.15em] border border-indigo-100/50">
                        <span class="w-1.5 h-1.5 rounded-full bg-indigo-500 animate-pulse"></span>
                        {{ $user->rol ?? 'GERENTE' }}
                    </span>
                </div>

                <div class="space-y-4 pt-8 border-t border-slate-100">
                    <div class="flex items-center justify-between text-[11px] font-bold uppercase tracking-wider">
                        <span class="text-slate-400">Estado de Cuenta</span>
                        <span class="text-emerald-500 flex items-center gap-1.5">
                            <span class="w-1.5 h-1.5 rounded-full bg-emerald-500 shadow-[0_0_8px_rgba(16,185,129,0.5)]"></span>
                            Activa
                        </span>
                    </div>
                    <div class="flex items-center justify-between text-[11px] font-bold uppercase tracking-wider">
                        <span class="text-slate-400">ID Identificador</span>
                        <span class="text-slate-900">#{{ str_pad($user->id_usuario ?? $user->id ?? 0, 5, '0', STR_PAD_LEFT) }}</span>
                    </div>
                </div>
            </div>

            {{-- Información de Empresa --}}
            <div class="bg-slate-950 rounded-[2.5rem] p-8 text-white relative overflow-hidden shadow-2xl shadow-indigo-100">
                <div class="absolute -right-10 -bottom-10 opacity-10">
                    <i data-lucide="building-2" class="w-40 h-40"></i>
                </div>
                <h3 class="font-black text-[10px] uppercase tracking-[0.25em] text-indigo-400 mb-6 flex items-center gap-2">
                    <span class="w-4 h-[2px] bg-indigo-500"></span>
                    Sede Asignada
                </h3>
                <div class="space-y-6">
                    <div>
                        <p class="text-[10px] text-slate-500 font-bold uppercase tracking-widest mb-1">Empresa</p>
                        <p class="text-lg font-black tracking-tight uppercase leading-tight">{{ $empresa->razon_social ?? 'Corporación Piter' }}</p>
                        @if(isset($empresa->ruc_nit))
                            <p class="text-[9px] font-black text-indigo-400 mt-1 uppercase tracking-tighter">RUC: {{ $empresa->ruc_nit }}</p>
                        @endif
                    </div>
                    <div>
                        <p class="text-[10px] text-slate-500 font-bold uppercase tracking-widest mb-1">Sucursal / Local</p>
                        <p class="text-xs font-bold text-slate-300 leading-relaxed">{{ $sucursal->nombre_sucursal ?? $sucursal->nombre ?? 'Principal System' }}</p>
                    </div>
                </div>
            </div>
        </div>

        {{-- MAIN CONTENT: Detalles --}}
        <div class="lg:col-span-8 space-y-8">
            
            {{-- Datos de Contacto y Seguridad --}}
            <div class="bg-white rounded-[3rem] shadow-xl shadow-slate-100/30 border border-slate-50 overflow-hidden">
                <div class="px-10 py-8 border-b border-slate-100 bg-slate-50/30 flex items-center justify-between">
                    <div class="flex items-center gap-4">
                        <div class="w-12 h-12 rounded-2xl bg-indigo-600 text-white flex items-center justify-center shadow-lg shadow-indigo-100">
                            <i data-lucide="user" class="w-6 h-6"></i>
                        </div>
                        <div>
                            <h3 class="text-xl font-black text-slate-900 leading-none">Información General</h3>
                            <p class="text-[10px] text-slate-400 font-bold uppercase tracking-widest mt-2">Datos personales Sincronizados</p>
                        </div>
                    </div>
                </div>
                
                <div class="p-10">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-10">
                        <div class="space-y-2">
                            <p class="text-[10px] font-black text-slate-400 uppercase tracking-[0.2em] ml-1">Correo Electrónico</p>
                            <div class="flex items-center gap-4 p-5 bg-slate-50 rounded-[1.5rem] border border-slate-100">
                                <i data-lucide="mail" class="w-5 h-5 text-indigo-500"></i>
                                <span class="text-sm font-bold text-slate-700">{{ $user->email ?? 'no-reply@piter.com' }}</span>
                            </div>
                        </div>

                        <div class="space-y-2">
                            <p class="text-[10px] font-black text-slate-400 uppercase tracking-[0.2em] ml-1">Teléfono Móvil</p>
                            <div class="flex items-center gap-4 p-5 bg-slate-50 rounded-[1.5rem] border border-slate-100">
                                <i data-lucide="smartphone" class="w-5 h-5 text-emerald-500"></i>
                                <span class="text-sm font-bold text-slate-700">{{ $user->telefono ?? 'Sin Registrar' }}</span>
                            </div>
                        </div>

                        <div class="space-y-2">
                            <p class="text-[10px] font-black text-slate-400 uppercase tracking-[0.2em] ml-1">Documento (DNI)</p>
                            <div class="flex items-center gap-4 p-5 bg-slate-50 rounded-[1.5rem] border border-slate-100">
                                <i data-lucide="id-card" class="w-5 h-5 text-blue-500"></i>
                                <span class="text-sm font-bold text-slate-700">{{ $user->dni ?? '--- --- ---' }}</span>
                            </div>
                        </div>

                        <div class="space-y-2">
                            <p class="text-[10px] font-black text-slate-400 uppercase tracking-[0.2em] ml-1">Fecha de Ingreso</p>
                            <div class="flex items-center gap-4 p-5 bg-slate-50 rounded-[1.5rem] border border-slate-100">
                                <i data-lucide="calendar" class="w-5 h-5 text-purple-500"></i>
                                <span class="text-sm font-bold text-slate-700">
                                    {{ isset($user->fecha_ingreso) ? \Carbon\Carbon::parse($user->fecha_ingreso)->format('d/m/Y') : 'Fecha no registrada' }}
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Personalizar Colores (Monitor Mockups) --}}
            <div class="bg-white rounded-[3rem] shadow-xl shadow-slate-100/30 border border-slate-50 overflow-hidden">
                <div class="px-10 py-8 border-b border-slate-100 bg-slate-50/30 flex items-center justify-between">
                    <div class="flex items-center gap-4">
                        <div class="w-12 h-12 rounded-2xl bg-amber-500 text-white flex items-center justify-center shadow-lg shadow-amber-100">
                            <i data-lucide="palette" class="w-6 h-6"></i>
                        </div>
                        <div>
                            <h3 class="text-xl font-black text-slate-900 leading-none">Personalizar Paneles</h3>
                            <p class="text-[10px] text-slate-400 font-bold uppercase tracking-widest mt-2">Apariencia Visual del Sistema</p>
                        </div>
                    </div>
                </div>
                
                <div class="p-10">
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-10">
                        
                        {{-- Modo Obsidian --}}
                        <div class="group/monitor cursor-pointer" onclick="selectTheme('obsidian')">
                            <div id="monitor-obsidian" class="relative w-full aspect-video bg-slate-900 rounded-2xl border-4 border-slate-800 shadow-lg overflow-hidden transition-all hover:scale-105 hover:border-indigo-500/50">
                                <div class="absolute inset-x-2 top-2 h-2 bg-slate-800 rounded-full opacity-50"></div>
                                <div class="absolute left-2 top-6 w-8 bottom-2 bg-slate-800/50 rounded-lg"></div>
                                <div class="absolute inset-0 bg-gradient-to-tr from-indigo-500/10 to-transparent"></div>
                                <div class="absolute inset-0 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity">
                                    <div class="bg-white/90 backdrop-blur-sm px-3 py-1.5 rounded-full shadow-xl">
                                        <span class="text-[9px] font-black text-slate-900 uppercase">Seleccionar</span>
                                    </div>
                                </div>
                            </div>
                            <p class="text-[10px] font-black text-slate-400 uppercase tracking-widest mt-4 text-center">Obsidian Dark</p>
                        </div>

                        {{-- Modo Emerald --}}
                        <div class="group/monitor cursor-pointer" onclick="selectTheme('emerald')">
                            <div id="monitor-emerald" class="relative w-full aspect-video bg-emerald-950 rounded-2xl border-4 border-emerald-900 shadow-lg overflow-hidden transition-all hover:scale-105 hover:border-emerald-500/50">
                                <div class="absolute inset-x-2 top-2 h-2 bg-emerald-900 rounded-full opacity-50"></div>
                                <div class="absolute left-2 top-6 w-8 bottom-2 bg-emerald-900/50 rounded-lg"></div>
                                <div class="absolute inset-0 bg-gradient-to-tr from-emerald-500/10 to-transparent"></div>
                                <div class="absolute inset-0 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity">
                                    <div class="bg-white/90 backdrop-blur-sm px-3 py-1.5 rounded-full shadow-xl">
                                        <span class="text-[9px] font-black text-slate-900 uppercase">Seleccionar</span>
                                    </div>
                                </div>
                            </div>
                            <p class="text-[10px] font-black text-slate-400 uppercase tracking-widest mt-4 text-center">Royal Emerald</p>
                        </div>

                        {{-- Modo Blue --}}
                        <div class="group/monitor cursor-pointer" onclick="selectTheme('blue')">
                            <div id="monitor-blue" class="relative w-full aspect-video bg-blue-950 rounded-2xl border-4 border-blue-900 shadow-lg overflow-hidden transition-all hover:scale-105 hover:border-blue-500/50">
                                <div class="absolute inset-x-2 top-2 h-2 bg-blue-900 rounded-full opacity-50"></div>
                                <div class="absolute left-2 top-6 w-8 bottom-2 bg-blue-900/50 rounded-lg"></div>
                                <div class="absolute inset-0 bg-gradient-to-tr from-blue-500/10 to-transparent"></div>
                                <div class="absolute inset-0 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity">
                                    <div class="bg-white/90 backdrop-blur-sm px-3 py-1.5 rounded-full shadow-xl">
                                        <span class="text-[9px] font-black text-slate-900 uppercase">Seleccionar</span>
                                    </div>
                                </div>
                            </div>
                            <p class="text-[10px] font-black text-slate-400 uppercase tracking-widest mt-4 text-center">Midnight Blue</p>
                        </div>

                        {{-- Modo Personalizado --}}
                        <div class="group/monitor cursor-pointer" onclick="toggleCustomColor()">
                            <div id="monitor-custom" class="relative w-full aspect-video bg-slate-50 rounded-2xl border-4 border-dashed border-slate-200 shadow-lg overflow-hidden transition-all hover:scale-105 hover:border-amber-500/50 flex flex-col items-center justify-center gap-2">
                                <div id="custom-indicator" class="w-10 h-10 rounded-full bg-gradient-to-br from-red-500 via-yellow-400 to-blue-500 shadow-lg animate-spin-slow"></div>
                                <i data-lucide="plus" class="w-4 h-4 text-slate-300"></i>
                            </div>
                            <p class="text-[10px] font-black text-amber-500 uppercase tracking-widest mt-4 text-center">Personalizado</p>
                        </div>

                    </div>

                    {{-- Expanded Custom Color Picker --}}
                    <div id="customColorPicker" class="hidden fade-in space-y-8 pt-8 border-t border-slate-100">
                        <div class="flex flex-col md:flex-row gap-10 items-center">
                            
                            {{-- Preview Monitor --}}
                            <div class="flex-1 w-full max-w-sm">
                                <p class="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-4">Vista Previa Real</p>
                                <div id="live-mockup" class="relative w-full aspect-video rounded-[2rem] border-8 border-slate-900 shadow-2xl overflow-hidden transition-colors duration-500" style="background-color: #0f172a">
                                    <div class="absolute inset-x-4 top-4 h-3 bg-white/10 rounded-full"></div>
                                    <div class="absolute left-4 top-12 w-16 bottom-4 bg-white/5 rounded-2xl"></div>
                                    <div class="absolute right-4 bottom-4 w-12 h-12 rounded-full bg-white/10 flex items-center justify-center">
                                        <div class="w-6 h-6 rounded-full bg-white/20 animate-pulse"></div>
                                    </div>
                                </div>
                            </div>

                            {{-- Color Selection --}}
                            <div class="flex-[1.5] space-y-6 w-full">
                                <div>
                                    <h4 class="text-sm font-black text-slate-900 uppercase tracking-tight mb-4 flex items-center gap-2">
                                        <span class="w-2 h-2 rounded-full bg-amber-500"></span>
                                        Paleta Premium
                                    </h4>
                                    <div class="flex items-center gap-3 overflow-x-auto pb-4 custom-scrollbar no-scrollbar scroll-smooth">
                                        @php
                                            $premiumColors = [
                                                ['name' => 'Rose', 'hex' => '#4c0519'],
                                                ['name' => 'Violet', 'hex' => '#2e1065'],
                                                ['name' => 'Ocean', 'hex' => '#082f49'],
                                                ['name' => 'Jade', 'hex' => '#022c22'],
                                                ['name' => 'Coffee', 'hex' => '#27272a'],
                                                ['name' => 'Crimson', 'hex' => '#450a0a'],
                                                ['name' => 'Indigo', 'hex' => '#1e1b4b']
                                            ];
                                        @endphp
                                        @foreach($premiumColors as $color)
                                            <button onclick="updateLiveColor('{{ $color['hex'] }}')" 
                                                    class="flex-shrink-0 w-14 h-14 rounded-2xl border-4 border-white shadow-lg transition-transform hover:scale-110 active:scale-95" 
                                                    style="background-color: {{ $color['hex'] }}"
                                                    title="{{ $color['name'] }}">
                                            </button>
                                        @endforeach
                                    </div>
                                </div>

                                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 pt-4">
                                    <div class="space-y-2">
                                        <p class="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Selector Manual</p>
                                        <div class="flex items-center gap-3 p-4 bg-slate-50 rounded-2xl border border-slate-100">
                                            <input type="color" id="manualColorPicker" oninput="updateLiveColor(this.value)" class="w-10 h-10 rounded-lg cursor-pointer bg-transparent border-0 p-0 overflow-hidden">
                                            <input type="text" id="hexInput" placeholder="#000000" class="bg-transparent border-0 text-sm font-black text-slate-700 w-full focus:ring-0 uppercase">
                                        </div>
                                    </div>
                                    <div class="flex items-end">
                                        <button class="w-full h-[62px] bg-slate-900 text-white rounded-2xl font-black text-xs uppercase tracking-widest shadow-lg hover:bg-slate-800 transition-all active:scale-95 flex items-center justify-center gap-2">
                                            <i data-lucide="check" class="w-4 h-4"></i>
                                            Aplicar Estilo
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Seguridad y Acciones --}}
            <div class="bg-white rounded-[3rem] shadow-xl shadow-slate-100/30 border border-slate-50 overflow-hidden">
                <div class="p-10">
                    <h3 class="font-black text-[10px] uppercase tracking-[0.25em] text-slate-400 mb-8 flex items-center gap-2">
                        <i data-lucide="shield-alert" class="w-4 h-4 text-red-500"></i>
                        Seguridad y Privacidad
                    </h3>
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <button onclick="openPasswordModal()" class="flex items-center justify-between p-6 bg-slate-50 hover:bg-indigo-50 rounded-[2rem] border border-slate-100 hover:border-indigo-100 transition-all group">
                            <div class="flex items-center gap-4">
                                <div class="w-12 h-12 rounded-2xl bg-white text-indigo-500 flex items-center justify-center shadow-sm group-hover:bg-indigo-600 group-hover:text-white transition-all">
                                    <i data-lucide="key-round" class="w-5 h-5"></i>
                                </div>
                                <div class="text-left">
                                    <p class="text-sm font-black text-slate-800 tracking-tight leading-none mb-1">Cambiar Contraseña</p>
                                    <p class="text-[10px] text-slate-400 font-bold uppercase tracking-wider">Último cambio hace 3 meses</p>
                                </div>
                            </div>
                            <i data-lucide="chevron-right" class="w-4 h-4 text-slate-300 group-hover:translate-x-1 transition-transform"></i>
                        </button>

                        <button onclick="openEditProfileModal()" class="flex items-center justify-between p-6 bg-slate-50 hover:bg-emerald-50 rounded-[2rem] border border-slate-100 hover:border-emerald-100 transition-all group">
                            <div class="flex items-center gap-4">
                                <div class="w-12 h-12 rounded-2xl bg-white text-emerald-500 flex items-center justify-center shadow-sm group-hover:bg-emerald-500 group-hover:text-white transition-all">
                                    <i data-lucide="user-cog" class="w-5 h-5"></i>
                                </div>
                                <div class="text-left">
                                    <p class="text-sm font-black text-slate-800 tracking-tight leading-none mb-1">Editar Información</p>
                                    <p class="text-[10px] text-emerald-500 font-bold uppercase tracking-wider">Actualiza tus datos básicos</p>
                                </div>
                            </div>
                            <i data-lucide="chevron-right" class="w-4 h-4 text-slate-300 group-hover:translate-x-1 transition-transform"></i>
                        </button>
                    </div>

                    <div class="mt-8 pt-8 border-t border-slate-100 flex flex-col sm:flex-row items-center justify-between gap-6">
                        <div class="flex items-center gap-3">
                             <div class="w-10 h-10 rounded-full bg-slate-100 flex items-center justify-center text-slate-400">
                                <i data-lucide="fingerprint" class="w-5 h-5"></i>
                             </div>
                             <p class="text-xs text-slate-400 font-medium">Sincronizado con <strong>Piter Global Security</strong></p>
                        </div>
                        
                        <form action="{{ route('logout') }}" method="POST">
                            @csrf
                            <button type="submit" class="h-14 px-10 rounded-3xl bg-red-50 text-red-600 hover:bg-red-600 hover:text-white hover:shadow-xl hover:shadow-red-200 transition-all font-black text-xs uppercase tracking-[0.2em] flex items-center gap-3 active:scale-95 group">
                                Cerrar Sesión
                                <i data-lucide="log-out" class="w-4 h-4 group-hover:translate-x-1 transition-transform"></i>
                            </button>
                        </form>
                    </div>
                </div>
            </div>

        </div>
    </div>

</div>

{{-- Modal Cambiar Contraseña --}}
<div id="passwordModal" class="fixed inset-0 z-[100] hidden items-center justify-center p-4">
    <div class="absolute inset-0 bg-slate-900/60 backdrop-blur-sm" onclick="closePasswordModal()"></div>
    <div class="relative w-full max-w-md bg-white rounded-[3rem] shadow-2xl overflow-hidden animate-in fade-in zoom-in duration-300">
        <div class="p-10">
            <div class="flex items-center justify-between mb-8">
                <div class="flex items-center gap-4">
                    <div class="w-12 h-12 rounded-2xl bg-indigo-500 text-white flex items-center justify-center shadow-lg shadow-indigo-100">
                        <i data-lucide="lock" class="w-6 h-6"></i>
                    </div>
                    <div>
                        <h3 class="text-xl font-black text-slate-900 leading-none">Nueva Contraseña</h3>
                        <p class="text-[10px] text-slate-400 font-bold uppercase tracking-widest mt-2">Seguridad de la Cuenta</p>
                    </div>
                </div>
                <button onclick="closePasswordModal()" class="w-10 h-10 rounded-full bg-slate-100 text-slate-400 hover:bg-red-50 hover:text-red-500 transition-all flex items-center justify-center">
                    <i data-lucide="x" class="w-5 h-5"></i>
                </button>
            </div>

            <form action="{{ route('manager.profile.password.update') }}" method="POST" class="space-y-6">
                @csrf

                <div class="space-y-2">
                    <p class="text-[10px] font-black text-slate-400 uppercase tracking-[0.2em] ml-1">Nueva Contraseña</p>
                    <div class="relative group">
                        <i data-lucide="shield-check" class="absolute left-5 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-300 group-focus-within:text-indigo-500 transition-colors"></i>
                        <input type="password" name="password" required minlength="6" class="w-full h-14 pl-14 pr-5 bg-slate-50 border-2 border-slate-50 rounded-2xl text-sm font-bold text-slate-700 focus:bg-white focus:border-indigo-500 transition-all focus:ring-4 focus:ring-indigo-100" placeholder="Mínimo 6 caracteres">
                    </div>
                </div>

                <div class="space-y-2">
                    <p class="text-[10px] font-black text-slate-400 uppercase tracking-[0.2em] ml-1">Confirmar Contraseña</p>
                    <div class="relative group">
                        <i data-lucide="refresh-cw" class="absolute left-5 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-300 group-focus-within:text-indigo-500 transition-colors"></i>
                        <input type="password" name="password_confirmation" required class="w-full h-14 pl-14 pr-5 bg-slate-50 border-2 border-slate-50 rounded-2xl text-sm font-bold text-slate-700 focus:bg-white focus:border-indigo-500 transition-all focus:ring-4 focus:ring-indigo-100" placeholder="Repite la contraseña">
                    </div>
                </div>

                <button type="submit" class="w-full h-16 bg-slate-950 text-white rounded-3xl font-black text-xs uppercase tracking-[0.25em] shadow-xl hover:shadow-indigo-200 hover:-translate-y-1 transition-all active:scale-95 flex items-center justify-center gap-3">
                    Actualizar Ahora
                    <i data-lucide="arrow-right" class="w-5 h-5"></i>
                </button>
            </form>
        </div>
    </div>
</div>

{{-- Modal Editar Perfil --}}
<div id="editProfileModal" class="fixed inset-0 z-[100] hidden items-center justify-center p-4">
    <div class="absolute inset-0 bg-slate-900/60 backdrop-blur-sm" onclick="closeEditProfileModal()"></div>
    <div class="relative w-full max-w-md bg-white rounded-[3rem] shadow-2xl overflow-hidden animate-in fade-in zoom-in duration-300">
        <div class="p-10">
            <div class="flex items-center justify-between mb-8">
                <div class="flex items-center gap-4">
                    <div class="w-12 h-12 rounded-2xl bg-emerald-500 text-white flex items-center justify-center shadow-lg shadow-emerald-100">
                        <i data-lucide="user-edit" class="w-6 h-6"></i>
                    </div>
                    <div>
                        <h3 class="text-xl font-black text-slate-900 leading-none">Editar Perfil</h3>
                        <p class="text-[10px] text-slate-400 font-bold uppercase tracking-widest mt-2">Personaliza tus Datos</p>
                    </div>
                </div>
                <button onclick="closeEditProfileModal()" class="w-10 h-10 rounded-full bg-slate-100 text-slate-400 hover:bg-red-50 hover:text-red-500 transition-all flex items-center justify-center">
                    <i data-lucide="x" class="w-5 h-5"></i>
                </button>
            </div>

            <form action="{{ route('manager.profile.update') }}" method="POST" enctype="multipart/form-data" class="space-y-6">
                @csrf
                {{-- Foto de Perfil Selection --}}
                <div class="flex flex-col items-center gap-4 py-4 bg-slate-50 rounded-[2rem] border-2 border-dashed border-slate-200">
                    <div class="relative group cursor-pointer" onclick="document.getElementById('profilePhotoInput').click()">
                        <img id="profilePreview" src="{{ $avatarUrl }}" class="w-24 h-24 rounded-3xl object-cover border-4 border-white shadow-lg shadow-indigo-100 transition-all group-hover:scale-105 group-hover:brightness-90">
                        <div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
                            <i data-lucide="camera" class="w-8 h-8 text-white"></i>
                        </div>
                    </div>
                    <div class="text-center">
                        <p class="text-[10px] font-black text-slate-400 uppercase tracking-widest">Foto de Perfil</p>
                        <button type="button" onclick="document.getElementById('profilePhotoInput').click()" class="mt-1 text-[11px] font-black text-indigo-600 hover:text-indigo-700 transition-colors uppercase tracking-tight">Cambiar Imagen</button>
                    </div>
                    <input type="file" id="profilePhotoInput" name="foto" hidden accept="image/*" onchange="previewProfilePhoto(event)">
                </div>
                <div class="space-y-2">
                    <p class="text-[10px] font-black text-slate-400 uppercase tracking-[0.2em] ml-1">Nombre Completo</p>
                    <div class="relative group">
                        <i data-lucide="user" class="absolute left-5 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-300 group-focus-within:text-emerald-500 transition-colors"></i>
                        <input type="text" name="nombre_completo" value="{{ $user->nombre_completo }}" required class="w-full h-14 pl-14 pr-5 bg-slate-50 border-2 border-slate-50 rounded-2xl text-sm font-bold text-slate-700 focus:bg-white focus:border-emerald-500 transition-all focus:ring-4 focus:ring-emerald-100" placeholder="Ej. Juan Pérez">
                    </div>
                </div>

                <div class="space-y-2">
                    <p class="text-[10px] font-black text-slate-400 uppercase tracking-[0.2em] ml-1">Correo Electrónico</p>
                    <div class="relative group">
                        <i data-lucide="mail" class="absolute left-5 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-300 group-focus-within:text-emerald-500 transition-colors"></i>
                        <input type="email" name="email" value="{{ $user->email }}" required class="w-full h-14 pl-14 pr-5 bg-slate-50 border-2 border-slate-50 rounded-2xl text-sm font-bold text-slate-700 focus:bg-white focus:border-emerald-500 transition-all focus:ring-4 focus:ring-emerald-100" placeholder="correo@ejemplo.com">
                    </div>
                </div>

                <div class="space-y-2">
                    <p class="text-[10px] font-black text-slate-400 uppercase tracking-[0.2em] ml-1">Teléfono / WhatsApp</p>
                    <div class="relative group">
                        <i data-lucide="phone" class="absolute left-5 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-300 group-focus-within:text-emerald-500 transition-colors"></i>
                        <input type="text" name="telefono" value="{{ $user->telefono }}" class="w-full h-14 pl-14 pr-5 bg-slate-50 border-2 border-slate-50 rounded-2xl text-sm font-bold text-slate-700 focus:bg-white focus:border-emerald-500 transition-all focus:ring-4 focus:ring-emerald-100" placeholder="+51 999 999 999">
                    </div>
                </div>

                <button type="submit" class="w-full h-16 bg-slate-950 text-white rounded-3xl font-black text-xs uppercase tracking-[0.25em] shadow-xl hover:shadow-emerald-200 hover:-translate-y-1 transition-all active:scale-95 flex items-center justify-center gap-3">
                    Guardar Cambios
                    <i data-lucide="save" class="w-5 h-5"></i>
                </button>
            </form>
        </div>
    </div>
@endsection

@push('scripts')
<script>
    // --- Theme & Color Logic ---
    function selectTheme(theme) {
        // Reset all monitor borders
        const monitors = ['obsidian', 'emerald', 'blue', 'custom'];
        monitors.forEach(m => {
            const el = document.getElementById(`monitor-${m}`);
            if(el) {
                el.classList.remove('border-indigo-500', 'border-emerald-500', 'border-blue-500', 'border-amber-500', 'scale-105', 'ring-4');
                el.classList.add('border-slate-800');
            }
        });

        // Hide custom picker if selecting a preset
        if(theme !== 'custom') {
            document.getElementById('customColorPicker').classList.add('hidden');
        }

        // Apply visual selection to current
        const current = document.getElementById(`monitor-${theme}`);
        if(current) {
            current.classList.remove('border-slate-800');
            current.classList.add('scale-105', 'ring-4', 'ring-opacity-30');
            if(theme === 'obsidian') current.classList.add('border-indigo-500', 'ring-indigo-500');
            if(theme === 'emerald') current.classList.add('border-emerald-500', 'ring-emerald-500');
            if(theme === 'blue') current.classList.add('border-blue-500', 'ring-blue-500');
            if(theme === 'custom') current.classList.add('border-amber-500', 'ring-amber-500');
        }
    }

    function toggleCustomColor() {
        const picker = document.getElementById('customColorPicker');
        const isHidden = picker.classList.contains('hidden');
        
        selectTheme('custom');
        
        if(isHidden) {
            picker.classList.remove('hidden');
            setTimeout(() => {
                picker.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
            }, 100);
        } else {
            picker.classList.add('hidden');
        }
    }

    function updateLiveColor(hex) {
        const mockup = document.getElementById('live-mockup');
        const hexInput = document.getElementById('hexInput');
        const manualPicker = document.getElementById('manualColorPicker');
        const customIndicator = document.getElementById('custom-indicator');

        if(mockup) mockup.style.backgroundColor = hex;
        if(hexInput) hexInput.value = hex.toUpperCase();
        if(manualPicker) manualPicker.value = hex;
        
        if(customIndicator) {
            customIndicator.classList.remove('bg-gradient-to-br', 'from-red-500', 'via-yellow-400', 'to-blue-500', 'animate-spin-slow');
            customIndicator.style.backgroundColor = hex;
        }
    }

    // Initialize hex input listener
    document.addEventListener('DOMContentLoaded', () => {
        const hexInput = document.getElementById('hexInput');
        if(hexInput) {
            hexInput.addEventListener('input', (e) => {
                let val = e.target.value;
                if(val && !val.startsWith('#')) val = '#' + val;
                if(/^#[0-9A-F]{6}$/i.test(val)) {
                    updateLiveColor(val);
                }
            });
        }
    });

    // Initialize Lucide icons
    document.addEventListener('DOMContentLoaded', () => {
        if(typeof lucide !== 'undefined') {
            lucide.createIcons();
        }
    });

    // --- Password Modal Logic ---
    function openPasswordModal() {
        const modal = document.getElementById('passwordModal');
        modal.classList.remove('hidden');
        modal.classList.add('flex');
        document.body.style.overflow = 'hidden';
    }

    function closePasswordModal() {
        const modal = document.getElementById('passwordModal');
        modal.classList.add('hidden');
        modal.classList.remove('flex');
        document.body.style.overflow = 'auto';
    }

    // --- Edit Profile Modal Logic ---
    function openEditProfileModal() {
        const modal = document.getElementById('editProfileModal');
        modal.classList.remove('hidden');
        modal.classList.add('flex');
        document.body.style.overflow = 'hidden';
    }

    function closeEditProfileModal() {
        const modal = document.getElementById('editProfileModal');
        modal.classList.add('hidden');
        modal.classList.remove('flex');
        document.body.style.overflow = 'auto';
    }

    // --- Profile Photo Preview ---
    function previewProfilePhoto(event) {
        const input = event.target;
        const preview = document.getElementById('profilePreview');
        
        if (input.files && input.files[0]) {
            const reader = new FileReader();
            reader.onload = function(e) {
                preview.src = e.target.result;
            }
            reader.readAsDataURL(input.files[0]);
        }
    }

    // --- Notifications ---
    @if(session('success_password'))
        Swal.fire({
            icon: 'success',
            title: '¡Operación Exitosa!',
            text: "{{ session('success_password') }}",
            confirmButtonColor: '#0f172a',
            customClass: {
                popup: 'rounded-[2rem]',
                confirmButton: 'rounded-xl font-black text-xs uppercase tracking-widest px-8 py-4'
            }
        });
    @endif

    @if(session('success_profile'))
        Swal.fire({
            icon: 'success',
            title: '¡Perfil Actualizado!',
            text: "{{ session('success_profile') }}",
            confirmButtonColor: '#0f172a',
            customClass: {
                popup: 'rounded-[2rem]',
                confirmButton: 'rounded-xl font-black text-xs uppercase tracking-widest px-8 py-4'
            }
        });
    @endif

    @if($errors->any())
        Swal.fire({
            icon: 'error',
            title: 'Ops...',
            html: '<ul class="text-left text-xs font-bold text-slate-600 space-y-2"> @foreach($errors->all() as $error) <li>• {{ $error }}</li> @endforeach </ul>',
            confirmButtonColor: '#0f172a',
            customClass: {
                popup: 'rounded-[2rem]',
                confirmButton: 'rounded-xl font-black text-xs uppercase tracking-widest px-8 py-4'
            }
        });
    @endif
</script>
@endpush