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

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

{# CSS #}
{% block stylesheets %}
<style>
    textarea {
        height: 350px !important;
    }
</style>
{% endblock %}

{% block row %}
<div class="col-md-12">
    {% 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">Supprimer des épisodes&nbsp;<span id="spinner"
                        class="fa fa-refresh fa-spin"></span>
                </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, 'Nom de l\'album', {'label_attr': {'class': 'col-md-3 control-label'}})
                        }}
                        {{ form_errors(form.album) }}
                        <div class="col-md-9">
                            {{ form_widget(form.album, {'attr': {'class': 'form-control'}}) }}
                        </div>
                    </div>
                    {# end: album #}
                    {% endif %}

                    {% if not form.episode.rendered %}
                    {# start: episode #}
                    <div class="form-group">
                        {{ form_label(form.episode, 'Nombre d\'épisodes à supprimer', {'label_attr': {'class': 'col-md-3 control-label'}})
                        }}
                        {{ form_errors(form.episode) }}
                        <div class="col-md-9">
                            {{ form_widget(form.episode, {'attr': {'class': 'form-control'}}) }}
                        </div>
                    </div>
                    {# end: episode #}
                    {% endif %}
                </div>
            </div>
            <footer class="panel-footer">
                {% if not form.save.rendered %}
                <div class="col-md-offset-3">
                    {{ form_widget(form.save, { 'label': 'Supprimer', 'attr': {'class': 'btn-primary btnSubmit'} }) }}
                </div>
                {% endif %}
            </footer>
        </section>
    </form>
</div>


{% endblock %}







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

        $("#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_episode').change(function () {




    });

    $('#form_album').change(function () {
        var album = $(this);
        var episodeSelect = $("#form_episode");
        $("#spinner").show();
        episodeSelect.attr('disabled', 'disabled');
        episodeSelect.html('');
        episodeSelect.append(
            '<option value> Chargement du nombre d\'épisodes en cours... </option>');

        $('#form_album').attr('disabled', 'disabled');

        // Request the episodes
        $.ajax({
            url: "{{ url }}album/" + album.val(),
            type: "GET",
            dataType: "JSON",
            headers: {
                'apikey': '{{ apikey }}',
                'Content-Type': 'application/json'
            },
            data: {},
            success: function (response) {
                var episodeSelect = $("#form_episode");

                // Remove current options
                episodeSelect.html('');

                // Empty value ...
                episodeSelect.append(
                    '<option value> Selectionnez un nombre d\'épisode à supprimer...</option>'
                );

                $.each(response.episode, function (key, episode) {
                    episodeSelect.append('<option value="' + episode
                        .number +
                        '">' +
                        episode.number + '</option>');
                });
                episodeSelect.removeAttr('disabled');
                $('#form_album').removeAttr('disabled');
                $("#spinner").hide();
            },
            error: function (err) {
                alert("An error ocurred while loading data ...");
                $('#form_album').removeAttr('disabled');
                $("#spinner").hide();
            }
        });
    });
</script>

{% endblock %}