{% extends 'theme-6.html.twig' %}

{# Title #}
{% block title %}Tower{% endblock %}

{# CSS #}
{% block stylesheets %}{% endblock %}

{% block row %}
<div class="col-md-6">
    {% if form.success is defined %}
    <div>
        <div id="message" class="alert alert-success">
            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
            {{ form.success.vars.label }}
        </div>
    </div>
    {% endif %}
    <form id="form1" class="form-horizontal" method="POST">
        <section class="panel">
            <header class="panel-heading">
                <h2 class="panel-title">Modifier les listes</h2>
            </header>
            <div class="panel-body">
                <div class="form-horizontal form-bordered">
                    {{ form_errors(form) }}
                    {% if not form.showcase.rendered %}
                    {# start: showcase #}
                    <div class="form-group">
                        {{ form_label(form.showcase, 'Liste', {'label_attr': {'class': 'col-md-3 control-label'}}) }}
                        {{ form_errors(form.showcase) }}
                        <div class="col-md-9">
                            {{ form_widget(form.showcase, {'attr': {'class': 'form-control'}}) }}
                        </div>
                    </div>
                    {# end: showcase #}
                    {% endif %}

                </div>
            </div>
            <!--footer class="panel-footer">
                {% if not form.save.rendered %}
                <div class="col-md-offset-3">
                    {{ form_widget(form.save, { 'label': 'Ajouter un genre', 'attr': {'class': 'btn-primary btnSubmit'} }) }}
                </div>
                {% endif %}
            </footer-->
        </section>
    </form>
</div>
<!--RESULT-->
<div class="col-md-6">

    <div id="message">

    </div>

    <!--form id="form1" class="form-horizontal" method="POST" action="/tower/showcase/updateList"-->
    <section id="sectionResult" class="panel">
        <header class="panel-heading">
            <h2 class="panel-title">Informations <span id="spinner" class="fa fa-refresh fa-spin"></span></h2>
        </header>
        <div class="panel-body">
            <div class="form-horizontal form-bordered" id="results">
            </div>
        </div>
        <div id="footer"></div>
    </section>
    <!--/form-->
</div>

{% endblock %}


{% block javascripts %}
<script>
    //Liste des albums disponibles
    var albumList;
    $(document).ready(function () {
        $("#spinner").hide();

        $.ajax({
            url: "{{ url }}album/",
            type: "GET",
            dataType: "JSON",
            headers: {
                'apikey': '{{ apikey }}',
                'Content-Type': 'application/json'
            },
            data: {},
            success: function (response) {
                albumList = response;
                console.log(albumList);
            },
            error: function (err) {
                alert("An error ocurred while loading data ...");
                $('#form_showcase').removeAttr('disabled');
                $("#spinner").hide();
            }
        });
    });

    $('#form_showcase').change(function () {
        $("#spinner").show();
        var showcase = $(this);


        $("#message").empty();
        $("#footer").empty();
        $("#results").empty();

        //load the 
        $.ajax({
            url: "{{ url }}showcase/" + showcase.val(),
            type: "GET",
            dataType: "JSON",
            headers: {
                'apikey': '{{ apikey }}',
                'Content-Type': 'application/json'
            },
            data: {},
            success: function (response) {
                console.log(response);
                for (i = 0; i < 10; i++) {

                    HTMLSelectId = "album" + i;
                    selectionId = (response[0].list[i] != undefined) ? response[0].list[i].id :
                        null;
                    console.log("selectionId" + selectionId);

                    //Creation des listes de sélection
                    $("#results").append(
                        "<div><div class='col-md-1' style='line-height: 34px;' >" +
                        i +
                        ":</div><div class='col-md-11' ><select onchange='$(\"#message\").empty();' id='" +
                        HTMLSelectId +
                        "' class='form-control'></select></div><div>");

                    //si il n'y aucun album sélectionné
                    if (selectionId == null) {
                        option =
                            "<option  selected value='-1'>Aucun album selectionné</option>";
                    } else {
                        option = "<option  value='-1'>Aucun album selectionné</option>";
                    }
                    $("#" + HTMLSelectId).append(option);

                    //on remplit avec la liste des albums
                    $.each(albumList, function (index) {
                        if (selectionId == this.id) {
                            option = "<option selected value='" + this.id + "'>" + this
                                .title + "</option>";
                        } else {
                            option = "<option value='" + this.id + "'>" + this
                                .title + "</option>";
                        }
                        $("#" + HTMLSelectId).append(option);
                    });

                }
                $("#footer").append(
                    "<footer class='panel-footer'><input class='btn-primary btnSubmit btn' onClick='updateList();' value='Mettre à jour la liste'></footer>"
                );
                $("#spinner").hide();
            },
            error: function (err) {
                alert("An error ocurred while loading data ...");
                $('#form_showcase').removeAttr('disabled');
                $("#spinner").hide();
            }
        });

    });

    function updateList() {
        idList = $("#form_showcase")[0].selectedOptions[0].value;
        updatedList = [];
        for (i = 0; i < 10; i++) {
            console.log(i, $("#album" + i)[0].selectedOptions[0].value);
            updatedList.push($("#album" + i)[0].selectedOptions[0].value);
        }
        console.log(updatedList);
        //load the 
        $.ajax({
            url: "{{ url }}showcase/updateList/" + idList,
            type: "POST",
            dataType: "JSON",
            headers: {
                'apikey': '{{ apikey }}',
                'Content-Type': 'application/json'
            },
            data: JSON.stringify({
                "albumList": updatedList
            }),
            success: ((response) => {
                console.log(response);
                $("#message").append(
                    '<div  class="alert alert-success">Liste mise à jour<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button></div>'
                );

            }),
            error: ((error) => {
                console.log(error);
            })
        });
    }
</script>

{% endblock %}