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

{% block title %}{% endblock %}

{% block stylesheets %}

{% endblock %}



{% block formTitle %}Ajout d'images à un épisode{% endblock %}
{% block form %}

{% 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 %}
<!--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-->

<!--start: Episode-->
<div class="form-group">
    {{ form_label(form.episode, null, {'label_attr': {'class': 'col-md-3 control-label'}}) }}
    {{ form_errors(form.episode) }}
    <div class="col-md-6">
        {{ form_widget(form.episode, {'attr': {'class': 'form-control'}}) }}
    </div>
</div>
<!--end: Episode-->


<div class="form-group">
    <div class="col-md-offset-3 col-md-6" id="wrapper"></div>
</div>
{% endblock %}
{% block formFooter %}

{% endblock %}


{% block javascripts %}
<script>
    $(document).ready(function () {
        // $('.js-datepicker').datepicker();
        $("#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 () {


        $("#DZ").remove();
        var episode = $(this);
        var form = document.createElement('form');
        form.id = "DZ";
        form.classList.add('dropzone');
        form.method = 'post';
        form.action = '{{ url }}episode/upload/' + episode.val();
        document.getElementById('wrapper').appendChild(form);
        new Dropzone(form);

    });

    $('#form_album').change(function () {
        var album = $(this);
        var episodeSelect = $("#form_episode");

        episodeSelect.attr('disabled', 'disabled');
        episodeSelect.html('');
        episodeSelect.append('<option value> Chargement de la liste des épisodes en cours ...</option>');

        $("#DZ").remove();

        $('#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 épisode ...</option>');

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

{% endblock %}