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

{% block title %}Kinow - Importer un Film{% endblock %}

{% set INPUT_MOVIE_PLACEHOLDER = 'ID Kinow du Film' %}

{% block content %}
  <h1>Kinow</h1>
  <h2>Importer un Film</h2>
  {# FILM IMPORT #}
  <strong>1 - Film</strong>
  <form action="{{ path_for('post_kinow_movie', {id: KINOW_ID_PLACEHOLDER}) }}" method="POST">
    <div class="form-group">
      <div class="input-group mb-3">
        <input type="number" class="form-control" id="movie-form-id" name="id" placeholder="{{ INPUT_MOVIE_PLACEHOLDER }}">
        <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>
  {# FILM AUTHORS IMPORT #}
  <strong>2 - Auteur-e-s</strong>
  <form action="{{ path_for('post_kinow_movie_authors', {id: KINOW_ID_PLACEHOLDER}) }}" method="POST">
    <div class="form-group">
      <div class="input-group mb-3">
        <input type="number" class="form-control" id="movie-form-id" name="id" placeholder="{{ INPUT_MOVIE_PLACEHOLDER }}">
        <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>
  {# FILM CATEGORIES IMPORT #}
  <strong>3 - Plages</strong>
  <form action="{{ path_for('post_kinow_movie_categories', {id: KINOW_ID_PLACEHOLDER}) }}" method="POST">
    <div class="form-group">
      <div class="input-group mb-3">
        <input type="number" class="form-control" id="movie-form-id" name="id" placeholder="{{ INPUT_MOVIE_PLACEHOLDER }}">
        <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>
  {# FILM VIDEO IMPORT #}
  <strong>4 - Vidéos</strong>
  <form action="{{ path_for('post_kinow_movie_videos', {id: KINOW_ID_PLACEHOLDER}) }}" method="POST">
    <div class="form-group">
      <div class="input-group mb-3">
        <input type="number" class="form-control" id="movie-form-id" name="id" placeholder="{{ INPUT_MOVIE_PLACEHOLDER }}">
        <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>
  {# FILM VIDEO STATS IMPORT #}
  <strong>5 - Stats Vidéos</strong>
  <form action="{{ path_for('post_kinow_movie_videos_stats', {id: KINOW_ID_PLACEHOLDER}) }}" method="POST">
    <div class="form-group">
      <div class="input-group mb-3">
        <input type="number" class="form-control" id="movie-form-id" name="id" placeholder="{{ INPUT_MOVIE_PLACEHOLDER }}">
        <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>
{% endblock %}

{% block js %}
<script type="text/JavaScript">

  function initAlert() {
    $('.alert').hide();
    $('.alert').removeClass('alert-success');
    $('.alert').removeClass('alert-danger');
  }
  $(document).ready(function() {
    initAlert();
    $('.alert').removeClass('invisible');
  });
  $('form').submit(function (event) {
    event.preventDefault();
    event.stopPropagation();
    const url = kinowUrl(
      $(this).attr('action'),
      $(this).serializeArray()
    );
    const toDisable = $(this).find('input, select, button');
    const alert = $(this).find('.alert');
    initAlert();
    toDisable.prop('disabled', true);
    $(this).find('input').val('');
    $.post(url, function(data) {
      toDisable.prop('disabled', false);
      if (data.success) {
        alert.addClass('alert-success');
        alert.html(`<h3>Succès</h3><p>${data.processed} éléments ont été importés</p>`);
      } else {
        alert.addClass('alert-danger');
        alert.html(`<h3>Erreur ${data.error.code}</h3><p>${data.error.message}</p>`);
      }
      alert.show();//.fadeOut(60000);
    }).fail(function(err) {
      alert.addClass('alert-danger');
      alert.html(`<h3>Erreur ${err.statusCode}</h3><p>${err.statusText}<br /><small><em>(Voir dans la console)</em></small></p>`);
      alert.show();
      console.error(err.responseText);
    });
    return false;
  });
</script>
{% endblock %}