@extends('layouts.panel')

@section('title', 'Monitor de Cocina - KDS')

@push('styles')
    @vite('src/assets/css/operational.css')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
    <style>
        .time-box-green { background-color: #dcfce7; color: #166534; }
        .time-box-yellow { background-color: #fef08a; color: #854d0e; }
        .time-box-red { background-color: #fee2e2; color: #991b1b; animation: pulse 2s infinite; }
        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: .5; }
        }
    </style>
@endpush

@section('content')

    {{-- Header --}}
    <header class="flex flex-col lg:flex-row justify-between items-center mb-6 gap-6 shrink-0 pt-6 px-6">
        
        <div class="flex items-center gap-5">
            <div class="bg-white p-3 rounded-xl border border-gray-200 shadow-sm">
                <i data-lucide="chef-hat" class="w-8 h-8 text-[var(--theme-accent)]"></i> 
            </div>
            <div>
                <h1 class="text-3xl font-black text-[var(--theme-accent)] tracking-tight">MONITOR COCINA</h1>
                <div class="flex items-center gap-2 mt-1">
                    <span class="w-2.5 h-2.5 bg-green-500 rounded-full animate-pulse"></span>
                    <p class="text-gray-500 text-xs font-bold uppercase tracking-widest">Conectado en tiempo real</p>
                </div>
            </div>
        </div>

        <div class="flex bg-white p-2 rounded-lg border border-gray-200 w-full max-w-sm justify-center shadow-sm">
            <div class="text-[var(--theme-accent)] font-black text-xl text-center w-full uppercase tracking-wider">
                Monitor en Vivo
            </div>
        </div>

        <div class="flex items-center gap-4">
            <div class="bg-white px-4 py-2 rounded-lg border border-gray-200 flex gap-4 text-[10px] font-bold uppercase tracking-wider text-gray-500 shadow-sm">
                <div class="flex items-center gap-1.5"><span class="w-2 h-2 bg-green-500 rounded-full"></span> A tiempo</div>
                <div class="flex items-center gap-1.5"><span class="w-2 h-2 bg-yellow-400 rounded-full"></span> Cuidado</div>
                <div class="flex items-center gap-1.5"><span class="w-2 h-2 bg-[#E21C21] rounded-full"></span> Retraso</div>
            </div>
        </div>
    </header>

    {{-- Grid de Mesas --}}
    <div class="flex-1 overflow-y-auto px-6 pb-6 relative custom-scrollbar scroll-smooth" id="scroll-container">
        <div id="mesas-grid" class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4 xl:gap-6">
            {{-- Se llena con JS --}}
        </div>
        
        <div id="empty-state" class="hidden absolute inset-0 flex flex-col items-center justify-center text-gray-400 bg-white/50 backdrop-blur-sm rounded-3xl m-6 border border-gray-100 shadow-inner">
            <div class="bg-gray-50 w-24 h-24 rounded-full flex items-center justify-center mb-4 border border-gray-200">
                <i data-lucide="check-circle-2" class="w-10 h-10 text-green-500"></i>
            </div>
            <h3 class="text-gray-600 font-bold text-xl">Todo en Orden</h3>
            <p class="mt-1 text-sm uppercase tracking-wide font-bold">La cocina está al día</p>
        </div>
    </div>

    <!-- Plantilla de Tarjeta de Mesa -->
    <template id="template-mesa">
        <div class="mesa-card bg-white p-4 rounded-3xl border border-slate-200 shadow-sm flex flex-col gap-3 transition-all h-max">
            
            <!-- HEADER -->
            <div class="flex justify-between items-start border-b border-slate-100 pb-3">
                <div class="flex items-center gap-3">
                    <div class="w-12 h-12 rounded-xl bg-slate-50 shadow-sm flex items-center justify-center border border-slate-100">
                        <i data-lucide="utensils" class="w-6 h-6 text-[var(--theme-accent)]"></i>
                    </div>
                    <div>
                        <h3 class="mesa-name text-xl font-black text-slate-800 leading-none">Mesa</h3>
                        <p class="mesa-waiter text-[10px] font-black text-slate-500 uppercase mt-1 bg-slate-100 px-2 py-0.5 rounded-md w-max">Mesero</p>
                    </div>
                </div>
                <button class="btn-imprimir-ticket w-10 h-10 rounded-xl bg-slate-50 border border-slate-200 text-slate-500 hover:text-[var(--theme-accent)] hover:bg-blue-50 transition-colors flex items-center justify-center" title="Imprimir Ticket">
                    <i data-lucide="printer" class="w-5 h-5"></i>
                </button>
            </div>
            
            <!-- BODY (ITEMS) -->
            <div class="mesa-items flex flex-col gap-2">
                <!-- Los ítems se insertan aquí -->
            </div>
            
        </div>
    </template>

    <!-- Plantilla de Ítem individual -->
    <template id="template-item">
        <div class="item-row bg-slate-50 p-4 rounded-xl border-2 border-slate-100 flex items-center justify-between gap-4 group transition-colors">
            
            <div class="flex-1 min-w-0">
                <div class="flex justify-between items-center">
                    <h4 class="item-name font-black text-slate-800 text-3xl leading-tight whitespace-normal break-words">1x Plato</h4>
                    <span class="item-timer font-mono font-black text-xl px-4 py-2 rounded-lg shadow-sm ml-2 shrink-0">00:00</span>
                </div>
                <p class="item-notes text-sm text-[#E21C21] font-bold mt-2 bg-red-50 w-max px-3 py-1 rounded border border-red-100 empty:hidden"></p>
            </div>

            <button class="btn-listo shrink-0 bg-[#27AE60] hover:bg-[#219653] text-white font-black text-lg uppercase px-6 py-4 rounded-xl shadow-md shadow-green-500/30 transition-transform active:scale-95 flex items-center gap-2">
                <i data-lucide="check" class="w-6 h-6"></i> Listo
            </button>

            <!-- Solo visible cuando está servido/listo -->
            <div class="badge-servido hidden shrink-0 bg-slate-200 text-slate-600 font-black text-lg uppercase px-6 py-4 rounded-xl border-2 border-slate-300 flex items-center gap-2">
                <i data-lucide="check-circle" class="w-6 h-6"></i> SERVIDO
            </div>
        </div>
    </template>

@endsection

@push('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
<script src="https://cdn.socket.io/4.7.2/socket.io.min.js"></script>

<!-- Variables Backend -->
<script>
   window.LARAVEL_SUCURSAL_ID = '{{ Auth::guard("admin")->user()->sucursal_asignada_id ?? Auth::user()->sucursal_asignada_id ?? Auth::user()->sucursal_id ?? "" }}';
   window.LARAVEL_USER_ID = '{{ Auth::guard("admin")->id() ?? Auth::id() ?? "" }}';
   window.LARAVEL_USER_NAME = '{{ Auth::guard("admin")->user()->nombre_completo ?? Auth::user()->nombre_completo ?? "" }}';
   window.LARAVEL_TOKEN = '{{ session("api_token") ?? "" }}';
</script>

<!-- Lógica de Cocina -->
<script src="{{ asset('js/operational/kitchen.js') }}?v={{ time() }}"></script>

<script>
    document.addEventListener('DOMContentLoaded', () => {
        if(window.lucide) lucide.createIcons();
    });
</script>
@endpush