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

    <section class="content">
        <div class="row">
            <div class="col-md-10">
                <div class="panel panel-primary">
                    <div class="panel-heading"><strong>Registro de Comprobante</strong></div>
                    <div class="panel-body">

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

                        <form id="formCP" method="post" action="<?php echo base_url('index.php/logistica/comprobante_proveedor/store'); ?>">

                            <input type="hidden" name="proveedor_id" id="proveedor_id">
                            <input type="hidden" name="ordc_id"      id="ordc_id"  value="">
                            <input type="hidden" name="pi_id"        id="pi_id"    value="">

                            <!-- FILA 1: Proveedor -->
                            <div class="row">
                                <div class="col-md-5 form-group">
                                    <label>Proveedor <span class="text-danger">*</span></label>
                                    <input type="text" id="proveedor_busqueda" class="form-control"
                                           placeholder="Buscar por razón social o RUC" autocomplete="off">
                                </div>
                                <div class="col-md-2 form-group">
                                    <label>RUC</label>
                                    <input type="text" id="proveedor_ruc" class="form-control" readonly>
                                </div>
                                <div class="col-md-2 form-group">
                                    <label>OC Referencia</label>
                                    <select id="ordc_selector" class="form-control">
                                        <option value="">Sin OC</option>
                                    </select>
                                </div>
                                <div class="col-md-3 form-group">
                                    <label>Parte Ingreso Ref.</label>
                                    <select id="pi_selector" class="form-control">
                                        <option value="">Sin Parte Ingreso</option>
                                    </select>
                                </div>
                            </div>

                            <!-- FILA 2: Tipo / Serie / Número / Fecha emisión / Fecha vencimiento -->
                            <div class="row">
                                <div class="col-md-2 form-group">
                                    <label>Tipo <span class="text-danger">*</span></label>
                                    <select name="tipo_comprobante" id="tipo_comprobante" class="form-control" required>
                                        <option value="">Seleccione</option>
                                        <option value="F">Factura</option>
                                        <option value="B">Boleta</option>
                                        <option value="RH">Rec. Honorarios</option>
                                        <option value="O">Otro</option>
                                    </select>
                                </div>
                                <div class="col-md-2 form-group">
                                    <label>Serie <span class="text-danger">*</span></label>
                                    <input type="text" name="serie" class="form-control" maxlength="10"
                                           placeholder="F001" required>
                                </div>
                                <div class="col-md-2 form-group">
                                    <label>Número <span class="text-danger">*</span></label>
                                    <input type="text" name="numero" class="form-control" maxlength="20"
                                           placeholder="00000123" required>
                                </div>
                                <div class="col-md-2 form-group">
                                    <label>F. Emisión <span class="text-danger">*</span></label>
                                    <input type="date" name="fecha_emision" class="form-control"
                                           value="<?php echo date('Y-m-d'); ?>" required>
                                </div>
                                <div class="col-md-2 form-group">
                                    <label>F. Vencimiento</label>
                                    <input type="date" name="fecha_vencimiento" id="fecha_vencimiento" class="form-control">
                                </div>
                                <div class="col-md-2 form-group">
                                    <label>Condición pago</label>
                                    <select name="fp_id" id="fp_id" class="form-control">
                                        <option value="">Seleccione</option>
                                        <?php foreach($formas_pago as $item): ?>
                                            <option value="<?php echo $item->id; ?>"
                                                    data-codigo="<?php echo $item->codigo; ?>">
                                                <?php echo $item->nombre; ?>
                                            </option>
                                        <?php endforeach; ?>
                                    </select>
                                </div>
                            </div>

                            <!-- FILA 3: Moneda / Tipo cambio / Subtotal / IGV / Total -->
                            <div class="row">
                                <div class="col-md-2 form-group">
                                    <label>Moneda <span class="text-danger">*</span></label>
                                    <select name="moneda_id" id="moneda_id" class="form-control" required>
                                        <?php foreach($monedas as $item): ?>
                                            <option value="<?php echo $item->id; ?>"
                                                <?php echo ($item->id == 1) ? 'selected' : ''; ?>>
                                                <?php echo $item->nombre; ?>
                                            </option>
                                        <?php endforeach; ?>
                                    </select>
                                </div>
                                <div class="col-md-2 form-group">
                                    <label>Tipo de cambio</label>
                                    <input type="number" step="0.0001" min="0" name="tipocambio"
                                           id="tipocambio" class="form-control">
                                </div>
                                <div class="col-md-2 form-group">
                                    <label>Subtotal <span class="text-danger">*</span></label>
                                    <input type="number" step="0.01" min="0" name="subtotal"
                                           id="subtotal" class="form-control text-right" value="0.00" required>
                                </div>
                                <div class="col-md-2 form-group">
                                    <label>IGV %</label>
                                    <input type="number" step="0.01" min="0" name="igv_porcentaje"
                                           id="igv_porcentaje" class="form-control text-right" value="18.00">
                                </div>
                                <div class="col-md-2 form-group">
                                    <label>IGV</label>
                                    <input type="number" step="0.01" min="0" name="igv"
                                           id="igv" class="form-control text-right" value="0.00" readonly>
                                </div>
                                <div class="col-md-2 form-group">
                                    <label>Total <span class="text-danger">*</span></label>
                                    <input type="number" step="0.01" min="0" name="total"
                                           id="total" class="form-control text-right" value="0.00" readonly>
                                </div>
                            </div>

                            <!-- FILA 4: DETRACCIÓN -->
                            <div class="row" id="bloqueDetraccion">
                                <div class="col-md-4 form-group">
                                    <label>Detracción</label>
                                    <select name="detraccion_id" id="detraccion_id" class="form-control">
                                        <option value="">Sin detracción</option>
                                        <?php foreach($detracciones as $det): ?>
                                            <option value="<?php echo $det->id; ?>"
                                                    data-porcentaje="<?php echo $det->porcentaje; ?>"
                                                    data-monto_minimo="<?php echo $det->monto_minimo; ?>">
                                                <?php echo $det->nombre; ?> (<?php echo $det->porcentaje; ?>%)
                                            </option>
                                        <?php endforeach; ?>
                                    </select>
                                </div>
                                <div class="col-md-2 form-group">
                                    <label>Importe detracción</label>
                                    <input type="number" step="0.01" min="0" name="importe_detraccion"
                                           id="importe_detraccion" class="form-control text-right" value="0.00" readonly>
                                </div>
                                <div class="col-md-3 form-group" id="alertaDetraccion" style="display:none; padding-top:25px;">
                                    <div class="alert alert-warning" style="padding:6px 10px; margin:0;">
                                        <i class="fa fa-exclamation-triangle"></i>
                                        Monto a pagar al proveedor: <strong id="montoNetoProveedor">0.00</strong>
                                    </div>
                                </div>
                            </div>

                            <!-- CUOTAS — solo visible si es CRÉDITO -->
                            <div class="row" id="bloqueCuotas" style="display:none;">
                                <div class="col-md-12">
                                    <div class="panel panel-default">
                                        <div class="panel-heading">
                                            <strong>Cuotas de pago</strong>
                                            <button type="button" class="btn btn-xs btn-default pull-right" id="btnAgregarCuota">
                                                <i class="fa fa-plus"></i> Agregar cuota
                                            </button>
                                        </div>
                                        <div class="panel-body" style="padding:0;">
                                            <table class="table table-bordered" id="tablaCuotas" style="margin:0;">
                                                <thead>
                                                    <tr>
                                                        <th style="width:60px;">N° Cuota</th>
                                                        <th>Fecha vencimiento</th>
                                                        <th>Importe</th>
                                                        <th style="width:45px;">Acc.</th>
                                                    </tr>
                                                </thead>
                                                <tbody></tbody>
                                            </table>
                                        </div>
                                    </div>
                                    <small class="text-muted">
                                        <i class="fa fa-info-circle"></i>
                                        Si no agrega cuotas se registra como pago único al vencimiento.
                                    </small>
                                    <div id="alertaCuotas" class="alert alert-info" style="display:none; margin-top:5px; padding:6px 10px;"></div>
                                </div>
                            </div>

                            <!-- OBSERVACIONES -->
                            <div class="row">
                                <div class="col-md-12 form-group">
                                    <label>Observaciones</label>
                                    <textarea name="observaciones" class="form-control" rows="2"></textarea>
                                </div>
                            </div>

                            <button type="submit" class="btn btn-primary">
                                <i class="fa fa-save"></i> Guardar Comprobante
                            </button>
                            <a href="<?php echo base_url('index.php/logistica/comprobante_proveedor'); ?>" class="btn btn-default">
                                Cancelar
                            </a>

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

