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

{% block title %}Contact{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    {{ encore_entry_link_tags('ckeditor5Fwk') }}
{% endblock %}

{% block body %}
    <section class="form-container">
        {% include 'utils/file.ariane.html.twig' %} 
        
    	<section id="contact-container">
    		<h4>Nouveau courrier</h4>
            <hr />
            
            {{ form_start(form) }}
                <div class="row">
                    <div class="col-sm-12">
                        {{ form_errors(form) }}
                    </div>                	
                </div>
                <br />
                <div class="row">
                    <div class="col-sm-12">
                        <strong><label>Destinataire</label></strong> <br/>
                        {{ form_widget(form.liste) }}
                    </div>
                </div> <br />
                
                <div class="row">
                    <div class="col-sm-12">
                        <strong><label>Objet du message</label></strong> <br/>
                        {{ form_widget(form.objet) }}
                        <small class="text-danger" id="objetErr"></small>
                    </div>
                </div> <br />
                
                <div class="row">
                    <div class="col-sm-12">
                        <strong><label>Contenu du message</label></strong> <br/>
                        {{ form_widget(form.message) }}
                    </div>
                    {{ form_row(form._token) }}
                </div> <br />

                <div class="row">
                    <div class="col-sm-12">
                        {{ form_widget(form.immediatly) }}  <strong style="margin-left:10px;">{{ form_label(form.immediatly) }}</strong>
                    </div>
                </div> <br />

                <div class="row">
                    <div class="col-sm-12">
                        <strong><label>Pièces jointes au message</label></strong> <br/>
                        {{ form_widget(form.files) }} 
                    </div>
                </div> <br />
                
                <br />
                <hr />
                <section style="width:100%;text-align:right;padding-right:10px;">
                    <a href="#0" id="listeSubmit" class="btn btn-primary"><i class="bi bi-cursor-fill"></i> Envoyer</a>
                </section>
            {{ form_end(form) }}
            <br /><br/>
    	</section>
    </section>

    <!-- Modal -->
    <div class="modal fade" id="confirmModal" tabindex="-1" aria-labelledby="confirmModalLabel" aria-hidden="true" style="font-size:13pt">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="confirmModalLabel">Confirmation</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body" id="confirmContent"></div>
                <div class="modal-footer w-100">
                    <div class="d-flex w-100">
                        <div class="p-2 flex-grow-1"><button type="button" class="btn btn-primary" data-bs-dismiss="modal">Non</button></div>
                        <div class="p-2"><button type="button" class="btn btn-danger" id="confirmSend"><i class="bi bi-cursor-fill"></i> Oui</button></div>
                    </div>                    
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script type="text/javascript">
        $( document ).ready(function() {
            var listeFormField = document.getElementById('form_liste');
            var objetFormField = document.getElementById('form_objet');
            var objetFormErrField = document.getElementById('objetErr');
            const myConfirmModalComp = document.getElementById('confirmModal');
            const myConfirmModalBody = document.getElementById('confirmContent');
            const myConfirmModal = new bootstrap.Modal(myConfirmModalComp, []);
            

            $("#listeSubmit").click(function(event){
                event.preventDefault();
                if(objetFormField.value.trim() != ""){
                    objetFormErrField.innerHTML = "";
                    var message = "Etes vous certain(e) de vouloir diffuser le message à ";
                    var value = listeFormField.options[listeFormField.selectedIndex].value;
                    if(value){
                        var text = listeFormField.options[listeFormField.selectedIndex].text;
                        message = message + "la liste de diffusion <strong>" + text +"</strong> ?";
                    }else {
                        message = message + " <strong>toutes les adresses actives du référentiel</strong> ?";
                    }

                    myConfirmModalBody.innerHTML = "<p>" + message + "</p>";
                    myConfirmModal.show();
                } else {
                    objetFormErrField.innerHTML = "Veuillez renseigner l'objet du mail";
                }
                
            });

            $("#confirmSend").click(function(event){
                event.preventDefault();
                var form = document.forms["form"];
                if(form){
                    form.submit();
                }
            });
        });

        ClassicEditor
        .create( document.querySelector( '.editor' ) )
        .catch( error => {
            console.error( error );
        } );
    </script>
{% endblock %}