@extends('layouts.app')

@section('modals')
<div class="modal fade" id="modal-form" tabindex="-1" aria-labelledby="modalFormLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            {{-- ID del formulario unificado para agregar y editar --}}
            <form id="form-periodo-modal">
                @csrf {{-- ¡Mantén el token CSRF para seguridad! --}}
                <div class="modal-header">
                    <h5 class="modal-title" id="modalFormLabel">Periodo</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <h4>Formulario del Periodo</h4>
                    <hr>
                    <br>
                    <div class="row">
                        <div class="form-group col-md-6">
                            <label for="anio_inicio"><b>Año de inicio</b> *</label>
                            <input type="date" name="anio_inicio" class="form-control" id="anio_inicio" required>
                        </div>
                        <div class="form-group col-md-6">
                            <label for="anio_fin"><b>Año de fin</b> *</label>
                            <input type="date" name="anio_fin" class="form-control" id="anio_fin" required>
                        </div>
                    </div>
                    <div class="row">
                        <div class="form-group col-md-12">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" value="1" id="seleccionado" name="seleccionado">
                                <label class="form-check-label" for="seleccionado">
                                    Establecer como predeterminado
                                </label>
                            </div>
                            <hr>
                            <div class="alert alert-info">
                                <p><i class="bi-info-circle"></i> Esto se refiere a que el sistema registrará todas las inscripciones en este periodo, cuando desees consultar los periodos anteriores puedes cambiarlo.</p>
                            </div>
                        </div>
                    </div>
                    <hr>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                    {{-- ID del botón cambiado para evitar conflicto con el formulario --}}
                    <button class="btn btn-success" id="btn-modal-submit"><i class="fas fa-check"></i> Registrar periodo</button> 
                </div>
            </form>
        </div>
    </div>
</div>

@endsection

@section('content')

    <div class="container-fluid">
        <div class="white-box">
            <a href="#" class="btn btn-dark btn-lg" id="btn-add"><i class="fas fa-plus"></i> Crear periodo</a>                                    
            <a href="{{route('home')}}" class="btn"><i class="fas fa-arrow-left"></i> Regresar al inicio</a>
        </div>
    </div>
    <hr>
    <div class="responsive-table">   
        <table class="table table-bordered" id="table-periodos">
            <thead>
                <th class="text-center">Año inicio</th>
                <th class="text-center">Año fin</th>
                <th class="text-center">Seleccionado</th>
                <th class="actions"></th>
            </thead>
            <tbody>
                
            </tbody>
        </table>
    </div>

@endsection

@section('scripts')
{{-- Asegúrate de incluir Moment.js y SweetAlert2 --}}
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment-with-locales.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
index(); // Carga la tabla al inicio

// Manejador para el botón "Crear periodo"
$(document).on('click', '#btn-add', function(e){
    e.preventDefault();
    $('#form-periodo-modal').trigger('reset').removeAttr('data-id'); // Limpiar formulario y quitar ID de edición
    $('#form-periodo-modal input[name="_method"]').remove(); // Asegurar que no haya _method para POST
    $('#btn-modal-submit').attr('class', 'btn btn-success').html('<i class="fas fa-check"></i> Registrar periodo');
    $('#modal-form').modal('show');
});

// Manejador para el botón de refrescar tabla (si lo usas)
$(document).on('click', '#btn-refresh', function(e){
    e.preventDefault();
    index();
});

// MANEJADOR UNIFICADO PARA AGREGAR Y EDITAR PERIODOS
$(document).on('submit', '#form-periodo-modal', function(e) {
    e.preventDefault();

    if(validarFechas()){
        let form = new FormData(this);
        let id_registro = $(this).data('id'); // Obtiene el ID del atributo data-id del formulario (si existe)
    
        fetch(id_registro ? `/api/periodos/${id_registro}` : '/api/periodos', { // URL condicional
            method: id_registro ? 'PUT' : 'POST', // Método condicional
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json',
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            body: JSON.stringify({
                anio: form.get('anio'),
                nro_periodo: form.get('nro_periodo'),
                seleccionado: form.get('seleccionado') ? '1' : '0' 
            })
        })
        .then(response => {
            if (!response.ok) {
                return response.json().then(errorData => { throw new Error(errorData.message || `Error del servidor: ${response.status}`); });
            }
            return response.json();
        })
        .then(data => {
            $('#modal-form').modal('hide');
            $(this).trigger('reset').removeAttr('data-id'); 
            $('#form-periodo-modal input[name="_method"]').remove(); 
    
            Swal.fire({
                title: "Operación exitosa!",
                text: data.message || "Registro guardado correctamente.",
                icon: "success",
                draggable: true
            });
            index(); 
        })
        .catch(error => {
            console.error("Error al guardar/actualizar el periodo:", error);
            Swal.fire({
                icon: "error",
                title: "Error",
                text: error.message || "Ocurrió un error inesperado al guardar el periodo.",
                draggable: true
            });
        });
    }
});

