<?php
date_default_timezone_set($_SESSION["zona_horaria"]);
setlocale(LC_ALL, "es_ES@euro", "es_ES", "esp");
$fecha = date("Y-m-d");
$hora = date("H:i:s");
$codigo_anular_venta = Session::get('cod_seg');
?>
<input type="hidden" id="url" value="<?php echo URL; ?>" />
<input type="hidden" id="rol_usr" value="<?php echo Session::get('rol'); ?>" />
<input type="hidden" id="fecha" value="<?php echo $fecha; ?>" />
<input type="hidden" id="hora" value="<?php echo $hora; ?>" />
<input type="hidden" id="cod_ape" value="<?php echo Session::get('aperturaIn'); ?>" />
<input type="hidden" id="moneda" value="<?php echo Session::get('moneda'); ?>" />
<input type="hidden" id="pc_ip" value="<?php echo Session::get('pc_ip'); ?>" />
<input type="hidden" id="pc_name" value="<?php echo Session::get('pc_name'); ?>" />
<input type="hidden" id="print_com" value="<?php echo Session::get('print_com'); ?>" />
<input type="hidden" id="tribAcr" value="<?php echo Session::get('tribAcr'); ?>" />
<input type="hidden" id="diAcr" value="<?php echo Session::get('diAcr'); ?>" />
<input type="hidden" id="api_wsp" value="<?php echo Session::get('api_wsp'); ?>" />
<input type="hidden" name="codtipoped" id="codtipoped" value="1" />
<input type="hidden" name="codpagina" id="codpagina" value="1" />
<input type="hidden" id="codpestdelivery" value="" />
<input type="hidden" id="codsalonorigen" value="" />
<input type="hidden" id="codmesaorigen" value="" />
<input type="hidden" id="codigo_anular_venta" value="<?php echo $codigo_anular_venta; ?>" />
<input type="hidden" id="direccion_comanda" value="<?= Session::get('direccion_comanda') ?>" />
<input type="hidden" id="pedido_comanda" value="<?= Session::get('pedido_comanda') ?>" />
<input type="hidden" id="imp_icbper" value="<?php echo Session::get('imp_val_bol'); ?>" />
<input type="hidden" id="verpdf" value="<?php echo Session::get('verpdf'); ?>" />
<input type="hidden" id="limits_invoices" value="<?php echo $this->Invoice['limits']['total_invoices']; ?>" />
<input type="hidden" id="current_invoices" value="<?php echo $this->Invoice['current']['total_invoices']; ?>" />
<input type="hidden" id="locked_invoices" value="<?php echo $this->Invoice['locked_invoices']; ?>" />
<input type="hidden" id="id_pedido" value=0 />
<input type="hidden" id="codrepartidor" value="1" />
<input type="hidden" id="codimpcomandamesa" value="<?php echo Session::get('opc_03'); ?>" />
<input type="hidden" id="mozos_data" value='<?= json_encode($this->Mozo) ?>'>
<input type="hidden" id="dato_usuario" value="<?= Session::get('nombres') ?>" />
<input type="hidden" id="permisoEditarPrecio" value="<?= Session::get('editarprecio') ?>" />
<input type="hidden" id="comision_tarjeta" value="<?= Session::get('comision_tarjeta') ?>" />
<input type="hidden" id="impresion_automatica_comanda" value="<?= Session::get('impresion_automatica_comanda') ?>" />
<input type="hidden" id="salon" value="" />
<input type="hidden" id="mesa" value="" />
<?php
$documentos = isset($this->TipoDocumento) && is_array($this->TipoDocumento)
    ? $this->TipoDocumento
    : [];

$result     = array_filter($documentos, fn($d) => (int)$d['defecto'] === 1);
$porDefecto = reset($result) ?: [];
$defaultId  = $porDefecto['id_tipo_doc'] ?? '';
?>
<input
  type="hidden"
  id="tipo_doc_defecto"
  value="<?= htmlspecialchars($defaultId, ENT_QUOTES) ?>"
/>

<div class="p-15"></div>

<div id="loading-overlay" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(255,255,255,0.8); z-index:9999; text-align:center; padding-top:200px; font-size:24px;">
  <i class="fas fa-spinner fa-spin"></i> Procesando venta...
</div>
<!-- Contenedor para el toast -->
<div aria-live="polite" id = "viewLivetoast" aria-atomic="true" style="display:none; position: fixed; top: 1rem; right: 1rem; z-index: 1060;">
  <div id="liveToast" class="toast" role="alert" data-delay="3000">
    <div class="toast-header">
      <strong class="mr-auto text-success">Éxito</strong>
      <button type="button" class="ml-2 mb-1 close" data-dismiss="toast">&times;</button>
    </div>
    <div class="toast-body"></div>
  </div>
</div>



