@extends('layouts.default')
@section('content')
<!-- Modal Almacenes -->
<div class="modal fade" id="selAlmacen" tabindex="-1" data-bs-backdrop="static" role="dialog" aria-labelledby="selAlmacenLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title" id="selAlmacenLabel">Seleccione un Almacén</h5>
            <div style="width:50%">
                <input type="text" class="form-control" id="searchAlmacen" placeholder="Escribe el almacén" autocomplete="off" />
            </div>
        </div>
        <div class="modal-body">
            <div class="table-responsive">
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th>Almacén</th>
                            <th>Zona</th>
                        </tr>
                    </thead>
                    <tbody id="bodyAlmacenes"></tbody>
                </table>
            </div>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
        </div>
        </div>
    </div>
</div>
<!-- End Modal -->

<!-- Modal Proveedores -->
<div class="modal fade" id="modalProveedor" tabindex="-1" role="dialog" data-bs-backdrop="static" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="selProveedorLabel">Seleccione un Proveedor</h5>
                <div style="width:50%">
                    <input type="text" class="form-control" id="searchProveedor" placeholder="Escribe el nombre o clave del proveedor" autocomplete="off" />
                </div>
            </div>
            <div class="modal-body">
                <div class="table-responsive" style="height:400px;overflow:auto">
                    <table class="table table-striped">
                        <thead>
                            <tr>
                                <th>Clave</th>
                                <th>Nombre</th>
                                <th>RFC</th>
                                <th>Vendedor</th>
                            </tr>
                        </thead>
                        <tbody id="bodyProveedores"></tbody>
                    </table>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
            </div>
        </div>
    </div>
</div>
<!-- End Modal -->

<!-- Modal Ver PDF Factura -->
<div class="modal fade" id="modalVerPdf" tabindex="-1" role="dialog" data-bs-backdrop="static" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-body">
                <div>
                    <embed id="pdfFactura" src="" width="100%" height="600" type="application/pdf">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
            </div>
        </div>
    </div>
</div>
<!-- End Modal -->

<!-- Modal Ver Asientos Articulos -->
<div class="modal fade" id="modalVerAsientos" tabindex="-1" role="dialog" data-bs-backdrop="static" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="modalFacturarTitle" style="font-size:1.4em">Detalle del Gasto</h4>
                <button type="button" class="btn-close btn-danger" data-bs-dismiss="modal" aria-label="Close">X</button>
            </div>
            <div class="modal-body">
                <div class="table-responsive">
                    <table class="table table-striped" id="tablaArticulos" class="table">
                        <thead style="background-color:#777">
                            <tr>
                                <th style="padding: 10px; text-align: center; color: #FFF; width: 10%;">Descripcion</th>
                                <th style="padding: 10px; text-align: center; color: #FFF">Num. Cuenta</th> 
                                <th style="padding: 10px; text-align: center; color: #FFF">Cta. Contable</th> 
                                <th style="padding: 10px; text-align: center; color: #FFF">Prec. Uni.</th>
                                <th style="padding: 10px; text-align: center; color: #FFF">Cant</th>
                                <th style="padding: 10px; text-align: center; color: #FFF">Subtotal</th>
                                <th style="padding: 10px; text-align: center; color: #FFF">iva</th>
                                <th style="padding: 10px; text-align: center; color: #FFF">Desc.</th>
                                <th style="padding: 10px; text-align: center; color: #FFF">Total</th>
                                <th style="padding: 10px; text-align: center; color: #FFF">Acciones</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
            </div>
        </div>
    </div>
</div>
<!-- End Modal -->

<!-- Modal Ver Detalle Prorrateo -->
<div class="modal fade" id="modalVerProrrateo" tabindex="-1" role="dialog" data-bs-backdrop="static" data-bs-keyboard="false" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="modalFacturarTitle" style="font-size:1.4em">Prorrateo del Detalle del Gasto</h4>
                <button type="button" class="btn-close btn-danger" data-bs-dismiss="modal" aria-label="Close" onclick="regresarModalDetalle()">X</button>
            </div>
            <div class="modal-body">
                <div class="table-responsive">
                    <table class="table table-striped" id="tablaProrrateo" class="table">
                        <thead style="background-color:#777">
                            <tr>
                                <th style="padding: 10px; text-align: center; color: #FFF">Sucursal</th>
                                <th style="padding: 10px; text-align: center; color: #FFF">Subtotal</th> 
                                <th style="padding: 10px; text-align: center; color: #FFF">IVA</th> 
                                <th style="padding: 10px; text-align: center; color: #FFF">Total</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" onclick="regresarModalDetalle()">Cerrar</button>
            </div>
        </div>
    </div>
