@extends('layouts.panel')

@section('title', 'Configuración General - Piter Professional')

@section('content')

{{-- ESTILOS DIRECTOS (Para asegurar que se carguen sin depender del stack) --}}
<style>
    /* Animación */
    .fade-in { animation: fadeIn 0.5s ease-out forwards; opacity: 0; transform: translateY(10px); }
    @keyframes fadeIn { to { opacity: 1; transform: translateY(0); } }

    /* Tarjetas */
    .config-card {
        background: white;
        border: 1px solid #e2e8f0;
        border-radius: 1rem;
        padding: 1.5rem;
        box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
        width: 100%; /* Asegurar ancho completo dentro de la grilla */
        display: block;
    }

    /* Inputs */
    .input-label {
        display: block;
        font-size: 0.75rem;
        font-weight: 800;
        text-transform: uppercase;
        color: #64748b;
        margin-bottom: 0.5rem;
    }
    .input-field {
        width: 100%;
        background-color: #f8fafc;
        border: 1px solid #e2e8f0;
        border-radius: 0.75rem;
        padding: 0.75rem 1rem;
        font-size: 0.875rem;
        font-weight: 600;
        color: #0f172a;
        outline: none;
    }
    .input-field:focus {
        background-color: white;
        border-color: #194B95;
        box-shadow: 0 0 0 3px rgba(25, 75, 149, 0.1);
    }

    /* Uploader */
    .logo-uploader {
        position: relative;
        width: 160px;
        height: 160px;
        border-radius: 50%;
        overflow: hidden;
        border: 4px solid white;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        margin: 0 auto;
        cursor: pointer;
    }
    .btn-camera {
        position: absolute; bottom: 10px; right: 10px;
        background: #194B95; color: white;
        width: 36px; height: 36px;
        border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        border: 2px solid white;
    }

    /* Color Picker */
    .color-wrapper {
        display: flex; align-items: center; gap: 0.75rem;
        background: #f8fafc; border: 1px solid #e2e8f0;
        padding: 0.5rem; border-radius: 0.75rem;
    }
    input[type="color"] {
        -webkit-appearance: none; border: none; width: 40px; height: 40px;
        border-radius: 0.5rem; cursor: pointer; padding: 0;
    }
    input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
    input[type="color"]::-webkit-color-swatch { border: none; }

    /* Hero Images */
    .hero-thumb {
        position: relative;
        height: 140px;
        border-radius: 0.75rem;
        overflow: hidden;
        cursor: pointer;
    }
    .hero-overlay {
        background: rgba(0,0,0,0.4);
        opacity: 0;
        transition: opacity 0.2s;
    }
    .hero-thumb:hover .hero-overlay { opacity: 1; }