<!-- inicio: CAMBIO PRINCIPAL -->
<div class="row u4-2">
    <div class="col-lg-7 u4 u4-2-1">
        <div class="card m-b-5">
            <!-- Nav tabs -->
            <?php if (Session::get('rol') != 5): ?>
                <ul class="nav nav-tabs customtab" role="tablist">
                    <li class="nav-item tab01"><a class="nav-link active" data-toggle="tab" href="#tabp-1" role="tab"><span class="hidden-sm-up">Mesas</span><span class="hidden-xs-down">Mesas</span></a></li>
                    <li class="nav-item tab02"><a class="nav-link" data-toggle="tab" href="#tabp-2" role="tab" onclick="mostrador()"><span class="hidden-sm-up">Para llevar</span><span class="hidden-xs-down">Para llevar</span></a></li>
                    <?php if (Session::get('rol') <> 10) { ?>
                        <li class="nav-item tab03"><a class="nav-link" data-toggle="tab" href="#tabp-3" role="tab" onclick="delivery()"><span class="hidden-sm-up">Delivery</span><span class="hidden-xs-down">Delivery <span class="label label-rounded label-inverse pedidos-total-1">0</span></span></a></li>
                    <?php } ?>
                </ul>
            <?php else: ?>
                <div class="c-mozo-title">
                    <h2>mesas</h2>

                </div>

            <?php endif; ?>

            <!-- Tab panes -->
            <div class="tab-content">
                <div class="tab-pane p-0 active" id="tabp-1" role="tabpanel">
                    <div class="d-flex justify-content-between pl-2 pr-2 align-items-end">
                        <ul class="nav nav-tabs tabs-horizontal" role="tablist">
                            <?php $cont = 1;
                            $cont_salon = 0;
                            foreach ($this->Salon as $key => $value): ?>
                                <li class="nav-item list-salones m-t-10">
                                    <a class="nav-link zonas" data-toggle="tab" href="#tab-<?php echo $value['id_salon']; ?>" role="tab" id="tab<?php echo $cont++; ?>" onclick="mesa_list(<?php echo $value['id_salon']; ?>)">
                                        <!-- <span class="hidden-sm-up"><?php $cont_salon = $cont_salon + 1;
                                                                        echo 'SA' . $cont_salon; ?></span> -->
                                        <span class="font-14"><?php echo $value['descripcion']; ?></span>
                                    </a>
                                </li>
                            <?php endforeach; ?>
                        </ul>
                        <div class="">
                            <div class="d-flex m-t-10 justify-content-end">

                                <div class="d-flex m-l-10">
                                    <form method="post" enctype="multipart/form-data" action="<?php echo URL; ?>venta/refrescar_mesas">
                                        <button class="btn btn-sm btn-primary" type="submit" data-original-title="Refrescar mesas" data-toggle="tooltip" data-placement="left"><i class="fas fa-sync-alt"></i></button>
                                    </form>
                                    &nbsp;&nbsp;
                                    <div class="btn-group">
                                        <button type="button" class="btn btn-sm btn-inverse dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

                                            <i class="fas fa-ellipsis-v"></i>
                                        </button>
                                        <div class="dropdown-menu">
                                            <a class="dropdown-item opc-cambiar-mesa" href="#modal-cambiar-mesa" data-toggle="modal">Cambiar mesa</a>
                                            <a class="dropdown-item opc-mover-pedidos" href="#modal-mover-pedidos" data-toggle="modal">Mover pedidos</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="vtabs customvtab w-100">
                        <ul class="nav nav-tabs tabs-vertical hidden-xs-down d-none" role="tablist">
                            <?php $cont = 1;
                            $cont_salon = 0;
                            foreach ($this->Salon as $key => $value): ?>
                                <li class="nav-item list-salones m-t-10">
                                    <a class="nav-link" data-toggle="tab" href="#tab-<?php echo $value['id_salon']; ?>" role="tab" id="tab<?php echo $cont++; ?>" onclick="mesa_list(<?php echo $value['id_salon']; ?>)">
                                        <!-- <span class="hidden-sm-up"><?php $cont_salon = $cont_salon + 1;
                                                                        echo 'SA' . $cont_salon; ?></span> -->
                                        <span class="hidden-xs-down font-14"><?php echo $value['descripcion']; ?></span>
                                    </a>
                                </li>
                            <?php endforeach; ?>
                        </ul>
                        <div class="tab-content w-100" style="padding-bottom: 10px;">
                            <?php if (Session::get('rol') != 5): ?>
                                <div class="card-body display-estado-mesa p-t-10 p-b-0 mb-3 hidden-sm-down">
                                    <div class="row">
                                        <div class="m-t-5 ml-auto pr-1">
                                            <small class="label mesas-disponibles" style="background: #79df9d;" data-original-title="Mesa libre" data-toggle="tooltip" data-placement="right"><span id="mesa_libre">&nbsp;</span></small>
                                            <small class="label mesas-pago" style="background: #5a9bf3;" data-original-title="En proceso de pago" data-toggle="tooltip" data-placement="right"><span id="mesa_proceso">&nbsp;</span></small>
                                            <small class="label mesas-ocupadas" style="background: #e7444c;" data-original-title="Mesa ocupada" data-toggle="tooltip" data-placement="right"><span id="mesa_ocupada">&nbsp;</span></small>
                                        </div>
                                    </div>
                                </div>
                            <?php endif; ?>
                            <?php $cont = 1;
                            $co = 0;
                            foreach ($this->Salon as $key => $value): ?>
                                <div class="tab-pane tp<?php echo $cont++; ?>" id="tab-<?php echo $value['id_salon']; ?>" role="tabpanel">
                                    <div class="row">
                                        <div class="col-sm-12 scroll_mesas" data-toggle="buttons">
                                            <div class="list-mesas"></div>
                                        </div>
                                    </div>
                                </div>
                            <?php endforeach; ?>
                        </div>
                    </div>
                </div>
                <div class="tab-pane" id="tabp-2" role="tabpanel">
                    <ul class="nav nav-tabs customtab" role="tablist">
                        <li class="nav-item mostrador01" data-toggle="tooltip" data-placement="bottom" data-original-title="Esperando confirmaci&oacute;n"> <a class="nav-link active" data-toggle="tab" href="#mostrador01" role="tab"><span class="hidden-sm-up"><i class="fas fa-bullhorn"></i></span><span class="hidden-xs-down"><i class="fas fa-bullhorn font-20"></i></span></a> </li>
                        <li class="nav-item mostrador02" data-toggle="tooltip" data-placement="bottom" data-original-title="Pedidos en preparaci&oacute;n"> <a class="nav-link" data-toggle="tab" href="#mostrador02" role="tab"><span class="hidden-sm-up"><i class="fas fa-diagnoses"></i></span><span class="hidden-xs-down"><i class="fas fa-diagnoses font-20"></i></span></a> </li>
                        <li class="nav-item mostrador03" data-toggle="tooltip" data-placement="bottom" data-original-title="Pedidos entregados"> <a class="nav-link" data-toggle="tab" href="#mostrador03" role="tab"><span class="hidden-sm-up"><i class="fas fa-hands-helping"></i></span><span class="hidden-xs-down"><i class="fas fa-hands-helping font-20"></i></span></a> </li>
                    </ul>
                    <!-- Tab panes -->
                    <div class="tab-content">
                        <div class="tab-pane m-b-10 active" id="mostrador01" role="tabpanel">
                            <div class="p-0">
                                <div class="p-l-10 p-t-10 b-b" style="display: flex; background: #ffcb91">
                                    <h6 class="text-white font-medium"><i class="ti-more"></i> ESPERANDO CONFIRMACION</h6>
                                </div>
                                <div class="card-body p-0">
                                    <div class="row floating-labels m-t-30">
                                        <div class="col-5 col-sm-3 col-lg-3">
                                            <div class="row text-center m-t-0 p-l-10 p-r-10">
                                                <div class="col-lg-12 col-md-12 col-sm-12 m-b-20">
                                                    <h5 class="m-b-5 font-30 font-normal text-warning pedidos-mostrador-total"></h5>
                                                    <h6 class="font-bold">Pedidos</h6>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-7 col-sm-9 col-lg-9">
                                            <div class="row">
                                                <div class="form-group col-12 m-b-20">
                                                    <input type="text" class="form-control search_filter_e" id="search_filter_e" autocomplete="off" placeholder="Buscar pedido">
                                                    <span class="bar"></span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="table-responsive">
                                    <table id="list-mostrador-confirmacion" class="table table-condensed table-hover stylish-table b-t" cellspacing="0" width="100%">
                                        <thead class="table-head">
                                            <tr>
                                                <th width="10%">Pedido</th>
                                                <th width="15%">Tiempo</th>
                                                <th width="60%">Cliente</th>
                                                <th width="15%" class="text-right">Total</th>
                                            </tr>
                                        </thead>
                                        <tbody class="tb-st"></tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane m-b-10" id="mostrador02" role="tabpanel">
                            <div class="p-0">
                                <div class="p-l-10 p-t-10 b-b" style="display: flex; background: #ffefa1">
                                    <h6 class="text-inverse font-medium"><i class="ti-more"></i> EN PREPARACION</h6>
                                </div>
                                <div class="card-body p-0">
                                    <div class="row floating-labels m-t-30">
                                        <div class="col-5 col-sm-3 col-lg-3">
                                            <div class="row text-center m-t-0 p-l-10 p-r-10">
                                                <div class="col-lg-12 col-md-12 col-sm-12 m-b-20">
                                                    <h5 class="m-b-5 font-30 font-normal text-warning pedidos-mostrador-total"></h5>
                                                    <h6 class="font-bold">Pedidos</h6>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-7 col-sm-9 col-lg-9">
                                            <div class="row">
                                                <div class="form-group col-12 m-b-20">
                                                    <input type="text" class="form-control search_filter_f" id="search_filter_f" autocomplete="off" placeholder="Buscar pedido">
                                                    <span class="bar"></span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="table-responsive">
                                    <table id="list-mostrador-preparacion" class="table table-condensed table-hover stylish-table b-t" cellspacing="0" width="100%">
                                        <thead class="table-head">
                                            <tr>
                                                <th width="10%">Pedido</th>
                                                <th width="20%">Tiempo</th>
                                                <th width="45%">Cliente</th>
                                                <th width="35%" class="text-right">Total</th>
                                            </tr>
                                        </thead>
                                        <tbody class="tb-st"></tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane m-b-10" id="mostrador03" role="tabpanel">
                            <div class="p-0">
                                <div class="p-l-10 p-t-10 b-b" style="display: flex; background: #6ddccf">
                                    <h6 class="text-white font-medium"><i class="ti-more"></i> ENTREGADOS</h6>
                                </div>
                                <div class="card-body p-0">
                                    <div class="row floating-labels m-t-30">
                                        <div class="col-5 col-sm-3 col-lg-3">
                                            <div class="row text-center m-t-0 p-l-10 p-r-10">
                                                <div class="col-lg-12 col-md-12 col-sm-12 m-b-20">
                                                    <h5 class="m-b-5 font-30 font-normal text-warning pedidos-mostrador-total"></h5>
                                                    <h6 class="font-bold">Pedidos</h6>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-7 col-sm-9 col-lg-9">
                                            <div class="row">
                                                <div class="form-group col-12 m-b-20">
                                                    <input type="text" class="form-control search_filter_g" id="search_filter_g" autocomplete="off" placeholder="Buscar pedido">
                                                    <span class="bar"></span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="table-responsive">
                                    <table id="list-mostrador-entregados" class="table table-condensed table-hover stylish-table b-t" cellspacing="0" width="100%">
                                        <thead class="table-head">
                                            <tr>
                                                <th width="10%">Pedido</th>
                                                <th width="15%">Tiempo</th>
                                                <th width="45%">Cliente</th>
                                                
                                                <th width="15%" class="text-right">Total</th>
                                            </tr>
                                        </thead>
                                        <tbody class="tb-st"></tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tab-pane" id="tabp-3" role="tabpanel">
                    <div class="card-body display-estado-pedidos p-t-10 p-b-0">
                        <div class="row">
                            <div class="col-md-5 col-8 align-self-center m-t-5">
                                <small class="label label-warning" data-original-title="Pedido para atenci&oacute;n" data-toggle="tooltip" data-placement="right">&nbsp;</small>
                                <small class="label label-primary" data-original-title="Pedido programado" data-toggle="tooltip" data-placement="right">&nbsp;</small>
                            </div>
                            <div class="col-md-7 col-4 align-self-center">
                                <div class="d-flex m-t-10 justify-content-end">
                                    <div class="d-flex m-l-10">
                                        <button class="btn btn-sm btn-primary" onclick="list_categorias_menu();"><i class="fas fa-clipboard-list"></i> Lista de productos</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <hr class="m-b-0 display-estado-pedidos">
                    <ul class="nav nav-tabs customtab" role="tablist">
                        <li class="nav-item delivery01" data-toggle="tooltip" data-placement="top" data-original-title="Esperando confirmaci&oacute;n"> <a class="nav-link active" data-toggle="tab" href="#delivery01" role="tab"><span class="hidden-sm-up"><i class="fas fa-bullhorn"></i></span><span class="hidden-xs-down"><i class="fas fa-bullhorn font-20"></i> <span class="label label-rounded label-inverse pedidos-total-1">0</span></span></a> </li>
                        <li class="nav-item delivery02" data-toggle="tooltip" data-placement="top" data-original-title="Pedidos en preparaci&oacute;n"> <a class="nav-link" data-toggle="tab" href="#delivery02" role="tab"><span class="hidden-sm-up"><i class="fas fa-diagnoses"></i></span><span class="hidden-xs-down"><i class="fas fa-diagnoses font-20"></i></span></a> </li>
                        <?php if (Session::get('rol') <> 5) { ?>
                            <li class="nav-item delivery03" data-toggle="tooltip" data-placement="top" data-original-title="Pedidos en camino"> <a class="nav-link" data-toggle="tab" href="#delivery03" role="tab"><span class="hidden-sm-up"><i class="fas fa-motorcycle"></i></span><span class="hidden-xs-down"><i class="fas fa-motorcycle font-20"></i></span></a> </li>
                            <li class="nav-item delivery04" data-toggle="tooltip" data-placement="top" data-original-title="Pedidos entregados"> <a class="nav-link" data-toggle="tab" href="#delivery04" role="tab"><span class="hidden-sm-up"><i class="fas fa-hands-helping"></i></span><span class="hidden-xs-down"><i class="fas fa-hands-helping font-20"></i></span></a> </li>
                        <?php } ?>
                    </ul>
                    <!-- Tab panes -->
                    <div class="tab-content">
                        <div class="tab-pane m-b-10 active" id="delivery01" role="tabpanel">
                            <div class="p-0">
                                <div class="p-l-10 p-t-10 b-b" style="display: flex; background: #ffcb91;">
                                    <h6 class="text-white font-medium"><i class="ti-more"></i> ESPERANDO CONFIRMACION</h6>
                                </div>
                                <div class="card-body p-0">
                                    <div class="row floating-labels m-t-30">
                                        <div class="col-5 col-sm-3 col-lg-3">
                                            <div class="row text-center m-t-0 p-l-10 p-r-10">
                                                <div class="col-lg-12 col-md-12 col-sm-12 m-b-20">
                                                    <h5 class="m-b-5 font-30 font-normal text-warning pedidos-total"></h5>
                                                    <h6 class="font-bold">Pedidos</h6>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-7 col-sm-9 col-lg-9">
                                            <div class="row">
                                                <div class="form-group col-12 m-b-20">
                                                    <input type="text" class="form-control search_filter_a" id="search_filter_a" autocomplete="off" placeholder="Buscar pedido">
                                                    <span class="bar"></span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="table-responsive">
                                    <table id="list-delivery-confirmacion" class="table table-condensed table-hover stylish-table b-t" cellspacing="0" width="100%">
                                        <thead class="table-head">
                                            <tr>
                                                <th width="10%">Pedido</th>
                                                <th width="15%">Tiempo</th>
                                                <th width="30%">Cliente</th>
                                                <th width="15%">Entrega</th>
                                                <th width="15%">Pago</th>
                                                <th width="15%" class="text-right">Total</th>
                                            </tr>
                                        </thead>
                                        <tbody class="tb-st"></tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane m-b-10" id="delivery02" role="tabpanel">
                            <div class="p-0">
                                <div class="p-l-10 p-t-10 b-b" style="display: flex; background: #ffefa1;">
                                    <h6 class="text-inverse font-medium"><i class="ti-more"></i> EN PREPARACION</h6>
                                </div>
                                <div class="card-body p-0">
                                    <div class="row floating-labels m-t-30">
                                        <div class="col-5 col-sm-3 col-lg-3">
                                            <div class="row text-center m-t-0 p-l-10 p-r-10">
                                                <div class="col-lg-12 col-md-12 col-sm-12 m-b-20">
                                                    <h5 class="m-b-5 font-30 font-normal text-warning pedidos-total"></h5>
                                                    <h6 class="font-bold">Pedidos</h6>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-7 col-sm-9 col-lg-9">
                                            <div class="row">
                                                <div class="form-group col-12 m-b-20">
                                                    <input type="text" class="form-control search_filter_b" id="search_filter_b" autocomplete="off" placeholder="Buscar pedido">
                                                    <span class="bar"></span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="table-responsive">
                                    <table id="list-delivery-preparacion" class="table table-condensed table-hover stylish-table b-t" cellspacing="0" width="100%">
                                        <thead class="table-head">
                                            <tr>
                                                <th width="10%">Pedido</th>
                                                <th width="15%">Tiempo</th>
                                                <th width="30%">Cliente</th>
                                                <th width="15%">Entrega</th>
                                                <th width="15%">Pago</th>
                                                <th width="15%" class="text-right">Total</th>
                                            </tr>
                                        </thead>
                                        <tbody class="tb-st"></tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane m-b-10" id="delivery03" role="tabpanel">
                            <div class="p-0">
                                <div class="p-l-10 p-t-10 b-b" style="display: flex; background: #94ebcd;">
                                    <h6 class="text-inverse font-medium"><i class="ti-more"></i> EN CAMINO |&nbsp;Nota:&nbsp;<h6 class="text-black font-italic">Todos los pedidos de esta lista, faltan entregar el dinero.</h6>
                                    </h6>
                                </div>
                                <div class="card-body p-0">
                                    <div class="row floating-labels m-t-30">
                                        <div class="col-5 col-sm-3 col-lg-3">
                                            <div class="row text-center m-t-0 p-l-10 p-r-10">
                                                <div class="col-lg-12 col-md-12 col-sm-12 m-b-20">
                                                    <h5 class="m-b-5 font-30 font-normal text-warning pedidos-total"></h5>
                                                    <h6 class="font-bold">Pedidos</h6>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-7 col-sm-9 col-lg-9">
                                            <div class="row">
                                                <div class="form-group col-12 m-b-20">
                                                    <input type="text" class="form-control search_filter_c" id="search_filter_c" autocomplete="off" placeholder="Buscar pedido">
                                                    <span class="bar"></span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="table-responsive">
                                    <table id="list-delivery-enviados" class="table table-condensed table-hover stylish-table b-t" cellspacing="0" width="100%">
                                        <thead class="table-head">
                                            <tr>
                                                <th width="10%">Pedido</th>
                                                <th width="15%">Tiempo</th>
                                                <th width="30%">Cliente</th>
                                                <th width="15%">Entrega</th>
                                                <th width="15%">Pago</th>
                                                <th width="15%" class="text-right">Total</th>
                                            </tr>
                                        </thead>
                                        <tbody class="tb-st"></tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane m-b-10" id="delivery04" role="tabpanel">
                            <div class="p-0">
                                <div class="p-l-10 p-t-10 b-b" style="display: flex; background: #6ddccf;">
                                    <h6 class="text-white font-medium"><i class="ti-more"></i> ENTREGADOS</h6>
                                </div>
                                <div class="card-body p-0">
                                    <div class="row floating-labels m-t-30">
                                        <div class="col-5 col-sm-3 col-lg-3">
                                            <div class="row text-center m-t-0 p-l-10 p-r-10">
                                                <div class="col-lg-12 col-md-12 col-sm-12 m-b-20">
                                                    <h5 class="m-b-5 font-30 font-normal text-warning pedidos-total"></h5>
                                                    <h6 class="font-bold">Pedidos</h6>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-7 col-sm-9 col-lg-9">
                                            <div class="row">
                                                <div class="form-group col-12 m-b-20">
                                                    <input type="text" class="form-control search_filter_d" id="search_filter_d" autocomplete="off" placeholder="Buscar pedido">
                                                    <span class="bar"></span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="table-responsive">
                                    <table id="list-delivery-entregados" class="table table-condensed table-hover stylish-table b-t" cellspacing="0" width="100%">
                                        <thead class="table-head">
                                            <tr>
                                                <th width="10%">Pedido</th>
                                                <th width="15%">Tiempo</th>
                                                <th width="30%">Cliente</th>
                                                <th width="15%">Entrega</th>
                                                <th width="15%">Pago</th>
                                                <th width="15%" class="text-right">Total</th>
                                            </tr>
                                        </thead>
                                        <tbody class="tb-st"></tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-lg-5 u4">
        <div class="card card_height m-b-0" style="background:rgb(80, 80, 80);">
            <form id="form-nuevo-pedido" method="post" enctype="multipart/form-data" class="form-nuevo-pedido">
                <input type="hidden" class="id-mesa" name="id_mesa" id="id_mesa">

                <!-- aside_inicio: lista de pedidos por mesa -->

                <div class="card-header card-body-right p-b-10 custom-bg-primary rounded-top" style="display: none">
                    <div class="d-flex flex-wrap align-items-center" style="gap:.5rem">
                        <div>
                            <h4 class="card-title m-b-0" style="font-weight: 600; color: #6a6a6a">
                                <span class="pedido-numero-icono"></span>
                                <span class="pedido-numero text-white">Detalle</span>
                                <input type="hidden" id="nombre_mozo" value="" />
                            </h4>
                        </div>

                        <div class="ml-auto pedido-mozo text-white" style="display: none;">
                            <div class="d-flex align-items-center" style="gap:1rem">
                                <span>
                                    <i class="fa fa-user font-16 pedido-mozo" data-original-title="" data-toggle="tooltip" data-placement="top"></i>
                                </span>
                                <button class="btn btn-xs btn-primary hidden-xs-down">
                                    <span>
                                        <i class="fas fa-print font-16 imprimir_precuenta" data-original-title="" data-toggle="tooltip" data-placement="top"></i>
                                    </span>
                                </button>
                                <div class="dropdown">
                                    <button class="btn btn-warning dropdown-toggle" type="button" id="btnDropdownComandas"
                                            data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        <i class="fas fa-print"></i>
                                    </button>

                                    <div class="dropdown-menu" id="imprimir_comandas" aria-labelledby="btnDropdownComandas">
                                        <!-- Aquí se llenará la lista -->
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="ml-auto ticket_reparto text-white" >
                            <div class="d-flex align-items-center" style="gap:1rem">
                                <button class="btn btn-xs btn-primary hidden-xs-down imprimir_ticket_reparto">
                                    <span>
                                        <i class="fas fa-print font-16" data-original-title="" data-toggle="tooltip" data-placement="top"></i>
                                    </span>
                                </button>
                                
                            </div>
                        </div>

                        <div class="ml-auto display-pedido-programado" style="display: none;">
                            <div class="col-md-12">
                                <input type="checkbox" name="pedido_programado" id="pedido_programado" class="chk-col-red pedido_programado" value="0" />
                                <label for="pedido_programado" class="m-b-0">Programado</label>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Actualizaciones fuertes de la UI -->
                <div class="card-settings card-body-right flex-column" style="display: none; padding: 4px 8px;box-shadow: 0 4px 8px 0 rgba(0,0,0,0.1);">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <div class="btn-group btn-group-sm btn-group-toggle" data-toggle="buttons">
                                <?php
                                // Inicializar la variable antes del foreach
                                $tdoc_defecto = null;

                                // Buscar el documento por defecto antes de generar los botones
                                foreach ($this->TipoDocumento as $key) {
                                    if ($key['defecto'] == '1') {
                                        $tdoc_defecto = $key['id_tipo_doc'];
                                        break; // Detener la búsqueda en cuanto lo encontramos
                                    }
                                }

                                // Ahora recorrer nuevamente para generar los botones
                                foreach ($this->TipoDocumento as $key):
                                ?>
                                    <label class="btn btn-secondary btn-tipo-doc-<?php echo $key['id_tipo_doc']; ?> <?php echo ($key['id_tipo_doc'] == $tdoc_defecto) ? 'active' : ''; ?>" style="font-size:12px; align-content:center">
                                        <input type="radio" name="tipo_doc" value="<?php echo $key['id_tipo_doc']; ?>" autocomplete="off" <?php echo ($key['id_tipo_doc'] == $tdoc_defecto) ? 'checked' : ''; ?>>
                                        <?php echo ($key['id_tipo_doc'] == 1) ? 'BOLETA' : $key['descripcion']; ?>
                                    </label>
                                <?php endforeach; ?>
                            </div>
                        </div>

                        <div class="d-flex" style="gap:.5rem">
                            <div class="display_venta_por_consumo">
                                <input type="checkbox" name="venta_por_consumo" id="venta_por_consumo" class="lever switch-col-light-green venta_por_consumo" />
                                <label for="venta_por_consumo" style="color:black;font-size:12px;padding: 0 0 0 26px;margin:0">POR CONSUMO</label>
                            </div>
                            <div class="display_venta_por_consumo">
                                <input type="checkbox" name="comision_tarjeta_venta" id="comision_tarjeta_venta" class="lever switch-col-light-green comision_tarjeta_venta" />
                                <label for="comision_tarjeta_venta" style="color:black;font-size:12px;padding: 0 0 0 26px;margin:0">COM TARJETA</label>
                            </div>
                            <select class="selectpicker" name="tipo_pago" id="tipo_pago" data-style="form-control btn-secondary" data-width="50%" data-size="4" data-live-search-style="begins" data-live-search="true" autocomplete="off">
                                <?php foreach ($this->TipoPago as $key => $value): ?>
                                    <option style="font-size:12px" label="<?php echo $value['id_pago']; ?>" value="<?php echo $value['id_tipo_pago']; ?>"><?php echo $value['descripcion']; ?></option>
                                <?php endforeach; ?>
                            </select>
                        </div>
                    </div>

                    <div class="d-flex justify-content-around" style="margin:0">
                        <div style="width:100%">
                            <input type="hidden" name="cliente_id" id="cliente_id" value="1" />
                            <input type="hidden" name="cliente_documento" id="cliente_documento" value="" />
                            <input type="hidden" name="cliente_tipo" id="cliente_tipo" value="1" />
                            <label class="font-10">BUSCAR CLIENTE</label>
                            <div class="input-group">
                                <div class="opcion-cliente input-group-prepend"></div>

                                <input type="text" class="form-control" name="buscar_cliente" id="buscar_cliente" autocomplete="off">
                                <a class="input-group-append" href="javascript:void(0)" id="btnClienteLimpiar" data-original-title="Limpiar datos" data-toggle="tooltip" data-placement="top">
                                    <span class="input-group-text bg-header">
                                        <small><i class="fas fa-times link-danger"></i></small>
                                    </span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card-body p-0 min-height-0" style="overflow-y: scroll">
                    <div class="scroll_pedidos">
                        <div class="cont01 justify-center" style="height: 100%;">
                            <div class="text-center cont01-1">
                                <h2 class="text-white"><i class="ti ti-arrow-circle-left"></i></h2>
                                <h4 class="text-white">Seleccione <b class="nomPed">una mesa</b></h4>
                                <h6 class="text-white text-center">para ingresar o visualizar pedidos</h6>
                            </div>
                            <div class="text-center cont01-2" style="display: none;">
                                <!-- Botón para agregar nuevo delivery -->
                                <h2 class="text-white"><button type="button" class="btn btn-circle btn-lg btn-orange waves-effect waves-dark btn-nuevo-pedido"><i class="ti-plus"></i></button></h2>
                                <h4 class="text-white m-b-0">Nuevo pedido</h4>
                            </div>
                        </div>

                        <!-- INICIO: Contenedor para los DELIVERY -->
                        <div class="cont02 m-t-20" style="display: none;">
                            <div class="row p-t-0 p-l-20 p-r-20 p-b-10">
                                <div class="col-md-12 m-b-40 display-tipo-entrega" style="display: none;">
                                    <label class="font-13 text-inverse">Tipo de entrega</label>
                                    <div class="btn-group btn-group-toggle w-100" data-toggle="buttons">
                                        <label class="btn waves-effect waves-light btn-tipo-entrega-1 btn-secondary active">
                                            <input type="radio" name="tipo_entrega" id="tipo_entrega_1" value="1" autocomplete="off" checked> A DOMICILIO
                                        </label>
                                        <label class="btn waves-effect waves-light btn-tipo-entrega-2 btn-secondary">
                                            <input type="radio" name="tipo_entrega" id="tipo_entrega_2" value="2" autocomplete="off"> POR RECOGER
                                        </label>
                                    </div>
                                </div>
                                <div class="col-md-6 display-hora-entrega floating-labels" style="display: none;">
                                    <div class="form-group m-b-40">
                                        <select class="selectpicker form-control bg-t" name="hora_entrega" id="hora_entrega" data-style="form-control btn-default" title="Seleccionar" data-live-search="true" autocomplete="off" data-size="5" required>
                                            <optgroup>
                                                <option value="10:00:00">10:00 AM</option>
                                                <option value="10:30:00">10:30 AM</option>
                                                <option value="11:00:00">11:00 AM</option>
                                                <option value="11:30:00">11:30 AM</option>
                                                <option value="12:00:00">12:00 AM</option>
                                                <option value="12:30:00">12:30 AM</option>
                                                <option value="13:00:00">01:00 PM</option>
                                                <option value="13:30:00">01:30 PM</option>
                                                <option value="14:00:00">02:00 PM</option>
                                                <option value="14:30:00">02:30 PM</option>
                                                <option value="15:00:00">03:00 PM</option>
                                                <option value="15:30:00">03:30 PM</option>
                                                <option value="16:00:00">04:00 PM</option>
                                                <option value="16:30:00">04:30 PM</option>
                                                <option value="17:00:00">05:00 PM</option>
                                                <option value="17:30:00">05:30 PM</option>
                                                <option value="18:00:00">06:00 PM</option>
                                                <option value="18:30:00">06:30 PM</option>
                                                <option value="19:00:00">07:00 PM</option>
                                                <option value="19:30:00">07:30 PM</option>
                                                <option value="20:00:00">08:00 PM</option>
                                                <option value="20:30:00">08:30 PM</option>
                                                <option value="21:00:00">09:00 PM</option>
                                                <option value="21:30:00">09:30 PM</option>
                                                <option value="22:00:00">10:00 PM</option>
                                                <option value="22:30:00">10:30 PM</option>
                                            </optgroup>
                                        </select>
                                        <span class="bar"></span>
                                        <label for="hora_entrega">Hora de entrega</label>
                                    </div>
                                </div>
                                <div class="col-md-12 display-telefono-cliente floating-labels" style="display: none;">
                                    <div class="form-group m-b-20">
                                        <input type="text" class="form-control bg-t" name="telefono_cliente" id="telefono_cliente" autocomplete="off" required />
                                        <span class="bar"></span>
                                        <label for="telefono_cliente">Teléfono</label>
                                    </div>
                                </div>
                                <div class="col-md-12 display-nombre floating-labels" style="display: none;">
                                    <div class="form-group letMayMin m-t-20 m-b-40">
                                        <input type="text" class="form-control input-mayus bg-t" name="nomb_cliente" id="nomb_cliente" autocomplete="off" required />
                                        <span class="bar"></span>
                                        <label for="nomb_cliente">Nombre cliente</label>
                                    </div>
                                </div>
                                <div class="col-12 col-md-4 display-nombre floating-labels" style="display: none;">
                                    <div class="form-group letMayMin m-t-20 m-b-40">
                                        <select class="selectpicker form-control bg-t" name="id_tdoc" id="id_tdoc" data-style="form-control btn-default" title="Seleccionar" data-live-search-style="begins" data-live-search="true">
                                            <option value="1" selected="">DNI</option>
                                            <option value="2">RUC</option>
                                        </select>
                                        <span class="bar"></span>
                                        <label for="nomb_cliente"> Tipo Documento</label>
                                    </div>
                                </div>
                                <div class="col-12 col-md-8 display-nombre floating-labels" style="display: none;">
                                    <div class="form-group tdocInput m-t-20 m-b-40">
                                        <input type="text" class="form-control bg-t" name="num_cliente" id="num_cliente" autocomplete="off" />
                                        <span class="bar"></span>
                                        <label for="num_cliente">Número</label>
                                    </div>
                                </div>
                                <div class="col-md-12 display-direccion-cliente floating-labels" style="display: none;">
                                    <div class="form-group m-b-40">
                                        <input type="text" class="form-control input-mayus bg-t" name="direccion_cliente" id="direccion_cliente" autocomplete="off" required />
                                        <span class="bar"></span>
                                        <label for="direccion_cliente">Dirección</label>
                                    </div>
                                </div>
                                <div class="col-md-12 display-referencia-cliente floating-labels" style="display: none;">
                                    <div class="form-group m-b-0">
                                        <input type="text" class="form-control input-mayus bg-t" name="referencia_cliente" id="referencia_cliente" autocomplete="off" required />
                                        <span class="bar"></span>
                                        <label for="referencia_cliente">Referencia</label>
                                    </div>
                                </div>
                                <div class="col-sm-12 display-repartidor floating-labels" style="display: none;">
                                    <div class="form-group m-t-40 m-b-0">
                                        <select class="selectpicker form-control bg-t" name="id_repartidor" id="id_repartidor" data-style="form-control btn-default" title="Seleccionar" data-live-search-style="begins" data-live-search="true" required>
                                            <?php foreach ($this->Repartidor as $key => $value): ?>
                                                <option value="<?php echo $value['id_usu']; ?>"><?php echo $value['nombres'] . ' ' . $value['ape_paterno'] . ' ' . $value['ape_materno']; ?></option>
                                            <?php endforeach; ?>
                                            <?php if (Session::get('opc_01') == 1) { ?>
                                                <optgroup>
                                                    <option value="2222">DIDI FOOD</option>
                                                    <!-- <option value="3333">UBER</option> -->
                                                    <option value="4444">PEDIDOS YA</option>
                                                </optgroup>
                                            <?php } ?>
                                        </select>
                                        <span class="bar"></span>
                                        <label for="id_repartidor">Repartidor</label>
                                    </div>
                                </div>
                                <div class="col-sm-12 display-personas floating-labels" style="display: none;">
                                    <div class="form-group m-t-20 m-b-40">
                                        <input id="tch3" name="nro_personas" type="text" value="1" class="form-control text-center bg-t numero-personas" style="border-bottom: 1px solid #d9d9d9;" readonly />
                                        <label form="tch3">Nro de personas</label>
                                    </div>
                                </div>
                                <div class="col-sm-12 display-mozo floating-labels" style="display: none;">
                                    <div class="form-group m-b-40">
                                        <select class="selectpicker form-control bg-t" name="id_mozo" id="id_mozo" data-style="form-control btn-default" title="Seleccionar" data-live-search-style="begins" data-live-search="true">
                                            <?php foreach ($this->Mozo as $key => $value): ?>
                                                <option value="<?php echo $value['id_usu']; ?>"><?php echo $value['nombres'] . ' ' . $value['ape_paterno'] . ' ' . $value['ape_materno']; ?></option>
                                            <?php endforeach; ?>
                                        </select>
                                        <span class="bar"></span>
                                        <label for="id_mozo">Mozo</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- FIN: Contenedor para los DELIVERY -->

                        <div class="cont03 comment-widgets m-t-4 d-flex flex-column g-medio h-100 overflow-auto" id="list-pedidos" style="display: none;height: 80%;"></div>

                        <div class="cont04 m-t-5" style="display: none;">
                            <div class="p-l-20 p-r-20">
                                <table class="table browser no-border">
                                    <tbody>
                                        <tr>
                                            <td class="text-muted" width="120px;">Cliente</td>
                                            <td class="text-left font-medium pedido-cliente"></td>
                                        </tr>
                                        <tr class="display-delivery" style="display: none;">
                                            <td class="text-muted">Tel&eacute;fono</td>
                                            <td class="text-left pedido-telefono"></td>
                                        </tr>
                                        <tr class="display-delivery display-pedido-email" style="display: none;">
                                            <td class="text-muted">Email</td>
                                            <td class="text-left pedido-email"></td>
                                        </tr>
                                        <tr class="display-delivery display-pedido-direccion" style="display: none;">
                                            <td class="text-muted">Direcci&oacute;n</td>
                                            <td class="text-left pedido-direccion"></td>
                                        </tr>
                                        <tr class="display-delivery display-pedido-referencia" style="display: none;">
                                            <td class="text-muted">Referencia</td>
                                            <td class="text-left pedido-referencia"></td>
                                        </tr>
                                        <tr class="display-delivery" style="display: none;">
                                            <td class="text-muted" width="120px;">Entrega</td>
                                            <td class="text-left font-medium pedido-tipo-entrega"></td>
                                        </tr>
                                        <tr class="display-delivery display-hora-entrega" style="display: none;">
                                            <td class="text-muted" width="120px;">Hora</td>
                                            <td class="text-left font-medium pedido-hora-entrega"></td>
                                        </tr>
                                        <tr class="display-delivery display-pedido-repartidor" style="display: none;">
                                            <td class="text-muted">Repartidor</td>
                                            <td class="text-left pedido-repartidor"></td>
                                        </tr>
                                        <!-- <tr class="display-delivery display-pedido-pago" style="display: none;">
                                            <td class="text-muted">Tipo pago</td>
                                            <td class="text-left pedido-pago"></td>
                                        </tr> -->
                                        <tr class="display-pedido-monto">
                                            <td class="text-muted">Monto total</td>
                                            <td class="text-left pedido-total"></td>
                                        </tr>
                                        <!-- <tr class="display-delivery display-pedido-total-amortizado" style="display: none;">
                                            <td class="text-muted">Monto amortizado</td>
                                            <td class="text-left pedido-total-amortizado"></td>
                                        </tr> -->
                                    </tbody>
                                </table>
                            </div>
                            <div class="p-l-10 p-t-10 b-b b-t bg-light-inverse" style="display: flex;">
                                <h6 class="text-inverse font-medium">Productos</h6>
                            </div>
                            <div class="comment-widgets m-t-0" id="list-pedidos-detalle"></div>
                        </div>
                    </div>
                    <div id="static-list-pedidos" style="display: none;">
                        <div class="comment-widgets m-t-4 d-flex flex-column g-medio h-100 overflow-auto" style="display: none">
                            <div class="d-flex flex-row comment-list por_consumo">
                                <div class="w-100 d-flex justify-content-between align-items-end r-order-item">
                                    <div class="r-details">
                                        
                                        <p class="order-name mb-0" id="order-name-por_consumo">
                                            POR CONSUMOs
                                        </p>
                                        
                                        <input type="text" id="input_por_consumo" style="display: none; width: 100%;" value="POR CONSUMO" placeholder="Escribe tu comentario...">
                                        <p class="order-units m-b-0 font-13">
                                            1 Unidad(es)
                                        </p>
                                    </div>
                                    <div class="price">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card-footer card-footer-right m-t-4" style="display: none; padding: .6rem .5rem">
                    <div style="display: flex; width: 100%; justify-content: space-between; gap: 1rem">
                        <div class="d-flex flex-column" style="gap: .5rem; width: 100%">
                            <div class="d-flex justify-content-around">
                                <div style="width:100%">
                                    <div class="mensaje-pago" style="display: none;"></div>

                                    <div class="input-group" id="content_pagos" style="display: none;">
                                        <div class="input-group-prepend display-cod-voucher" style="height:50px">
                                            <span class="input-group-text bg-white" style="display: grid;padding:4px 6px">
                                                <small class="font-12 text-left">COD VOUCHER</small>
                                                <div class="text-left font-12"></div>
                                            </span>
                                        </div>

                                        <input type="text" class="form-control form-control-sm display-cod-voucher" style="height: 50px; border-left: 0px; border-right: 0px;" name="cod_voucher" id="cod_voucher" autocomplete="off" />

                                        <div class="input-group-prepend display-pago-efectivo" style="height:50px">
                                            <span class="input-group-text bg-white" style="display: grid;padding:4px 6px">
                                                <small class="font-12 text-left">EFE</small>
                                                <div class="text-left font-12"><?php echo Session::get('moneda'); ?></div>
                                            </span>
                                        </div>
                                        <input type="text" class="form-control form-control-sm display-pago-efectivo doble_clic" style="height: 50px; border-left: 0px; border-right: 0px;" name="pago_efe" id="pago_efe" autocomplete="off" />

                                        <div class="input-group-prepend display-pago-tarjeta" style="height:50px">
                                            <span class="input-group-text bg-white" style="display: grid;padding:4px 6px">
                                                <small class="font-12 text-left">TAR</small>
                                                <div class="text-left font-12"><?php echo Session::get('moneda'); ?></div>
                                            </span>
                                        </div>
                                        <input type="text" class="form-control form-control-sm display-pago-tarjeta doble_clic" style="height: 50px;border-left: 0px; border-right: 0px;" name="pago_tar" id="pago_tar" value="0.00" autocomplete="off" />

                                        <div class="input-group-prepend display-pago-tarjeta" style="height:50px">
                                            <span class="input-group-text bg-white" style="display: grid;padding:4px 6px">
                                                <small class="font-12 text-left">YAPE</small>
                                                <div class="text-left font-12"><?php echo Session::get('moneda'); ?></div>
                                            </span>
                                        </div>
                                        <input type="text" class="form-control form-control-sm display-pago-tarjeta doble_clic" style="height: 50px;border-left: 0px; border-right: 0px;" name="pago_yape" id="pago_yape" value="0.00" autocomplete="off" />

                                        <div class="input-group-append display-pago-default" style="border-left: 1px solid #ced4da;">
                                            <span class="input-group-text bg-header" style="display:grid;height:50px;padding:4px 6px">
                                                <small class="text-left font-bold">Sub Total</small>
                                                <div class="text-left"><?php echo Session::get('moneda'); ?> <span class="SubtotalPedido">0.00</span></div>
                                            </span>
                                        </div>
                                        <div class="input-group-append display-pago-default" style="border-left: 1px solid #ced4da;">
                                            <span class="input-group-text bg-header" style="display:grid;height:50px;padding:4px 6px">
                                                <small class="text-left font-bold">Descuento</small>
                                                <div class="text-left"><?php echo Session::get('moneda'); ?> <span class="totalDescuento">0.00</span></div>
                                            </span>
                                        </div>
                                        <div class="input-group-append display-pago-default" style="border-left: 1px solid #ced4da;">
                                            <span class="input-group-text bg-header" style="display:grid;height:50px;padding:4px 6px">
                                                <small class="text-left font-bold">Delivery</small>
                                                <div class="text-left"><?php echo Session::get('moneda'); ?> <span class="totalDelivery">0.00</span></div>
                                            </span>
                                        </div>

                                        <div class="input-group-append display-pago-default view_comision_tarjeta" style="border-left: 1px solid #ced4da; display: none;">
                                            <span class="input-group-text bg-header" style="display:grid;height:50px;padding:4px 6px">
                                                <small class="text-left font-bold">Comisión</small>
                                                <div class="text-left"><?php echo Session::get('moneda'); ?> <span class="comisionTarjeta">0.00</span></div>
                                            </span>
                                        </div>

                                        <div class="input-group-append display-pago-default" style="border-left: 1px solid #ced4da;">
                                            <span class="input-group-text bg-header" style="display:grid;height:50px;padding:4px 6px">
                                                <small class="text-left font-bold">Monto Total</small>
                                                <div class="text-left"><?php echo Session::get('moneda'); ?> <span class="totalPedidoMenosTarjeta">0.00</span></div>
                                            </span>
                                        </div>

                                        <div class="input-group-append display-pago-default">
                                            <span class="input-group-text bg-header text-success" style="display:grid;height:50px;padding:4px 6px">
                                                <small class="font-10 text-left">VUELTO</small>
                                                <div class="text-left"><?php echo Session::get('moneda'); ?> <span id="vuelto">0.00</span></div>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="d-flex justify-between" style="justify-content: space-between;">
                                <div>
                                    <span class="btn-agregar-productos" data-toggle="tooltip" data-placement="top" data-original-title="Agregar platos"></span>
                                    <button type="button" class="btn btn-secondary btn-cancelar-pedido" data-toggle="tooltip" data-placement="top" data-original-title="Regresar"><i class="fas fa-undo-alt"></i></button>
                                    <button type="button" id="openDialog" class="btn btn-secondary openDialogBtn" data-toggle="tooltip" data-placement="top" data-original-title="Descuento y comisión" style="background:#fdbf79; color:#5f5f5f;border:none"><i class="fas fa-gift"></i></button>
                                    <div class="btn-group display-opciones-pedido" style="display: none;">
                                        <button type="button" class="btn btn-inverse dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                            <i class="fas fa-ellipsis-v"></i>
                                        </button>
                                        <div class="dropdown-menu">
                                            <a href="javascript:void(0);" class="dropdown-item opc-ticket-pedido"><i class="fa fa-list"></i> Ticket reparto</a>
                                            <a href="javascript:void(0);" class="dropdown-item opc-whatsapp-pedido"><i class="fab fa-whatsapp"></i> Enviar mensaje</a>
                                            <div class="opc-editar-pedido"></div>
                                            <div class="opc-facturar-pedido"></div>
                                            <div class="opc-print-pedido"></div>
                                            <a href="javascript:void(0);" class="dropdown-item opc-anular-pedido"><i class="fas fa-trash"></i> Anular pedido</a>
                                        </div>
                                    </div>
                                    <button type="button" id="openDialogDelivery" class="btn btn-secondary openDialogBtnDelivery" data-toggle="tooltip" data-placement="top" data-original-title="Delivery" style="background:#ffa9a3;border:none;display:none"><i class=" fas fa-shipping-fast"></i></button>
                                </div>

                                <div>
                                    <span class="btn_cancelar_pedido" data-toggle="tooltip" data-placement="top" data-original-title="Cancelar pedido"></span>
                                    <span class="btn-submit-dividir-cuenta" data-toggle="tooltip" data-placement="top" data-original-title="Dividir cuenta"></span>
                                    <!-- BOTÓN DE COBRAR (verde) QUE SE HA REEMPLAZADO -->
                                    <span class="btn-submit-cobrar" data-toggle="tooltip" data-placement="top" data-original-title="Realizar pago"></span>
                                </div>
                            </div>
                        </div>

                        <!-- Inicio: modal de descuentos por consumo -->
                        <dialog class="dialogBtn" style="padding:8px;background: #fcf8ec;place-items:end;border:none;border-radius:8px;filter:drop-shadow(0 0 8px gray);">
                            <table class="table table-condensed">
                                <thead>
                                    <tr class="display-icbpr">
                                        <th class="p-b-5">Impuesto a la bolsa - ICBPER</th>
                                        <th class="text-right p-b-5">
                                        <div class="input-group input-group-sm">
                                                
                                                <input
                                                type="number"
                                                id="impuesto_bolsa"
                                                class="form-control"
                                                placeholder="0.00"
                                                >
                                                <span class="input-group-text">S/</span>
                                            </div>
                                        </th>
                                    </tr>
                                    
                                    <tr class="display-descuento">
                                        <th class="p-b-5"><a href="javascript:void(0);" onclick="descuento_factura()" class="link">Cortes&iacute;a / Descuento <i class="ti-info-alt text-warning font-10" data-original-title="Puede generar una cortesia o ingresar un descuento por aqu铆" data-toggle="tooltip" data-placement="top"></i></a></th>
                                        <th class="text-right p-b-5">
                                            <input type="hidden" name="descuento_monto_hidden" id="descuento_monto_hidden" class="descuento" value="0.00">
                                            <input type="hidden" name="descuento_tipo_hidden" id="descuento_tipo_hidden" value="">
                                            <input type="hidden" name="descuento_motivo_hidden" id="descuento_motivo_hidden" value="">
                                            <input type="hidden" name="descuento_personal_hidden" id="descuento_personal_hidden" value="">
                                            <span><?php echo Session::get('moneda'); ?>
                                                <span class="descuento">0.00</span>
                                            </span>
                                        </th>
                                    </tr>
                                    <tr class="display-descuento">
                                        <th class="p-b-5">Tipo</th>
                                        <th class="text-right p-b-5">
                                        <select id="tipo_descuento_select" class="form-control">
                                            <option value="0" selected>Seleccionar</option>
                                            <option value="1">Cortesía</option>
                                            <option value="2">Descuento</option>
                                            <option value="3">Crédito Personal</option>
                                        </select>
                                        </th>
                                    </tr>

                                    <tr class="display-personal" style="display: none;">
                                        <th class="p-b-5">Personal</th>
                                        <th class="text-right p-b-5">
                                        <select id="personal_descuento" class="form-control">
                                            
                                        </select>
                                        </th>
                                    </tr>

                                    <tr class="display-descuento-monto" style="display: none;">
                                        <th class="p-b-5">Monto</th>
                                        <th class="text-right p-b-5">
                                            <div class="d-flex flex-column align-items-end gap-1">
                                            <!-- Control % -->
                                            <div class="input-group input-group-sm" >
                                                <input
                                                type="number"
                                                id="descuento_porcentaje"
                                                class="form-control"
                                                placeholder="0"
                                                >
                                                <span class="input-group-text">%</span>
                                            </div>
                                            <!-- Control S/ -->
                                            <div class="input-group input-group-sm">
                                                
                                                <input
                                                type="number"
                                                id="descuento_monto_fijo"
                                                class="form-control"
                                                placeholder="0.00"
                                                >
                                                <span class="input-group-text">S/</span>
                                            </div>
                                            </div>
                                        </th>
                                    </tr>

                                    
                                    <!-- 3) Motivo -->
                                    <tr id="fila_motivo_descuento" >
                                        <th class="p-b-5">Motivo</th>
                                        <th class="text-right p-b-5">
                                        <textarea id="descuento_motivo" class="form-control" rows="2" placeholder="Escribe el motivo…"></textarea>
                                        </th>
                                    </tr>
                                    
                                    <tr class="display-comision-delivery">
                                        <th class="p-b-5">Comision delivery</th>
                                        <th class="text-right p-b-5">
                                        <div class="input-group input-group-sm">
                                                
                                                <input
                                                type="number"
                                                id="comision_delivery"
                                                class="form-control"
                                                placeholder="0.00"
                                                >
                                                <span class="input-group-text">S/</span>
                                            </div>
                                        </th>
                                    </tr>

                                    <tr id="fila_observacion" >
                                        <th class="p-b-5">Observación</th>
                                        <th class="text-right p-b-5">
                                        <textarea id="observacion" class="form-control" rows="2" placeholder="Escribe la observación"></textarea>
                                        </th>
                                    </tr>
                                    
                                </thead>
                            </table>

                            <div>
                                <button type="button" class="btn btn-secondary closeDialogBtn">Cancelar</button>
                                <button type="button" id="btn_descuentos" class="btn btn-success">Aceptar</button>
                            </div>
                        </dialog>
                        <!-- Fin: modal de descuentos por consumo -->

                        <!-- Inicio: modal de delivery -->
                        <dialog class="dialogBtnDelivery col-md-6 col-sm-11" style="background: #fcf8ec;place-items:end;border:none;border-radius:8px;filter:drop-shadow(0 0 8px gray);">
                            <div class="row p-3">
                                <div class="col-md-12 m-b-40">
                                <label class="font-13 text-inverse">Tipo de entrega</label>
                                <div class="btn-group btn-group-toggle w-100" data-toggle="buttons">
                                    <label class="btn waves-effect waves-light btn-tipo-entrega-1 btn-secondary active">
                                    <input type="radio" name="tipo_entrega_modal" id="tipo_entrega_1_modal" value="1" autocomplete="off" checked> A DOMICILIO
                                    </label>
                                    <label class="btn waves-effect waves-light btn-tipo-entrega-2 btn-secondary">
                                    <input type="radio" name="tipo_entrega_modal" id="tipo_entrega_2_modal" value="2" autocomplete="off"> POR RECOGER
                                    </label>
                                </div>
                                </div>

                                <div class="col-md-7 floating-labels">
                                <div class="form-group m-b-40">
                                    <select class="selectpicker form-control bg-t" name="hora_entrega_modal" id="hora_entrega_modal" data-style="form-control btn-default" title="Seleccionar" data-live-search="true" autocomplete="off" data-size="5" required>
                                    <optgroup>
                                        <!-- Opciones de hora -->
                                        <option value="10:00:00">10:00 AM</option>
                                        <option value="10:30:00">10:30 AM</option>
                                        <option value="11:00:00">11:00 AM</option>
                                        <option value="11:30:00">11:30 AM</option>
                                        <option value="12:00:00">12:00 AM</option>
                                        <option value="12:30:00">12:30 AM</option>
                                        <option value="13:00:00">01:00 PM</option>
                                        <option value="13:30:00">01:30 PM</option>
                                        <option value="14:00:00">02:00 PM</option>
                                        <option value="14:30:00">02:30 PM</option>
                                        <option value="15:00:00">03:00 PM</option>
                                        <option value="15:30:00">03:30 PM</option>
                                        <option value="16:00:00">04:00 PM</option>
                                        <option value="16:30:00">04:30 PM</option>
                                        <option value="17:00:00">05:00 PM</option>
                                        <option value="17:30:00">05:30 PM</option>
                                        <option value="18:00:00">06:00 PM</option>
                                        <option value="18:30:00">06:30 PM</option>
                                        <option value="19:00:00">07:00 PM</option>
                                        <option value="19:30:00">07:30 PM</option>
                                        <option value="20:00:00">08:00 PM</option>
                                        <option value="20:30:00">08:30 PM</option>
                                        <option value="21:00:00">09:00 PM</option>
                                        <option value="21:30:00">09:30 PM</option>
                                        <option value="22:00:00">10:00 PM</option>
                                        <option value="22:30:00">10:30 PM</option>
                                    </optgroup>
                                    </select>
                                    <span class="bar"></span>
                                    <label for="hora_entrega_modal">Hora de entrega</label>
                                </div>
                                </div>

                                <div class="col-md-5 floating-labels">
                                <div class="form-group m-b-40">
                                    <input type="text" class="form-control input-mayus" name="comision_delivery_modal" id="comision_delivery_modal" autocomplete="off" />
                                    <span class="bar"></span>
                                    <label for="comision_delivery_modal">Comisión delivery</label>
                                </div>
                                </div>

                                <div class="col-md-7 floating-labels">
                                <div class="form-group letMayMin m-b-20">
                                    <input type="text" class="form-control input-mayus bg-t" name="nomb_cliente_modal" id="nomb_cliente_modal" autocomplete="off" required />
                                    <span class="bar"></span>
                                    <label for="nomb_cliente_modal">Nombre cliente</label>
                                </div>
                                </div>

                                <div class="col-md-5 floating-labels">
                                <div class="form-group m-b-20">
                                    <input type="text" class="form-control bg-t" name="telefono_cliente_modal" id="telefono_cliente_modal" autocomplete="off" required />
                                    <span class="bar"></span>
                                    <label for="telefono_cliente_modal">Teléfono</label>
                                </div>
                                </div>

                                <div class="col-4 floating-labels">
                                <div class="form-group letMayMin m-t-20 m-b-40">
                                    <select class="selectpicker form-control bg-t" name="id_tdoc_modal" id="id_tdoc_modal" data-style="form-control btn-default" title="Seleccionar" data-live-search-style="begins" data-live-search="true">
                                    <option value="1">DNI</option>
                                    <option value="2">RUC</option>
                                    </select>
                                    <span class="bar"></span>
                                    <label for="id_tdoc_modal">Tipo Doc.</label>
                                </div>
                                </div>

                                <div class="col-8 floating-labels">
                                <div class="form-group tdocInput m-t-20 m-b-40">
                                    <input type="text" class="form-control bg-t" name="num_cliente_modal" id="num_cliente_modal" autocomplete="off" />
                                    <span class="bar"></span>
                                    <label for="num_cliente_modal">Número</label>
                                </div>
                                </div>

                                <div class="col-md-12 floating-labels">
                                <div class="form-group m-b-40">
                                    <input type="text" class="form-control input-mayus bg-t" name="direccion_cliente_modal" id="direccion_cliente_modal" autocomplete="off" required />
                                    <span class="bar"></span>
                                    <label for="direccion_cliente_modal">Dirección</label>
                                </div>
                                </div>

                                <div class="col-md-12 floating-labels">
                                <div class="form-group m-b-20">
                                    <input type="text" class="form-control input-mayus bg-t" name="referencia_cliente_modal" id="referencia_cliente_modal" autocomplete="off" required />
                                    <span class="bar"></span>
                                    <label for="referencia_cliente_modal">Referencia</label>
                                </div>
                                </div>

                                <div class="col-sm-12 floating-labels">
                                <div class="form-group m-t-20 m-b-20">
                                    <select class="selectpicker form-control bg-t" name="id_repartidor_modal" id="id_repartidor_modal" data-style="form-control btn-default" title="Seleccionar" data-live-search-style="begins" data-live-search="true" required>
                                    <?php foreach ($this->Repartidor as $key => $value): ?>
                                        <option value="<?php echo $value['id_usu']; ?>"><?php echo $value['nombres'] . ' ' . $value['ape_paterno'] . ' ' . $value['ape_materno']; ?></option>
                                    <?php endforeach; ?>
                                    <?php if (Session::get('opc_01') == 1) { ?>
                                        <optgroup>
                                        <option value="2222">DIDI FOOD</option>
                                        <option value="4444">PEDIDOS YA</option>
                                        </optgroup>
                                    <?php } ?>
                                    </select>
                                    <span class="bar"></span>
                                    <label for="id_repartidor_modal">Repartidor</label>
                                </div>
                                </div>
                            </div>

                            <div>
                            <button type="button" class="btn btn-secondary closeDialogBtnDelivery">Cancelar</button>
                            <button type="button" id="btnActualizarDataDelivery" class="btn btn-success">Aceptar</button>
                        </div>
                        </dialog>

                        <!-- Fin: modal de delivery -->
                    </div>
                </div>
                <!-- aside_fin: lista de pedidos por mesa -->
            </form>
        </div>
    </div>
