@extends('layouts.default')
@section('content')

<!-- Modal Ver Detalle -->
<div class="modal fade" id="modalVerDetalle" 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">Detalle</h5>
            </div>
            <div class="modal-body">
                <div class="table-responsive">
                    <table class="table table-striped" id="tablaDetalle" class="table">
                        <thead style="background-color:#777">
                            <tr>
                                <th style="padding: 10px; text-align: center; color: #FFF; width: 10%;">Folio Compra</th>
                                <th style="padding: 10px; text-align: center; color: #FFF">Fecha Compra</th> 
                                <th style="padding: 10px; text-align: center; color: #FFF">Num Pago</th> 
                                <th style="padding: 10px; text-align: center; color: #FFF">Fecha Vigencia</th> 
                                <th style="padding: 10px; text-align: center; color: #FFF">Saldo Anterior</th>
                                <th style="padding: 10px; text-align: center; color: #FFF">Abono</th>
                                <th style="padding: 10px; text-align: center; color: #FFF">Saldo Final</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 -->

<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header d-flex justify-content-between" style="font-size:1.2em; font-weight:bold; flex-direction: row"> 
                <div class="p-1">
                    <i class="icon-edit"></i> <span>AUTORIZACIONES</span>
                </div>
            </div>
            <div class="card-body" style="padding:10px">
                <ul class="nav nav-tabs" id="myTab" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active" id="proveedores-tab" data-bs-toggle="tab" data-bs-target="#proveedores" type="button" role="tab" aria-controls="proveedores" aria-selected="false">
                            Pago de Proveedores
                        </button>
                    </li>
                    <!-- <li class="nav-item" role="presentation">
                        <button class="nav-link" id="pagos-tab" data-bs-toggle="tab" data-bs-target="#pagos" type="button" role="tab" aria-controls="pagos" aria-selected="false">
                            Otro
                        </button>
                    </li> -->
                </ul>
                <div class="tab-content" id="myTabContent" style="padding:1em; border: #DDD 1px solid !important">
                    <!-- ///////////////////////////////////////////////////////////////////////////////PESTAÑA AUTORIZACIONES//////////////////////////////////////////////////////////////////////////////////////////////////////// -->
                    <div class="tab-pane fade show active" id="proveedores" role="tabpanel" aria-labelledby="proveedores-tab">
                        <div class="row">
                            <div class="col-12">
                                <div class="card">
                                    <div class="card-header d-flex justify-content-between" style="flex-direction: row"> 
                                        <div class="p-1">
                                            <div class="row">
                                                <div class="col-md-5 col-lg-5">
                                                    <div class="form-group">
                                                        <span class="x-label">De:</span>
                                                        <input type="text" class="form-control x-form-control-sm" onchange="changeFechaAutorizaciones()" id="fechaDeAuto" value="10/12/2025" readonly autocomplete="off"/>
                                                    </div>
                                                </div>
                                                <div class="col-md-5 col-lg-5">
                                                    <div class="form-group">
                                                        <span class="x-label">Al:</span>
                                                        <input type="text" class="form-control x-form-control-sm" onchange="changeFechaAutorizaciones()" id="fechaAlAuto" value="10/12/2025" readonly autocomplete="off"/>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card-body">
                                        <div class="row" style="height:500px; overflow:auto">
                                            <div class="table-responsive">
                                                <table class="table table-striped" id="tablaProveedores" 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">Proveedor</th>
                                                            <th style="padding: 10px; text-align: center; color: #FFF">Realizo</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>
                            </div>
                        </div>
                    </div>
                    <!-- ///////////////////////////////////////////////////////////////////////////////PESTAÑA OTROS//////////////////////////////////////////////////////////////////////////////////////////////////////// -->
                    <div class="tab-pane fade" id="pagos" role="tabpanel" aria-labelledby="pagos-tab">
                        <div class="row">
                            <div class="col-12">
                                <div class="card">
                                    <div class="card-header d-flex justify-content-between" style="flex-direction: row"> 
                                        <div class="p-1">
                                            <div class="row">
                                                <div class="col-md-5 col-lg-5">
                                                    <div class="form-group">
                                                        <span class="x-label">De:</span>
                                                        <input type="text" class="form-control x-form-control-sm" onchange="changeFechaReimpresion()" id="reimpresionfechainicio" value="10/12/2025" readonly autocomplete="off"/>
                                                    </div>
                                                </div>
                                                <div class="col-md-5 col-lg-5">
                                                    <div class="form-group">
                                                        <span class="x-label">Al:</span>
                                                        <input type="text" class="form-control x-form-control-sm" onchange="changeFechaReimpresion()" id="reimpresionfechafin" value="10/12/2025" readonly autocomplete="off"/>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="p-1">
                                            <div class="form-group" style="text-align:left">
                                                <button class="btn btn-success" onclick="changeFechaReimpresion()">Buscar</button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card-body">
                                        <div class="table-responsive">
                                            <table id="tablaReimpresion" class="table">
                                                <thead>
                                                    <tr>
                                                        <th>Fecha</th>
                                                        <th>Folio</th>
                                                        <th>Proveedor</th>
                                                        <th>Factura</th>
                                                        <th>Sucursal</th>
                                                        <th>Realizo</th>
                                                        <th>Forma Pago</th>
                                                        <th>Importe</th>
                                                        <th>Acciones</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.nav-link.active{
    background: #90caf9 !important
}
#bordesTable{
    border: 1px solid #000000;
    text-align: center;
}
</style>

@stop
@section('jspage')
    <script src="jsprod/misc.js"></script>
    <script src="jsprod/autorizaciones.js"></script>
@stop