// Función para cargar datos en el formulario de edición y abrir el modal
$(document).on('click', '.editar', function(){
    let id = $(this).data('id');
    fetch(`api/periodos/${id}`)
    .then(response => response.json())
    .then(res => {
        console.log(res)
        $('[name=anio_inicio]').val(res.data.anio_inicio.split('T')[0]); 
        $('[name=anio_fin]').val(res.data.anio_fin.split('T')[0]);
        $('[name=seleccionado]').prop('checked', res.data.seleccionado == 1); 
        
        $('#btn-modal-submit').attr('class', 'btn btn-primary').html('<i class="fa fa-check"></i> Actualizar registro');
        $('#form-periodo-modal').data('id', id); // ALMACENA EL ID EN EL ATRIBUTO data-id DEL FORMULARIO

        // Añadir input hidden para _method=PUT si no existe
        if($('#form-periodo-modal input[name="_method"]').length === 0){
            $('#form-periodo-modal').prepend(`<input type='hidden' name="_method" value="PUT">`);
        }
        
        $('#modal-form').modal('show');
    })
    .catch(error => {
        console.error("Error al cargar datos para editar:", error);
        Swal.fire({
            icon: "error",
            title: "Error de carga",
            text: "No se pudieron cargar los datos del periodo para edición.",
            draggable: true
        });
    });
});

// ELIMINAR PERIODO
$(document).on('click', '.eliminar', function() {
    let id = $(this).data('id');
    Swal.fire({
        title: '¿Estás seguro?',
        text: '¡Esta acción no se puede revertir!',
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#d33',
        cancelButtonColor: '#3085d6',
        confirmButtonText: 'Sí, ¡eliminar!',
        cancelButtonText: 'Cancelar'
    }).then((result) => {
        if (result.isConfirmed) {
            fetch(`/api/periodos/${id}`, {
                method: 'DELETE',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            })
            .then(response => {
                if (!response.ok) {
                    return response.json().then(errorData => { throw new Error(errorData.message || `Error del servidor: ${response.status}`); });
                }
                return response.json();
            })
            .then(data => {
                Swal.fire({
                    icon: data.status === 'ok' ? 'success' : 'error',
                    title: data.status === 'ok' ? '¡Eliminado!' : '¡Error!',
                    text: data.message,
                    confirmButtonText: 'Aceptar'
                });
                if (data.status === 'ok') {
                    index();
                }
            })
            .catch(error => {
                console.error("Error al eliminar el registro:", error);
                Swal.fire({
                    icon: 'error',
                    title: 'Error de Conexión',
                    text: error.message || 'Ocurrió un error al intentar eliminar el registro. Por favor, intente de nuevo.',
                    confirmButtonText: 'Aceptar'
                });
            });
        }
    });
});

