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

{% block title %}Emails Transactionnels{% endblock %}

{% block css %}
<style type="text/css">
  .editable + input {
    display: none;
  }
</style>
{% endblock %}

{% block content %}
<h1>Emails Transactionnels</h1>
<div class="accordion" id="transEmailaccordion">
  {% for content in contents %}
    <div class="card">
      <div class="card-header" id="heading{{ loop.index }}">
        <h2 class="mb-0">
          <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapse{{ loop.index }}" aria-expanded="true" aria-controls="collapse{{ loop.index }}">
            {{ content.name|title }}
            <span class="badge invisible"></span>
          </button>
        </h2>
      </div>
      <div id="collapse{{ loop.index }}" class="collapse{{ loop.first ? ' show'}}" aria-labelledby="heading{{ loop.index }}" data-parent="#transEmailaccordion">
        <div class="card-body">
          {% if content.attachments|length > 0 %}
            <form action="{{ path_for('post_content') }}" method="POST">
              <fieldset>
                {#<input type="hidden" name="content-id" value="{{ content.id }}" />#}
                {#<input type="hidden" name="template" value="mail/templates/transactional.mjml.twig" />#}
                <input type="hidden" name="lang" value="1" />
                {% for attachment in content.attachments %}
                  {% set attachmentID = content.name|lower ~ attachment.name|title ~ attachment.type|title %}
                  <div class="form-group">
                    <input type="hidden" name="id[]" value="{{ attachment.id }}" />
                    <label for="{{ attachment.name }}">{{ attachment.name|title }}</label>
                    {% if attachment.type == 'string' %}
                      <input
                        type="{{ attachment.name }}"
                        name="value[]"
                        value="{{ attachment.value }}"
                        class="form-control"
                        id="{{ attachmentID }}"
                        aria-describedby="{{ attachmentID }}" />
                    {% endif %}
                    {% if attachment.type == 'text' %}
                      <textarea
                        name="value[]"
                        value="{{ attachment.value }}"
                        class="form-control"
                        id="{{ attachmentID }}"
                        rows="3">
                      </textarea>
                    {% endif %}
                    {% if attachment.type == 'html' %}
                      <div class="p-2 rounded border bg-white">
                        <div class="editable" data-input="#{{ attachmentID }}">
                          {{ attachment.value|medium_decode|raw }}
                        </div>
                        <input type="text" name="value[]" id="{{ attachmentID }}" />
                      </div>
                    {% endif %}
                    {% if attachment.variables|length > 0 %}
                      <small>
                        <strong>Variables à intégrer :</strong>
                        {{ ('<code>\{\{var:' ~ attachment.variables|split(',')|join(':""\}\}</code>, <code>\{\{var:') ~ ':""\}\}</code>')|raw }}
                      </small>
                    {% endif %}
                  </div>
                {% endfor %}
                <button type="submit" class="btn btn-primary">
                  Sauvegarder
                </button>
                <button id="update-mailjet" data-action="{{ path_for('post_transactional_template') }}" data-id="{{ content.id }}" type="button" class="btn btn-warning">
                  Mettre à jour MailJet
                </button>
              </fieldset>
            </form>
          {% endif %}
        </div>
      </div>
    </div>
  {% endfor %}
</div>
{% endblock %}

{% block js %}
<script type="text/javascript">
  function toggleBadge(e, success) {
    const badge = e.parents('.card').find('.card-header .badge').removeClass('invisible');
    if (success) {
      badge.addClass('badge-success').text('Succès');
    } else {
      badge.addClass('badge-danger').text('Échec');
    }
    badge.delay(5000).fadeOut('slow', function() {
      $(this).addClass('invisible').show().removeClass('badge-danger').removeClass('badge-success');
    });
  }
  let editor;
  const updateMailjetBtn = $('#update-mailjet');
  $(document).ready(function() {
    editor = new MediumEditor('.editable', {
      placeholder: {
        text: '==> Taper le texte ici <==',
        hideOnClick: false
      }, paste: {
        forcePlainText: false,
        cleanPastedHTML: true,
      }
    });
    function editorFillIpt(editor) {
      const _e = $(editor);
      $(_e.data('input')).val(_e.html());
    }
    editor.elements.forEach(editorFillIpt);
    editor.subscribe('editableInput', function (_, editorElement) {
      editorFillIpt(editorElement);
      updateMailjetBtn.prop('disabled', true);
    });
    $('input,select,textarea').keyup(function() {
      updateMailjetBtn.prop('disabled', true);
    });
  });
  $('form').submit(function(event) {
    event.preventDefault();
    event.stopPropagation();
    const form = $(this);
    const formData = form.serializeArray();
    form.find('fieldset').prop('disabled', true);
    $.post(form.attr('action'), formData, function(data) {
      toggleBadge(form, data.success);
      form.find('fieldset').prop('disabled', false);
      updateMailjetBtn.prop('disabled', false);
    });
  });
  updateMailjetBtn.click(function() {
    const btn = $(this);
    $.post(btn.data('action'), {
      id: btn.data('id')
    }, function(data) {
      console.log(data);
      toggleBadge(btn, data.success);
    }).fail(function(err) {
      console.error(err);
    });
  });
</script>
{% endblock %}