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

{% block css %}
    <link rel="stylesheet" href="/plugins/summernote/summernote-bs4.min.css">
{% endblock %}

{% block title %}Gérer vos modèles d'emails{% endblock %}

{% block body %}

<div class="row">

    {% for message in app.flashes('success-modeles-email') %}
        <div class="alert alert-success">
            <i class="icon fas fa-check"></i> {{ message }}
        </div>
    {% endfor %}

    <form action="{{ path('app_modele_email') }}" method="post">
        {% for modele in modeles %}
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">{{ modele.titre }}</h3>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-sm-8">
                            <textarea class="form-control" name="modele[{{ modele.id }}][content]" id="summernote-{{ modele.id }}" cols="30" rows="10">{% if user_modeles[modele.id]|default %}{{ user_modeles[modele.id] }}{% else %}{{ modele.getContent() }}{% endif %}</textarea>
                        </div>
                        <div class="col-sm-4">
                            <div class="callout callout-info">
                                {{ modele.getTextHelp()|raw }}
                            </div>
                            <div class="form-wrapper">
                                <p>Vous pouvez tester le rendu de cet e-mail en envoyant un email de test à l'adresse désirée. Les données utilisées seront génériques.</p>
                                <div class="input-group pr-sm-5 ">
                                    <input type="email" name="email_test[adresse]" id="adresse-test-{{ modele.id }}" class="form-control" placeholder="adresse@exemple.com">
                                    <div class="input-group-append">
                                        <a class="btn btn-primary btn-test-email" data-modele-id="{{ modele.id }}">Tester l'envoi</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-footer">
                    <input type="submit" class="btn btn-primary" value="Enregistrer">
                </div>
            </div>
        {% endfor %}
        <input type="hidden" name="_token" value="{{ csrf_token('modeles_email') }}">
    </form>

</div>

{% endblock %}

{% block javascript %}
<script src="/plugins/summernote/summernote-bs4.min.js"></script>
<script>
{% for modele in modeles %}
$('#summernote-{{ modele.id }}').summernote({
    toolbar: [
        ['style', ['style']],
        ['font', ['bold', 'underline', 'clear']],
        ['color', ['color']],
        ['para', ['ul', 'ol', 'paragraph']],
        ['table', ['table']],
        ['insert', ['link', 'picture', 'video']],
        ['view', ['fullscreen', 'codeview', 'help']],
    ]
});
{% endfor %}

$('.btn-test-email').on('click', function(e) {
    e.preventDefault();
    let $this = $(this);

    $.ajax({
        url:'/modeles/'+$(this).data('modele-id')+'/tester',
        method:'POST',
        data:{
            'adresse':$('#adresse-test-'+$(this).data('modele-id')).val()
        },
        success:function() {
            $this.closest('.form-wrapper').append('<div class="alert alert-success alert-dismissible mt-2"><i class="icon fas fa-check"></i> Test envoyé</div>');
        },
        error:function(data) {
            $this.closest('.form-wrapper').append('<div class="alert alert-danger alert-dismissible mt-2"><i class="icon fas fa-exclamation-triangle"></i> '+data.responseJSON.error+'</div>')
        }
    });

    return false;
});

</script>
{% endblock %}