<script>
window.addEventListener('load', function () {

    var cuotaIndex = 0;

    // Calcular IGV y Total
    function calcularTotales() {
        var subtotal = parseFloat($('#subtotal').val() || 0);
        var igvPorc  = parseFloat($('#igv_porcentaje').val() || 0);
        var igv      = parseFloat((subtotal * igvPorc / 100).toFixed(2));
        var total    = parseFloat((subtotal + igv).toFixed(2));
        $('#igv').val(igv.toFixed(2));
        $('#total').val(total.toFixed(2));
        calcularDetraccion();
    }

    // Calcular detracción
    function calcularDetraccion() {
        var total    = parseFloat($('#total').val() || 0);
        var $opcion  = $('#detraccion_id option:selected');
        var porc     = parseFloat($opcion.data('porcentaje') || 0);
        var minimo   = parseFloat($opcion.data('monto_minimo') || 0);

        if (porc > 0 && total >= minimo) {
            var importe = parseFloat((total * porc / 100).toFixed(2));
            $('#importe_detraccion').val(importe.toFixed(2));
            $('#montoNetoProveedor').text((total - importe).toFixed(2));
            $('#alertaDetraccion').show();
        } else {
            $('#importe_detraccion').val('0.00');
            $('#alertaDetraccion').hide();
        }
    }

    // Validar suma de cuotas
    function validarCuotas() {
        var total     = parseFloat($('#total').val() || 0);
        var sumCuotas = 0;
        $('#tablaCuotas tbody tr').each(function() {
            sumCuotas += parseFloat($(this).find('input[name*="importe"]').val() || 0);
        });
        sumCuotas = parseFloat(sumCuotas.toFixed(2));

        if ($('#tablaCuotas tbody tr').length > 0) {
            if (sumCuotas > total) {
                $('#alertaCuotas').text('⚠ La suma de cuotas (' + sumCuotas.toFixed(2) + ') supera el total (' + total.toFixed(2) + ')').show().removeClass('alert-info').addClass('alert-danger');
            } else if (sumCuotas < total) {
                $('#alertaCuotas').text('⚠ La suma de cuotas (' + sumCuotas.toFixed(2) + ') es menor al total (' + total.toFixed(2) + ')').show().removeClass('alert-danger').addClass('alert-warning');
            } else {
                $('#alertaCuotas').text('✔ Las cuotas suman exactamente el total').show().removeClass('alert-danger alert-warning').addClass('alert-info');
            }
        } else {
            $('#alertaCuotas').hide();
        }
    }

    $('#subtotal, #igv_porcentaje').on('input', function() { calcularTotales(); });
    $('#detraccion_id').on('change', function() { calcularDetraccion(); });

    // Condición de pago dinámica
    $('#fp_id').on('change', function() {
        var codigo = $(this).find('option:selected').data('codigo');
        if (codigo === 'CREDITO') {
            $('#bloqueCuotas').show();
        } else {
            $('#bloqueCuotas').hide();
            $('#tablaCuotas tbody').empty();
            cuotaIndex = 0;
            $('#alertaCuotas').hide();
        }
    });

    // Autocomplete proveedor
    $('#proveedor_busqueda').autocomplete({
        source: function(request, response) {
            $.ajax({
                url: '<?php echo base_url("index.php/logistica/comprobante_proveedor/buscar_proveedor"); ?>',
                dataType: 'json', data: { term: request.term },
                success: function(data) { response(data); }
            });
        },
        minLength: 2,
        select: function(event, ui) {
            $('#proveedor_id').val(ui.item.id);
            $('#proveedor_busqueda').val(ui.item.razon_social);
            $('#proveedor_ruc').val(ui.item.nro_documento);
            if (ui.item.fp_id) $('#fp_id').val(ui.item.fp_id).trigger('change');
            if (ui.item.moneda_id) $('#moneda_id').val(ui.item.moneda_id);

            $.getJSON('<?php echo base_url("index.php/logistica/comprobante_proveedor/oc_proveedor/"); ?>' + ui.item.id, function(ocs) {
                $('#ordc_selector').html('<option value="">Sin OC</option>');
                $.each(ocs, function(i, oc) {
                    $('#ordc_selector').append('<option value="' + oc.id + '">' + oc.codigo + ' | S/ ' + parseFloat(oc.total).toFixed(2) + '</option>');
                });
            });

            $.getJSON('<?php echo base_url("index.php/logistica/comprobante_proveedor/partes_proveedor/"); ?>' + ui.item.id, function(partes) {
                $('#pi_selector').html('<option value="">Sin Parte Ingreso</option>');
                $.each(partes, function(i, pi) {
                    $('#pi_selector').append('<option value="' + pi.id + '">PI-' + String(pi.id).padStart(5,'0') + ' | ' + pi.fecha.substring(0,10) + '</option>');
                });
            });

            return false;
        }
    });

    $('#ordc_selector').on('change', function() { $('#ordc_id').val($(this).val()); });
    $('#pi_selector').on('change', function()   { $('#pi_id').val($(this).val()); });

    // Agregar cuota
    $('#btnAgregarCuota').on('click', function() {
        var idx = cuotaIndex++;
        var html = '<tr>';
        html += '<td><input type="number" name="cuotas[' + idx + '][nro_cuota]" class="form-control input-sm" value="' + (idx + 1) + '" readonly></td>';
        html += '<td><input type="date" name="cuotas[' + idx + '][fecha_vencimiento]" class="form-control input-sm" required></td>';
        html += '<td><input type="number" step="0.01" min="0" name="cuotas[' + idx + '][importe]" class="form-control input-sm text-right inp-cuota-importe" value="0.00"></td>';
        html += '<td class="text-center"><button type="button" class="btn btn-danger btn-xs btn-eliminar-cuota"><i class="fa fa-trash"></i></button></td>';
        html += '</tr>';
        $('#tablaCuotas tbody').append(html);
        validarCuotas();
    });

    $(document).on('input', '.inp-cuota-importe', function() { validarCuotas(); });

    $(document).on('click', '.btn-eliminar-cuota', function() {
        $(this).closest('tr').remove();
        $('#tablaCuotas tbody tr').each(function(i) {
            $(this).find('input[name*="nro_cuota"]').val(i + 1);
        });
        validarCuotas();
    });

    // Validar al enviar
    $('#formCP').on('submit', function(e) {
        if (!$('#proveedor_id').val()) {
            e.preventDefault();
            Swal.fire({ icon: 'warning', title: 'Atención', text: 'Debes seleccionar un proveedor' });
            return false;
        }
        if (parseFloat($('#total').val()) <= 0) {
            e.preventDefault();
            Swal.fire({ icon: 'warning', title: 'Atención', text: 'El total debe ser mayor a 0' });
            return false;
        }

        // Validar cuotas si hay
        if ($('#tablaCuotas tbody tr').length > 0) {
            var total     = parseFloat($('#total').val() || 0);
            var sumCuotas = 0;
            $('#tablaCuotas tbody tr').each(function() {
                sumCuotas += parseFloat($(this).find('input[name*="importe"]').val() || 0);
            });
            sumCuotas = parseFloat(sumCuotas.toFixed(2));
            if (Math.abs(sumCuotas - total) > 0.01) {
                e.preventDefault();
                Swal.fire({ icon: 'warning', title: 'Cuotas incorrectas', text: 'La suma de cuotas (' + sumCuotas.toFixed(2) + ') debe ser igual al total (' + total.toFixed(2) + ')' });
                return false;
            }
        }
    });

});
</script>
