<input type="hidden" id="condicion" value="0"/>
<input type="hidden" id="tipo_atencion" value="1"/>
<input type="hidden" id="tipo_atencion_opcional" value="1"/>
<style>
/* MODERN POS STYLES INJECTED */
:root {
    --primary-color: #4f46e5;
    --success-color: #10b981;
    --card-bg: #ffffff;
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
.card-modern {
    background: var(--card-bg);
    border-radius: 16px;
    box-shadow: var(--shadow-md);
    border: 1px solid #e2e8f0;
}
.table-modern { border-collapse: separate; border-spacing: 0; width: 100%; border-radius: 12px; overflow: hidden; }
.table-modern thead th { background-color: #f1f5f9; color: #64748b; font-weight: 600; text-transform: uppercase; padding: 12px 16px; }
.table-modern tbody td { border-bottom: 1px solid #f1f5f9; padding: 12px 16px; }
</style>
<div class="display-agrupacion-platos" style="display: none">
    <div class="row" id="agrupacion_platos_list"></div>
</div>
<div class="display-agrupacion-pedidos" style="display: block">
    <div class="row" id="agrupacion_pedidos_list"></div>
</div>
<div class="row display-lista" style="display: none;">
    <div class="col-md-12">
        <div class="card card-modern">
            <div class="card-body p-t-0 p-b-0"></div>
            <!-- Nav tabs -->
            <ul class="nav nav-tabs customtab" role="tablist">
                <li class="nav-item" id="tab1"> <a class="nav-link active" data-toggle="tab" href="#tab-1" role="tab"><span class="hidden-sm-up">Mesa</span> <span class="hidden-xs-down font-medium">MESA <span class="label label-success" id="cant_pedidos_mesa"></span></span></a> </li>
                <li class="nav-item" id="tab2"> <a class="nav-link" data-toggle="tab" href="#tab-2" role="tab"><span class="hidden-sm-up">Para llevar</span> <span class="hidden-xs-down font-medium">PARA LLEVAR <span class="label label-success" id="cant_pedidos_most"></span></span></a> </li>
                <li class="nav-item" id="tab3"> <a class="nav-link" data-toggle="tab" href="#tab-3" role="tab"><span class="hidden-sm-up">Delivery</span> <span class="hidden-xs-down font-medium">DELIVERY <span class="label label-success" id="cant_pedidos_del"></span></span></a> </li>
            </ul>
            <!-- Tab panes -->
            <div class="tab-content">
                <div class="tab-pane active" id="tab-1" role="tabpanel">
                    <div class="table-responsive p-0">
                        <table class="table table-modern stylish-table" width="100%">
                            <thead class="table-head">
                                <tr>
                                    <th width="10%">Mesa</th>
                                    <th width="40%">Cantidad/Producto</th>
                                    <th width="15%">Tiempo</th>
                                    <th width="15%">Estado</th>
                                    <th width="10%">Mozo</th>
                                    <th width="10%" class="text-right">Acci&oacute;n</th>
                                </tr>
                            </thead>
                            <tbody id="list_pedidos_mesa" class="tb-st"></tbody>
                        </table>
                    </div>
                </div>
                <div class="tab-pane" id="tab-2" role="tabpanel">
                    <div class="table-responsive p-0">
                        <table class="table table-modern table-hover table-condensed stylish-table" width="100%">
                            <thead class="table-head">
                                <tr>
                                    <th width="10%">Pedido</th>
                                    <th width="40%">Cantidad/Producto</th>
                                    <th width="15%">Tiempo</th>
                                    <th width="15%">Estado</th>
                                    <th width="10%">Cajero</th>
                                    <th width="10%" class="text-right">Acci&oacute;n</th>
                                </tr>
                            </thead>
                            <tbody id="list_pedidos_most" class="tb-st"></tbody>
                        </table>
                    </div>
                </div>
                <div class="tab-pane" id="tab-3" role="tabpanel">
                    <div class="table-responsive p-0">
                        <table class="table table-modern table-hover table-condensed stylish-table" width="100%">
                            <thead class="table-head">
                                <tr>
                                    <th width="10%">Pedido</th>
                                    <th width="40%">Cantidad/Producto</th>
                                    <th width="15%">Tiempo</th>
                                    <th width="15%">Estado</th>
                                    <th width="10%">Cajero</th>
                                    <th width="10%" class="text-right">Acci&oacute;n</th>
                                </tr>
                            </thead>
                            <tbody id="list_pedidos_del" class="tb-st"></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="https://js.pusher.com/7.0/pusher.min.js"></script>