@extends('layouts.admin')

@section('styles')
<link rel="stylesheet" href="{{asset('plugins/datatables/buttons.dataTables.min.css')}}">
<link rel="stylesheet" href="{{asset('plugins/datatable/css/dataTables.bootstrap4.min.css')}}">
<style>
    mark {
        padding: 0;
        background-color: rgb(255, 136, 176);
        border-radius: 0.28571429rem;
    }

    /* Ajuste para input groups en BS5 si es necesario */
    .input-group-text {
        height: 100%;
    }
</style>
<link rel="stylesheet" type="text/css" href="{{asset('plugins/datatables/colReorder.dataTables.min.css')}}" />
<link rel="stylesheet" type="text/css" href="{{asset('plugins/datatables/rowReorder.dataTables.min.css')}}" />
<link rel="stylesheet" href="{{asset('plugins/slim-select/slimselect.min.css')}}">
@endsection

@section('content')
<div class="container-fluid mb-5">
    <div class="row">
        <div class="col-md-9">
            <div class="card">
                <h4 class="card-title text-uppercase p-3">PEDIDOS DE ARTICULOS</h4>

                <form action="{{route('pedido.store')}}" class="card-body" method="post">
                    @csrf

                    <button type="button" class="btn btn-primary mb-3" data-bs-toggle="modal" data-bs-target="#SEARCHARTICULO">
                        BUSCAR ARTICULO
                    </button>

                    <div class="modal fade" id="SEARCHARTICULO" tabindex="-1" aria-labelledby="modelTitleId" aria-hidden="true">
                        <div class="modal-dialog modal-lg" style="max-width: 70vw;">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="modelTitleId">BUSCAR ARTICULOS</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                </div>
                                <div class="modal-body table-responsive">
                                    <table class="table" id="table_id" data-page-length="8">
                                        <thead style="cursor: pointer;">
                                            <tr>
                                                <th></th>
                                                <th>Nombre</th>
                                                <th>Descripcion</th>
                                                <th>Categoria</th>
                                                <th>Precio Venta</th>
                                                <th>Stock</th>
                                                <th>Minimo</th>
                                                <th>Detalles</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                        </tbody>
                                    </table>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                                        <i class="fas fa-closed-captioning"></i> Cerrar
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row g-3">
                        <div class="col-md-2">
                            <label class="form-label">Articulo Seleccionado</label>
                            <label type="text" class="form-control bg-light" id="articulo_select" style="min-height: 38px;"></label>
                        </div>

                        <div class="col-md-4">
                            <div class="mb-3"> <label class="form-label">Nombre Articulo</label>
                                <input type="text" class="form-control" name="articulo_name" id="articulo_name" placeholder="Articulo">
                            </div>
                        </div>

                        <div class="d-none">
                            <label for="">NUMERO DE FACTURA</label>
                            <input type="text" class="form-control" value="000" name="descripcion">
                        </div>

                        <div class="col-md-2">
                            <div class="mb-3">
                                <label for="fecha_entrega" class="form-label">Fecha de Entrega</label>
                                <input type="date" class="form-control" name="fecha_entrega" id="fecha_entrega">
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="mb-3">
                                <label for="marca" class="form-label">Marca</label>
                                <input type="text" class="form-control" name="marca" id="marca" placeholder="Marca">
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="mb-3">
                                <label for="costo" class="form-label">Costo</label>
                                <input type="text" class="form-control" name="costo" id="costo" placeholder="Costo">
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="mb-3">
                                <label for="precio" class="form-label">Precio</label>
                                <input type="text" class="form-control" name="precio" id="precio" placeholder="Precio">
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="mb-3">
                                <label for="existencia" class="form-label">Existencia</label>
                                <input type="text" class="form-control" name="existencia" id="existencia" placeholder="Existencia">
                            </div>
                        </div>

                        <div class="col-md-2">
                            <div class="mb-3">
                                <label class="form-label">Cantidad</label>
                                <input type="number" class="form-control" name="" value="1" id="bolsa_cantidad">
                            </div>
                        </div>

                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="proveedor_id" class="form-label">Proveedor</label>
                                <select class="form-control" name="proveedores[]" id="proveedor_id" multiple>
                                    @foreach ($proveedores as $proveedor)
                                    <option value="{{ $proveedor->nombre }}">{{ $proveedor->nombre }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="col-md-2 d-flex align-items-end mb-3">
                            <button type="button" id="add_bolsa" class="btn btn-outline-primary w-100" style="border-radius: 25px;">
                                <i class="fa fa-cart-plus" aria-hidden="true"></i> Agregar
                            </button>
                        </div>
                    </div>
                    <div class="row d-none">
                        <div class="col">
                            <div class="row">
                                <div class="col d-none">
                                    Precio
                                    <input type="text" class="form-control" placeholder="Precio Venta" disabled name="" id="bolsa_pventa">
                                </div>
                                <div class="col d-none">
                                    Descuento
                                    <input type="number" class="form-control" placeholder="Descuento" id="bolsa_descuento">
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row p-4 d-none">
                        <div class="col">
                            <label for="" id="abolsa_descripArt"></label>
                        </div>
                    </div>

                    <div class="row justify-content-center">
                        <div class="col table-responsive">
                            <table class="table table-hover table-sm align-middle" id="tabla_bolsa">
                                <thead class="table-light">
                                    <tr>
                                        <th></th>
                                        <th>Articulo</th>
                                        <th class="d-none">Precio Venta</th>
                                        <th class="d-none">Descuento</th>
                                        <th>Cantidad</th>
                                        <th class="d-none">Subtotal</th>
                                        <th>Fecha Entrega</th>
                                        <th>Marca</th>
                                        <th>Costo</th>
                                        <th>Precio</th>
                                        <th>Existencia</th>
                                        <th>Proveedor</th>
                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <div class="row mt-3">
                        <div class="col-md-12 text-end">
                            <label id="bolsa_total" class="h5"> </label>
                        </div>
                        <div class="col-md-12">
                            <label id="bolsa_descuento"> </label>
                        </div>
                    </div>

                    <div class="row mt-3">
                        <div class="col">
                            <button type="submit" class="btn btn-primary btn-lg"><i class="fas fa-save"></i> GUARDAR PEDIDO</button>
                        </div>
                    </div>
                </form>

            </div>
        </div>

        <div class="col-md-3">
            <div class="card">
                <div class="card-header bg-white font-weight-bold">Últimos Pedidos</div>
                <ul class="list-group list-group-flush">
                    @foreach($pedidos as $pedido)
                    <li class="list-group-item">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <small class="text-muted">Fecha:</small><br>
                                {{$pedido->fecha}} <br>
                                <small class="text-muted">{{$pedido->tienda}}</small>
                            </div>
                            <a href="{{ route('pedido.printPedido', [ 'fecha' => $pedido->fecha, 'tienda' => $pedido->tienda ?? 'NO'] ) }}" class="btn btn-sm btn-outline-primary">Ver</a>
                        </div>
                    </li>
                    @endforeach
                </ul>
            </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/datatables/dataTables.buttons.min.js')}}"></script>

<script src="{{asset('plugins/datatables/buttons.colVis.min.js')}}"></script>
<script src="{{asset('plugins/datatables/jquery.mark.min.js')}}"></script>
<script src="{{asset('plugins/datatables/dataTables.searchHighlight.min.js')}}"></script>
<script type="text/javascript" src="{{asset('plugins/datatables/dataTables.colReorder.min.js')}}"></script>
<script type="text/javascript" src="{{asset('plugins/datatables/dataTables.rowReorder.min.js')}}"></script>

<script src="{{asset('plugins/slim-select/slimselect.min.js')}}"></script>

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

<script>
    var bolsa_select = $('#articulo');
    var bolsa_pventa = $('#bolsa_pventa');
    var abolsa_descripArt = $('#abolsa_descripArt');
    var add_bolsa = $('#add_bolsa');

    var total_venta_bolsa = $('#bolsa_total');
    var tabla_bolsa = $('#tabla_bolsa');

    var total_bolsa = 0;
    var tcontador_bolsa = 0;
    var subtotal_bolsa = Array;
    var articulo = {};

    var ruta = " {{ route('articulo.getArticulos') }}";

    $(document).ready(function() {
        $("#table_id").DataTable({
            dom: 'Bfrtip',
            processing: true,
            ajax: ruta,
            language: {
                search: "Buscar Articulo",
                "lengthMenu": "Mostrar _MENU_ registros por página",
                "zeroRecords": "No se encontraron resultados",
                "info": "Mostrando _START_ a _END_ de _TOTAL_ registros",
                "infoEmpty": "Mostrando 0 a 0 de 0 registros",
                "infoFiltered": "(filtrado de _MAX_ registros totales)",
                "paginate": {
                    "first": "Primero",
                    "last": "Último",
                    "next": "Siguiente",
                    "previous": "Anterior"
                }
            },
            columns: [{
                    data: null,
                    orderable: false,
                    searchable: false,
                    render: function(data, type, row) {
                        // Convertimos el objeto row a un string JSON seguro
                        const rowData = btoa(unescape(encodeURIComponent(JSON.stringify(row))));
                        return `<button type="button" class="btn btn-sm btn-success"
                                    onclick="seleccionarArticulo('${rowData}')" style="border-radius: 25px;">
                                    <i class="fa fa-check-circle"></i>
                                </button>`;
                    }
                },
                {
                    data: "nombre",
                    name: "nombre"
                },
                {
                    data: "descripcion",
                    name: "descripcion",
                    render: function(data) {
                        var texto = data;
                        var longitud = 30;
                        var arrayText = texto.match(new RegExp('.{1,' + longitud + '}', 'g'));
                        var resultado = "";
                        if (arrayText) {
                            arrayText.forEach(function(elemento, indice, array) {
                                resultado += elemento + (indice < array.length - 1 ? "<br>" : "");
                            });
                        } else {
                            resultado = texto;
                        }
                        return `<span class="text-wrap ">${resultado}</span>`;
                    }
                },
                {
                    data: "categoria_nombre",
                    name: "categoria_nombre"
                },
                {
                    data: "p_venta",
                    name: "p_venta",
                    render: function(data) {
                        return ("Q " + new Intl.NumberFormat("es-GT", {
                            minimumFractionDigits: 2,
                            maximumFractionDigits: 2
                        }).format(data));
                    },
                },
                {
                    data: "stock",
                    name: "stock"
                },
                {
                    data: "min_stock",
                    name: "min_stock"
                },
                {
                    data: null,
                    name: "detalles",
                    render: function(data) {
                        return `Fabricante: ${data.fabricante || 'N/A'}<br>Medida: ${data.medida || 'N/A'}<br>Unidad: ${data.unidad || 'N/A'}<br>Ubicación: ${data.ubicacion || 'N/A'}`;
                    }
                }
            ],
            drawCallback: function(settings) {
                var api = this.api();
                var search = api.search();
                if (search) {
                    $(api.table().body()).unmark();
                    $(api.table().body()).mark(search, {
                        "caseSensitive": false
                    });
                } else {
                    $(api.table().body()).unmark();
                }
            },
            rowCallback: function(row, data) {
                if (data.stock < data.min_stock) {
                    $(row).css('background-color', 'rgb(71 116 123)').css('color', 'white');
                }
            }
        });
    });


    function seleccionarArticulo(base64Data) {
        // Decodificamos el objeto
        const row = JSON.parse(decodeURIComponent(escape(atob(base64Data))));

        // Asignamos al objeto global 'articulo'
        articulo.id = row.id;
        articulo.nombre = row.nombre;
        articulo.descripcion = row.descripcion;
        articulo.codigo = row.codigo ?? 'N/A';
        articulo.stock = row.stock;
        articulo.p_venta = row.p_venta;
        articulo.fabricante = row.fabricante;

        // UI
        $("#SEARCHARTICULO").modal('hide');
        $('#articulo_select').text(`${articulo.codigo} - ${articulo.nombre}`);
        $('#bolsa_pventa').val(row.p_venta);
        $('#existencia').val(row.stock);
        $('#precio').val(row.p_venta);
        $('#costo').val(row.p_costo);
        $('#marca').val(row.fabricante);
    }

    function mostrarvalores_bolsa2(artiuculo_id, nombre, descripcion, codigo, stock, p_venta, fabricante, p_costo) {
        articulo.id = artiuculo_id;
        articulo.nombre = nombre;
        articulo.descripcion = descripcion;
        articulo.codigo = codigo;
        articulo.stock = stock;
        articulo.p_venta = p_venta;
        articulo.fabricante = fabricante;

        // OJO: En Bootstrap 5 con jQuery esto suele funcionar,
        // pero si falla, usa: bootstrap.Modal.getInstance(document.getElementById('SEARCHARTICULO')).hide();
        $("#SEARCHARTICULO").modal('hide');

        $('#articulo_select').text(codigo + ' - ' + nombre + ' - ' + descripcion);
        bolsa_pventa.val(p_venta);
        abolsa_descripArt.html(codigo + ' - ' + descripcion + ' - ' + nombre);

        document.getElementById('existencia').value = stock;
        document.getElementById('precio').value = p_venta;
        document.getElementById('costo').value = p_costo;
        document.getElementById('marca').value = fabricante;
    }

    add_bolsa.click(function() {
        agregar_bolsa();
    });

    function agregar_bolsa() {
        var bolsa_id_table = articulo.id;
        var bolsa_pventa_table = parseFloat($('#bolsa_pventa').val());
        var existencia_bolsa = parseInt(articulo.stock);
        var cantidad_bolsa = parseInt($('#bolsa_cantidad').val());
        var articulo_name = $('#articulo_name').val();
        var bolsa_texto = $('#articulo option:selected').text();
        var proveedor_selected = $('#proveedor_id').val();

        if (cantidad_bolsa != "") {
            subtotal_bolsa[tcontador_bolsa] = (cantidad_bolsa * bolsa_pventa_table);
            total_bolsa = total_bolsa + subtotal_bolsa[tcontador_bolsa];
            // 1. Concatenamos todo lo que necesitas
            let contenidoCompleto = [
                $('#articulo option:selected').text(), // bolsa_texto
                $('#articulo_name').val(), // articulo_name
                articulo.codigo,
                articulo.nombre,
                articulo.descripcion
            ].filter(Boolean).join(' - '); // Une con guiones y quita nulos/vacíos

            // 2. Escapamos las comillas DOBLES para que no rompan el value=" " del HTML
            let textos = contenidoCompleto.replace(/"/g, '&quot;');

            var fila = '<tr class="selected" id="fila' + tcontador_bolsa + '">' +
                '<td><a class="btn btn-danger btn-sm text-white" onclick="eliminar_fila_bolsa(' + tcontador_bolsa + ')"> <i class="fa fa-trash" aria-hidden="true"></i> </a></td>' +
                '<td style="word-wrap: break-word; white-space: pre-wrap;" class="text-warp"><input type="hidden" name="id_bolsas[]" value="' + textos + '">' + textos + '</td>' +
                '<td class="d-none" ><input type="number" class="form-control"  name="bolsa_pventa_table[]" value="' + bolsa_pventa_table + '" readonly></td> ' +
                '<td class="d-none"><input type="number" class="form-control"  name="" value="' + 0 + '" readonly ></td> ' +
                '<td ><input type="hidden" class="form-control invisible"  name="cantidad_bolsa[]" value="' + cantidad_bolsa + '" readonly> ' + cantidad_bolsa + ' </td> ' +
                '<td class=""><input type="text" class="form-control" name="fecha_entrega[]" value="' + $('#fecha_entrega').val() + '" readonly></td>' +
                '<td class=""><input type="text" class="form-control" name="marca[]" value="' + $('#marca').val() + '" readonly></td>' +
                '<td class=""><input type="text" class="form-control" name="costo[]" value="' + $('#costo').val() + '" readonly></td>' +
                '<td class=""><input type="text" class="form-control" name="precio[]" value="' + $('#precio').val() + '" readonly></td>' +
                '<td class=""><input type="text" class="form-control" name="existencia[]" value="' + $('#existencia').val() + '" readonly></td>' +
                '<td class=""> <input type="text" class="form-control" name="proveedor[]" value="' + proveedor_selected + '" readonly>  </td>' +
                '<td class="d-none" > <input type="hidden" name="" value="' + subtotal_bolsa[tcontador_bolsa] + '">' + subtotal_bolsa[tcontador_bolsa] + '</td>' +
                '</tr>';
            tcontador_bolsa++;
            limpiar();
            tabla_bolsa.append(fila);
        } else {
            alert('UNO O MAS CAMPOS SON REQUERIDOS');
        }
    }

    function eliminar_fila_bolsa(index) {
        total_bolsa = total_bolsa - subtotal_bolsa[index];
        total_venta_bolsa.html('<input type="number" name="totalventa" class="form-control" value="' + total_bolsa + '" readonly >');
        $('#fila' + index).remove();
    }

    function limpiar() {
        $('#bolsa_id').val(0); // Corregido: .select(0) no es jQuery estándar
        $('#bolsa_pventa').val('');
        $('#bolsa_cantidad').val('1');
        $('#bolsa_descuento').val('');
        $('#bolsa_total').val('');
        $('#abolsa_descripArt').val('');
        $('#articulo_select').text('');

        articulo = {};
        articulo.id = '';
        articulo.nombre = '';
        articulo.descripcion = '';
        articulo.codigo = '';
        articulo.stock = '';
        articulo.p_venta = '';
        articulo.fabricante = '';
    }
</script>
@endsection