document.addEventListener('DOMContentLoaded', () => {

    // --- Modal para registrar anticipo ---
    const anticipoModal = document.getElementById('anticipoModal');
    const anticipoMessage = document.getElementById('anticipoMessage');
    const formAnticipo = document.getElementById('registrarAnticipoForm');

    // Abre el modal de anticipo y carga los datos
    document.querySelectorAll('.btn-registrar-anticipo').forEach(button => {
        button.addEventListener('click', (event) => {
            const idAgenda = event.currentTarget.dataset.id;
            const faltaPagar = event.currentTarget.dataset.falta;

            document.getElementById('modalAnticipoId').textContent = idAgenda;
            document.getElementById('modalFaltaPagar').textContent = faltaPagar;
            document.getElementById('modalInputIdAnticipo').value = idAgenda;
            document.getElementById('monto_anticipo').value = '';
            anticipoMessage.textContent = '';
            
            anticipoModal.style.display = 'block';
        });
    });

    // Cierra el modal de anticipo
    anticipoModal.querySelector('.close-button').addEventListener('click', () => {
        anticipoModal.style.display = 'none';
    });

    // Envía el formulario de anticipo
    formAnticipo.addEventListener('submit', async (event) => {
        event.preventDefault();

        const formData = new FormData(formAnticipo);
        const idAgenda = formData.get('id_agenda');
        const montoPago = parseFloat(formData.get('monto_pago'));
        const faltaPagarActual = parseFloat(document.getElementById('modalFaltaPagar').textContent);

        // Validación extra en el cliente
        if (montoPago > faltaPagarActual) {
            anticipoMessage.textContent = 'El monto no puede ser mayor a lo que falta por pagar.';
            anticipoMessage.style.color = 'red';
            return;
        }

        anticipoMessage.textContent = 'Registrando anticipo...';
        anticipoMessage.style.color = 'blue';

        try {
            // Realiza la solicitud al script PHP de procesamiento
            const response = await fetch('../services/procesar_anticipo.php', {
                method: 'POST',
                body: formData
            });

            const result = await response.json();

            if (result.success) {
                anticipoMessage.textContent = result.message;
                anticipoMessage.style.color = 'green';
                
                // --- Actualización de la UI sin recargar ---
                const card = document.querySelector(`.caja-pedido[data-id="${idAgenda}"]`);
                if (card) {
                    const anticipoElement = card.querySelector('.anticipo-valor');
                    const faltaPagarElement = card.querySelector('.falta-pagar-valor');
                    const registrarButton = card.querySelector('.btn-registrar-anticipo');

                    anticipoElement.textContent = result.nuevo_anticipo;
                    faltaPagarElement.textContent = result.nueva_falta_por_pagar;

                    // Oculta el botón si el pago se completó
                    if (parseFloat(result.nueva_falta_por_pagar) <= 0) {
                        registrarButton.style.display = 'none';
                    }
                }
                
                // Cierra el modal después de 2 segundos
                setTimeout(() => {
                    anticipoModal.style.display = 'none';
                }, 2000);

            } else {
                anticipoMessage.textContent = result.message;
                anticipoMessage.style.color = 'red';
            }
        } catch (error) {
            console.error('Error:', error);
            anticipoMessage.textContent = 'Error de conexión con el servidor.';
            anticipoMessage.style.color = 'red';
        }
    });

    // --- Lógica de otros modales (mantienes tu código existente) ---
    const statusModal = document.getElementById('statusModal');
    const updateStatusForm = document.getElementById('updateStatusForm');

    // Abre el modal de estado/fecha
    document.querySelectorAll('.btn-agenda').forEach(button => {
        button.addEventListener('click', (event) => {
            const idAgenda = event.currentTarget.dataset.id;
            const card = document.querySelector(`.caja-pedido[data-id="${idAgenda}"]`);
            const estadoActual = card.querySelector('.estado-display').textContent.trim();
            const fechaActual = card.querySelector('.fecha-evento').textContent;

            document.getElementById('modalAgendaId').textContent = idAgenda;
            document.getElementById('modalInputIdAgenda').value = idAgenda;
            document.getElementById('modalEstadoActual').textContent = estadoActual;
            document.getElementById('modalFechaActual').textContent = fechaActual;
            
            statusModal.style.display = 'block';
        });
    });

    // Cierra el modal de estado
    statusModal.querySelector('.close-button').addEventListener('click', () => {
        statusModal.style.display = 'none';
    });

    // (Lógica para enviar el formulario de estado, si la tienes)
    updateStatusForm.addEventListener('submit', async (event) => {
        event.preventDefault();
        // Lógica de AJAX para actualizar el estado, similar a la del anticipo.
    });

    // Cierra los modales al hacer clic fuera
    window.addEventListener('click', (event) => {
        if (event.target === anticipoModal) {
            anticipoModal.style.display = 'none';
        }
        if (event.target === statusModal) {
            statusModal.style.display = 'none';
        }
    });

    // Lógica para el menú de hamburguesa
    const menuToggle = document.querySelector('.menu-toggle');
    const topbarMenu = document.getElementById('topbarMenu');
    if (menuToggle && topbarMenu) {
        menuToggle.addEventListener('click', () => {
            const isExpanded = menuToggle.getAttribute('aria-expanded') === 'true';
            menuToggle.setAttribute('aria-expanded', !isExpanded);
            topbarMenu.classList.toggle('is-expanded');
        });
    }

});