@extends('layouts.default')
@section('content')
<!-- Modal Clientes -->
<div class="modal fade" id="selCliente" data-bs-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="selClienteLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl" role="document" style="max-width: 90%;">
        <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title" id="selClienteLabel">Seleccione un Cliente</h5>
            <div style="width:50%">
                <div class="input-group">
                    <input type="text" class="form-control" id="searchCliente" placeholder="Escribe el nombre o clave del cliente" autocomplete="off" />
                    <button class="btn btn-sm btn-success" type="button" id="btnNewCliente">
                        <i class="mdi mdi-account-plus" style="font-size:1.8em"></i>
                    </button>
                </div>
            </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>Telefono</th>
                        </tr>
                    </thead>
                    <tbody id="bodyClientes"></tbody>
                </table>
            </div>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" id="selClienteClose" data-bs-dismiss="modal">Cerrar</button>
        </div>
        </div>
    </div>
</div>
<!-- End Modal -->

<!-- Modal Crear Nuevo Cliente -->
<div class="modal fade" id="modalNewCliente" data-bs-keyboard="false" data-bs-backdrop="static" tabindex="-1" aria-labelledby="modalNewClienteLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl" role="document" style="max-width: 90%;">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalNewClienteLabel">Nuevo Cliente</h5>    
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-6 col-sm-6 col-md-6 col-lg-4 col-xl-4">  
                        <span class="x-label">Nombre o Razón Social:</span>
                        <div class="input-group">
                            <input type="text" style="display:none" id="factIdCliente">
                            <input type="text" style="display:none" id="factIdPersona">
                            <input type="text" style="display:none" id="factIdDireccion">
                            <!-- <input type="text" style="display:none" id="factTipoCliente"> -->
                            <input type="text" class="form-control x-form-control-sm text-uppercase" style="padding:5px !important" id="factNombre" autocomplete="off" />
                        </div>   
                    </div>
                    <div class="col-2">
                        <div class="form-group">
                            Tipo Cliente*<br/>
                            <select class="x-form-control" id="facttipoclientesat">
                                <option value="FISICA">PERSONA FISICA</option>
                                <option value="MORAL">PERSONA MORAL</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-3 col-sm-3 col-md-3 col-lg-2 col-xl-2">
                        <div class="form-group">
                            <span class="x-label">RFC:</span>
                            <input type="text" maxlength="13" class="x-form-control text-uppercase" id="factRfc" autocomplete="off" />
                        </div>
                    </div>                  
                    <div class="col-3 col-sm-3 col-md-3 col-lg-2 col-xl-2">
                        <div class="form-group">
                            <span class="x-label">CURP:</span>
                            <input type="text" maxlength="18" class="x-form-control text-uppercase" id="factCurp" autocomplete="off" />
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="form-group">
                            CLAVE LECTOR:*<br/>
                            <input type="text" maxlength="18" class="x-form-control text-uppercase" id="factclavelector" placeholder="" autocomplete="off" />
                        </div>
                    </div>
                    <div class="col-3 col-sm-3 col-md-3 col-lg-2 col-xl-2">
                        <div class="form-group">
                            <span class="x-label">Telefono:</span>
                            <input type="number" maxlength="10" class="x-form-control" id="factTelefono" autocomplete="off"  />
                        </div>
                    </div>  
                    <div class="col-3 col-sm-3 col-md-3 col-lg-2 col-xl-2">                      
                        <div class="form-group">
                            <span class="x-label">Email:</span>
                            <input type="text" class="x-form-control" id="factEmail" autocomplete="off"/>
                        </div>
                    </div>
                    <div class="col-6 col-sm-6 col-md-6 col-lg-4 col-xl-4">  
                        <div class="form-group">
                            <span class="x-label">Régimen Fiscal:</span>
                            <select class="x-form-control" id="factRegimen"></select>
                        </div>
                    </div>
                    <div class="col-6 col-sm-6 col-md-6 col-lg-4 col-xl-4">  
                        <div class="form-group">
                            <span class="x-label">Uso de CFDI:</span>
                            <select class="x-form-control" id="factCfdi"></select>
                        </div>
                    </div>
                    <div class="col-4 col-sm-4 col-md-4 col-lg-3 col-xl-3">
                        <div class="form-group">
                            <span class="x-label">Calle:</span>
                            <input type="text" class="x-form-control" id="factCalle" autocomplete="off"/>
                        </div>
                    </div>
                    <div class="col-4">
                        <div class="row">
                            <div class="col-4">
                                <div class="form-group">
                                    # Ext:<br/>
                                    <input type="text" class="x-form-control" id="factNumExterior" autocomplete="off"/>
                                </div>
                            </div>
                            <div class="col-4">
                                <div class="form-group">
                                    # Int:<br/>
                                    <input type="text" class="x-form-control" id="factNumInterior" autocomplete="off"/>
                                </div>
                            </div>
                            <div class="col-4">
                                <div class="form-group">
                                    <span class="x-label">C.P:</span>
                                    <input type="number" maxlength="5" class="x-form-control" id="factCodigopostal" autocomplete="off"  />
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">
                        <div class="form-group">
                            <span class="x-label">Colonia:</span>
                            <input type="text" class="x-form-control" id="factColonia" autocomplete="off"/>
                        </div>
                    </div>
                    <div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">
                        <div class="form-group">
                            <span class="x-label">Pais:</span>
                            <select class="x-form-control" id="factPais" onchange="getEstados()">

                            </select>
                        </div>
                    </div>
                    <div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">
                        <div class="form-group">
                            <span class="x-label">Estado:</span>
                            <select class="x-form-control" id="factEstado" onchange="getMunicipios()">

                            </select>
                        </div>
                    </div>
                    <div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">
                        <div class="form-group">
                            <span class="x-label">Municipio:</span>
                            <select class="x-form-control" id="factMunicipio">

                            </select>
                        </div>
                    </div>
                    <div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">
                        <div class="form-group">
                            <span class="x-label">Tipo de cliente:</span>
                            <select class="x-form-control" id="factTipoCliente">

                            </select>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="form-group">
                            Sucursal:*<br/>
                            <select class="x-form-control" id="sucursal">

                            </select>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" id="modalNewClienteClose" data-bs-dismiss="modal">Cerrar</button>
                <button type="button" class="btn btn-success" id="modalNewClienteCrear" onclick="agregarCliente()">Crear</button>
            </div>
        </div>
    </div>
