@extends('layouts.admin')
@section('importados', 'active bg-gradient-primary')


@section('css')
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.css">

    <style>
        #table_id th {
            font-size: 14px;
        }
    </style>
@endsection
@section('contenido')

    <div class="row">
        <div class="col-12">
            <div class="card my-4">
                <div class="card-header p-0 position-relative mt-n4 mx-3 z-index-2">
                    <div class="bg-gradient-primary shadow-primary border-radius-lg pt-4 pb-3">
                        <h6 class="text-white text-capitalize ps-3">
                            <i class="fa fa-wifi"></i>
                            Importados
                        </h6>
                    </div>
                </div>
                <div class="card-body px-0 pb-2">
                    <div class="container">
                        <div class="row">
                            @if (Session::has('mensaje'))
                                <p class="alert alert-success2 col-10 offset-1" align="center">
                                    <strong>{{ Session::get('mensaje') }}</strong>
                                    <button type="button" class="close2" data-dismiss="alert" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                </p>
                            @endif

                            <div class="row offset-1">
                                <div class="col-md-4">
                                    <label class="form-label">Año</label>
                                    <select id="selectAnio" name="selectAnio" class="form-select" required>
                                        <option>Seleccione un año</option>
                                        @for ($i = 2022; $i <= date('Y') + 1; $i++)
                                            <option value="{{ $i }}"
                                                {{ old('selectAnio') == $i ? 'selected' : '' }}>{{ $i }}</option>
                                        @endfor

                                    </select>
                                </div>

                                <div class="col-md-4">
                                    <label class="form-label">Mes</label>
                                    <select id="selectMes" name="selectMes" class="form-select" required>
                                        <option value="0">Seleccione un mes</option>
                                        <option value="01" {{ old('selectMes') == '01' ? 'selected' : '' }}>Enero
                                        </option>
                                        <option value="02" {{ old('selectMes') == '02' ? 'selected' : '' }}>Febrero
                                        </option>
                                        <option value="03" {{ old('selectMes') == '03' ? 'selected' : '' }}>Marzo
                                        </option>
                                        <option value="04" {{ old('selectMes') == '04' ? 'selected' : '' }}>Abril
                                        </option>
                                        <option value="05" {{ old('selectMes') == '05' ? 'selected' : '' }}>Mayo
                                        </option>
                                        <option value="06" {{ old('selectMes') == '06' ? 'selected' : '' }}>Junio
                                        </option>
                                        <option value="07" {{ old('selectMes') == '07' ? 'selected' : '' }}>Julio
                                        </option>
                                        <option value="08" {{ old('selectMes') == '08' ? 'selected' : '' }}>Agosto
                                        </option>
                                        <option value="09" {{ old('selectMes') == '09' ? 'selected' : '' }}>Septiembre
                                        </option>
                                        <option value="10" {{ old('selectMes') == '10' ? 'selected' : '' }}>Octubre
                                        </option>
                                        <option value="11" {{ old('selectMes') == '11' ? 'selected' : '' }}>Noviembre
                                        </option>
                                        <option value="12" {{ old('selectMes') == '12' ? 'selected' : '' }}>Diciembre
                                        </option>
                                    </select>
                                    <br><br>
                                </div>
                                <div class="col-md-2">
                                    <label>&nbsp;</label>
                                    <a type="submit" class="btn bg-gradient-primary w-100 " onclick="mostrarImportados()">
                                        <i class="fa fa-search" aria-hidden="true"></i> Visualizar
                                    </a>
                                </div>
                                <br><br>
                            </div>
                            <br><br><br><br>

                            <div class="col-md-12 row" id="div_table" name="div_table" hidden>
                                <table id="table_id" class="display compact config-table">
                                    <thead>
                                        <tr>
                                            <th>Nombre Archivo</th>
                                            <th hidden>Fecha</th>
                                            <th>Fech Proceso</th>
                                            <th>Zonal</th>
                                            <th>Pet. Totales</th>
                                            <th>Pet. Nulas</th>
                                            <th>Pet. Exist.</th>
                                            <th>Pet. Fono</th>
                                            <th>Int. sin TV</th>
                                            <th>Pet. Gest.</th>
                                            <th></th>

                                        </tr>
                                    </thead>
                                    <tbody id="fila_bajas" name="fila_bajas">
                                        <tr>
                                            <td></td>
                                            <td hidden></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                        </tr>
                                    </tbody>
                                    <tfoot>
                                        <tr>
                                            <th>Total</th>
                                            <th></th>
                                            <th></th>
                                            <th></th>
                                            <th></th>
                                            <th></th>
                                            <th></th>
                                            <th></th>
                                            <th></th>
                                            <th></th>
                                        </tr>
                                    </tfoot>
                                </table>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>



    <!--Modal Cargando-->
    <div class="modal fade" id="modalCargando" tabindex="-1" role="dialog" aria-labelledby="modalCargando"
        aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content col-md-12">


                <div class="modal-body col-md-12 text-center">

                    Esta operación puede tardar unos minutos. <br>
                    Espere por favor. <br>
                    <img style="width:40%" align="center" src="img/progress.gif">

                </div>

            </div>

        </div>
    </div>


    <!--Modal Editar Importado-->
    <div class="modal fade" id="modalModificar" tabindex="-1" role="dialog" aria-labelledby="modalModificar"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content col-md-12">
                <div class="modal-header col-md-12">
                    <h5 class="modal-title" id="exampleModalLabel">
                        Editar importados
                        <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </h5>
                </div>
                <div class="modal-body col-md-12">
                    <form id="frmEditar" action="importados" method="POST" class="row">
                        @csrf
                        @method('PUT')
                        <input id="id_modificar" name="id_modificar" hidden>
                        <div class="col-md-12">
                            <div class="input-group input-group-outline my-3 is-focused">
                                <label class="form-label">Nombre</label>
                                <input id="nombre_modificar" name="nombre_modificar" type="text" class="form-control "
                                    value="{{ old('nombre_modificar') }}">
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer col-md-12">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal"
                        aria-label="Close">Cerrar</button>
                    <button type="submit" form="frmEditar" class="btn btn-primary">Aceptar</button>
                </div>
            </div>
        </div>
    </div>

    <form method="POST" action="importados" name="frmBorrar" id="frmBorrar" hidden="hidden">
        @method('delete')
        @csrf
        <input hidden id="id_borrar" name="id_borrar">
    </form>

    <form method="POST" action="importados" name="frmExportar" id="frmExportar" hidden="hidden">
        @csrf
        <input hidden id="id_exportar" name="id_exportar">
        <input hidden id="nombre_exportar" name="nombre_exportar">

    </form>

