@extends('layouts.panel')


@section('title', 'Terminal de Caja - POS')


@push('styles')
   @vite('src/assets/css/operational.css')
@endpush


@section('content')
   <div class="min-h-screen bg-[var(--theme-bg)] pb-12 w-full">
      
       <!-- TABS GLOBALES (Navegación Web) -->
       <div class="w-full max-w-7xl mx-auto mt-8 mb-4 flex justify-end">
           <div class="flex gap-2 bg-white p-1.5 rounded-2xl shadow-sm border border-slate-100">
               <button id="tab-toma_pedidos" onclick="cambiarTab('toma_pedidos')" class="tab-btn text-slate-400 hover:text-slate-600 px-6 py-2.5 rounded-xl text-xs font-black tracking-widest flex items-center gap-2 transition-all">
                   <i data-lucide="utensils" class="w-4 h-4"></i> PEDIDOS
               </button>
               <button id="tab-terminal" onclick="cambiarTab('terminal')" class="tab-btn active px-6 py-2.5 rounded-xl text-xs font-black tracking-widest flex items-center gap-2 transition-all">
                   <i data-lucide="monitor" class="w-4 h-4"></i> TERMINAL
               </button>
               <button id="tab-salidas" onclick="cambiarTab('salidas')" class="tab-btn text-slate-400 hover:text-slate-600 px-6 py-2.5 rounded-xl text-xs font-black tracking-widest flex items-center gap-2 transition-all">
                   <i data-lucide="minus-circle" class="w-4 h-4"></i> SALIDAS
               </button>
               <button id="tab-auditoria" onclick="cambiarTab('auditoria')" class="tab-btn text-slate-400 hover:text-slate-600 px-6 py-2.5 rounded-xl text-xs font-black tracking-widest flex items-center gap-2 transition-all">
                   <i data-lucide="clipboard-check" class="w-4 h-4"></i> AUDITORÍA
               </button>
               <button id="tab-facturacion" onclick="cambiarTab('facturacion')" class="tab-btn text-slate-400 hover:text-slate-600 px-6 py-2.5 rounded-xl text-xs font-black tracking-widest flex items-center gap-2 transition-all">
                   <i data-lucide="receipt" class="w-4 h-4"></i> FACTURACIÓN
               </button>
           </div>
       </div>


       <!-- CONTENEDORES DE VISTAS -->
       @include('operational.partials.toma_pedidos')
       @include('operational.partials.dashboard')
       @include('operational.partials.salidas')
       @include('operational.partials.auditoria')
      
       <!-- VISTA DE FACTURACIÓN -->
       @include('operational.partials.facturacion')


   </div>


   <!-- MODALES CLON APP -->
   @include('operational.partials.modal_apertura')
   @include('operational.partials.modal_cobro')
  
@endsection


@push('scripts')
<script src="https://cdn.socket.io/4.7.2/socket.io.min.js"></script>


<!-- Inyección segura de 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>


<!-- Archivos Nativos (Sin Vite/NPM) -->
<script src="{{ asset('js/cashier/core.js') }}?v={{ time() }}"></script>
<script src="{{ asset('js/cashier/dashboard.js') }}?v={{ time() }}"></script>
<script src="{{ asset('js/cashier/apertura.js') }}?v={{ time() }}"></script>
<script src="{{ asset('js/cashier/cobro.js') }}?v={{ time() }}"></script>
<script src="{{ asset('js/cashier/salidas_auditoria.js') }}?v={{ time() }}"></script>
<script src="{{ asset('js/cashier/facturacion.js') }}?v={{ time() }}"></script>
<script src="{{ asset('js/cashier/toma_pedidos.js') }}?v={{ time() }}"></script>
@endpush