</div>
<!-- End Modal -->
<!-- Modal Almacenes -->
<div class="modal fade" id="selAlmacen" tabindex="-1" 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" id="selAlmacenClose" data-bs-dismiss="modal">Cerrar</button>
        </div>
        </div>
    </div>
</div>
<!-- End Modal -->
<!-- Modal Existencia del Articulo en Otros Almacenes -->
<div class="modal fade" id="modalAllExistencias" data-bs-keyboard="false" data-bs-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="modalAllExistenciasLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl" role="document" style="max-width: 90%;">
        <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title" id="modalAllExistenciasLabel">Existencia en otros almacenes</h5>
        </div>
        <div class="modal-body">
            <div class="col-3">
                <div class="form-group">
                    <span class="x-label">Sistema:</span>
                    <select class="x-form-control" id="sistema" onchange="changeSistema()">
                        <option value="0">PIVAZ</option>
                        <!-- <option value="1">Prediction</option> -->
                    </select>
                </div>
            </div>
            <div class="table-responsive">
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th>Almacén</th>
                            <!-- <th>Cto. Prom.</th> -->
                            <th>Existencia</th>
                            <th>Cant. Solicitar</th>
                            <th>Acciones</th>
                        </tr>
                    </thead>
                    <tbody id="dobyArticuloExistencias"></tbody>
                </table>
            </div>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" id="modalAllExistenciasClose" data-bs-dismiss="modal">Cerrar</button>
        </div>
        </div>
    </div>
</div>
<!-- End Modal -->
<!-- Modal Vendedores -->
<div class="modal fade" id="selVendedor" tabindex="-1" role="dialog" aria-labelledby="selVendedorLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
        <div class="modal-body">
            <div class="d-flex justify-content-center">
                <input type="text" class="form-control" id="codigoVendedor" style="width:90%; font-size:1.5em; text-align:center" placeholder="Codigo de vendedor" autocomplete="off" />
            </div>
            <div class="d-flex justify-content-center">
                <button class="btn btn-secondary" style="width:30%;float:left;font-size:1.5em; margin:2px" onclick="addInput(1)">1</button>
                <button class="btn btn-secondary" style="width:30%;float:left;font-size:1.5em; margin:2px" onclick="addInput(2)">2</button>
                <button class="btn btn-secondary" style="width:30%;float:left;font-size:1.5em; margin:2px" onclick="addInput(3)">3</button>
            </div>
            <div class="d-flex justify-content-center">
                <button class="btn btn-secondary" style="width:30%;float:left;font-size:1.5em; margin:2px" onclick="addInput(4)">4</button>
                <button class="btn btn-secondary" style="width:30%;float:left;font-size:1.5em; margin:2px" onclick="addInput(5)">5</button>
                <button class="btn btn-secondary" style="width:30%;float:left;font-size:1.5em; margin:2px" onclick="addInput(6)">6</button>
            </div>
            <div class="d-flex justify-content-center">
                <button class="btn btn-secondary" style="width:30%;float:left;font-size:1.5em; margin:2px" onclick="addInput(7)">7</button>
                <button class="btn btn-secondary" style="width:30%;float:left;font-size:1.5em; margin:2px" onclick="addInput(8)">8</button>
                <button class="btn btn-secondary" style="width:30%;float:left;font-size:1.5em; margin:2px" onclick="addInput(9)">9</button>
            </div>
            <div class="d-flex justify-content-center">
                <button class="btn btn-danger" style="width:30%;float:left;font-size:1.5em; margin:2px" onclick="delInput()"><i class="mdi mdi-backspace" style="font-size:1.5em"></i></button>
                <button class="btn btn-secondary" style="width:30%;float:left;font-size:1.5em; margin:2px" onclick="addInput(0)">0</button>
                <button class="btn btn-success" style="width:30%;float:left;font-size:1.5em; margin:2px" onclick="saveInput()"><i class="mdi mdi-check" style="font-size:1.5em"></i></button>
            </div>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" id="selVendedorClose" data-bs-dismiss="modal">Cerrar</button>
        </div>
        </div>
    </div>
