document.addEventListener('DOMContentLoaded', function() {
    // Manejar clic en items para mostrar modal con detalles
    const itemCards = document.querySelectorAll('.item-card, .btn-ver-detalle');
    const detalleModal = new bootstrap.Modal(document.getElementById('detalleModal'));
    const detalleModalBody = document.getElementById('detalleModalBody');
    const btnDonarModal = document.getElementById('btnDonarModal');

    itemCards.forEach(element => {
        element.addEventListener('click', function() {
            const itemId = this.getAttribute('data-id');
            
            // Cargar detalles del item via AJAX
            fetch('detalle_item.php?id=' + itemId)
                .then(response => response.text())
                .then(data => {
                    detalleModalBody.innerHTML = data;
                    btnDonarModal.href = 'formulario_donacion.php?item_id=' + itemId;
                    detalleModal.show();
                })
                .catch(error => {
                    detalleModalBody.innerHTML = '<div class="alert alert-danger">Error al cargar los detalles</div>';
                    detalleModal.show();
                });
        });
    });

    // Validación del formulario de donación
    const formDonacion = document.getElementById('formDonacion');
    if (formDonacion) {
        formDonacion.addEventListener('submit', function(e) {
            const montoOtro = document.getElementById('montoOtro');
            const otroMonto = document.getElementById('otro_monto');
            
            if (montoOtro.checked && (!otroMonto.value || isNaN(otroMonto.value) || otroMonto.value <= 0)) {
                e.preventDefault();
                alert('Por favor, ingresa un monto válido para "Otro monto"');
                otroMonto.focus();
            }
        });
    }

    // Efectos visuales para botones de monto
    const montoButtons = document.querySelectorAll('.btn-check');
    montoButtons.forEach(btn => {
        btn.addEventListener('change', function() {
            // Remover clase activa de todos los labels
            document.querySelectorAll('.btn-outline-primary').forEach(label => {
                label.classList.remove('active');
            });
            
            // Agregar clase activa al label correspondiente
            if (this.checked) {
                const label = document.querySelector('label[for="' + this.id + '"]');
                label.classList.add('active');
            }
        });
    });
});