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

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

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

{% block row %}

{% 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 %}
<div class="col-md-6">
    <form id="form1" class="form-horizontal" method="POST">
        <section class="panel">
            <header class="panel-heading">
                <h2 class="panel-title">Ajouter un genre à l'album</h2>
            </header>
            <div class="panel-body">
                <div class="form-horizontal form-bordered">
                    {{ form_errors(form) }}
                    {% if not form.album.rendered %}
                    {# start: Album #}
                    <div class="form-group">
                        {{ form_label(form.album, null, {'label_attr': {'class': 'col-md-3 control-label'}}) }}
                        {{ form_errors(form.album) }}
                        <div class="col-md-6">
                            {{ form_widget(form.album, {'attr': {'class': 'form-control'}}) }}
                        </div>
                    </div>
                    {# end: Album #}
                    {% endif %}

                    {% if not form.author.rendered %}
                    {# start: author #}
                    <div class="form-group">
                        {{ form_label(form.author, null, {'label_attr': {'class': 'col-md-3 control-label'}}) }}
                        {{ form_errors(form.author) }}
                        <div class="col-md-6">
                            {{ form_widget(form.author, {'attr': {'class': 'form-control'}}) }}
                        </div>
                    </div>
                    {# end: author #}
                    {% endif %}

                    {% if not form.activity.rendered %}
                    {# start: activity #}
                    <div class="form-group">
                        {{ form_label(form.activity, null, {'label_attr': {'class': 'col-md-3 control-label'}}) }}
                        {{ form_errors(form.activity) }}
                        <div class="col-md-6">
                            {{ form_widget(form.activity, {'attr': {'class': 'form-control'}}) }}
                        </div>
                    </div>
                    {# end: activity #}
                    {% endif %}

                    {# start: Footer> #}
                    {% block formFooter %}
                    {% if not form.save.rendered %}
                    <div class="col-md-offset-3">
                        {{ form_widget(form.save, { 'label': 'Ajouter un auteur', 'attr': {'class': 'btn-primary btnSubmit'} }) }}
                    </div>
                    {% endif %}
                    {% endblock %}
                    {# end: Footer #}

                </div>
            </div>
        </section>
    </form>
</div>
<div class="col-md-6">
    <form id="form1" class="form-horizontal" method="POST">
        <section 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>
        </section>
    </form>
</div>

{% endblock %}







{% block javascripts %}
<script>
    $(document).ready(function () {
        $("#spinner").hide();

        //Classement des listes
        $("#form_album").html($("#form_album option").sort(function (a, b) {
            if ((a.text == "Selectionnez un album...") || (b.text ==
                    "Selectionnez un album..."))
                return 0;
            return a.text == b.text ? 0 : a.text.toLowerCase() < b.text.toLowerCase() ?
                -1 : 1
        }))
        $('#form_album  option').filter(function () {
            return ($(this).text() == 'Selectionnez un album...'); //To select Blue
        }).prop('selected', true);

        $("#form_author").html($("#form_author option").sort(function (a, b) {
            if ((a.text == "Selectionnez un auteur...") || (b.text ==
                    "Selectionnez un auteur..."))
                return 0;
            return a.text == b.text ? 0 : a.text.toLowerCase() < b.text.toLowerCase() ?
                -1 : 1
        }))
        $('#form_author  option').filter(function () {
            return ($(this).text() == 'Selectionnez un auteur...'); //To select Blue
        }).prop('selected', true);

        //Tri
        $("#form_activity").html($("#form_activity option").sort(function (a, b) {
            if ((a.text == "Selectionnez une activité...") || (b.text ==
                    "Selectionnez une activité..."))
                return 0;
            return a.text == b.text ? 0 : a.text.toLowerCase() < b.text.toLowerCase() ? -1 : 1
        }))
        $('#form_activity  option').filter(function () {
            return ($(this).text() == 'Selectionnez une activité...'); //To select Blue
        }).prop('selected', true);

        //Changement d'album
        $('#form_album').change(function () {
            var album = $(this);
            disable_inputs();
            $("#spinner").show();
            if ($("#message")) {
                $("#message").remove();
            }
            $("#results").empty();

            // recherche des auteurs associés
            $.ajax({
                url: "{{ url }}album/" + album.val(),
                type: "GET",
                dataType: "JSON",
                headers: {
                    'apikey': '{{ apikey }}',
                    'Content-Type': 'application/json'
                },
                data: {},
                success: function (response) {
                    if (response.albumAuthors.length >= 1) {
                        $("#results").append(
                            "<div><b>Auteur(s) déjà affecté(s)</b></div>"
                        );
                    } else {
                        $("#results").append(
                            "<div><b>Aucun auteur déjà affecté</b></div>"
                        );
                    }
                    $.each(response.albumAuthors, function (key,
                        albumAuthors) {
                        $("#results").append("<p>" + albumAuthors
                            .activity
                            .longLabel +
                            " , " + albumAuthors.author
                            .firstname + " " +
                            albumAuthors.author.lastname +
                            " <span class=' fa fa-minus-square remove' onclick='removeAuthor(" +
                            albumAuthors.author.id + "," + response.id +
                            ",this);'></span></p>");
                    });
                    $("#spinner").hide();
                    enable_inputs();
                },
                error: function (err) {
                    alert("An error ocurred while loading data ...");
                    $('#form_album').removeAttr('disabled');
                    $("#spinner").hide();
                    enable_inputs();
                }
            });
        });


        $('#form_author').change(function () {
            if ($("#message")) {
                $("#message").remove();
            }
        });
        $('#form_activity').change(function () {
            //   $('#form_longLabel').removeAttr('disabled');
            if ($("#message")) {
                $("#message").remove();
            }
        });
    });

    function removeAuthor(authorId, albumId, elt) {
        $("#spinner").show();


        $.ajax({
            url: "{{ url }}album/removeAuthor/" + albumId,
            type: "POST",
            dataType: "JSON",
            headers: {
                'apikey': '{{ apikey }}',
                'Content-Type': 'application/json'
            },
            data: JSON.stringify({
                "authorId": authorId
            }),
            success: ((response) => {
                console.log(response);
                elt.parentElement.remove();
                $("#message").append(
                    '<div  class="alert alert-success">Auteur supprimé<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button></div>'
                );
                $("#spinner").hide();
            }),
            error: ((error) => {
                console.log(error);
                $("#spinner").hide();
            })
        });
    }

    function disable_inputs() {
        $('#form_album').attr('disabled', 'disabled');
        $('#form_author').attr('disabled', 'disabled');
        $('#form_activity').attr('disabled', 'disabled');
    }

    function enable_inputs() {
        $('#form_album').removeAttr('disabled');
        $('#form_author').removeAttr('disabled');
        $('#form_activity').removeAttr('disabled');
    }
</script>
{% endblock %}