{{ form_start(form, {'action': path('contacts'), 'attr': {'id': 'contact-form', 'class': 'form'}}) }}
    <h3 class="aligncenter">Envoyez nous un message</h3>
    <div class="form-alert w-100" id="form-alert"></div>
    <div class="row">
        <div class="col-md-6">
            <div class="form-group">
                <label>Nom & prénoms <span class="red">*</span></label>
                {{ form_widget(form.nomprenoms) }}
            </div>
        </div>
        <div class="col-md-6">
            <div class="form-group">
                <label>Adresse email <span class="red">*</span></label>
                {{ form_widget(form.email) }}
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
            <div class="form-group">
                <label>Objet du message <span class="red">*</span></label>
                {{ form_widget(form.objet) }}
            </div>
        </div>
        <div class="col-md-6">
            <div class="form-group">
                <label>Numéro de téléphone <span class="red">*</span></label>
                {{ form_widget(form.telephone) }}
            </div>
        </div>
    </div>
    <div class="form-group">
        <label>Message <span class="red">*</span></label>
        {{ form_widget(form.message) }}
    </div>
    <button type="submit" id="btnContactSend" class="btn btn-yellow aligncenter btn-sm">
        Envoyez le message
    </button>
{{ form_end(form) }}

<script>
    //Check members for search form
    let formContact = document.getElementById('contact-form');
    let btnContactSend = document.getElementById('btnContactSend');

    async function sendEmail(e){
        e.preventDefault()
        let nomprenoms = document.getElementById('contacts_nomprenoms')
        let email = document.getElementById('contacts_email')
        let telephone = document.getElementById('contacts_telephone')
        let sujet = document.getElementById('contacts_objet')
        let message = document.getElementById('contacts_message')
        let formAlert = document.getElementById('form-alert');

        if (nomprenoms.value === ''){
            nomprenoms.classList.add('is-invalid')
            formAlert.innerHTML = alertMsg('danger', 'Nom et prénoms obligatoire svp!')
        }else if (email.value === ''){
            nomprenoms.classList.remove('is-invalid')
            email.classList.add('is-invalid')
            formAlert.innerHTML = alertMsg('danger', 'Email obligatoire svp!')
        }else if (telephone.value === ''){
            email.classList.remove('is-invalid')
            telephone.classList.add('is-invalid')
            formAlert.innerHTML = alertMsg('danger', 'Téléphone obligatoire svp!')
        }else if (sujet.value === ''){
            telephone.classList.remove('is-invalid')
            sujet.classList.add('is-invalid')
            formAlert.innerHTML = alertMsg('danger', 'Sujet obligatoire svp!')
        }else if (message.value === ''){
            sujet.classList.remove('is-invalid')
            message.classList.add('is-invalid')
            formAlert.innerHTML = alertMsg('danger', 'Message obligatoire svp!')
        }else{
            message.classList.remove('is-invalid')
            formAlert.innerHTML = ''
            btnContactSend.disabled = true
            btnContactSend.firstChild.data = 'ENVOIS MAIL EN COURS...'
            let url = Routing.generate('contacts', {}, false);
            let formData = new FormData(e.currentTarget)
            const response = await fetch(url, {
                method: 'POST',
                body: formData,
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'Accept': 'application/json'
                }
            })
            if (response.status >= 200 &&  response.status < 300){
                const data = await response.json()
                if (data.action === 'error'){
                    formAlert.innerHTML = alertMsg('danger', data.msg)
                    btnContactSend.firstChild.data = 'Envoyez le message'
                    btnContactSend.disabled = false
                }else {
                    formAlert.innerHTML = alertMsg('success', data.msg)
                    btnContactSend.firstChild.data = 'Envoyez le message'
                    btnContactSend.disabled = false
                    formContact.querySelectorAll("input[type='text'], input[type='email'], textarea").forEach(input => {
                        input.value = ''
                    })
                }
            }else{
                console.error(response)
                btnContactSend.firstChild.data = 'Envoyez le message'
                btnContactSend.disabled = false
            }
        }
    }
    formContact.addEventListener('submit', sendEmail);

    function alertMsg(type, message){
        return `<div class="alert alert-${type} text-center mb-3">${message}</div>`
    }
</script>