@endsection

@section('js')

    <!-- datatable-->
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.js"></script>
    <script src="js/config_table.js"></script>

    <script>
        function ejecutarBorrar(id) {
            if (confirm(
                    "Al realizar está acción se eliminará de forma permanente el archivo importado y todos sus registros asociados, ¿Desea continuar?"
                ) ==
                true
            ) {
                $('#modalCargando').modal('show');

                $('#id_borrar').val(id);
                $('#frmBorrar').submit();
            }
        }

        function ejecutarExportar(id, zonal, fecha, nombre) {
            $('#modalCargando').modal('show');
            $('#id_exportar').val(id);
            $('#nombre_exportar').val(nombre);

            // Envía el formulario
            $('#frmExportar').submit();
        }

        function mostrarImportados() {
            $("#div_table").removeAttr('hidden');
            $('#modalCargando').modal('show');
            buscarImportados().done(function() {
                aplicarDT(function() {
                    setTimeout(function() {
                        $('#modalCargando').modal('hide');
                    }, 500); // Retraso de 500 milisegundos (ajústalo según tus necesidades)
                });
            });
        }


        function buscarImportados() {
            $('#table_id').DataTable().destroy();
            anio = $("#selectAnio").val();
            mes = $("#selectMes").val();

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            return $.ajax({
                type: "get",
                dataType: "json",
                url: "../buscar_importados_" + anio + "_" + mes,

                success: function(resultado) {
                    $('#fila_bajas').empty();
                    resultado.importados.forEach(importados => {

                        const fechaOriginal = importados['created_at'];

                        // Crear un objeto Date a partir de la cadena de fecha original
                        const fecha = new Date(fechaOriginal);

                        // Obtener los componentes de la fecha
                        const dia = fecha.getDate();
                        const mes = fecha.getMonth() +
                            1; // ¡Recuerda que los meses en JavaScript van de 0 a 11!
                        const anio = fecha.getFullYear();

                        // Formatear la cadena de fecha en el formato deseado (DD-MM-YYYY)
                        const fechaFormateada =
                            `${dia < 10 ? '0' : ''}${dia}-${mes < 10 ? '0' : ''}${mes}-${anio}`;
                        if (importados['check_peticiones']) {
                            style = 'style="color:gray;cursor:not-allowed"';
                        } else {
                            style = 'onclick="ejecutarBorrar(' + importados['id'] +
                                ')" style="color:red;cursor:pointer"';
                        }
                        $('#fila_bajas').append(
                            `<tr>
                                <td>` + importados['nombre_archivo'].replace(/\.xlsx$/, '') + `</td>

                                <td hidden>` + importados['fecha'] + `</td>
                                <td>` + fechaFormateada + `</td>

                                <td>` + importados.zonal['codigo'] + `</td>
                                <td>` + importados['n_peti_totales'] + `</td>
                                <td>` + importados['n_peti_nulas'] + `</td>
                                <td>` + importados['n_peti_existentes'] + `</td>
                                <td>` + importados['n_peti_telefono'] + `</td>
                                <td>` + importados['n_peti_internet_sin_tv'] + `</td>
                                <td>` + importados['n_peti_gestionable'] + `</td>
                                <td>

                                    <i title="Eliminar registro importado" class='fa fa-xmark icon-eliminar'` + style + `>
                                    </i>
                                    <i style="color:green;cursor:pointer" title="Descargar" class="fa-solid fa-file-excel"
                                        onclick="ejecutarExportar(` + importados['id'] + `,'` + importados
                            .zonal['codigo'] + `','` + importados['fecha'] + ` ','` + importados[
                                'nombre_archivo'] + `')"></i>
                                </td>
                            </tr>`
                        )

                    });

                },
                error: function() {
                    alert("error");

                }

            });

        }



        function aplicarDT(callback) {
            $('#table_id').DataTable({
        responsive: true,
        "aoColumnDefs": [{
            'bSortable': false,
            'aTargets': [-1]
        }],
        "columnDefs": [{
            "width": "30%",
            "targets": 0
        }],
        "oLanguage": {
            "oPaginate": {
                "sPrevious": "Anterior",
                "sNext": "Siguiente",
                "sInfo": "Mostrando _START_ a _END_ de un total de _TOTAL_"
            },
            "sZeroRecords": "Sin registros para mostrar",
            "sInfo": "mostrando _START_ a _END_, de un total de _TOTAL_ registros",
            "sInfoFiltered": " - filtrado de _MAX_ registros",
            "sInfoEmpty": "Sin registros para mostrar",
            "sSearch": "Buscar",
            "sLengthMenu": "Mostrar _MENU_ registros",
            "sLoadingRecords": "Por favor, espere un momento..."
        },
        "footerCallback": function (row, data, start, end, display) {
            var api = this.api();

            // Helper function to parse numbers
            var intVal = function (i) {
                return typeof i === 'string' ?
                    i.replace(/[\$,]/g, '') * 1 :
                    typeof i === 'number' ?
                        i : 0;
            };

            // Calculate totals for each column you want to sum
            var total4 = api
                .column(3)
                .data()
                .reduce(function (a, b) {
                    return intVal(a) + intVal(b);
                }, 0);

            var total5 = api
                .column(4)
                .data()
                .reduce(function (a, b) {
                    return intVal(a) + intVal(b);
                }, 0);

            var total6 = api
                .column(5)
                .data()
                .reduce(function (a, b) {
                    return intVal(a) + intVal(b);
                }, 0);

            var total7 = api
                .column(6)
                .data()
                .reduce(function (a, b) {
                    return intVal(a) + intVal(b);
                }, 0);

            var total8 = api
                .column(7)
                .data()
                .reduce(function (a, b) {
                    return intVal(a) + intVal(b);
                }, 0);

            var total9 = api
                .column(8)
                .data()
                .reduce(function (a, b) {
                    return intVal(a) + intVal(b);
                }, 0);

            var total10 = api
                .column(9)
                .data()
                .reduce(function (a, b) {
                    return intVal(a) + intVal(b);
                }, 0);

            // Update footer with totals
            $(api.column(2).footer()).html(total4);
            $(api.column(3).footer()).html(total5);
            $(api.column(4).footer()).html(total6);
            $(api.column(5).footer()).html(total7);
            $(api.column(6).footer()).html(total8);
            $(api.column(7).footer()).html(total9);
            $(api.column(8).footer()).html(total10);
        }
    });

            callback();


        }
    </script>

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

            var table = $('#table_id').DataTable();
            @if (old('selectMes') !== null)
                mostrarImportados();
            @endif
            $('#selectAnio').on('change', function() {
                var selectedAnio = $(this).val();
                var selectedMes = $('#selectMes').val();

                // Verificar si el valor seleccionado en el select de mes es "seleccione"
                if (selectedMes === "0") {
                    // Si es "seleccione", eliminar el filtro de mes
                    table.column(2).search(selectedAnio).draw();
                } else {
                    // Si se seleccionó un mes, crear el filtro completo
                    var filtro = selectedAnio + '-' + selectedMes;
                    table.column(2).search(filtro).draw();
                }
            });

            // Agregar un evento de cambio para el select de mes
            $('#selectMes').on('change', function() {
                var selectedAnio = $('#selectAnio').val();
                var selectedMes = $(this).val();

                // Verificar si el valor seleccionado en el select de mes es "seleccione"
                if (selectedMes === "0") {
                    // Si es "seleccione", eliminar el filtro de mes
                    table.column(2).search(selectedAnio).draw();
                } else {
                    // Si se seleccionó un mes, crear el filtro completo
                    var filtro = selectedAnio + '-' + selectedMes;
                    table.column(2).search(filtro).draw();
                }
            });

            $('#frmExportar').on('submit', function(event) {
                event.preventDefault(); // Evita que el formulario se envíe de forma predeterminada.

                // Realiza una solicitud AJAX para enviar el formulario.
                $.ajax({
                    type: 'POST', // O el método HTTP que estás utilizando
                    url: 'exportar_peticiones_' + $('#id_exportar')
                        .val(), // Reemplaza con la URL correcta
                    data: $(this).serialize(), // Envía los datos del formulario
                    xhrFields: {
                        responseType: 'blob' // Esto permite recibir una respuesta como Blob (archivo)
                    },
                    success: function(response) {
                        console.log(response);
                        var url = window.URL.createObjectURL(new Blob([response]));
                        var a = document.createElement('a');
                        a.href = url;
                        a.download = $('#nombre_exportar').val().replace(/\.xlsx$/, '_O.xlsx');
                        document.body.appendChild(a);
                        a.click();
                        window.URL.revokeObjectURL(url);

                        // Cierra la modal de carga después de un retraso de 500 milisegundos (ajusta según tus necesidades).
                        setTimeout(function() {
                            $('#modalCargando').modal('hide');
                        }, 500);
                    },
                    error: function(error) {
                        // Maneja errores si es necesario.
                        console.error(error);
                    }
                });
            });


            @if (session('error_modal') == 'agregar')
                $("#modalAgregar").modal('show');
            @endif

            @if (session('error_modal') == 'modificar')
                $("#modalModificar").modal('show');
            @endif

            @if (session('error_modal') == 'password')
                $("#modalActualizarPassword").modal('show');
            @endif

        });
    </script>

@endsection