<div class="content-wrapper">
    <section class="content-header">
        <h1>Nueva Factura de Servicio</h1>
    </section>

    <section class="content">

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

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

            <div class="row">

                <!-- COLUMNA IZQUIERDA -->
                <div class="col-md-8">

                    <!-- Proveedor -->
                    <div class="panel panel-default">
                        <div class="panel-heading"><strong><i class="fa fa-building"></i> Proveedor</strong></div>
                        <div class="panel-body">
                            <input type="hidden" id="proveedor_id" name="proveedor_id">
                            <div class="form-group">
                                <label>Buscar proveedor <span class="text-danger">*</span></label>
                                <input type="text" id="buscarProveedor" class="form-control"
                                       placeholder="Escriba razón social o RUC..." autocomplete="off">
                            </div>
                            <div id="infoProveedor" style="display:none; background:#f9f9f9; padding:8px; border-radius:4px; font-size:12px;">
                                <strong id="proveedorNombre"></strong>
                                <span class="text-muted" id="proveedorRuc"></span>
                                <span class="label label-info" id="proveedorSector" style="margin-left:8px;"></span>
                            </div>
                        </div>
                    </div>

                    <!-- Datos del comprobante -->
                    <div class="panel panel-default">
                        <div class="panel-heading"><strong><i class="fa fa-file-text"></i> Datos del comprobante</strong></div>
                        <div class="panel-body">
                            <div class="row">
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label>Tipo <span class="text-danger">*</span></label>
                                        <select name="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>
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label>Serie <span class="text-danger">*</span></label>
                                        <input type="text" name="serie" class="form-control"
                                               maxlength="10" placeholder="F001">
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label>Número <span class="text-danger">*</span></label>
                                        <input type="text" name="numero" class="form-control"
                                               maxlength="20" placeholder="00001234">
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="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 $m): ?>
                                                <option value="<?php echo $m->id; ?>"
                                                    <?php echo $m->codigo === 'PEN' ? 'selected' : ''; ?>>
                                                    <?php echo $m->nombre; ?>
                                                </option>
                                            <?php endforeach; ?>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-3">
                                    <div class="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>
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label>F. Vencimiento</label>
                                        <input type="date" name="fecha_vencimiento" class="form-control">
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label>Condición de pago</label>
                                        <select name="fp_id" class="form-control">
                                            <option value="">Seleccione</option>
                                            <?php foreach ($formas_pago as $fp): ?>
                                                <option value="<?php echo $fp->id; ?>"><?php echo $fp->nombre; ?></option>
                                            <?php endforeach; ?>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label>Tipo de cambio</label>
                                        <input type="number" name="tipocambio" class="form-control"
                                               step="0.0001" placeholder="Solo si es USD">
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label>Observaciones</label>
                                <textarea name="observaciones" class="form-control" rows="2"></textarea>
                            </div>
                        </div>
                    </div>

                    <!-- Detalle de servicios -->
                    <div class="panel panel-warning">
                        <div class="panel-heading" style="display:flex; justify-content:space-between; align-items:center;">
                            <strong><i class="fa fa-list"></i> Detalle de servicios</strong>
                            <button type="button" class="btn btn-xs btn-default" id="btnAgregarLinea">
                                <i class="fa fa-plus"></i> Agregar línea
                            </button>
                        </div>
                        <div class="panel-body" style="padding:0;">
                            <div class="table-responsive">
                                <table class="table table-bordered" id="tablaDetalle" style="margin:0; font-size:12px;">
                                    <thead>
                                        <tr>
                                            <th style="width:18%;">Tipo servicio</th>
                                            <th style="width:32%;">Descripción</th>
                                            <th style="width:10%;">Cant.</th>
                                            <th style="width:8%;">Unidad</th>
                                            <th style="width:13%;">P. Unitario</th>
                                            <th style="width:13%;">Subtotal</th>
                                            <th style="width:6%;"></th>
                                        </tr>
                                    </thead>
                                    <tbody id="cuerpoDetalle">
                                        <!-- filas dinámicas -->
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                    <!-- Cuotas (opcional) -->
                    <div class="panel panel-default" id="panelCuotas" style="display:none;">
                        <div class="panel-heading" style="display:flex; justify-content:space-between; align-items:center;">
                            <strong><i class="fa fa-calendar"></i> Cuotas de pago</strong>
                            <button type="button" class="btn btn-xs btn-default" 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; font-size:12px;">
                                <thead>
                                    <tr>
                                        <th style="width:10%;">N° Cuota</th>
                                        <th style="width:35%;">F. Vencimiento</th>
                                        <th style="width:35%;">Importe</th>
                                        <th style="width:20%;"></th>
                                    </tr>
                                </thead>
                                <tbody id="cuerpoCuotas"></tbody>
                            </table>
                        </div>
                    </div>

                </div>

                <!-- COLUMNA DERECHA — Totales -->
                <div class="col-md-4">
                    <div class="panel panel-default" style="position:sticky; top:10px;">
                        <div class="panel-heading"><strong><i class="fa fa-calculator"></i> Totales</strong></div>
                        <div class="panel-body">

                            <table class="table table-condensed" style="font-size:13px;">
                                <tr>
                                    <th>Op. Gravadas</th>
                                    <td class="text-right" id="labelSubtotal">S/ 0.00</td>
                                </tr>
                                <tr>
                                    <th>
                                        IGV
                                        <select id="igv_modo" style="font-size:11px; padding:2px; margin-left:4px;">
                                            <option value="1">18%</option>
                                            <option value="0">0% (exonerado)</option>
                                        </select>
                                    </th>
                                    <td class="text-right" id="labelIgv">S/ 0.00</td>
                                </tr>
                                <tr style="font-size:15px; font-weight:bold; border-top:2px solid #000;">
                                    <th>TOTAL</th>
                                    <td class="text-right" id="labelTotal">S/ 0.00</td>
                                </tr>
                            </table>

                            <input type="hidden" name="subtotal" id="hSubtotal" value="0">
                            <input type="hidden" name="igv_porcentaje" id="hIgvPct" value="18">
                            <input type="hidden" name="igv" id="hIgv" value="0">
                            <input type="hidden" name="total" id="hTotal" value="0">

                            <hr>
                            <div class="form-group">
                                <div class="checkbox">
                                    <label>
                                        <input type="checkbox" id="chkCuotas">
                                        Pago en cuotas
                                    </label>
                                </div>
                            </div>

                            <hr>
                            <button type="submit" class="btn btn-primary btn-block" id="btnGuardar">
                                <i class="fa fa-save"></i> Registrar factura
                            </button>
                            <a href="<?php echo base_url('index.php/logistica/factura_servicio'); ?>"
                               class="btn btn-default btn-block">
                                <i class="fa fa-arrow-left"></i> Cancelar
                            </a>
                        </div>
                    </div>
                </div>

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