</div>
<!-- End Modal -->
<!-- Modal Editar -->
<div class="modal fade" id="editItem" data-bs-keyboard="false" data-bs-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="editItemLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title" id="itemDescripcion"></h5>
            <div style="width:50%">
            </div>
        </div>
        <div class="modal-body">
            <div  style="border: #DDD 1px solid; background-color: #fefefe; padding:10px">
                <div style="text-align: center; justify-content: center; width: 100%; height:150px" id="itemImagen"></div>
                <div style="padding-top:2px; font-size: .9em; font-weight:bold"></div>
                <input type="text" style="display:none" id="itemId"/>
                <input type="text" style="display:none" id="itemIdArt"/>
                <input type="text" style="display:none" id="itemIdArtAlm"/>
                <input type="text" style="display:none" id="itemisService"/>
                <hr/>
                <div class="row">
                    <div class="col-3">
                        <label>Cod. Vend:</label><br/>
                        <input type="text" style="display:none" id="itemIdVendedor">
                        <input type="number" min="1" max="99999" onchange="getCodigoVendedor()" style="font-size:1.5em;text-align:center; width:100%" id="itemCodVendedor"/>
                    </div>
                    <div class="col-9">
                        <label>Nombre:</label><br/>
                        <input type="text" style="font-size:1.3em; width:100%" id="itemNombreVendedor" disabled/>
                    </div>
                </div>
                <br>
                <div class="row">
                    <div class="col-3">
                        <label>Cod. Inst:</label><br/>
                        <input type="text" style="display:none" id="itemIdInstalador">
                        <input type="number" min="1" max="99999" onchange="getCodigoInstalador()" style="font-size:1.5em;text-align:center; width:100%" id="itemCodInstalador"/>
                    </div>
                    <div class="col-9">
                        <label>Nombre:</label><br/>
                        <input type="text" style="font-size:1.3em; width:100%" id="itemNombreInstalador" disabled/>
                    </div>
                </div>
                <br>
                <div class="row">
                    <div class="col-5">
                        <label>Precio.U:</label><br/>
                        <input type="number" min="0" max="999999" style="font-size:1.5em;text-align:center; width:100%; display:none" id="itemPrecioTXT"/>
                        <select style="font-size:1.5em;text-align:center; width:100%" id="itemPrecioSEL" onchange="activaPrecioTXT()">
                        </select>                                
                    </div>
                    <div class="col-3">
                        <label>Cantidad:</label><br/>
                        <input type="number" min="1" max="99999" style="font-size:1.5em;text-align:center; width:100%" id="itemCantidad"/>
                    </div>
                    <div class="col-4">
                        <label>Descuento: (%)</label><br/>
                        <input type="number" min="0" max="100" style="font-size:1.5em;text-align:center; width:100%" disabled id="itemDescuento"/>
                    </div>
                </div>
                <hr/>                 
                <div style="padding-top:2px; font-size: .9em; text-align: center">
                        <button type="button" class="btn btn-success" onclick="saveEditItem()">
                            ACEPTAR
                        </button>
                        <button type="button" class="btn btn-danger" onclick="cancelEditItem()">
                            CANCELAR
                        </button>
                </div>
            </div>  
        </div>
        <div class="modal-footer" id="itemImporte" style="font-size:1.2em;font-weight:bold">
            
        </div>
        </div>
    </div>
</div>
<!-- End Modal -->

<!-- Modal Documentos -->
<div class="modal fade" id="selDocumentos" data-bs-keyboard="false" data-bs-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="selDocumentosLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl" role="document" style="max-width: 90%;">
        <div class="modal-content">
        <div class="modal-body">  
            <div class="row">       
                <div class="col-2">                        
                    <div class="form-group">
                        <span class="x-label">Fecha Inicio:</span>
                        <input type="text" class="x-form-control" id="fechaDoc" value="10/12/2025" onchange="changeFechaDoc()" readonly autocomplete="off"/>
                    </div>
                </div>
                <div class="col-2">                        
                    <div class="form-group">
                        <span class="x-label">Fecha Fin:</span>
                        <input type="text" class="x-form-control" id="fechaDocFin" value="10/12/2025" onchange="changeFechaDoc()" readonly autocomplete="off"/>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group">
                        <span class="x-label">Cliente:</span>
                        <input type="text" class="x-form-control" id="clienteDoc" autocomplete="off">
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group">
                        <button class="btn btn-primary" onclick="verDocumentos()">Ver</button>
                    </div>
                </div>
            </div> 
            <div class="table-responsive">
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th>Tipo</th>
                            <th>Fecha</th>
                            <th>Sucursal</th>
                            <th>Folio</th>
                            <th>Vendedor</th>
                            <th>Cliente</th>
                            <th>Metodo</th>
                            <th>Total</th>
                        </tr>
                    </thead>
                    <tbody id="bodyDocumentos"></tbody>
                </table>
            </div>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" id="selDocumentosClose" data-bs-dismiss="modal">Cerrar</button>
        </div>
        </div>
    </div>
</div>
<!-- End Modal -->
<!-- Modal Editar -->
<div class="modal fade" id="modalEnganche" data-bs-keyboard="false" data-bs-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="modalEngancheLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title">Enganche</h5>
        </div>
        <div class="modal-body">
            <div  style="border: #DDD 1px solid; background-color: #fefefe; padding:10px">
                <div class="row">
                    <div class="col-6">
                        <label>Monto de Enganche:</label>
                        <input type="number" min="1" max="99999" onchange="showInfoPPD()" class="x-form-control" id="enganche"/>
                    </div>
                    <div class="col-6">
                        <label>Forma de Pago:</label>
                        <select class="x-form-control" onchange="changeFormaPago()" id="formapago"></select>
                    </div>
                </div>
                <hr/>
                <div class="row">
                    <div class="col-3">
                        <b>Total:</b><br/>
                        <div id="infoTotal">0.00</div>
                    </div>
                    <div class="col-3">
                        <b>Enganche:</b><br/>
                        <div id="infoEnganche">0.00</div>
                    </div>
                    <div class="col-3">
                        <b>Financiado:</b><br/>
                        <div id="infoFinanciado">0.00</div>
                    </div>
                    <div class="col-3">
                        <b>Num. de Pagos:</b><br/>
                        <div id="infonumpagos">0</div>
                    </div>
                    <div class="col-3">
                        <b>Monto de Pago:</b><br/>
                        <div id="infomontopago">0.00</div>
                    </div>
                </div>
                <hr/>                 
                <div style="padding-top:2px; font-size: .9em; text-align: center">
                        <button type="button" class="btn btn-success" onclick="saveEnganche()">
                            ACEPTAR
                        </button>
                        <button type="button" class="btn btn-danger" onclick="cancelEnganche()">
                            CANCELAR
                        </button>
                </div>
            </div>  
        </div>
        <div class="modal-footer" id="itemImporte" style="font-size:1.2em;font-weight:bold">
            
        </div>
        </div>
    </div>