</div>
<!-- fin: CAMBIO PRINCIPAL -->

<div id="card2"></div>
<div class="">
    <button class="waves-effect waves-light btn-inverse btn btn-circle btn-sm btn-up" style="bottom: 50px"><i class="ti-arrow-circle-up text-white"></i></button>
    <button class="waves-effect waves-light btn-inverse btn btn-circle btn-sm btn-down" style="bottom: 10px"><i class="ti-arrow-circle-down text-white"></i></button>
</div>

<div class="modal inmodal" id="modal-cambiar-mesa" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static" data-keyboard="true">
    <div class="modal-dialog modal-md">
        <div class="modal-content animated bounceInTop">
            <form id="form-cambiar-mesa" method="post" enctype="multipart/form-data" action="<?php echo URL; ?>venta/CambiarMesa">
                <div class="modal-header">
                    <h4 class="modal-title">Cambiar Mesa</h4>
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Cerrar</span></button>
                </div>
                <div class="modal-body p-0">
                    <div class="row floating-labels" style="margin-left: 0px; margin-right: 0px;">
                        <div class="col-sm-6 bg-light-inverse">
                            <h5 class="m-t-30 m-b-40"><i class="ti-angle-double-down"></i> Origen</h5>
                            <div class="form-group m-b-40">
                                <select class="selectpicker form-control" id="cod_salon_origen_opc01" data-style="form-control btn-default bg-transparent" title="Seleccionar" data-live-search-style="begins" data-live-search="true" required>
                                    <?php foreach ($this->Salon as $key => $value): ?>
                                        <option value="<?php echo $value['id_salon']; ?>"><?php echo $value['descripcion']; ?></option>
                                    <?php endforeach; ?>
                                </select>
                                <span class="bar"></span>
                                <label for="cod_salon_origen_opc01">Sal&oacute;n</label>
                            </div>
                            <div class="form-group m-b-30">
                                <select class="selectpicker form-control" name="cod_mesa_origen_opc01" id="cod_mesa_origen_opc01" data-style="form-control btn-default bg-transparent" title="Seleccionar" data-live-search-style="begins" data-live-search="true" title="Seleccionar" required="required" data-size="5">
                                    <option value="0"></option>
                                </select>
                                <span class="bar"></span>
                                <label for="cod_mesa_origen_opc01">Mesa</label>
                            </div>
                        </div>
                        <div class="col-sm-6 bg-header b-l">
                            <h5 class="m-t-30 m-b-40"><i class="ti-angle-double-up"></i> Destino</h5>
                            <div class="form-group m-b-40">
                                <select class="selectpicker form-control" id="cod_salon_destino_opc01" data-style="form-control btn-default bg-transparent" title="Seleccionar" data-live-search-style="begins" data-live-search="true" required>
                                    <?php foreach ($this->Salon as $key => $value): ?>
                                        <option value="<?php echo $value['id_salon']; ?>"><?php echo $value['descripcion']; ?></option>
                                    <?php endforeach; ?>
                                </select>
                                <span class="bar"></span>
                                <label for="cod_salon_destino_opc01">Sal&oacute;n</label>
                            </div>
                            <div class="form-group m-b-30">
                                <select class="selectpicker form-control" name="cod_mesa_destino_opc01" id="cod_mesa_destino_opc01" data-style="form-control btn-default bg-transparent" title="Seleccionar" data-live-search-style="begins" data-live-search="true" title="Seleccionar" required="required" data-size="5">
                                    <option value="0"></option>
                                </select>
                                <span class="bar"></span>
                                <label for="cod_mesa_destino_opc01">Mesa</label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-success">Aceptar</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="modal inmodal" id="modal-mover-pedidos" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static" data-keyboard="true">
    <div class="modal-dialog modal-md">
        <div class="modal-content animated bounceInTop">
            <form id="form-mover-pedidos" method="post" enctype="multipart/form-data" action="<?php echo URL; ?>venta/MoverPedidos">
                <div class="modal-header">
                    <h4 class="modal-title">Mover Pedidos</h4>
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Cerrar</span></button>
                </div>
                <div class="modal-body p-0">
                    <div class="row floating-labels" style="margin-left: 0px; margin-right: 0px;">
                        <div class="col-sm-6 bg-light-inverse">
                            <h5 class="m-t-30 m-b-40"><i class="ti-angle-double-down"></i> Origen</h5>
                            <div class="form-group m-b-40">
                                <select class="selectpicker form-control" id="cod_salon_origen_opc02" data-style="form-control btn-default bg-transparent" title="Seleccionar" data-live-search-style="begins" data-live-search="true" required>
                                    <?php foreach ($this->Salon as $key => $value): ?>
                                        <option value="<?php echo $value['id_salon']; ?>"><?php echo $value['descripcion']; ?></option>
                                    <?php endforeach; ?>
                                </select>
                                <span class="bar"></span>
                                <label for="cod_salon_origen_opc02">Sal&oacute;n</label>
                            </div>
                            <div class="form-group m-b-30">
                                <select class="selectpicker form-control" name="cod_mesa_origen_opc02" id="cod_mesa_origen_opc02" data-style="form-control btn-default bg-transparent" title="Seleccionar" data-live-search-style="begins" data-live-search="true" title="Seleccionar" required="required" data-size="5">
                                    <option value="0"></option>
                                </select>
                                <span class="bar"></span>
                                <label for="cod_mesa_origen_opc02">Mesa</label>
                            </div>
                        </div>
                        <div class="col-sm-6 bg-header b-l">
                            <h5 class="m-t-30 m-b-40"><i class="ti-angle-double-up"></i> Destino</h5>
                            <div class="form-group m-b-40">
                                <select class="selectpicker form-control" id="cod_salon_destino_opc02" data-style="form-control btn-default bg-transparent" title="Seleccionar" data-live-search-style="begins" data-live-search="true" required>
                                    <?php foreach ($this->Salon as $key => $value): ?>
                                        <option value="<?php echo $value['id_salon']; ?>"><?php echo $value['descripcion']; ?></option>
                                    <?php endforeach; ?>
                                </select>
                                <span class="bar"></span>
                                <label for="cod_salon_destino_opc02">Sal&oacute;n</label>
                            </div>
                            <div class="form-group m-b-30">
                                <select class="selectpicker form-control" name="cod_mesa_destino_opc02" id="cod_mesa_destino_opc02" data-style="form-control btn-default bg-transparent" title="Seleccionar" data-live-search-style="begins" data-live-search="true" title="Seleccionar" required="required" data-size="5">
                                    <option value="0"></option>
                                </select>
                                <span class="bar"></span>
                                <label for="cod_mesa_destino_opc02">Mesa</label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-success">Aceptar</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="modal inmodal" id="modal-lista-menu" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static" data-keyboard="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content animated bounceInTop">
            <div class="modal-header">
                <h4 class="modal-title">Lista de productos</h4>
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Cerrar</span></button>
            </div>
            <div class="modal-body p-0">
                <!-- Nav tabs -->
                <div class="vtabs customvtab">
                    <ul class="nav nav-tabs tabs-vertical bg-header list_categorias_menu" role="tablist" style="min-width: 200px;"></ul>
                    <!-- Tab panes -->
                    <div class="tab-content w-100 p-0">
                        <div class="justify-center m-t-40 categoriamenu">
                            <div class="text-center">
                                <h2><i class="ti ti-arrow-circle-left"></i></h2>
                                <h4 class="">Seleccione una categor&iacute;a</b></h4>
                                <h6 class="text-center">para visualizar sus productos</h6>
                            </div>
                        </div>
                        <div class="tab-pane active" id="categoriamenu" role="tabpanel" style="display: none">
                            <div class="card-body p-0">
                                <div class="row floating-labels m-t-30">
                                    <div class="col-lg-7 offset-lg-5">
                                        <div class="row">
                                            <div class="form-group col-12 m-b-20">
                                                <input type="text" class="form-control search_filter_menu" id="search_filter_menu" autocomplete="off" placeholder="Buscar producto">
                                                <span class="bar"></span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="p-0">
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="table-responsive p-b-10">
                                            <table class="table table-condensed table-hover b-t" id="list_platos_menu" width="100%">
                                                <thead class="table-head">
                                                    <tr>
                                                        <th>Nombre</th>
                                                        <th class="text-right">Estado</th>
                                                    </tr>
                                                </thead>
                                                <tbody class="tb-st"></tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-success" data-dismiss="modal">Aceptar</button>
            </div>
        </div>
    </div>
