@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;
        }
    </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') }}" />
@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">SALIDA DE ARTICULOS</h4>

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

                        <button type="button" class="btn btn-primary mb-3" data-bs-toggle="modal"
                            data-bs-target="#SEARCHARTICULO">
                            <i class="fas fa-search"></i> 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">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-times"></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-2">
                                <label class="form-label">Precio</label>
                                <input type="text" class="form-control" placeholder="Precio Venta" name=""
                                    id="bolsa_pventa">
                            </div>

                            <div class="col-md-2">
                                <div class="mb-3">
                                    <label for="tienda" class="form-label">TIENDA</label>
                                    <select class="form-control" name="tienda" id="tienda">
                                        <option value="{{ config('app.connection_name2') }}">
                                            {{ config('app.connection_name2') }}</option>
                                        <option value="{{ config('app.connection_name3') }}">
                                            {{ config('app.connection_name3') }}</option>
                                        <option value="{{ config('app.connection_name4') }}">
                                            {{ config('app.connection_name4') }}</option>
                                    </select>
                                </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 d-none">
                                <label class="form-label">Descuento</label>
                                <input type="number" class="form-control" placeholder="Descuento" id="bolsa_descuento">
                            </div>

                            <div class="col-md-12 mb-3">
                                <label for="" class="form-label">Observaciones Generales</label>
                                <textarea class="form-control" name="observaciones" rows="3"></textarea>
                            </div>

                            <div class="col-md-12 text-end mb-3">
                                <button type="button" id="add_bolsa" class="btn btn-outline-primary btn-lg"
                                    style="border-radius: 25px;">
                                    <i class="fa fa-cart-plus"></i> Agregar a la Lista
                                </button>
                            </div>
                        </div>
                        <div class="row p-4 d-none">
                            <div class="col">
                                <label 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>Precio Venta</th>
                                            <th class="d-none">Descuento</th>
                                            <th>Cantidad</th>
                                            <th>Subtotal</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                            </div>
                        </div>

                        <div class="row mt-3 text-end">
                            <div class="col-12">
                                <h4 id="bolsa_total"> </h4>
                            </div>
                            <div class="col-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>
                                    REGISTRAR SALIDA</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            <div class="col-md-3">
                <div class="card">
                    <div class="card-header font-weight-bold">Últimas Salidas</div>
                    <div class="list-group list-group-flush">
                        @foreach ($ultimasSalidas as $ultima)
                            <a href="{{ route('salidaarticulo.printSalida', ['fecha' => $ultima->fecha, 'tienda' => $ultima->tienda]) }}"
                                class="list-group-item list-group-item-action">
                                <div class="d-flex w-100 justify-content-between">
                                    <small class="text-muted">{{ $ultima->fecha }}</small>
                                </div>
                                <p class="mb-1">Tienda: {{ $ultima->tienda }}</p>
                            </a>
                        @endforeach
                    </div>
                </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>
        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,
                serverSide: 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) {
                            // Codificamos el objeto 'row' completo para que sea seguro
                            const rowData = btoa(unescape(encodeURIComponent(JSON.stringify(row))));
                            return ` <button type="button" class="btn btn-sm btn-success editar"
                                    style="border-radius: 25px;"
                                    onclick="seleccionarArticuloSalida('${rowData}')">
                                    <i class="fa fa-check-circle" aria-hidden="true"></i>
                                </button>`;
                        },
                    },
                    {
                        data: "nombre",
                        name: "nombre"
                    },
                    {
                        data: "descripcion",
                        name: "descripcion",

                    },
                    {
                        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'}`;
                        }
                    }
                ],
                rowCallback: function(row, data) {
                    if (data.stock < data.min_stock) {
                        $(row).css('background-color', 'rgb(71 116 123)');
                        $(row).css('color', 'white');
                    }
                },
                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();
                    }
                },
            });
        });

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

            // --- CAMBIO IMPORTANTE PARA CERRAR EL MODAL EN BS5 ---
            // Opción 1 (Si usas jQuery bundle de BS5):
            // $("#SEARCHARTICULO").modal('hide');

            // Opción 2 (Más segura, Vanilla JS):
            var myModalEl = document.getElementById('SEARCHARTICULO');
            var modal = bootstrap.Modal.getInstance(myModalEl);
            if (modal) {
                modal.hide();
            } else {
                // Fallback por si la instancia no existe aun
                $("#SEARCHARTICULO").modal('hide');
            }
            // -----------------------------------------------------

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

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

        function seleccionarArticuloSalida(base64Data) {
            // Decodificamos el objeto de forma segura
            const row = JSON.parse(decodeURIComponent(escape(atob(base64Data))));

            // Llenamos nuestro 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;

            // UI: Cerramos el modal (Forma compatible con Bootstrap 5)
            var myModalEl = document.getElementById('SEARCHARTICULO');
            var modal = bootstrap.Modal.getInstance(myModalEl);
            if (modal) modal.hide();
            else $("#SEARCHARTICULO").modal('hide');

            // Llenamos los campos de la vista
            bolsa_pventa.val(row.p_venta);
            var textoVisual = articulo.codigo + ' - ' + articulo.nombre + ' - ' + articulo.descripcion;
            $('#articulo_select').text(textoVisual);
            abolsa_descripArt.html(textoVisual);
        }

        function agregar_bolsa() {
            var bolsa_id_table = articulo.id;
            var bolsa_pventa_table = parseFloat($('#bolsa_pventa').val());
            var cantidad_bolsa = parseInt($('#bolsa_cantidad').val());

            // Escapamos las comillas para el HTML
            var nombreLimpio = (articulo.codigo + ' - ' + articulo.nombre + ' - ' + articulo.descripcion).replace(/"/g,
                '&quot;');

            if (bolsa_id_table && !isNaN(bolsa_pventa_table) && !isNaN(cantidad_bolsa)) {
                subtotal_bolsa[tcontador_bolsa] = (cantidad_bolsa * bolsa_pventa_table);
                total_bolsa = total_bolsa + subtotal_bolsa[tcontador_bolsa];

                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"></i> </a></td>' +
                    '<td class="text-wrap">' +
                    // Guardamos el ID del artículo
                    '<input type="hidden" name="id_bolsas[]" value="' + bolsa_id_table + '">' +
                    nombreLimpio +
                    '</td>' +
                    '<td><input type="number" class="form-control" name="bolsa_pventa_table[]" value="' +
                    bolsa_pventa_table + '" readonly></td> ' +
                    '<td><input type="hidden" name="cantidad_bolsa[]" value="' + cantidad_bolsa + '">' + cantidad_bolsa +
                    '</td> ' +
                    '<td>Q. ' + subtotal_bolsa[tcontador_bolsa].toFixed(2) + '</td>' +
                    '</tr>';

                tcontador_bolsa++;
                tabla_bolsa.append(fila);
                total_venta_bolsa.html('Total: Q. ' + total_bolsa.toFixed(2));
                limpiar();
            } else {
                alert('Por favor, seleccione un artículo y complete los campos.');
            }
        }

        function eliminar_fila_bolsa(index) {
            total_bolsa = total_bolsa - subtotal_bolsa[index];
            total_venta_bolsa.html('Total: Q. ' + total_bolsa.toFixed(2));
            $('#fila' + index).remove();
        }

        function limpiar() {
            // Corrección de sintaxis jQuery para limpiar inputs
            $('#bolsa_pventa').val('');
            $('#bolsa_cantidad').val('1');
            $('#bolsa_descuento').val('');
            $('#abolsa_descripArt').val('');
            $('#articulo_select').text('');

            // Reiniciar objeto articulo
            articulo = {};
        }
    </script>
@endsection