<input type="hidden" id="moneda" value="<?php echo Session::get('moneda'); ?>"/>
<input type="hidden" id="opc_02" value="<?php echo Session::get('opc_02'); ?>"/>
<input type="hidden" id="cod_ape" value="<?php echo $this->apc; ?>"/>

<style>
/* === VARIABLES CSS === */
:root {
    --primary-color: #5664d2;
    --success-color: #1bc943;
    --warning-color: #f4a100;
    --danger-color: #e74c3c;
    --info-color: #3498db;
    --dark-color: #2c3e50;
    --light-bg: #f8f9fa;
    --card-shadow: 0 4px 20px rgba(0,0,0,0.05);
    --border-radius: 12px;
    --transition: all 0.3s ease;
}

/* === HEADER MODERN === */
.page-titles-modern {
    background: linear-gradient(135deg, var(--primary-color) 0%, #667eea 100%);
    padding: 1.5rem 2rem;
    border-radius: var(--border-radius);
    margin-bottom: 2rem;
    color: white;
    box-shadow: var(--card-shadow);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.page-titles-modern h4 {
    color: white;
    font-weight: 600;
    margin-bottom: 0.5rem;
    font-size: 1.5rem;
}

.breadcrumb-modern {
    background: rgba(255, 255, 255, 0.2);
    padding: 0.4rem 1rem;
    border-radius: 20px;
    display: inline-block;
    font-size: 0.9rem;
}

.breadcrumb-modern .breadcrumb-item, .breadcrumb-modern a {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    transition: color 0.2s;
}

.breadcrumb-modern a:hover {
    color: white;
    text-decoration: underline;
}

.breadcrumb-modern .breadcrumb-item.active {
    color: white;
    font-weight: 500;
}

/* === CARDS & STATS === */
.card-modern {
    background: white;
    border-radius: var(--border-radius);
    box-shadow: var(--card-shadow);
    border: none;
    margin-bottom: 1.5rem;
}

.stat-row {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #f0f0f0;
    transition: var(--transition);
    border-radius: 8px;
}
.stat-row:hover { background: #f9f9f9; }
.stat-row:last-child { border-bottom: none; }

.stat-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.8rem;
    color: white;
    font-size: 0.9rem;
}

/* === TABLES === */
/* === TABLES === */
.table-modern {
    width: 100%;
    margin-bottom: 1rem;
    color: var(--dark-color);
    border-collapse: separate;
    border-spacing: 0;
}
.table-modern thead tr th {
    background: linear-gradient(135deg, #667eea 0%, var(--primary-color) 100%) !important;
    color: white !important;
    padding: 1rem 0.75rem !important;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    border: none;
    border-radius: 0;
}
.table-modern thead tr th:first-child { border-top-left-radius: 8px; }
.table-modern thead tr th:last-child { border-top-right-radius: 8px; }

.table-modern tbody td {
    padding: 0.8rem 0.75rem !important;
    font-size: 0.9rem;
    vertical-align: middle;
    border-top: 1px solid #f0f0f0;
    color: #555;
    font-weight: 500;
}
.table-modern tbody tr:hover {
    background-color: #f1f4f9 !important;
    transform: scale(1.005);
    transition: all 0.2s ease;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    z-index: 10;
    position: relative;
}
.table-modern tbody tr:last-child td { border-bottom: none; }

/* === TABS === */
.nav-tabs.customtab .nav-link.active {
    border-bottom: 2px solid var(--primary-color);
    color: var(--primary-color);
    font-weight: 500;
}
.nav-tabs.customtab .nav-link {
    border: none;
    color: #666;
    padding: 0.8rem 1rem;
}

.animate-in { animation: fadeInUp 0.5s ease; }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* === VARIABLES CSS === */
:root {
    --primary-color: #5664d2;
    --success-color: #1bc943;
    --warning-color: #f4a100;
    --danger-color: #e74c3c;
    --info-color: #3498db;
    --dark-color: #2c3e50;
    --light-bg: #f8f9fa;
    --card-shadow: 0 4px 20px rgba(0,0,0,0.05);
    --border-radius: 12px;
    --transition: all 0.3s ease;
}

/* === ENCABEZADO MODERNO === */
.page-titles-modern {
    background: linear-gradient(135deg, var(--primary-color) 0%, #667eea 100%);
    padding: 1.5rem 2rem;
    border-radius: var(--border-radius);
    margin-bottom: 2rem;
    color: white;
    box-shadow: var(--card-shadow);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* === UX DE TABLA MEJORADA === */
.table-responsive, .scroll-1, .scroll-2, .scroll-3 {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e0 #f8f9fa;
}
.scroll-1::-webkit-scrollbar, .scroll-2::-webkit-scrollbar, .scroll-3::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
.scroll-1::-webkit-scrollbar-track, .scroll-2::-webkit-scrollbar-track, .scroll-3::-webkit-scrollbar-track {
    background: #f8f9fa; 
}
.scroll-1::-webkit-scrollbar-thumb, .scroll-2::-webkit-scrollbar-thumb, .scroll-3::-webkit-scrollbar-thumb {
    background-color: #cbd5e0;
    border-radius: 3px;
}

/* Cabeceras Adhesivas (Sticky) */
.table-head th {
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* Sombra para profundidad al desplazarse */
}

/* Alineación numérica y fuente */
.table-modern tbody td.text-right {
    font-family: 'Roboto Mono', 'Courier New', monospace;
    letter-spacing: -0.5px;
    font-weight: 500;
    color: var(--dark-color);
}
.table-modern tbody td.font-bold {
    font-weight: 700 !important;
}

.scroll-1{
  max-height: 620px;   /* el alto que necesites */
  overflow-y: auto;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.scroll-1 thead th{
  position: sticky;
  top: 0;
  z-index: 5;
}

/* Control estricto de columnas solo en tabla principal */
.arq-main-table th, .arq-main-table td{
  white-space: nowrap;
}

.arq-main-table {
  min-width: 820px;
}

.arq-secondary-card {
  width: 100%;
  max-width: 100%;
}

.round {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
}

.round i,
.round svg {
  line-height: 1;
  font-size: 16px;
}

@media (max-width: 1199.98px) {
  .arq-layout > [class*="col-"] {
    margin-bottom: 1rem;
  }
}

@media (max-width: 991.98px) {
  .page-titles-modern {
    padding: 1.2rem 1rem;
  }

  .page-titles-modern h4 {
    font-size: 1.2rem;
  }

  .scroll-1 {
    max-height: none;
  }

  .table-head th {
    font-size: 0.75rem;
    padding: 0.65rem 0.5rem !important;
  }
}

@media (max-width: 767.98px) {
  .nav-tabs.customtab {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }

  .nav-tabs.customtab .nav-item {
    float: none;
    display: inline-block;
  }
}

</style>

<div class="page-titles-modern animate-in">
    <div>
        <h4><i class="fas fa-calculator mr-2"></i>Resumen de Caja</h4>
        <div class="breadcrumb-modern">
            <a href="<?php echo URL; ?>informe" class="breadcrumb-item"><i class="fas fa-home mr-1"></i>Inicio</a>
            <a href="<?php echo URL; ?>informe/finanza_arq" class="breadcrumb-item">Finanzas</a>
            <span class="breadcrumb-item active">Resumen</span>
        </div>
    </div>
</div>
<div class="row arq-layout">
    <div class="col-12 col-md-6 col-xl-3">
        <div class="card-modern">
            <div class="card-body p-0" style="background: linear-gradient(135deg, var(--primary-color) 0%, #667eea 100%); border-radius: 12px 12px 0 0; padding: 1.5rem !important;">
                <div class="text-center">
                    <h4 class="card-title text-white m-b-0 text-codigo" style="font-weight: 600;"></h4>
                    <h6 class="card-title text-white m-0 text-estado" style="opacity: 0.9;"></h6>
                </div>
            </div>
            <div class="card-body p-3"> 
                <div class="mb-2">
                    <small class="text-muted text-uppercase font-weight-bold" style="font-size: 0.7rem;">Usuario</small>
                    <h6 class="c-usuario font-weight-bold mt-0" style="font-size: 0.9rem;"></h6>
                </div>
                <div class="mb-2">
                    <small class="text-muted text-uppercase font-weight-bold" style="font-size: 0.7rem;">Caja</small>
                    <h6 class="c-caja font-weight-bold mt-0" style="font-size: 0.9rem;"></h6>
                </div>
                <div class="mb-2">
                    <small class="text-muted text-uppercase font-weight-bold" style="font-size: 0.7rem;">Turno</small>
                    <h6 class="c-turno font-weight-bold mt-0" style="font-size: 0.9rem;"></h6>
                </div>
                <div class="mb-2">
                    <small class="text-muted text-uppercase font-weight-bold" style="font-size: 0.7rem;">Apertura</small>
                    <h6 class="c-fecha-apertura font-weight-bold mt-0" style="font-size: 0.85rem;"></h6>
                </div>
                <div>
                    <small class="text-muted text-uppercase font-weight-bold" style="font-size: 0.7rem;">Cierre</small>
                    <h6 class="c-fecha-cierre font-weight-bold mt-0" style="font-size: 0.85rem;"></h6>
                </div>
            </div>
        </div>
    </div>
    <div class="col-12 col-md-6 col-xl-3">
        <div class="card-modern w-100 mb-4 h-100 arq-secondary-card">
            <table class="table table-modern table-hover m-b-0">
                    <tbody>
                        <tr class="p-10i">
                            <td style="width:50px;border-top:0px;"><span class="round"><i class="ti ti-harddrive text-white"></i></span>
                            </td>
                            <td style="border-top:0px;">
                                <h6>Apertura caja</h6><small class="text-muted"></small>
                            </td>
                            <td class="text-right font-regular c-monto-apertura" style="border-top:0px;"></td>
                        </tr>
                        <tr class="p-10i" onclick="ingresos()">
                            <td style="width:50px;"><span class="round bg-success"><i class="ti ti-arrow-up text-white"></i></span>
                            </td>
                            <td>
                                <h6>Ingresos</h6><small class="text-muted">Ventas, caja chica</small>
                            </td>
                            <td class="text-right font-regular c-total-ingreso"></td>
                        </tr>                        
                        <tr class="p-10i" onclick="egresos()">
                            <td style="width:50px;"><span class="round bg-danger"><i class="ti ti-arrow-down text-white"></i></span>
                            </td>
                            <td>
                                <h6>Egresos</h6><small class="text-muted">Caja chica</small>
                            </td>
                            <td class="text-right font-regular c-total-egreso"></td>
                        </tr>
                    </tbody>
                </table>
                <div class="row p-3">
                    <div class="col-12 mb-3">
                        <div class="text-center p-3" style="background: #f8f9fa; border-radius: 12px; border: 1px solid #eee;">
                            <h2 class="font-bold text-success m-b-0 c-monto-estimado" style="font-size: 2.5rem;"></h2>
                            <small class="text-uppercase font-weight-bold text-muted">Total en caja (Estimado)</small>
                        </div>
                    </div>
                </div>
                
                <h6 class="px-3 mb-3 font-weight-bold text-dark text-uppercase" style="font-size: 0.8rem;">Desglose de Efectivo y Digitales</h6>
                <div class="row px-3 pb-3">
                    <!-- Efectivo -->
                    <div class="col-6 mb-2">
                        <div class="stat-row">
                            <div class="stat-icon bg-success"><i class="ti ti-wallet"></i></div>
                            <div>
                                <h5 class="m-0 font-weight-bold c-monto-efectivo text-dark"></h5>
                                <small class="text-muted">Efectivo</small>
                            </div>
                        </div>
                    </div>
                    <!-- Tarjeta -->
                    <div class="col-6 mb-2">
                        <div class="stat-row">
                            <div class="stat-icon bg-primary"><i class="ti ti-credit-card"></i></div>
                            <div>
                                <h5 class="m-0 font-weight-bold c-monto-tarjeta text-dark"></h5>
                                <small class="text-muted">Tarjeta</small>
                            </div>
                        </div>
                    </div>
                    <!-- Transferencia -->
                    <div class="col-6 mb-2">
                        <div class="stat-row">
                            <div class="stat-icon bg-info"><i class="fas fa-exchange-alt"></i></div>
                            <div>
                                <h5 class="m-0 font-weight-bold c-monto-tran text-dark"></h5>
                                <small class="text-muted">Transferencia</small>
                            </div>
                        </div>
                    </div>
                    <!-- Yape -->
                    <div class="col-6 mb-2">
                        <div class="stat-row">
                            <div class="stat-icon stat-icon-yape"><i class="fas fa-mobile-alt"></i></div>
                            <div>
                                <h5 class="m-0 font-weight-bold c-monto-yape text-dark"></h5>
                                <small class="text-muted">YAPE</small>
                            </div>
                        </div>
                    </div>
                    <!-- Plin -->
                    <div class="col-6 mb-2">
                        <div class="stat-row">
                            <div class="stat-icon stat-icon-plin"><i class="fas fa-mobile-alt"></i></div>
                            <div>
                                <h5 class="m-0 font-weight-bold c-monto-plin text-dark"></h5>
                                <small class="text-muted">PLIN</small>
                            </div>
                        </div>
                    </div>
                    <!-- Delivery -->
                    <div class="col-6 mb-2">
                        <div class="stat-row">
                            <div class="stat-icon bg-warning"><i class="fas fa-motorcycle"></i></div>
                            <div>
                                <h5 class="m-0 font-weight-bold c-monto-delivery text-dark"></h5>
                                <small class="text-muted">Delivery</small>
                            </div>
                        </div>
                    </div>
                    <!-- Comisiones -->
                     <div class="col-6 mb-2">
                        <div class="stat-row">
                            <div class="stat-icon bg-danger"><i class="fas fa-percent"></i></div>
                            <div>
                                <h5 class="m-0 font-weight-bold c-monto-comisiones text-dark"></h5>
                                <small class="text-muted">Comisiones</small>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row px-3 pb-3">
                    <div class="col-md-6">
                        <div class="alert alert-info text-center m-0 p-2">
                             <h4 class="font-bold m-t-5 c-monto-cierre"></h4>
                             <h6 class="text-uppercase m-b-0" style="font-size: 0.75rem;">Monto Cierre <small>(Efectivo)</small></h6>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="alert alert-warning text-center m-0 p-2">
                             <h4 class="font-bold m-t-5 c-monto-diferencia"></h4>
                             <h6 class="text-uppercase m-b-0" style="font-size: 0.75rem;">Diferencia</h6>
                             <small class="name-c-monto-diferencia"></small>
                        </div>
                    </div>
                </div>               
            </div>
        </div>

    <div class="col-12 col-xl-6">
        <div class="card-modern w-100 h-100 d-flex flex-column">
            <ul class="nav nav-tabs customtab" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active" data-toggle="tab" href="#tab1" role="tab" aria-selected="true"><span class="hidden-sm-up text-tab">Ingresos</span> <span class="hidden-xs-down text-tab">Ingresos</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-toggle="tab" href="#tab2" role="tab" aria-selected="false" onclick="productos();"><span class="hidden-sm-up">Productos</span> <span class="hidden-xs-down">Productos</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-toggle="tab" href="#tab3" role="tab" aria-selected="false" onclick="anulaciones();"><span class="hidden-sm-up">Anulaciones</span> <span class="hidden-xs-down">Anulaciones</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-toggle="tab" href="#tab7" role="tab" aria-selected="false" onclick="canales();"><span class="hidden-sm-up">Canales</span> <span class="hidden-xs-down">Canales</span></a>
                    </li>
                    <!--
                    <li class="nav-item">
                        <a class="nav-link" data-toggle="tab" href="#tab7" role="tab" aria-selected="false" onclick="venta_delivery_list('a');"><span class="hidden-sm-up">Delivery APP</span> <span class="hidden-xs-down">Delivery APP</span></a>
                    </li>
                -->
                </ul>
                <div class="tab-content">
                    <div class="tab-pane active" id="tab1" role="tabpanel">
                        <ul class="nav nav-tabs justify-content-end customtab" role="tablist">
                            <li class="nav-item nav-ing">
                                <a class="nav-link nav-ing-1 active" data-toggle="tab" href="#tab4" role="tab" aria-selected="true" onclick="venta_list(1,'a');"><span class="hidden-sm-up">Ventas</span> <span class="hidden-xs-down">Ventas</span></a>
                            </li>
                            <li class="nav-item nav-ing">
                                <a class="nav-link nav-ing-2" data-toggle="tab" href="#tab5" role="tab" aria-selected="false" onclick="caja_list_i('a');"><span class="hidden-sm-up">Caja chica</span> <span class="hidden-xs-down">Caja chica</span></a>
                            </li>
                            <li class="nav-item nav-egr">
                                <a class="nav-link nav-egr-1" data-toggle="tab" href="#tab6" role="tab" aria-selected="false" onclick="caja_list_e('a');"><span class="hidden-sm-up">Caja chica</span> <span class="hidden-xs-down">Caja chica</span></a>
                            </li>
                        </ul>
                        <div class="tab-content">
                            <div class="tab-pane panel-ing-1 active" id="tab4" role="tabpanel">
                                <div class="row text-center m-t-0 p-l-10 p-r-10">
                                    <div class="col-lg-3 col-md-3 text-center">
                                        <div class="btn-group-toggle" data-toggle="buttons">
                                            <label class="btn btn-block btn btn-secondary btn-xs btn-est-1 m-t-10 m-b-0 active" onclick="venta_list(1,'a')">
                                                <input type="radio" name="options" id="option1" autocomplete="off" checked="">APROBADAS
                                            </label>
                                            <label class="btn btn-block btn btn-secondary btn-xs btn-est-2 m-t-5 m-b-0" onclick="venta_list(1,'i')">
                                                <input type="radio" name="options" id="option2" autocomplete="off" checked="">ANULADAS
                                            </label>
                                        </div>
                                    </div>
                                    <div class="col-lg-3 col-md-3 m-t-20">
                                        <h5 class="m-b-0 font-regular ventas-monto"></h5><small>Total</small>
                                    </div>
                                    <div class="col-lg-3 col-md-3 m-t-20">
                                        <h5 class="m-b-0 font-regular ventas-desc"></h5><a href="javascript:void()" class="link"><small onclick="venta_list(2,'a')">Descuentos</small></a>
                                    </div>
                                    <div class="col-lg-3 col-md-3 m-t-20">
                                        <h5 class="m-b-0 font-regular ventas-oper"></h5><small onclick="">Operaciones</small>
                                    </div>
                                    <div class="col-md-12 m-b-10"></div>
                                </div>
                                <hr class="m-0">
                                <div class="scroll-1">
                                    <table class="table table-modern table-hover m-b-0 arq-main-table" width="100%">
                                        <thead class="table-head">
                                        <tr>
                                            <th style="width:22%;">Documento</th>
                                            <th style="width:18%;">Número</th>
                                            <th class="text-right" style="width:10%;">Delivery.</th>
                                            <th class="text-right" style="width:12%;">Com tarjeta.</th>
                                            <th class="text-right" style="width:12%;">Sub Total.</th>
                                            <th class="text-right" style="width:10%;">Desc.</th>
                                            <th class="text-right" style="width:16%;">Total</th>
                                        </tr>
                                        </thead>

                                        <!-- ✅ aquí va tu body -->
                                        <tbody class="tb-st" id="list-venta"></tbody>
                                    </table>
                                </div>
                                
                            </div>
                            <div class="tab-pane panel-ing-2" id="tab5" role="tabpanel">
                                <div class="row text-center m-t-0 p-l-10 p-r-10">
                                    <div class="col-lg-3 col-md-3 text-center">
                                        <div class="btn-group-toggle" data-toggle="buttons">
                                            <label class="btn btn-block btn btn-secondary btn-xs btn-est-1 m-t-10 m-b-0 active" onclick="caja_list_i('a')">
                                                <input type="radio" name="options" id="option1" autocomplete="off" checked="">APROBADAS
                                            </label>
                                            <label class="btn btn-block btn btn-secondary btn-xs btn-est-2 m-t-5 m-b-0" onclick="caja_list_i('i')">
                                                <input type="radio" name="options" id="option2" autocomplete="off" checked="">ANULADAS
                                            </label>
                                        </div>
                                    </div>
                                    <div class="col-lg-5 col-md-5 m-t-20">
                                        <h5 class="m-b-0 font-regular caja-monto"></h5><small>Total</small></div>
                                    <div class="col-lg-4 col-md-4 m-t-20">
                                        <h5 class="m-b-0 font-regular caja-oper"></h5><small onclick="">Operaciones</small></div>
                                    <div class="col-md-12 m-b-10"></div>
                                </div>
                                <hr class="m-0">
                                <table class="table table-modern m-b-0" width="100%">
                                    <thead class="table-head">
                                        <tr>
                                            <th width="40%">Recibido de</th>
                                            <th width="40%">Motivo</th>
                                            <th class="text-right" width="20%">Total</th>
                                        </tr>
                                    </thead>
                                </table>
                                <div class="scroll-1">
                                    <table class="table table-modern m-b-0">
                                        <tbody class="tb-st" id="list-caja-i"></tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="tab-pane panel-egr-1" id="tab6" role="tabpanel">
                                <div class="row text-center m-t-0 p-l-10 p-r-10">
                                    <div class="col-lg-3 col-md-3 text-center">
                                        <div class="btn-group-toggle" data-toggle="buttons">
                                            <label class="btn btn-block btn btn-secondary btn-xs btn-est-1 m-t-10 m-b-0 active" onclick="caja_list_e('a')">
                                                <input type="radio" name="options" id="option1" autocomplete="off" checked="">APROBADAS
                                            </label>
                                            <label class="btn btn-block btn btn-secondary btn-xs btn-est-2 m-t-5 m-b-0" onclick="caja_list_e('i')">
                                                <input type="radio" name="options" id="option2" autocomplete="off" checked="">ANULADAS
                                            </label>
                                        </div>
                                    </div>
                                    <div class="col-lg-5 col-md-5 m-t-20">
                                        <h5 class="m-b-0 font-regular caja-monto"></h5><small>Total</small></div>
                                    <div class="col-lg-4 col-md-4 m-t-20">
                                        <h5 class="m-b-0 font-regular caja-oper"></h5><small onclick="">Operaciones</small></div>
                                    <div class="col-md-12 m-b-10"></div>
                                </div>
                                <hr class="m-0">
                                <table class="table table-modern m-b-0" width="100%">
                                    <thead class="table-head">
                                        <tr>
                                            <th width="15%">Tipo</th>
                                            <th width="35%">Entregado a</th>
                                            <th width="30%">Motivo</th>
                                            <th class="text-right" width="20%">Total</th>
                                        </tr>
                                    </thead>
                                </table>
                                <div class="scroll-1">
                                    <table class="table table-modern m-b-0">
                                        <tbody class="tb-st" id="list-caja-e"></tbody>
                                    </table>
                                </div>
                            </div>
                        </div>                        
                    </div>
                    <div class="tab-pane" id="tab2" role="tabpanel">
                        <?php if (Session::get('opc_02') == 1) { ?>
                                    <div class="row">
                                        <div class="col-12">
                                            <div class="social-widget">
                                                <div class="soc-content">
                                                    <div class="col-6 b-r">
                                                        <h3 class="font-medium m-t-10 text-info c-pollos-vendidos"></h3>
                                                        <h5 class="text-muted font-14 m-b-0">Vendidos</h5>
                                                        <h5 class="text-muted font-12 m-b-0">(Pollos)</h5>
                                                    </div>
                                                    <div class="col-6">
                                                        <h3 class="font-medium m-t-10 text-warning c-pollos-stock"></h3>
                                                        <h5 class="text-muted font-14 m-b-0">Stock</h5>
                                                        <h5 class="text-muted font-12 m-b-0">(Pollos)</h5>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                        <?php } ?>
                        <table class="table table-modern m-b-0 b-t" width="100%">
                            <thead class="table-head">
                                <tr>
                                    <th style="width: 55%;">Producto</th>
                                    <th class="text-right" style="width: 10%;">Cantidad</th>
                                    <th class="text-right" style="width: 30%;">Total</th>
                                </tr>
                            </thead>
                        </table>
                        <div class="scroll-2">
                            <table class="table table-modern m-b-0">
                                <tbody class="tb-st" id="list-productos"></tbody>
                            </table>
                        </div>
                    </div>
                    <div class="tab-pane" id="tab3" role="tabpanel">
                        <div class="row text-center m-t-0">
                            <div class="col-lg-6 col-md-6 m-t-20">
                                <h5 class="m-b-0 font-regular anul-monto"></h5><small>Total</small></div>
                            <div class="col-lg-6 col-md-6 m-t-20">
                                <h5 class="m-b-0 font-regular anul-oper"></h5><small>Operaciones</small></div>
                            <div class="col-md-12 m-b-10"></div>
                        </div>
                        <hr class="m-0">
                        <table class="table table-modern m-b-0" width="100%">
                            <thead class="table-head">
                                <tr>
                                    <th style="width: 55%;">Producto</th>
                                    <th class="text-right" style="width: 10%;">Cantidad</th>
                                    <th class="text-right" style="width: 30%;">Total</th>
                                </tr>
                            </thead>
                        </table>
                        <div class="scroll-3">
                            <table class="table table-modern m-b-0">
                                <tbody class="tb-st" id="list-anulaciones"></tbody>
                            </table>
                        </div>
                    </div>
                    
                    <div class="tab-pane" id="tab7" role="tabpanel">
                        <ul class="nav nav-tabs justify-content-end customtab" role="tablist">
                            <li class="nav-item">
                                <a class="nav-link active" data-toggle="tab" href="#tab8" role="tab" aria-selected="true"><span class="hidden-sm-up">Aprobadas</span> <span class="hidden-xs-down">Aprobadas</span></a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" data-toggle="tab" href="#tab9" role="tab" aria-selected="false"><span class="hidden-sm-up">Anuladas</span> <span class="hidden-xs-down">Anuladas</span></a>
                            </li>
                        </ul>
                        <div class="tab-content">
                            <div class="tab-pane active" id="tab8" role="tabpanel">
                                <table class="table table-modern table-hover m-b-0">
                                    <tbody>
                                        <tr>
                                            <td style="width:50px;border-top:0px;"><span class="round bg-success"><i class="fas fa-box text-white"></i></span>
                                            </td>
                                            <td style="border-top:0px;">
                                                <h6 class="m-t-5 m-b-0">Salones</h6>Nro de ventas: <span class="cantidad-venta-salon"></span>
                                            </td>
                                            <td class="text-right font-regular monto-venta-salon" style="border-top:0px;"></td>
                                        </tr>
                                        <tr>
                                            <td style="width:50px;"><span class="round bg-primary"><i class="fas fa-shopping-basket text-white"></i></span>
                                            </td>
                                            <td>
                                                <h6 class="m-t-5 m-b-0">Mostrador</h6>Nro de ventas: <span class="cantidad-venta-mostrador"></span>
                                            </td>
                                            <td class="text-right font-regular monto-venta-mostrador"></td>
                                        </tr>                        
                                        <tr>
                                            <td style="width:50px;"><span class="round bg-warning"><i class="fas fa-motorcycle text-white"></i></span>
                                            </td>
                                            <td>
                                                <h6 class="m-t-5 m-b-0">Delivery</h6>Nro de ventas: <span class="cantidad-venta-delivery"></span>
                                            </td>
                                            <td class="text-right font-regular monto-venta-delivery"></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div class="tab-pane" id="tab9" role="tabpanel">
                                <table class="table table-modern table-hover m-b-0">
                                    <tbody>
                                        <tr>
                                            <td style="width:50px;border-top:0px;"><span class="round bg-success"><i class="fas fa-box text-white"></i></span>
                                            </td>
                                            <td style="border-top:0px;">
                                                <h6 class="m-t-5 m-b-0">Salones</h6>Nro de ventas: <span class="cantidad-venta-salon-i"></span>
                                            </td>
                                            <td class="text-right font-regular monto-venta-salon-i" style="border-top:0px;"></td>
                                        </tr>
                                        <tr>
                                            <td style="width:50px;"><span class="round bg-primary"><i class="fas fa-shopping-basket text-white"></i></span>
                                            </td>
                                            <td>
                                                <h6 class="m-t-5 m-b-0">Mostrador</h6>Nro de ventas: <span class="cantidad-venta-mostrador-i"></span>
                                            </td>
                                            <td class="text-right font-regular monto-venta-mostrador-i"></td>
                                        </tr>                        
                                        <tr>
                                            <td style="width:50px;"><span class="round bg-warning"><i class="fas fa-motorcycle text-white"></i></span>
                                            </td>
                                            <td>
                                                <h6 class="m-t-5 m-b-0">Delivery</h6>Nro de ventas: <span class="cantidad-venta-delivery-i"></span>
                                            </td>
                                            <td class="text-right font-regular monto-venta-delivery-i"></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        <!--
                        <table class="table table-hover m-b-0">
                            <tbody>
                                <tr>
                                    <td style="width:50px;border-top:0px;"><span class="round bg-success"><i class="fas fa-box text-white"></i></span>
                                    </td>
                                    <td style="border-top:0px;">
                                        <h6 class="m-t-5 m-b-0">Salones</h6>Nro de ventas: <span class="cantidad-venta-salon"></span>
                                    </td>
                                    <td class="text-right font-regular monto-venta-salon" style="border-top:0px;"></td>
                                </tr>
                                <tr>
                                    <td style="width:50px;"><span class="round bg-primary"><i class="fas fa-shopping-basket text-white"></i></span>
                                    </td>
                                    <td>
                                        <h6 class="m-t-5 m-b-0">Mostrador</h6>Nro de ventas: <span class="cantidad-venta-mostrador"></span>
                                    </td>
                                    <td class="text-right font-regular monto-venta-mostrador"></td>
                                </tr>                        
                                <tr>
                                    <td style="width:50px;"><span class="round bg-warning"><i class="fas fa-motorcycle text-white"></i></span>
                                    </td>
                                    <td>
                                        <h6 class="m-t-5 m-b-0">Delivery</h6>Nro de ventas: <span class="cantidad-venta-delivery"></span>
                                    </td>
                                    <td class="text-right font-regular monto-venta-delivery"></td>
                                </tr>
                            </tbody>
                        </table>
                        -->
                        <!--
                        <div class="row text-center m-t-0 p-l-10 p-r-10">
                            <div class="col-lg-6 col-md-6 m-t-20">
                                <h5 class="m-b-0 font-regular ventas-delivery-monto"></h5><small>Total</small>
                            </div>
                            <div class="col-lg-6 col-md-6 m-t-20">
                                <h5 class="m-b-0 font-regular ventas-delivery-oper"></h5><small>Operaciones</small>
                            </div>
                            <div class="col-md-12 m-b-10"></div>
                        </div>
                        <hr class="m-0">
                        <table class="table m-b-0" width="100%">
                            <thead class="table-head">
                                <tr>
                                    <th>#</th>
                                    <th>Documento</th>
                                    <th>Número</th>
                                    <th class="text-right">Desc.</th>
                                    <th class="text-right">Total</th>
                                </tr>
                            </thead>
                        </table>
                        <div class="scroll-3">
                            <table class="table table-hover stylish-table m-b-0" width="100%">
                                <tbody class="tb-st" id="list-venta-delivery"></tbody>
                            </table>
                        </div>
                        -->
                    </div>
                    
                </div>
            </div>

        <!--
        <div class="card m-b-0">
            <div class="panel-main-box">
                <div class="panel-left-aside">
                    <div class="open-panel"><i class="ti-angle-right"></i></div>
                    <div class="panel-left-inner">
                        <div class="form-material">
                            <input class="form-control p-20" type="text" placeholder="Search Contact">
                        </div>
                        <ul class="feeds panelonline style-none">
                            <li>
                                <div class="bg-info">A</div> Apertura Caja <span class="text-muted">S/ 150.00</span></li>
                            <li>
                                <div class="bg-success"><i class="ti-server text-white"></i></div> Ingresos<span class="text-muted">S/ 50.00</span></li>
                            <li>
                                <div class="bg-warning"><i class="ti-shopping-cart text-white"></i></div> Egresos<span class="text-muted">S/ 50.00</span></li>
                            <li>
                                <div class="bg-danger"><i class="ti-user text-white"></i></div> New user registered.<span class="text-muted">30 May</span></li>
                            <li>
                                <div class="bg-inverse"><i class="far fa-bell text-white"></i></div> New Version just arrived. <span class="text-muted">27 May</span></li>
                            <li>
                                <div class="bg-info"><i class="far fa-bell text-white"></i></div> You have 4 pending tasks. <span class="text-muted">Just Now</span></li>
                            <li>
                                <div class="bg-danger"><i class="ti-user text-white"></i></div> New user registered.<span class="text-muted">30 May</span></li>
                            <li>
                                <div class="bg-inverse"><i class="far fa-bell text-white"></i></div> New Version just arrived. <span class="text-muted">27 May</span></li>
                            <li>
                                <div class="bg-info"><i class="far fa-bell text-white"></i></div> You have 4 pending tasks. <span class="text-muted">Just Now</span></li>
                            <li class="p-20"></li>
                        </ul>
                      
                    </div>
                </div>
                <div class="panel-right-aside">
                    
                    <div class="panel-rbox">
                        <ul class="panel-list p-20">
                            <li>
                                <div class="panel-img"><img src="<?=URL?>public/images/users/avatar.png" alt="user" /></div>
                                <div class="panel-content">
                                    <h5>James Anderson</h5>
                                    <div class="box bg-light-info">Lorem Ipsum is simply dummy text of the printing & type setting industry.</div>
                                </div>
                                <div class="panel-time">10:56 am</div>
                            </li>
                            <li>
                                <div class="panel-img"><img src="<?=URL?>public/images/users/avatar2.png" alt="user" /></div>
                                <div class="panel-content">
                                    <h5>Bianca Doe</h5>
                                    <div class="box bg-light-success">It’s Great opportunity to work.</div>
                                </div>
                                <div class="panel-time">10:57 am</div>
                            </li>
                            <li class="reverse">
                                <div class="panel-time">10:57 am</div>
                                <div class="panel-content">
                                    <h5>Steave Doe</h5>
                                    <div class="box bg-light-inverse">It’s Great opportunity to work.</div>
                                </div>
                                <div class="panel-img"><img src="<?=URL?>public/images/users/avatar5.png" alt="user" /></div>
                            </li>
                            <li class="reverse">
                                <div class="panel-time">10:57 am</div>
                                <div class="panel-content">
                                    <h5>Steave Doe</h5>
                                    <div class="box bg-light-inverse">It’s Great opportunity to work.</div>
                                </div>
                                <div class="panel-img"><img src="<?=URL?>public/images/users/avatar5.png" alt="user" /></div>
                            </li>
                            <li>
                                <div class="panel-img"><img src="<?=URL?>public/images/users/avatar3.png" alt="user" /></div>
                                <div class="panel-content">
                                    <h5>Angelina Rhodes</h5>
                                    <div class="box bg-light-primary">Well we have good budget for the project</div>
                                </div>
                                <div class="panel-time">11:00 am</div>
                            </li>
                        </ul>
                    </div>

                </div>
            </div>
        </div>
        -->
    </div>
</div>
