{% 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 %}
<form id="form1" class="form-horizontal" method="POST">
    <section class="panel">
        <header class="panel-heading">
            <h2 class="panel-title">Mettre à jour les images à partir de la Faktory&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) }}

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

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


                <div class="col-md-6" id="results">
                    <center>
                        <H1>APPLICATION</H1>
                    </center>
                    {% 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.episode.rendered %}
                    {# 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 #}
                    {% endif %}

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


                </div>
            </div>
        </div>
    </section>
</form>
{% endblock %}




{% block javascripts %}
<script>
    $("#form1").submit(function () {
        $("#spinner").show();
    });

    $(document).ready(function () {


        $("#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_projet").attr('disabled', 'disabled');
        $("#form_episodeFaktory").attr('disabled', 'disabled');
        $("#form_episode").attr('disabled', 'disabled');
        $.ajax({
            url: "{{ url }}project",
            type: "GET",
            dataType: "JSON",
            headers: {
                'apikey': '{{ apikey }}',
                'Content-Type': 'application/json'
            },
            data: {},
            success: function (response) {
                var projetSelect = $("#form_projet");

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

                // Empty value ...
                projetSelect.append(
                    '<option value>Sélectionnez un projet...</option>');

                $.each(response, function (key, projet) {
                    projetSelect.append('<option value="' + projet.id +
                        '">' +
                        projet.name + '</option>');
                });
                projetSelect.removeAttr('disabled');

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

                $('#form_album').removeAttr('disabled');
                $("#spinner").hide();
            },
            error: function (err) {
                alert("An error ocurred while loading data ...");
                $('#form_album').removeAttr('disabled');
                $("#spinner").hide();
            }
        });

    });

    //Selection d'un projet dans la faktory pour charger les épisodes disponibles
    $('#form_projet').change(function () {
        $("#spinner").show();
        var projet = $(this);
        $.ajax({
            url: "{{ url }}episodeFaktory/" + projet.val(),
            type: "GET",
            dataType: "JSON",
            headers: {
                'apikey': '{{ apikey }}',
                'Content-Type': 'application/json'
            },
            data: {},
            success: function (response) {
                console.log(response);
                var episodeFaktorySelect = $("#form_episodeFaktory");

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

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

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

    });



    $('#form_episode').change(function () {
        var episode = $(this);
    });

    //Selection d'un album à alimenter
    $('#form_album').change(function () {
        $("#spinner").show();
        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 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');
                $("#spinner").hide();
            },
            error: function (err) {
                alert("An error ocurred while loading data ...");
                $('#form_album').removeAttr('disabled');
                $("#spinner").hide();
            }
        });


    });
</script>

{% endblock %}