<div class="content-wrapper">
    <section class="content-header">
        <h1>Nuevo Ajuste de Inventario</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 Ajuste de Inventario</strong></div>
                    <div class="panel-body">

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

                        <div class="alert alert-warning">
                            <i class="fa fa-exclamation-triangle"></i>
                            El ajuste se guardará en estado <strong>BORRADOR</strong> y deberá ser aprobado por un usuario autorizado para afectar el stock.
                        </div>

                        <form id="formAjuste" method="post" action="<?php echo base_url('index.php/almacen/ajuste_inventario/store'); ?>">

                            <!-- FILA 1 -->
                            <div class="row">
                                <div class="col-md-2 form-group">
                                    <label>Fecha <span class="text-danger">*</span></label>
                                    <input type="date" name="fecha" class="form-control"
                                           value="<?php echo date('Y-m-d'); ?>" required>
                                </div>
                                <div class="col-md-4 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 class="col-md-4 form-group">
                                    <label>Motivo <span class="text-danger">*</span></label>
                                    <select name="motivo_ajuste_id" id="motivo_ajuste_id" class="form-control" required>
                                        <option value="">Seleccione</option>
                                        <?php foreach($motivos as $item): ?>
                                            <option value="<?php echo $item->id; ?>">
                                                <?php echo $item->nombre; ?>
                                            </option>
                                        <?php endforeach; ?>
                                    </select>
                                </div>
                            </div>

                            <!-- BUSCAR PRODUCTO -->
                            <div class="row">
                                <div class="col-md-5 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" id="tablaDetalle">
                                    <thead>
                                        <tr>
                                            <th style="width:90px;">Código</th>
                                            <th>Producto</th>
                                            <th style="width:70px;">Und.</th>
                                            <th style="width:110px;">Stock Sistema</th>
                                            <th style="width:110px;">Stock Físico</th>
                                            <th style="width:110px;">Diferencia</th>
                                            <th style="width:110px;">P. Promedio</th>
                                            <th style="width:45px;">Acc.</th>
                                        </tr>
                                    </thead>
                                    <tbody></tbody>
                                </table>
                            </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 Borrador
                            </button>
                            <a href="<?php echo base_url('index.php/almacen/ajuste_inventario'); ?>" class="btn btn-default">
                                Cancelar
                            </a>

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

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

    var filaIndex = 0;

    function agregarFila(producto) {
        var idx = filaIndex++;
        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 + '][stock_sistema]" class="inp-sistema" value="' + producto.stock_actual + '">';
        html += '<input type="hidden" name="detalle[' + idx + '][precio_promedio]" value="' + producto.precio_promedio + '">';
        html += '<input type="text" class="form-control input-sm" value="' + producto.codigo + '" readonly>';
        html += '</td>';
        html += '<td><input type="text" name="detalle[' + idx + '][detalle]" class="form-control input-sm" 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" class="form-control input-sm text-right inp-sistema-vis" value="' + parseFloat(producto.stock_actual).toFixed(2) + '" readonly style="background:#eee;"></td>';
        html += '<td><input type="number" step="0.01" min="0" name="detalle[' + idx + '][stock_fisico]" class="form-control input-sm text-right inp-fisico" value="' + parseFloat(producto.stock_actual).toFixed(2) + '"></td>';
        html += '<td><input type="text" class="form-control input-sm text-right inp-diferencia" value="0.00" readonly></td>';
        html += '<td><input type="text" class="form-control input-sm text-right" value="' + parseFloat(producto.precio_promedio).toFixed(4) + '" readonly style="background:#eee;"></td>';
        html += '<td class="text-center"><button type="button" class="btn btn-danger btn-xs btn-eliminar"><i class="fa fa-trash"></i></button></td>';
        html += '</tr>';

        $('#tablaDetalle tbody').append(html);
        calcularDiferencia($('#tablaDetalle tbody tr').last());
    }

    function calcularDiferencia($fila) {
        var sistema = parseFloat($fila.find('.inp-sistema').val() || 0);
        var fisico  = parseFloat($fila.find('.inp-fisico').val() || 0);
        var diff    = fisico - sistema;

        var $inp = $fila.find('.inp-diferencia');
        $inp.val(diff.toFixed(2));

        if (diff < 0) {
            $inp.css('color', '#d9534f');
        } else if (diff > 0) {
            $inp.css('color', '#5cb85c');
        } else {
            $inp.css('color', '#333');
        }
    }

    // Autocomplete producto
    $('#producto_busqueda').autocomplete({
        source: function(request, response) {
            $.ajax({
                url: '<?php echo base_url("index.php/almacen/ajuste_inventario/buscar_producto"); ?>',
                dataType: 'json',
                data: { term: request.term, almacen_id: $('#almacen_id').val() },
                success: function(data) { response(data); }
            });
        },
        minLength: 2,
        select: function(event, ui) {
            var existe = false;
            $('#tablaDetalle tbody tr').each(function() {
                if ($(this).data('producto-id') == ui.item.id) { existe = true; }
            });
            if (existe) {
                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;
        }
    });

    // Recalcular diferencia al cambiar stock físico
    $(document).on('input', '.inp-fisico', function() {
        calcularDiferencia($(this).closest('tr'));
    });

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

    // Validar al enviar
    $('#formAjuste').on('submit', function(e) {
        if (!$('#almacen_id').val()) {
            e.preventDefault();
            Swal.fire({ icon: 'warning', title: 'Atención', text: 'Debes seleccionar un almacén' });
            return false;
        }
        if (!$('#motivo_ajuste_id').val()) {
            e.preventDefault();
            Swal.fire({ icon: 'warning', title: 'Atención', text: 'Debes seleccionar un motivo' });
            return false;
        }
        if ($('#tablaDetalle tbody tr').length === 0) {
            e.preventDefault();
            Swal.fire({ icon: 'warning', title: 'Atención', text: 'Debes agregar al menos un producto' });
            return false;
        }
    });

});
</script>
