@extends('layouts.admin')

@section('styles')
<link rel="stylesheet" href="{{asset('plugins/datatable/css/dataTables.bootstrap4.min.css')}}">
<link rel="stylesheet" href="{{asset('plugins/slim-select/slimselect.min.css')}}">
@endsection

@section('content')
<div class="container-fluid mb-5">

    <form action="{{route('articulo.compraStore')}}" method="post" id="form_compra">
        @csrf

        <div class="row">
            <div class="col-md-12 mb-3">
                <div class="card shadow-sm border-left-primary">
                    <div class="card-header bg-white">
                        <h5 class="m-0 font-weight-bold text-primary"><i class="fas fa-truck-loading mr-2"></i>Nueva Compra / Entrada</h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-4">
                                <label class="font-weight-bold">Proveedor <span class="text-danger">*</span></label>
                                <select name="proveedor_id" id="proveedor_id" class="form-control" required>
                                    @foreach($proveedores as $prov)
                                    <option value="{{$prov->id}}">{{$prov->nombre}} / {{$prov->empresa}}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-3">
                                <label class="font-weight-bold">No. Factura / Referencia <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" name="factura" required placeholder="Ej: A-10293">
                            </div>
                            <div class="col-md-3">
                                <label class="font-weight-bold">Fecha Compra</label>
                                <input type="date" class="form-control" name="fecha_compra" value="{{ date('Y-m-d') }}">
                            </div>
                            <div class="col-md-2 d-flex align-items-end">
                                <button type="button" class="btn btn-info btn-block" data-toggle="modal" data-target="#SEARCHARTICULO">
                                    <i class="fas fa-search"></i> Buscar Productos
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row mb-3" id="bloque_edicion" style="display:none; background: #eef2f7; padding: 15px; border-radius: 5px; margin: 0 5px;">
            <div class="col-12">
                <h6 class="text-muted border-bottom pb-2">Agregando: <strong id="lbl_nombre_art" class="text-dark"></strong></h6>
            </div>

            <input type="hidden" id="temp_id">

            <div class="col-md-2">
                <label class="small font-weight-bold">Stock Actual</label>
                <input type="text" class="form-control form-control-sm" id="temp_stock_actual" readonly>
            </div>

            <div class="col-md-2">
                <label class="small font-weight-bold text-success">Cantidad a Entrar</label>
                <input type="number" class="form-control" id="temp_cantidad" value="1" min="1">
            </div>

            <div class="col-md-2">
                <label class="small font-weight-bold">Costo Unit. (Q)</label>
                <input type="number" class="form-control" id="temp_costo" step="0.01">
            </div>

            <div class="col-md-2">
                <label class="small font-weight-bold">Precio Venta (Q)</label>
                <input type="number" class="form-control" id="temp_precio" step="0.01">
            </div>

            <div class="col-md-2">
                <label class="small font-weight-bold">Subtotal Costo</label>
                <input type="text" class="form-control form-control-sm" id="temp_subtotal" readonly>
            </div>

            <div class="col-md-2 d-flex align-items-end">
                <button type="button" class="btn btn-success btn-block" id="btn_agregar_fila">
                    <i class="fas fa-plus-circle"></i> Agregar
                </button>
            </div>
        </div>

        <div class="row">
            <div class="col-md-12">
                <div class="card shadow">
                    <div class="card-body p-0">
                        <div class="table-responsive">
                            <table class="table table-hover table-striped mb-0" id="tabla_bolsa">
                                <thead class="bg-dark text-white">
                                    <tr>
                                        <th>Acción</th>
                                        <th>Artículo</th>
                                        <th class="text-center">Cant.</th>
                                        <th class="text-right">Costo U.</th>
                                        <th class="text-right">Total Costo</th>
                                        <th class="text-right">Nuevo Precio Venta</th>
                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>
                                <tfoot>
                                    <tr class="bg-light font-weight-bold">
                                        <td colspan="4" class="text-right">TOTAL FACTURA:</td>
                                        <td class="text-right" id="lbl_total_factura">Q 0.00</td>
                                        <td></td>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                    </div>
                    <div class="card-footer text-right">
                        <button type="submit" class="btn btn-primary btn-lg shadow">
                            <i class="fas fa-save mr-2"></i> GUARDAR COMPRA
                        </button>
                    </div>
                </div>
            </div>
        </div>

    </form>
</div>

<div class="modal fade" id="SEARCHARTICULO" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-scrollable" role="document" style="max-width: 95vw;">
        <div class="modal-content">
            <div class="modal-header bg-info text-white py-2">
                <h5 class="modal-title font-weight-bold"><i class="fas fa-search mr-2"></i>Catálogo de Artículos</h5>
                <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>

            <div class="modal-body bg-light">
                <div class="card shadow-sm border-0">
                    <div class="card-body p-2">
                        <div class="table-responsive">
                            <table class="table table-striped table-bordered table-hover w-100" id="table_busqueda">
                                <thead class="thead-dark">
                                    <tr>
                                        <th style="width: 50px;">Acción</th>
                                        <th>Nombre</th>
                                        <th>Código</th>
                                        <th>Stock</th>
                                        <th>Costo Actual</th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            <div class="modal-footer py-1 bg-white">
                <button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">Cerrar</button>
            </div>
        </div>
    </div>