</div>
<!-- End Modal -->
<!-- Modal Forma de Pago -->
<div class="modal fade" id="modalCobroAnticipo" data-bs-keyboard="false" data-bs-backdrop="static" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-xl" role="document" style="max-width: 90%;">
        <div class="modal-content">
        <div class="modal-body">
            <div class="row">
                <div class="col-12 col-sm-12 col-md-12 col-lg-8 col-xl-8">
                    <div style="border: #eee 1px solid; width:100%">
                        <div style="display:inline-block; padding: 10px; background-color: #eee; width: 75px">
                            <i class="fa-regular fa-money-bill-wave" style="font-size:2.5em; color:#888"></i>
                        </div>
                        <div style="display:inline-block; padding: 10px; width: 200px">
                            <label>($) Efectivo:</label>
                            <input type="number" class="x-form-control" id="pagoEfectivo" autocomplete="off"/>
                        </div>
                    </div>    
                    <div style="border: #eee 1px solid; width:100%">  
                        <div style="display:inline-block; padding: 10px; background-color: #eee; width: 75px">
                            <i class="far fa-university" style="font-size:2.5em; color:#888"></i>
                        </div>
                        <div style="display:inline-block; padding: 10px; width: 200px">
                            <label>($) Deposito Bancario:</label>
                            <input type="number" class="x-form-control" id="pagoDepositoEfectivo" autocomplete="off" />
                        </div> 
                    </div>                   
                    <div style="border: #eee 1px solid; width:100%">
                        <div style="display:inline-block; padding: 10px; background-color: #eee; width: 75px">
                            <i class="fa-regular fa-credit-card" style="font-size:2.5em; color:#888"></i>
                        </div>
                        <div style="display:inline-block; padding: 10px; width: 200px">
                                <label>($) Tarjeta Débito:</label>
                                <input type="text" class="x-form-control" id="pagoTD" autocomplete="off" />
                        </div>
                        <!-- <div style="display:inline-block; padding: 10px; width: 200px">
                                <label>Banco:</label>
                                <select class="x-form-control" id="pagoTDBanco">

                                </select>
                        </div>
                        <div style="display:inline-block; padding: 10px; width: 180px">
                                <label>Referencia:</label>
                                <input type="number" class="x-form-control" id="pagoTDreferencia" autocomplete="off" />
                        </div> -->
                    </div>                 
                    <div style="border: #eee 1px solid; width:100%">
                        <div style="display:inline-block; padding: 10px; background-color: #eee; width: 75px">
                            <i class="fa-regular fa-credit-card" style="font-size:2.5em; color:#888"></i>
                        </div>
                        <div style="display:inline-block; padding: 10px; width: 200px">
                                <label>($) Tarjeta Crédito:</label>
                                <input type="text" class="x-form-control" id="pagoTC" autocomplete="off" />
                        </div>
                        <!-- <div style="display:inline-block; padding: 10px; width: 200px">
                                <label>Banco:</label>
                                <select class="x-form-control" id="pagoTCBanco">
                                    
                                </select>
                        </div>
                        <div style="display:inline-block; padding: 10px; width: 180px">
                                <label>Opción de Pago:</label>
                                <select class="x-form-control" id="pagoTCmodo"><option value="1">Una exhibición</value></select>
                        </div>
                        <div style="display:inline-block; padding: 10px; width: 180px">
                                <label>Referencia:</label>
                                <input type="number" class="x-form-control" id="pagoTCreferencia" autocomplete="off" />
                        </div> -->
                    </div>
                    <div style="border: #eee 1px solid; width:100%">
                        <div style="display:inline-block; padding: 10px; background-color: #eee; width: 75px">
                            <i class="fa-regular fa-money-check-dollar" style="font-size:2.5em; color:#888"></i>
                        </div>
                        <div style="display:inline-block; padding: 10px; width: 200px">
                                <label>($) Cheque:</label>
                                <input type="number" class="x-form-control" id="pagoCheque" autocomplete="off" />
                        </div>
                        <!-- <div style="display:inline-block; padding: 10px; width: 200px">
                                <label>Banco:</label>
                                <select class="x-form-control" id="pagoChequeBanco">
                                    
                                </select>
                        </div>
                        <div style="display:inline-block; padding: 10px; width: 180px">
                                <label>Número:</label>
                                <input type="number" class="x-form-control" id="pagoChequeNum" autocomplete="off" />
                        </div> -->
                    </div>    
                    <div style="border: #eee 1px solid; width:100%">
                        <div style="display:inline-block; padding: 10px; background-color: #eee; width: 75px">
                            <i class="fa-regular fa-left-right" style="font-size:2.5em; color:#888"></i>
                        </div>
                        <div style="display:inline-block; padding: 10px; width: 200px">
                                <label>($) Transferencia:</label>
                                <input type="number" class="x-form-control" id="pagoTransfer" autocomplete="off" />
                        </div>
                        <!-- <div style="display:inline-block; padding: 10px; width: 200px">
                                <label>Banco:</label>
                                <select class="x-form-control" id="pagoTransferBanco">
                                    
                                </select>
                        </div>
                        <div style="display:inline-block; padding: 10px; width: 180px">
                                <label>Folio:</label>
                                <input type="number" class="x-form-control" id="pagoTransferFolio" autocomplete="off" />
                        </div> -->
                    </div>    
                    <div style="border: #eee 1px solid; width:100%">
                        <div style="display:inline-block; padding: 10px; background-color: #eee; width: 75px">
                            <i class="fa-regular fa-credit-card-blank" style="font-size:2.5em; color:#888"></i>
                        </div>
                        <div style="display:inline-block; padding: 10px; width: 200px">
                                <label>($) Monedero E.:</label>
                                <input type="number" class="x-form-control" id="pagoMonedero" autocomplete="off" />
                        </div>
                        <!-- <div style="display:inline-block; padding: 10px; width: 200px">
                                <label>Compañía:</label>
                                <select class="x-form-control" id="pagoMonederoComp">
                                    
                                </select>
                        </div>
                        <div style="display:inline-block; padding: 10px; width: 180px">
                                <label>ID:</label>
                                <input type="number" class="x-form-control" id="pagoMonederoID" autocomplete="off" />
                        </div> -->
                    </div>   
                </div>
                <div class="col-12 col-sm-12 col-md-12 col-lg-4 col-xl-4" style="font-size:1.5em">
                    <div class="row">
                        <div class="col-6" style="text-align: right; font-weight:bold; font-size:1.6em">TOTAL ($):</div>
                        <div class="col-6" style="text-align: right; font-weight:bold; font-size:1.6em" id="cobroTotal">0.00</div>
                    </div>
                    <hr/>
                    <div class="row" id="divCobroEfectivo" style="display:none">
                        <div class="col-6" style="text-align: right; font-weight:bold; color:#6b6a6a">EFECTIVO ($):</div>
                        <div class="col-6" style="text-align: right; font-weight:bold; color:#6b6a6a" id="cobroEfectivo">0.00</div>
                    </div>
                    <div class="row" id="divCobroDepositoEfectivo" style="display:none">
                        <div class="col-6" style="text-align: right; font-weight:bold; color:#6b6a6a">DEP. EFECT. ($):</div>
                        <div class="col-6" style="text-align: right; font-weight:bold; color:#6b6a6a" id="cobroDeposito">0.00</div>
                    </div>
                    <div class="row" id="divCobroTD" style="display:none">
                        <div class="col-6" style="text-align: right; font-weight:bold; color:#6b6a6a">T. DEBITO ($):</div>
                        <div class="col-6" style="text-align: right; font-weight:bold; color:#6b6a6a" id="cobroTD">0.00</div>
                    </div>
                    <div class="row" id="divCobroTC" style="display:none">
                        <div class="col-6" style="text-align: right; font-weight:bold; color:#6b6a6a">T. CREDITO ($):</div>
                        <div class="col-6" style="text-align: right; font-weight:bold; color:#6b6a6a" id="cobroTC">0.00</div>
                    </div>
                    <div class="row" id="divCobroTransferencia" style="display:none">
                        <div class="col-6" style="text-align: right; font-weight:bold; color:#6b6a6a">TRANSFER. ($):</div>
                        <div class="col-6" style="text-align: right; font-weight:bold; color:#6b6a6a" id="cobroTransferencia">0.00</div>
                    </div>
                    <div class="row" id="divCobroCheque" style="display:none">
                        <div class="col-6" style="text-align: right; font-weight:bold; color:#6b6a6a">CHEQUE ($):</div>
                        <div class="col-6" style="text-align: right; font-weight:bold; color:#6b6a6a" id="cobroCheque">0.00</div>
                    </div>
                    <div class="row" id="divCobroMonedero" style="display:none">
                        <div class="col-6" style="text-align: right; font-weight:bold; color:#6b6a6a">MONEDERO ($):</div>
                        <div class="col-6" style="text-align: right; font-weight:bold; color:#6b6a6a" id="cobroMonedero">0.00</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-danger" id="modalCobroClose" data-bs-dismiss="modal">Cerrar</button>
            <button type="button" class="btn btn-success" onclick="generarAnticipo()">Aplicar Anticipo</button>
        </div>
        </div>
    </div>
