@extends('layouts.panel')


@section('title', 'Mesero - Toma de Pedidos')


@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>
      /* Asegurar que las notificaciones floten por encima de modales (z-index alto) */
      #toast-container {
          z-index: 999999 !important;
          margin-top: 60px; /* Espacio para que no choque con la navbar superior roja */
      }
      #toast-container > .toast {
          opacity: 1 !important;
          border-radius: 12px !important;
          padding: 20px 25px 20px 60px !important;
          font-size: 16px !important;
          font-weight: bold !important;
          box-shadow: 0 10px 30px rgba(0,0,0,0.2) !important;
          background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9'%3E%3C/path%3E%3Cpath d='M13.73 21a2 2 0 0 1-3.46 0'%3E%3C/path%3E%3C/svg%3E") !important;
          background-size: 26px !important;
      }
     
      /* Tipos de Alerta Específicos */
      #toast-container > .toast-atencion {
          background-color: #10B981 !important; /* Verde Esmeralda */
      }
      #toast-container > .toast-reclamo {
          background-color: #EF4444 !important; /* Rojo Fuerte */
      }
      #toast-container > .toast-cuenta {
          background-color: #3B82F6 !important; /* Azul Claro */
      }
      .toast-title {
          font-size: 18px !important;
          font-weight: 900 !important;
          margin-bottom: 5px !important;
      }
  </style>
@endpush


@section('content')
   <div class="min-h-screen bg-[var(--theme-bg)] pb-4 w-full pt-2">
       <!-- VISTA TOMA DE PEDIDOS (Visible por defecto) -->
       @include('waiter.partials.toma_pedidos')
   </div>
@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>


<!-- 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>


<!-- Script de Toma de Pedidos Exclusivo para Mesero -->
<script src="{{ asset('js/waiter/dashboard.js') }}?v={{ time() }}"></script>


<script>
   document.addEventListener('DOMContentLoaded', () => {
       // Inicializar iconos
       if(window.lucide) lucide.createIcons();


       // Quitar la clase hidden del contenedor principal de toma_pedidos
       const tomaPedidosView = document.getElementById('view-toma_pedidos');
       if (tomaPedidosView) {
           tomaPedidosView.classList.remove('hidden');
       }


       // Inicializar lógica de Toma de Pedidos
       if (typeof TomaPedidos !== 'undefined') {
           TomaPedidos.init();
       }
   });
</script>
@endpush