@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>

                <!-- include('admin.articulos.components.compraPeove') -->

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

                    <!-- Button trigger modal -->
                    <button type="button" class="btn btn-primary " data-toggle="modal" data-target="#SEARCHARTICULO">
                        BUSCAR ARTICULO
                    </button>

                    <!-- Modal -->
                    <div class="modal fade" id="SEARCHARTICULO" tabindex="-1" role="dialog" aria-labelledby="modelTitleId" aria-hidden="true">
                        <div class="modal-dialog modal-lg" style="max-width: 70vw;" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title">BUSCAR ARTICULOS</h5>
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </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-dismiss="modal"><i class="fas fa-closed-captioning"></i></button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row">




                        <div class="col-md-2">
                            Articulo
                            <label type="text" class="form-control " placeholder="Articulo Seleccionado" name="" id="articulo_select">
                            </label>
                        </div>

                        <div class="col-md-2">
                            Precio
                            <input type="text" class="form-control " placeholder="Precio Venta" name="" id="bolsa_pventa">

                        </div>

                        <div class="form-group col-md-2">
                            <label for="tienda">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 class="col-md-2">
                            <div class="col">
                                Cantidad
                                <input type="number" class="form-control" name="" value="1" id="bolsa_cantidad">
                            </div>
                        </div>

                        <div class="col d-none">
                            Descuento
                            <input type="number" class="form-control " placeholder="Descuento" id="bolsa_descuento">
                        </div>


                        <div class="form-group">
                            <label for="">Observaciones Generales</label>
                            <textarea class="form-control" name="observaciones" id="" rows="3"></textarea>

                        </div>
                        <div class="col-md-1 mt-4">
                            <button type="button" id="add_bolsa" class="btn btn-outline-primary" style="border-radius: 25px;"> <i class="fa fa-cart-plus" aria-hidden="true"></i></button>
                        </div>
                    </div>
                    <!-- end articulos -->


                    <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">
                            <!-- Widget: user widget style 1 -->

                            <table class="table table-hover table-sm" id="tabla_bolsa">
                                <thead class="">
                                    <tr>
                                        <th></th>
                                        <th>Articulo</th>
                                        <th class="">Precio Venta</th>
                                        <th class="d-none">Descuento</th>
                                        <th>Cantidad</th>
                                        <th class="">Subtotal</th>
                                        <!-- <th class="d-none">Total</th> -->
                                    </tr>
                                </thead>
                                <tbody>

                                    <tr>


                                    </tr>

                                </tbody>
                            </table>

                            <!-- /.widget-user -->
                        </div>

                    </div>

                    <div class="row">
                        <label id="bolsa_total"> </label>
                        <br>
                        <label id="bolsa_descuento"> </label>
                    </div>

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


        <div class="col-md-3">
            <div class="row">
                @foreach ($ultimasSalidas as $ultima)
                <!-- {{$ultima}} -->
                <a class="col-md-12" href="{{route('salidaarticulo.printSalida', ['fecha' => $ultima->fecha, 'tienda' => $ultima->tienda])}}">
                    <div class="card">
                        <div class="card-body">
                            <p class="card-text"> <br> {{$ultima->fecha}} <br> Tienda: {{$ultima->tienda}}</p>
                        </div>
                    </div>
                </a>
                @endforeach
            </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",
                // Puedes añadir más traducciones aquí si lo deseas
                "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) {

                        var texto = row.descripcion.replace(/(\r\n|\n|\r)/gm, "");
                        return ` <a class="btn btn-sm btn-success editar" style="border-radius: 25px;" onclick="mostrarvalores_bolsa2(${row.id}, '${row.nombre}', '${texto}', '${row.codigo ?? 'N/A'}', ${row.stock}, ${row.p_venta}, '${row.fabricante}')"> <i class="fa fa-check-circle" aria-hidden="true"></i> </a>`;


                    },
                },
                {
                    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 = "";
                        arrayText.forEach(function(elemento, indice, array) {
                            resultado += elemento + (indice < array.length - 1 ? "<br>" : "");
                        });
                        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'}
                        `;
                    }
                }
            ],
            rowCallback: function(row, data) {
                if (data.stock < data.min_stock) {
                    $(row).css('background-color', 'rgb(71 116 123)'); // Cambia el color de fondo a rojo claro
                    $(row).css('color', 'white'); // Cambia el color de la letra a rojo
                }
            },

            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;
        $("#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 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 bolsa_texto = articulo.codigo + ' - ' + articulo.nombre + ' - ' + articulo.descripcion;
        var descuento_bolsa = 0;
        var new_descuento_bolsa = 0;

        if (bolsa_id_table != "" && bolsa_pventa_table != "" && cantidad_bolsa != "") {
            subtotal_bolsa[tcontador_bolsa] = (cantidad_bolsa * bolsa_pventa_table) - new_descuento_bolsa;
            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" 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="' + bolsa_id_table + '">' + bolsa_texto.replace(/(.{50})/g, "$1\n") + '</td>' +

                '<td class="" ><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="' + new_descuento_bolsa + '" readonly ></td> ' +

                '<td ><input type="hidden" class="form-control invisible"  name="cantidad_bolsa[]" value="' + cantidad_bolsa + '" readonly> ' + cantidad_bolsa + ' </td> ' +

                '<td class="" > <input type="hidden" name="" value="' + subtotal_bolsa[tcontador_bolsa] + '">' + subtotal_bolsa[tcontador_bolsa] + '</td>' +

                '</tr>';
            tcontador_bolsa++;
            limpiar();


            total_venta_bolsa.html('<label>Total a Cancelar</label><input type="number" id="totvent_bolsa" name="totalventa_bolsa" class="form-control" value="' + total_bolsa + '" readonly >');

            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() {

        let bolsa = $('#bolsa_id').select(0);
        let pventa = $('#bolsa_pventa').val('');
        let cantidad = $('#bolsa_cantidad').val('1');
        var descuento = $('#bolsa_descuento').val('');
        var tventa = $('#bolsa_total').val('');
        let abolsa_descripArt = $('#abolsa_descripArt').val('');
        bolsa.focus();
    }
</script>


@endsection