</style>

    {{-- HEADER SUPERIOR --}}
    <div class="flex flex-col md:flex-row justify-between items-end mb-8 shrink-0 border-b border-slate-200 pb-6 fade-in">
        <div>
            <p class="text-xs font-bold text-slate-400 uppercase tracking-widest mb-1">Sistema de Gestión</p>
            <h1 class="text-2xl font-black text-[#0f172a] uppercase tracking-tight">PANEL DE ADMINISTRACIÓN</h1>
        </div>
        
        <div class="flex items-center gap-4 bg-white p-1.5 rounded-xl border border-slate-200 shadow-sm">
            <span class="text-[10px] font-bold text-slate-400 uppercase pl-3">Sucursal Activa:</span>
            <select class="bg-slate-50 border border-slate-200 text-xs font-bold px-3 py-2 rounded-lg outline-none cursor-pointer hover:border-slate-300 text-[#194B95]">
                <option>Sede Principal (Miraflores)</option>
                <option>Sede Norte</option>
                <option>Sede Sur</option>
            </select>
        </div>
    </div>

    {{-- BARRA DE ACCIONES --}}
    <div class="flex flex-col md:flex-row justify-between items-center mb-8 gap-4 fade-in" style="animation-delay: 100ms;">
        <div class="flex items-center gap-4 w-full md:w-auto">
            <div class="w-12 h-12 bg-red-50 rounded-xl flex items-center justify-center border border-red-100 text-[#E21C21]">
                <i data-lucide="sliders-horizontal" class="w-6 h-6"></i>
            </div>
            <div>
                <h2 class="text-2xl font-black text-[#0f172a] leading-none">Configuración del Sitio</h2>
                <p class="text-sm text-slate-500 mt-1 font-medium">Personaliza la apariencia y datos de tu restaurante.</p>
            </div>
        </div>
        
        <div class="flex gap-3 w-full md:w-auto">
            <button class="flex-1 md:flex-none px-6 py-3 bg-white border border-slate-200 text-slate-600 rounded-xl font-bold text-sm hover:bg-slate-50 transition-colors shadow-sm">
                Cancelar
            </button>
            <button class="flex-1 md:flex-none px-8 py-3 bg-[#0f172a] hover:bg-black text-white rounded-xl font-bold text-sm shadow-lg shadow-slate-900/20 flex items-center justify-center gap-2 transition-transform active:scale-95">
                <i data-lucide="save" class="w-4 h-4"></i> Guardar Cambios
            </button>
        </div>
    </div>

    {{-- GRILLA DE CONTENIDO --}}
    <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 fade-in" style="animation-delay: 200ms;">
        
        {{-- COLUMNA IZQUIERDA (4 columnas) --}}
        <div class="lg:col-span-4 space-y-6">
            <div class="config-card flex flex-col items-center text-center">
                <div class="w-full flex items-center gap-2 mb-6 border-b border-slate-100 pb-4">
                    <i data-lucide="palette" class="w-4 h-4 text-[#194B95]"></i>
                    <h3 class="text-xs font-black text-slate-700 uppercase tracking-widest">Identidad Visual</h3>
                </div>
                
                <div class="mb-8">
                    <label class="input-label mb-3">Logo del Restaurante</label>
                    <div class="logo-uploader group">
                        <img src="https://ui-avatars.com/api/?name=Piter+Club&background=fff&color=194B95&size=200&font-size=0.3" alt="Logo" class="w-full h-full object-cover">
                        <button class="btn-camera">
                            <i data-lucide="camera" class="w-5 h-5"></i>
                        </button>
                    </div>
                    <p class="text-[10px] text-slate-400 mt-3">Recomendado: 500x500px PNG</p>
                </div>

                <div class="w-full space-y-5 text-left">
                    <div>
                        <label class="input-label">Color Principal (Marca)</label>
                        <div class="color-wrapper">
                            <input type="color" value="#E21C21" id="brandColor" oninput="updateHex(this.value)">
                            <input type="text" value="#E21C21" id="hexText" class="bg-transparent font-mono text-sm font-bold text-slate-600 outline-none w-full uppercase" onkeyup="updatePicker(this.value)">
                        </div>
                        <p class="text-[10px] text-slate-400 mt-1.5">Color usado en botones y destacados.</p>
                    </div>

                    <div>
                        <label class="input-label">Favicon (Icono Pestaña)</label>
                        <div class="flex items-center gap-3 p-2 border border-slate-200 rounded-lg bg-slate-50 cursor-pointer hover:border-[#194B95] transition-colors group">
                            <div class="w-8 h-8 bg-white border border-slate-200 rounded flex items-center justify-center">
                                <i data-lucide="image" class="w-4 h-4 text-slate-400"></i>
                            </div>
                            <span class="text-xs font-bold text-slate-500 group-hover:text-[#194B95]">Subir .ICO / .PNG</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- COLUMNA DERECHA (8 columnas) --}}
        <div class="lg:col-span-8 space-y-6">
            
            {{-- Tarjeta 1: Información --}}
            <div class="config-card">
                <div class="w-full flex items-center gap-2 mb-6 border-b border-slate-100 pb-4">
                    <i data-lucide="store" class="w-4 h-4 text-[#194B95]"></i>
                    <h3 class="text-xs font-black text-slate-700 uppercase tracking-widest">Información General</h3>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                    <div>
                        <label class="input-label">Nombre del Restaurante</label>
                        <input type="text" class="input-field" value="Piter Club">
                    </div>
                    <div>
                        <label class="input-label">Slogan / Subtítulo</label>
                        <input type="text" class="input-field" value="La mejor experiencia nocturna">
                    </div>
                    <div>
                        <label class="input-label">País / Moneda</label>
                        <select class="input-field cursor-pointer">
                            <option>🇵🇪 Perú (S/ PEN)</option>
                            <option>🇺🇸 USA ($ USD)</option>
                            <option>🇪🇺 Europa (€ EUR)</option>
                        </select>
                    </div>
                    <div>
                        <label class="input-label">Título Banner Principal</label>
                        <input type="text" class="input-field" value="Sabor que despierta tus sentidos">
                    </div>
                </div>

                <div class="p-4 bg-slate-50 rounded-xl border border-slate-100">
                    <h4 class="text-xs font-bold text-[#194B95] uppercase mb-4 flex items-center gap-2">
                        <i data-lucide="share-2" class="w-3 h-3"></i> Redes & Contacto
                    </h4>
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                        <div>
                            <label class="input-label">WhatsApp (Reservas)</label>
                            <div class="relative">
                                <i data-lucide="phone" class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400"></i>
                                <input type="text" class="input-field pl-9" placeholder="+51 999 000 000">
                            </div>
                        </div>
                        <div>
                            <label class="input-label">Instagram</label>
                            <div class="relative">
                                <i data-lucide="instagram" class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400"></i>
                                <input type="text" class="input-field pl-9" placeholder="@usuario">
                            </div>
                        </div>
                        <div>
                            <label class="input-label">Facebook</label>
                            <div class="relative">
                                <i data-lucide="facebook" class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400"></i>
                                <input type="text" class="input-field pl-9" placeholder="/pagina">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Tarjeta 2: Carrusel --}}
            <div class="config-card">
                <div class="w-full flex items-center justify-between mb-6 border-b border-slate-100 pb-4">
                    <div class="flex items-center gap-2">
                        <i data-lucide="images" class="w-4 h-4 text-[#194B95]"></i>
                        <h3 class="text-xs font-black text-slate-700 uppercase tracking-widest">Carrusel de Portada (Hero)</h3>
                    </div>
                    <span class="text-[10px] text-slate-400 font-bold bg-slate-100 px-2 py-1 rounded">Max 3 imgs</span>
                </div>
                
                <p class="text-xs text-slate-500 mb-4">Haz clic en una imagen para reemplazarla. Formato recomendado: <span class="font-mono text-[#E21C21]">1920x1080px (JPG/WEBP)</span>.</p>

                <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
                    <div class="hero-thumb group">
                        <img src="https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?auto=format&fit=crop&w=800&q=80" class="w-full h-full object-cover">
                        <div class="absolute inset-0 flex items-center justify-center hero-overlay">
                            <button class="bg-white text-slate-800 p-2 rounded-full shadow-lg hover:text-[#194B95]"><i data-lucide="image-plus" class="w-5 h-5"></i></button>
                        </div>
                        <div class="absolute top-2 left-2 bg-black/50 text-white text-[9px] font-bold px-1.5 py-0.5 rounded">#1</div>
                    </div>
                    <div class="hero-thumb group">
                        <img src="https://images.unsplash.com/photo-1552566626-52f8b828add9?auto=format&fit=crop&w=800&q=80" class="w-full h-full object-cover">
                        <div class="absolute inset-0 flex items-center justify-center hero-overlay">
                            <button class="bg-white text-slate-800 p-2 rounded-full shadow-lg hover:text-[#194B95]"><i data-lucide="image-plus" class="w-5 h-5"></i></button>
                        </div>
                        <div class="absolute top-2 left-2 bg-black/50 text-white text-[9px] font-bold px-1.5 py-0.5 rounded">#2</div>
                    </div>
                    <div class="hero-thumb flex flex-col items-center justify-center border-dashed border-2 border-slate-300 bg-slate-50 hover:bg-white transition-colors">
                        <div class="p-3 bg-white rounded-full shadow-sm mb-2">
                            <i data-lucide="plus" class="w-6 h-6 text-slate-400"></i>
                        </div>
                        <span class="text-xs font-bold text-slate-400">Añadir Slide</span>
                    </div>
                </div>
            </div>

        </div>
    </div>

@endsection

@push('scripts')
<script>
    // Inicializar Iconos
    lucide.createIcons();

    // Lógica para sincronizar el selector de color con el texto Hexadecimal
    function updateHex(val) {
        document.getElementById('hexText').value = val.toUpperCase();
    }

    function updatePicker(val) {
        if(/^#[0-9A-F]{6}$/i.test(val)){
            document.getElementById('brandColor').value = val;
        }
    }
</script>
@endpush