<?php
    include "./conexion.php";
?>
<html>
    <body>
        <form id="uploadForm" enctype="multipart/form-data">
            <table>
                <tr>
                    <td style="width:200px"><input type="file" name="file" id="file" accept=".xls,.xlsx" required></td>
                    <td><button type="submit" class="btn btn-primary" name="submit">Subir archivo</button></td>
                </tr>
                <tr>
                    <td colspan="2" style="text-align:center;"><p class="statusMsg1"></p></td>
                </tr>
            </table>
        </form>
        <div id="datos"></div>
    </body>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <script>
        $(document).ready(function(){
            $('#uploadForm').on('submit', function(e){
                e.preventDefault(); // Evitar el comportamiento normal del formulario
                var formData = new FormData(this);
                $('#datos').html(''); // Limpiar contenido previo

                // Mensaje de carga
                //$('.statusMsg1').html('<p>Cargando información, por favor espera...</p>');

                $.ajax({
                    type: 'POST',
                    url: 'procesarPeriodos.php',
                    data: formData,
                    cache: false,
                    contentType: false,
                    processData: false,
                    success: function(response){
                        $('.statusMsg1').html(''); // Limpiar el mensaje de estado
                        $('#datos').html(response); // Mostrar la respuesta del servidor
                    },
                    error: function(xhr, status, error){
                        console.log(xhr.responseText); // Para obtener más detalles en la consola
                        alert('Error: ' + error + '\nEstado: ' + status);
                    }
                });
            });
        });
    </script>
</html>
