<div class="content-wrapper">
    <section class="content-header">
        <h1>Nueva Orden de Compra</h1>
    </section>

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

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

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

                            <input type="hidden" name="proveedor_id"  id="proveedor_id">
                            <input type="hidden" name="estado_id"     id="estado_id"    value="17">
                            <input type="hidden" name="tributo_id"    id="tributo_id"   value="<?php echo !empty($tributo_igv) ? $tributo_igv->id : ''; ?>">

                            <!-- FILA 1: Tipo / Fecha / Proveedor / Documento -->
                            <div class="row">
                                <div class="col-md-2 form-group">
                                    <label>Tipo <span class="text-danger">*</span></label>
                                    <select name="tipocs" id="tipocs" class="form-control" required>
                                        <option value="OC" selected>OC - Orden de Compra</option>
                                        <option value="OS">OS - Orden de Servicio</option>
                                    </select>
                                </div>
                                <div class="col-md-2 form-group">
                                    <label>Fecha <span class="text-danger">*</span></label>
                                    <input type="date" name="fecha" id="fecha" class="form-control"
                                           value="<?php echo date('Y-m-d'); ?>" required>
                                </div>
                                <div class="col-md-4 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 / Documento</label>
                                    <input type="text" id="proveedor_documento" class="form-control" readonly>
                                </div>
                                <div class="col-md-2 form-group">
                                    <label>Tipo de cambio</label>
                                    <input type="number" step="0.01" min="0" name="tipocambio" id="tipocambio"
                                           class="form-control" value="">
                                </div>
                            </div>

                            <!-- FILA 2: Contacto proveedor / Fecha entrega / Forma pago -->
                            <div class="row">
                                <div class="col-md-3 form-group">
                                    <label>Contacto proveedor</label>
                                    <input type="text" id="proveedor_contacto" class="form-control" readonly>
                                </div>
                                <div class="col-md-2 form-group">
                                    <label>Cargo contacto</label>
                                    <input type="text" id="proveedor_contacto_cargo" class="form-control" readonly>
                                </div>
                                <div class="col-md-2 form-group">
                                    <label>Fecha entrega <span class="text-danger">*</span></label>
                                    <input type="date" name="fechaentrega" id="fechaentrega" class="form-control" required>
                                </div>
                                <div class="col-md-3 form-group">
                                    <label>Forma de 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; ?>"><?php echo $item->nombre; ?></option>
                                        <?php endforeach; ?>
                                    </select>
                                </div>
                                <div class="col-md-2 form-group">
                                    <label>Detalle forma pago</label>
                                    <input type="text" name="fp_descripcion" id="fp_descripcion"
                                           class="form-control" maxlength="60">
                                </div>
                            </div>

                            <!-- FILA 3: Requerimiento (OC basada) -->
                            <div class="row">
                                <div class="col-md-4 form-group">
                                    <label>Basado en requerimiento <small class="text-muted">(opcional)</small></label>
                                    <select id="req_id_selector" class="form-control">
                                        <option value="">-- OC libre / Sin requerimiento --</option>
                                        <?php foreach($requerimientos as $req): ?>
                                            <option value="<?php echo $req->id; ?>">
                                                REQ-<?php echo str_pad($req->id, 5, '0', STR_PAD_LEFT); ?>
                                                | <?php echo date('d/m/Y', strtotime($req->fecha)); ?>
                                                | <?php echo $req->estado_nombre; ?>
                                            </option>
                                        <?php endforeach; ?>
                                    </select>
                                </div>
                                <div class="col-md-2 form-group" style="padding-top:25px;">
                                    <button type="button" id="btnCargarReq" class="btn btn-default">
                                        <i class="fa fa-download"></i> Cargar productos
                                    </button>
                                </div>
                            </div>

                            <hr>

                            <!-- BÚSQUEDA PRODUCTO -->
                            <div class="row">
                                <div class="col-md-4 form-group">
                                    <label>Agregar producto</label>
                                    <input type="text" id="producto_busqueda" class="form-control"
                                           placeholder="Buscar por código o nombre" autocomplete="off">
                                </div>
                            </div>

                            <!-- TABLA DETALLE -->
                            <div class="table-responsive">
                                <table class="table table-bordered table-hover table-striped" id="tablaDetalleOC">
                                    <thead>
                                        <tr>
                                            <th style="width:90px;">Código</th>
                                            <th>Descripción</th>
                                            <th style="width:70px;">Und.</th>
                                            <th style="width:100px;">Cantidad</th>
                                            <th style="width:120px;">Precio Unit.</th>
                                            <th style="width:110px;">Subtotal</th>
                                            <th style="width:50px;">Req.</th>
                                            <th style="width:45px;">Acc.</th>
                                        </tr>
                                    </thead>
                                    <tbody></tbody>
                                </table>
                            </div>

                            <!-- TOTALES -->
                            <div class="row">
                                <div class="col-md-7"></div>
                                <div class="col-md-5">
                                    <table class="table table-bordered">
                                        <tr>
                                            <th style="width:50%;">Subtotal</th>
                                            <td><input type="text" name="subtotal" id="oc_subtotal" class="form-control text-right" value="0.00" readonly></td>
                                        </tr>
                                        <tr>
                                            <th>IGV (<?php echo !empty($tributo_igv) ? number_format((float)$tributo_igv->valor_porcentual, 2) : '18.00'; ?>%)</th>
                                            <td><input type="text" name="igv" id="oc_igv" class="form-control text-right" value="0.00" readonly></td>
                                        </tr>
                                        <tr>
                                            <th>Total</th>
                                            <td><input type="text" name="total" id="oc_total" class="form-control text-right" value="0.00" readonly></td>
                                        </tr>
                                    </table>
                                    <input type="hidden" name="igv_porcentaje" id="igv_porcentaje"
                                           value="<?php echo !empty($tributo_igv) ? (float)$tributo_igv->valor_porcentual : 18; ?>">
                                </div>
                            </div>

                            <!-- COMENTARIOS -->
                            <div class="row">
                                <div class="col-md-12 form-group">
                                    <label>Comentarios</label>
                                    <textarea name="comentarios" id="comentarios" class="form-control" rows="3"></textarea>
                                </div>
                            </div>

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

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

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

    var filaIndex = 0;

    function redondear(num, dec) {
        return parseFloat(parseFloat(num).toFixed(dec));
    }

    function recalcularTotales() {
        var suma = 0;
        $('#tablaDetalleOC tbody tr').each(function() {
            suma += parseFloat($(this).find('.item-subtotal').val() || 0);
        });
        var igvPorc = parseFloat($('#igv_porcentaje').val() || 18);
        var subtotal = redondear(suma, 2);
        var igv      = redondear(subtotal * (igvPorc / 100), 2);
        var total    = redondear(subtotal + igv, 2);
        $('#oc_subtotal').val(subtotal.toFixed(2));
        $('#oc_igv').val(igv.toFixed(2));
        $('#oc_total').val(total.toFixed(2));
    }

    function recalcularFila($fila) {
        var cantidad = parseFloat($fila.find('.item-cantidad').val() || 0);
        var precio   = parseFloat($fila.find('.item-precio').val() || 0);
        var subtotal = redondear(cantidad * precio, 2);
        $fila.find('.item-subtotal').val(subtotal.toFixed(2));
        recalcularTotales();
    }

    function agregarFila(producto, reqId) {
        var idx = filaIndex++;
        reqId = reqId || '';

        var html = '<tr data-producto-id="' + producto.id + '">';
        html += '<td>';
        html += '<input type="hidden" name="detalle[' + idx + '][producto_id]" value="' + producto.id + '">';
        html += '<input type="hidden" name="detalle[' + idx + '][req_id]" class="item-req-id" value="' + (reqId || '') + '">';
        html += '<input type="text" class="form-control input-sm" value="' + producto.codigo + '" readonly>';
        html += '</td>';
        html += '<td><input type="text" name="detalle[' + idx + '][descripcion]" class="form-control input-sm item-desc" value="' + (producto.nombre || '') + '"></td>';
        html += '<td><input type="text" class="form-control input-sm" value="' + (producto.unidad_abreviado || '') + '" readonly></td>';
        html += '<td><input type="number" step="0.01" min="0.01" name="detalle[' + idx + '][cantidad]" class="form-control input-sm item-cantidad" value="' + (producto.cantidad || 1) + '"></td>';
        html += '<td><input type="number" step="0.0001" min="0" name="detalle[' + idx + '][precio_unitario]" class="form-control input-sm item-precio" value="' + (producto.precio || '0.0000') + '"></td>';
        html += '<td><input type="text" name="detalle[' + idx + '][subtotal]" class="form-control input-sm item-subtotal text-right" value="0.00" readonly></td>';
        html += '<td class="text-center"><small>' + (reqId ? 'REQ-' + String(reqId).padStart(5,'0') : 'Libre') + '</small></td>';
        html += '<td class="text-center"><button type="button" class="btn btn-danger btn-xs btn-eliminar-item"><i class="fa fa-trash"></i></button></td>';
        html += '</tr>';

        $('#tablaDetalleOC tbody').append(html);
        recalcularFila($('#tablaDetalleOC tbody tr').last());
    }

    // Autocomplete proveedor
    $('#proveedor_busqueda').autocomplete({
        source: function(request, response) {
            $.ajax({
                url: '<?php echo base_url("index.php/logistica/orden_compra/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_documento').val(ui.item.nro_documento);
            $('#fp_id').val(ui.item.fp_id || '');
            $('#fp_descripcion').val(ui.item.fp_descripcion || '');
            $('#proveedor_contacto').val(ui.item.contacto || '');
            $('#proveedor_contacto_cargo').val(ui.item.contacto_cargo || '');
            return false;
        }
    });

    // Autocomplete producto
    $('#producto_busqueda').autocomplete({
        source: function(request, response) {
            $.ajax({
                url: '<?php echo base_url("index.php/logistica/orden_compra/buscar_producto"); ?>',
                dataType: 'json',
                data: { term: request.term },
                success: function(data) { response(data); }
            });
        },
        minLength: 2,
        select: function(event, ui) {
            var repetido = false;
            $('#tablaDetalleOC tbody tr').each(function() {
                if ($(this).data('producto-id') == ui.item.id) { repetido = true; }
            });
            if (repetido) {
                Swal.fire({ icon: 'warning', title: 'Atención', text: 'El producto ya fue agregado' });
                $('#producto_busqueda').val('');
                return false;
            }
            agregarFila(ui.item);
            $('#producto_busqueda').val('');
            return false;
        }
    });

    // Cargar productos desde requerimiento
    $('#btnCargarReq').on('click', function() {
        var reqId = $('#req_id_selector').val();
        if (!reqId) {
            Swal.fire({ icon: 'warning', title: 'Atención', text: 'Selecciona un requerimiento primero' });
            return;
        }
        $.getJSON('<?php echo base_url("index.php/logistica/orden_compra/detalle_requerimiento/"); ?>' + reqId, function(data) {
            if (!data.length) {
                Swal.fire({ icon: 'info', title: 'Sin pendientes', text: 'El requerimiento no tiene productos con saldo pendiente' });
                return;
            }
            $.each(data, function(i, item) {
                var repetido = false;
                $('#tablaDetalleOC tbody tr').each(function() {
                    if ($(this).data('producto-id') == item.producto_id) { repetido = true; }
                });
                if (!repetido) {
                    agregarFila({
                        id: item.producto_id,
                        codigo: item.producto_codigo,
                        nombre: item.producto_nombre,
                        unidad_abreviado: item.unidad_abreviado,
                        cantidad: item.saldo,
                        precio: item.precio_unitario
                    }, item.req_id);
                }
            });
        });
    });

    // Recalcular al cambiar cantidad o precio
    $(document).on('input', '.item-cantidad, .item-precio', function() {
        recalcularFila($(this).closest('tr'));
    });

    // Eliminar fila
    $(document).on('click', '.btn-eliminar-item', function() {
        $(this).closest('tr').remove();
        recalcularTotales();
    });

    // Validar al enviar
    $('#formOC').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 ($('#tablaDetalleOC tbody tr').length === 0) {
            e.preventDefault();
            Swal.fire({ icon: 'warning', title: 'Atención', text: 'Debes agregar al menos un producto al detalle' });
            return false;
        }
    });

});
</script>
