{#<script src="js/ckeditor/ckeditor.js"></script>#}

<form id="form-edit-annonce" data-moussabind="moussajax.moussaPublicForm"
      data-messageTarget="box-form-contat"
      data-url="postAnnonce"
      data-entity="About" class="PPF">

    <input type="hidden" name="aboutId" id="aboutId" value="{{ about.aboutId }}"/>
    
    <!-- CHAMPS ANTI-SPAM CACHÉS -->
    <div style="position: absolute; left: -9999px; top: -9999px;">
        <input type="text" name="url_piege" id="url_piege" tabindex="-1" autocomplete="new-password"/>
    </div>
    <input type="hidden" name="form_start_time" id="form-start-time" value=""/>
    <input type="hidden" name="math_expected" id="math-expected" value=""/>
    <input type="hidden" name="simple_token" id="simple-token" value=""/>
    <input type="hidden" name="client_info" id="client-info" value=""/>

    <div class="base-box row" id="box-form-contat">

        <br/>

        {% include 'Input/hidden.twig'  with {'idName':'type', 'value':'coordos' } %}

        <div class="col-md-6">
            {% include 'Input/simple.twig'  with {'type':'text', 'class': 'form-group required', 'label': 'Nom', 'idName':'nom' } %}
            {% include 'Input/simple.twig'  with {'type':'text', 'class': 'form-group required', 'label': 'Prénom', 'idName':'prenom' } %}

            {% set foo = {'Photo': "Photo", 'Cinéma': "Cinéma", 'son': 'Son'} %}
            {% include 'Input/selectArrayCommon.twig'  with {'label':'Promo', 'class': 'form-group', 'idName':'promo', 'value':'', 'array':foo } %}

            {% include 'Input/simple.twig'  with {'type':'text', 'class': 'form-group', 'label': 'Année', 'idName':'annee' } %}
            {% include 'Input/simple.twig'  with {'type':'text', 'class': 'form-group required', 'label': 'Tel', 'placeholder': 'Tel (réservé au strict usage administratif)', 'idName':'telephone' } %}
            {% include 'Input/simple.twig'  with {'type':'text', 'class': 'form-group required', 'label': 'Email', 'idName':'email' } %}

            {% set ouiNon = {'Oui': "Oui", 'Non': "Non"} %}
            {% include 'Input/radioLine.twig'  with {'type':'text', 'class': 'form-group', 'label': 'J\'autorise l\'affichage de mon email sur le site', 'idName':'autorisation','list':ouiNon  } %}
            {% include 'Input/radioLine.twig'  with {'type':'text', 'class': 'form-group', 'label': 'Je souhaite recevoir la newsletter des ALL ', 'idName':'inscription_newsletter','list':ouiNon  } %}

            <br/>
            <div style="margin-left:18%;padding-right:8%;font-size: 10px;line-height: unset;font-weight: 600;">Si vous
                souhaitez être localisé sur la carte du réseau des ALL vous pouvez renseigner votre adresse en indiquant
                à minima le code postal et la ville, et pour plus de précisions votre adresse complète
            </div>
            <div style=" font-style:italic;margin-left:18%;padding-right:8%;font-size: 10px;line-height: unset; ">Cette
                dernière apparaîtra uniquement sur la carte et non en toute lettre dans l'annuaire
            </div>

            {% include 'Input/simple.twig'  with {'type':'text', 'class': 'form-group', 'label': 'Adresse', 'idName':'adresse'} %}
            {% include 'Input/simple.twig'  with {'type':'text', 'class': 'form-group', 'label': 'Code postal', 'idName':'code_postal'} %}
            {% include 'Input/simple.twig'  with {'type':'text', 'class': 'form-group', 'label': 'Ville', 'idName':'ville'} %}

        </div>
        <div class="col-md-6">
            {% include 'Input/simple.twig'  with {'type':'text', 'class': 'form-group', 'label': 'Nom site web', 'idName':'nom_site_web'} %}
            {% include 'Input/simple.twig'  with {'type':'text', 'class': 'form-group', 'label': 'Url site web', 'idName':'url_site_web'} %}
            {% include 'Input/simple.twig'  with {'type':'text', 'class': 'form-group required', 'label': 'Poste actuel', 'idName':'poste_actuel'} %}
            {% include 'Input/simple.twig'  with {'type':'text', 'class': 'form-group', 'label': 'Email pro', 'idName':'email_pro'} %}
            {% include 'Input/simple.twig'  with {'type':'text', 'class': 'form-group', 'label': 'Tel pro', 'idName':'tel_pro'} %}

            {% include 'Input/textarea.twig'  with {'type':'text', 'class': 'form-group', 'label': 'Parcours professionnel', 'idName':'bio', 'value':about.bio } %}

            <!-- QUESTION ANTI-SPAM VISIBLE -->
            <div class="form-group required" style="background-color: #f8f9fa; padding: 15px; border-radius: 5px; border: 2px solid #007bff;">
                <label for="math-answer" style="font-weight: bold; color: #007bff;">
                    <span class="glyphicon glyphicon-shield" aria-hidden="true"></span>
                    Question de sécurité (anti-spam) :
                </label>
                <p id="math-question" style="font-size: 16px; font-weight: bold; color: #333; margin: 10px 0;">Chargement de la question...</p>
                <input type="number" 
                       name="math_answer" 
                       id="math-answer" 
                       class="form-control required" 
                       placeholder="Votre réponse" 
                       min="2" 
                       max="18" 
                       style="width: 100px; display: inline-block;"
                       required/>
                <small style="color: #666; display: block; margin-top: 5px;">
                    Cette question nous aide à lutter contre les robots spammeurs
                </small>
                <!-- Boutons de debug temporaires -->
                <button type="button" onclick="testFunction()" style="margin: 5px; background: red; color: white; border: none; padding: 5px 10px;">
                    TEST JavaScript
                </button>
                <button type="button" onclick="initAntiSpam()" style="margin: 5px; background: orange; color: white; border: none; padding: 5px 10px;">
                    Générer question
                </button>
            </div>

        </div>

        <div class="col-md-8" style="font-weight: 600;color:grey;font-size: 10px;line-height: unset;margin-top:20px;">
            Vous pouvez à tout moment modifier vos informations en adressant un email à 
            all@ancienslouislumiere.org.<br/>
            Pour plus d'informations sur notre politique et le traitement de vos données, consultez nos <a
                    href="/mentions-legales">mentions légales.</a>
        </div>

        <div class="col-md-4">
            <div style="text-align: right;">

                <button type="button" id="saveContact" data-ajax-form="form-edit-annonce" style="display: none">
                    <span class="glyphicon glyphicon-envelope" aria-hidden="true"></span>
                </button>

                <button type="button" id="saveverif"
                        class="btn btn-default btn-warning"
                        aria-label="Left Align">
                    <span class="glyphicon glyphicon-envelope" aria-hidden="true"></span> Envoyer
                </button>

                <br/>
                <br/>
            </div>
        </div>

    </div>

</form>

{{ R.js('mousslib/frankenstein') }}
{{ R.js('helpers') }}
{{ R.js('vendor/*') }}
{{ R.js('moussajax/moussaPublicForm') }}

<!-- SCRIPT ANTI-SPAM - PLACÉ À LA FIN POUR ÉVITER LES CONFLITS -->
<script type="text/javascript">
// TEST: Est-ce que ce script s'exécute ?
console.log('=== SCRIPT ANTI-SPAM CHARGÉ ===');

// Variables globales
var formStartTime, mathNum1, mathNum2, mathResult;

// Fonction simple de test
function testFunction() {
    alert('Test réussi ! Le JavaScript fonctionne.');
    console.log('Fonction de test exécutée');
}

// Fonction d'initialisation anti-spam
function initAntiSpam() {
    try {
        console.log('initAntiSpam appelée');
        formStartTime = Date.now();
        mathNum1 = Math.floor(Math.random() * 9) + 1;
        mathNum2 = Math.floor(Math.random() * 9) + 1;
        mathResult = mathNum1 + mathNum2;
        
        var questionElement = document.getElementById('math-question');
        if (questionElement) {
            questionElement.textContent = 'Combien font ' + mathNum1 + ' + ' + mathNum2 + ' ?';
            console.log('Question affichée: ' + mathNum1 + ' + ' + mathNum2 + ' = ' + mathResult);
        } else {
            console.error('Élément #math-question non trouvé');
        }
        
        var expectedElement = document.getElementById('math-expected');
        if (expectedElement) {
            expectedElement.value = mathResult;
        }
        
        var timeElement = document.getElementById('form-start-time');
        if (timeElement) {
            timeElement.value = formStartTime;
        }
        
        return true;
    } catch (error) {
        console.error('Erreur dans initAntiSpam:', error);
        return false;
    }
}

// Rendre les fonctions accessibles globalement
window.testFunction = testFunction;
window.initAntiSpam = initAntiSpam;

// Fonction de validation du formulaire
function validateForm() {
    console.log('=== DÉBUT VALIDATION ===');
    
    // Vérification honeypot
    var honeypot = document.getElementById('url_piege');
    if (honeypot && honeypot.value !== '') {
        alert('Erreur de validation');
        return false;
    }
    
    // Vérification délai (2 secondes minimum)
    var startTime = document.getElementById('form-start-time');
    if (startTime) {
        var timeDiff = (Date.now() - parseInt(startTime.value)) / 1000;
        console.log('Temps écoulé:', timeDiff, 'secondes');
        if (timeDiff < 2) {
            alert('Veuillez patienter quelques secondes avant de soumettre.');
            return false;
        }
    }
    
    // Vérification mathématique
    var userAnswer = document.getElementById('math-answer');
    var expectedAnswer = document.getElementById('math-expected');
    
    if (!userAnswer || userAnswer.value === '') {
        alert('Veuillez répondre à la question de sécurité.');
        if (userAnswer) userAnswer.focus();
        return false;
    }
    
    var userVal = parseInt(userAnswer.value);
    var expectedVal = parseInt(expectedAnswer.value);
    
    console.log('Réponse utilisateur:', userVal, '/ Attendue:', expectedVal);
    
    if (isNaN(userVal) || userVal !== expectedVal) {
        alert('Réponse incorrecte. Attendue: ' + expectedVal);
        userAnswer.focus();
        return false;
    }
    
    // Vérification champs requis (jQuery)
    if (typeof jQuery !== 'undefined') {
        var missingFields = false;
        $('#form-edit-annonce .required').each(function() {
            if ($(this).val() === '') {
                $(this).css('background-color', '#ff9999');
                missingFields = true;
            } else {
                $(this).css('background-color', '');
            }
        });
        
        if (missingFields) {
            alert('Veuillez remplir tous les champs obligatoires.');
            return false;
        }
    }
    
    console.log('=== VALIDATION RÉUSSIE ===');
    return true;
}

window.validateForm = validateForm;

// Attendre que jQuery soit chargé
if (typeof jQuery !== 'undefined') {
    console.log('jQuery disponible');
    $(document).ready(function() {
        console.log('Document ready avec jQuery');
        
        // Événement pour l'ouverture de la modale
        $(document).on('shown.bs.modal', '#exampleModal', function() {
            console.log('Modale ouverte - initialisation automatique');
            initAntiSpam();
        });
        
        // REMPLACER l'événement click du bouton saveverif
        $(document).off('click', '#saveverif').on('click', '#saveverif', function(e) {
            console.log('Click intercepté sur #saveverif');
            e.preventDefault(); // Bloquer l'action par défaut
            
            // Valider avec notre système anti-spam
            if (validateForm()) {
                console.log('Validation réussie - déclenchement saveContact');
                // Si validation OK, déclencher la soumission originale
                if ($('#saveContact').length > 0) {
                    $('#saveContact').trigger('click');
                } else {
                    // Fallback
                    $('#form-edit-annonce').submit();
                }
            } else {
                console.log('Validation échouée - soumission bloquée');
            }
        });
    });
} else {
    console.error('jQuery non disponible');
}
</script>