</div>
<!-- End Modal -->

<!-- Modal Editar -->
<div class="modal fade" id="vehiculo" data-bs-keyboard="false" data-bs-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="vehiculoLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title">Datos del Vehículo</h5>
            <div style="width:50%">
            </div>
        </div>
        <div class="modal-body">
            <div class="row">
                <div class="col-3">
                    <label>Marca</label><br/>
                    <select style="font-size:1.5em; width:100%" id="vmarca" onchange="getVehiculoLinea()"></select>
                </div>
                <div class="col-3">
                    <label>Línea</label><br/>
                    <select style="font-size:1.5em; width:100%" id="vlinea" onchange="getVehiculoModelo()"></select>
                </div>
                <div class="col-3">
                    <label>Modelo</label><br/>
                    <select style="font-size:1.5em; width:100%" id="vmodelo"></select>
                </div>
                <div class="col-3">
                    <label>Color</label><br/>
                    <input type="text" style="font-size:1.5em; width:100%; border: #777 1px solid" id="vcolor" />
                </div>
            </div>
        </div>
        <div class="modal-footer" id="itemImporte" style="font-size:1.2em;font-weight:bold">
            <button type="button" class="btn btn-success" onclick="guardar()">
                ACEPTAR
            </button>
            <button type="button" data-bs-dismiss="modal" class="btn btn-danger">
                CANCELAR
            </button>
        </div>
        </div>
    </div>