// CAMBIAR PERIODO VIGENTE
function cambioSeleccionado(id, seleccionado){
    fetch(`/api/periodo/by-selected/` + id, {
        method: 'PUT',
        headers: {
            'Content-Type': 'application/json',
            'Accept': 'application/json',
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        body: JSON.stringify({ seleccionado: seleccionado })
    })
    .then(response => {
        if (!response.ok) {
            return response.json().then(errorData => { throw new Error(errorData.message || `Error del servidor: ${response.status}`); });
        }
        return response.json();
    })
    .then(data => {
        Swal.fire({
            title: "Periodo actualizado exitosamente!",
            icon: "success",
            draggable: true
        });
        index();
    })
    .catch(error => {
        console.error("Error en la petición de cambio de seleccionado:", error);
        Swal.fire({
            icon: "error",
            title: "Error",
            text: error.message || "No se pudo cambiar el estado de seleccionado.",
            draggable: true
        });
    });
}

// CARGAR TABLA
function index(){
    fetch('api/periodos')
    .then(response => response.json())
    .then(data => {
        let tbody = document.querySelector('tbody');
        tbody.innerHTML = '';
        if (data.data && Array.isArray(data.data)) { 
            data.data.forEach(element => {
                let tr = document.createElement('tr');
                tr.innerHTML = `
                <td class="text-center">${moment(element.anio).format('YYYY-MM-DD')}</td>
                <td class="text-center">${moment(element.nro_periodo).format('YYYY-MM-DD')}</td>
                <td class="text-center">${(element.seleccionado) ? '<i class="fas fa-check-circle text-success"></i>' : '<i class="fas fa-check-circle"></i>'}</td>
                <td class="text-center">
                     <button class="btn btn-dark btn-sm seleccionado" type="button" data-id="${element.id}" onclick="cambioSeleccionado(${element.id}, '${element.seleccionado}')">
                                 <i class="fas fa-check"></i>
                             </button>
                     <button class="btn btn-dark btn-sm editar" type="button" data-id="${element.id}" data-bs-toggle="modal"> 
                         <i class="fas fa-edit"></i>
                     </button>
                     <button class="btn btn-danger btn-sm eliminar" type="button" data-id="${element.id}" >
                         <i class="fas fa-trash"></i>
                     </button>
                </td>
                `;
                tbody.appendChild(tr);
            });
        } else {
            console.warn("No se encontraron datos o el formato es inesperado.");
            Swal.fire({
                icon: 'info',
                title: 'Sin Datos',
                text: 'No hay periodos registrados para mostrar.',
                confirmButtonText: 'Aceptar'
            });
        }
    }) 
    .catch(error => {
        console.error("Error al cargar la tabla:", error);
        Swal.fire({
            icon: 'error',
            title: 'Error de Carga',
            text: 'Ocurrió un error al cargar los periodos. Por favor, inténtelo de nuevo.',
            confirmButtonText: 'Aceptar'
        });
    });
}

function clearValidationFeedback() {
    $('#anio').removeClass('is-invalid');
    $('#anio-feedback').text('');
    $('#nro_periodo').removeClass('is-invalid');
    $('#nro_periodo-feedback').text('');
}

function showValidationFeedback(inputElement, message) {
    $(inputElement).addClass('is-invalid');
    $(`#${inputElement.id}-feedback`).text(message);
}

// Función principal para validar que la fecha de fin no sea menor que la de inicio
function validateDates() {
    clearValidationFeedback(); // Limpia cualquier mensaje de error previo
    const anio = new Date($('#anio').val());
    const nro_periodo = new Date($('#nro_periodo').val());

    let isValid = true;

    // Comprueba si las fechas son válidas (el input type="date" puede estar vacío o con formato incorrecto)
    if (!anio.getTime()) {
        showValidationFeedback($('#anio')[0], 'Por favor, ingrese una fecha de inicio válida.');
        isValid = false;
    }
    if (!nro_periodo.getTime()) {
        showValidationFeedback($('#nro_periodo')[0], 'Por favor, ingrese una fecha de fin válida.');
        isValid = false;
    }

    // Si ambas fechas son válidas, comprueba si la fecha de fin es anterior a la de inicio
    if (isValid && nro_periodo < anio) {
        showValidationFeedback($('#nro_periodo')[0], 'El periodo no puede ser anterior al año.');
        isValid = false;
    }
    return isValid;
}

function validarFechas() {
  // Obtener los valores de los campos
  const anioInicioInput = document.getElementById('anio_inicio').value;
  const anioFinInput = document.getElementById('anio_fin').value;

  // Validar que ambos campos tengan valores
  if (!anioInicioInput || !anioFinInput) {
    alert('Error: Ambos campos de fecha son obligatorios.');
    return false;
  }

  // Convertir los valores a objetos Date para comparar año y mes
  const fechaInicio = new Date(anioInicioInput);
  const fechaFin = new Date(anioFinInput);

  // Validar que las fechas sean válidas
  if (isNaN(fechaInicio.getTime()) || isNaN(fechaFin.getTime())) {
    alert('Error: Las fechas deben ser válidas.');
    return false;
  }

  // Extraer año y mes
  const anioInicio = fechaInicio.getFullYear();
  const mesInicio = fechaInicio.getMonth(); // 0-11 (enero es 0)
  const anioFin = fechaFin.getFullYear();
  const mesFin = fechaFin.getMonth();

  // Crear valores numéricos para comparación (YYYYMM)
  const valorInicio = anioInicio * 100 + mesInicio;
  const valorFin = anioFin * 100 + mesFin;

  // Validar que la fecha de inicio no sea mayor a la fecha de fin
  if (valorInicio > valorFin) {
    alert('Error: La fecha de inicio no puede ser mayor a la fecha de fin.');
    return false;
  }

  alert('Las fechas son válidas.');
  return true;
}
// Escucha los cambios en los campos de fecha para validar en tiempo real
// $('#anio, #nro_periodo').on('change', function() {
//     validateDates();
// });


    function vigente(){
        fetch('api/periodos/vigente')
        .then(response => response.json())
        .then(data => {
            if (data.status === 'ok') {
                let periodo = data.data;
                $('#anio_inicio').val(periodo.anio_inicio);
                $('#anio_fin').val(periodo.anio_fin);
                $('#seleccionado').prop('checked', periodo.seleccionado === 1);
            }
        })
        .catch(error => {
            console.error("Error al cargar el periodo vigente:", error);
            Swal.fire({
                icon: 'error',
                title: 'Error de Carga',
                text: 'Ocurrió un error al cargar el periodo vigente. Por favor, inténtelo de nuevo.',
                confirmButtonText: 'Aceptar'
            });
        });
    }
</script>
@endsection