{# contact-form.html.twig #}

<div class="contact-section">
    <div class="contact-header">
        <div class="orange-subtitle text-center">{{ 'lang.contact'|trans|upper }}</div>
        <div class="dark-blue-title mb-5">{{ 'lang.writeUs'|trans }}</div>
    </div>

    <div class="contact-form-container">
        <div class="contact-info">
            <div class="info-item">
                <div class="icon-container">
                    <svg width="18" height="25" viewBox="0 0 18 25" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M7.875 23.4375C5.4375 20.3906 0 13.125 0 9C0 4.03125 3.98438 0 9 0C13.9688 0 18 4.03125 18 9C18 13.125 12.5156 20.3906 10.0781 23.4375C9.51562 24.1406 8.4375 24.1406 7.875 23.4375ZM9 12C10.6406 12 12 10.6875 12 9C12 7.35938 10.6406 6 9 6C7.3125 6 6 7.35938 6 9C6 10.6875 7.3125 12 9 12Z" fill="#D589DD"/>
                    </svg>

                </div>
                <div class="info-content">
                    <h3>{{ 'lang.contactAddressHeading'|trans }}</h3>
                    <p>{{ 'lang.companyAddress'|trans }}</p>
                </div>
            </div>

            <div class="info-item">
                <div class="icon-container">
                    <svg width="25" height="26" viewBox="0 0 25 26" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M23.9531 19.1406L22.8281 23.875C22.6875 24.5781 22.125 25.0469 21.4219 25.0469C9.60938 25 0 15.3906 0 3.57812C0 2.875 0.421875 2.3125 1.125 2.17188L5.85938 1.04688C6.51562 0.90625 7.21875 1.28125 7.5 1.89062L9.70312 7C9.9375 7.60938 9.79688 8.3125 9.28125 8.6875L6.75 10.75C8.34375 13.9844 10.9688 16.6094 14.25 18.2031L16.3125 15.6719C16.6875 15.2031 17.3906 15.0156 18 15.25L23.1094 17.4531C23.7188 17.7812 24.0938 18.4844 23.9531 19.1406Z" fill="#D589DD"/>
                    </svg>
                </div>
                <div class="info-content">
                    <h3>{{ 'lang.contactPhoneHeading'|trans }}</h3>
                    <p>{{ 'lang.phoneNumberWithLabel'|trans }}</p>
                </div>
            </div>

            <div class="info-item">
                <div class="icon-container">
                    <svg width="24" height="18" viewBox="0 0 24 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M21.75 0C22.9688 0 24 1.03125 24 2.25C24 3 23.625 3.65625 23.0625 4.07812L12.8906 11.7188C12.3281 12.1406 11.625 12.1406 11.0625 11.7188L0.890625 4.07812C0.328125 3.65625 0 3 0 2.25C0 1.03125 0.984375 0 2.25 0H21.75ZM10.1719 12.9375C11.25 13.7344 12.7031 13.7344 13.7812 12.9375L24 5.25V15C24 16.6875 22.6406 18 21 18H3C1.3125 18 0 16.6875 0 15V5.25L10.1719 12.9375Z" fill="#D589DD"/>
                    </svg>
                </div>
                <div class="info-content">
                    <h3>{{ 'lang.contactEmailHeading'|trans }}</h3>
                    <p>info@cumas365.com</p>
                </div>
            </div>
        </div>

        <form class="contact-form" id="contactForm">
            <div class="form-row">
                <div class="form-group">
                    <input type="text" id="name" name="name" placeholder="{{ 'lang.name'|trans }}" class="form-control" required>
                    <svg class="input-icon" width="16" height="15" viewBox="0 0 16 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M14.9727 1.76172L13.2227 13.1094C13.1953 13.3828 13.0312 13.6289 12.7852 13.7656C12.6484 13.8203 12.5117 13.875 12.3477 13.875C12.2383 13.875 12.1289 13.8477 12.0195 13.793L8.68359 12.3984L7.28906 14.4766C7.17969 14.668 6.98828 14.75 6.79688 14.75C6.49609 14.75 6.25 14.5039 6.25 14.2031V11.5781C6.25 11.3594 6.30469 11.168 6.41406 11.0312L12.375 3.375L4.33594 10.6211L1.51953 9.44531C1.21875 9.30859 1 9.03516 1 8.67969C0.972656 8.29688 1.13672 8.02344 1.4375 7.85938L13.6875 0.886719C13.9609 0.722656 14.3438 0.722656 14.6172 0.914062C14.8906 1.10547 15.0273 1.43359 14.9727 1.76172Z" fill="#D589DD"/>
                    </svg>
                </div>
                <div class="form-group">
                    <input type="email" id="email" name="email" placeholder="{{ 'lang.email'|trans }}" class="form-control" required>
                    <svg style="top: 40%;" class="input-icon" width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M13.9727 11.332L13.3164 14.0938C13.2344 14.5039 12.9062 14.7773 12.4961 14.7773C5.60547 14.75 0 9.14453 0 2.25391C0 1.84375 0.246094 1.51562 0.65625 1.43359L3.41797 0.777344C3.80078 0.695312 4.21094 0.914062 4.375 1.26953L5.66016 4.25C5.79688 4.60547 5.71484 5.01562 5.41406 5.23438L3.9375 6.4375C4.86719 8.32422 6.39844 9.85547 8.3125 10.7852L9.51562 9.30859C9.73438 9.03516 10.1445 8.92578 10.5 9.0625L13.4805 10.3477C13.8359 10.5391 14.0547 10.9492 13.9727 11.332Z" fill="#D589DD"/>
                    </svg>

                </div>
            </div>

            <div class="form-group">
                <input type="text" id="company" name="company" placeholder="{{ 'lang.company'|trans }}" class="form-control" required>
                <svg class="input-icon" width="18" height="25" viewBox="0 0 18 25" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M7.875 23.4375C5.4375 20.3906 0 13.125 0 9C0 4.03125 3.98438 0 9 0C13.9688 0 18 4.03125 18 9C18 13.125 12.5156 20.3906 10.0781 23.4375C9.51562 24.1406 8.4375 24.1406 7.875 23.4375ZM9 12C10.6406 12 12 10.6875 12 9C12 7.35938 10.6406 6 9 6C7.3125 6 6 7.35938 6 9C6 10.6875 7.3125 12 9 12Z" fill="#D589DD"/>
                </svg>
            </div>

            <div class="form-group">
                <textarea id="message" name="message" placeholder="{{ 'lang.message'|trans }}" class="form-control" rows="5" required></textarea>
                <svg style="top: 24px;" class="input-icon" width="24" height="18" viewBox="0 0 24 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M21.75 0C22.9688 0 24 1.03125 24 2.25C24 3 23.625 3.65625 23.0625 4.07812L12.8906 11.7188C12.3281 12.1406 11.625 12.1406 11.0625 11.7188L0.890625 4.07812C0.328125 3.65625 0 3 0 2.25C0 1.03125 0.984375 0 2.25 0H21.75ZM10.1719 12.9375C11.25 13.7344 12.7031 13.7344 13.7812 12.9375L24 5.25V15C24 16.6875 22.6406 18 21 18H3C1.3125 18 0 16.6875 0 15V5.25L10.1719 12.9375Z" fill="#D589DD"/>
                </svg>
            </div>

            <div class="form-group">
                <button type="submit" class="btn-submit">{{ 'lang.sendMessage'|trans }} <i class="icon-arrow-right"></i></button>
            </div>
        </form>
    </div>
</div>

<script>
    const contactFormTranslations = {
        pleaseEnterName: {{ 'lang.pleaseEnterName'|trans|json_encode|raw }},
        pleaseEnterEmail: {{ 'lang.pleaseEnterEmail'|trans|json_encode|raw }},
        pleaseEnterValidEmail: {{ 'lang.pleaseEnterValidEmail'|trans|json_encode|raw }},
        pleaseEnterMessage: {{ 'lang.pleaseEnterMessage'|trans|json_encode|raw }},
        contactSentSuccessfully: {{ 'lang.contactSentSuccessfully'|trans|json_encode|raw }},
        contactErrorTryAgain: {{ 'lang.contactErrorTryAgain'|trans|json_encode|raw }},
        flashWellDone: {{ 'lang.flashWellDone'|trans|json_encode|raw }},
        flashOhSnap: {{ 'lang.flashOhSnap'|trans|json_encode|raw }},
        flashWarning: {{ 'lang.flashWarning'|trans|json_encode|raw }},
        flashHiThere: {{ 'lang.flashHiThere'|trans|json_encode|raw }},
        flashNotice: {{ 'lang.flashNotice'|trans|json_encode|raw }},
        close: {{ 'lang.close'|trans|json_encode|raw }},
    };

    function getFlashHeadline(label) {
        if (label === 'success') {
            return contactFormTranslations.flashWellDone;
        }
        if (label === 'error' || label === 'danger') {
            return contactFormTranslations.flashOhSnap;
        }
        if (label === 'warning') {
            return contactFormTranslations.flashWarning;
        }
        if (label === 'info') {
            return contactFormTranslations.flashHiThere;
        }

        return contactFormTranslations.flashNotice;
    }

    function showFlash(label, message) {
        const flashContainer = document.getElementById('flash-messages');
        if (!flashContainer) {
            console.error('Can\'t find flash');
            return;
        }

        const flashElement = document.createElement('div');
        flashElement.className = `flash-message flash-message--${label}`;
        flashElement.innerHTML = `
                        <svg class="svg-${label}" width="84" height="75" viewBox="0 0 84 75" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <circle cx="20.6075" cy="9.29547" r="9.29547" fill="#004E32"/>
                            <circle cx="80.0986" cy="47.7167" r="3.71819" fill="#004E32"/>
                            <path d="M79.4438 11.0253C82.4971 18.5483 78.8737 27.1221 71.3507 30.1754C70.5208 30.5122 69.6781 30.7678 68.8315 30.9458C64.1204 31.9366 58.8591 33.2841 56.3382 37.3855C53.3951 42.1741 55.0036 48.3927 59.3496 51.9571C68.015 59.0642 75.0268 68.4315 79.3829 79.6187C92.9059 114.348 75.7149 153.464 40.9856 166.987C6.25636 180.51 -32.8599 163.319 -46.3829 128.59C-59.9059 93.8607 -42.7149 54.7445 -7.98562 41.2214C7.18342 35.3148 23.1894 35.2678 37.5341 39.9824C42.7299 41.69 48.6536 40.072 51.5174 35.4125L52.5823 33.68C54.694 30.2441 53.7172 25.8191 52.2006 22.0823C49.1473 14.5592 52.7707 5.98544 60.2937 2.93215C67.8167 -0.121136 76.3906 3.5023 79.4438 11.0253Z" fill="#004E32"/>
                        </svg>

                        <div class="flash-message__icon">
                            ${ label === 'success' ? '✓' : label === 'error' ? '×' : label === 'warning' ? '!' : label === 'info' ? '?' : 'i' }
                        </div>
                        <div class="flash-message__text">
                            <div class="headline">
                                ${getFlashHeadline(label)}
                            </div>
                            <div class="subtext">${ message }</div>
                        </div>
                        <button class="flash-message__close" aria-label="${contactFormTranslations.close}">&times;</button>
                    `;

        flashContainer.appendChild(flashElement);

        var closeBtn = flashElement.querySelector('.flash-message__close');
        if (closeBtn) {
            closeBtn.addEventListener('click', function() {
                flashElement.remove();
            });
        }

        setTimeout(() => {
            if (flashElement.parentNode) {
                flashElement.remove();
            }
        }, 5000);
    }

    document.addEventListener('DOMContentLoaded', function() {
        const contactForm = document.getElementById('contactForm');

        if (contactForm) {
            contactForm.addEventListener('submit', function(e) {
                e.preventDefault();

                const formData = {
                    name: document.getElementById('name').value,
                    email: document.getElementById('email').value,
                    company: document.getElementById('company').value,
                    message: document.getElementById('message').value
                };

                let isValid = true;
                let errorMessage = '';

                if (!formData.name.trim()) {
                    isValid = false;
                    errorMessage += contactFormTranslations.pleaseEnterName + '\n';
                }

                if (!formData.email.trim()) {
                    isValid = false;
                    errorMessage += contactFormTranslations.pleaseEnterEmail + '\n';
                } else if (!isValidEmail(formData.email)) {
                    isValid = false;
                    errorMessage += contactFormTranslations.pleaseEnterValidEmail + '\n';
                }

                if (!formData.message.trim()) {
                    isValid = false;
                    errorMessage += contactFormTranslations.pleaseEnterMessage + '\n';
                }

                if (!isValid) {
                    showFlash('error', errorMessage)

                    return;
                }

                fetch('/api/contact/form', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(formData)
                })
                    .then(response => {
                        if (!response.ok) {
                            throw new Error('Server error: ' + response.status);
                        }
                        return response.json();
                    })
                    .then(data => {
                        contactForm.reset();
                        showFlash('success', contactFormTranslations.contactSentSuccessfully)
                    })
                    .catch(error => {
                        showFlash('error', contactFormTranslations.contactErrorTryAgain)
                    });
            });
        }

        function isValidEmail(email) {
            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            return emailRegex.test(email);
        }
    });
</script>