</div>

<div class="modal inmodal" id="modal-editar-pedido" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static" data-keyboard="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content animated bounceInTop">
            <form id="form-editar-pedido" method="post" enctype="multipart/form-data">
                <input type="hidden" name="id_pedido" id="id_pedido" />
                <div class="modal-header b-0">
                    <h4 class="modal-title">Confirmar pedido</h4>
                </div>
                <div class="modal-body">
                    <div class="row floating-labels m-t-40">
                        <div class="col-md-12 display-pedido-repartidor-edit" style="display: block;">
                            <div class="form-group m-b-40 cbu">
                                <select class="selectpicker form-control p-0" name="id_repartidor_edit" id="id_repartidor_edit" data-style="form-control btn-default" title="Seleccionar" data-size="5" data-live-search-style="begins" data-live-search="true" autocomplete="off">
                                    <?php foreach ($this->Repartidor as $key => $value): ?>
                                        <option value="<?php echo $value['id_usu']; ?>"><?php echo $value['nombres'] . ' ' . $value['ape_paterno'] . ' ' . $value['ape_materno']; ?></option>
                                    <?php endforeach; ?>
                                    <optgroup>
                                        <option value="2222">DIDI FOOD</option>
                                        <!-- <option value="3333">UBER</option> -->
                                        <option value="4444">PEDIDOS YA</option>
                                    </optgroup>
                                </select>
                                <span class="bar"></span>
                                <label for="id_repartidor_edit">Repartidor</label>
                            </div>
                        </div>
                        <div class="col-md-12 display-entrega-programada floating-labels" style="display: block;">
                            <div class="form-group m-b-40">
                                <select class="selectpicker form-control" name="hora_entrega_edit" id="hora_entrega_edit" data-style="form-control btn-default" title="Seleccionar" data-live-search="true" autocomplete="off" data-size="5">
                                    <optgroup>
                                        <option value="10:00:00">10:00 AM</option>
                                        <option value="10:30:00">10:30 AM</option>
                                        <option value="11:00:00">11:00 AM</option>
                                        <option value="11:30:00">11:30 AM</option>
                                        <option value="12:00:00">12:00 AM</option>
                                        <option value="12:30:00">12:30 AM</option>
                                        <option value="13:00:00">01:00 PM</option>
                                        <option value="13:30:00">01:30 PM</option>
                                        <option value="14:00:00">02:00 PM</option>
                                        <option value="14:30:00">02:30 PM</option>
                                        <option value="15:00:00">03:00 PM</option>
                                        <option value="15:30:00">03:30 PM</option>
                                        <option value="16:00:00">04:00 PM</option>
                                        <option value="16:30:00">04:30 PM</option>
                                        <option value="17:00:00">05:00 PM</option>
                                        <option value="17:30:00">05:30 PM</option>
                                        <option value="18:00:00">06:00 PM</option>
                                        <option value="18:30:00">06:30 PM</option>
                                        <option value="19:00:00">07:00 PM</option>
                                        <option value="19:30:00">07:30 PM</option>
                                        <option value="20:00:00">08:00 PM</option>
                                        <option value="20:30:00">08:30 PM</option>
                                        <option value="21:00:00">09:00 PM</option>
                                        <option value="21:30:00">09:30 PM</option>
                                        <option value="22:00:00">10:00 PM</option>
                                        <option value="22:30:00">10:30 PM</option>
                                    </optgroup>
                                </select>
                                <span class="bar"></span>
                                <label for="hora_entrega_edit">Hora de entrega</label>
                            </div>
                        </div>
                        <div class="col-md-12 display-comision-delivery floating-labels" style="display: block">
                            <div class="form-group m-b-40">
                                <input type="text" class="form-control input-mayus" name="comision_delivery" id="comision_delivery" autocomplete="off" />
                                <span class="bar"></span>
                                <label for="comision_delivery">Comisi&oacute;n delivery</label>
                            </div>
                        </div>
                        <div class="col-sm-12 display-tipo-pago floating-labels" style="display: block">
                            <div class="form-group m-b-40">
                                <select class="selectpicker form-control" name="id_tipo_pago" id="id_tipo_pago" data-style="form-control btn-default" data-live-search-style="begins" data-live-search="true">
                                    <?php foreach ($this->TipoPago as $key => $value): ?>
                                        <option label="<?php echo $value['id_pago']; ?>" value="<?php echo $value['id_tipo_pago']; ?>"><?php echo $value['descripcion']; ?></option>
                                    <?php endforeach; ?>
                                </select>
                                <span class="bar"></span>
                                <label for="id_tipo_pago">Tipo pago</label>
                            </div>
                        </div>
                        <div class="col-md-12 display-paga-con floating-labels" style="display: block">
                            <div class="form-group m-b-40">
                                <input type="text" class="form-control input-mayus" name="total_pagar" id="total_pagar" autocomplete="off" />
                                <input type="hidden" class="form-control input-mayus" name="total_pagar_" id="total_pagar_" autocomplete="off" />
                                <span class="bar"></span>
                                <label for="paga_con">Total a pagar</label>
                            </div>
                        </div>
                        <div class="col-md-12 display-paga-con floating-labels" style="display: block">
                            <div class="form-group m-b-40">
                                <input type="text" class="form-control input-mayus" name="paga_con" id="paga_con" autocomplete="off" />
                                <span class="bar"></span>
                                <label for="paga_con">Paga con</label>
                            </div>
                        </div>
                        <div class="col-md-12 display-entrega-programada floating-labels" style="display: block;">
                            <div class="form-group m-b-40 dec">
                                <input type="text" class="form-control" name="amortizacion" id="amortizacion" autocomplete="off" />
                                <span class="bar"></span>
                                <label for="amortizacion">Amortizar - <?php echo Session::get('moneda'); ?></label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer b-0">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-success">Aceptar</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="modal inmodal" id="modal-editar-venta-pago" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static" data-keyboard="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content animated bounceInTop">
            <form id="form-editar-venta-pago" method="post" enctype="multipart/form-data">
                <input type="hidden" name="id_venta" id="id_venta" />
                <input type="hidden" name="id_venta_tipopago" id="id_venta_tipopago" />
                <div class="modal-header b-0">
                    <h4 class="modal-title">Editar tipo de pago</h4>
                </div>
                <div class="modal-body">
                    <div class="row floating-labels m-t-40">
                        <div class="col-sm-12 display-tipo-pago floating-labels" style="display: block">
                            <div class="form-group m-b-40">
                                <select class="selectpicker form-control" name="id_tipo_pago_v" id="id_tipo_pago_v" data-style="form-control btn-default" data-live-search-style="begins" data-live-search="true">
                                    <?php foreach ($this->TipoPago as $key => $value): ?>
                                        <option label="<?php echo $value['id_pago']; ?>" value="<?php echo $value['id_tipo_pago']; ?>"><?php echo $value['descripcion']; ?></option>
                                    <?php endforeach; ?>
                                </select>
                                <span class="bar"></span>
                                <label for="id_tipo_pago_v">Tipo pago</label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer b-0">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-success">Aceptar</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="modal inmodal" id="modal-cliente" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static" data-keyboard="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content animated bounceInTop">
            <form id="form-cliente" method="post" enctype="multipart/form-data">
                <input type="hidden" name="id_cliente" id="id_cliente">
                <input type="hidden" name="tipo_cliente" id="tipo_cliente">
                <div class="modal-header justify-center">
                    <h4 class="modal-title-cliente">Nuevo Cliente</h4>

                    <?php if (0 == 1) { ?>
                        <div class="ml-auto m-t-10">
                            <input name="tipo_cli" type="radio" value="1" id="td_dni" class="with-gap radio-col-light-green" />
                            <label for="td_dni"><?php echo Session::get('diAcr'); ?></label>
                            <input name="tipo_cli" type="radio" value="2" id="td_ruc" class="with-gap radio-col-light-green" />
                            <label for="td_ruc"><?php echo Session::get('tribAcr'); ?></label>
                        </div>
                    <?php } else { ?>
                        <div class="ml-auto m-t-10"></div>
                    <?php } ?>

                </div>
                <div class="modal-body p-0 floating-labels">
                    <div class="row" style="margin-left: 0px; margin-right: 0px;">
                        <!-- Column -->
                        <div class="col-lg-6 b-r">
                            <div class="row card-body p-0">
                                <div class="col-md-12 p-l-10 p-t-10 b-t b-b m-b-40 bg-light-info" style="display: flex;">
                                    <h6 class="font-medium">Información personal</h6>
                                </div>
                                <div class="col-md-6 block01" style="display: block;">
                                    <div class="form-group ent m-b-40">
                                        <input type="text" class="form-control dni" name="dni" id="dni" minlength="<?php echo Session::get('diCar'); ?>" maxlength="<?php echo Session::get('diCar'); ?>" value="" autocomplete="off" required="required" />
                                        <span class="bar"></span>
                                        <label for="dni" class="c-dni"><?php echo Session::get('diAcr'); ?></label>
                                    </div>
                                </div>
                                <div class="col-md-6 block02" style="display: none;">
                                    <div class="form-group ent m-b-40">
                                        <input type="text" class="form-control ruc" name="ruc" id="ruc" minlength="<?php echo Session::get('tribCar'); ?>" maxlength="<?php echo Session::get('tribCar'); ?>" value="" autocomplete="off" required="required" />
                                        <span class="bar"></span>
                                        <label for="ruc" class="c-ruc"><?php echo Session::get('tribAcr'); ?></label>
                                    </div>
                                </div>
                                <div class="col-md-12 block07" style="display: none;">
                                    <div class="form-group letNumMayMin m-b-40">
                                        <input type="text" class="form-control ruc input-mayus" name="razon_social" id="razon_social" value="" autocomplete="off" required="required" />
                                        <span class="bar"></span>
                                        <label for="razon_social">Raz&oacute;n Social</label>
                                    </div>
                                </div>
                                <div class="col-md-12 block03" style="display: block;">
                                    <div class="form-group letMayMin m-b-40">
                                        <input type="text" class="form-control dni input-mayus" name="nombres" id="nombres" value="" autocomplete="off" required="required" />
                                        <span class="bar"></span>
                                        <label for="nombres">Nombre completo</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- Column -->
                        <div class="col-lg-6">
                            <div class="row card-body bg-header p-0">
                                <div class="col-md-12 p-l-10 p-t-10 b-t b-b m-b-40 bg-light-inverse" style="display: flex;">
                                    <h6 class="font-medium">Contacto</h6>
                                </div>
                                <div class="col-md-6 block05" style="display: block;">
                                    <div class="form-group m-b-40">
                                        <input type="text" class="form-control bg-transparent dni input-mayus" name="fecha_nac" id="fecha_nac" value="" autocomplete="off" data-mask="99-99-9999" />
                                        <span class="bar"></span>
                                        <label for="fecha_nac">Fecha de Nacimiento</label>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group ent m-b-40">
                                        <input type="text" class="form-control bg-transparent" name="telefono" id="telefono" value="" autocomplete="off" />
                                        <span class="bar"></span>
                                        <label for="telefono">Tel&eacute;fono</label>
                                    </div>
                                </div>
                                <div class="col-md-12 block06" style="display: block;">
                                    <div class="form-group m-b-40">
                                        <input type="text" class="form-control bg-transparent dni" name="correo" id="correo" value="" autocomplete="off" />
                                        <span class="bar"></span>
                                        <label for="correo">Correo electr&oacute;nico</label>
                                    </div>
                                </div>

                                <?php if (0 == 1) { ?>
                                    <div class="col-md-12 block08" style="display: none;">
                                    <?php } else { ?>
                                        <div class="col-md-12">
                                        <?php } ?>

                                        <div class="form-group m-b-40">
                                            <input type="text" class="form-control bg-transparent" name="direccion" id="direccion" value="-" autocomplete="off" required="required" />
                                            <span class="bar"></span>
                                            <label for="direccion">Direcci&oacute;n</label>
                                        </div>
                                        </div>
                                        <div class="col-md-12">
                                            <div class="form-group m-b-40">
                                                <input type="text" class="form-control bg-transparent input-mayus" name="referencia" id="referencia" value="" autocomplete="off" />
                                                <span class="bar"></span>
                                                <label for="referencia">Referencia</label>
                                            </div>
                                        </div>
                                    </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Volver</button>
                        <button type="submit" class="btn btn-success">Aceptar</button>
                    </div>
            </form>
        </div>
    </div>
