@extends('header_nuevo_generico')
@section('main')
<div class="container mt-5 pt-5">
    <h3 class="text-center my-4">Creación Masiva de Informes</h3>
    <form id="frmAltaMasiva">
        {{ csrf_field() }}
        <div class="row">
            <div class="col-2">
                <label for="" class="form-label">Cliente</label>
                <select name="cliente" id="cliente" class="form-select">
                    <option value="0">Seleccione Cliente...</option>
                    @foreach ($clientes as $cli)
                    <option value="{{$cli->cliente}}">{{$cli->nombre_cliente}} (Cod. {{$cli->cli_codigo}})</option>
                    @endforeach
                </select>
            </div>
            <div class="col-2">
                <label for="" class="form-label">Familia</label>
                <select name="familia" id="familia" class="form-select">
                    <option value="0">Seleccione Familia</option>
                </select>
            </div>

            <div class="col-2">
                <label for="" class="form-label">Tipo de Informes</label>
                <select name="tipo_informe" id="tipo_informe" class="form-select">
                    <option value="0">Seleccione Informe</option>
                </select>
            </div>
            <div class="col-2">
                <label for="" class="form-label">Fecha de Gestión</label>
                <input name="fecha_gestion" type="date" class="form-control">
            </div>
            <div class="col-2 position-relative">
                <button type="button" class="btn btn-sm btn-secondary position-absolute bottom-0 end-0" id="gestiones">Consultar Gestiones</button>
            </div>
            <div class="col-2 position-relative">
                <button type="button" class="btn btn-sm btn-fidelitas position-absolute bottom-0" id="alta_masiva">Alta Masiva</button>
            </div>
        </div>
        <div id="gestiones_clientes" class="d-none pt-5">
            <table id="tabla_gestiones" class="d-none table">
                <thead>
                    <th>Nombre</th>
                    <th>ID Gestion</th>
                    <th>CUIL</th>
                    <th>País</th>
                    <th>Fecha</th>
                    <th>Familia</th>
                    <th>Teléfono</th>
                    <th>Email</th>
                </thead>
                <tbody id="data_gestiones"></tbody>
            </table>
            <div id="gestiones_cargando" class="d-none text-center text-fidelitas pt-5"><div class="spinner-border" role="status"></div></div>
            <div id="sin_gestiones" class="d-none text-muted text-center pt-5">No registran búsquedas con los parámetros seleccionados</div>
        </div>
        <div id="error_alta" class="d-none text-danger text-center pt-5">No estan todos los parámetros seleccionados para realizar el Alta Masiva</div>
    </form>
</div>
<!--  -->
<div id="modalConfirmarAltaMasiva" class="modal fade" data-bs-backdrop="static">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title" id="modal_title">Confirme Alta Masiva</h3>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-hidden="true"></button>
            </div>
            <div class="modal-body" id="modal_body">
                <div class="row">
                    <p>Esta a punto de generar <b><span id="cantidad_informes"></span> informes de manera masiva</b>, si está seguro que los datos están de manera correcta por favor confirme la acción y espere a que finalice. </p>
                    <p>Una vez creados no se puede deshacer la acción.</p>
                    <div id="alta_masiva_cargando" class="d-none text-center text-fidelitas pt-5"><div class="spinner-border" role="status"></div></div>

                    <div id="alta_masiva_exito" class="d-none text-success text-center pt-5">El Alta Masiva de los informes se realizó de manera correcta. Recargando página...</div>
                </div>

                <div class="row justify-content-center">
                    <div class="col-2 position-relative">
                        <button type="button" class="btn btn-sm btn-fidelitas" id="conf_alta_masiva">Confirmar Alta Masiva</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection
