@extends('layouts.client')

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

@push('styles')
    {{-- 1. LIBRERÍAS (Tailwind + Iconos) --}}
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://unpkg.com/lucide@latest"></script>
    
    {{-- 2. FUENTES ESPECÍFICAS DE ESTA VISTA --}}
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
    
    {{-- 3. CONFIGURACIÓN TAILWIND --}}
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        brand: { blue: '#0050FF', red: '#E21C21' }
                    },
                    fontFamily: { 
                        sans: ['Plus Jakarta Sans', 'sans-serif'], 
                        mono: ['JetBrains Mono', 'monospace'] 
                    }
                }
            }
        }
    </script>
    
    {{-- 4. ESTILOS CSS PERSONALIZADOS --}}
    <style>
        /* Fondo general limpio */
        body { background-color: #F8FAFC; color: #334155; margin: 0; padding: 0; }
        
        /* Paneles estilo "Clean Glass" */
        .glass-panel {
            background: #ffffff;
            border: 1px solid #E2E8F0;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.01);
            transition: all 0.3s ease;
        }
        .glass-panel:hover { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05); }

        /* Tarjeta de Membresía Premium */
        .member-card {
            background: linear-gradient(135deg, #0050FF 0%, #0030a0 100%);
            position: relative; overflow: hidden;
            border-radius: 1.5rem;
            box-shadow: 0 10px 20px -5px rgba(0, 80, 255, 0.4);
            transition: transform 0.3s ease;
        }
        .member-card::before {
            content: ''; position: absolute; inset: 0;
            background-image: radial-gradient(circle at top right, rgba(255,255,255,0.2) 0%, transparent 60%);
            z-index: 1;
        }
        .member-card:hover { transform: translateY(-3px); }

        /* Inputs Limpios */
        .input-profile {
            width: 100%; background: #ffffff; border: 1px solid #CBD5E1; color: #1E293B;
            padding: 0.75rem 1rem; border-radius: 0.75rem; outline: none; transition: 0.2s;
            font-size: 0.9rem;
        }
        .input-profile:focus { border-color: #0050FF; box-shadow: 0 0 0 3px rgba(0, 80, 255, 0.1); }
        .input-profile:disabled { opacity: 0.7; cursor: not-allowed; background: #F1F5F9; color: #64748B; }

        /* Pestañas de Navegación */
        .settings-tab {
            padding: 1rem; color: #64748B; font-weight: 600; text-align: left;
            border-radius: 0.75rem; transition: all 0.2s; display: flex; align-items: center; gap: 0.75rem;
        }
        .settings-tab:hover { background: #F1F5F9; color: #0050FF; }
        .settings-tab.active { background: #EFF6FF; color: #0050FF; border-left: 4px solid #0050FF; border-radius: 0 0.75rem 0.75rem 0; }

        /* Toggle Switch */
        .toggle-switch {
            width: 44px; height: 24px; background: #CBD5E1; border-radius: 99px;
            position: relative; cursor: pointer; transition: 0.3s;
        }
        .toggle-switch::after {
            content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px;
            background: white; border-radius: 50%; transition: 0.3s; box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .toggle-checkbox:checked + .toggle-switch { background: #0050FF; }
        .toggle-checkbox:checked + .toggle-switch::after { transform: translateX(20px); }

        /* Animaciones */
        .fade-in { animation: fadeIn 0.4s ease-out forwards; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
    </style>
@endpush

@section('client_content')

    {{-- HEADER FLOTANTE --}}
    <header class="h-20 flex items-center justify-between px-6 border-b border-gray-200 bg-white/90 backdrop-blur-md sticky top-0 z-50">
        <div class="flex items-center gap-4">
            {{-- Enlace de regreso a la Carta (Laravel Route) --}}
            <a href="{{ route('client.menu') }}" class="p-2 bg-gray-50 hover:bg-gray-100 rounded-xl transition-colors border border-gray-200 group text-gray-500 hover:text-brand-blue">
                <i data-lucide="arrow-left" class="w-5 h-5"></i>
            </a>
            <h1 class="text-lg font-bold text-gray-800 tracking-tight">Configuración & Perfil</h1>
        </div>
        <div class="flex items-center gap-4">
            <div class="hidden sm:flex flex-col items-end mr-1">
                <span class="text-[10px] uppercase font-bold text-gray-400">ID Socio</span>
                <span class="text-xs font-mono font-bold text-brand-blue">#VIP-8821</span>
            </div>
            
            {{-- Formulario Logout Real de Laravel (Oculto pero funcional) --}}
            <form id="logout-form" action="{{ route('logout') }}" method="POST" class="hidden">
                @csrf
            </form>
            <button onclick="logout()" class="p-2.5 text-gray-400 hover:text-brand-red hover:bg-red-50 rounded-xl transition-colors tooltip" title="Cerrar Sesión">
                <i data-lucide="log-out" class="w-5 h-5"></i>
            </button>
        </div>
    </header>

    {{-- CONTENIDO PRINCIPAL --}}
    <main class="flex-1 max-w-6xl mx-auto w-full p-4 lg:p-8 grid grid-cols-1 lg:grid-cols-3 gap-8">

        {{-- COLUMNA IZQUIERDA (Tarjeta VIP) --}}
        <div class="lg:col-span-1 space-y-6 fade-in">
            
            <div class="member-card h-56 p-6 flex flex-col justify-between relative z-0">
                <div class="relative z-10 flex justify-between items-start">
                    <div class="w-10 h-10 bg-white/20 backdrop-blur rounded-lg flex items-center justify-center">
                        <span class="font-bold text-white text-xs">CLUB</span>
                    </div>
                    <span class="px-3 py-1 bg-white/20 backdrop-blur border border-white/30 rounded-full text-[10px] font-bold text-white uppercase tracking-widest">
                        {{ $usuario['nivel'] }}
                    </span>
                </div>
                
                <div class="relative z-10">
                    <p class="text-blue-100 text-xs uppercase tracking-wider mb-1">Miembro desde 2024</p>
                    <h2 class="text-2xl font-black text-white tracking-widest font-mono uppercase">{{ $usuario['nombre'] }}</h2>
                    
                    <div class="mt-4 flex justify-between items-end">
                        <div>
                            <p class="text-[10px] text-blue-200 uppercase font-bold">Puntos Acumulados</p>
                            <p class="text-xl font-mono font-bold text-white">1,250 PTS</p>
                        </div>
                        <div class="w-12 h-12 bg-white rounded p-1 shadow-lg">
                            <img src="https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=PITER-VIP-8821" class="w-full h-full object-contain">
                        </div>
                    </div>
                </div>
            </div>

            <div class="glass-panel p-5 rounded-2xl bg-white">
                <div class="flex justify-between items-end mb-2">
                    <div>
                        <h3 class="text-sm font-bold text-gray-800">Nivel Actual: {{ $usuario['nivel'] }}</h3>
                        <p class="text-xs text-gray-500">Te faltan 750 pts para Platinum</p>
                    </div>
                    <div class="p-1.5 bg-yellow-100 rounded-full text-yellow-600">
                        <i data-lucide="crown" class="w-4 h-4"></i>
                    </div>
                </div>
                <div class="w-full bg-gray-100 h-2.5 rounded-full overflow-hidden">
                    <div class="bg-brand-blue h-full rounded-full transition-all duration-1000" style="width: 65%"></div>
                </div>
                <div class="mt-2 flex justify-between text-[10px] text-gray-400 font-bold uppercase">
                    <span>Gold</span>
                    <span>Platinum</span>
                </div>
            </div>

            <div class="glass-panel p-6 rounded-2xl flex flex-col items-center text-center bg-white">
                <div class="relative group cursor-pointer mb-4">
                    <div class="w-24 h-24 rounded-full p-1 bg-gradient-to-tr from-brand-blue to-blue-300">
                        <img id="avatarPreview" src="{{ $usuario['avatar'] }}" class="w-full h-full rounded-full object-cover border-4 border-white shadow-md">
                    </div>
                    <div class="absolute inset-0 bg-brand-blue/60 rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
                        <i data-lucide="camera" class="w-6 h-6 text-white"></i>
                    </div>
                    <input type="file" class="absolute inset-0 opacity-0 cursor-pointer" onchange="previewImage(this)">
                </div>
                <h3 class="text-lg font-bold text-gray-800">{{ $usuario['nombre'] }}</h3>
                <p class="text-sm text-gray-500">cliente@piter.com</p>
            </div>

        </div>

        {{-- COLUMNA DERECHA (Panel Config) --}}
        <div class="lg:col-span-2 glass-panel rounded-3xl overflow-hidden flex flex-col md:flex-row h-full fade-in" style="animation-delay: 0.1s;">
            
            {{-- Sidebar Tabs --}}
            <div class="w-full md:w-64 bg-gray-50 border-r border-gray-200 p-4 flex flex-col gap-2">
                <button onclick="switchTab('personal')" class="settings-tab active" id="btn-personal">
                    <i data-lucide="user" class="w-5 h-5"></i> Datos Personales
                </button>
                <button onclick="switchTab('security')" class="settings-tab" id="btn-security">
                    <i data-lucide="shield-check" class="w-5 h-5"></i> Seguridad
                </button>
                <button onclick="switchTab('prefs')" class="settings-tab" id="btn-prefs">
                    <i data-lucide="bell-ring" class="w-5 h-5"></i> Notificaciones
                </button>
                <button onclick="switchTab('billing')" class="settings-tab" id="btn-billing">
                    <i data-lucide="credit-card" class="w-5 h-5"></i> Métodos de Pago
                </button>
                
                <div class="mt-auto pt-6 border-t border-gray-200">
                    <p class="text-[10px] text-gray-400 uppercase font-bold px-2 mb-1">Soporte</p>
                    <button class="settings-tab text-brand-red hover:text-red-600 hover:bg-red-50 w-full">
                        <i data-lucide="help-circle" class="w-5 h-5"></i> Ayuda
                    </button>
                </div>
            </div>

            {{-- Contenido Tabs --}}
            <div class="flex-1 p-6 md:p-10 bg-white relative overflow-y-auto">
                
                {{-- TAB: PERSONAL --}}
                <div id="tab-personal" class="space-y-6 fade-in">
                    <div class="mb-6 border-b border-gray-100 pb-4">
                        <h2 class="text-2xl font-bold text-gray-800">Información Personal</h2>
                        <p class="text-sm text-gray-500">Actualiza tus datos para recibir mejores promociones.</p>
                    </div>

                    <form class="space-y-5" onsubmit="event.preventDefault(); saveSettings();">
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                            <div>
                                <label class="block text-xs font-bold text-gray-500 uppercase mb-2">Nombre</label>
                                <div class="relative">
                                    <i data-lucide="user" class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400"></i>
                                    <input type="text" value="{{ $usuario['nombre'] }}" class="input-profile pl-10">
                                </div>
                            </div>
                            <div>
                                <label class="block text-xs font-bold text-gray-500 uppercase mb-2">Apellido</label>
                                <div class="relative">
                                    <i data-lucide="user" class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400"></i>
                                    <input type="text" value="Villanueva" class="input-profile pl-10">
                                </div>
                            </div>
                        </div>

                        <div>
                            <label class="block text-xs font-bold text-gray-500 uppercase mb-2">Correo Electrónico</label>
                            <div class="relative">
                                <i data-lucide="mail" class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400"></i>
                                <input type="email" value="cristian.dev@gmail.com" class="input-profile pl-10" disabled title="Contacta soporte para cambiar el email">
                                <i data-lucide="lock" class="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400"></i>
                            </div>
                        </div>

                        <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                            <div>
                                <label class="block text-xs font-bold text-gray-500 uppercase mb-2">Celular</label>
                                <div class="relative">
                                    <i data-lucide="smartphone" class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400"></i>
                                    <input type="tel" value="+51 987 654 321" class="input-profile pl-10">
                                </div>
                            </div>
                            <div>
                                <label class="block text-xs font-bold text-gray-500 uppercase mb-2">Fecha Nacimiento</label>
                                <div class="relative">
                                    <i data-lucide="calendar" class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400"></i>
                                    <input type="date" value="1998-05-15" class="input-profile pl-10 text-gray-600">
                                </div>
                            </div>
                        </div>

                        <div class="pt-6 flex justify-end">
                            <button class="px-6 py-3 bg-brand-blue hover:bg-blue-700 text-white font-bold rounded-xl shadow-lg shadow-blue-500/20 transition-all active:scale-95 flex items-center gap-2">
                                <i data-lucide="save" class="w-4 h-4"></i> Guardar Cambios
                            </button>
                        </div>
                    </form>
                </div>

                {{-- TAB: SEGURIDAD --}}
                <div id="tab-security" class="space-y-6 hidden fade-in">
                    <div class="mb-6 border-b border-gray-100 pb-4">
                        <h2 class="text-2xl font-bold text-gray-800">Seguridad de la Cuenta</h2>
                        <p class="text-sm text-gray-500">Gestiona tu contraseña y sesiones activas.</p>
                    </div>

                    <div class="space-y-6">
                        <div class="p-5 bg-gray-50 border border-gray-200 rounded-xl">
                            <h3 class="text-sm font-bold text-gray-800 mb-4">Cambiar Contraseña</h3>
                            <div class="space-y-3">
                                <input type="password" placeholder="Contraseña Actual" class="input-profile bg-white">
                                <input type="password" placeholder="Nueva Contraseña" class="input-profile bg-white">
                                <input type="password" placeholder="Confirmar Nueva Contraseña" class="input-profile bg-white">
                            </div>
                            <div class="mt-4 text-right">
                                <button class="text-xs font-bold text-brand-blue hover:text-blue-700 uppercase tracking-wide">Actualizar Password</button>
                            </div>
                        </div>

                        <div class="p-4 bg-white border border-gray-200 rounded-xl flex justify-between items-center shadow-sm">
                            <div>
                                <h3 class="text-sm font-bold text-gray-800 flex items-center gap-2">
                                    <i data-lucide="smartphone" class="w-4 h-4 text-gray-400"></i> Dispositivo Actual
                                </h3>
                                <p class="text-xs text-gray-500">Lima, PE • Activo ahora</p>
                            </div>
                            <span class="text-[10px] text-green-600 font-bold bg-green-100 px-2 py-1 rounded border border-green-200">ESTE DISPOSITIVO</span>
                        </div>
                    </div>
                </div>

                {{-- TAB: NOTIFICACIONES --}}
                <div id="tab-prefs" class="space-y-6 hidden fade-in">
                    <div class="mb-6 border-b border-gray-100 pb-4">
                        <h2 class="text-2xl font-bold text-gray-800">Preferencias</h2>
                        <p class="text-sm text-gray-500">Elige qué comunicaciones deseas recibir.</p>
                    </div>

                    <div class="space-y-4">
                        <div class="flex items-center justify-between p-4 bg-gray-50 rounded-xl border border-gray-200">
                            <div class="flex items-center gap-3">
                                <div class="p-2 bg-white border border-gray-200 rounded-lg text-green-600 shadow-sm"><i data-lucide="message-circle" class="w-5 h-5"></i></div>
                                <div>
                                    <h4 class="font-bold text-gray-800 text-sm">Promociones por WhatsApp</h4>
                                    <p class="text-xs text-gray-500">Recibe códigos QR y ofertas flash.</p>
                                </div>
                            </div>
                            <label>
                                <input type="checkbox" class="toggle-checkbox hidden" checked>
                                <div class="toggle-switch"></div>
                            </label>
                        </div>

                        <div class="flex items-center justify-between p-4 bg-gray-50 rounded-xl border border-gray-200">
                            <div class="flex items-center gap-3">
                                <div class="p-2 bg-white border border-gray-200 rounded-lg text-brand-blue shadow-sm"><i data-lucide="mail" class="w-5 h-5"></i></div>
                                <div>
                                    <h4 class="font-bold text-gray-800 text-sm">Resumen Semanal (Email)</h4>
                                    <p class="text-xs text-gray-500">Agenda de eventos y lanzamientos.</p>
                                </div>
                            </div>
                            <label>
                                <input type="checkbox" class="toggle-checkbox hidden">
                                <div class="toggle-switch"></div>
                            </label>
                        </div>
                    </div>
                </div>

                {{-- TAB: FACTURACIÓN --}}
                <div id="tab-billing" class="space-y-6 hidden fade-in">
                    <div class="mb-6 border-b border-gray-100 pb-4">
                        <h2 class="text-2xl font-bold text-gray-800">Billetera</h2>
                        <p class="text-sm text-gray-500">Gestiona tus tarjetas para pagos rápidos.</p>
                    </div>
                    
                    <div class="p-8 border-2 border-dashed border-gray-300 rounded-xl flex flex-col items-center justify-center text-center hover:bg-gray-50 transition-colors cursor-pointer group">
                        <div class="w-12 h-12 bg-white border border-gray-200 rounded-full flex items-center justify-center mb-3 group-hover:scale-110 transition-transform shadow-sm">
                            <i data-lucide="plus" class="w-6 h-6 text-brand-blue"></i>
                        </div>
                        <p class="text-sm font-bold text-gray-700">Agregar Nueva Tarjeta</p>
                        <p class="text-xs text-gray-400">Visa, Mastercard, Amex</p>
                    </div>
                </div>

            </div>
        </div>

    </main>

    {{-- TOAST NOTIFICATION --}}
    <div id="toast" class="fixed bottom-10 right-10 transform translate-y-20 opacity-0 transition-all duration-300 z-50">
        <div class="bg-white border-l-4 border-brand-blue text-gray-800 px-6 py-4 rounded-lg shadow-xl flex items-center gap-3">
            <div class="bg-blue-50 p-1 rounded-full">
                <i data-lucide="check" class="w-4 h-4 text-brand-blue"></i>
            </div>
            <div>
                <span class="font-bold text-sm block">¡Guardado!</span>
                <span class="text-xs text-gray-500">Tus cambios se han actualizado.</span>
            </div>
        </div>
    </div>

    {{-- SCRIPTS DE FUNCIONALIDAD --}}
    <script>
        lucide.createIcons();

        // Lógica de Pestañas
        function switchTab(tabId) {
            document.querySelectorAll('[id^="tab-"]').forEach(el => {
                el.classList.add('hidden');
                el.classList.remove('fade-in'); 
            });
            
            document.querySelectorAll('.settings-tab').forEach(btn => btn.classList.remove('active'));

            const activeContent = document.getElementById('tab-' + tabId);
            activeContent.classList.remove('hidden');
            void activeContent.offsetWidth; // Trigger reflow
            activeContent.classList.add('fade-in');

            document.getElementById('btn-' + tabId).classList.add('active');
        }

        // Preview de Imagen
        function previewImage(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();
                reader.onload = function(e) {
                    document.getElementById('avatarPreview').src = e.target.result;
                }
                reader.readAsDataURL(input.files[0]);
                showToast();
            }
        }

        function saveSettings() {
            // Aquí iría la lógica AJAX
            showToast();
        }

        function showToast() {
            const toast = document.getElementById('toast');
            toast.classList.remove('translate-y-20', 'opacity-0');
            setTimeout(() => {
                toast.classList.add('translate-y-20', 'opacity-0');
            }, 3000);
        }

        function logout() {
            if(confirm('¿Seguro que deseas cerrar sesión?')) {
                // Envía el formulario de logout de Laravel
                document.getElementById('logout-form').submit();
            }
        }
    </script>
@endsection