{% 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">Edition du résumé&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.description.rendered %}
                    {# start: description #}
                    <div class="form-group">
                        {{ form_label(form.description, 'Résumé', {'label_attr': {'class': 'col-md-3 control-label'}})
                        }}
                        {{ form_errors(form.description) }}
                        <div class="col-md-9">
                            {{ form_widget(form.description, {'attr': {'class': 'form-control'}}) }}
                        </div>
                    </div>
                    {# end: description #}
                    {% endif %}
                </div>
            </div>
            <footer class="panel-footer">
                {% if not form.save.rendered %}
                <div class="col-md-offset-3">
                    {{ form_widget(form.save, { 'label': 'Mettre à jour', 'attr': {'class': 'btn-primary btnSubmit'} }) }}
                </div>
                {% endif %}
            </footer>
        </section>
    </form>
</div>


{% endblock %}





{% block javascripts %}
<script>
    $(document).ready(function () {
        $("#spinner").hide();
        $('#form_description').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_album').change(function () {
        $("#message").remove();
        $("#spinner").show();
        $('#form_description').attr('disabled', 'disabled');
        $('#form_album').attr('disabled', 'disabled');
        $("#form_description").val("");
        $.ajax({
            url: "{{ url }}album/" + $('#form_album').val(),
            type: "GET",
            dataType: "JSON",
            headers: {
                'apikey': '{{ apikey }}',
                'Content-Type': 'application/json'
            },
            data: {},
            success: function (response) {
                $('#form_album').removeAttr('disabled');
                $('#form_description').removeAttr('disabled');

                if (response.description != null) {
                    $("#form_description").val(response.description);
                } else
                    $("#form_description").val("");
                $("#spinner").hide();
            },
            error: function (err) {
                alert("An error ocurred while loading data ...");
                $('#form_album').removeAttr('disabled');
                $("#spinner").hide();
            }
        });
    });
</script>
{% endblock %}