</div>
<!-- End Modal -->

<!-- Modal Cotizaciones -->
<div class="modal fade" id="modalCotizacion" data-bs-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="selClienteLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl" role="document" style="max-width: 90%;">
        <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title" id="selClienteLabel">Selecciona la forma de Cotización</h5>
        </div>
        <div class="modal-body">
            <div class="row">
                <div class="col-md-2">
                    <div class="form-group">
                        <span class="x-label">Total:</span>
                        <input type="hidden" id="subtotalcotizacion">
                        <input type="hidden" id="ivacotizacion">
                        <input type="hidden" id="descuentocotizacion">
                        <input type="text" class="x-form-control" id="totalcotizacion" disabled autocomplete="off">
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="form-group">
                        <span class="x-label">Plazo:</span>
                        <select class="x-form-control" id="plazocotizacion" onchange="getPreciosPlazo()"></select>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="form-group">
                        <span class="x-label">Periodicidad:</span>
                        <select class="x-form-control" id="periodicidadcotizacion" onchange="getCotizacion()"></select>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="form-group">
                        <span class="x-label">Enganche:</span>
                        <input type="number" class="x-form-control" id="enganchecotizacion" onchange="getCotizacion()" autocomplete="off">
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="form-group">
                        <span class="x-label"># Pagos:</span>
                        <input type="number" class="x-form-control" id="numpagoscotizacion" disabled autocomplete="off">
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="form-group">
                        <span class="x-label">Fecha:</span>
                        <input type="text" class="x-form-control" id="fechacotizacion" onchange="getCotizacion()" readonly autocomplete="off">
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="table-responsive" style="height:200px;overflow:auto">
                    <table class="table table-striped">
                        <thead>
                            <tr>
                                <th>Codigo</th>
                                <th>Descripcion</th>
                                <th>Precio</th>
                                <th>Cant.</th>
                                <th>Subtotal</th>
                                <th>Desc.</th>
                                <th>Total</th>
                            </tr>
                        </thead>
                        <tbody id="bodyArticulosCotizacion"></tbody>
                    </table>
                </div>
            </div>
            <div class="row">
                <div class="table-responsive" style="height:400px;overflow:auto">
                    <table class="table table-striped">
                        <thead>
                            <tr>
                                <th># Pago</th>
                                <th>Fecha Pago</th>
                                <th>Monto</th>
                            </tr>
                        </thead>
                        <tbody id="bodySimulador"></tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
            <button type="button" class="btn btn-success" onclick="generarCotizacionCredito()">Generar</button>
        </div>
        </div>
    </div>
