@extends('index')
@section('contenido')
    <div class="container-fluid">
        @if (session('good'))
            <div class="alert alert-success alert-dissmissible fade show" role="alert" style="margin-top: -10pt; margin-bottom: 18pt">
                <font style="font-size: 10pt">
                    {{ session('good') }}
                </font>
                <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span
                        aria-hidden="true">&times;</span>
                </button>
            </div>
        @endif
        @if (session('error'))
            <div class="alert alert-danger alert-dissmissible fade show" role="alert" style="margin-top: -10pt; margin-bottom: 18pt">
                <font style="font-size: 10pt">
                    {{ session('error') }}
                </font>
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
        @endif
        <div class="row" style="margin-top: -10pt">
            <div class="col-xl-3 col-lg-3 col-md-3 col-sm-4 col-12">
                <div class="card card-primary card-tabs">
                    <div class="card-header p-0">
                        <ul class="nav nav-tabs" id="custom-tabs-one-tab" role="tablist">
                                                        @foreach($zonas as $item)
                                <li class="nav-item" onclick="Piso_Click('{{ $item['ZM_Descripcion'] }}', '{{ $item['ZM_Codigo'] }}')">
                                    <a class="nav-link @if($primeraVez) active @endif btn-sm" id="custom-tabs-one-home-tab" data-toggle="pill"
                                        href="#custom-tabs-one-home" role="tab" aria-controls="custom-tabs-one-home"
                                        aria-selected="true">{{ $item['ZM_Descripcion'] }}</a>
                                </li>
                                                            @endforeach
                        </ul>
                    </div>
                    <div class="card-body">
                        <div class="tab-content" id="custom-tabs-one-tabContent">
                                                        @foreach($zonas as $item)
                                <div class="tab-pane fade @if($primeraVez2) active show @endif" id="{{ $item['ZM_Codigo'] }}" role="tabpanel"
                                    aria-labelledby="custom-tabs-one-home-tab">
                                </div>
                                                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-9 col-lg-9 col-md-9 col-sm-8 col-12" id="pnlAtencion">
                {{-- CONTENIDO --}}
                <div class="card card-primary">
                    <div class="card-body">
                        <div class="row pt-5">
                            <div class="col-md-12"></div>
                            <div class="col-md-12">
                                <span style="font-family: Arial, Helvetica, sans-serif; font-size: 11pt">
                                    ← Selecciona una Mesa
                                </span>
                            </div>
                            <div class="col-md-12 pt-5"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="universal-toast" style="
    position: fixed; 
    bottom: -70px; 
    left: 50%; 
    transform: translateX(-50%); 
    background: linear-gradient(135deg, #1d1f42, #2c2f5b);
    color: white; 
    padding: 14px 28px; 
    border-radius: 30px; 
    font-size: 14px; 
    font-weight: 600; 
    box-shadow: 0 12px 35px rgba(0,0,0,0.5); 
    z-index: 999999 !important; 
    transition: bottom 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.2s ease; 
    opacity: 0; 
    pointer-events: none;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 8px;
"></div>
    @include('Reservas.modalBuscarReservas')
    @include('Pedidos.modalComentario')
    @include('Pedidos.modalBuscarBebidas')
    @include('Pedidos.modalCambiarPrecio') 
    @include('Pedidos.modalCambiarMesa') 
    @include('Pedidos.modalCombinarMesas') 
    @include('Pedidos.modalSoloCategorias')
    @include('Pedidos.modalPlatosCategorias')
    @include('Pedidos.modalTipoBebida') 
    @include('Pedidos.modalZonasImpresion') 
    @include('partials.modalFacturacion')
@endsection
@section('scripts')  

    <script>
        var PER_Codigo = '{{ $user['codigo'] }}'
        var meserito = '{{ $user['nombres'].' '.$user['apellidos'] }}'        
        var esAdmin = '{{ $user['esAdmin'] }}'
        var sucursal = '{{ $sucursal }}'
        var zonitas=null;
        
        var VerDatos = '{{ $VerDatos }}'
        var TipoBuscador = '{{ $TipoBuscador }}'
        var zona1_Cod = '{{ $zona1_Cod }}';
        var zona1_Des = '{{ $zona1_Des }}';
        var defecto_color = '{{ $user['PER_DefectoColor'] }}';
        var color_mesa = '{{ $user['PER_Color'] }}';
        
    </script>  
    <script src="/files/newJS/pedido.js?v={{ date('d-m-Y h:i:s') }}"></script>
    <script src="/files/newJS/busquedaProductos.js?v={{ date('d-m-Y h:i:s') }}"></script>
    <script src="/files/newJS/buscarReservas.js?v={{ date('d-m-Y h:i:s') }}"></script>    
    <script src="/files/newJS/SocketCliente.js?v={{ date('d-m-Y h:i:s') }}"></script>    
    <script src="/files/newJS/dtBusquedaBebidas.js?v={{ date('d-m-Y h:i:s') }}"></script>
    <script src="/files/newJS/verificarEstados.js?v={{ date('d-m-Y h:i:s') }}"></script>
    
@endsection