{% extends 'admin/base.html.twig' %}

{% block title %}Jeu vidéo{% endblock %}

{% block body %}
    <h1>Jeux vidéo</h1>

    {{ form_start(form) }}
        {{ form_row(form.name, {label: 'Nom'}) }}
        <div class="form-group row">
            <div class="col-sm-2">Autocomplete names</div>
            <div class="col-sm-10">
                <ul id="search-name-results" class="list-unstyled"></ul>
            </div>
        </div>
        {{ form_row(form.licences, {label: 'Licences', attr: {class: 'select2', multiple: 'multiple'}}) }}
        {{ form_row(form.officiality) }}
        {{ form_row(form.developer, {label: 'Développeurs'}) }}
        {{ form_row(form.editors, {label: 'Editeurs', attr: {class: 'select2', multiple: 'multiple'}}) }}
        {{ form_row(form.genres, {attr: {class: 'select2', multiple: 'multiple'}}) }}
        {{ form_row(form.directors, {label: 'Directors', attr: {class: 'select2', multiple: 'multiple'}}) }}
        {{ form_row(form.composers, {label: 'Composers', attr: {class: 'select2', multiple: 'multiple'}}) }}
        {{ form_row(form.graphicDesigners, {label: 'Graphistes', attr: {class: 'select2', multiple: 'multiple'}}) }}
        {{ form_row(form.accessories, {label: 'Accessoires', attr: {class: 'select2', multiple: 'multiple'}}) }}

        {{ form_row(form.nbPlayer) }}

        <div class="form-group row">
            <div class="col-sm-2"></div>
            <div class="col-sm-10">
                {{ form_errors(form.online) }}
                {{ form_widget(form.online) }}

                {{ form_errors(form.lan) }}
                {{ form_widget(form.lan) }}
            </div>
        </div>

        <div class="form-group row">
            <label class="col-form-label col-sm-2">Image de référence</label>
            <div class="col-sm-5">
                {{ form_widget(form.mainImageFile) }}
            </div>
            <div class="col-sm-5">
                {% if game.mainImage %}
                    {% include 'admin/_print.uploadedfile.html.twig' with {file: game.mainImage} %}
                {% endif %}
            </div>
        </div>

        {{ form_row(form.save) }}
    {{ form_end(form) }}

    <h2>Sorties</h2>
    {% if game.id %}
    <p>
        <a href="{{ path('admin_game_release_add', {id: game.id}) }}" class="btn btn-outline-info">
            + Ajouter une sortie
        </a>
    </p>
    {% endif %}

    <table id="game-release-table" class="data-table">
        <thead>
            <tr class="row-head">
                <th></th>
                <th></th>
                <th>img</th>
                <th>Date de sortie</th>
                <th>Lieu de sortie</th>
                <th>Nom</th>
                <th>Machines</th>
            </tr>
        </thead>

        <tbody>
        {% for gameRelease in game.gameReleases %}
            {% set imgFulled = gameRelease.getImgFulled() %}

            <tr class="gameReleaseRow">
                <td>
                    <span class="loopindex">
                        {{ loop.index }}
                    </span>
                </td>
                <td>
                    <a href="{{ path('admin_game_release_edit', {id: gameRelease.id}) }}">Edit</a>
                    <a href="{{ path('admin_game_release_delete', {id: gameRelease.id}) }}"
                       class="delete_release"
                        data-index="{{ loop.index }}">
                        Delete
                    </a>
                </td>
                <td data-order="{{ imgFulled.total }}">
                    {% for imgField, fulled in imgFulled.fields %}
                        <span class="gr-imgBullet {{ fulled ? 'fulled' : ''}}"></span>
                    {% endfor %}
                </td>
                <td>{{ gameRelease.dateRelease }}</td>
                <td>{{ gameRelease.place }}</td>
                <td>{{ gameRelease.name }}</td>
                <td>
                    {% for machine in gameRelease.machines %}
                        {{ machine }}
                    {% endfor %}
                </td>
            </tr>
        {% endfor %}
        </tbody>
    </table>
{% endblock %}

{% block js %}
    <script>
        $(function() {
            $('#game-release-table').DataTable({pageLength: 50});

            $('.delete_release').click(function(e) {
                e.preventDefault();

                let $this = $(this),
                    index = $this.attr('data-index'),
                    href  = $this.attr('href');

                if (!confirm('Voulez-vous supprimer la sortie '+index+' ?')) {
                    return;
                }

                document.location.href = href;
            });

            let autocomplete = _.debounce(function () {
                $.ajax({
                    url: '/admin/api/search/name',
                    type: 'get',
                    dataType: 'json',
                    data: {
                        search: $('#game_name').val().trim()
                    }
                }).done(function(json) {
                    let $search = $('#search-name-results');
                    let games = JSON.parse(json);

                    $search.find('li').remove();
                    $.each(games, function (index, game) {
                        $search.append('<li><a href="/admin/game/'+game.id+'/edit">'+game.name+'</a></li>');
                    });
                }).fail(function(a,z,e) {
                    console.error(a);
                    console.error(z);
                    console.error(e);
                });
            }, 500);

            $('.select2').select2();

            $('#game_name').keypress(autocomplete);
            $('#game_name').change(autocomplete);
        });
    </script>
{% endblock %}