</div>

@endsection

@section('scripts')
<script src="{{asset('plugins/datatables/jquery.dataTables.min.js')}}"></script>
<script src="{{asset('plugins/datatable/js/dataTables.bootstrap4.min.js')}}"></script>
<script src="{{asset('plugins/slim-select/slimselect.min.js')}}"></script>

<script>
    // Inicializar Select
    new SlimSelect({
        select: '#proveedor_id'
    });

    $('#SEARCHARTICULO').on('shown.bs.modal', function() {
        $('#table_busqueda').DataTable().columns.adjust().responsive.recalc();
    });

    let totalGlobalCompra = 0;

    $(document).ready(function() {
        // Inicializar DataTable Ajax
        $("#table_busqueda").DataTable({
            processing: true,
            serverSide: false, // O true si prefieres
            ajax: "{{ route('articulo.getArticulos') }}",
            columns: [{
                    data: null,
                    render: function(data, type, row) {
                        // Enviamos el objeto completo a la función seleccionar
                        let datos = JSON.stringify(row).replace(/"/g, '&quot;');
                        return `<button type="button" class="btn btn-sm btn-success rounded-circle"
                                onclick="seleccionarArticulo(${datos})"><i class="fas fa-check"></i></button>`;
                    }
                },
                {
                    data: "nombre"
                },
                {
                    data: "cod_barras"
                }, // O 'codigo'
                {
                    data: "stock"
                },
                {
                    data: "p_costo",
                    render: $.fn.dataTable.render.number(',', '.', 2, 'Q ')
                }
            ],
            language: {
                url: "//cdn.datatables.net/plug-ins/1.10.25/i18n/Spanish.json"
            }
        });

        // Eventos de cálculo en inputs temporales
        $('#temp_cantidad, #temp_costo').on('input', function() {
            let cant = parseFloat($('#temp_cantidad').val()) || 0;
            let costo = parseFloat($('#temp_costo').val()) || 0;
            $('#temp_subtotal').val((cant * costo).toFixed(2));
        });

        // Agregar fila
        $('#btn_agregar_fila').click(function() {
            agregarFila();
        });
    });

    // Función al dar click en el modal
    function seleccionarArticulo(data) {
        // Llenar campos temporales
        $('#lbl_nombre_art').text(data.nombre + ' (' + (data.cod_barras || '') + ')');
        $('#temp_id').val(data.id);
        $('#temp_stock_actual').val(data.stock);
        $('#temp_cantidad').val(1);
        $('#temp_costo').val(data.p_costo);
        $('#temp_precio').val(data.p_venta);
        $('#temp_subtotal').val(data.p_costo); // 1 * costo

        // Mostrar área de edición
        $('#bloque_edicion').slideDown();
        $('#SEARCHARTICULO').modal('hide');
        $('#temp_cantidad').focus();
    }

    function agregarFila() {
        let id = $('#temp_id').val();
        let nombre = $('#lbl_nombre_art').text();
        let cant = parseFloat($('#temp_cantidad').val());
        let costo = parseFloat($('#temp_costo').val());
        let precio = parseFloat($('#temp_precio').val());
        let subtotal = cant * costo;

        if (!id || cant <= 0) return;

        // Crear fila HTML
        // NOTA: Uso nombres de array correctos para el controlador: bosla_id[], cantidad_bolsa[], costo[], precio[]
        let fila = `
            <tr>
                <td><button type="button" class="btn btn-danger btn-sm rounded-circle" onclick="eliminarFila(this, ${subtotal})"><i class="fas fa-trash"></i></button></td>
                <td>
                    <input type="hidden" name="bosla_id[]" value="${id}">
                    ${nombre}
                </td>
                <td class="text-center">
                    <input type="hidden" name="cantidad_bolsa[]" value="${cant}">
                    ${cant}
                </td>
                <td class="text-right">
                    <input type="hidden" name="costo[]" value="${costo}">
                    Q ${costo.toFixed(2)}
                </td>
                <td class="text-right font-weight-bold">
                    Q ${subtotal.toFixed(2)}
                </td>
                <td class="text-right">
                    <input type="hidden" name="precio[]" value="${precio}">
                    <span class="badge badge-light border">Q ${precio.toFixed(2)}</span>
                </td>
            </tr>
        `;

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

        // Actualizar total
        totalGlobalCompra += subtotal;
        $('#lbl_total_factura').text('Q ' + totalGlobalCompra.toFixed(2));

        // Limpiar y ocultar
        $('#bloque_edicion').slideUp();
        $('#temp_id').val('');
    }

    function eliminarFila(btn, monto) {
        $(btn).closest('tr').remove();
        totalGlobalCompra -= monto;
        $('#lbl_total_factura').text('Q ' + totalGlobalCompra.toFixed(2));
    }
</script>
@endsection