@include('header')
@include('navigator_clientes')

<div class="container">

    <!--Modal Asociar Producto-->
    <div class="modal fade" id="modalClienteDet" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
        aria-hidden="true" data-backdrop="static">
        <div class="modal-dialog" style="width:70%">
            <div class="modal-content">
                <!--Modal Header-->
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title">
                        Asociar Producto a Cliente
                    </h4>
                </div>
                @include('modals/modal_asociar_producto')
            </div>
        </div>
    </div>

    <!--Buscador de Cliente-->
    <div class="col-md-12">
        <form class="custom-form" action="/apialta" method="post" class="form-signin">
            <input type="hidden" name="_token" id="token_api" value="{{ csrf_token() }}">
            <label class="form-label" for="cliente-nombre">Ingrese Nombre del Cliente:</label>
            <input id="cliente-nombre" name="cliente-nombre" type="text" class="form-control">
            <button id="btn-reset" class="btn btn-primary" type="reset">Reestablecer</button>
        </form>
    </div>

    <!--Card Principal-->
    <div id="seccion-vista" class="card col-md-12 hidden">
        <div class="card-body">
            <!--Titulo-->
            <div class="card-title">
                <h3>Datos del Cliente</h3>
            </div>
            <!--Datos del Cliente-->
            <div class="card-text">
                <div class="col-md-12">
                    <label class="form-label col-md-2">Cliente:</label>
                    <h4 class="col-md-8" id="datos_nombre"></h4>
                </div>
                <div class="col-md-12">
                    <label class="form-label col-md-2">Nro. CUIT:</label>
                    <h4 class="col-md-3" id="datos_cuit"></h4>
                </div>
                <div class="col-md-12">
                    <label class="form-label col-md-2">Nacionalidad:</label>
                    <h4 class="col-md-3" id="datos_pais"></h4>
                </div>
                <div class="col-md-12">
                    <label class="form-label col-md-2">Estado del Cliente:</label>
                    <h4 class="col-md-3" id="datos_estado"></h4>
                </div>
            </div>
            <!--Selectores de Control-->
            <div class="card-text">
                <select class="form-control" id="vistas-selector">
                    <option id="nada" value="Nada" selected>Seleccione una vista...</option>
                    <option id="opc1" value="Productos Habilitados para el Cliente">Productos Habilitados para el
                        Cliente</option>
                    <option id="opc2" value="Productos Disponibles">Productos Disponibles</option>
                    <option id="opc3" value="Usuarios Activos del Cliente">Usuarios Activos del Cliente</option>
                </select>
            </div>
        </div>
    </div>

    <!--Contenedor de las tablas de FancyGrid-->
    <div id="fancy-tabla"></div>
</div>

