<div class="content-wrapper">
    <section class="content-header">
        <h1>Nuevo Comprobante</h1>
    </section>

    <section class="content">
        <div class="row">
            <div class="col-md-12">

                <?php if($this->session->flashdata('error')): ?>
                    <div class="alert alert-danger"><?php echo $this->session->flashdata('error'); ?></div>
                <?php endif; ?>

                <?php echo validation_errors('<div class="alert alert-danger">', '</div>'); ?>

                <form method="post" action="<?php echo base_url('index.php/ventas/comprobante/store'); ?>" id="formComprobante">

                    <div class="box box-default">
                        <div class="box-header with-border">
                            <h3 class="box-title">1. Datos del comprobante</h3>
                        </div>
                        <div class="box-body">

                            <div class="row">
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label>Tipo de comprobante</label>
                                        <select name="comprobante_id" id="comprobante_id" class="form-control" required>
                                            <option value="">Seleccione...</option>
                                            <?php foreach($tipos_comprobante as $item): ?>
                                                <option value="<?php echo $item->id; ?>">
                                                    <?php echo $item->nombre; ?>
                                                </option>
                                            <?php endforeach; ?>
                                        </select>
                                    </div>
                                </div>

                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label>Fecha</label>
                                        <input type="datetime-local" name="fecha" class="form-control" required>
                                    </div>
                                </div>

                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label>Forma de pago</label>
                                        <select name="fp_id" id="fp_id" class="form-control" required disabled>
                                            <option value="">Seleccione...</option>
                                            <?php foreach($formas_pago as $item): ?>
                                                <option value="<?php echo $item->id; ?>"
                                                        data-codigo="<?php echo strtoupper($item->codigo); ?>"
                                                        data-nombre="<?php echo strtoupper($item->nombre); ?>">
                                                    <?php echo $item->nombre; ?>
                                                </option>
                                            <?php endforeach; ?>
                                        </select>
                                    </div>
                                </div>

                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label>Ord. compra cliente</label>
                                        <input type="text" name="ordcomp_cliente" class="form-control" maxlength="15">
                                    </div>
                                </div>
                                <!-- CAMPO ALMACÉN — agregar en el mismo row de los datos del comprobante -->
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label>Almacén <span class="text-danger">*</span></label>
                                        <select name="almacen_id" id="almacen_id" class="form-control" required>
                                            <option value="">Seleccione...</option>
                                            <?php foreach($almacenes as $item): ?>
                                                <option value="<?php echo $item->id; ?>">
                                                    <?php echo $item->nombre; ?>
                                                </option>
                                            <?php endforeach; ?>
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-12">
                                    <?php if((int)$tributo_igv->modo === 1): ?>
                                        <div class="alert alert-info" style="padding:8px 12px; margin-bottom:10px;">
                                            LOS PRECIOS INCLUYEN IGV
                                        </div>
                                    <?php else: ?>
                                        <div class="alert alert-warning" style="padding:8px 12px; margin-bottom:10px;">
                                            LOS PRECIOS NO INCLUYEN IGV
                                        </div>
                                    <?php endif; ?>
                                </div>
                            </div>

                            <input type="hidden" id="igv_porcentaje" value="<?php echo (float)$tributo_igv->valor_porcentual; ?>">
                            <input type="hidden" id="igv_modo" value="<?php echo (int)$tributo_igv->modo; ?>">
                            <input type="hidden" id="cliente_tiene_retencion" value="0">
                            <input type="hidden" id="cliente_retencion_porcentaje" value="0">
                            <input type="hidden" id="cliente_retencion_monto_minimo" value="0">
                            <input type="hidden" id="comprobante_detraccion_id" value="0">
                            <input type="hidden" id="comprobante_detraccion_porcentaje" value="0">
                            <input type="hidden" id="comprobante_detraccion_monto_minimo" value="0">
                            <input type="hidden" id="comprobante_detraccion_nombre" value="">

                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label>Cliente</label>
                                        <input type="hidden" name="cliente_id" id="cliente_id">
                                        <input type="text"
                                               id="cliente_busqueda"
                                               class="form-control"
                                               placeholder="Buscar por RUC/DNI o razón social (mínimo 2 caracteres)"
                                               autocomplete="off">
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label>Nro Documento</label>
                                        <input type="text" id="cliente_nro_documento" class="form-control" readonly>
                                    </div>
                                </div>

                                <div class="col-md-5">
                                    <div class="form-group">
                                        <label>Domicilio fiscal</label>
                                        <input type="text" id="cliente_domicilio_fiscal" class="form-control" readonly>
                                    </div>
                                </div>

                                <div class="col-md-2">
                                    <div class="form-group">
                                        <label>Vendedor</label>
                                        <input type="text" id="cliente_vendedor" class="form-control" readonly>
                                    </div>
                                </div>

                                <div class="col-md-2">
                                    <div class="form-group">
                                        <label>Moneda</label>
                                        <input type="text" id="cliente_moneda" class="form-control" readonly>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <label>Observaciones</label>
                                <textarea name="observaciones" class="form-control" rows="3"></textarea>
                            </div>

                        </div>
                    </div>

                    <div class="box box-default">
                        <div class="box-header with-border">
                            <h3 class="box-title">2. Detalle de productos</h3>
                        </div>
                        <div class="box-body">

                            <div class="row">
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label>Buscar producto</label>
                                        <input type="hidden" id="producto_id">
                                        <input type="text"
                                               id="producto_busqueda"
                                               class="form-control"
                                               placeholder="Buscar producto (mínimo 2 caracteres)"
                                               autocomplete="off">
                                    </div>
                                </div>

                                <div class="col-md-2">
                                    <div class="form-group">
                                        <label>UM</label>
                                        <input type="text" id="producto_um" class="form-control" readonly>
                                    </div>
                                </div>

                                <div class="col-md-2">
                                    <div class="form-group">
                                        <label>Stock</label>
                                        <input type="text" id="producto_stock" class="form-control" readonly>
                                    </div>
                                </div>

                                <div class="col-md-2">
                                    <div class="form-group">
                                        <label>Cantidad</label>
                                        <input type="number" step="0.01" min="0.01" id="producto_cantidad" class="form-control">
                                    </div>
                                </div>

                                <div class="col-md-2">
                                    <div class="form-group">
                                        <label>Precio</label>
                                        <input type="number" step="0.0001" min="0" id="producto_precio" class="form-control" readonly>
                                    </div>
                                </div>
                            </div>

                            <button type="button" id="btnAgregarProducto" class="btn btn-success">
                                <i class="fa fa-plus"></i> Agregar producto
                            </button>

                            <br><br>

                            <div class="table-responsive">
                                <table class="table table-bordered table-striped" id="tablaDetalle">
                                    <thead>
                                        <tr>
                                            <th>Ítem</th>
                                            <th>Producto</th>
                                            <th>Descripción</th>
                                            <th>Cantidad</th>
                                            <th>Precio Unit.</th>
                                            <th>Subtotal</th>
                                            <th>Acción</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr id="filaSinDetalle">
                                            <td colspan="7" class="text-center">No hay productos agregados</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                            <div class="row">
                                <div class="col-md-3 col-md-offset-9">
                                    <table class="table table-bordered">
                                        <tr>
                                            <th>Subtotal</th>
                                            <td><input type="text" id="resumen_subtotal" class="form-control text-right" readonly value="0.00"></td>
                                        </tr>
                                        <tr>
                                            <th>IGV</th>
                                            <td><input type="text" id="resumen_igv" class="form-control text-right" readonly value="0.00"></td>
                                        </tr>
                                        <tr>
                                            <th>Total</th>
                                            <td><input type="text" id="resumen_total" class="form-control text-right" readonly value="0.00"></td>
                                        </tr>
                                    </table>
                                </div>
                            </div>

                        </div>
                    </div>

                    <div class="box box-default" id="bloqueRetencion" style="display:none;">
                        <div class="box-header with-border">
                            <h3 class="box-title">Retención</h3>
                        </div>
                        <div class="box-body">
                            <div class="row">
                                <div class="col-md-6">
                                    <table class="table table-bordered">
                                        <tr>
                                            <th>Base imponible de la Retención</th>
                                            <td><input type="text" id="retencion_base" class="form-control text-right" readonly value="0.00"></td>
                                        </tr>
                                        <tr>
                                            <th>Porcentaje de Retención</th>
                                            <td><input type="text" id="retencion_porcentaje_texto" class="form-control text-right" readonly value="0.00%"></td>
                                        </tr>
                                        <tr>
                                            <th>Monto de la Retención</th>
                                            <td><input type="text" id="retencion_importe" class="form-control text-right" readonly value="0.00"></td>
                                        </tr>
                                        <tr>
                                            <th>Importe neto a pagar</th>
                                            <td><input type="text" id="retencion_pago_neto" class="form-control text-right" readonly value="0.00"></td>
                                        </tr>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>


                    <div class="box box-default" id="bloqueDetraccion" style="display:none;">
                        <div class="box-header with-border">
                            <h3 class="box-title">Detracción</h3>
                        </div>
                        <div class="box-body">
                            <div class="row">
                                <div class="col-md-6">
                                    <table class="table table-bordered">
                                        <tr>
                                            <th>Tipo de Detracción</th>
                                            <td><input type="text" id="detraccion_nombre" class="form-control" readonly value=""></td>
                                        </tr>
                                        <tr>
                                            <th>Base de la Detracción</th>
                                            <td><input type="text" id="detraccion_base" class="form-control text-right" readonly value="0.00"></td>
                                        </tr>
                                        <tr>
                                            <th>Porcentaje</th>
                                            <td><input type="text" id="detraccion_porcentaje_texto" class="form-control text-right" readonly value="0.00%"></td>
                                        </tr>
                                        <tr>
                                            <th>Importe de la Detracción</th>
                                            <td><input type="text" id="detraccion_importe" class="form-control text-right" readonly value="0.00"></td>
                                        </tr>
                                        <tr>
                                            <th>Importe neto a pagar</th>
                                            <td><input type="text" id="detraccion_pago_neto" class="form-control text-right" readonly value="0.00"></td>
                                        </tr>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="box box-default" id="bloqueCuotas" style="display:none;">
                        <div class="box-header with-border">
                            <h3 class="box-title">3. Cuotas</h3>
                        </div>
                        <div class="box-body">
                            <button type="button" id="btnAgregarCuota" class="btn btn-primary">
                                <i class="fa fa-plus"></i> Agregar cuota
                            </button>
                            <div class="alert alert-info" style="padding:8px 12px; margin-top:10px;">
                                La suma de cuotas debe ser igual al importe neto a pagar.
                            </div>
                            <br><br>

                            <div class="table-responsive">
                                <table class="table table-bordered table-striped" id="tablaCuotas">
                                    <thead>
                                        <tr>
                                            <th>Nro Cuota</th>
                                            <th>Fecha Vencimiento</th>
                                            <th>Importe</th>
                                            <th>Acción</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr id="filaSinCuotas">
                                            <td colspan="4" class="text-center">No hay cuotas agregadas</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                            <div class="row">
                                <div class="col-md-3 col-md-offset-9">
                                    <div class="form-group">
                                        <label>Total cuotas</label>
                                        <input type="text" id="total_cuotas" class="form-control text-right" readonly value="0.00">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <button type="submit" class="btn btn-primary">
                        <i class="fa fa-save"></i> Guardar
                    </button>

                    <a href="<?php echo base_url('index.php/ventas/comprobante'); ?>" class="btn btn-default">
                        Cancelar
                    </a>

                </form>
            </div>
        </div>
    </section>