</div>

<!-- menu modal-->

<div class="modal fade bd-example-modal-xl" tabindex="-1" role="dialog" aria-labelledby="myExtraLargeModalLabel" aria-hidden="true" id="modal-super-test">
    <div class="modal-dialog custom-modal" style="margin:auto">
        <div class="modal-content">
            <div class="card mb-0 c-bg-gray">
                <div class="card-body bg-menu-panel c-title-color slice-wraper">
                    <div class="row">
                        <div class="col-xs-12 col-md-7 modal-order-left">
                            <div class="menu bg-white c-small-font-size card mb-0">
                                <div class="section-date" style="display:none;">
                                    <div class="lb-btn">
                                        <span class="icon"><i class="far fa-calendar"></i></span>
                                        <span>Mier 9 May 2024</span>
                                    </div>
                                    <span>-</span>
                                    <div class="lb-btn">
                                        <span class="icon"><i class="far fa-clock"></i></span>
                                        <span>07:59 AM</span>
                                    </div>
                                    <div class="ml-auto">
                                        <button class="btn btn-primary">
                                            <span>
                                                <i class="fas fa-sync-alt"></i>
                                            </span>
                                        </button>
                                    </div>
                                </div>
                                <div class="section-category">
                                    
                                    <div class="list-categories">

                                    </div>
                                </div>
                                <div class="section-search">
                                    <div class="search-input">
                                        <input type="text" id="input-buscar-carta" placeholder="Buscar dentro de la carta">
                                        <span>
                                            <i class="fa fa-search" aria-hidden="true"></i>
                                        </span>
                                    </div>
                                    <div class="change-mode btn-group">
                                        <button class="btn btn-primary"><span><i class="fas fa-th"></i></span></button>
                                        <button class="btn btn-secondary"><span><i class="fas fa-list-ul"></i></span></button>
                                    </div>
                                </div>
                                <div class="section-list">

                                </div>
                                
                                <div class="hidden-md-up">
                                    <button class="btn btn-primary w-100" id="ver_seleccionados" style="padding:1rem;">ver seleccionados</button>
                                </div>
                            </div>
                        </div>

                        <!-- Agregar JS para mostrar aside-right del modal de pedidos, en mobile -->
                        <div class="col-xs-12 col-md-5 modal-order-right">
                            <div class="place-order c-small-font-size card">
                                <div class="po-header text-white">
                                    <div class="icon">
                                        <!-- Botón para ocultar el aside-right en mobile -->
                                        <button onclick="closeModalOrder()"><i class="fas fa-arrow-left"></i></button>
                                    </div>
                                    <div class="info">
                                        <span id="info_mesa"></span>
                                        <span>Orden #000</span>
                                    </div>
                                <div class="d-flex align-items-center gap-2">

                                    <?php if (Session::get('rol') == 5): ?>
                                        
                                        <!-- Botón cancelar pedido -->
                                        <button
                                        id="btn_cancelar_pedido_mozo" 
                                        type="button" 
                                        class="btn btn-sm btn-outline-light"
                                        title="Cancelar el pedido">
                                        <i class="fas fa-ban"></i>
                                        </button>

                                        <!-- Botón dropdown para imprimir comandas -->
                                        <div class="dropdown">
                                        <button
                                            class="btn btn-sm btn-outline-light dropdown-toggle"
                                            type="button"
                                            id="btn_dropdown_comandas_mozo"
                                            data-toggle="dropdown"
                                            aria-haspopup="true"
                                            aria-expanded="false"
                                            title="Imprimir comandas">
                                            <i class="fas fa-print"></i>
                                        </button>
                                        <div class="dropdown-menu" aria-labelledby="btn_dropdown_comandas_mozo" id="imprimir_comandas_mozo">
                                            <!-- Aquí se inyectarán las opciones desde listarComandas(...) -->
                                        </div>
                                        </div>

                                    <?php endif; ?>

                                    <!-- Botón cerrar -->
                                    <button 
                                        type="button" 
                                        class="btn btn-sm btn-outline-light" 
                                        id="btn_close_aside"
                                        title="Cerrar">
                                        &times;
                                    </button>

                                </div>
                                </div>
                                <div class="po-filters">
                                    
                                        <div>
                                            <input type="hidden" name="cliente_pedido_id" id="cliente_pedido_id" value="1" />
                                            <input type="hidden" name="cliente_pedido_tipo" id="cliente_pedido_tipo" value="1" />
                                            <div class="input-group">
                                                <div class="opcion-cliente-pedido input-group-prepend">
                                                    <a class="input-group-prepend" href="javascript:void(0)" data-original-title="Registrar nuevo cliente" data-toggle="tooltip" data-placement="top">
                                                        <span class="input-group-text bg-header">
                                                            <small>
                                                            <i class="fas fa-user-plus"></i>
                                                        </small>
                                                    </span>
                                                </a>
                                            </div>
                
                                                <input type="text" class="form-control" name="buscar_cliente_pedido" id="buscar_cliente_pedido" autocomplete="off">
                                                <a class="input-group-append" href="javascript:void(0)" id="btnClientePedidoLimpiar" data-original-title="Limpiar datos" data-toggle="tooltip" data-placement="top">
                                                    <span class="input-group-text bg-header">
                                                        <small><i class="fas fa-times link-danger"></i></small>
                                                    </span>
                                                </a>
                                            </div>
                                        </div>
                                    
                                    <div class="c-custom-select" id="select_mozo">

                                    </div>
                                </div>
                                <div class="po-items">

                                </div>
                                <div class="sub-total">
                                    <div>
                                        <span>Subtotal</span>
                                        <span>S/0.00</span>
                                    </div>
                                    <div>
                                        <span>igv 10%</span>
                                        <span>S/0.00</span>
                                    </div>
                                </div>
                                <div class="total">
                                    <span>Total</span>
                                    <span>S/0.00</span>
                                </div>
                                <div class="po-confirm">
                                    <!-- Botón para mostrar el aside-right en mobile -->
                                    <button class="btn btn-primary" id="btn_registrar_pedido">realizar pedido</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<?php require_once('views/venta/compartido.php'); ?>
