@extends('layouts.default')
@section('content')
<!-- Modal Forma de Pago -->
<div class="modal fade" id="modalCobro" tabindex="-1" role="dialog" aria-labelledby="modalCobroLabel" 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"/>
                            <input type="hidden" id="idPedido"/>
                        </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 style="display:inline-block; padding: 10px; width: 200px">
                                <label>Forma de pago</label>
                                <select class="x-form-control" id="pagoDepositoEfectivoForma">
                                    <option value="01">Efectivo</value>
                                    <option value="02">Cheque</value>
                                </select>
                        </div>
                        <div style="display:inline-block; padding: 10px; width: 180px">
                                <label>Referencia:</label>
                                <input type="number" class="x-form-control" id="pagoDepositoEfectivoReferencia" 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">
                                    
                                </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-12">
                            <div class="form-group" style="text-align:left">
                                <span class="x-label">Sucursal:</span>
                                <select class="x-form-control" id="almacen"></select>
                            </div>
                        </div>
                    </div>
                    <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">
                            <input type="number" class="x-form-control" style="font-weight:bold" id="cobroTotal" autocomplete="off" />
                        </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="divCobroDeposito" 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 class="row" id="divAnticipo" style="display:none;">
                        <div class="col-6" style="text-align: right; font-weight:bold; color:#ceaf18">ANTICIPO ($):</div>
                        <div class="col-6" style="text-align: right; font-weight:bold; color:#ceaf18" id="cobroAnticipo">0.00</div>
                    </div>
                    <div class="row">
                        <div class="col-6" style="text-align: right; font-weight:bold; color:#fc1c03">FALTANTE ($):</div>
                        <div class="col-6" style="text-align: right; font-weight:bold; color:#fc1c03" id="cobroFaltante">0.00</div>
                    </div>
                    <div class="row">
                        <div class="col-6" style="text-align: right; font-weight:bold; color:#227d29">CAMBIO ($):</div>
                        <div class="col-6" style="text-align: right; font-weight:bold; color:#227d29" id="cobroCambio">0.00</div>
                    </div>
                </div>
            </div>
            <div class="row" id="cobroCredito" style="display:none">
                <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12" 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="divCobroDeposito">
                        <div class="col-6" style="text-align: right; font-weight:bold; color:#444444">Num. de Pagos:</div>
                        <div class="col-6" style="text-align: right; font-weight:bold; color:#444444" id="numPagos">0.00</div>
                    </div>
                    <div class="row" id="divCobroDeposito">
                        <div class="col-6" style="text-align: right; font-weight:bold; color:#444444">Dias de pago:</div>
                        <div class="col-6" style="text-align: right; font-weight:bold; color:#444444" id="diasPago">0.00</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-danger" onclick="cerrarCobro()" data-bs-dismiss="modal">Cerrar</button>
            <button type="button" class="btn btn-success" onclick="generarCobro()" id="aplicarCobro">Aplicar Cobro</button>
            <button type="button" class="btn btn-success" onclick="generarNotaCredito()" style="display:none;" id="buttonNotaCredito">Aplicar Cobro</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">                    
                <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="changeFecha()" id="filtrofecha" 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="changeFecha()" id="filtrofechafin" value="10/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="buttonAgregar" class="btn btn-success btn-icon-text" onclick="descargarApartados()" style="margin:3px; width:72px">
                            <i class="mdi mdi-download" style="font-size:1.6em"></i>                                                                          
                        </button>     
                    </div>
                </div>
                <div class="row">
                    <div class="table-responsive">
                            <table id="tablaAnticipos" class="table">
                            <thead>
                                <tr>
                                    <th>Fecha</th>
                                    <th>Folio</th>
                                    <th>Almacen</th>
                                    <th>Cliente</th>
                                    <th>Usuario</th>
                                    <th>Vencimiento</th>
                                    <th>Total</th>
                                    <th>Abonos</th>
                                    <th>Saldo</th>
                                    <th>Acciones</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                    <hr/>
                    <div class="table-responsive" style="height:300px; overflow:auto">
                        <table class="table table-striped">
                            <thead style="background-color:#777">
                                <tr>
                                    <th style="padding: 10px; text-align: center; color: #FFF">Codigo</th>
                                    <th style="padding: 10px; text-align: center; color: #FFF">Descripcion</th>
                                    <th style="padding: 10px; text-align: center; color: #FFF">Precio</th>
                                    <th style="padding: 10px; text-align: center; color: #FFF">cantidad solicitada</th>
                                    <th style="padding: 10px; text-align: center; color: #FFF">cantidad asignada</th>
                                    <th style="padding: 10px; text-align: center; color: #FFF">Acciones</th>
                                </tr>
                            </thead>
                            <tbody id="detalle"></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@stop

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