</div>
<!-- End Modal -->

<!-- Modal Cuenta Contable -->
<div class="modal fade" id="modalCuentasContables" tabindex="-1" role="dialog" data-bs-backdrop="static" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="selProveedorLabel">Seleccione una cuenta contable</h5>
                <div style="width:50%">
                    <input type="text" class="form-control" id="searchCuentaContable" placeholder="Escribe el nombre o cuenta contable" autocomplete="off" />
                </div>
            </div>
            <div class="modal-body">
                <div class="table-responsive" style="height:400px;overflow:auto">
                    <table class="table table-striped">
                        <thead>
                            <tr>
                                <th>Numero</th>
                                <th>Descripcion</th>
                                <th>Nivel</th>
                                <th>Cod. Agrupador</th>
                            </tr>
                        </thead>
                        <tbody id="bodyCuentasContables"></tbody>
                    </table>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
            </div>
        </div>
    </div>
</div>
<!-- End Modal -->

<!-- Modal Ver Comrpobante PDF -->
<div class="modal fade" id="modalComprobantePdf" tabindex="-1" role="dialog" data-bs-backdrop="static" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
        <div class="modal-header">
                <h5 class="modal-title" id="selAlmacenLabel">Comprobante de gastos de caja chica firmado por la tienda.</h5>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div id="pdfContainer" style="width: 100%; height: 500px;"></div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
            </div>
        </div>
    </div>
</div>
<!-- End Modal -->

<!-- Modal Ver Detalle Comprobante -->
<div class="modal fade" id="modalDetalleComprobante" tabindex="-1" role="dialog" data-bs-backdrop="static" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="modalFacturarTitle" style="font-size:1.4em">Detalle del Comprobante de Gastos</h4>
                <button type="button" class="btn-close btn-danger" data-bs-dismiss="modal" aria-label="Close">X</button>
            </div>
            <div class="modal-body">
                <div class="row" style="height:500px; overflow:auto">
                    <div class="table-responsive">
                        <table class="table table-striped" id="tableDetalleComprobante" class="table">
                            <thead style="background-color:#777">
                                <tr>
                                    <th style="padding: 10px; text-align: center; color: #FFF">Concepto</th> 
                                    <th style="padding: 10px; text-align: center; color: #FFF">Nu Cuenta</th>
                                    <th style="padding: 10px; text-align: center; color: #FFF">Cta Contable</th>
                                    <th style="padding: 10px; text-align: center; color: #FFF">Cantidad</th>
                                    <th style="padding: 10px; text-align: center; color: #FFF">Subtotal</th>
                                    <th style="padding: 10px; text-align: center; color: #FFF">IVA</th>
                                    <th style="padding: 10px; text-align: center; color: #FFF">Total</th>
                                    <th style="padding: 10px; text-align: center; color: #FFF">Acciones</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
            </div>
        </div>
    </div>
</div>
<!-- End Modal -->

<!-- Modal Ver Detalle Viaticos -->
<div class="modal fade" id="modalDetalleViatico" tabindex="-1" data-bs-backdrop="static" role="dialog" aria-labelledby="selAlmacenLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title" id="selAlmacenLabel">Detalles del Viatico</h5>
        </div>
        <div class="modal-body">
            <div class="row">
                <div class="col-12 col-sm-6 col-md-3 col-lg-2 col-xl-2">
                    <div class="form-group">
                        <span class="x-label">Total:</span>
                        <input type="text" class="form-control x-form-control-sm" id="totalviatico" readonly autocomplete="off" />
                    </div>
                </div>
                <div class="col-12 col-sm-6 col-md-3 col-lg-4 col-xl-4">
                    <div class="form-group">
                        <span class="x-label">Motivo:</span>
                        <input type="text" class="form-control x-form-control-sm" id="motivoviatico" readonly autocomplete="off" />
                    </div>
                </div>
                <div class="col-12 col-sm-6 col-md-3 col-lg-4 col-xl-4">
                    <div class="form-group">
                        <span class="x-label">Observaciones:</span>
                        <input type="text" class="form-control x-form-control-sm" id="observacionesviatico" readonly autocomplete="off" />
                    </div>
                </div>
            </div>
            <div class="row" style="height:300px; overflow:auto">
                <div class="table-responsive">
                    <table class="table table-striped" id="tableDetalleViatico" class="table">
                        <thead style="background-color:#777">
                            <tr>
                                <th style="padding: 10px; text-align: center; color: #FFF">Fecha</th>
                                <th style="padding: 10px; text-align: center; color: #FFF">Concepto</th>
                                <th style="padding: 10px; text-align: center; color: #FFF">Detalle</th>
                                <th style="padding: 10px; text-align: center; color: #FFF">Tipo</th>
                                <th style="padding: 10px; text-align: center; color: #FFF">Monto</th>
                                <!-- <th style="padding: 10px; text-align: center; color: #FFF">Acciones</th> -->
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
        </div>
        </div>
    </div>
