{% import "macros/media.macro.twig" as media %}
{% extends 'layout.html.twig' %}

{% block title %}Newsletter{% endblock %}

{% block css %}
  <style type="text/css">
    table tbody tr td img {
      width: 20vh;
    }
    .card {
      height: 100%;
    }
    #preview {
      width: 100%;
      height: 100%;
    }
  </style>
{% endblock %}

{% block fluid_content %}
  <h1>Newsletter</h1>
  <form id="import-movies" action="{{ path_for('post_movies_week_WEEK_ID', {week: KINOW_WEEK_PLACEHOLDER}) }}" method="POST">
    <div class="form-group">
      <div class="input-group mb-3">
        <input type="number" min="1" value="{{ currentWeek }}" class="form-control" id="week-form-week" name="week" placeholder="Semaine à importer">
        <input type="number" min="1" value="{{ currentWeek - 7 }}" class="form-control" id="week-form-last-week" name="last-week" placeholder="Semaine à importer">
        <div class="input-group-append">
          <button type="submit" class="btn btn-primary">Importer</button>
        </div>
      </div>
    </div>
    <div class="alert mt-3 invisible"></div>
  </form>
  <form id="send-newsletter" method="POST" action="{{ path_for('post_mail_newsletter') }}" class="invisible">
    {% for i in ['movies', 'last-movies'] %}
      <h2>{{ (i == 'movies') ? 'Films de la semaine' : 'Films de la dernière semaine'}}</h2>
      <table id="pick-{{ i }}" class="table table-striped sorted-table-{{ i }}">
        <thead class="thead-dark">
          <tr>
            <th scope="col">#</th>
            <th scope="col">Titre</th>
            <th scope="col"></th>
            <th scope="col">Publier ?</th>
          </tr>
        </thead>
        <tbody>
          <tr class="clone">
            <td></td>
            <td></td>
            <td>
              <a href="" data-toggle="lightbox" data-gallery="{{ i }}">
                <img src="" />
              </a>
            </td>
            <td>
              <a href="javascript:void(0);" class="btn btn-light up">
                ↑
              </a>
              <a href="javascript:void(0);" class="btn btn-light down">
                ↓
              </a>
              {#<div class="btn-group-toggle" data-toggle="buttons">#}
                <label class="btn btn-primary active">
                  <input type="checkbox" name="{{ i }}[]" value="" checked="true" autocomplete="off" /> Publier
                </label>
              {#</div>#}
            </td>
          </tr>
        </tbody>
      </table>
    {% endfor %}
    <hr />
    <h2>Contenu</h2>
    <div class="grid">
      <div class="row py-2">
        <div class="col-sm">
          <div class="row">
            <!-- DEBUT GENERAL -->
            <div class="col-sm">
              <div class="card">
                <div class="card-body">
                  <h5 class="card-title">Général</h5>
                  <div class="form-group">
                    <label for="mail-type">Type</label><br />
                    <select id="mail-type" class="custom-select" name="mail-type">
                      <option value="Newsletter" selected>Newsletter</option>
                      <option value="Escale">Escale</option>
                      <option value="FCSF">FCSF</option>
                      <option value="Autre">Autre</option>
                    </select>
                  </div>
                  <div class="form-group">
                    <label for="mail-title">Titre</label>
                    <input id="mail-title" type="text" name="mail-title" value="Cette semaine sur Tënk" maxlength="27" class="form-control" aria-describedby="mail-title" />
                  </div>
                  <div class="form-group">
                    <label for="print-dots">Afficher les ●●</label>
                    <select name="print-dots" class="custom-select">
                      <option selected value="1">Oui</option>
                      <option value="0">Non</option>
                    </select>
                  </div>
                  <div class="form-group">
                    <label for="print-logo">Afficher le logo</label><br />
                    <select class="custom-select" name="print-logo">
                      <option value="tenk" selected>Tënk</option>
                      <option value="fcsf">Tënk + FCSF</option>
                      <option value="none">Aucun</option>
                    </select>
                  </div>
                  <div class="form-group">
                    <label for="main-color">Couleur Dominante</label>
                    <input type="color" name="main-color" value="#018f90" class="form-control" aria-describedby="main-color" placeholder="Code Hexadecimal" />
                  </div>
                </div>
              </div>
            </div>
            <!-- FIN GENERAL -->
            <!-- DEBUT EDITO -->
            <div class="col-sm">
              <div class="card">
                <div class="card-body">
                  <h5 class="card-title">Edito</h5>
                  <div class="form-group">
                    <label for="news-img">Texte</label>
                    <div id="introduction-editor" class="editable rounded border p-2 bg-white"></div>
                    <input type="text" name="introduction" data-editor="#introduction-editor" hidden />
                  </div>
                  <div class="form-group">
                    <label for="intro-btn-link">Lien du bouton</label>
                    <input type="url" name="intro-btn-link" class="form-control" aria-describedby="intro-btn-link" placeholder="URL du Lien" />
                  </div>
                  <div class="form-group">
                    <label for="intro-btn-lbl">Intitulé du bouton</label>
                    <input type="text" name="intro-btn-lbl" value="Lire la Suite" class="form-control" aria-describedby="intro-btn-lbl" placeholder="URL du Lien" />
                  </div>
                 <div class="form-group">
                    <label for="lang">Langue</label><br />
                    <select class="custom-select" name="lang">
                      <option value="1" selected>FR</option>
                      <option value="2">EN</option>
                    </select>
                  </div>
                </div>
              </div>
            </div>
            <!-- FIN EDITO -->
          </div>
          <div class="row py-2">
            <!-- DEBUT SEMAINE -->
            <div class="col-sm">
              <div class="card">
                <div class="card-body">
                  <h5 class="card-title">Films de la semaine</h5>
                  <div class="form-group">
                    <label for="movies-activate">Activer</label>
                    <select name="movies-activate" class="custom-select">
                      <option selected value="1">Oui</option>
                      <option value="0">Non</option>
                    </select>
                  </div>
                  <div class="form-group">
                    <label for="movies-arrangement">Disposition</label>
                    <select name="movies-arrangement" class="custom-select">
                      <option value="1">1 par Ligne</option>
                      <option selected value="2">2 par Ligne</option>
                      <option value="3">3 par Ligne</option>
                    </select>
                  </div>
                  <div class="form-group">
                    <label for="movies-label">Intitulé</label>
                    <select id="movies-label" name="movies-label" class="custom-select">
                      <option value="classic">Sur Tënk dès aujourd'hui</option>
                      <option value="escale">Les films de l'Escale</option>
                      <option value="fcsf">Organisez une projection publique [...]</option>
                    </select>
                  </div>
                </div>
              </div>
            </div>
            <!-- FIN SEMAINE -->
            <!-- DEBUT DERNIERE SEMAINE -->
            <div class="col-sm">
              <div class="card">
                <div class="card-body">
                  <h5 class="card-title">Films de la semaine dernière</h5>
                  <div class="form-group">
                    <label for="last-movies-activate">Activer</label>
                    <select name="last-movies-activate" class="custom-select">
                      <option selected value="1">Oui</option>
                      <option value="0">Non</option>
                    </select>
                  </div>
                  <div class="form-group">
                    <label for="last-movies-arrangement">Disposition</label>
                    <select name="last-movies-arrangement" class="custom-select">
                      <option value="1">1 par Ligne</option>
                      <option value="2">2 par Ligne</option>
                      <option selected value="3">3 par Ligne</option>
                    </select>
                  </div>
                  <div class="form-group">
                    <label for="last-movies-label">Intitulé</label>
                    <select id="last-movies-label" name="last-movies-label" class="custom-select">
                      <option value="classic">Dernières séances</option>
                      <option value="fcsf">On vous conseille</option>
                    </select>
                  </div>
                </div>
              </div>
            </div>
            <!-- FIN DERNIERE SEMAINE -->
          </div>
          <div class="row py-2">
          <!-- DEBUT COUVERTURE -->
          <div class="col-sm">
            <div class="card">
              <div class="card-body">
                <h5 class="card-title">Couverture</h5>
                <div class="form-group">
                  <label for="pick-cover">Image (film de la semaine)</label>
                  <select id="pick-cover" name="cover" class="custom-select">
                    <option value="" class="clone"></option>
                    <option value="">Aucune</option>
                  </select>
                </div>
                <div class="form-group">
                  <label for="custom-cover">Image (personnalisée)</label>
                  {#<input type="url" name="escale-img" class="form-control" aria-describedby="escale-img" placeholder="https://www.tenk.fr/p/lien-de-l-escale" />#}
                  {{ media.select_list('custom-cover', 'https://medias.tenk.fr/newsletter/', true) }}
                </div>
                <div class="form-group">
                  <label for="custom-cover-link">Lien de l'image (personnalisée)</label>
                  <input type="url" name="custom-cover-link" class="form-control" aria-describedby="custom-cover-link" placeholder="URL du Lien" />
                </div>
                <div class="form-group">
                  <label for="cover-border">Bordure sous l'image</label>
                  <select id="cover-border" name="cover-border" disabled class="custom-select">
                    <option value="0" selected>Non</option>
                    <option value="1">Oui</option>
                  </select>
                </div>
              </div>
            </div>
          </div>
          <!-- FIN COUVERTURE -->
            <!-- DEBUT ACTU -->
            <div class="col-sm">
              <div class="card">
                <div class="card-body">
                  <h5 class="card-title">Actualité</h5>
                  <div class="form-group">
                    <label for="news-img">Image</label>
                    {{ media.select_list('news-img', 'https://medias.tenk.fr/newsletter/', true) }}
                    {#<input type="text" name="news-img" class="form-control" aria-describedby="news-img" placeholder="URL de l'image" />#}
                  </div>
                  <div class="form-group">
                    <label for="news-link">Lien</label>
                    <input type="text" name="news-link" class="form-control" aria-describedby="news-link" placeholder="URL du Lien" />
                  </div>
                  <div class="form-group">
                    <label for="news-img">Texte</label>
                    <div id="news-editor" class="editable rounded border p-2 bg-white"></div>
                    <input type="text" name="news" data-editor="#news-editor" hidden />
                  </div>
                </div>
              </div>
            </div>
            <!-- FIN ACTU -->
          </div>
        </div>
        <div class="col-sm">
          <iframe id="preview"></iframe>
        </div>


      </div>
      <div class="row py-2">
      </div>
      {#<div class="row py-2"></div>#}
    </div>
    <button type="submit" class="btn btn-success btn-block my-3">
      Générer la Newsletter
    </button>
    <button id="save-newsletter" type="button" class="btn btn-primary btn-block my-3">
      Sauvegarder la Newsletter
    </button>
  </form>
{% endblock %}

{% block js %}
  <script type="text/javascript">
    // select reactions
    $('#pick-cover').change(function() {
      if ($(this).val() == '') {
        $('#cover-border').prop('disabled', false);
      } else {
        $('#cover-border').prop('disabled', true);
        $('#cover-border option[value="0"]').prop('selected', true);
        $('#cover-border option[value="1"]').prop('selected', false);
      }
    });
    $('#mail-type').change(function() {
      if ($(this).val() == 'Newsletter') {
        $('#mail-title').val('Cette semaine sur Tënk');
        $('#movies-label option').prop('selected', false);
        $('#movies-label option[value="classic"]').prop('selected', true);
        $('#last-movies-label option').prop('selected', false);
        $('#last-movies-label option[value="classic"]').prop('selected', true);
      }
      if ($(this).val() == 'Escale') {
        $('#mail-title').val('');
        $('#movies-label option').prop('selected', false);
        $('#movies-label option[value="escale"]').prop('selected', true);
        $('#last-movies-label option').prop('selected', false);
        $('#last-movies-label option[value="classic"]').prop('selected', true);
      }
      if ($(this).val() == 'FCSF') {
        $('#mail-title').val('Lettre #XX');
        $('#movies-label option').prop('selected', false);
        $('#movies-label option[value="fcsf"]').prop('selected', true);
        $('#last-movies-label option').prop('selected', false);
        $('#last-movies-label option[value="fcsf"]').prop('selected', true);
      }
    });
    //
    let introEditor;
    let newsEditor;
    function upDown(table) {
      table.find('.up').click(function() {
        const line = $(this).parents('tr');
        if (line.is(line.parents('tbody').find('tr:first-child'))) {
          return;
        }
        const prev = line.prev();
        line.detach();
        prev.before(line);
      });
      table.find('.down').click(function() {
        const line = $(this).parents('tr');
        if (line.is(line.parents('tbody').find('tr:last-child'))) {
          return;
        }
        const next = line.next();
        line.detach();
        next.after(line);
      });
    }
    function pick(url, form, pickMovies, pickCover = null) {
      $.post(url, function(data) {
        //console.log(data);
        if (!data.success || data.movies.length < 1) {
          return;
        }
        const trClone = pickMovies.find('tr.clone');
        const optClone = (pickCover != null) ? pickCover.find('option.clone') : null;
        if (optClone != null) {
          optClone.show();
        }
        trClone.show();
        pickMovies.find('tbody tr:not(.clone)').remove();
        data.movies.forEach(movie => {
          // movie pick
          let movieLine = trClone.clone();
          trClone.after(movieLine);
          movieLine.find('td:nth-child(1)').text(movie.id);
          movieLine.find('td:nth-child(2)').text(movie.title);
          if (movie.image.length > 0) {
            let imageLink = movieLine.find('td:nth-child(3) a');
            imageLink.data('gallery', "movies");
            imageLink.attr('href', movie.image);
            movieLine.find('td:nth-child(3) a img').attr('src', movie.image);
          }
          movieLine.find('td:nth-child(4) input[type=checkbox]').val(movie.id);
          movieLine.removeClass('clone');
          // cover pick
          if (optClone != null) {
            optClone.clone().val(movie.id).text(movie.title).removeClass('clone').insertAfter(optClone);
          }
        });
        trClone.remove();
        if (optClone != null) {
          optClone.remove();//.removeClass('clone').text('---');
        }
        upDown(pickMovies);
      });
    }
    function saveMedium() {
      preview();
      const introEditor = $('#introduction-editor');
      const introIpt = introEditor.parent().find('input[name=introduction]');
      const newsEditor = $('#news-editor');
      const newsIpt = newsEditor.parent().find('input[name=news]');
      if (
        introIpt.val() != introEditor.html() ||
        newsIpt.val() != newsEditor.html()
      ) {
        introIpt.val(introEditor.html());
        newsIpt.val(newsEditor.html());
      }
    }
    function save() {
      saveMedium();
      preview();
      $('input[type=text],input[type=email],input[type=url],input[type=color]').each(function() {
        cacheSave($(this).attr('name'), $(this).val());
      });
      $('select').each(function() {
        cacheSave($(this).attr('name'), $(this).find('option:selected').val());
      });
    }
    function cacheSave(name, value) {
      if (name === undefined) {
        return;
      }
      $.post('{{ path_for('post_cache') }}', { name: 'newsletter-' + name, value }, function(data) {
        //console.log(data);
        if (data.processed > 0) {
          const e = $(`[name="${name}"]`).addClass('is-valid');
          setTimeout(function() { e.removeClass("is-valid"); }, 5000);
        }
      }).fail(function(err) {
        console.error(err);
      });
    }
    function cacheLoad(name, callback) {
      $.get('{{ path_for('get_cache') }}', { name: 'newsletter-' + name }, function(data) {
        //console.log(data);
        if (data.processed > 0) {
          callback.call(this, data.value);
        }
      }).fail(function(err) {
        console.error(err);
      });;
    }
    function preview() {
      $.post(
        '{{ path_for('post_mail_newsletter_preview') }}',
        $('#send-newsletter').serializeArray(),
        function(data) {
        //console.log(data);
        $('#preview').contents().find('body').html(data);
      }).fail(function(err) {
        console.error(err);
      });
    }
    $('input, select').change(function() {
      preview();
    });
    $(document).on('click', '[data-toggle="lightbox"]', function(event) {
      event.preventDefault();
      $(this).ekkoLightbox();
    });
    $('#save-newsletter').click(function(event) {
      event.preventDefault();
      event.stopPropagation();
      save();
    });
    $('form#send-newsletter').submit(function(event) {
      saveMedium();
    });
    $('form#import-movies').submit(function(event) {
      event.preventDefault();
      event.stopPropagation();
      const form = $(this);
      const data = form.serializeArray();
      const action = form.attr('action');
      pick(kinowUrl(
        action,
        data.filter((i => i.name == 'week'))
      ), form, $('#pick-movies'), $('#pick-cover'));
      pick(kinowUrl(
        action,
        data.filter((i => i.name == 'last-week'))
          .map(i => ({name: 'week', value: i.value}))
      ), form, $('#pick-last-movies'));
      $('#send-newsletter.invisible').removeClass('invisible');
      const mediumOptions = {
        placeholder: {
          text: '==> Taper le texte ici <==',
          hideOnClick: false
        }, paste: {
          forcePlainText: false,
          cleanPastedHTML: true,
        }
      };
      introEditor = new MediumEditor('#introduction-editor', mediumOptions);
      introEditor.subscribe('editableBlur', function() {
        saveMedium();
        preview();
      });
      newsEditor = new MediumEditor('#news-editor', mediumOptions);
      newsEditor.subscribe('editableBlur', function() {
        saveMedium();
        preview();
      });
      $('input[type=text],input[type=email],input[type=url],input[type=color]').each(function() {
        const ipt = $(this);
        cacheLoad(ipt.attr('name'), function(value) {
          ipt.val(value);
          if (ipt.data('editor')) {
            MediumEditor.getEditorFromElement($(ipt.data('editor')).get(0)).setContent(value);
          }
        });
      });
      $('select').each(function() {
        const select = $(this);
        cacheLoad(select.attr('name'), function(value) {
          select.find(`option[value="${value}"]`).prop('selected', true);
        });
      });
      form.hide();
      $(document).keydown(function(event) {
        if((event.ctrlKey || event.metaKey) && event.which == 83) {
          event.preventDefault();
          save();
          return false;
        }
      });
    });
  </script>
  {{ media.load_list_script('newsletter') }}
{% endblock %}