{% extends 'base.html.twig' %}

{% block title %}{{ pageTitle }}{% endblock %}

{% block meta_description %}Contactez {{ member.firstName }} {{ member.lastName }} - Membre professionnel sur {{ site_name }}{% endblock %}

{% set body_class = 'page-with-hero' %}

{% block hero %}
<!-- Hero Section -->
<section class="hero-section">
    <div class="hero-decoration">
        <i class="fas fa-envelope"></i>
    </div>
    
    <div class="container">
        <div class="hero-content">
            <h1 class="hero-title">
                Contacter <span style="color: var(--aef-accent-gold);">{{ member.firstName }}</span>
            </h1>
            <p class="hero-subtitle">
                Envoyez un message personnalisé à {{ member.firstName }} {{ member.lastName }}
            </p>
        </div>
    </div>
</section>
{% endblock %}

{% block body %}
<div class="contact-page">
    <div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8 col-lg-6">
            {# En-tête avec informations du membre #}
                <div class="contact-member-info">
                    <div class="contact-header">
                        <h1>
                        <i class="fas fa-envelope me-2"></i>
                        Contacter {{ member.firstName }}
                    </h1>
                </div>
                    <div class="member-preview">
                    <div class="d-flex align-items-center mb-3">
                        {% if member.profileImage %}
                            <img src="{{ asset('uploads/members/' ~ member.profileImage) }}" 
                                 alt="{{ member.firstName }}" 
                                     class="member-avatar-small me-3">
                        {% else %}
                                <div class="avatar-placeholder-small me-3">
                                <i class="fas fa-user text-white"></i>
                            </div>
                        {% endif %}
                            <div class="member-details">
                                <h5>{{ member.firstName }} {{ member.lastName }}</h5>
                            {% if member.company %}
                                    <p class="text-muted">{{ member.company }}</p>
                            {% endif %}
                            {% if member.city %}
                                <small class="text-muted">
                                    <i class="fas fa-map-marker-alt me-1"></i>
                                    {{ member.city }}{% if member.geoDepartement %}, {{ member.geoDepartement.name }}{% endif %}
                                </small>
                            {% endif %}
                        </div>
                    </div>
                    
                        <div class="contact-info-notice">
                        <i class="fas fa-info-circle me-2"></i>
                        <strong>Informations importantes :</strong>
                        <ul class="mb-0 mt-2">
                            <li>Votre message sera transmis directement à {{ member.firstName }}</li>
                            <li>Votre adresse email sera visible pour la réponse</li>
                            <li>Soyez courtois et précis dans votre demande</li>
                            <li>Les messages sont archivés pour le suivi des échanges</li>
                        </ul>
                    </div>
                </div>
            </div>

            {# Formulaire de contact #}
                <div class="contact-form-card">
                    <div class="contact-form-header">
                        <h2>Votre message</h2>
                </div>
                    <div class="contact-form-body">
                    {{ form_start(form, {'attr': {'novalidate': 'novalidate', 'class': 'needs-validation', 'id': 'member_contact_form'}}) }}
                    
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            {{ form_label(form.senderName, 'Votre nom', {'label_attr': {'class': 'form-label required'}}) }}
                            {{ form_widget(form.senderName, {'attr': {'class': 'form-control', 'placeholder': 'Ex: Jean Dupont', 'required': true}}) }}
                            {{ form_errors(form.senderName) }}
                        </div>
                        <div class="col-md-6 mb-3">
                            {{ form_label(form.senderEmail, 'Votre email', {'label_attr': {'class': 'form-label required'}}) }}
                            {{ form_widget(form.senderEmail, {'attr': {'class': 'form-control', 'placeholder': 'votre@email.com', 'required': true}}) }}
                            {{ form_errors(form.senderEmail) }}
                        </div>
                    </div>

                    <div class="mb-3">
                        {{ form_label(form.subject, 'Sujet', {'label_attr': {'class': 'form-label required'}}) }}
                        {{ form_widget(form.subject, {'attr': {'class': 'form-control', 'placeholder': 'Ex: Demande d\'information sur...', 'required': true}}) }}
                        {{ form_errors(form.subject) }}
                    </div>

                    <div class="mb-3">
                        {{ form_label(form.content, 'Votre message', {'label_attr': {'class': 'form-label required'}}) }}
                            {{ form_widget(form.content, {'attr': {'class': 'form-control contact-textarea', 'rows': 6, 'placeholder': 'Décrivez précisément votre demande...', 'required': true}}) }}
                        {{ form_errors(form.content) }}
                        <div class="form-text">
                            <i class="fas fa-lightbulb me-1"></i>
                            <strong>Conseil :</strong> Plus votre message sera détaillé et précis, plus vous obtiendrez une réponse pertinente.
                        </div>
                    </div>

                    {# Champs anti-spam cachés #}
                    {{ form_widget(form.website, {'attr': {'class': 'd-none'}}) }}
                    {{ form_widget(form.formStartTime) }}

                    <div class="d-grid gap-2">
                            <button type="submit" class="btn btn-primary btn-lg contact-submit-btn">
                            <i class="fas fa-paper-plane me-2"></i>
                            Envoyer le message
                        </button>
                    </div>

                    {{ form_end(form) }}
                </div>
            </div>

            {# Liens de retour #}
                <div class="contact-back-link">
                    {% if member.slug %}
                        <a href="{{ path('app_store_show', {'slug': member.slug, 'locale': 'fr'}) }}" class="btn btn-outline-secondary">
                            <i class="fas fa-arrow-left me-2"></i>
                            Retour au profil
                        </a>
                    {% else %}
                        <a href="{{ path('app_members') }}" class="btn btn-outline-secondary">
                            <i class="fas fa-arrow-left me-2"></i>
                            Retour aux membres
                        </a>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>

{# JavaScript pour la validation côté client #}
{% block javascripts %}
    {{ parent() }}
    
    {{ recaptcha_script() }}
    {{ recaptcha_form_script('contact', 'member_contact_form') }}
    
    <script>
    document.addEventListener('DOMContentLoaded', function() {
        // Compteur de caractères pour le message
        const messageTextarea = document.querySelector('#member_contact_type_content');
        if (messageTextarea) {
            const createCounter = () => {
                const counter = document.createElement('div');
                counter.className = 'char-counter';
                counter.innerHTML = '<span class="char-count">0</span> / 2000 caractères';
                messageTextarea.parentNode.appendChild(counter);
                
                const updateCounter = () => {
                    const count = messageTextarea.value.length;
                    const span = counter.querySelector('.char-count');
                    span.textContent = count;
                    
                    counter.className = 'char-counter';
                    if (count > 1800) {
                        counter.className = 'char-counter warning';
                    }
                    if (count > 1950) {
                        counter.className = 'char-counter danger';
                    }
                };
                
                messageTextarea.addEventListener('input', updateCounter);
                updateCounter();
            };
            
            createCounter();
        }

        // Auto-resize du textarea
        if (messageTextarea) {
            messageTextarea.addEventListener('input', function() {
                this.style.height = 'auto';
                this.style.height = (this.scrollHeight) + 'px';
            });
        }
    });
    </script>
{% endblock %}
{% endblock %}