</div>

<script>
window.addEventListener('load', function () {
    var contadorDetalle = 0;
    var contadorCuotas = 0;

    function recalcularTotales() {
        var modo = parseInt($('#igv_modo').val(), 10);
        var porcentaje = parseFloat($('#igv_porcentaje').val()) || 0;
        var sumaDetalle = 0;

        $('input[name="detalle_subtotal[]"]').each(function () {
            sumaDetalle += parseFloat($(this).val()) || 0;
        });

        var subtotal = 0;
        var igv = 0;
        var total = 0;

        if (modo === 1) {
            total = sumaDetalle;
            subtotal = total / (1 + (porcentaje / 100));
            igv = total - subtotal;
        } else {
            subtotal = sumaDetalle;
            igv = subtotal * (porcentaje / 100);
            total = subtotal + igv;
        }

        $('#resumen_subtotal').val(subtotal.toFixed(2));
        $('#resumen_igv').val(igv.toFixed(2));
        $('#resumen_total').val(total.toFixed(2));

        var aplicaDetraccion = recalcularDetraccion(total);
        recalcularRetencion(total, aplicaDetraccion);
    }

    function recalcularTotalCuotas() {
        var total = 0;
        $('input[name="cuota_importe[]"]').each(function () {
            total += parseFloat($(this).val()) || 0;
        });
        $('#total_cuotas').val(total.toFixed(2));
    }

    function renumerarCuotas() {
        var nro = 1;
        $('#tablaCuotas tbody tr').not('#filaSinCuotas').each(function () {
            $(this).find('.nro-cuota-texto').text(nro);
            $(this).find('input[name="cuota_nro[]"]').val(nro);
            nro++;
        });
        contadorCuotas = nro - 1;
    }

    function alternarCuotas() {
        var comprobanteId = $('#comprobante_id').val();
        var fpOption = $('#fp_id option:selected');
        var fpCodigo = (fpOption.data('codigo') || '').toString().toUpperCase();
        var fpNombre = (fpOption.data('nombre') || '').toString().toUpperCase();

        var esFactura = (parseInt(comprobanteId, 10) === 1);
        var esCredito = (fpCodigo === 'CREDITO' || fpNombre === 'CREDITO');

        if (esFactura && esCredito) {
            $('#bloqueCuotas').show();
        } else {
            $('#bloqueCuotas').hide();
            $('#tablaCuotas tbody').html('<tr id="filaSinCuotas"><td colspan="4" class="text-center">No hay cuotas agregadas</td></tr>');
            contadorCuotas = 0;
            recalcularTotalCuotas();
        }
    }

    function recalcularRetencion(total, aplicaDetraccion) {
        if (aplicaDetraccion) {
            $('#retencion_base').val('0.00');
            $('#retencion_porcentaje_texto').val('0.00%');
            $('#retencion_importe').val('0.00');
            $('#retencion_pago_neto').val(total.toFixed(2));
            $('#bloqueRetencion').hide();
            return;
        }

        var tieneRetencion = parseInt($('#cliente_tiene_retencion').val(), 10) || 0;
        var porcentajeRet = parseFloat($('#cliente_retencion_porcentaje').val()) || 0;
        var montoMinimoRet = parseFloat($('#cliente_retencion_monto_minimo').val()) || 0;
        var comprobanteId = parseInt($('#comprobante_id').val(), 10) || 0;

        var esFactura = (comprobanteId === 1);

        if (tieneRetencion === 1 && esFactura && total >= montoMinimoRet) {
            var importeRet = total * (porcentajeRet / 100);
            var pagoNeto = total - importeRet;

            $('#retencion_base').val(total.toFixed(2));
            $('#retencion_porcentaje_texto').val(porcentajeRet.toFixed(2) + '%');
            $('#retencion_importe').val(importeRet.toFixed(2));
            $('#retencion_pago_neto').val(pagoNeto.toFixed(2));
            $('#bloqueRetencion').show();
        } else {
            $('#retencion_base').val('0.00');
            $('#retencion_porcentaje_texto').val('0.00%');
            $('#retencion_importe').val('0.00');
            $('#retencion_pago_neto').val(total.toFixed(2));
            $('#bloqueRetencion').hide();
        }
    }


    function recalcularDetraccion(total) {
        var detracciones = [];
        var detraccionInfo = null;

        $('#tablaDetalle tbody tr').not('#filaSinDetalle').each(function () {
            var detraccionId = parseInt($(this).find('.detalle-detraccion-id').val(), 10) || 0;
            var detraccionNombre = $(this).find('.detalle-detraccion-nombre').val() || '';
            var detraccionPorcentaje = parseFloat($(this).find('.detalle-detraccion-porcentaje').val()) || 0;
            var detraccionMontoMinimo = parseFloat($(this).find('.detalle-detraccion-monto-minimo').val()) || 0;

            if (detraccionId > 1) {
                detracciones.push(detraccionId);

                detraccionInfo = {
                    id: detraccionId,
                    nombre: detraccionNombre,
                    porcentaje: detraccionPorcentaje,
                    monto_minimo: detraccionMontoMinimo
                };
            }
        });

        detracciones = [...new Set(detracciones)];
        var comprobanteId = parseInt($('#comprobante_id').val(), 10) || 0;
        var esFactura = (comprobanteId === 1);

        if (detracciones.length > 1) {
            $('#bloqueDetraccion').show();
            $('#detraccion_nombre').val('ERROR: múltiples detracciones');
            $('#detraccion_base').val(total.toFixed(2));
            $('#detraccion_porcentaje_texto').val('--');
            $('#detraccion_importe').val('0.00');
            $('#detraccion_pago_neto').val(total.toFixed(2));
            return false;
        }

        if (esFactura && detracciones.length === 1 && detraccionInfo && total >= detraccionInfo.monto_minimo) {
            var importeDet = total * (detraccionInfo.porcentaje / 100);
            var pagoNeto = total - importeDet;

            $('#detraccion_nombre').val(detraccionInfo.nombre);
            $('#detraccion_base').val(total.toFixed(2));
            $('#detraccion_porcentaje_texto').val(detraccionInfo.porcentaje.toFixed(2) + '%');
            $('#detraccion_importe').val(importeDet.toFixed(2));
            $('#detraccion_pago_neto').val(pagoNeto.toFixed(2));
            $('#bloqueDetraccion').show();

            return true;
        } else {
            $('#detraccion_nombre').val('');
            $('#detraccion_base').val('0.00');
            $('#detraccion_porcentaje_texto').val('0.00%');
            $('#detraccion_importe').val('0.00');
            $('#detraccion_pago_neto').val(total.toFixed(2));
            $('#bloqueDetraccion').hide();

            return false;
        }
    }

    $('#comprobante_id').on('change', function () {
        var value = $(this).val();
        $('#fp_id').prop('disabled', value === '');
        if (value === '') {
            $('#fp_id').val('');
        }
        alternarCuotas();
        recalcularTotales();
    });

    $('#fp_id').on('change', function () {
        alternarCuotas();
        recalcularTotales();
    });

    $('#cliente_busqueda').autocomplete({
        source: function(request, response) {
            $.ajax({
                url: '<?php echo base_url("index.php/ventas/comprobante/buscar_clientes"); ?>',
                dataType: 'json',
                data: { term: request.term },
                success: function(data) {
                    response(data);
                }
            });
        },
        minLength: 2,
        select: function(event, ui) {
            $('#cliente_id').val(ui.item.id);
            $('#cliente_busqueda').val(ui.item.value);
            $('#cliente_nro_documento').val(ui.item.nro_documento || '');
            $('#cliente_domicilio_fiscal').val(ui.item.domicilio_fiscal || '');
            $('#cliente_vendedor').val(ui.item.vendedor_nombre || '');
            $('#cliente_moneda').val(ui.item.moneda_nombre || '');
            $('#cliente_tiene_retencion').val(ui.item.tiene_retencion || 0);
            $('#cliente_retencion_porcentaje').val(ui.item.retencion_porcentaje || 0);
            $('#cliente_retencion_monto_minimo').val(ui.item.retencion_monto_minimo || 0);
            recalcularTotales();
            return false;
        }
    });

    $('#producto_busqueda').autocomplete({
        source: function(request, response) {
            $.ajax({
                url: '<?php echo base_url("index.php/ventas/comprobante/buscar_productos"); ?>',
                dataType: 'json',
                data: { term: request.term },
                success: function(data) {
                    response(data);
                }
            });
        },
        minLength: 2,
        select: function(event, ui) {
            $('#producto_id').val(ui.item.id);
            $('#producto_busqueda').val(ui.item.value);
            $('#producto_um').val(ui.item.um_abreviado || '');
            $('#producto_stock').val((ui.item.stock || 0).toFixed ? ui.item.stock.toFixed(2) : ui.item.stock);
            $('#producto_cantidad').val('');
            $('#producto_precio').val('');

            $('#producto_busqueda').data('detraccion_id', ui.item.detraccion_id || 0);
            $('#producto_busqueda').data('detraccion_nombre', ui.item.detraccion_nombre || '');
            $('#producto_busqueda').data('detraccion_porcentaje', ui.item.detraccion_porcentaje || 0);
            $('#producto_busqueda').data('detraccion_monto_minimo', ui.item.detraccion_monto_minimo || 0);
            return false;
        }
    });

    $('#producto_cantidad').on('change keyup', function () {
        var productoId = $('#producto_id').val();
        var cantidad = parseFloat($(this).val()) || 0;

        if (productoId === '' || cantidad <= 0) {
            $('#producto_precio').val('');
            return;
        }

        $.ajax({
            url: '<?php echo base_url("index.php/ventas/comprobante/obtener_precio_por_cantidad"); ?>',
            dataType: 'json',
            data: {
                producto_id: productoId,
                cantidad: cantidad
            },
            success: function(resp) {
                if (resp.status) {
                    $('#producto_precio').val(parseFloat(resp.precio).toFixed(4));
                } else {
                    $('#producto_precio').val('');
                }
            }
        });
    });







    $('#btnAgregarProducto').on('click', function () {
        var productoId = $('#producto_id').val();
        var productoTexto = $('#producto_busqueda').val();
        var cantidad = parseFloat($('#producto_cantidad').val()) || 0;
        var precio = parseFloat($('#producto_precio').val()) || 0;

        var productoDetraccionId = $('#producto_busqueda').data('detraccion_id') || 0;
        var productoDetraccionNombre = $('#producto_busqueda').data('detraccion_nombre') || '';
        var productoDetraccionPorcentaje = $('#producto_busqueda').data('detraccion_porcentaje') || 0;
        var productoDetraccionMontoMinimo = $('#producto_busqueda').data('detraccion_monto_minimo') || 0;

        if (productoId === '' || productoTexto === '') {
            Swal.fire('Validación', 'Debe seleccionar un producto', 'warning');
            return;
        }

        if (cantidad <= 0) {
            Swal.fire('Validación', 'Debe ingresar una cantidad válida', 'warning');
            return;
        }

        if (precio <= 0) {
            Swal.fire('Validación', 'No se pudo determinar el precio del producto', 'warning');
            return;
        }

        $('#filaSinDetalle').remove();

        contadorDetalle++;
        var subtotal = cantidad * precio;

        var fila = '';
        fila += '<tr>';
        fila += '<td>' + contadorDetalle + '</td>';
        fila += '<td>';
        fila += productoTexto;
        fila += '<input type="hidden" name="detalle_producto_id[]" value="' + productoId + '">';
        fila += '<input type="hidden" class="detalle-detraccion-id" value="' + productoDetraccionId + '">';
        fila += '<input type="hidden" class="detalle-detraccion-nombre" value="' + productoDetraccionNombre + '">';
        fila += '<input type="hidden" class="detalle-detraccion-porcentaje" value="' + productoDetraccionPorcentaje + '">';
        fila += '<input type="hidden" class="detalle-detraccion-monto-minimo" value="' + productoDetraccionMontoMinimo + '">';
        fila += '</td>';
        fila += '<td>';
        fila += '<input type="text" name="detalle_descripcion[]" class="form-control" value="' + productoTexto + '">';
        fila += '</td>';
        fila += '<td><input type="number" step="0.01" min="0.01" name="detalle_cantidad[]" class="form-control detalle-cantidad" value="' + cantidad.toFixed(2) + '"></td>';
        fila += '<td><input type="number" step="0.0001" min="0" name="detalle_precio_unitario[]" class="form-control detalle-precio" value="' + precio.toFixed(4) + '"></td>';
        fila += '<td><input type="number" step="0.01" min="0" name="detalle_subtotal[]" class="form-control detalle-subtotal" value="' + subtotal.toFixed(2) + '" readonly></td>';
        fila += '<td><button type="button" class="btn btn-danger btn-xs btnEliminarDetalle"><i class="fa fa-trash"></i></button></td>';
        fila += '</tr>';

        $('#tablaDetalle tbody').append(fila);

        $('#producto_id').val('');
        $('#producto_busqueda').val('').removeData('detraccion_id')
                                      .removeData('detraccion_nombre')
                                      .removeData('detraccion_porcentaje')
                                      .removeData('detraccion_monto_minimo');
        $('#producto_um').val('');
        $('#producto_stock').val('');
        $('#producto_cantidad').val('');
        $('#producto_precio').val('');

        recalcularTotales();
    });

    $(document).on('keyup change', '.detalle-cantidad, .detalle-precio', function () {
        var fila = $(this).closest('tr');
        var cantidad = parseFloat(fila.find('.detalle-cantidad').val()) || 0;
        var precio = parseFloat(fila.find('.detalle-precio').val()) || 0;
        var subtotal = cantidad * precio;

        fila.find('.detalle-subtotal').val(subtotal.toFixed(2));
        recalcularTotales();
    });

    $(document).on('click', '.btnEliminarDetalle', function () {
        $(this).closest('tr').remove();

        if ($('#tablaDetalle tbody tr').length === 0) {
            $('#tablaDetalle tbody').html('<tr id="filaSinDetalle"><td colspan="7" class="text-center">No hay productos agregados</td></tr>');
        }

        recalcularTotales();
    });

    $('#btnAgregarCuota').on('click', function () {
        $('#filaSinCuotas').remove();

        contadorCuotas++;

        var fila = '';
        fila += '<tr>';
        fila += '<td>';
        fila += '<span class="nro-cuota-texto">' + contadorCuotas + '</span>';
        fila += '<input type="hidden" name="cuota_nro[]" value="' + contadorCuotas + '">';
        fila += '</td>';
        fila += '<td><input type="date" name="cuota_fecha[]" class="form-control" required></td>';
        fila += '<td><input type="number" step="0.01" min="0.01" name="cuota_importe[]" class="form-control cuota-importe" value="0.00" required></td>';
        fila += '<td><button type="button" class="btn btn-danger btn-xs btnEliminarCuota"><i class="fa fa-trash"></i></button></td>';
        fila += '</tr>';

        $('#tablaCuotas tbody').append(fila);
        recalcularTotalCuotas();
    });

    $(document).on('keyup change', '.cuota-importe', function () {
        recalcularTotalCuotas();
    });

    $(document).on('click', '.btnEliminarCuota', function () {
        $(this).closest('tr').remove();

        if ($('#tablaCuotas tbody tr').length === 0) {
            $('#tablaCuotas tbody').html('<tr id="filaSinCuotas"><td colspan="4" class="text-center">No hay cuotas agregadas</td></tr>');
        }

        renumerarCuotas();
        recalcularTotalCuotas();
    });
});
</script>