@extends('layouts.admin')
@section('importar', 'active bg-gradient-primary')
@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">Importar Excel</h6>
                    </div>
                </div>
                @if (Session::has('mensaje_ok'))
                    <br>
                    <p class="alert alert-success2 col-10 offset-1" align="center">
                        <strong>{{ Session::get('mensaje_ok') }}</strong>
                        <button type="button" class="close2" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </p>
                @endif

                <br>
                <p class="alert alert-danger2 col-10 offset-1" align="center" name="error archivo" id="error_archivo"
                    style="display:none">
                    <strong>Ya existe un archivo cargado con ese nombre. Si continua se sobreescribirán los datos
                        existentes.</strong>
                    <button type="button" class="close2" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </p>
                <div class="card-body px-0 pb-2">
                    <div class="container">
                        <div class="row">

                            <form id="frmImportar" class="text-start col-md-8 offset-md-2 row" enctype="multipart/form-data"
                                action="{{ asset('importar') }}" method="POST">
                                @csrf
                                <input type="hidden" id="existe" name="existe">
                                <input type="hidden" id="html" name="html" value="{{ old('html') }}">
                                <div class="col-md-6" hidden>
                                    <label class="form-label">Tipo de Archivo</label>
                                    <select id="tipo" name="tipo" class="form-select" required>
                                        <option selected value="Proceso mes">Proceso mes</option>
                                    </select>
                                </div>
                                <div class="col-md-12">
                                <div class="">
                                    <label class="form-label">Archivo</label>
                                    <input type="file" name="archivo" id="archivo"
                                        onchange="verificarSeleccion()" required>
                                </div></div>
                                <div class="col-md-6">
                                    <label class="form-label">Mes</label>
                                    <select id="mes" name="mes" class="form-select" required>
                                        <option value="0" {{ old('mes') == '0' ? 'selected' : '' }}>Seleccione mes
                                        </option>
                                        <option value="01" {{ old('mes') == '01' ? 'selected' : '' }}>Enero</option>
                                        <option value="02" {{ old('mes') == '02' ? 'selected' : '' }}>Febrero</option>
                                        <option value="03" {{ old('mes') == '03' ? 'selected' : '' }}>Marzo</option>
                                        <option value="04" {{ old('mes') == '04' ? 'selected' : '' }}>Abril</option>
                                        <option value="05" {{ old('mes') == '05' ? 'selected' : '' }}>Mayo</option>
                                        <option value="06" {{ old('mes') == '06' ? 'selected' : '' }}>Junio</option>
                                        <option value="07" {{ old('mes') == '07' ? 'selected' : '' }}>Julio</option>
                                        <option value="08" {{ old('mes') == '08' ? 'selected' : '' }}>Agosto</option>
                                        <option value="09" {{ old('mes') == '09' ? 'selected' : '' }}>Septiembre
                                        </option>
                                        <option value="10" {{ old('mes') == '10' ? 'selected' : '' }}>Octubre</option>
                                        <option value="11" {{ old('mes') == '11' ? 'selected' : '' }}>Noviembre
                                        </option>
                                        <option value="12" {{ old('mes') == '12' ? 'selected' : '' }}>Diciembre
                                        </option>
                                    </select>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Año</label>
                                    <select id="anio" name="anio" class="form-select" required>
                                        <option value="0">Seleccione año</option>
                                        @for ($i = 2022; $i <= date('Y') + 1; $i++)
                                            <option value="{{ $i }}" {{ old('anio') == $i ? 'selected' : '' }}>
                                                {{ $i }}</option>
                                        @endfor

                                    </select>
                                </div>
                                <button onclick="enviarFormulario()" id="btnImportar" type="button"
                                    class="btn bg-gradient-primary w-100 my-4 mb-2" disabled>Importar</button>

                            </form>
                            <br>
                            <div class="col-md-8 offset-2">
                                <br>
                                <table id="tablaResultados" class="table table-bordered" style="width:100%">
                                    <thead>
                                        <tr>
                                            <th>Nombre Planilla</th>
                                            <th>Fecha Proceso</th>
                                            <th>Pet. Totales</th>
                                            <th>Pet. Gestionables</th>
                                        </tr>
                                    </thead>
                                    <tbody id="table_body" name="table_body">

                                    </tbody>
                                </table>
                            </div>

                            <form action="{{ asset('importar') }}" method="POST">
                                @method('DELETE')
                                @csrf
                                <!--<button type="submit" class="btn bg-gradient-danger w-100 my-4 mb-2">Limpiar BD</button>-->
                            </form>


                        </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>

@endsection

@section('js')
    <script>
        $(document).ready(function() {

            handleChange();

            $('form').submit(function() {
                // Mostrar la modal antes de enviar el formulario
                $('#modalCargando').modal('show');
            });

            $(document).ajaxStop(function() {
                // Cerrar la modal cuando todas las solicitudes AJAX se han completado
                $('#modalCargando').modal('hide');
            });


        });


        function handleChange() {
            // Obtener los valores seleccionados
            const selectedAnio = $('#anio').val();
            const selectedMes = $('#mes').val();

            // Aquí puedes realizar acciones en función de los valores seleccionados
            $.ajax({
                url: 'buscar_importados',
                type: 'GET',
                data: {
                    mes: selectedMes, // Usar selectedMes en lugar de mes
                    anio: selectedAnio // Usar selectedAnio en lugar de anio
                },
                success: function(data) {
                    // Manejar los datos recibidos
                    $('#table_body').html(data.html);
                },
                error: function(error) {
                    console.log(error);
                }
            });
        }

        // Agregar eventos de cambio a los elementos select utilizando jQuery
        $('#anio, #mes').on('change', handleChange);
        $('#anio, #mes').on('change', verificarSeleccion);



        function verificarSeleccion() {

            var archivoInput = document.getElementById('archivo');
            var errorArchivo = document.getElementById('error_archivo');

            var archivoSeleccionado = archivoInput.files[0]['name'];
            var miBoton = document.getElementById('btnImportar');

            var mesSeleccionado = document.getElementById('mes').value;
            var anioSeleccionado = document.getElementById('anio').value;
            $.ajax({
                url: "verificar-archivo",
                method: "GET",
                data: {
                    nombre_archivo: archivoSeleccionado
                },

                success: function(response) {
                    if (response.existe) {
                        $("#existe").val(true);
                        errorArchivo.style.display = "block";

                    } else {
                        $("#existe").val(false);
                        // Aquí puedes habilitar el botón si no e1xiste
                        errorArchivo.style.display = "none";
                    }
                    if (mesSeleccionado !== "0" && anioSeleccionado !== "0") {
                        miBoton.disabled = false;

                    } else {
                        miBoton.disabled = true;
                    }
                },
                error: function(error) {
                    console.error(error);
                },
            })


        };

        function enviarFormulario() {
            // Obtener el formulario por su ID
            var formulario = document.getElementById('frmImportar');

            // Convertir el valor a un booleano
            var existe = ($("#existe").val() === 'true');

            // Enviar el formulario
            if (existe) {
                if (confirm("Ya existe un archivo con este nombre. ¿Desea reemplazar el archivo actual?")) {
                    formulario.submit();
                    $('#modalCargando').modal('show');
                }
            } else {
                formulario.submit();
                $('#modalCargando').modal('show');
            }
        }
    </script>
@endsection