@extends('header_nuevo_generico')
@section('main')
    <div class="container-fluid">        
        <div class="row" style="margin-top:4%;">
            <div class="col-md-12">
                <h2 class="text-fidelitas text-center"><b>Envío de E-mails</b></h2>
            </div>
        </div>       
        <div class="row text-center justify-content-center mt-2">
            <div class="col-3">
                <form name="form_clientes" id="form_clientes" method="post" class="form-signin">
                    {{ csrf_field() }}
                    <select class="form-select form-select-sm" id="cliente" name="cliente">
                        <option value="0">Seleccione Cliente...</option>
                        @if(isset($clientes) && !empty($clientes))
                            @foreach ($clientes as $cli)
                                <option value="{{$cli->cliente}}">{{$cli->nombre_cliente}}</option>
                            @endforeach
                        @endif
                    </select>  
                    <select class="form-select form-select-sm" id="servicio" name="servicio">
                        <option value="0">Seleccione Servicio...</option>
                        <option value="47">LED</option>
                        <option value="73">IMPERIUM</option>
                    </select>           	    		    		    			           	    			    	
                </form> 
            </div>       
        </div>
        <div class="col-12 text-center mt-3">
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="emails_alta_or_custom" id="email_personalizado">
                <label class="form-check-label" for="email_personalizado"> Email personalizado</label>
            </div>
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="emails_alta_or_custom" id="email_alta">
                <label class="form-check-label" for="email_alta">Email de alta</label>
            </div> 
        </div>
        <div class="row">
            <div class="col-md-12 text-center" >
                <img id="loading" src="/images/loading.gif" class="d-none" width="50px">
            </div>
            <div class="col-md-12 form-group" id="tabla_contrapartes"></div>
        </div>                       
    </div>
    <div id="modalContraparte" class="modal fade">
        <div class="modal-dialog" style="width:970px;">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    <h3 class="modal-title"></h3>
                </div>
                <div class="modal-body"></div>
            </div>
        </div>
    </div>
    <div id="modalContraparte_alta" class="modal fade">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title" id="modal-title">Enviar e-mail de alta led</h3>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body" id="modal-body"></div>
            </div>
        </div>
    </div>