<script>
var URL_BUSCAR_PROVEEDOR = '<?php echo base_url("index.php/logistica/factura_servicio/buscar_proveedor"); ?>';
// Controlar obligatoriedad de serie y número según tipo
$('[name="tipo_comprobante"]').on('change', function () {
    var esOtro = $(this).val() === 'O';
    $('#lblSerie, #lblNumero').toggle(!esOtro);
    $('#serie, #numero').prop('required', !esOtro);
    if (esOtro) {
        $('#serie').val('S/N');
        $('#numero').val('0');
    } else {
        $('#serie, #numero').val('');
    }
});
var SECTORES = <?php echo json_encode(array_map(function($s) {
    return ['id' => $s->id, 'nombre' => $s->nombre];
}, $sectores)); ?>;

var filaCont = 0;
var cuotaCont = 0;

// ---- Autocomplete proveedor ----
$('#buscarProveedor').autocomplete({
    source: function (req, res) {
        $.get(URL_BUSCAR_PROVEEDOR, { term: req.term }, function (data) { res(data); }, 'json');
    },
    minLength: 2,
    select: function (e, ui) {
        $('#proveedor_id').val(ui.item.id);
        $('#proveedorNombre').text(ui.item.razon_social);
        $('#proveedorRuc').text(' ' + ui.item.nro_documento);
        $('#proveedorSector').text(ui.item.sector || '');
        $('#infoProveedor').show();
    }
});

