@extends('layouts.panel')

@section('title', 'Perfil de Dueño - Piter')

@section('content')
<style>
    /* Estilos dinámicos locales para el perfil */
    .user-glow-ring {
        background-color: color-mix(in srgb, var(--user-dock-bg, #6366f1), transparent 60%);
        box-shadow: 0 0 50px 15px color-mix(in srgb, var(--user-dock-bg, #6366f1), transparent 50%);
        filter: blur(20px);
        animation: pulse-glow 3s infinite ease-in-out;
    }
    
    @keyframes pulse-glow {
        0%, 100% { transform: scale(1); opacity: 0.6; }
        50% { transform: scale(1.08); opacity: 0.9; }
    }

    .user-avatar-border {
        border-color: var(--user-dock-bg, #6366f1) !important;
        box-shadow: 0 0 25px color-mix(in srgb, var(--user-dock-bg, #6366f1), transparent 40%);
        background-color: var(--user-card-bg, #ffffff) !important;
    }

    /* Inmersión Total: Fondo dinámico para el viewport completo */
    html, body, main {
        background-color: var(--user-accent-bg, #f8fafc) !important;
        transition: background-color 0.8s cubic-bezier(0.4, 0, 0.2, 1) !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .user-profile-card {
        background-color: var(--user-card-bg, #ffffff) !important;
        color: var(--user-card-text, #1e293b) !important;
        transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
        border: 1px solid var(--user-card-border, #f1f5f9) !important;
    }

    /* Modales Dinámicos */
    .user-modal-content {
        background-color: var(--user-card-bg, #ffffff) !important;
        color: var(--user-card-text, #1e293b) !important;
        border: 1px solid var(--user-card-border, rgba(255,255,255,0.1)) !important;
    }

    .user-input-dynamic {
        background-color: var(--user-accent-bg, #f8fafc) !important;
        border-color: var(--user-card-border, #f1f5f9) !important;
        color: var(--user-card-text) !important;
    }

    .user-profile-card h2, .user-profile-card p, .user-profile-card .stat-value, .user-profile-card h3 {
        color: var(--user-card-text) !important;
    }

    .user-badge-accent {
        background-color: color-mix(in srgb, var(--user-accent), transparent 92%);
        border-color: color-mix(in srgb, var(--user-accent), transparent 85%);
        color: var(--user-accent) !important;
    }
    .user-badge-icon {
        color: var(--user-accent) !important;
        fill: color-mix(in srgb, var(--user-accent), transparent 90%);
    }

    /* Botones con fondo dinámico */
    .dynamic-btn {
        background-color: var(--user-card-bg, #ffffff) !important;
        border: 1px solid var(--user-card-border, #f1f5f9) !important;
        transition: all 0.4s ease;
    }
    .dynamic-btn:hover {
        border-color: var(--user-accent) !important;
        transform: translateY(-2px);
        box-shadow: 0 15px 30px -10px color-mix(in srgb, var(--user-accent), transparent 85%);
    }
    .icon-container-dynamic {
        background-color: color-mix(in srgb, var(--user-accent), transparent 92%);
        color: var(--user-accent) !important;
        transition: all 0.4s ease;
    }
    .dynamic-btn:hover .icon-container-dynamic {
        background-color: var(--user-accent) !important;
        color: #ffffff !important;
        transform: scale(1.1);
    }

    .user-stat-card {
        background-color: color-mix(in srgb, var(--user-card-text), transparent 97%);
        border-color: color-mix(in srgb, var(--user-card-text), transparent 94%);
    }
    .user-stat-card .stat-label {
        color: color-mix(in srgb, var(--user-card-text), transparent 50%);
    }
    .user-stat-card .stat-value {
        color: var(--user-card-text);
    }
    
    .dynamic-title {
        color: var(--user-card-text, #0f172a) !important;
    }
    .dynamic-subtitle {
        color: color-mix(in srgb, var(--user-card-text), transparent 40%) !important;
    }
</style>

@php
    $user = Auth::guard('admin')->user() ?? Auth::user();
    $avatarUrl = 'https://ui-avatars.com/api/?name=' . urlencode($user->nombre_completo ?? 'Admin') . '&background=1e293b&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-[1440px] mx-auto pt-20 pb-24 px-4 sm:px-10">
    {{-- Header Web: Responsive Breadcrumb and Title --}}
    <div class="flex items-center justify-between py-8 mb-4">
        <div class="flex items-center gap-4">
            <a href="{{ route('admin.dashboard') }}" class="p-3 dynamic-btn rounded-2xl transition-all shadow-sm">
                <i data-lucide="arrow-left" class="w-5 h-5"></i>
            </a>
            <div>
                <h1 class="text-2xl font-[1000] dynamic-title tracking-tight">Mi Perfil</h1>
                <p class="text-[10px] dynamic-subtitle font-bold uppercase tracking-[0.2em] mt-1">Nivel: Dueño Propietario</p>
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-12 gap-10 items-start">
        
        {{-- COLUMNA IZQUIERDA: DISEÑO DE LA IMAGEN (Identidad) --}}
        <div class="lg:col-span-12 xl:col-span-3 flex flex-col items-center">
            <div class="user-profile-card w-full rounded-[3.5rem] p-8 shadow-2xl flex flex-col items-center transition-all">
                <div class="relative mb-8">
                    {{-- Dynamic Glow Ring linked to Panel Color --}}
                    <div class="absolute -inset-2.5 rounded-full user-glow-ring animate-pulse"></div>
                    <div class="relative w-40 h-40 rounded-full border-4 user-avatar-border p-1.5 shadow-2xl flex items-center justify-center overflow-hidden transition-all duration-700">
                        <img src="{{ $avatarUrl }}" class="w-full h-full rounded-full object-cover">
                    </div>
                    {{-- Edit Overlay --}}
                    <button onclick="document.getElementById('profilePhotoInput').click()" 
                            class="absolute bottom-2 right-2 w-11 h-11 dynamic-btn rounded-full shadow-xl flex items-center justify-center text-slate-400 hover:text-[var(--user-accent)] transition-all hover:scale-110 active:scale-95">
                        <i data-lucide="camera" class="w-6 h-6"></i>
                    </button>
                    <input type="file" id="profilePhotoInput" name="foto" hidden accept="image/*" onchange="previewProfilePhoto(event)">
                </div>

                <h2 class="text-2xl font-[1000] dynamic-title uppercase tracking-tighter text-center leading-tight mb-4">
                    {{ $user->nombre_completo ?? 'Nombre del Dueño' }}
                </h2>

                <div class="inline-flex items-center gap-2 px-6 py-2.5 rounded-full user-badge-accent shadow-sm">
                    <i data-lucide="shield-check" class="w-4 h-4 user-badge-icon"></i>
                    <span class="text-[11px] font-black uppercase tracking-widest">PROPIETARIO</span>
                </div>

                {{-- Status Pills (Dynamic) --}}
                <div class="grid grid-cols-2 gap-3 w-full mt-10">
                    <div class="user-stat-card rounded-3xl p-4 text-center border relative group overflow-hidden">
                        <i data-lucide="store" class="w-5 h-5 mx-auto mb-2 text-slate-400"></i>
                        <p class="text-[9px] font-black stat-label uppercase mb-1">Mis Sedes</p>
                        <p class="text-sm font-black stat-value tracking-tighter uppercase">{{ count($sucursales ?? []) }} Inscritas</p>
                    </div>
                    <div class="user-stat-card rounded-3xl p-4 text-center border relative group overflow-hidden">
                        <i data-lucide="activity" class="w-5 h-5 mx-auto mb-2 text-emerald-500"></i>
                        <p class="text-[9px] font-black stat-label uppercase mb-1">Estado</p>
                        <p class="text-sm font-black stat-value tracking-tighter uppercase text-emerald-500">ONLINE</p>
                    </div>
                </div>
            </div>

            {{-- Tarjeta 4: Soporte Directo (Movida a la izquierda) --}}
            <div class="user-profile-card w-full rounded-[3.5rem] mt-6 shadow-xl overflow-hidden flex flex-col border border-slate-100/10 transition-all hover:shadow-2xl">
                <div class="px-8 py-5 border-b border-slate-100/10 bg-slate-50/5 flex items-center gap-3">
                    <span class="w-1 h-4 rounded-full bg-emerald-500"></span>
                    <p class="text-[10px] dynamic-subtitle font-[1000] uppercase tracking-[0.2em] leading-none">Soporte Piter</p>
                </div>
                <div class="p-6 space-y-3">
                    <a href="https://wa.me/51966339###" target="_blank" class="flex items-center gap-4 p-3.5 rounded-2xl dynamic-btn border group cursor-pointer transition-all">
                        <div class="w-10 h-10 rounded-xl bg-emerald-100 text-emerald-600 flex items-center justify-center shrink-0 group-hover:bg-emerald-500 group-hover:text-white transition-all shadow-sm">
                            <i data-lucide="message-circle" class="w-5 h-5"></i>
                        </div>
                        <div class="min-w-0">
                            <p class="text-[11px] font-black dynamic-title uppercase tracking-tight truncate">WhatsApp</p>
                            <p class="text-[8px] font-bold dynamic-subtitle uppercase">Soporte 24/7</p>
                        </div>
                    </a>
                    <a href="#" class="flex items-center gap-4 p-3.5 rounded-2xl dynamic-btn border group cursor-pointer transition-all">
                        <div class="w-10 h-10 rounded-xl bg-indigo-100 text-indigo-600 flex items-center justify-center shrink-0 group-hover:bg-indigo-500 group-hover:text-white transition-all shadow-sm">
                            <i data-lucide="book-open" class="w-5 h-5"></i>
                        </div>
                        <div class="min-w-0">
                            <p class="text-[11px] font-black dynamic-title uppercase tracking-tight truncate">Manuales</p>
                            <p class="text-[8px] font-bold dynamic-subtitle uppercase">Guías de Uso</p>
                        </div>
                    </a>
                </div>
            </div>

            {{-- Tarjeta 5: Contacto Comercial (Movida a la izquierda) --}}
            <div class="user-profile-card w-full rounded-[3.5rem] mt-6 shadow-xl overflow-hidden flex flex-col border border-slate-100/10 transition-all hover:shadow-2xl">
                <div class="px-8 py-5 border-b border-slate-100/10 bg-slate-50/5 flex items-center gap-3">
                    <span class="w-1 h-4 rounded-full bg-indigo-500"></span>
                    <p class="text-[10px] dynamic-subtitle font-[1000] uppercase tracking-[0.2em] leading-none">Contacto Comercial</p>
                </div>
                <div class="p-6 space-y-4">
                    <div class="space-y-3">
                        <div class="flex items-center gap-3">
                            <div class="w-8 h-8 rounded-lg bg-slate-100 flex items-center justify-center text-slate-500">
                                <i data-lucide="phone" class="w-4 h-4"></i>
                            </div>
                            <span class="text-[10px] font-bold dynamic-title tracking-tight">+51 966 ### ###</span>
                        </div>
                        <div class="flex items-center gap-3">
                            <div class="w-8 h-8 rounded-lg bg-slate-100 flex items-center justify-center text-slate-500">
                                <i data-lucide="globe" class="w-4 h-4"></i>
                            </div>
                            <span class="text-[10px] font-bold dynamic-title tracking-tight">piter.club</span>
                        </div>
                    </div>
                    <div class="flex flex-wrap items-center gap-2 pt-2 border-t border-slate-50">
                        <a href="#" class="w-10 h-10 rounded-xl dynamic-btn border flex items-center justify-center hover:bg-blue-600 hover:text-white transition-all shadow-sm" title="Facebook">
                            <i data-lucide="facebook" class="w-4 h-4"></i>
                        </a>
                        <a href="#" class="w-10 h-10 rounded-xl dynamic-btn border flex items-center justify-center hover:bg-pink-600 hover:text-white transition-all shadow-sm" title="Instagram">
                            <i data-lucide="instagram" class="w-4 h-4"></i>
                        </a>
                        <a href="#" class="w-10 h-10 rounded-xl dynamic-btn border flex items-center justify-center hover:bg-black hover:text-white transition-all shadow-sm" title="X (Twitter)">
                            <i data-lucide="twitter" class="w-4 h-4"></i>
                        </a>
                        <a href="#" class="w-10 h-10 rounded-xl dynamic-btn border flex items-center justify-center hover:bg-[#00f2ea] hover:text-black transition-all shadow-sm" title="TikTok">
                            <i data-lucide="music-2" class="w-4 h-4"></i>
                        </a>
                        <a href="#" class="w-10 h-10 rounded-xl dynamic-btn border flex items-center justify-center hover:bg-red-600 hover:text-white transition-all shadow-sm" title="YouTube">
                            <i data-lucide="youtube" class="w-4 h-4"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>

        {{-- COLUMNA DERECHA: OPCIONES Y DATOS RELEVANTES (Adaptación Web) --}}
        <div class="lg:col-span-12 xl:col-span-9 space-y-10">
            
            {{-- Gestión y Accesos Rápidos --}}
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                {{-- Mis Gerentes --}}
                <a href="{{ route('admin.hr') }}" class="dynamic-btn rounded-[2.5rem] p-8 flex items-center gap-6 group">
                    <div class="w-16 h-16 rounded-2xl icon-container-dynamic flex items-center justify-center shadow-lg">
                        <i data-lucide="users" class="w-8 h-8"></i>
                    </div>
                    <div class="flex-1">
                        <h4 class="text-sm font-black dynamic-title uppercase tracking-widest">Mis Gerentes</h4>
                        <p class="text-[10px] dynamic-subtitle font-bold mt-1">Control de Personal</p>
                    </div>
                    <i data-lucide="chevron-right" class="w-5 h-5 dynamic-subtitle group-hover:translate-x-1 transition-transform"></i>
                </a>

                {{-- Sesiones Activas --}}
                <div class="dynamic-btn rounded-[2.5rem] p-8 flex items-center gap-6 group cursor-pointer" onclick="window.location.href='{{ route('admin.sessions') }}'">
                    <div class="w-16 h-16 rounded-2xl icon-container-dynamic flex items-center justify-center shadow-lg">
                        <i data-lucide="monitor" class="w-8 h-8"></i>
                    </div>
                    <div class="flex-1">
                        <h4 class="text-sm font-black dynamic-title uppercase tracking-widest">Sesiones Activas</h4>
                        <p class="text-[10px] dynamic-subtitle font-bold mt-1">Seguridad de Cuenta</p>
                    </div>
                    <i data-lucide="chevron-right" class="w-5 h-5 dynamic-subtitle group-hover:translate-x-1 transition-transform"></i>
                </div>

                {{-- Editar Información --}}
                <div class="dynamic-btn rounded-[2.5rem] p-8 flex items-center gap-6 group cursor-pointer" onclick="openEditProfileModal()">
                    <div class="w-16 h-16 rounded-2xl icon-container-dynamic flex items-center justify-center shadow-lg">
                        <i data-lucide="user-cog" class="w-8 h-8"></i>
                    </div>
                    <div class="flex-1">
                        <h4 class="text-sm font-black dynamic-title uppercase tracking-widest">Editar Información</h4>
                        <p class="text-[10px] dynamic-subtitle font-bold mt-1">Datos de Perfil</p>
                    </div>
                    <i data-lucide="chevron-right" class="w-5 h-5 dynamic-subtitle group-hover:translate-x-1 transition-transform"></i>
                </div>

                {{-- Cambiar Contraseña --}}
                <div class="dynamic-btn rounded-[2.5rem] p-8 flex items-center gap-6 group cursor-pointer" onclick="openPasswordModal()">
                    <div class="w-16 h-16 rounded-2xl icon-container-dynamic flex items-center justify-center shadow-lg">
                        <i data-lucide="key" class="w-8 h-8"></i>
                    </div>
                    <div class="flex-1">
                        <h4 class="text-sm font-black dynamic-title uppercase tracking-widest">Cambiar Contraseña</h4>
                        <p class="text-[10px] dynamic-subtitle font-bold mt-1">Actualizar Accesos</p>
                    </div>
                    <i data-lucide="chevron-right" class="w-5 h-5 dynamic-subtitle group-hover:translate-x-1 transition-transform"></i>
                </div>
            </div>

            {{-- Bento Grid: Información y Gestión --}}
            <div class="grid grid-cols-1 md:grid-cols-12 gap-6 items-stretch">
                
                {{-- Tarjeta 1: Mi Negocio (Grande/Destacada) --}}
                @if($empresa)
                <div class="md:col-span-8 user-profile-card rounded-[3.5rem] shadow-xl overflow-hidden flex flex-col transition-all hover:shadow-2xl border border-transparent hover:border-amber-500/10">
                    <div class="px-8 py-7 border-b border-slate-100/10 flex items-center justify-between bg-slate-50/5">
                        <div class="flex items-center gap-4">
                            <div class="w-12 h-12 rounded-2xl bg-amber-500/10 text-amber-600 flex items-center justify-center shadow-sm">
                                <i data-lucide="briefcase" class="w-6 h-6"></i>
                            </div>
                            <div>
                                <h3 class="text-xl font-[1000] dynamic-title leading-none uppercase tracking-tighter">Mi Negocio</h3>
                                <p class="text-[9px] dynamic-subtitle font-bold uppercase tracking-widest mt-1.5 opacity-60">Operativa Principal</p>
                            </div>
                        </div>
                        <div class="px-4 py-1.5 rounded-full user-badge-accent text-[9px] font-black uppercase tracking-widest flex items-center gap-1.5 shadow-sm">
                            <i data-lucide="check-circle-2" class="w-3.5 h-3.5"></i>
                            Verificada
                        </div>
                    </div>
                    
                    @php
                        $logoUrl = null;
                        if (!empty($empresa->logo_url)) {
                            $rawLogo = $empresa->logo_url;
                            if (str_starts_with($rawLogo, 'http')) {
                                $logoUrl = $rawLogo;
                            } else {
                                // Relative path — resolve via the uploads proxy, same as user photos
                                $cleanLogo = trim(str_replace(['uploads/', 'uploads\\'], '', $rawLogo), '/\\');
                                $logoUrl = url('/api/Security/uploads/' . $cleanLogo);
                            }
                        }
                    @endphp
                    <div class="p-8 flex-1 flex flex-col justify-center">
                        <div class="flex flex-col sm:flex-row items-center gap-8">
                            @if($logoUrl)
                            <div class="w-24 h-24 rounded-2xl bg-white p-3 shadow-md border border-slate-100 flex items-center justify-center overflow-hidden shrink-0">
                                <img src="{{ $logoUrl }}" class="max-w-full max-h-full object-contain" onerror="this.parentElement.innerHTML='<svg xmlns=\'http://www.w3.org/2000/svg\' class=\'w-10 h-10 text-slate-300\' fill=\'none\' viewBox=\'0 0 24 24\' stroke=\'currentColor\'><path stroke-linecap=\'round\' stroke-linejoin=\'round\' stroke-width=\'1.5\' d=\'M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h4a1 1 0 011 1v5m-6 0h6\'/></svg>'">
                            </div>
                            @else
                            <div class="w-24 h-24 rounded-2xl bg-slate-100 flex items-center justify-center text-slate-300 shrink-0">
                                <i data-lucide="building-2" class="w-10 h-10"></i>
                            </div>
                            @endif
                            <div class="text-center sm:text-left">
                                <h4 class="text-xl font-[1000] dynamic-title uppercase tracking-tighter leading-tight">{{ $empresa->razon_social }}</h4>
                                <p class="text-[10px] dynamic-subtitle font-black uppercase tracking-[0.2em] mt-1">{{ $empresa->ruc_nit ?? 'RUC pendiente' }}</p>
                            </div>
                        </div>
                    </div>
                </div>
                @endif

                {{-- Tarjeta 2: Datos de Cuenta (Más pequeña al lado) --}}
                <div class="md:col-span-4 user-profile-card rounded-[3.5rem] shadow-xl overflow-hidden flex flex-col border border-slate-100/10 transition-all hover:shadow-2xl">
                    <div class="px-8 py-6 border-b border-slate-100/10 bg-slate-50/5 flex items-center gap-3">
                        <span class="w-1 h-4 rounded-full bg-indigo-500"></span>
                        <p class="text-[10px] dynamic-subtitle font-[1000] uppercase tracking-[0.2em] leading-none">Identidad Digital</p>
                    </div>
                    <div class="p-8 space-y-6 flex-1 flex flex-col justify-center">
                        <div class="flex items-center gap-4 group">
                            <div class="w-10 h-10 rounded-xl icon-container-dynamic flex items-center justify-center shrink-0">
                                <i data-lucide="mail" class="w-5 h-5"></i>
                            </div>
                            <div class="min-w-0">
                                <p class="text-[9px] font-black dynamic-subtitle uppercase tracking-widest mb-0.5">Email</p>
                                <p class="text-xs font-bold dynamic-title tracking-tight truncate">{{ $user->email }}</p>
                            </div>
                        </div>
                        <div class="flex items-center gap-4 group">
                            <div class="w-10 h-10 rounded-xl icon-container-dynamic flex items-center justify-center shrink-0">
                                <i data-lucide="shield-check" class="w-5 h-5"></i>
                            </div>
                            <div class="min-w-0">
                                <p class="text-[9px] font-black dynamic-subtitle uppercase tracking-widest mb-0.5">Seguridad</p>
                                <p class="text-xs font-bold text-emerald-500 uppercase tracking-tighter">Acceso Verificado</p>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Tarjeta 3: Mis Sucursales (Vuelve a ser ancha abajo) --}}
                <div class="md:col-span-12 user-profile-card rounded-[3.5rem] shadow-xl overflow-hidden flex flex-col transition-all hover:shadow-2xl border border-transparent hover:border-emerald-500/10">
                    <div class="px-8 py-7 border-b border-slate-100/10 flex items-center justify-between bg-slate-50/5">
                        <div class="flex items-center gap-4">
                            <div class="w-12 h-12 rounded-2xl bg-emerald-500/10 text-emerald-600 flex items-center justify-center shadow-sm">
                                <i data-lucide="map-pin" class="w-6 h-6"></i>
                            </div>
                            <div>
                                <h3 class="text-xl font-[1000] dynamic-title leading-none uppercase tracking-tighter">Sedes de Operación</h3>
                                <p class="text-[9px] dynamic-subtitle font-bold uppercase tracking-widest mt-1.5 opacity-60">Sucursales Activas</p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="p-8">
                        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
                            @forelse($sucursales as $suc)
                                <div class="p-5 rounded-3xl dynamic-btn border transition-all flex items-center gap-4 hover:border-emerald-500">
                                    <div class="w-12 h-12 rounded-xl icon-container-dynamic flex items-center justify-center shrink-0">
                                        <i data-lucide="store" class="w-6 h-6"></i>
                                    </div>
                                    <div class="min-w-0">
                                        <h5 class="text-xs font-black dynamic-title uppercase tracking-tight truncate">{{ $suc->nombre }}</h5>
                                        <div class="flex items-center gap-2 mt-1">
                                            <span class="w-1.5 h-1.5 rounded-full {{ $suc->activo ? 'bg-emerald-500 animate-pulse' : 'bg-slate-300' }}"></span>
                                            <span class="text-[9px] font-black uppercase {{ $suc->activo ? 'text-emerald-500' : 'text-slate-400' }}">
                                                {{ $suc->activo ? 'En línea' : 'Inactiva' }}
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            @empty
                                <div class="col-span-full py-10 text-center user-input-dynamic rounded-3xl border-2 border-dashed">
                                    <p class="text-[10px] font-black dynamic-subtitle uppercase">Sin sedes activas</p>
                                </div>
                            @endforelse
                        </div>
                    </div>
                </div>
            </div>

            {{-- Personalizar Paneles y Ambiente (UI Original refinada) --}}
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                {{-- Sección Colores --}}
                <div class="user-profile-card rounded-[3rem] shadow-xl overflow-hidden md:col-span-2">
                    <div class="px-10 py-6 border-b border-slate-100/10 flex items-center gap-4 bg-slate-50/5">
                        <i data-lucide="settings-2" class="w-5 h-5 dynamic-subtitle"></i>
                        <h4 class="text-xs font-black dynamic-title uppercase tracking-widest">Personalización del Sistema</h4>
                    </div>
                    <div class="p-10 space-y-10">
                        {{-- Presets de Tema --}}
                        <div>
                             <p class="text-[10px] dynamic-subtitle font-black uppercase tracking-widest mb-6 px-4 py-2 rounded-lg bg-slate-100/10 inline-block border border-slate-100/10">Estilo del Panel</p>
                             <div class="grid grid-cols-2 lg:grid-cols-4 gap-6">
                                {{-- Obsidian --}}
                                <div class="cursor-pointer group" onclick="selectTheme('obsidian')">
                                    <div id="monitor-obsidian" class="relative w-full aspect-video bg-slate-900 rounded-2xl border-4 border-slate-800 shadow-md transition-all group-hover:scale-105 overflow-hidden flex">
                                        {{-- Mini Sidebar --}}
                                        <div class="w-1/4 h-full bg-slate-800/50 border-r border-slate-700/50 p-1 space-y-1">
                                            <div class="w-full h-1 bg-slate-600/30 rounded-full"></div>
                                            <div class="w-3/4 h-1 bg-slate-600/30 rounded-full"></div>
                                        </div>
                                        <div class="flex-1 flex flex-col">
                                            {{-- Mini Header --}}
                                            <div class="h-1/4 w-full bg-slate-800/30 border-b border-slate-700/50 p-1 flex items-center justify-between">
                                                <div class="w-4 h-1 bg-slate-600/30 rounded-full"></div>
                                                <div class="w-1 h-1 rounded-full bg-indigo-500 shadow-[0_0_5px_rgba(99,102,241,0.5)]"></div>
                                            </div>
                                            {{-- Content --}}
                                            <div class="flex-1 p-2 flex gap-1">
                                                <div class="w-1/2 h-full bg-slate-800/20 rounded-sm border border-slate-700/30"></div>
                                                <div class="w-1/2 h-full bg-slate-800/20 rounded-sm border border-slate-700/30"></div>
                                            </div>
                                        </div>
                                        <div class="absolute inset-0 bg-gradient-to-tr from-indigo-500/5 to-transparent pointer-events-none"></div>
                                    </div>
                                    <p class="text-[9px] font-[1000] dynamic-subtitle uppercase tracking-widest mt-3 text-center transition-colors group-hover:text-indigo-400">Obsidian</p>
                                </div>
                                {{-- Royal --}}
                                <div class="cursor-pointer group" onclick="selectTheme('emerald')">
                                    <div id="monitor-emerald" class="relative w-full aspect-video bg-blue-600 rounded-2xl border-4 border-blue-900 shadow-md transition-all group-hover:scale-105 overflow-hidden flex">
                                        {{-- Mini Sidebar --}}
                                        <div class="w-1/4 h-full bg-blue-700/50 border-r border-blue-800/50 p-1 space-y-1">
                                            <div class="w-full h-1 bg-white/20 rounded-full"></div>
                                            <div class="w-3/4 h-1 bg-white/20 rounded-full"></div>
                                        </div>
                                        <div class="flex-1 flex flex-col">
                                            {{-- Mini Header --}}
                                            <div class="h-1/4 w-full bg-blue-700/30 border-b border-blue-800/50 p-1 flex items-center justify-between">
                                                <div class="w-4 h-1 bg-white/30 rounded-full"></div>
                                                <div class="w-1 h-1 rounded-full bg-white shadow-[0_0_5px_rgba(255,255,255,0.8)]"></div>
                                            </div>
                                            {{-- Content --}}
                                            <div class="flex-1 p-2 flex gap-1">
                                                <div class="w-1/2 h-full bg-blue-500/20 rounded-sm border border-blue-400/20 shadow-inner"></div>
                                                <div class="w-1/2 h-full bg-blue-500/20 rounded-sm border border-blue-400/20 shadow-inner"></div>
                                            </div>
                                        </div>
                                    </div>
                                    <p class="text-[9px] font-[1000] dynamic-subtitle uppercase tracking-widest mt-3 text-center transition-colors group-hover:text-blue-500">Royal Blue</p>
                                </div>
                                {{-- Crimson --}}
                                <div class="cursor-pointer group" onclick="selectTheme('blue')">
                                    <div id="monitor-blue" class="relative w-full aspect-video bg-red-600 rounded-2xl border-4 border-red-900 shadow-md transition-all group-hover:scale-105 overflow-hidden flex">
                                        {{-- Mini Sidebar --}}
                                        <div class="w-1/4 h-full bg-red-700/50 border-r border-red-800/50 p-1 space-y-1">
                                            <div class="w-full h-1 bg-white/20 rounded-full"></div>
                                            <div class="w-3/4 h-1 bg-white/20 rounded-full"></div>
                                        </div>
                                        <div class="flex-1 flex flex-col">
                                            {{-- Mini Header --}}
                                            <div class="h-1/4 w-full bg-red-700/30 border-b border-red-800/50 p-1 flex items-center justify-between">
                                                <div class="w-4 h-1 bg-white/30 rounded-full"></div>
                                                <div class="w-1 h-1 rounded-full bg-white shadow-[0_0_8px_rgba(255,255,255,0.8)]"></div>
                                            </div>
                                            {{-- Content --}}
                                            <div class="flex-1 p-2 flex gap-1">
                                                <div class="w-1/2 h-full bg-red-500/20 rounded-sm border border-red-400/20 shadow-inner"></div>
                                                <div class="w-1/2 h-full bg-red-500/20 rounded-sm border border-red-400/20 shadow-inner"></div>
                                            </div>
                                        </div>
                                    </div>
                                    <p class="text-[9px] font-[1000] dynamic-subtitle uppercase tracking-widest mt-3 text-center transition-colors group-hover:text-red-500">Crimson</p>
                                </div>
                                {{-- Custom --}}
                                <div class="cursor-pointer group" onclick="toggleCustomColor()">
                                    <div id="monitor-custom" class="relative w-full aspect-video bg-slate-50 rounded-2xl border-4 border-dashed border-slate-300 shadow-md transition-all group-hover:scale-105 flex overflow-hidden">
                                        {{-- Mini Sidebar --}}
                                        <div class="w-1/4 h-full bg-slate-100 border-r border-slate-200 p-1 space-y-1">
                                            <div id="custom-side-1" class="w-full h-1 bg-slate-300 rounded-full"></div>
                                            <div id="custom-side-2" class="w-3/4 h-1 bg-slate-300 rounded-full"></div>
                                        </div>
                                        <div class="flex-1 flex flex-col">
                                            {{-- Mini Header --}}
                                            <div class="h-1/4 w-full border-b border-slate-200 p-1 flex items-center justify-between">
                                                <div class="w-4 h-1 bg-slate-300 rounded-full"></div>
                                                <div id="custom-dot" class="w-1.5 h-1.5 rounded-full bg-gradient-to-br from-indigo-500 to-amber-500 animate-pulse"></div>
                                            </div>
                                            {{-- Content --}}
                                            <div class="flex-1 p-2 flex gap-1">
                                                <div class="w-1/2 h-full border border-dashed border-slate-300 rounded-sm flex items-center justify-center">
                                                    <i data-lucide="plus" class="w-2 h-2 text-slate-300"></i>
                                                </div>
                                                <div class="w-1/2 h-full border border-dashed border-slate-300 rounded-sm flex items-center justify-center">
                                                    <i data-lucide="palette" class="w-2 h-2 text-slate-300"></i>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <p class="text-[9px] font-[1000] dynamic-subtitle uppercase tracking-widest mt-3 text-center transition-colors group-hover:text-amber-600">Duo-Tone</p>
                                </div>
                             </div>
                        </div>

                        {{-- Ambiente --}}
                        <div class="pt-10 border-t border-slate-100/10">
                             <p class="text-[10px] dynamic-subtitle font-black uppercase tracking-widest mb-6 px-4 py-2 rounded-lg bg-slate-100/10 inline-block border border-slate-100/10">Ambiente de Trabajo</p>
                             <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                                <div class="cursor-pointer" onclick="selectAccent('light')">
                                    <div id="accent-light" class="relative w-full h-24 dynamic-btn rounded-3xl border-4 shadow-sm transition-all hover:scale-[1.02] flex items-center gap-6 px-8">
                                        <div class="w-12 h-12 rounded-2xl user-input-dynamic flex items-center justify-center text-slate-400">
                                            <i data-lucide="sun" class="w-6 h-6"></i>
                                        </div>
                                        <div>
                                            <span class="text-xs font-black dynamic-title uppercase tracking-widest block">Luminoso</span>
                                            <span class="text-[9px] font-bold dynamic-subtitle uppercase">Modo Claro</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="cursor-pointer" onclick="selectAccent('dark')">
                                    <div id="accent-dark" class="relative w-full h-24 dynamic-btn rounded-3xl border-4 shadow-sm transition-all hover:scale-[1.02] flex items-center gap-6 px-8">
                                        <div class="w-12 h-12 rounded-2xl bg-slate-900 flex items-center justify-center text-slate-400">
                                            <i data-lucide="moon" class="w-6 h-6"></i>
                                        </div>
                                        <div>
                                            <span class="text-xs font-black dynamic-title uppercase tracking-widest block">Nocturno</span>
                                            <span class="text-[9px] font-bold dynamic-subtitle uppercase">Modo Oscuro</span>
                                        </div>
                                    </div>
                                </div>
                             </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="flex justify-end pr-4">
                <form action="{{ route('logout') }}" method="POST">
                    @csrf
                    <button type="submit" class="h-14 px-10 rounded-3xl bg-red-500/10 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 border border-red-500/20">
                        Cerrar Sesión Segura
                        <i data-lucide="power" class="w-4 h-4 group-hover:rotate-90 transition-transform"></i>
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>

{{-- Modales Reutilizables --}}
{{-- 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 shadow-inner" onclick="closePasswordModal()"></div>
    <div class="relative w-full max-w-md user-modal-content rounded-[3.5rem] 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-amber-500 text-white flex items-center justify-center shadow-lg shadow-amber-100/50">
                        <i data-lucide="lock" class="w-6 h-6"></i>
                    </div>
                    <div>
                        <h3 class="text-xl font-black dynamic-title leading-none">Nueva Contraseña</h3>
                        <p class="text-[10px] dynamic-subtitle font-bold uppercase tracking-widest mt-2 px-1 border-l-2 border-amber-500">Account Security</p>
                    </div>
                </div>
                <button onclick="closePasswordModal()" class="w-10 h-10 rounded-full dynamic-btn flex items-center justify-center">
                    <i data-lucide="x" class="w-5 h-5"></i>
                </button>
            </div>

            <form action="{{ route('admin.profile.password.update') }}" method="POST" class="space-y-6">
                @csrf
                @if(session('success_password'))
                    <div class="p-4 mb-4 text-sm text-emerald-500 bg-emerald-500/10 rounded-2xl border border-emerald-500/20 font-bold">
                        <i data-lucide="check-circle" class="w-4 h-4 inline-block mr-2"></i>
                        {{ session('success_password') }}
                    </div>
                @endif
                <div class="space-y-2">
                    <p class="text-[10px] font-black dynamic-subtitle uppercase tracking-[0.2em] ml-2">Nueva Contraseña</p>
                    <input type="password" name="password" id="input_password" required minlength="6" class="w-full h-16 px-6 user-input-dynamic rounded-3xl text-sm font-bold focus:border-amber-500 transition-all focus:ring-4 focus:ring-amber-100" placeholder="Mínimo 6 caracteres">
                </div>
                <div class="space-y-2">
                    <p class="text-[10px] font-black dynamic-subtitle uppercase tracking-[0.2em] ml-2">Confirmar Contraseña</p>
                    <input type="password" name="password_confirmation" id="input_password_confirmation" required class="w-full h-16 px-6 user-input-dynamic rounded-3xl text-sm font-bold focus:border-amber-500 transition-all focus:ring-4 focus:ring-amber-100" placeholder="Repetir contraseña">
                </div>
                <button type="submit" class="w-full h-18 py-6 bg-slate-950 text-white rounded-[2rem] font-black text-xs uppercase tracking-[0.3em] shadow-xl hover:-translate-y-1 transition-all active:scale-95 flex items-center justify-center gap-3">
                    Actualizar Ahora
                    <i data-lucide="check-circle" 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 shadow-inner" onclick="closeEditProfileModal()"></div>
    <div class="relative w-full max-w-md user-modal-content rounded-[3.5rem] 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-600 text-white flex items-center justify-center shadow-lg shadow-indigo-100/50">
                        <i data-lucide="user" class="w-6 h-6"></i>
                    </div>
                    <div>
                        <h3 class="text-xl font-black dynamic-title leading-none">Editar Detalles</h3>
                        <p class="text-[10px] dynamic-subtitle font-bold uppercase tracking-widest mt-2 px-1 border-l-2 border-indigo-600">Owner Identity</p>
                    </div>
                </div>
                <button onclick="closeEditProfileModal()" class="w-10 h-10 rounded-full dynamic-btn flex items-center justify-center">
                    <i data-lucide="x" class="w-5 h-5"></i>
                </button>
            </div>

            <form action="{{ route('admin.profile.update') }}" method="POST" class="space-y-6">
                @csrf
                @if(session('success_profile'))
                    <div class="p-4 mb-4 text-sm text-indigo-500 bg-indigo-500/10 rounded-2xl border border-indigo-500/20 font-bold">
                        <i data-lucide="check-circle" class="w-4 h-4 inline-block mr-2"></i>
                        {{ session('success_profile') }}
                    </div>
                @endif
                <div class="space-y-2">
                    <p class="text-[10px] font-black dynamic-subtitle uppercase tracking-[0.2em] ml-2">Nombre Completo</p>
                    <input type="text" name="nombre_completo" id="input_nombre_completo" value="{{ $user->nombre_completo }}" required class="w-full h-16 px-6 user-input-dynamic rounded-3xl text-sm font-bold focus:border-indigo-600 transition-all focus:ring-4 focus:ring-indigo-100">
                </div>
                <div class="space-y-2">
                    <p class="text-[10px] font-black dynamic-subtitle uppercase tracking-[0.2em] ml-2">Email Institucional</p>
                    <input type="email" name="email" id="input_email" value="{{ $user->email }}" required class="w-full h-14 px-6 user-input-dynamic rounded-3xl text-sm font-bold focus:border-indigo-600 transition-all focus:ring-4 focus:ring-indigo-100">
                </div>
                <div class="space-y-2">
                    <p class="text-[10px] font-black dynamic-subtitle uppercase tracking-[0.2em] ml-2">Número Móvil</p>
                    <input type="text" name="telefono" id="input_telefono" value="{{ $user->telefono }}" class="w-full h-14 px-6 user-input-dynamic rounded-3xl text-sm font-bold focus:border-indigo-600 transition-all focus:ring-4 focus:ring-indigo-100">
                </div>
                <button type="submit" class="w-full h-18 py-6 bg-slate-950 text-white rounded-[2rem] font-black text-xs uppercase tracking-[0.3em] shadow-xl 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>
</div>

{{-- Modal Personalizar Color --}}
<div id="customColorModal" 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 shadow-inner" onclick="closeCustomColorModal()"></div>
    <div class="relative w-full max-w-4xl user-modal-content rounded-[3.5rem] 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-amber-500 text-white flex items-center justify-center shadow-lg shadow-amber-100/50">
                        <i data-lucide="palette" class="w-6 h-6"></i>
                    </div>
                    <div>
                        <h3 class="text-xl font-black dynamic-title leading-none">Color Personalizado</h3>
                        <p class="text-[10px] dynamic-subtitle font-bold uppercase tracking-widest mt-2 px-1 border-l-2 border-amber-500">Diseña tu Tema</p>
                    </div>
                </div>
                <button onclick="closeCustomColorModal()" class="w-10 h-10 rounded-full dynamic-btn flex items-center justify-center">
                    <i data-lucide="x" class="w-5 h-5"></i>
                </button>
            </div>

            <div class="flex flex-col md:flex-row gap-10 items-start">
                {{-- Preview Monitor --}}
                <div class="flex-1 w-full max-w-sm mx-auto md:mx-0">
                    <p class="text-[10px] font-black dynamic-subtitle 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/30 rounded-full"></div>
                        <div class="absolute left-4 top-12 w-16 bottom-4 bg-white/20 rounded-2xl"></div>
                        <div class="absolute right-4 bottom-4 w-12 h-12 rounded-full bg-white/30 flex items-center justify-center">
                            <div class="w-6 h-6 rounded-full bg-white/40 animate-pulse"></div>
                        </div>
                    </div>
                </div>

                {{-- Controls --}}
                <div class="flex-1 w-full space-y-6">
                    {{-- Premium Palette (Circles) --}}
                    <div>
                        <label class="text-[10px] font-black dynamic-subtitle uppercase tracking-widest mb-3 block">Paleta Premium</label>
                        <div class="flex flex-wrap gap-3">
                            @php
                                $premiumColors = [
                                    '#4c0519', '#2e1065', '#082f49', '#022c22', 
                                    '#27272a', '#450a0a', '#1e1b4b', '#be123c', 
                                    '#4338ca', '#0369a1', '#0f766e', '#b45309'
                                ];
                            @endphp
                            @foreach($premiumColors as $color)
                                <button onclick="updateLiveColor('{{ $color }}')" 
                                        class="w-10 h-10 rounded-full border-2 border-white shadow-lg hover:scale-110 transition-transform focus:ring-2 focus:ring-slate-400 focus:outline-none" 
                                        style="background-color: {{ $color }}">
                                </button>
                            @endforeach
                            
                            {{-- Custom Color Circle Trigger --}}
                            <div class="relative w-10 h-10 rounded-full overflow-hidden border-2 user-input-dynamic shadow-inner flex items-center justify-center group cursor-pointer hover:border-indigo-500 transition-colors">
                                <i data-lucide="plus" class="w-4 h-4 text-slate-400 group-hover:text-indigo-500"></i>
                                <input type="color" id="manualColorPicker" class="absolute inset-0 opacity-0 cursor-pointer w-full h-full" oninput="updateLiveColor(this.value)">
                            </div>
                        </div>
                    </div>

                    {{-- Hex Input --}}
                    <div>
                        <label class="text-[10px] font-black dynamic-subtitle uppercase tracking-widest mb-2 block">Código Hexadecimal</label>
                        <div class="relative">
                            <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                                <span class="text-slate-400 font-black text-lg">#</span>
                            </div>
                            <input type="text" id="hexInput" placeholder="10B981" maxlength="7" class="w-full h-14 pl-10 pr-4 user-input-dynamic rounded-2xl text-lg font-black focus:border-amber-500 focus:ring-4 focus:ring-amber-500/10 transition-all">
                        </div>
                    </div>
                    
                    <button onclick="saveCustomTheme()" class="w-full h-16 bg-slate-950 text-white rounded-[2rem] font-black text-xs uppercase tracking-[0.3em] shadow-xl hover:-translate-y-1 transition-all active:scale-95 flex items-center justify-center gap-3">
                        Aplicar Diseño
                        <i data-lucide="check-circle" class="w-5 h-5"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
    </div>
</div>



@endsection

@push('scripts')
<script>
    window.userPreferences = {
        userId: "{{ $user->id_usuario }}",
        theme: "{{ $user->color_preferido ?? '' }}",
        accent: "{{ $user->color_fondo_preferido ?? '' }}",
        csrfToken: "{{ csrf_token() }}",
        routes: {
            preferences: "{{ route('admin.profile.preferences') }}",
            updateProfile: "{{ route('admin.profile.update') }}"
        },
        userData: {
            fullName: "{{ $user->nombre_completo }}",
            email: "{{ $user->email }}"
        },
        flash: {
            successPassword: "{{ session('success_password') ?? '' }}",
            successProfile: "{{ session('success_profile') ?? '' }}"
        }
    };
</script>
<script src="{{ asset('admin/profile.js') }}"></script>
@endpush