@endsection
@section('funcionesJS')
    <script language="javascript" type="text/javascript">
        $(document).ready(function() {
            $(document).on('click', "#todas", function() {
                $.each($('.chk'), function(i, el) {
                    $(this).prop('checked', $('#todas').prop('checked'));
                });
            });
            
            $("#cliente,#servicio").on('change', function(e) {
                e.preventDefault();
                deschequear();
                                console.log($('#form_clientes').serialize()); 

                $('#tabla_contrapartes').html('');
                $.ajax({
                    method: "POST",
                    url: "/led/nuevo/led-emails-contrapartes",
                    data: $('#form_clientes').serialize(),
                    beforeSend: function() {
                        $('#loading').removeClass('hidden').show();
                    },
                    success: function(data) {
                        $('#loading').addClass('hidden');
                        $('#tabla_contrapartes').html(data);
                        var tabla = $('#tablaEmailsContrapartes').DataTable({
                            "pagingType": "full_numbers",
                            "ordering": true,
                            "order": [
                                [1, "asc"]
                            ],
                            "columns": [{
                                "orderable": false
                            }, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null],
                            "info": true,
                            "lengthMenu": [
                                [-1, 10, 25, 50, 100],
                                ["Todos", 10, 25, 50, 100]
                            ],
                            "language": {
                                "lengthMenu": "Mostrar _MENU_ registros por página",
                                "zeroRecords": "No se encontraron  resultados para ésa búsqueda",
                                //"info": "Mostrando página _PAGE_ de _PAGES_",
                                "info": "Mostrando  _START_  de  _END_ - <b>Total:</b> _TOTAL_ registros",
                                "infoEmpty": "No hay registros disponibles",
                                "infoFiltered": "(filtrados de _MAX_ total de registros)",
                                "sSearch": "Buscar",
                                "oPaginate": {
                                    "sFirst": "Primera",
                                    "sPrevious": "Anterior",
                                    "sNext": "Siguiente",
                                    "sLast": "Última"
                                },
                            }
                        });
                        let tituloPlacholder;
                        let contadorTitulo = 0;
                        $('#tablaEmailsContrapartes thead tr.filters th').each(function(index, element) {
                            if (index != 0) {
                                contadorTitulo++;
                                var title = $(this).text();
                                let indices = [7, 8, 9, 10, 11, 12, 13, 14, 15, 5];
                                //includes(2)
                                if (!indices.includes(index)) {
                                    if (index == contadorTitulo) {
                                        tituloPlacholder = $('#tablaEmailsContrapartes thead th')[contadorTitulo].textContent
                                    }
                                    $(this).html('<input type="text" class="form-control" id="inputs_bsuqueda_simple' + tituloPlacholder + '" placeholder="' + tituloPlacholder + '" style="width: 80px;" />');
                                } else if (index == 11) {
                                    $(this).html('<input type="text" class="form-control" id="mayorque" placeholder="<= To" style="width: 80px;" />');
                                } else if (index == 12) {
                                    $(this).html('<input type="text" class="form-control" id="mayorque_columna_once" placeholder="<= To" style="width: 80px;" />');
                                } else if (index == 13) {
                                    $(this).html('<input type="text" class="form-control" id="mayorque_columna_doce" placeholder="<= To" style="width: 80px;" />');
                                } else if (index == 14) {
                                    var index = $(this).closest('th').index(); // Obtiene el índice de la columna
                                    //$(this).html('<button type="button" class="btn btn-primary" id="modal_select" data-titulo="'+tituloPlacholder+'" onclick="modalparaSelector(\'select_simple\','+index+',this)"></button>');
                                    $(this).html(createSelect('select_simple', 'NO', 'SI'))
                                } else if (index == 15) {
                                    $(this).html(createSelect('select_simple_catorce', 'NO', 'SI'));
                                } else if (index == 10) {
                                    $(this).html(createSelect('select_simple_diez', 'NO', 'SI'));
                                } else if (index == 8) {
                                    $(this).html(createSelect('select_simple_ocho', 'NO', 'SI'));
                                } else if (index == 5) {
                                    $(this).html(createSelect('select_activo_inactivo', 'Activo', 'SINO ACTIVO'));
                                }
                            }
                        });
                        //sección de aplicación de búsqueda del filtro por input de texto 
                        busquedasSimplesInpustText('#inputs_bsuqueda_simpleContraparte', tabla)
                        busquedasSimplesInpustText('#inputs_bsuqueda_simpleTAX-ID', tabla)
                        busquedasSimplesInpustText('#inputs_bsuqueda_simplePaís', tabla)
                        busquedasSimplesInpustText('#inputs_bsuqueda_simpleFamilia', tabla)
                        busquedasSimplesInpustText('#inputs_bsuqueda_simpleActivo', tabla)
                        busquedasSimplesInpustText('#inputs_bsuqueda_simpleContacto', tabla)
                        buscadorMayorque('#mayorque', tabla);
                        buscadorMayorque('#mayorque_columna_once', tabla);
                        buscadorMayorque('#mayorque_columna_doce', tabla);
                        // Escucha el evento de cambio en el select
                        $('#select_simple_ocho').on('change', function() {
                            var index = $(this).closest('th').index(); // Obtiene el índice de la columna
                            var filtro = this.value; // Obtiene el valor seleccionado del select
                            // Eliminar espacios en blanco al inicio de los datos en la columna seleccionada
                            // Realizar la búsqueda en el DataTable
                            if (filtro === 'todos') {
                                // Limpiar el filtro de búsqueda para esa columna
                                var tabla = $('#tablaEmailsContrapartes').DataTable();
                                tabla.column(index).search('').draw();
                            } else {
                                // Realizar la búsqueda en el DataTable con el filtro seleccionado
                                var tabla = $('#tablaEmailsContrapartes').DataTable();
                                tabla.column(index).search(filtro, true, false).draw();
                            }
                        });
                        //sección de aplicación de búsqueda del filtro por select 
                        buscadorSelect("#select_simple");
                        buscadorSelect("#select_simple_diez");
                        buscadorSelect('#select_simple_catorce');
                        buscadorSelect("#select_activo_inactivo");
                    },
                    error: function(err) {
                        mensaje('Error en la Busqueda');
                    }
                });
            });

            $(document).on('click', "#btnEmail", function() {
                var cant = 0;
                var texto = $('#texto').val();
                var asunto = $('#asunto').val();
                $('#modalContraparte').modal('show')
                $('#asunto').val(asunto.trim());
                $('#texto').val(texto.trim());
                $.each($('.chk'), function(i, el) {
                    if ($(this).prop('checked')) {
                        cant++;
                    }
                });
                if ($('#asunto').val() == '') {
                    $('.modal-body').html('<div class="h4 text-center">Falta el Asunto del e-mail</div>');
                } else {
                    if ($('#texto').val() == '') {
                        $('.modal-body').html('<div class="h4 text-center">Falta el texto del e-mail</div>');
                    } else {
                        if (cant > 0) {
                            $('.modal-body').html('<div class="h4 text-center">' + cant.toString() + '  contrapartes seleccionadas</div><br/><div class="text-center"><button type="button" class="btn btn-primary btn-fidelitas btnEnviar">Enviar e-mail</button> <button type="button" class="btn btn-primary btn-fidelitas btnCancelar" data-bs-dismiss="modal">Cancelar</button></div><div class="row"><div class="col-md-12 text-center d-none" id="waitimg"><img src="/images/loading.gif" border="0" class="img" width="40px" style="padding-top:20px"></div></div>');
                        } else {
                            $('.modal-body').html('<div class="h4 text-center">No se han seleccionado contrapartes</div>');
                        }
                    }
                }
            });

            $(document).on('click', '.btnEnviar', function() {
                
                $.ajax({
                    method: 'post',
                    url: '/led/led-emails-enviar',
                    data: $('#frmEmailContrapartes').serialize(),
                    beforeSend: function() {
                        $('.btnCancelar').prop('disabled', true);
                        $('.btnEnviar').prop('disabled', true);
                        $('#waitimg').removeClass('hidden');
                    },
                    success: function(data) {
                        $('.modal-body').html(data);
                        $('#asunto').val('Fidelitas Legajo Electrónico Dinámico - ');
                        $('#texto').val('');
                        $.each($('.chk'), function(i, el) {
                            $(this).prop('checked', false);
                        });
                    }

                });

            });

            function crearDataTableTodos(tabla) {
                $(tabla).DataTable({
                    "pagingType": "full_numbers",
                    "ordering": true,
                    "order": [
                        [1, "asc"]
                    ],
                    "columns": [{
                        "orderable": false
                    }, null, null, null, null, null, null, null, null],
                    "info": true,
                    "lengthMenu": [
                        [-1, 10, 25, 50, 100],
                        ["Todos", 10, 25, 50, 100]
                    ],
                    "language": {
                        "lengthMenu": "Mostrar _MENU_ registros por página",
                        "zeroRecords": "No se encontraron  resultados para ésa búsqueda",
                        //"info": "Mostrando página _PAGE_ de _PAGES_",
                        "info": "Mostrando  _START_  de  _END_ - <b>Total:</b> _TOTAL_ registros",
                        "infoEmpty": "No hay registros disponibles",
                        "infoFiltered": "(filtrados de _MAX_ total de registros)",
                        "sSearch": "Buscar",
                        "oPaginate": {
                            "sFirst": "Primera",
                            "sPrevious": "Anterior",
                            "sNext": "Siguiente",
                            "sLast": "Última"
                        },
                    }
                });
            }
            //sección para elegir tipo de mensajes de emails
            $('input[name="emails_alta_or_custom"]').on("change", function(e) {
                e.preventDefault();
                if (e.target.getAttribute("id") == "email_alta") {
                    $('#formulario_email_personalizado_custom').addClass('d-none');
                    $('#btnEmailAlta_standard').removeClass('d-none');
                    $('#btnEmail').addClass('d-none');
                } else {
                    $('#formulario_email_personalizado_custom').removeClass('d-none');
                    $('#btnEmail').removeClass('d-none');
                    $('#btnEmailAlta_standard').addClass('d-none');
                }
            });

        });

        function buscadorMayorque(elemento, tabla) {
            $(elemento).on('input', function() {
                var index = $(this).closest('th').index();
                var inputValue = parseFloat($(this).val().trim()); // Convertir el valor del input a un número
                // Eliminar las funciones de búsqueda anteriores
                $.fn.dataTable.ext.search = [];
                // Realizar la búsqueda en función del valor ingresado
                $.fn.dataTable.ext.search.push(
                    function(settings, data, dataIndex) {
                        var valorFila = data[index]; // Obtener el valor de la fila
                        if (isNaN(inputValue)) {
                            return true;
                        } else if (isNaN(parseFloat(valorFila)) || valorFila === '') {
                            // Si el valor de la fila o el valor del input no es un número válido, o si el valor de la fila está vacío, excluir la fila
                            return false;
                        }
                        return inputValue >= parseFloat(valorFila); // Devolver verdadero si el valor de la fila es menor o igual al valor del input
                    }
                );
                tabla.draw(); // Se asume que tabla es tu instancia de DataTables
            });
        }

        function buscadorSelect(elemento) {
            $(elemento).on('change', function() {
                var index = $(this).closest('th').index(); // Obtiene el índice de la columna
                var filtro = this.value; // Obtiene el valor seleccionado del select
                // Eliminar espacios en blanco al inicio de los datos en la columna seleccionada
                // Realizar la búsqueda en el DataTable
                if (filtro === 'todos') {
                    // Limpiar el filtro de búsqueda para esa columna
                    var tabla = $('#tablaEmailsContrapartes').DataTable();
                    tabla.column(index).search('').draw();
                } else {
                    // Realizar la búsqueda en el DataTable con el filtro seleccionado
                    var tabla = $('#tablaEmailsContrapartes').DataTable();
                    tabla.column(index).search('^' + filtro, true, false).draw();
                }
            });
        }

        function deschequear() {
            $('#formulario_email_personalizado_custom').removeClass("d-none")
            $('#email_personalizado').prop('checked', true)
            $('#email_alta').prop('checked', false)
            $('#btnEmailAlta_standard').addClass('d-none')
        }

        function busquedasSimplesInpustText(elemento, tabla) {
            $(elemento).on('keyup change', function() {        
                var index = $(this).closest('th').index();
                tabla.column(index).search('^' + this.value, true, false).draw();
            });
        }

        function createSelect(identificador, opcionUno, opcionDos) {
            return `<select class="form-select" aria-label="Default" id="${identificador}">
                            <option selected value="todos">Todos</option>
                            <option value="${opcionUno}">${opcionUno}</option>
                            <option value="${opcionDos}">${opcionDos}</option>
                        </select>`;
        }
    </script>
@endsection