@section('funcionesJS')
<script language="javascript" type="text/javascript">
    $(document).ready(function() {
        $('#familia').empty();
        $('#tipo_informe').empty();
        $('#data_gestiones').empty();
        $(document).on('change',"#cliente",function(e){
            e.preventDefault();
            $.ajax({
                method: "POST",
                url: "/data-familias-cliente", 
                data: $('#frmAltaMasiva').serialize(), 
                beforeSend: function(){
                    $('#familia').empty();
                    $('#data_gestiones').empty();
                },
                success: function(familias){
                    $('#familia').append('<option value="0">Seleccione Familia...</option>');
                    for ( fam of familias) {
                        $('#familia').append('<option value="'+fam.familia+'">'+fam.nombre_familia+'</option>');

                    }
                },
                error: function(err){ 
                    mensaje('Error en la Busqueda');  
                }
            });
        });
        $(document).on('change',"#familia",function(e){
            e.preventDefault();
            $.ajax({
                method: "POST",
                url: "/data-informes-familia", 
                data: $('#frmAltaMasiva').serialize(), 
                beforeSend: function(){
                    $('#tipo_informe').empty();
                    $('#data_gestiones').empty();
                },
                success: function(informes){
                    $('#tipo_informe').append('<option value="0">Seleccione Informe...</option>');
                    for ( inf of informes) {
                        $('#tipo_informe').append('<option value="'+inf.idTipoInforme+'">'+inf.nombre_tipo_informe+'</option>');
                    }
                },
                error: function(err){ 
                    mensaje('Error en la Busqueda');  
                }
            });
        });

        $(document).on('click',"#gestiones",function(e){
            e.preventDefault();
            $('#gestiones_clientes').removeClass('d-none');
            $('#gestiones_cargando').removeClass('d-none');
            $.ajax({
                method: "POST",
                url: "/data-gestiones-cliente", 
                data: $('#frmAltaMasiva').serialize(), 
                beforeSend: function(){
                    $('#data_gestiones').empty();
                    $('#sin_gestiones').addClass('d-none');
                    $('#tabla_gestiones').addClass('d-none');
                },
                success: function(gestiones){
                    $('#gestiones_cargando').addClass('d-none');
                    if (gestiones.length > 0) {
                        $('#sin_gestiones').addClass('d-none');
                        $('#tabla_gestiones').removeClass('d-none');
                        for ( i = 0; i < gestiones.length; i++) {
                            let contraparte = '<input name="contrap_'+gestiones[i].gestion+'" type="hidden" value="'+gestiones[i].contraparte+'">';
                            let id_padron = '<input name="id_padron_'+gestiones[i].gestion+'" type="hidden" value="'+gestiones[i].id_padron+'">';
                            let team = '<input name="team_'+gestiones[i].gestion+'" type="hidden" value="'+gestiones[i].id_team_default+'">';
                            let observaciones = '<input name="observaciones_'+gestiones[i].gestion+'" type="hidden" value="'+gestiones[i].id_team_default+'">';
                            let nombre_persona = '<td>'+gestiones[i].nombre_persona+'</td>';
                            let cuil = '<td>'+gestiones[i].identificacion+'</td>';
                            let pais = '<td>'+gestiones[i].country_code+'</td>';
                            let gestion = '<input name="gestiones[]" type="hidden" value="'+gestiones[i].gestion+'">';
                            gestion += '<td>'+gestiones[i].gestion+'</td>';
                            let gestion_fecha = '<input name="desde_'+gestiones[i].gestion+'" type="hidden" value="'+gestiones[i].desde+'">';
                            gestion_fecha += '<td>'+gestiones[i].desde+'</td>';
                            let familia = '<td>'+gestiones[i].nombre_familia+'</td>';
                            let telefono = '<input name="telefono_'+gestiones[i].gestion+'" type="hidden" value="'+gestiones[i].telefono+'">';
                            telefono += '<td>'+gestiones[i].telefono+'</td>';
                            let email = '<input name="email_'+gestiones[i].gestion+'" type="hidden" value="'+gestiones[i].email+'">';
                            email += '<td>'+gestiones[i].email+'</td>';

                            $('#data_gestiones').append('<tr>'+contraparte+observaciones+team+id_padron+nombre_persona+gestion+cuil+pais+gestion_fecha+familia+telefono+email+'</tr>');
                        }
                        // $('#tabla_gestiones').DataTable;

                    } else {
                        $('#sin_gestiones').removeClass('d-none');
                        $('#tabla_gestiones').addClass('d-none');
                    }
                },
                error: function(err){ 
                    mensaje('Error en la Busqueda');  
                }
            });
        });

        $(document).on('click',"#alta_masiva",function(e){
            $('#error_alta').addClass('d-none');
            if ($('#cliente').val() != 0 && $('#familia').val() != 0 && $('#tipo_informe').val() != 0 ) {
                $('#cantidad_informes').html($('#frmAltaMasiva [name="gestiones[]"]').length);
                $('#modalConfirmarAltaMasiva').modal('show');
                $('#conf_alta_masiva').on('click',function(){
                    $.ajax({
                        method: "POST",
                        url: "/alta-masiva", 
                        data: $('#frmAltaMasiva').serialize(), 
                        beforeSend: function(){
                            $('#error_alta').addClass('d-none');
                            $('#alta_masiva_cargando').removeClass('d-none');
                        },
                        success: function(resp){
                            $('#alta_masiva_cargando').addClass('d-none');
                            if (resp == '1') {
                                $('#alta_masiva_cargando').addClass('d-none');
                                $('#alta_masiva_exito').removeClass('d-none');
                                setTimeout(() => {
                                    window.location.reload();
                                }, 3500);
                            } else {
                                $('#error_alta').removeClass('d-none');
                            }
                        },
                    });

                })
            } else {
                $('#error_alta').removeClass('d-none');
                setTimeout(() => {
                $('#error_alta').addClass('d-none');
                    
                }, 3500);
            }
        });
        
	}); 
</script>
@endsection