@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')}}" />
<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>

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

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

                    <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="form-group 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-4">
                            <div class="form-group">
                                <input type="text"
                                    class="form-control" name="articulo_name" id="articulo_name" aria-describedby="helpId" placeholder="Articulo">
                                <!-- <small id="helpId" class="form-text text-muted">Help text</small> -->
                            </div>
                        </div>




                        <div class="form-group 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="form-group">
                                <label for="fecha_entrega">Fecha de Entrega</label>
                                <input type="date" class="form-control" name="fecha_entrega" id="fecha_entrega" placeholder="Fecha de Entrega">
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="form-group">
                                <label for="marca">Marca</label>
                                <input type="text" class="form-control" name="marca" id="marca" placeholder="Marca">
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="form-group">
                                <label for="costo">Costo</label>
                                <input type="text" class="form-control" name="costo" id="costo" placeholder="Costo">
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="form-group">
                                <label for="precio">Precio</label>
                                <input type="text" class="form-control" name="precio" id="precio" placeholder="Precio">
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="form-group">
                                <label for="existencia">Existencia</label>
                                <input type="text" class="form-control" name="existencia" id="existencia" placeholder="Existencia">
                            </div>
                        </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-md-4">
                            <div class="form-group">
                                <label for="">Porveedor</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 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 d-none">
                        <div class="col">
                            <div class="form-group row mx-3">
                                <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>

                    <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="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>

                                    <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">
            <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>
                            <strong>Fecha:</strong> {{$pedido->fecha}} / {{$pedido->tienda}}<br>
                        </div>
                        <a href="{{ route('pedido.printPedido', [ 'fecha' => $pedido->fecha, 'tienda' => $pedido->tienda ?? 'NO'] ) }}" class="btn btn-sm btn-primary">Ver Detalles</a>
                    </div>
                </li>
                @endforeach
            </ul>
        </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,
            // Significa que el servidor es el que se encarga de filtrar, ordenar y paginar los datos,
            // en lugar de que el navegador lo haga. Esto es útil para grandes cantidades de datos,
            // ya que el navegador puede no ser capaz de manejarlas de forma efectiva.
            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}', '${row.p_costo}')"> <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'}
                        `;
                    }
                }


            ],

            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)'); // Cambia el color de fondo a rojo claro
                    $(row).css('color', 'white'); // Cambia el color de la letra a rojo
                }
            }
        });
    });



    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;

        $("#SEARCHARTICULO").modal('hide');
        $('#articulo_select').text(codigo + ' - ' + nombre + ' - ' + descripcion);

        bolsa_pventa.val(p_venta);
        abolsa_descripArt.html(codigo + ' - ' + descripcion + ' - ' + nombre);
        let marca = document.getElementById('marca');
        let costo = document.getElementById('costo');
        let precio = document.getElementById('precio');
        let existencia = document.getElementById('existencia');

        existencia.value = stock;
        precio.value = p_venta;
        costo.value = p_costo;
        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];

            // bolsa_texto += bolsa_texto + ' ' + articulo_name;

            let textos = bolsa_texto + ' ' + articulo_name + ' ' + articulo.codigo + ' - ' + articulo.nombre + ' - ' + articulo.descripcion;




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


            // 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('');
        $('#articulo_select').text('');

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


@endsection