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

<!-- Modal Validaciones -->
<div class="modal fade" id="modalVerValidacion" data-bs-backdrop="static" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl" role="document" style="max-width: 90%;">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="modalFacturarTitle" style="font-size:1.4em">Validaciones de Transferencias</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-3">
                        <div class="row">
                            <div id="imagenArticulo" style="height: 300px; overflow:auto"> 
                            <input type="text" class="form-control x-form-control-sm" id="imagenArticulo" style="display:none"/>
                                <div class="col-12" style="padding: 10px">
                                    <div style="border: #DDD 1px solid; background-color: #fefefe; padding:10px; height:280px;">
                                        <div id="changeFotoArticulo">
                                            <img src="../imagenes/logos/default.jpg" class="img-fluid" style="max-height:268px" id="previewfotoArticulo"/>
                                            <!-- <input type="file" class="form-control-file" style="display: none" id="inputPhotoArticulo" accept="image/*" > -->
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-9">
                        <div class="row">
                            <div class="col-6 col-sm-6 col-md-6 col-lg-3 col-xl-3">
                                <div class="form-group">
                                    <span class="x-label">FOLIO:</span>
                                    <input type="hidden" id="idvalidacion">
                                    <input type="text" class="x-form-control" id="foliovalidacion" readonly autocomplete="off" />
                                </div>
                            </div>
                            <div class="col-6 col-sm-6 col-md-6 col-lg-3 col-xl-3">
                                <div class="form-group">
                                    <span class="x-label">Fecha:</span>
                                    <input type="text" class="x-form-control" id="fechavalidacion" readonly readonly autocomplete="off"/>
                                </div>
                            </div>
                            <div class="col-3 col-sm-3 col-md-3 col-lg-3 col-xl-3">
                                <div class="form-group">
                                    <span class="x-label">Almacén:</span>
                                    <input type="text" class="x-form-control" id="almacenvalidacion" readonly autocomplete="off" />
                                    <!-- <select class="x-form-control" id="almacenvalidacion" onchange="changeTiendaValidacion()">

                                    </select> -->
                                </div>
                            </div> 
                            <div class="col-3 col-sm-3 col-md-3 col-lg-3 col-xl-3">
                                <div class="form-group">
                                    <span class="x-label">Banco:</span>
                                    <input type="text" class="x-form-control" id="bancovalidacion" readonly autocomplete="off" />
                                    <!-- <select class="x-form-control" id="bancovalidacion" onchange="changeBancoEmpresa()">
            
                                    </select> -->
                                </div>
                            </div> 
                            <div class="col-3 col-sm-3 col-md-3 col-lg-3 col-xl-3">
                                <div class="form-group">
                                    <span class="x-label">Cuenta:</span>
                                    <input type="text" class="x-form-control" id="cuentavalidacion" readonly autocomplete="off" />
                                    <!-- <select class="x-form-control" id="cuentavalidacion">
         
                                    </select> -->
                                </div>
                            </div>  
                            <div class="col-9">
                                <div class="row">
                                    <div class="col-3 col-sm-3 col-md-3 col-lg-6 col-xl-6">
                                        <div class="form-group">
                                            <span class="x-label">Solicita:</span>
                                            <input type="text" class="x-form-control text-uppercase" id="solicitavalidacion" readonly autocomplete="off" />
                                        </div>
                                    </div>
                                    <div class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6">     
                                        <span class="x-label">Cliente:</span>
                                        <div class="input-group">
                                            <input type="text" class="x-form-control text-uppercase" id="clientevalidacion" readonly autocomplete="off" />
                                        </div>   
                                    </div>
                                </div>
                            </div>                  
                        </div>
                        <div class="row">
                            <h4>Datos de la transferencia</h4>
                            <div class="col-6 col-sm-6 col-md-6 col-lg-3 col-xl-3">
                                <div class="form-group">
                                    <span class="x-label">Fecha:</span>
                                    <input type="text" class="x-form-control" id="fechatransferencia" readonly value="10/12/2025" readonly autocomplete="off"/>
                                </div>
                            </div>
                            <div class="col-3 col-sm-3 col-md-3 col-lg-3 col-xl-3">
                                <div class="form-group">
                                    <span class="x-label">Banco:</span>
                                    <input type="text" class="x-form-control" id="bancotransferencia" readonly autocomplete="off" />
                                    <!-- <select class="x-form-control" id="bancotransferencia">

                                    </select> -->
                                </div>
                            </div> 
                            <div class="col-3 col-sm-3 col-md-3 col-lg-3 col-xl-3">
                                <div class="form-group">
                                    <span class="x-label">Cantidad:</span>
                                    <input type="number" class="x-form-control" id="cantidadtransferencia" readonly autocomplete="off" />
                                </div>
                            </div>
                            <div class="col-3 col-sm-3 col-md-3 col-lg-3 col-xl-3">
                                <div class="form-group">
                                    <span class="x-label">Referencia:</span>
                                    <input type="text" class="x-form-control" id="referenciatransferencia" readonly autocomplete="off" />
                                </div>
                            </div>
                            <div class="col-3 col-sm-3 col-md-3 col-lg-5 col-xl-5">
                                <div class="form-group">
                                    <span class="x-label">Concepto:</span>
                                    <select class="x-form-control" id="conceptotransferencia" disabled>
                                        <option value="Transferencia interbancaria">Transferencia interbancaría</option>
                                    </select>
                                </div>
                            </div> 
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" onclick="descargarimagen()">Descargar Imagen</button>
                <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Atras</button>
                <button type="button" class="btn btn-success" onclick="validar()" id="btnValidar">Validar</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">                    
                <br>
                <div class="row">
                    <div class="d-flex justify-content-between" style="font-size:1.2em; font-weight:bold; flex-direction: row"> 
                        <div class="col-10">
                            <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" onchange="changeFechaFiltro()" id="filtrofechainicio" value="10/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" onchange="changeFechaFiltro()" id="filtrofechafin" value="10/12/2025" readonly autocomplete="off"/>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- <div class="p-3 col-4">
                            <div class="form-group">
                                <select class="x-form-control form-control-lg" id="idreporte" onchange="changeReporte()">
                                </select>
                            </div>
                        </div> -->
                        <div class="p-2">
                            <button type="button" id="buttonExcel" class="btn btn-success btn-icon-text" title="DESCARGAR EXCEL"onclick="downloadExcel()" style="margin:3px; width:72px">
                                <i class="mdi mdi-file-excel" style="font-size:1.6em"></i>                                                                          
                            </button>
                            <!-- <button type="button" id="buttonPdf" class="btn btn-danger btn-icon-text" title="DESCARGAR PDF" onclick="downloadPdf()" style="margin:3px; width:72px">
                                <i class="mdi mdi-file-pdf" style="font-size:1.6em"></i>                                                                          
                            </button>  -->
                        </div>
                    </div>
                </div>
                <div class="row" style="height:500px; overflow:auto">
                    <div class="table-responsive">
                        <table class="table table-striped" id="tableValidaciones" 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">Almacén</th>
                                    <th style="padding: 10px; text-align: center; color: #FFF">Solicita</th>
                                    <th style="padding: 10px; text-align: center; color: #FFF">Banco</th>
                                    <th style="padding: 10px; text-align: center; color: #FFF">Cuenta</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>
    </div>
</div>
@stop

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