</div>
<!-- End Modal -->

<div class="row">
    <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
        <div class="card">
            <div class="card-body">  
                <ul class="nav nav-tabs" id="myTab" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="gastos-tab" data-bs-toggle="tab" data-bs-target="#gastos" type="button" role="tab" aria-controls="gastos" aria-selected="false" style="display:none">
                            Gastos
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="gastoscajachica-tab" data-bs-toggle="tab" data-bs-target="#gastoscajachica" type="button" role="tab" aria-controls="gastoscajachica" aria-selected="false" style="display:none">
                            Caja Chica
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="viaticos-tab" data-bs-toggle="tab" data-bs-target="#viaticos" type="button" role="tab" aria-controls="viaticos" aria-selected="false" style="display:none">
                            Viaticos
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="fichagarantia-tab" data-bs-toggle="tab" data-bs-target="#fichagarantia" type="button" role="tab" aria-controls="fichagarantia" aria-selected="false" style="display:none">
                            Fichas de Garantia
                        </button>
                    </li>
                </ul> 
                <div class="tab-content" id="myTabContent" style="padding:1em; border: #DDD 1px solid !important display:none">
                <!--////////////////////////////////////////////////////////////////////////////////////////PESTAÑA GASTOS///////////////////////////////////////////////////////////////////////////////-->
                    <div class="tab-pane fade" id="gastos" role="tabpanel" aria-labelledby="gastos-tab"> 
                        <div class="row">
                            <div class="col-12 col-sm-6 col-md-3 col-lg-2 col-xl-2">     
                                <span class="x-label">FOLIO:</span>
                                <div class="input-group">
                                    <input type="hidden" id="idgasto">
                                    <input type="hidden" id="statusgasto">
                                    <input type="hidden" id="tipogasto">
                                    <input type="text" class="form-control x-form-control-sm" style="padding:5px !important" id="folio" placeholder="----" readonly autocomplete="off" />
                                    <div class="input-group-append" style="height:30px">
                                        <button class="btn btn-sm btn-primary" style="height:30px" onclick="abreModalDoctos()">
                                            <i class="mdi mdi-magnify" style="font-size:1em"></i>
                                        </button>
                                    </div>
                                </div>   
                            </div>
                            <div class="col-12 col-sm-6 col-md-2 col-lg-2 col-xl-2">
                                <div class="form-group">
                                    <span class="x-label">Fecha:</span>
                                    <input type="text" class="form-control x-form-control-sm" id="fecha" value="15/12/2025" disabled autocomplete="off"/>
                                </div>
                            </div>
                            <div class="col-12 col-sm-6 col-md-3 col-lg-2 col-xl-2">
                                <div class="form-group">
                                    <span class="x-label">Almacen:</span>
                                    <input type="text" class="form-control x-form-control-sm" id="almacen" placeholder="Seleccione..." disabled autocomplete="off" />
                                    <input type="text" style="display:none" id="idalmacen">
                                </div>
                            </div>
                            <div class="col-12 col-sm-6 col-md-3 col-lg-3 col-xl-3">
                                <div class="form-group">
                                    <span class="x-label">Provisionó:</span>
                                    <input type="hidden" id="idusuarioprovisiono" value="0">
                                    <input type="text" class="form-control x-form-control-sm" id="nombreprovisiono" readonly autocomplete="off" />
                                </div>
                            </div>
                            <div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-3">
                                <div class="form-group">
                                    <span class="x-label">Proveedor:</span>
                                    <input type="text" class="form-control x-form-control-sm" id="proveedor" placeholder="Seleccione..." disabled autocomplete="off" />
                                    <input type="text" style="display:none" id="idproveedor">
                                    <input type="hidden" id="rfcproveedor" value="0">
                                </div>
                            </div>
                            <div class="col-12 col-sm-6 col-md-3 col-lg-3 col-xl-3">
                                <div class="form-group">
                                    <span class="x-label">Folio Fiscal (UUID):</span>
                                    <input type="text" class="form-control x-form-control-sm" id="foliofiscal" placeholder="Seleccione..." readonly autocomplete="off" />
                                </div>
                            </div>
                            <div class="col-12 col-sm-6 col-md-2 col-lg-2 col-xl-2">
                                <div class="form-group">
                                    <span class="x-label">Fecha factura:</span>
                                    <input type="text" class="form-control x-form-control-sm" id="fechafactura" readonly autocomplete="off"/>
                                </div>
                            </div>
                            <div class="col-12 col-sm-6 col-md-3 col-lg-2 col-xl-2">
                                <div class="form-group">
                                    <span class="x-label">Folio Factura:</span>
                                    <input type="text" class="form-control x-form-control-sm" id="foliofactura" readonly autocomplete="off" />
                                </div>
                            </div>
                            <div class="col-12 col-sm-12 col-md-6 col-lg-5 col-xl-5">                      
                                <div class="form-group">
                                    <span class="x-label">Concepto:</span>
                                    <input type="text" class="form-control x-form-control-sm text-uppercase" id="concepto" autocomplete="off"/>
                                </div>
                            </div>
                            <div class="col-12 col-sm-6 col-md-3 col-lg-2 col-xl-2">
                                <div class="form-group">
                                    Forma de pago:</br>
                                    <select id="formapago" class="x-form-control">

                                    </select>
                                </div>
                            </div>
                            <div class="col-12 col-sm-6 col-md-2 col-lg-6 col-xl-6">
                                <div class="row">
                                    <div class="col-12 col-sm-6 col-md-2 col-lg-3 col-xl-3">
                                        <div class="form-group">
                                            <span class="x-label">Subtotal</span>
                                            <input type="number" class="x-form-control" id="subtotal" autocomplete="off"/>
                                        </div>
                                    </div>
                                    <div class="col-12 col-sm-6 col-md-2 col-lg-3 col-xl-3">
                                        <div class="form-group">
                                            <span class="x-label">IVA</span>
                                            <input type="number" class="x-form-control" id="iva" autocomplete="off"/>
                                        </div>
                                    </div>
                                    <div class="col-12 col-sm-6 col-md-2 col-lg-3 col-xl-3">
                                        <div class="form-group">
                                            IVA Retenido</br>
                                            <input type="number" class="x-form-control" id="ivaret" autocomplete="off"/>
                                        </div>
                                    </div>
                                    <div class="col-12 col-sm-6 col-md-2 col-lg-3 col-xl-3">
                                        <div class="form-group">
                                            <span class="x-label">Total</span>
                                            <input type="number" class="x-form-control" id="total" autocomplete="off"/>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="form-group">
                                    Banco:*<br/>
                                    <select id="bancoProveedor" class="x-form-control">

                                    </select>
                                </div>
                            </div> 
                            <div class="col-md-2">
                                <div class="form-group">
                                    Numero de Tarjeta:*<br/>
                                    <input type="number" class="x-form-control" id="tarjetaProveedor" placeholder="" autocomplete="off" />
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="form-group">
                                    Numero de Cuenta:*<br/>
                                    <input type="number" class="x-form-control" id="cuentaBancoProveedor" placeholder="" autocomplete="off" />
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="form-group">
                                    Clabe Interbancaria:*<br/>
                                    <input type="number" class="x-form-control" id="clabeProveedor" placeholder="" autocomplete="off" />
                                </div>
                            </div>
                            <div class="col-12 col-sm-6 col-md-6 col-lg-4 col-xl-4">
                                <div class="form-group">
                                    <span class="x-label">Observaciones:</span>
                                    <textarea class="form-control x-form-control-sm" rows="2" id="observaciones"></textarea>
                                </div>
                            </div>
                            <div class="col-12 col-sm-6 col-md-4 col-lg-4 col-xl-4">
                                <button type="button" id="buttonVerPdf" class="btn btn-warning btn-icon-text" title="Ver PDF" data-bs-toggle="modal" data-bs-target="#modalVerPdf" style="margin:3px; width:72px">
                                    <i class="mdi mdi-file-pdf" style="font-size:1.6em"></i>                                                                          
                                </button> 
                                <button type="button" id="buttonVerAsientos" class="btn btn-info btn-icon-text" title="Ver Asientos" onclick="verAsientosContables()" style="margin:3px; width:72px;">
                                    <i class="mdi mdi-eye" style="font-size:1.6em"></i>                                                                          
                                </button> 
                                <button type="button" id="buttonAutorizar" class="btn btn-success btn-icon-text" title="Autorizar" onclick="autorizarGasto()" style="margin:3px; width:72px">
                                    <i class="mdi mdi-check" style="font-size:1.6em"></i>                                                                          
                                </button>    
                                <button type="button" id="buttonLimpiar" class="btn btn-secondary btn-icon-text" title="Limpiar" onclick="reinicia()" style="margin:3px; width:72px">
                                    <i class="mdi mdi-file" style="font-size:1.6em"></i>                                                                          
                                </button>  
                            </div>
                        </div>
                        <hr>
                        <hr>
                        <h4 class="modal-title" id="modalFacturarTitle" style="font-size:1.7em">Provisiones, Reposicion y Gastos</h4>
                        <div class="row">
                            <div class="col-12 col-sm-6 col-md-3 col-lg-2 col-xl-2">
                                <div class="form-group">
                                    <span class="x-label">Fecha Inicio:</span>
                                    <input type="text" class="form-control x-form-control-sm" id="filtrofechainicio" value="15/12/2025" readonly autocomplete="off"/>
                                </div>
                            </div>
                            <div class="col-12 col-sm-6 col-md-3 col-lg-2 col-xl-2">
                                <div class="form-group">
                                    <span class="x-label">Fecha Fin:</span>
                                    <input type="text" class="form-control x-form-control-sm" id="filtrofechafin" value="15/12/2025" readonly autocomplete="off"/>
                                </div>
                            </div>
                            <div class="col-12 col-sm-6 col-md-3 col-lg-2 col-xl-2">
                                <div class="form-group">
                                    <span class="x-label">Sucursal:</span>
                                    <select id="sucursalProvisiones" class="x-form-control" onchange="getAllGastos()">
                                    </select>
                                </div>
                            </div>
                            <div class="col-12 col-sm-6 col-md-3 col-lg-2 col-xl-2">
                                <div class="form-group">
                                    <span class="x-label">Estatus:</span>
                                    <select id="estatusProvisiones" class="x-form-control" onchange="getAllGastos()">
                                        <option value="0">TODAS</option>
                                        <option value="1">PENDIENTES</option>
                                        <option value="2">REVISADAS</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="row" style="height:600px; overflow:auto">
                            <div class="table-responsive">
                                <table class="table table-striped" id="tablaGastos" class="table">
                                    <thead style="background-color:#777">
                                        <tr>
                                            <th style="padding: 10px; text-align: center; color: #FFF">Folio</th>
                                            <th style="padding: 10px; text-align: center; color: #FFF">Fecha</th>
                                            <th style="padding: 10px; text-align: center; color: #FFF">Sucursal</th>
                                            <th style="padding: 10px; text-align: center; color: #FFF">Tipo</th>
                                            <th style="padding: 10px; text-align: center; color: #FFF">Solicito</th>
                                            <th style="padding: 10px; text-align: center; color: #FFF">Proveedor</th>
                                            <th style="padding: 10px; text-align: center; color: #FFF">Subtotal</th>
                                            <th style="padding: 10px; text-align: center; color: #FFF">iva</th>
                                            <th style="padding: 10px; text-align: center; color: #FFF">Total</th>
                                            <th style="padding: 10px; text-align: center; color: #FFF">Acciones</th>
                                        </tr>
                                    </thead>
                                    <tbody></tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <!--////////////////////////////////////////////////////////////////////////////////////////PESTAÑA CAJA CHICA///////////////////////////////////////////////////////////////////////////////-->       
                    <div class="tab-pane fade" id="gastoscajachica" role="tabpanel" aria-labelledby="gastoscajachica-tab">
                        <div class="row">
                            <div class="col-12 col-sm-6 col-md-3 col-lg-2 col-xl-2">
                                <div class="form-group">
                                    <span class="x-label">Fecha Inicio:</span>
                                    <input type="text" class="form-control x-form-control-sm" id="fechainicio" onchange="getComprobantesCajaChica()" value="15/12/2025" readonly autocomplete="off"/>
                                </div>
                            </div>
                            <div class="col-12 col-sm-6 col-md-3 col-lg-2 col-xl-2">
                                <div class="form-group">
                                    <span class="x-label">Fecha Fin:</span>
                                    <input type="text" class="form-control x-form-control-sm" id="fechafin" onchange="getComprobantesCajaChica()" value="15/12/2025" readonly autocomplete="off"/>
                                </div>
                            </div>
                            <div class="col-12 col-sm-6 col-md-3 col-lg-2 col-xl-2">
                                <div class="form-group">
                                    <span class="x-label">Tipo:</span>
                                    <select id="cajachicatipo" class="x-form-control" onchange="getComprobantesCajaChica()">
                                        <option value="0">TODOS</option>
                                        <option value="1">CON FACTURA</option>
                                        <option value="2">SIN FACTURA</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-12 col-sm-6 col-md-3 col-lg-2 col-xl-2">
                                <div class="form-group">
                                    <span class="x-label">Sucursal:</span>
                                    <select id="cajachicaalmacen" class="x-form-control" onchange="getComprobantesCajaChica()">

                                    </select>
                                </div>
                            </div>
                            <div class="col-12 col-sm-6 col-md-3 col-lg-2 col-xl-2">
                                <div class="form-group">
                                    <span class="x-label">Estatus:</span>
                                    <select id="cajachicaestatus" class="x-form-control" onchange="getComprobantesCajaChica()">
                                        <option value="0">TODOS</option>
                                        <option value="1">PENDIENTE</option>
                                        <option value="2">APROBADO</option>
                                        <option value="3">AUTORIZADO</option>
                                        <option value="99">RECHAZADO</option>
                                    </select>
                                </div>
                            </div>
                            <!-- <div class="col-12 col-sm-6 col-md-3 col-lg-2 col-xl-2">
                                <div class="form-group">
                                    <span class="x-label">Estatus:</span>
                                    <select id="cajachicaestatus" class="x-form-control" onchange="getGastosCajaChica()">
                                        <option value="1">PENDIENTES</option>
                                        <option value="2">CAPTURADOS</option>
                                    </select>
                                </div>
                            </div> -->
                            <!-- <div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-3">
                                <button type="button" id="buttonLimpiarcajachica" class="btn btn-secondary btn-icon-text" title="Limpiar" onclick="reiniciacajachica()" style="margin:3px; width:72px">
                                    <i class="mdi mdi-file" style="font-size:1.6em"></i>                                                                          
                                </button>
                                <button type="button" id="buttonPdfCajaChica" class="btn btn-danger btn-icon-text" title="Descargar PDF" onclick="pdfCajaChica()" style="margin:3px; width:72px">
                                    <i class="mdi mdi-file-pdf" style="font-size:1.6em"></i>                                                                          
                                </button> 
                                <button type="button" id="buttonAprobarCajaChica" class="btn btn-success btn-icon-text" title="Aprobar" onclick="aprobarCajaChica()" style="margin:3px; width:72px;">
                                    <i class="mdi mdi-check" style="font-size:1.6em"></i>
                                </button> 
                            </div> -->
                        </div>
                        <div class="row" style="height:500px; overflow:auto">
                            <div class="table-responsive">
                                <table class="table table-striped" id="tablaComprobantes" class="table">
                                    <thead style="background-color:#777">
                                        <tr>
                                            <th style="padding: 10px; text-align: center; color: #FFF">Folio</th>
                                            <th style="padding: 10px; text-align: center; color: #FFF">Fecha</th>
                                            <th style="padding: 10px; text-align: center; color: #FFF">Almacen</th>
                                            <th style="padding: 10px; text-align: center; color: #FFF">Tipo</th>
                                            <th style="padding: 10px; text-align: center; color: #FFF">Realizó</th>
                                            <th style="padding: 10px; text-align: center; color: #FFF">Total</th>
                                            <th style="padding: 10px; text-align: center; color: #FFF">Estatus</th>
                                            <th style="padding: 10px; text-align: center; color: #FFF">Acciones</th>
                                        </tr>
                                    </thead>
                                    <tbody></tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <!--////////////////////////////////////////////////////////////////////////////////////////PESTAÑA VIATICOS///////////////////////////////////////////////////////////////////////////////-->
                    <div class="tab-pane fade" id="viaticos" role="tabpanel" aria-labelledby="viaticos-tab">
                        <div class="row">
                            <div class="col-12 col-sm-6 col-md-3 col-lg-2 col-xl-2">
                                <div class="form-group">
                                    <span class="x-label">Operación:</span>
                                    <select id="operacionViatico" class="x-form-control" onchange="getAllSolicitudesViaticos()">
                                        <option value="0">SOLICITUD</option>
                                        <option value="1">COMPROBACIÓN</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-12 col-sm-6 col-md-3 col-lg-2 col-xl-2">
                                <div class="form-group">
                                    <span class="x-label">Estatus:</span>
                                    <select id="estatusViatico" class="x-form-control" onchange="getAllSolicitudesViaticos()">
                                        <option value="0">TODOS</option>
                                        <option value="1">PENDIENTE</option>
                                        <option value="2">AUTORIZADO</option>
                                        <option value="3">TRANSFERIDO</option>
                                        <option value="99">RECHAZADO</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-12 col-sm-6 col-md-3 col-lg-2 col-xl-2">
                                <div class="form-group">
                                    <span class="x-label">Fecha Inicio:</span>
                                    <input type="text" class="form-control x-form-control-sm" id="fechainicioviatico" onchange="getAllSolicitudesViaticos()" value="15/12/2025" readonly autocomplete="off"/>
                                </div>
                            </div>
                            <div class="col-12 col-sm-6 col-md-3 col-lg-2 col-xl-2">
                                <div class="form-group">
                                    <span class="x-label">Fecha Fin:</span>
                                    <input type="text" class="form-control x-form-control-sm" id="fechafinviatico" onchange="getAllSolicitudesViaticos()" value="15/12/2025" readonly autocomplete="off"/>
                                </div>
                            </div>
                            <div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-3">
                                <!-- <button type="button" id="buttonLimpiarcajachica" class="btn btn-secondary btn-icon-text" title="Limpiar" onclick="reiniciacajachica()" style="margin:3px; width:72px">
                                    <i class="mdi mdi-file" style="font-size:1.6em"></i>                                                                          
                                </button> -->
                                <!-- <button type="button" id="buttonPdfCajaChica" class="btn btn-danger btn-icon-text" title="Descargar PDF" onclick="pdfCajaChica()" style="margin:3px; width:72px">
                                    <i class="mdi mdi-file-pdf" style="font-size:1.6em"></i>                                                                          
                                </button> 
                                <button type="button" id="buttonAprobarCajaChica" class="btn btn-success btn-icon-text" title="Aprobar" onclick="aprobarCajaChica()" style="margin:3px; width:72px;">
                                    <i class="mdi mdi-check" style="font-size:1.6em"></i>                                                                           
                                </button> -->
                            </div>
                        </div>
                        <div class="row" style="height:500px; overflow:auto" id="divtableViaticos">
                            <div class="table-responsive">
                                <table class="table table-striped" id="tableViaticos" class="table">
                                    <thead style="background-color:#777">
                                        <tr>
                                            <th style="padding: 10px; text-align: center; color: #FFF">Fecha</th>
                                            <th style="padding: 10px; text-align: center; color: #FFF">Folio</th>
                                            <th style="padding: 10px; text-align: center; color: #FFF">Colaborador</th>
                                            <th style="padding: 10px; text-align: center; color: #FFF">Destino</th>
                                            <th style="padding: 10px; text-align: center; color: #FFF">Fecha Salida</th>
                                            <th style="padding: 10px; text-align: center; color: #FFF">Fecha Retorno</th>
                                            <th style="padding: 10px; text-align: center; color: #FFF">Estatus</th>
                                            <th style="padding: 10px; text-align: center; color: #FFF">Acciones</th>
                                        </tr>
                                    </thead>
                                    <tbody></tbody>
                                </table>
                            </div>
                        </div>
                        <div class="row" style="height:500px; overflow:auto; display:none;" id="divtableViaticosComprobacion" >
                            <div class="table-responsive">
                                <table class="table table-striped" id="tableViaticosComprobacion" class="table">
                                    <thead style="background-color:#777">
                                        <tr>
                                            <th style="padding: 10px; text-align: center; color: #FFF">Fecha</th>
                                            <th style="padding: 10px; text-align: center; color: #FFF">Folio</th>
                                            <th style="padding: 10px; text-align: center; color: #FFF">Colaborador</th>
                                            <th style="padding: 10px; text-align: center; color: #FFF">Monto Depositado</th>
                                            <th style="padding: 10px; text-align: center; color: #FFF">Total Viatico</th>
                                            <th style="padding: 10px; text-align: center; color: #FFF">Monto a Favor</th>
                                            <th style="padding: 10px; text-align: center; color: #FFF">Monto a Devolver</th>
                                            <th style="padding: 10px; text-align: center; color: #FFF">Estatus</th>
                                            <th style="padding: 10px; text-align: center; color: #FFF">Acciones</th>
                                        </tr>
                                    </thead>
                                    <tbody></tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <!--////////////////////////////////////////////////////////////////////////////////////////PESTAÑA FICHAS DE GARANTIA///////////////////////////////////////////////////////////////////////////////-->
                    <div class="tab-pane fade" id="fichagarantia" role="tabpanel" aria-labelledby="fichagarantia-tab">
                        <div class="row">
                            <div class="col-12 col-sm-6 col-md-3 col-lg-2 col-xl-2">
                                <div class="form-group">
                                    <span class="x-label">Fecha Inicio:</span>
                                    <input type="text" class="form-control x-form-control-sm" id="fechainicioficha" onchange="getFichasGarantias()" value="15/12/2025" readonly autocomplete="off"/>
                                </div>
                            </div>
                            <div class="col-12 col-sm-6 col-md-3 col-lg-2 col-xl-2">
                                <div class="form-group">
                                    <span class="x-label">Fecha Fin:</span>
                                    <input type="text" class="form-control x-form-control-sm" id="fechafinficha" onchange="getFichasGarantias()" value="15/12/2025" readonly autocomplete="off"/>
                                </div>
                            </div>
                            <div class="col-12 col-sm-6 col-md-3 col-lg-2 col-xl-2">
                                <div class="form-group">
                                    <span class="x-label">Estatus:</span>
                                    <select id="estatusfinficha" class="x-form-control" onchange="getFichasGarantias()">
                                        <option value="0">TODOS</option>
                                        <option value="1">PENDIENTE</option>
                                        <option value="2">REVISADO</option>
                                        <option value="3">AUTORIZADO</option>
                                        <option value="99">RECHAZADO</option>
                                    </select>
                                </div>
                            </div>
                            <!-- <div class="col-12 col-sm-6 col-md-3 col-lg-3 col-xl-3">
                                <div class="form-group">
                                    <span class="x-label">Almacen:</span>
                                    <select id="almacenficha" class="x-form-control" onchange="getFichasGarantias()">

                                    </select>
                                </div>
                            </div> -->
                        </div>
                        <div class="row" style="height:600px; overflow:auto">
                            <div class="table-responsive">
                                <table class="table table-striped" id="tableFichas" class="table">
                                    <thead style="background-color:#777">
                                        <tr>
                                        <th style="padding: 10px; text-align: center; color: #FFF">Fecha</th>
                                            <th style="padding: 10px; text-align: center; color: #FFF">Folio</th>
                                            <th style="padding: 10px; text-align: center; color: #FFF">Sucursal</th>
                                            <th style="padding: 10px; text-align: center; color: #FFF">Realizo</th>
                                            <th style="padding: 10px; text-align: center; color: #FFF">Concepto</th>
                                            <th style="padding: 10px; text-align: center; color: #FFF">Total</th>
                                            <th style="padding: 10px; text-align: center; color: #FFF">Estatus</th>
                                            <th style="padding: 10px; text-align: center; color: #FFF">Acciones</th>
                                        </tr>
                                    </thead>
                                    <tbody></tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <!--////////////////////////////////////////////////////////////////////////////////////////PESTAÑA OTROS///////////////////////////////////////////////////////////////////////////////-->
                </div>   
            </div>
        </div>
    </div>
</div>
@stop

@section('jspage')
  <script src="jsprod/misc.js?v=20251215202211"></script>
  <script src="jsprod/gastos.js?v=20251215202211"></script>
@stop