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

{% block title %}{% endblock %}

{% block stylesheets %}

{% endblock %}



{% block formTitle %}Dépublier 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 %}
{{ form_widget(form.save, { 'label': 'Dépublier' }) }}
{% endblock %}


{% block javascripts %}
<script>
    $(document).ready(function () {
        $('#form_publishdate').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_publishdate').removeAttr('disabled');
    });

    $('#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>');

        $('#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");
                console.log(response);
                // Remove current options
                episodeSelect.html('');

                // Empty value ...
                episodeSelect.append(
                    '<option value> Selectionnez un épisode ...</option>');

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

    function display_date(date) {
        if (date !== null) {
            var d = new Date(parseInt(date.substr(0, 4)), parseInt(date.substr(5, 2)) - 1, parseInt(date.substr(8,
                2)));
            var days = ["Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi"];
            return days[d.getDay()] + " " + date.substr(8, 2) + "-" + date.substr(5, 2) + "-" + date.substr(0, 4);
        } else
            return "-";
    }
</script>

{% endblock %}