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

{% block title %}Importer les contacts{% endblock %}

{% block css %}{% endblock %}

{% block content %}
<div id="list-selection">
  <h2>Choisir une liste pour l'import</h2>
  <div class="input-group mb-3">
    <div class="input-group-prepend">
      <label class="input-group-text" for="select-list">Listes existantes</label>
    </div>
    <select class="custom-select" id="select-list">
      <option value="">---</option>
      {% for list in lists %}
        <option value="{{ list.id }}" data-name="{{ list.name }}" data-count="{{ list.count }}">
          {{ list.name }}
          ({{ list.count }} inscrit-e{{ (list.count > 1) ? '-s' }})
        </option>
      {% endfor %}
    </select>
  </div>
  <form id="new-list" action="{{ path_for('post_mail_contacts_list') }}" method="POST">
    <div class="input-group mb-3">
      <div class="input-group-prepend">
        <label class="input-group-text" for="select-list">Nouvelle Liste</label>
      </div>
      <input class="form-control" type="text" placeholder="Nom de la Liste" name="name" />
      <div class="input-group-append">
        <button type="submit" class="btn btn-primary">
          Ajouter
        </button>
      </div>
    </div>
  </form>
</div>
<div id="import-in-list" class="invisible">
  <h2>Importer les contacts</h2>
  <p>Liste #<span id="list-id"></span> <strong><span id="list-name"></span></strong></p>
  <form id="import" method="POST"
    data-action-kinow="{{ path_for('post_mail_contact_import_kinow') }}"
    data-action-mailchimp="{{ path_for('post_mail_contact_import_mailchimp') }}">
    <h3>Reprendre à partir de la page :</h3>
    <div class="form-group">
      <label for="kinow-page">Kinow</label>
      <input class="form-control" value="1" type="number" min="1" id="kinow-page" />
    </div>
    <div class="form-group">
      <label for="mailchimp-page">MailChimp</label>
      <input class="form-control" value="1" type="number" min="1" id="mailchimp-page" />
    </div>
    <button type="submit" class="btn btn-danger">
      Importer !
    </button>
    <div class="grid">
      <div class="row">
        <div class="col">
          <div class="importing kinow alert alert-warning invisible">
            <h4>Kinow - <span class="status">Import en cours</span></h4>
            <p class="invisible">
              Page <span class="importing-page">0</span> /
              <span class="importing-pages">0</span>
              -
              <span class="importing-contact">0</span> Contacts  /
              <span class="importing-contacts">0</span>
            </p>
          </div>
        </div>
        <div class="col">
          <div class="importing mailchimp alert alert-warning invisible">
            <h4>MailChimp - <span class="status">Import en cours</span></h4>
            <p class="invisible">
              Page <span class="importing-page">0</span> /
              <span class="importing-pages">0</span>
              -
              <span class="importing-contact">0</span> Contacts /
              <span class="importing-contacts">0</span>
            </p>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
{% endblock %}

{% block js %}
<script type="text/javascript">
  let selectedList = {
    id: null,
    name: null,
    count: 0
  };
  function importMail(trackerName, form, listID, page = 1, pages = 0, totalProcessed = 0) {
    const importing = form.find(`.importing.${trackerName}`);
    const tracker = importing.find('p');
    const title = importing.find('h4');
    const status = title.find('.status');
    const action = form.data(`action-${trackerName}`);
    form.find('button[type=submit]').hide();
    importing.removeClass('invisible');
    $.post(action, {
      'list': listID,
      'page': page
    }, function(data) {
      if (data && data.success) {
        if (pages < 1) {
          pages = data.data.pages;
          tracker.removeClass('invisible');
          tracker.find('.importing-pages').html(pages);
          tracker.find('.importing-contacts').html(data.data.total);
        }
        let processed = data.processed + totalProcessed;
        tracker.find('.importing-contact').html(processed);
        tracker.find('.importing-page').html(data.data.page);
        if (page < pages) {
          importMail(trackerName, form, listID, page + 1, pages, processed);
        } else {
          importing.addClass('alert-success').removeClass('alert-warning');
          status.text('Import terminé');
        }
      } else {
        console.log(data.error);
        importing.addClass('alert-danger').removeClass('alert-warning');
        status.text(`Erreur ${data.error.code}`);
        title.after($('<p></p>').text(data.error.message));
      }
    });
  }
  $('form#new-list').submit(function(event) {
    event.preventDefault();
    event.stopPropagation();
    $.post($(this).attr('action'), $(this).serialize(), function(data) {
      if (data.success) {
        location.reload();
      } else {
        console.error(data);
        alert('Erreur');
      }
    });
  });
  $('form#import').submit(function(event) {
    event.preventDefault();
    event.stopPropagation();
    importMail('kinow', $(this), selectedList.id, parseInt($('#kinow-page').val()));
    importMail('mailchimp', $(this), selectedList.id, parseInt($('#mailchimp-page').val()));
  });
  $('select#select-list').change(function() {
    selectedList.id = $(this).find('option:selected').val();
    selectedList.name = $(this).find('option:selected').data('name');
    selectedList.count = $(this).find('option:selected').data('count');
    $('#list-id').html(selectedList.id);
    $('#list-name').html(selectedList.name);
    $('#import-in-list').removeClass('invisible');
  });
</script>
{% endblock %}