@extends('layouts.panel')

@section('title', 'Marketing & Combos')

@section('content')

    {{-- Header --}}
    <div class="flex justify-between items-center mb-8 shrink-0 fade-in">
        <div>
            <h1 class="text-2xl font-black text-[#0f172a] uppercase tracking-tight">MARKETING & COMBOS</h1>
            <p class="text-sm text-slate-500 mt-1">Gestiona promociones, cupones y ofertas especiales.</p>
        </div>
        <div class="flex items-center gap-3 bg-white p-1.5 rounded-xl border border-slate-200 shadow-sm">
            <span class="text-xs font-bold text-slate-400 uppercase pl-3">Sucursal:</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>Principal (Miraflores)</option>
                <option>Sede Norte</option>
            </select>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 mb-10 fade-in" style="animation-delay: 100ms;">
        
        {{-- COLUMNA IZQUIERDA: Cupones --}}
        <div class="lg:col-span-8">
            <div class="panel-card p-0 overflow-hidden flex flex-col h-full">
                <div class="p-6 border-b border-slate-100 flex justify-between items-center">
                    <h3 class="text-lg font-bold text-[#0f172a] flex items-center gap-2">
                        <i data-lucide="ticket" class="w-5 h-5 text-[#194B95]"></i> Cupones de Descuento
                    </h3>
                    <span class="text-xs font-bold text-slate-400 bg-slate-50 px-3 py-1 rounded-full">2 Activos</span>
                </div>
                
                <div class="overflow-x-auto">
                    <table class="w-full text-left text-sm">
                        <thead class="bg-slate-50 text-slate-500 font-bold text-[10px] uppercase tracking-wider border-b border-slate-100">
                            <tr>
                                <th class="px-6 py-4">Código</th>
                                <th class="px-6 py-4 text-center">Desc %</th>
                                <th class="px-6 py-4">Público</th>
                                <th class="px-6 py-4">Expiración</th>
                                <th class="px-6 py-4 text-right">Estado / Acción</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-100 text-slate-600 font-medium">
                            {{-- Fila 1 --}}
                            <tr class="hover:bg-slate-50 transition-colors">
                                <td class="px-6 py-4 font-mono font-bold text-[#194B95]">COD20</td>
                                <td class="px-6 py-4 text-center font-bold text-emerald-600">-20%</td>
                                <td class="px-6 py-4"><span class="bg-slate-100 text-slate-600 px-2 py-1 rounded text-xs border border-slate-200">Todos</span></td>
                                <td class="px-6 py-4"><span class="badge-expired">Vencido</span></td>
                                <td class="px-6 py-4 text-right flex justify-end items-center gap-3">
                                    <div class="flex items-center">
                                        <input type="checkbox" id="toggle1" class="toggle-checkbox" />
                                        <label for="toggle1" class="toggle-label"></label>
                                    </div>
                                    <button class="text-slate-400 hover:text-[#194B95]"><i data-lucide="pencil" class="w-4 h-4"></i></button>
                                    <button class="text-slate-400 hover:text-[#E21C21]"><i data-lucide="trash-2" class="w-4 h-4"></i></button>
                                </td>
                            </tr>
                            {{-- Fila 2 --}}
                            <tr class="hover:bg-slate-50 transition-colors">
                                <td class="px-6 py-4 font-mono font-bold text-[#194B95]">VIP50</td>
                                <td class="px-6 py-4 text-center font-bold text-emerald-600">-50%</td>
                                <td class="px-6 py-4"><span class="bg-amber-50 text-amber-600 px-2 py-1 rounded text-xs border border-amber-200">Clientes VIP</span></td>
                                <td class="px-6 py-4"><span class="badge-active">Activo (3 días)</span></td>
                                <td class="px-6 py-4 text-right flex justify-end items-center gap-3">
                                    <div class="flex items-center">
                                        <input type="checkbox" id="toggle2" class="toggle-checkbox" checked />
                                        <label for="toggle2" class="toggle-label"></label>
                                    </div>
                                    <button class="text-slate-400 hover:text-[#194B95]"><i data-lucide="pencil" class="w-4 h-4"></i></button>
                                    <button class="text-slate-400 hover:text-[#E21C21]"><i data-lucide="trash-2" class="w-4 h-4"></i></button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        {{-- COLUMNA DERECHA: Formulario Nuevo Cupón --}}
        <div class="lg:col-span-4">
            <div class="panel-card bg-white border border-blue-100 shadow-lg shadow-blue-50/50">
                <h3 class="text-base font-bold text-[#194B95] mb-5 border-b border-blue-50 pb-3">Nuevo Cupón</h3>
                
                <div class="space-y-4">
                    <div class="grid grid-cols-3 gap-3">
                        <div class="col-span-2">
                            <label class="text-[10px] font-bold text-slate-400 uppercase mb-1 block">Código</label>
                            <input type="text" class="input-pro uppercase font-bold text-[#194B95]" placeholder="Ej: VERANO2026">
                        </div>
                        <div>
                            <label class="text-[10px] font-bold text-slate-400 uppercase mb-1 block">% Desc</label>
                            <input type="number" class="input-pro text-center" placeholder="0%">
                        </div>
                    </div>

                    <div class="grid grid-cols-2 gap-3">
                        <div>
                            <label class="text-[10px] font-bold text-slate-400 uppercase mb-1 block">Inicio</label>
                            <input type="date" class="input-pro text-xs">
                        </div>
                        <div>
                            <label class="text-[10px] font-bold text-slate-400 uppercase mb-1 block">Fin</label>
                            <input type="date" class="input-pro text-xs">
                        </div>
                    </div>

                    <div>
                        <label class="text-[10px] font-bold text-slate-400 uppercase mb-1 block">Público Objetivo</label>
                        <select class="input-pro cursor-pointer">
                            <option>Todos los Clientes</option>
                            <option>Solo VIPs</option>
                            <option>Primera Compra</option>
                        </select>
                    </div>

                    <div class="pt-2 flex gap-2">
                        <button class="flex-1 bg-[#194B95] hover:bg-[#123670] text-white py-3 rounded-xl text-sm font-bold shadow-md shadow-blue-100 transition-all flex justify-center items-center gap-2 active:scale-95">
                            Guardar Cupón
                        </button>
                        <button class="px-3 py-3 bg-white border border-slate-200 rounded-xl text-slate-400 hover:text-[#E21C21] hover:border-red-100 transition-colors">
                            <i data-lucide="x" class="w-5 h-5"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 fade-in" style="animation-delay: 200ms;">
        
        {{-- COLUMNA IZQUIERDA: Combos --}}
        <div class="lg:col-span-8">
            <div class="flex items-center gap-2 mb-4">
                <i data-lucide="sparkles" class="w-5 h-5 text-fuchsia-500"></i>
                <h3 class="text-lg font-bold text-slate-800">Combos Premium</h3>
            </div>

            <div class="grid grid-cols-1 gap-4">
                {{-- Combo 1 --}}
                <div class="combo-card group">
                    <div class="w-24 h-24 rounded-lg bg-slate-100 overflow-hidden shrink-0 border border-slate-100">
                        <img src="https://images.unsplash.com/photo-1594212699903-ec8a3eca50f5?w=200&h=200&fit=crop" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500">
                    </div>
                    <div class="flex-1 flex flex-col justify-between">
                        <div class="flex justify-between items-start">
                            <div>
                                <h4 class="font-bold text-[#0f172a] text-lg">Combo De la Casa</h4>
                                <p class="text-xs text-slate-500 mt-1">Hamburguesa doble + Gaseosa + Papas</p>
                            </div>
                            <span class="text-lg font-black text-[#194B95]">S/ 35.00</span>
                        </div>
                        <div class="flex justify-between items-center mt-3">
                            <span class="bg-fuchsia-50 text-fuchsia-600 text-[10px] font-bold px-2 py-1 rounded border border-fuchsia-100 flex items-center gap-1">
                                <i data-lucide="layers" class="w-3 h-3"></i> 3 Items
                            </span>
                            <div class="flex gap-2">
                                <button class="p-1.5 text-slate-400 hover:text-[#194B95] bg-slate-50 hover:bg-blue-50 rounded-lg transition-colors"><i data-lucide="pencil" class="w-4 h-4"></i></button>
                                <button class="p-1.5 text-slate-400 hover:text-[#E21C21] bg-slate-50 hover:bg-red-50 rounded-lg transition-colors"><i data-lucide="trash-2" class="w-4 h-4"></i></button>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Combo 2 --}}
                <div class="combo-card group">
                    <div class="w-24 h-24 rounded-lg bg-slate-100 overflow-hidden shrink-0 border border-slate-100">
                        <img src="https://images.unsplash.com/photo-1514362545857-3bc16c4c7d1b?w=200&h=200&fit=crop" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500">
                    </div>
                    <div class="flex-1 flex flex-col justify-between">
                        <div class="flex justify-between items-start">
                            <div>
                                <h4 class="font-bold text-[#0f172a] text-lg">Pack Chilcanero</h4>
                                <p class="text-xs text-slate-500 mt-1">2 Chilcanos Clásicos + Tequeños</p>
                            </div>
                            <span class="text-lg font-black text-[#194B95]">S/ 42.00</span>
                        </div>
                        <div class="flex justify-between items-center mt-3">
                            <span class="bg-fuchsia-50 text-fuchsia-600 text-[10px] font-bold px-2 py-1 rounded border border-fuchsia-100 flex items-center gap-1">
                                <i data-lucide="layers" class="w-3 h-3"></i> 2 Items
                            </span>
                            <div class="flex gap-2">
                                <button class="p-1.5 text-slate-400 hover:text-[#194B95] bg-slate-50 hover:bg-blue-50 rounded-lg transition-colors"><i data-lucide="pencil" class="w-4 h-4"></i></button>
                                <button class="p-1.5 text-slate-400 hover:text-[#E21C21] bg-slate-50 hover:bg-red-50 rounded-lg transition-colors"><i data-lucide="trash-2" class="w-4 h-4"></i></button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- COLUMNA DERECHA: Formulario Nuevo Combo --}}
        <div class="lg:col-span-4">
            <div class="panel-card bg-slate-50 border-dashed border-2 border-slate-300">
                <h3 class="text-base font-bold text-slate-700 mb-5">Nuevo Combo</h3>
                
                <div class="space-y-4">
                    <div>
                        <label class="text-[10px] font-bold text-slate-400 uppercase mb-1 block">Nombre del Combo</label>
                        <input type="text" class="input-pro" placeholder="Ej: Pizza Party">
                    </div>
                    
                    <div class="grid grid-cols-2 gap-3">
                        <div>
                            <label class="text-[10px] font-bold text-slate-400 uppercase mb-1 block">Precio (S/)</label>
                            <input type="number" class="input-pro font-bold text-[#194B95]" placeholder="0.00">
                        </div>
                        <div>
                            <label class="text-[10px] font-bold text-slate-400 uppercase mb-1 block">Categoría</label>
                            <select class="input-pro cursor-pointer"><option>Comida</option><option>Bebida</option></select>
                        </div>
                    </div>

                    <div class="bg-white p-3 rounded-xl border border-slate-200">
                        <p class="text-[10px] font-bold text-slate-400 uppercase mb-2">Items Incluidos</p>
                        <div class="flex gap-2 mb-2">
                            <input type="text" class="input-pro py-1.5 text-xs" placeholder="Buscar producto...">
                            <button class="bg-slate-200 text-slate-600 px-3 rounded-lg hover:bg-slate-300"><i data-lucide="plus" class="w-4 h-4"></i></button>
                        </div>
                        <div class="space-y-1">
                            <div class="flex justify-between items-center text-xs bg-slate-50 p-2 rounded border border-slate-100">
                                <span class="text-slate-700">1x Hamburguesa</span>
                                <i data-lucide="x" class="w-3 h-3 text-slate-400 cursor-pointer hover:text-red-500"></i>
                            </div>
                        </div>
                    </div>

                    <button class="w-full bg-white border border-[#194B95] text-[#194B95] py-3 rounded-xl text-sm font-bold hover:bg-blue-50 transition-all flex justify-center items-center gap-2">
                        <i data-lucide="plus" class="w-4 h-4"></i> Crear Combo
                    </button>
                </div>
            </div>
        </div>
    </div>

@endsection