{# Widget Formulaire de contact #}
<div class="contact-form-widget" style="background: white; padding: 40px; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.08); margin: 20px 0;">
    <div class="contact-form-success" style="display: none; padding: 16px; background: #10b981; color: white; border-radius: 8px; margin-bottom: 20px;">
        <i class="fas fa-check-circle"></i> <span class="success-message-text">{{ successMessage }}</span>
    </div>

    <div class="contact-form-error" style="display: none; padding: 16px; background: #ef4444; color: white; border-radius: 8px; margin-bottom: 20px;">
        <i class="fas fa-exclamation-circle"></i> <span class="error-message-text">Une erreur s'est produite</span>
    </div>

    <form method="post" action="{{ path('widget_contact_submit') }}" class="contact-form-modern" data-success-message="{{ successMessage }}">
        {% if showName %}
        <div style="margin-bottom: 20px;">
            <label style="display: block; margin-bottom: 8px; font-weight: 600; color: var(--color-text, #1e293b);">
                Nom <span style="color: #ef4444;">*</span>
            </label>
            <input
                type="text"
                name="contact[name]"
                required
                placeholder="Votre nom"
                style="width: 100%; padding: 12px 16px; border: 1px solid #cbd5e1; border-radius: 8px; font-size: 15px; transition: all 0.3s ease;">
        </div>
        {% endif %}

        {% if showEmail %}
        <div style="margin-bottom: 20px;">
            <label style="display: block; margin-bottom: 8px; font-weight: 600; color: var(--color-text, #1e293b);">
                Email <span style="color: #ef4444;">*</span>
            </label>
            <input
                type="email"
                name="contact[email]"
                required
                placeholder="votre@email.com"
                style="width: 100%; padding: 12px 16px; border: 1px solid #cbd5e1; border-radius: 8px; font-size: 15px; transition: all 0.3s ease;">
        </div>
        {% endif %}

        {% if showPhone %}
        <div style="margin-bottom: 20px;">
            <label style="display: block; margin-bottom: 8px; font-weight: 600; color: var(--color-text, #1e293b);">
                Téléphone
            </label>
            <input
                type="tel"
                name="contact[phone]"
                placeholder="06 12 34 56 78"
                style="width: 100%; padding: 12px 16px; border: 1px solid #cbd5e1; border-radius: 8px; font-size: 15px; transition: all 0.3s ease;">
        </div>
        {% endif %}

        {% if showSubject %}
        <div style="margin-bottom: 20px;">
            <label style="display: block; margin-bottom: 8px; font-weight: 600; color: var(--color-text, #1e293b);">
                Sujet
            </label>
            <input
                type="text"
                name="contact[subject]"
                placeholder="Objet de votre message"
                style="width: 100%; padding: 12px 16px; border: 1px solid #cbd5e1; border-radius: 8px; font-size: 15px; transition: all 0.3s ease;">
        </div>
        {% endif %}

        {% if showMessage %}
        <div style="margin-bottom: 24px;">
            <label style="display: block; margin-bottom: 8px; font-weight: 600; color: var(--color-text, #1e293b);">
                Message <span style="color: #ef4444;">*</span>
            </label>
            <textarea
                name="contact[content]"
                rows="6"
                required
                placeholder="Votre message..."
                style="width: 100%; padding: 12px 16px; border: 1px solid #cbd5e1; border-radius: 8px; font-size: 15px; resize: vertical; font-family: inherit; transition: all 0.3s ease;"></textarea>
        </div>
        {% endif %}

        {# Protection anti-spam invisible - Honeypot #}
        {% if enableAntiSpam|default(true) %}
        <div style="position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden;">
            <label for="website_url">Site web</label>
            <input type="text" name="contact[website_url]" id="website_url" tabindex="-1" autocomplete="off">
        </div>
        {% endif %}

        {# Protection anti-spam - Checkbox visible (optionnel) #}
        {% if requireCheckbox|default(false) %}
        <div style="margin-bottom: 20px; padding: 16px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px;">
            <label style="display: flex; align-items: center; cursor: pointer; user-select: none;">
                <input
                    type="checkbox"
                    name="contact[not_robot]"
                    required
                    style="width: 20px; height: 20px; margin-right: 12px; cursor: pointer; accent-color: var(--primary-color);">
                <span style="font-weight: 500; color: var(--color-text, #1e293b);">
                    <i class="fas fa-shield-check" style="margin-right: 6px; color: var(--primary-color);"></i>
                    Je ne suis pas un robot
                </span>
            </label>
        </div>
        {% endif %}

        <input type="hidden" name="contact[secureValue]" value="{{ 'now'|date('U') }}">
        <input type="hidden" name="contact[recipientEmail]" value="{{ recipientEmail|default('') }}">
        <input type="hidden" name="contact[sendEmail]" value="{{ sendEmail|default(true) ? '1' : '0' }}">
        <input type="hidden" name="contact[saveToDatabase]" value="{{ saveToDatabase|default(true) ? '1' : '0' }}">
        <input type="hidden" name="contact[form_loaded_at]" value="" class="form-timestamp">
        <input type="hidden" name="contact[js_token]" value="" class="js-token">

        <button
            type="submit"
            style="width: 100%; padding: 14px 24px; background: var(--primary-color); color: var(--primary-contrast); border: none; border-radius: 8px; font-weight: 600; font-size: 16px; cursor: pointer; transition: all 0.3s ease;">
            <i class="fas fa-paper-plane" style="margin-right: 8px;"></i>
            {{ buttonText }}
        </button>
    </form>
</div>

<style>
    .contact-form-modern input:focus,
    .contact-form-modern textarea:focus {
        outline: none;
        border-color: var(--primary-color);
        box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05);
    }

    .contact-form-modern button:hover {
        background: var(--primary-hover);
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    }

    .contact-form-modern button:active {
        transform: translateY(0);
    }
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const forms = document.querySelectorAll('.contact-form-modern');

    forms.forEach(form => {
        // Initialiser les protections anti-spam
        const timestampField = form.querySelector('.form-timestamp');
        const tokenField = form.querySelector('.js-token');

        if (timestampField) {
            // Enregistrer le moment où le formulaire est chargé
            timestampField.value = Math.floor(Date.now() / 1000);
        }

        if (tokenField) {
            // Générer un token JavaScript unique
            const token = btoa(Date.now() + '-' + Math.random().toString(36).substring(2));
            tokenField.value = token;
        }

        form.addEventListener('submit', async function(e) {
            e.preventDefault();

            const widget = form.closest('.contact-form-widget');
            const successDiv = widget.querySelector('.contact-form-success');
            const errorDiv = widget.querySelector('.contact-form-error');
            const submitBtn = form.querySelector('button[type="submit"]');

            // Hide messages
            successDiv.style.display = 'none';
            errorDiv.style.display = 'none';

            // Disable button
            const originalText = submitBtn.innerHTML;
            submitBtn.disabled = true;
            submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin" style="margin-right: 8px;"></i> Envoi en cours...';

            try {
                const formData = new FormData(form);
                const response = await fetch(form.action, {
                    method: 'POST',
                    body: formData
                });

                const result = await response.json();

                if (result.success) {
                    // Show success message
                    const successText = widget.querySelector('.success-message-text');
                    successText.textContent = result.message || form.dataset.successMessage;
                    successDiv.style.display = 'block';

                    // Reset form
                    form.reset();

                    // Scroll to message
                    successDiv.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
                } else {
                    throw new Error(result.message || 'Erreur lors de l\'envoi');
                }
            } catch (error) {
                // Show error message
                const errorText = widget.querySelector('.error-message-text');
                errorText.textContent = error.message || 'Une erreur s\'est produite lors de l\'envoi';
                errorDiv.style.display = 'block';

                // Scroll to error
                errorDiv.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
            } finally {
                // Re-enable button
                submitBtn.disabled = false;
                submitBtn.innerHTML = originalText;
            }
        });
    });
});
</script>