</div>
<!-- End Modal -->
<div class="row">
    <div class="col-12 col-sm-12 col-md-8 col-lg-8 col-xl-8">
        <div class="card">
            <div class="card-body">                    
                <div class="row">
                    <div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-3">     
                        <span class="x-label">FOLIO:</span>
                        <div class="input-group">
                            <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">
                                <button class="btn btn-sm btn-primary" type="button" onclick="abreModalDoctos()">
                                    <i class="mdi mdi-magnify" style="font-size:1em"></i>
                                </button>
                            </div>
                            <input type="text" style="display:none" id="idPedido">
                            <input type="text" style="display:none" id="tipoDocumento">
                        </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:</span>
                            <input type="text" class="x-form-control" id="fecha" value="10/12/2025"  readonly autocomplete="off"/>
                        </div>
                    </div>
                    <div class="col-12 col-sm-6 col-md-5 col-lg-3 col-xl-3">
                        <div class="form-group">
                            <span class="x-label">Almacen:</span>
                            <input type="text" class="x-form-control" id="almacen" placeholder="Seleccione..." readonly autocomplete="off"/>
                            <input type="text" style="display:none" id="almacenHidden">
                        </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">Cliente:</span>
                            <input type="text" class="x-form-control" id="cliente" placeholder="Seleccione..." readonly autocomplete="off" />
                            <input type="text" style="display:none" id="clienteHidden">
                        </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">Vendedor:</span>
                            <input type="text" class="x-form-control" id="vendedor" placeholder="Seleccione..." readonly autocomplete="off"  />
                            <input type="text" style="display:none" id="vendedorHidden">
                        </div>
                    </div>
                    <div class="col-2" style="display:none">                        
                        <div class="form-group">
                            <span class="x-label">Serie del artículo:</span>
                            <input type="text" class="x-form-control text-uppercase" id="seriearticulo" autocomplete="off"/>
                        </div>
                    </div>
                    <div class="col-12 col-sm-6 col-md-4 col-lg-2 col-xl-2">
                        <div class="form-group">
                            <span class="x-label">Tipo:</span>
                            <select class="x-form-control" id="metodopago" onchange="validaLinea()"></select>
                        </div>
                    </div>
                    <div class="col-12 col-sm-6 col-md-3 col-lg-2 col-xl-2" id="divmodalidadpago" style="display:none">
                        <div class="form-group">
                            <span class="x-label">Plazo:</span>
                            <select class="x-form-control" id="modalidadpago" onchange="changePlazo()"></select>
                        </div>
                    </div>
                    <div class="col-12 col-sm-6 col-md-3 col-lg-2 col-xl-2" id="divmodalidadcontado">
                        <div class="form-group">
                            <span class="x-label">Venta:</span>
                            <select class="x-form-control" id="modalidadcontado" onchange="changeModalidadContado()"></select>
                        </div>
                    </div>
                    <div class="col-12 col-sm-6 col-md-3 col-lg-4 col-xl-4" id="divfecliberacion" style="display:none">
                        <div class="form-group">
                            <span class="x-label">Fecha Promesa:</span>
                            <input type="text" class="x-form-control" id="fecpromesa" value="09/01/2026"  readonly autocomplete="off"/>
                        </div>
                    </div>
                    <div class="col-md-2" id="divbtnenganche" style="display:none">
                            <button class="btn btn-warning" onclick="abreEnganche()">Enganche</button>
                    </div>
                </div>
                <div id="divAnticipo" style="display:none;" class="row">
                    <hr>
                    <div class="col-12 col-sm-6 col-md-4 col-lg-2 col-xl-2">
                        <span class="x-label">Código:</span>
                        <div class="input-group">
                            <input type="text" class="form-control x-form-control-sm" style="padding:5px !important" id="buscarArticulo" />
                            <div class="input-group-append">
                                <button class="btn btn-sm btn-primary" type="button" onclick="getAllArticulos()">
                                    <i class="mdi mdi-magnify" style="font-size:1em"></i>
                                </button>
                            </div>
                            <input type="text" class="x-form-control" id="idArticuloAnticipo" style="display:none"/>
                            <input type="text" class="x-form-control" id="codigoArticuloAnticipo" style="display:none"/>
                        </div>   
                    </div>
                    <!-- <div class="col-12 col-sm-6 col-md-4 col-lg-2 col-xl-2">
                        <span class="x-label">Código:</span>
                        <div class="input-group">
                            <input type="text" class="x-form-control" style="padding:5px !important" id="buscarArticulo">
                                <div class="input-group-append">
                                <button class="btn btn-sm btn-primary" type="button" onclick="getAllArticulos()">
                                    <i class="mdi mdi-magnify" style="font-size:1em"></i>
                                </button>
                            </div>
                            <input type="text" class="x-form-control" id="idArticuloAnticipo" style="display:none"/>
                            <input type="text" class="x-form-control" id="codigoArticuloAnticipo" style="display:none"/>
                        </div>  
                    </div> -->
                    <div class="col-12 col-sm-6 col-md-8 col-lg-5 col-xl-5">                       
                        <div class="form-group">
                            <span class="x-label">Descripción</span>
                            <input type="text" class="x-form-control" id="descripcionArticuloAnticipo" disabled />
                        </div>
                    </div>
                    <div class="col-12 col-sm-12 col-md-12 col-lg-5 col-xl-5">
                        <div class="row">
                            <div class="col-12 col-sm-12 col-md-4 col-lg-4 col-xl-4">               
                                <div class="form-group">
                                    <span class="x-label">Cantidad</span>
                                    <input type="number" class="x-form-control" id="cantidadArticuloAnticipo"/>
                                </div>
                            </div>
                            <div class="col-12 col-sm-12 col-md-5 col-lg-5 col-xl-5">
                                <div class="form-group">
                                    <span class="x-label">Precio:</span>
                                        <div class="input-group" id="divPrecioManual" style="display:none">
                                            <input type="number" min="0" max="999999" id="precioArticuloAnticipo" class="form-control x-form-control-sm" style="padding:5px !important" autocomplete="off" />
                                            <div class="input-group-append">
                                                <button class="btn btn-sm btn-danger" id="buttonXrojo" type="button" onclick="changePreciosSelect()">
                                                    <i class="mdi mdi-close-circle" style="font-size:1em"></i>
                                                </button>
                                            </div>
                                        </div>   
                                    <select class="x-form-control" id="preciosArticuloAnticipo" onchange="changePrecioManual()">
                                    </select>  
                                </div>
                            </div>
                            <div class="col-12 col-sm-12 col-md-3 col-lg-3 col-xl-3">
                                <button type="button" id="buttonAgregarArticulo" class="btn btn-info btn-icon-text" onclick="addArticuloAnticipo()" disabled style="margin:3px; width:72px">
                                    <i class="mdi mdi-plus" style="font-size:1.6em"></i>                                                                          
                                </button>    
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row" style="height:300px; overflow:auto">
                    <table class="table table-striped">
                        <thead>
                            <tr>
                                <th>Imagen</th>
                                <th style="white-space: nowrap;text-overflow: ellipsis;overflow: hidden">Codigo</th>
                                <th>Descripción</th>
                                <th>Precio U.</th>
                                <th>Cantidad</th>
                                <th>Descuento</th>
                                <th>Importe</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody id="detalle">
                            
                        </tbody>
                    </table>
                </div>
                <div class="row" style="padding-top:20px">
                    <div class="col-12 col-sm-7 col-md-7 col-lg-6 col-xl-6">
                        <div style="float:left; margin-right:5px">
                            <button type="button" class="btn btn-success" style="margin:3px; width:150px" onclick="guardar()" id="btnGuardar">
                                <i class="mdi mdi-check" style="font-size:3.4em"></i>
                                <br/>
                                Remisionar
                            </button>   
                            <button type="button" class="btn btn-success" style="display:none; margin:3px; width:150px" onclick="guardarCotizacion()" id="btnApartar">
                                <i class="mdi mdi-content-save" style="font-size:3.4em"></i>
                                <br/>
                                Guardar
                            </button>
                            <button type="button" class="btn btn-success" style="display:none; margin:3px; width:150px" onclick="validaLiquidar()" id="btnLiquidar">
                                <i class="mdi mdi-check" style="font-size:3.4em"></i>
                                <br/>
                                Liquidar
                            </button>
                            <button type="button" class="btn btn-success" style="display:none; margin:3px; width:150px" onclick="guardarApartado()" id="btnAnticipo">
                                <i class="mdi mdi-basket-fill" style="font-size:3.4em"></i>
                                <br/>
                                Apartar
                            </button>
                        </div>
                        <div style="display:block">           
                            <button type="button" class="btn btn-danger" style="margin:3px; width:150px" id="btnCancelar" onclick="cancelar()" disabled>
                                Cancelar
                                <i class="ti-receipt btn-icon-append"></i>                                                                              
                            </button>            
                            <button type="button" class="btn btn-info btn-icon-text" style="margin:3px; width:150px" id="btnCotizar" onclick="cotizarcredito()" disabled>
                                <span id="spanCotizacion">Cotizar</span>
                                <i class="ti-receipt btn-icon-append"></i>                                                                              
                            </button> 
                            <br/>
                            <button type="button" class="btn btn-light btn-icon-text" style="margin:3px; width:150px" onclick="reinicia()" >
                                Limpiar
                                <i class="ti-file btn-icon-append"></i>                                                                              
                            </button>   
                            <button type="button" class="btn btn-warning btn-icon-text" style="margin:3px; width:150px" id="btnImprimir" onclick="imprimirTicketPedido()">
                                Imprimir
                                <i class="ti-printer btn-icon-append"></i>                                                                              
                            </button>      
                            <!-- <button type="button" class="btn btn-secondary btn-icon-text" style="margin:3px; width:130px">
                            Editar
                            <i class="ti-pencil-alt btn-icon-append"></i>                                                                              
                            </button>           
                            <button type="button" class="btn btn-secondary btn-icon-text" style="margin:3px; width:130px">
                            Desc.
                            <i class="ti-tag btn-icon-append"></i>                                                                              
                            </button>           
                            <button type="button" class="btn btn-secondary btn-icon-text" style="margin:3px; width:130px">
                            Unir
                            <i class="ti-link btn-icon-append"></i>                                                                              
                            </button>             
                            <button type="button" class="btn btn-secondary btn-icon-text" style="margin:3px; width:130px">
                            Dividir
                            <i class="ti-unlink btn-icon-append"></i>                                                                              
                            </button>              -->
                        </div>
                    </div>
                    <div class="col-12 col-sm-5 col-md-5 col-lg-3 col-xl-3">
                        <div class="form-group">
                            <span class="x-label">Observaciones:</span>
                            <textarea class="form-control x-form-control-sm" rows="4" id="observaciones"></textarea>
                        </div>
                    </div>
                    <div class="col-12 col-sm-12 col-md-12 col-lg-3 col-xl-3">
                        <div class="row">
                            <div class="col-md-12" id="divAnticipo">
                                <div class="row">
                                    <div class="col-6 col-sm-6 col-md-6">
                                        Anticipo:
                                    </div>
                                    <div class="col-6 col-sm-6 col-md-6" style="text-align:right" id="anticipo">
                                        $ 0.00
                                    </div> 
                                </div>
                            </div>
                            <div class="col-6 col-sm-6 col-md-6">
                                Subtotal:
                            </div>
                            <div class="col-6 col-sm-6 col-md-6" style="text-align:right" id="subtotal">
                                $ 0.00
                            </div>                    
                            <div class="col-6 col-sm-6 col-md-6">
                                Desc.:
                            </div>
                            <div class="col-6 col-sm-6 col-md-6" style="text-align:right" id="descuento">
                                $ 0.00
                            </div>                    
                            <div class="col-6 col-sm-6 col-md-6">
                                I.V.A:
                            </div>
                            <div class="col-6 col-sm-6 col-md-6" style="text-align:right" id="iva">
                                $ 0.00
                            </div>                   
                            <!-- <div class="col-md-6">
                                Imp. Ret:
                            </div>
                            <div class="col-md-6" style="text-align:right">
                                $ 0.00
                            </div>                    -->
                            <div class="col-6 col-sm-6 col-md-6">
                                <b>TOTAL:</b>
                            </div>
                            <div class="col-6 col-sm-6 col-md-6" style="text-align:right" id="total">
                                <b>$ 0.00</b>
                            </div>
                        </div>
                    </div>                    
                </div>
            </div>
        </div>
    </div>
    <div class="col-12 col-sm-12 col-md-4 col-lg-4 col-xl-4">
        <div class="card">
            <div class="card-body">             
                <div style="padding:10px">     
                    <div class="input-group">
                      <input type="text" class="form-control form-control-sm" placeholder="Buscar Producto" id="searchProducto" aria-label="Buscar Producto" autocomplete="off">
                      <div class="input-group-append">
                        <button class="btn btn-sm btn-primary" type="button" id="btnBusProds">
                            <i class="mdi mdi-binoculars" style="font-size:1.8em"></i>
                        </button>
                      </div>
                    </div>      
                </div>
                <div id="searchresult" style="height: 510px; overflow:auto">                    
                </div>
            </div>
        </div>
    </div>
</div>
@stop
@section('jspage')
  <script src="jsprod/misc.js"></script>
  <script src="jsprod/remision.js"></script>
@stop