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

{% block title %}VOD{% endblock %}

{% block css %}
<style type="text/css">
  .vod-image {
    width: 100px;
  }
</style>
{% endblock %}

{% block content %}
<h1>VOD</h1>
<div class="jumbotron vod-loading py-2">
  <div class="grid">
    <div class="row">
      <div class="col">
        <h3>
          <div class="spinner-grow text-primary" role="status">
            <span class="sr-only">Loading...</span>
          </div>
          Chargement
        </h3>
      </div>
      <div class="col text-right pt-1">
        <span id="vod-count">0</span> /
        <span id="vod-total">0</span>
      </div>
    </div>
  </div>
</div>
<div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text" id="search-lbl">Rechercher</span>
  </div>
  <input id="search-ipt" type="text" class="form-control" placeholder="Titre du film" aria-label="search" aria-describedby="search-lbl">
</div>
<table class="table">
  <thead>
    <tr>
      <th>#</th>
      <th>Titre</th>
      {#<th>Image</th>#}
      <th>Prix</th>
      <th>Semaine</th>
    </tr>
  </thead>
  <tbody>
    <tr class="vod-item to-clone invisible">
      <td class="vod-id"></td>
      <td class="vod-title"></td>
      {#<td>
        <img class="vod-image img-thumbnail" />
      </td>#}
      <td>
        <span class="badge badge-primary">
          <span class="vod-price"></span>€
        </span>
      </td>
      <td>
        <span class="badge badge-dark vod-reference"></span>
      </td>
    </tr>
  </tbody>
</table>
{% endblock %}

{% block js %}
<script type="text/javascript">
  let movies = [];
  $(document).ready(function() {
    $('.invisible').hide().removeClass('invisible');
    loadVod(1);
    $('#search-ipt').keyup(function(ipt) {
      if ($(this).val().length < 3) {
        $('.vod-item:not(.to-clone)').show();
        return;
      }
      const words = $(this).val().split(/ /gi).map(function(word) {
          return new RegExp(word, 'ig');
      });
      $('.vod-item:not(.to-clone)').show();
      movies.filter(function(movie) {
        return words.filter(function(word) {
          return word.test(movie.title);
        }).length < 1;
      }).forEach(function(movie) {
        $(`.vod-item-${movie.id}:not(.to-clone)`).hide();
      });
    });
  });
  function loadVodItem(movie) {
    const vodItem = $('.vod-item.to-clone')
      .clone()
      .removeClass('to-clone')
      .addClass(`vod-item-${movie.id}`);
    for (let i in movie) {
      const e = vodItem.find(`.vod-${i}`);
      switch (i) {
        case 'image':
          e.attr('src', movie[i]);
          break;
        default:
          e.text(movie[i]);
      }
    }
    $('.vod-item.to-clone').before(vodItem.show());
  }
  function loadVod(page) {
    $.post('{{ post_monitoring_vod }}', { page }, function(data) {
      if (!data.success) {
        alert('Erreur');
        console.error(data.error);
        return;
      }
      $('#vod-total').text(data.vod.total);
      movies = movies.concat(data.vod.movies).sort(function(a, b) {
        const aRef = parseInt(a.reference);
        const bRef = parseInt(b.reference);
        if (aRef == bRef) {
          return a.title > b.title;
        }
        return aRef > bRef;
      });
      $('#vod-count').text(parseInt($('#vod-count').text()) + data.processed);
      if (data.processed >= 100) {
        loadVod(page + 1);
      } else {
        movies.forEach(loadVodItem);
        $('#vod-count').text(movies.length);
        $('#vod-total').text(movies.length);
        $('.vod-loading h3').remove();
      }
    });
  }
</script>
{% endblock %}