// ---- Agregar línea de detalle ----
function agregarLinea() {
    var opts = '<option value="">Seleccione...</option>';
    SECTORES.forEach(function(s) { opts += '<option value="'+s.id+'">'+s.nombre+'</option>'; });

    var fila = '<tr id="fila_'+filaCont+'">' +
        '<td><select name="detalle['+filaCont+'][sector_negocio_id]" class="form-control input-sm">'+opts+'</select></td>' +
        '<td><input type="text" name="detalle['+filaCont+'][descripcion]" class="form-control input-sm" placeholder="Descripción del servicio"></td>' +
        '<td><input type="number" name="detalle['+filaCont+'][cantidad]" class="form-control input-sm det-cant" step="0.01" min="0" value="1"></td>' +
        '<td><input type="text" name="detalle['+filaCont+'][unidad]" class="form-control input-sm" placeholder="m2"></td>' +
        '<td><input type="number" name="detalle['+filaCont+'][precio_unitario]" class="form-control input-sm det-precio text-right" step="0.0001" min="0" value="0"></td>' +
        '<td><input type="number" name="detalle['+filaCont+'][subtotal]" class="form-control input-sm det-subtotal text-right" step="0.01" readonly value="0"></td>' +
        '<td class="text-center"><button type="button" class="btn btn-danger btn-xs btn-eliminar-fila" data-fila="'+filaCont+'"><i class="fa fa-trash"></i></button></td>' +
        '</tr>';

    $('#cuerpoDetalle').append(fila);
    filaCont++;
    recalcularTotales();
}

// Primera línea al cargar
agregarLinea();

$('#btnAgregarLinea').on('click', agregarLinea);

// ---- Calcular subtotal por fila ----
$(document).on('input', '.det-cant, .det-precio', function () {
    var fila = $(this).closest('tr');
    var cant   = parseFloat(fila.find('.det-cant').val()) || 0;
    var precio = parseFloat(fila.find('.det-precio').val()) || 0;
    var sub    = Math.round(cant * precio * 100) / 100;
    fila.find('.det-subtotal').val(sub.toFixed(2));
    recalcularTotales();
});

// ---- Eliminar fila ----
$(document).on('click', '.btn-eliminar-fila', function () {
    $('#fila_' + $(this).data('fila')).remove();
    recalcularTotales();
});

// ---- Recalcular totales ----
function recalcularTotales() {
    var subtotal = 0;
    $('.det-subtotal').each(function () { subtotal += parseFloat($(this).val()) || 0; });
    subtotal = Math.round(subtotal * 100) / 100;

    var igvPct  = $('#igv_modo').val() == '1' ? 18 : 0;
    var igv     = Math.round(subtotal * igvPct) / 100;
    var total   = Math.round((subtotal + igv) * 100) / 100;

    var moneda = 'S/';
    $('#labelSubtotal').text(moneda + ' ' + subtotal.toFixed(2));
    $('#labelIgv').text(moneda + ' ' + igv.toFixed(2));
    $('#labelTotal').text(moneda + ' ' + total.toFixed(2));

    $('#hSubtotal').val(subtotal.toFixed(2));
    $('#hIgvPct').val(igvPct);
    $('#hIgv').val(igv.toFixed(2));
    $('#hTotal').val(total.toFixed(2));
}

$('#igv_modo').on('change', recalcularTotales);

// ---- Cuotas ----
$('#chkCuotas').on('change', function () {
    $('#panelCuotas').toggle($(this).is(':checked'));
});

function agregarCuota() {
    cuotaCont++;
    var fila = '<tr>' +
        '<td><input type="hidden" name="cuotas['+cuotaCont+'][nro_cuota]" value="'+cuotaCont+'">'+cuotaCont+'</td>' +
        '<td><input type="date" name="cuotas['+cuotaCont+'][fecha_vencimiento]" class="form-control input-sm" required></td>' +
        '<td><input type="number" name="cuotas['+cuotaCont+'][importe]" class="form-control input-sm" step="0.01" min="0.01" required></td>' +
        '<td><button type="button" class="btn btn-danger btn-xs btn-eliminar-cuota"><i class="fa fa-trash"></i></button></td>' +
        '</tr>';
    $('#cuerpoCuotas').append(fila);
}

$('#btnAgregarCuota').on('click', agregarCuota);

$(document).on('click', '.btn-eliminar-cuota', function () {
    $(this).closest('tr').remove();
});

// ---- Validar antes de enviar ----
$('#formFacturaServicio').on('submit', function (e) {
    if (!$('#proveedor_id').val()) {
        e.preventDefault();
        Swal.fire('Validación', 'Debe seleccionar un proveedor.', 'warning');
        return;
    }
    var total = parseFloat($('#hTotal').val()) || 0;
    if (total <= 0) {
        e.preventDefault();
        Swal.fire('Validación', 'El total debe ser mayor a cero.', 'warning');
        return;
    }
    var tieneDetalle = false;
    $('#cuerpoDetalle tr').each(function () {
        if ($(this).find('[name*="descripcion"]').val()) tieneDetalle = true;
    });
    if (!tieneDetalle) {
        e.preventDefault();
        Swal.fire('Validación', 'Debe agregar al menos un servicio en el detalle.', 'warning');
    }
});
</script>
