`).join(''); } // School search functionality const input = document.getElementById("school-search"); const results = document.getElementById("search-results"); input.addEventListener("input", async () => { const query = input.value.trim(); if (query.length < 2) { results.innerHTML = ""; results.classList.remove("active"); return; } try { const res = await fetch( `${API_BASE_URL}?q=${encodeURIComponent(query)}&page=1&limit=10` ); const data = await res.json(); const schools = data.data || []; if (schools.length) { results.innerHTML = schools .map( (s) => `
${s.name}
`
)
.join("");
} else {
results.innerHTML = "
No schools found ";
}
results.classList.add("active");
} catch {
results.innerHTML = "
Error loading schools ";
results.classList.add("active");
}
});
results.addEventListener("click", (e) => {
const resultItem = e.target.closest(".result-item");
if (resultItem) {
const schoolId = resultItem.dataset.id;
const schoolName = resultItem.dataset.name;
selectedSchool = { id: schoolId, name: schoolName };
input.value = schoolName;
results.classList.remove("active");
document.getElementById("selected-school").style.display = "block";
document.getElementById("selected-school-name").textContent = schoolName;
updateNavigation();
}
});
document.addEventListener("click", (e) => {
if (!e.target.closest(".search-input-wrapper") && !e.target.closest(".search-results")) {
results.classList.remove("active");
}
});
// Support type selection
document.addEventListener('click', function(e) {
if (e.target.closest('.support-type')) {
document.querySelectorAll('.support-type').forEach(opt => opt.classList.remove('selected'));
const option = e.target.closest('.support-type');
option.classList.add('selected');
supportType = option.dataset.type;
// Toggle amount sections
const onetimeSection = document.getElementById('onetime-amounts');
const subscriptionSection = document.getElementById('subscription-options');
if (supportType === 'onetime') {
onetimeSection.style.display = 'block';
subscriptionSection.style.display = 'none';
} else {
onetimeSection.style.display = 'none';
subscriptionSection.style.display = 'block';
}
updateNavigation();
}
});
// Amount selection
document.addEventListener('click', function(e) {
if (e.target.closest('.amount-option')) {
document.querySelectorAll('.amount-option').forEach(opt => opt.classList.remove('selected'));
document.getElementById('custom-amount').value = '';
const option = e.target.closest('.amount-option');
option.classList.add('selected');
selectedAmount = parseInt(option.dataset.amount);
customAmount = null;
updateNavigation();
}
});
// Custom amount input
document.getElementById('custom-amount').addEventListener('input', function() {
const value = parseFloat(this.value);
if (value && value > 0) {
document.querySelectorAll('.amount-option').forEach(opt => opt.classList.remove('selected'));
customAmount = value;
selectedAmount = null;
} else {
customAmount = null;
}
updateNavigation();
});
// Coverage option selection
document.addEventListener('click', function(e) {
if (e.target.closest('.coverage-option')) {
document.querySelectorAll('.coverage-option').forEach(opt => opt.classList.remove('selected'));
const option = e.target.closest('.coverage-option');
option.classList.add('selected');
selectedCoverage = option.dataset.coverage;
updateNavigation();
}
});
// Update type selection (for subscriptions)
document.addEventListener('click', function(e) {
if (e.target.closest('.update-type')) {
document.querySelectorAll('.update-type').forEach(opt => opt.classList.remove('selected'));
const option = e.target.closest('.update-type');
option.classList.add('selected');
selectedUpdate = option.dataset.update;
updateNavigation();
}
});
// Step navigation
function nextStep() {
if (currentStep < 4) {
currentStep++;
updateStepDisplay();
if (currentStep === 4) {
updatePaymentSummary();
addPaymentButton();
}
updateNavigation();
}
}
function prevStep() {
if (currentStep > 1) {
currentStep--;
updateStepDisplay();
}
}
function updateStepDisplay() {
// Update progress dots
for (let i = 1; i <= 4; i++) {
const dot = document.getElementById(`dot${i}`);
dot.classList.remove('active', 'completed');
if (i < currentStep) {
dot.classList.add('completed');
} else if (i === currentStep) {
dot.classList.add('active');
}
}
// Update step visibility
for (let i = 1; i <= 4; i++) {
const step = document.getElementById(`step${i}`);
step.classList.toggle('active', i === currentStep);
}
updateNavigation();
}
function updateNavigation() {
const backBtn = document.getElementById('back-btn');
const nextBtn = document.getElementById('next-btn');
backBtn.style.display = currentStep > 1 ? 'block' : 'none';
if (currentStep === 4) {
nextBtn.style.display = 'none';
} else {
nextBtn.style.display = 'block';
nextBtn.disabled = !canProceed();
if (currentStep === 3) {
nextBtn.textContent = 'Start Supporting';
} else {
nextBtn.textContent = 'Continue';
}
}
}
function canProceed() {
switch (currentStep) {
case 1: return selectedSchool !== null;
case 2: return selectedCoverage !== null;
case 3: return supportType === 'onetime' ? (selectedAmount || customAmount) : true;
case 4: return document.getElementById('user-email').value.includes('@');
default: return false;
}
}
// Update payment summary
function updatePaymentSummary() {
document.getElementById('summary-school').textContent = selectedSchool.name;
document.getElementById('summary-coverage').textContent = getCoverageLabel(selectedCoverage);
const amount = getSelectedAmount();
const amountText = supportType === 'onetime' ? `${amount}` : `${amount}/month`;
document.getElementById('summary-amount').textContent = amountText;
const paymentTypeText = supportType === 'onetime' ? 'donation' : 'subscription';
document.getElementById('payment-type-text').textContent = paymentTypeText;
}
function getCoverageLabel(coverage) {
const labels = {
'attendance': 'School Attendance',
'wellness': 'Wellness Visits',
'pta': 'PTA Meeting Attendance'
};
return labels[coverage] || coverage;
}
function getSelectedAmount() {
if (supportType === 'onetime') {
return customAmount || selectedAmount;
} else {
return selectedUpdate === 'impact' ? 10 : 15;
}
}
// Initialize payment
async function initializePayment() {
const email = document.getElementById('user-email').value;
if (!email || !email.includes('@')) {
alert('Please enter a valid email address');
return;
}
const loading = document.getElementById('checkout-loading');
loading.style.display = 'flex';
try {
const amount = getSelectedAmount();
const response = await fetch(`${PAYMENT_API_URL}/initialize`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
target_school_id: parseInt(selectedSchool.id),
amount: amount,
currency: "USD",
email: email,
payment_method: "card",
payment_provider: "stripe",
callback_url: window.location.origin + "/payment/success",
support_type: supportType,
coverage_type: selectedCoverage,
update_type: supportType === 'subscription' ? selectedUpdate : null
})
});
const data = await response.json();
if (data.data && data.data.authorization_url) { // Redirect to Stripe checkout
window.location.href = data.data.authorization_url;
} else {
throw new Error('No authorization URL received');
}
} catch (error) {
loading.style.display = 'none';
document.getElementById('checkout').innerHTML =
'
Error initializing payment. Please try again.
';
console.error('Payment initialization error:', error);
}
}
// Add payment button to step 4
function addPaymentButton() {
const checkoutDiv = document.getElementById('checkout');
checkoutDiv.innerHTML = `
Complete ${supportType === 'onetime' ? 'Donation' : 'Subscription'} →
`;
}
// Initialize
updateStepDisplay();