document.querySelectorAll('.accordion-checkbox').forEach(cbox => {
    cbox.addEventListener('change', function() {
        const label = this.previousElementSibling
        const caret = label.querySelector('.text-about')
        if (cbox.checked) {
            caret.innerHTML = ''
        } else {
            caret.innerHTML = ''
        }
    })
})

// FIXME: maybe move to utils
function getCookie(name) {
    var cookieValue = null;
    if (document.cookie && document.cookie !== '') {
        var cookies = document.cookie.split(';');
        for (var i = 0; i < cookies.length; i++) {
            var cookie = cookies[i].trim()
            // Does this cookie string begin with the name we want?
            if (cookie.substring(0, name.length + 1) === (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    if (!cookieValue && name === 'csrftoken') {
        var input = document.querySelector('input[name="csrfmiddlewaretoken"]')
        if (input) {
            cookieValue = input.value
        }
    }
    return cookieValue;
}

document.getElementById('contact-form').addEventListener('submit', async function(event) {
    // console.log('foobar')
    event.preventDefault()
    let data = new FormData()
    data.append('email', document.getElementById('input-email').value)
    data.append('message', document.getElementById('input-msg').value)
    data.append('csrfmiddlewaretoken', getCookie('csrftoken'))
    document.getElementById('contact-container').innerHTML = '...'
    let success;
    try {
        const response = await fetch('/polis+contact/', {
            method: 'POST',
            body: data
        })
        let resData = await response.json()
        success = resData.success
    } catch (e) {
        console.log('error', e)
        success = false
    }
    const thanksMsg = success ? 'Thanks for your message 謝謝您的訊息' : 'Failed to send message. Try again later.'
    document.getElementById('contact-container').innerHTML = `<div class="alert">${thanksMsg}</div>`
})