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

{% block title %}{% endblock %}

{% block stylesheets %}

{% endblock %}



{% block formTitle %}Ajout d'images à un album{% 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-->

<!--start: Date de publication-->
<div class="form-group">
    {{ form_label(form.publishdate, null, {'label_attr': {'class': 'col-md-3 control-label'}}) }}
    {{ form_errors(form.publishdate) }}
    <div class="col-md-6">
        {{ form_widget(form.publishdate, {'attr': {'class': 'form-control'}}) }}
    </div>
</div>
<!--end: Date de publication-->
<div class="form-group">
    <div class="col-md-offset-3 col-md-6" id="wrapper"></div>
</div>
{% endblock %}
{% block formFooter %}
{{ form_widget(form.save, { 'label': 'Envoyer' }) }}
{% endblock %}


{% block javascripts %}
<script>
    $(document).ready(function () {
        // $('.js-datepicker').datepicker();
        $('#form_publishdate').attr('disabled', 'disabled');
    });
    $('#form_episode').change(function () {
        $('#form_publishdate').removeAttr('disabled');

        $("#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 neighborhoods of the selected city.
        $.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 %}