<script src="https://js.pusher.com/7.0/pusher.min.js"></script>
<script type="text/javascript">
    $(function() {
        $('#restau').addClass("active");
        $('#tab1').addClass("active");
        $('.tp1').addClass("active");
    });

    var id_mozo_ = $("#id_mozo option:first-child").val()
    var id_repartidor_ = $("#id_repartidor option:first-child").val()
</script>
<?php if (Session::get('rol') <> 0) { ?>
    <style type="text/css">
        /* Inicio: Collapsible styles */
        .collapsible {
            background-color: #fff;
            cursor: pointer;
            padding: 18px;
            width: 100%;
            border: none;
            text-align: left;
            outline: none;
            font-size: 13px;
            color: #515562;

            &:hover {
                background-color: #f5f5f5;
            }
        }

        .selected {
            background-color: #e0f7fa;
            border: 1px solid #00acc1;
        }

        .demo-checkbox {

            border-radius: 4px;
            padding: 1rem;

        }

        .content {
            padding: 0px 0px 3px 0px;
            display: none;
            overflow: hidden;
            background-color: darkorange;
        }

        /* Fin: Collapsible styles */

        .btn-up {
            position: fixed;
            bottom: 20px;
            right: 20px;
            padding: 25px;
        }

        .btn-down {
            position: fixed;
            bottom: 20px;
            right: 20px;
            padding: 25px;
        }

        .dropdown-toggle::after {
            display: none;
        }

        .btnCobrar {
            color: white;
        }

        .btnDividirCuenta {
            color: white;
        }

        .totalPagar {
            flex: 1;
            font-weight: bold;
        }

        .c-mozo-title {
            padding-left: 1rem;
            padding-right: 1rem;
            display: flex;
            align-items: center;
        }

        .c-mozo-title h2 {
            color: #0f172a;
            font-weight: 400;
            font-size: 1rem;
            text-transform: capitalize;
        }

        .c-mozo-title .state-tables {
            margin-left: auto;
        }

        .list-mesas {
            display: flex;
            flex-wrap: wrap;
            gap: .5rem;
            padding-top: .5rem;
            padding-bottom: .5rem;
            justify-content: center
        }

        #form-nuevo-pedido {
            height: 100%;
            display: flex;
            flex-direction: column;
        }

        .r-order-item .r-details {

            display: flex;
            flex-direction: column;
            gap: .5rem;
        }

        .r-order-item .r-details .order-name {
            font-size: 14px;
            color: #607d8b;
            font-weight: 500;

        }

        .r-order-type-label {
            border-radius: 12px;
            padding: .1rem .4rem;
            font-size: 0.7rem;
            text-transform: lowercase;
            color: rgba(39, 68, 175, 0.6);
            border: 1px solid#3555c7;
        }

        .g-medio {
            gap: .5rem !important;
        }

        :root {
            --custom-primary-color: #0f172a;
            --custom-alert-color: #fc4b6c;
            --c-gray-color: #f3f4fa;
            --c-blue-light-color: #e4eafe;
            --c-font-size-small: 14px;
            --c-title-color: #607d8b;
            --c-text-color: red;
            --c-low-gray-color: #c6c9d3;
            --c-mid-gray-color: #7d8296;
            --c-hight-gray-color: #515562;
            --c-gray-other: #585c6b;
        }

        .custom-bg-primary {
            background: var(--custom-primary-color) !important;
        }

        .custom-bg-alert {
            background: var(--custom-alert-color) !important;
        }

        .custom-text-alert {
            color: var(--custom-alert-color) !important;
        }

        /*utilidades */

        .min-height-0 {
            min-height: 0 !important;
        }

        .c-bg-gray {
            background: var(--c-gray-color) !important;
        }

        .c-small-font-size {
            font-size: var(--c-font-size-small);
        }

        .c-title-color {
            color: var(--c-hight-gray-color);
        }

        /* mesas*/

        .menu {

            height: 750px;
            display: grid;
            grid-template-rows: auto auto auto minmax(auto, 1fr);
            gap: 1rem;
            overflow: hidden;
            padding: 0.3rem;
        }

        .section-date {
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        /* button */
        .lb-btn {
            padding: .5rem .5rem;
            background-color: var(--c-gray-color);
            border-radius: .5rem;
            display: flex;
            align-items: center;
            gap: 1rem;
            padding-right: 2rem;
            border: 1px solid var(--c-low-gray-color);
        }

        .lb-btn .icon {
            display: flex;
            padding: .5rem;
            background-color: white;
            border-radius: 50%;
        }

        .lb-btn.secondary {
            background-color: var(--c-gray-color);
            padding-right: .5rem;
            padding-left: 2rem;
        }

        .lb-btn.secondary .icon {
            background-color: white;
            margin-left: auto;
        }

        .btn-reload-menu {
            margin-left: auto;
            background: #0f172a;
            padding: .75rem;
            color: white;
            border-radius: .5rem;
            text-transform: uppercase;
            cursor: pointer;
        }

        /** quick search*/

        .custom-quick-search {
            position: relative
        }

        .custom-quick-search::after {
            content: "\f00d";
            font-family: "Font Awesome 5 Free";
            /* Icono de la "X" */
            font-weight: 900;
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
            font-size: 14px;
            color: var(--c-mid-gray-color);
            /* display: none; */
        }

        .custom-quick-search input {
            border: 1px solid var(--c-mid-gray-color);
            padding: .375rem .75rem;
            border-radius: .25rem;
        }

        .custom-quick-search input::placeholder {
            color: var(--c-low-gray-color);
        }

        .custom-quick-search input:focus {
            border: 1px solid var(--c-blue-light-color);
            padding: .375rem .75rem;
            border-radius: .25rem;
            border-color: var(--custom-primary-color);
            box-shadow: 0 0 0 3px rgba(121, 82, 179, 0.25);
        }

        .custom-quick-search .result {
            height: 200px;
            width: 200px;
            position: absolute;
            border: 1px solid var(--c-low-gray-color);
            box-shadow: 0 0.5rem 1rem rgba(37, 56, 139, 0.175);
            background-color: white;
            border-radius: 4px;
            padding: .75rem 0 !important;
            margin-top: 4px;
            display: flex;
            flex-direction: column;
            right: 0;
            z-index: 9999;
        }

        .custom-quick-search .result ul {
            padding: 0rem;
            list-style: none;
            flex-grow: 1;
            overflow-y: scroll;
        }

        .custom-quick-search .result ul li {
            padding: 0rem;
            border-bottom: 1px dashed var(--c-low-gray-color);
            padding: .55rem .75rem;
            text-transform: capitalize;
        }

        .custom-quick-search .result ul li:hover {
            background: #e0e7ff;
        }

        .custom-quick-search .result .cq-footer {
            text-align: center;
            font-size: 10px;
            padding: .5rem;
            background: var(--c-gray-color);
        }

        /** cards*/

        /**start category */

.section-category {
  width: 100%;
  overflow-x: auto;               /* Scroll horizontal si se desborda */
  overflow-y: hidden;
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
  scroll-behavior: smooth;
  height: auto;                   /* Altura para 2 filas aprox */
}

.list-categories {
  display: grid;
  grid-auto-flow: column;        /* ✅ Llena primero hacia abajo (dos filas), luego crea columnas hacia la derecha */
  grid-template-rows: repeat(3, auto);  /* ✅ 2 filas automáticas */
  gap: 0.5rem;
}

/* Estilo de cada tarjeta (como antes, con altura más baja) */
.card-category {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #ccc;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  background-color: #fff;
  cursor: pointer;
  font-size: 13px;
  height: 38px;
  white-space: nowrap;
  transition: all 0.2s ease;
  width: auto;
}


.card-category.selected {
  background-color: #7460ee;
  color: #fff;
  border-color: #7460ee;
}

.card-category .icon i {
  font-size: 16px;
}

.card-category .title {
  font-weight: 500;
}

.card-category .badge {
  background-color: #eee;
  padding: 1px 6px;
  border-radius: 12px;
  font-size: 12px;
  color: #333;
}

.card-category.selected .badge {
  background-color: rgba(255, 255, 255, 0.3);
  color: #fff;
}

.card-category .close {
  color: red;
  font-weight: bold;
  cursor: pointer;
  font-size: 14px;
}

/* Scrollbar opcional */
.section-category::-webkit-scrollbar {
  height: 6px;
}
.section-category::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 4px;
}

       
/**end category */
        /** search*/
        .section-search {
        display: flex;
        align-items: center;
        gap: .5rem;          /* separa buscador y botones */
        overflow: hidden;
        flex-wrap: nowrap;   /* todo en una sola fila */
        }

        .section-search .search-input {
        flex: 1 1 auto;      /* que ocupe el espacio restante */
        min-width: 0;        /* permite que encoja en pantallas pequeñas */
        display: flex;
        border-radius: .3rem;
        background-color: white;
        padding: .25rem .35rem;
        border: 1px solid var(--c-mid-gray-color);
        }

        .section-search .search-input input {
        flex-grow: 1;
        border: none;
        background: none;
        }

        .section-search .change-mode {
        flex: 0 0 auto;      /* no se encoje */
        display: inline-flex;
        gap: .25rem;
        }

        .section-search .change-mode .btn {
        width: 36px;
        height: 36px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        }

        /* Ajuste opcional para pantallas muy pequeñas */
        

        /* .section-search .change-mode{
            font-size: 21px;
            border: 1px solid var(--c-low-gray-color);
            display: flex;
            border-radius: .5rem;
            margin-left: 1rem;
        }
        .section-search .change-mode span{
            padding: .45rem .75rem;
        }
        .section-search .change-mode span:not(:first-child){
            border-left: 1px solid var(--c-low-gray-color);
            color: var(--custom-primary-color);
            background : #eff0f6;
        } */
        /** menu list*/

        .section-list {
            display: grid;
            grid-template-columns: repeat(2, minmax(auto, 1fr));
            gap: .5rem;
            height: 100%;
            overflow: scroll;
            /* Firefox */
            scrollbar-width: thin;
            scrollbar-color: rgba(0, 0, 0, 0.2) transparent;

            /* Chrome, Safari, Edge */
            &::-webkit-scrollbar {
                width: 8px;
            }

            &::-webkit-scrollbar-thumb {
                background: rgba(0, 0, 0, 0.2);
                border-radius: 4px;
            }

            &::-webkit-scrollbar-track {
                background: transparent;
            }
        }

        .section-list-table {
            display: flex;
            flex-direction: column;
        }

        .section-list-table .content-table {
            flex-grow: 1;
        }

        .section-list-table .navigation .page-link {
            border: 1px solid var(--c-low-gray-color);
        }

        .card-menu img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            object-position: left;
        }

        .card-menu {
            padding: .5rem;
            background-color: white;
            border-radius: .5rem;
            display: flex;
            flex-direction: column;
            gap: .5rem;
            border: 1px solid var(--c-low-gray-color);
            transition: all .5s ease;
        }

        .card-menu:hover {
            border: 1px solid var(--custom-primary-color);
        }

        .card-menu .card-menu-header {
                width: 100%;
                height: 120px;       /* Alto fijo para todas las imágenes */
                overflow: hidden;    /* Oculta partes que sobresalgan */
                border-radius: .3rem;
                background: var(--c-gray-color);
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .card-menu .card-menu-header img {
                width: 100%;
                height: 100%;
                object-fit: cover;   /* Recorta para llenar todo el espacio */
                object-position: center; /* Centra la imagen en el recorte */
                display: block;
            }

        .card-menu .menu-category {
            display: flex;
            justify-content: space-between;
            align-items: center;

        }

        .card-menu .menu-category .name {
            background-color: #e0e7ff;
            font-size: 10px;
            padding: .5rem .7rem;
            border-radius: .5rem;
            color: #0f172a;
            border: 1px solid #21388b1c;
        }

        /*payment order*/
        .place-order {
            background-color: white;
            height: 750px;
            display: flex;
            flex-direction: column;
        }

        .po-header {
            display: flex;
            align-items: center;
            gap: 1rem;
            padding: 1rem;
            box-shadow: 0 4px 6px -3px rgba(0, 0, 0, 0.1);
            background: var(--custom-primary-color);
        }

        .po-header .info {
            margin-left: auto;
            margin-right: auto;
            display: flex;
            flex-direction: column;
            text-align: center;
        }

        .po-header .icon span {

            display: flex;
            padding: 1rem;
            border-radius: 50%;
            font-size: 16px;
        }

        .po-header .action span {
            /* background-color: var(--c-gray-color); */
            display: flex;
            padding: 1rem;
            border-radius: .5rem;
            border: 2px solid white;
        }

        .po-filters {
            display: flex;
            padding: .5rem;
            box-shadow: inset 0px 0px 8px 1px rgba(0, 0, 0, 0.1);
            gap: .5rem;
        }

        .po-filters .c-custom-select {
            
            border: none;
            border-radius: .5rem;
            flex-grow: 1;
            border: 1px solid var(--c-low-gray-color);
            display: flex;
            border-radius: .5rem;
        
        }

        .po-filters .c-custom-select select {

            background: inherit;
            width: 100%;
            font-size: 14px;
            margin-left: auto;
            color: var(--c-mid-gray-color);
            border: none;
        }

        .po-items {
            flex-grow: 1;
            overflow-y: scroll;
            /* Firefox */
            scrollbar-width: thin;
            scrollbar-color: rgba(0, 0, 0, 0.2) transparent;

            /* Chrome, Safari, Edge */
            &::-webkit-scrollbar {
                width: 8px;
            }

            &::-webkit-scrollbar-thumb {
                background: rgba(0, 0, 0, 0.2);
                border-radius: 4px;
            }

            &::-webkit-scrollbar-track {
                background: transparent;
            }
        }

        .po-items .empty-items {
            min-height: 60px;
            display: flex;
            justify-content: center;
            align-items: center;
            border-bottom: 1px dashed var(--c-gray-color);
            text-transform: capitalize;
        }

        .po-items .po-item {
            display: flex;
            padding: .7rem;
            gap: .5rem;
            border-bottom: 1px dashed var(--c-low-gray-color);
        }

        .po-items .po-item .img {
            background-color: var(--c-gray-color);
            padding: .5rem;
            border-radius: .5rem;
        }

        .po-items .po-item .img img {
            width: 100%;
            max-width: 80px;
        }

        .po-items .po-item .description {
            flex-grow: 1;
        }

        .po-items .po-item .description .info {
            display: flex;
            flex-direction: column;
            gap: .2rem;
            margin-bottom: .2rem
        }

        .po-items .po-item .description .info .price {
            color: var(--text-paragrap-color);
        }

        .po-items .po-item .description .actions {
            display: flex;
            justify-content: space-between;
        }

        .po-items .po-item .description .actions .quantity {
            background-color: var(--c-gray-color);
            display: flex;
            gap: .5rem;
            padding: 0rem .5rem;
            border-radius: .75rem;
        }

        .sub-total div {
            display: flex;
            justify-content: space-between;
        }

        .sub-total {
            padding: .7rem;
            box-shadow: 0 -4px 6px -3px rgba(0, 0, 0, 0.1);
            border: 1px solid var(--c-blue-light-color)
        }

        .total {
            display: flex;
            justify-content: space-between;
            padding: .7rem;
        }

        .po-actions {
            padding: 1rem;
            display: flex;
            gap: 1rem;
        }

        .po-actions>span {
            flex-grow: 1;
        }

        .po-confirm button {
            width: 100%;
            font-size: 15px;
            height: 5rem;
            text-transform: capitalize;
            background-color: var(--custom-primary-color);
            border: none;
        }

        .slice-wraper {
            transition: all 1s ease;
        }

        .bg-menu-panel {
            background: none !important;
        }

        @media (min-width: 767px) {
            .section-category .list-categories {
                justify-content: start;
            }

            .card-category {
                
                padding: 1rem;
                
            }

            .section-search .search-input {
                padding-left: 2rem;
            }

            .section-list {
                grid-template-columns: repeat(4, minmax(auto, 1fr));
                gap: 1rem;
            }


            .bg-menu-panel {
                background: var(--c-gray-color) !important;
            }
        }

        @media (max-width: 767px) {
            .list-mesas {
                gap: 0rem !important;
            }

            /* INICIO: estilos que ocultan en sidebar-right del modal de pedidos */
            .slice-wraper .modal-order-right {
                display: none;
                position: absolute;
                top: 0;
                left: 0;
                padding: 0;
            }
        }


        .custom-modal {
            max-width: 90%;
            width: 90%;
        }

        .card-category.selected {
            border-color: #007bff;
            /* Borde azul para la categoría seleccionada */
        }
        .po-item-wrapper.new-item {
        background-color: #e6f7ff;  /* un azul muy suave */
        transition: background-color 0.3s ease;
        }

        /* Si quieres que sólo el header cambie */
        .po-item-wrapper.new-item .po-item {
        background-color: #e6f7ff;
        }

        .section-list.list-view {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        }

        .section-list.grid-view {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        }

        .section-list.grid-view .card-menu-wrapper {
        width: calc(33.333% - 1rem); /* 3 por fila */
        }



    </style>
<?php } ?>