<script>
    $(document).ready(function () {

        //  Variables auxiliares
        var lista_prods = [];
        var usuarios;

        //  Ingreso de datos al buscador
        $('#cliente-nombre').on('input', function () {
            resp = {};

            //  Envío de datos mediante AJAX/JQuery-/ Se envia el contenido del input del buscador. Sólo se envía el nombre del cliente.
            $.post('/apialta', { _token: $('#token_api').val(), codigo_cliente: '', cuit_cliete: '', nombre_cliente: $(this).val() }, function (data) {

                //  Función para autocompletar el buscador con las respuestas de la llamada al controlador
                $('#cliente-nombre').autocomplete({

                    //  Datalist que proviene del autocomplete del buscador
                    source: function (request, response) {

                        //  Se encontraron resultados.
                        if (data != 'Sin coincidencias') {

                            //  Creacion de la datalist
                            resp = $.map(data, function (v, i) {
                                return {
                                    //  Estructura de las opciones de la datalist.
                                    label: "Cod. " + v.cli_codigo + ' -  ' + v.cli_nombre + " - CUIT: " + v.cli_cuit,
                                    value: v.cli_nombre,
                                    cli_nombre: v.cli_nombre,
                                    cli_cuit: v.cli_cuit,
                                    cli_codigo: v.cli_codigo,
                                    cliente: v.cliente
                                };
                            });
                        }

                        //  No se encuentran resultados con el nombre del cliente ingresado.
                        else {
                            console.log('Sin resultado');
                            resp = {
                                label: 'No se encontraron resultados para la búsqueda solicitada'
                            };
                        }

                        //  Respuesta de la llamada al controlador
                        response(resp);
                    },

                    //  Cuando el valor del buscador tiene tamaño tres, se ejecuta el AJAX.
                    minLength: 3,

                    //  Evento de seleccion de una opcion del datalist.
                    //  event => Variable de evento select.
                    //  ui => Option de la datalist.
                    select: function (event, ui) {

                        //  Error con el option de la datalist.
                        if (!ui.item.cliente) {
                            return false;
                        }

                        //  Envío de datos mediante AJAX/JQuery-/ Se envia el valor del numero de cliente para obtener los datos del cliente.
                        $.post("/datos-cliente-apialta", { _token: $('#token_api').val(), cliente: ui.item.cliente }, function (data) {
                            //  Se vuelcan datos generales del cliente en el Card Principal.
                            presentacion(data);
                        });

                        //  Envío de datos mediante AJAX/JQuery-/ Se envia el valor del numero de cliente para obtener los usuarios del cliente.
                        $.post("/usuarios-cliente-apialta", { _token: $('#token_api').val(), cliente: ui.item.cliente }, function (data) {
                            //  Guarda todos los usuarios en una variable.
                            usuarios = data;
                        });

                        //  Envío de datos mediante AJAX/JQuery-/ Se envia el valor del numero de cliente para obtener los productos del cliente.
                        $.post("/productos-cliente-apialta", { _token: $('#token_api').val(), cliente: ui.item.cliente }, function (data) {
                            //  Guarda todos los productos en una variable.
                            for (let index = 0; index < data.length; index++) {
                                const element = data[index];
                                lista_prods.push(element.nombre_producto);
                            }

                            //  Selector de Control - Opciones.
                            $('#vistas-selector').on("input", function () {
                                $("#fancy-tabla").empty();
                                var opc = $(this).val();

                                //  Click en Productos Habilitados para el Cliente.
                                if (opc == $("#opc1").val()) {
                                    //  Creacion de la FancyGrid de productos del cliente.
                                    fancyClientes(data, lista_prods);
                                }
                                //  Click en Productos Disponibles.
                                else if (opc == $("#opc2").val()) {
                                    alert('No hacer nada por ahora');
                                }
                                //  Click en Usuarios Activos del Cliente.
                                else if (opc == $("#opc3").val()) {
                                    //  Creación de la FancyGrid de los usuarios del cliente.
                                    fancyUsuarios(usuarios, lista_prods);
                                }
                                //  Click en Seleccione una vista...
                                else if (opc == $("#nada").val()) {
                                    $("#fancy-tabla").empty();
                                }
                            });
                        });

                        //  FALTA LA LLAMADA AL STORE DE LOS PRODUCTOS DE LA API DISPONIBLES PARA CREAR LA FANCYGRID CORRESPONDIENTE.

                        //  Displays
                        $('#cliente-nombre').attr("disabled", true);
                        if ($('#seccion-vista').hasClass('hidden')) {
                            $('#seccion-vista').removeClass('hidden');
                        }
                    }
                });
            });
        });

        //  Evento click en Reestablecer.
        $('#btn-reset').click(function () {
            window.location.href = "/apialta";
            if (!$('#seccion-vista').hasClass('hidden')) {
                $('#seccion-vista').toggleClass('hidden');
            }
        });

        //  Guardar en la tabla el nuevo producto asociado al cliente.
        //grabar_producto();
        grabar();

    });
</script>

@include('footer')