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

{# Title #}
{% block title %}Tower{% endblock %}

{# CSS #}
{% block stylesheets %}{% endblock %}

{% block row %}
<div class="col-md-12">

    <form id="form1" class="form-horizontal" method="POST">
        <section class="panel">
            <header class="panel-heading">
                <h2 class="panel-title">Fiche détaillée de l'album</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, null, {'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 %}


                </div>
            </div>
            <footer class="panel-footer">

            </footer>
        </section>
    </form>
</div>
<!--RESULT-->
<div class="col-md-12">
    {% if form.success is defined %}
    <div id="message">
        <div 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">Informations <span id="spinner" class="fa fa-refresh fa-spin"></span></h2>
            </header>
            <div class="panel-body">
                <div class="form-horizontal form-bordered" id="results">
                </div>
            </div>
        </section>
    </form>
</div>

{% endblock %}


{% block javascripts %}
<script>
    $(document).ready(function () {
        $("#spinner").hide();

        $("#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 () {
            $("#spinner").show();
            var album = $(this);


            if ($("#message")) {
                $("#message").empty();
            }
            $("#results").empty();

            // 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) {
                    console.log(response);
                    //ALBUM
                    table =
                        "<div class='col-md-6'><TABLE id='resultTable' style='width: 100%;table-layout: auto;'></TABLE></div>";
                    $("#results").append(table);
                    $("#resultTable").append(
                        '<th colspan="2" style="text-align: center;background-color: black;color: white;">ALBUM</th>'
                    );
                    addRow("#resultTable", "Identifiant", response.id);
                    addRow("#resultTable", "Titre", response.title);
                    addRow("#resultTable", "Résumé", (response.description == null) ?
                        "Aucun résumé" :
                        response.description);
                    addRow("#resultTable", "Visible", response.visible ? "oui" : "non");
                    addRow("#resultTable", "Date de création", response.creationDate);
                    addRow("#resultTable", "Date de publication", response.publishdate);
                    addRow("#resultTable", "Nombre d'épisodes", response.episode.length);
                    addRow("#resultTable", "Couverture", "<img src=" + response.cover +
                        " style='width:200px'>");
                    addRow("#resultTable", "Couverture large", "<img src=" + response
                        .bigCover +
                        " style='width:200px;'>");
                    addRow("#resultTable", "Couverture Album", "<img src=" + response
                        .albumCover +
                        " style='width:200px'>")


                    // EPISODE
                    tableEpisode =
                        "<div class='col-md-6'><TABLE id='resultTableEpisode' style='width: 100%;table-layout: auto;'></TABLE></div>";
                    $("#results").append(tableEpisode);
                    $("#resultTableEpisode").append(
                        '<tr><th colspan="5" style="text-align: center;background-color: black;color: white;">EPISODES</th></tr>'
                    );
                    header = "<tr>";
                    header += addHeader("Ep.");
                    header += addHeader("Couverture");
                    header += addHeader("Date de publication");
                    header += addHeader("Prix");
                    header += addHeader("Images");
                    header += "</tr>";
                    $("#resultTableEpisode").append(
                        header);
                    $.each(response.episode, function (key,
                        episode) {

                        row = addCol(episode.number);
                        row += addCol("<img src=" + episode
                            .cover +
                            " style='width:50px;'>");
                        row += addCol(display_date(episode.publishDate));

                        if (episode.publishDate == null) {
                            price = "Episode non publié";
                        } else {
                            episode.price.sort(sortFunction);

                            switch (episode.price[0].credit) {
                                case -1:
                                    price =
                                        "Episode accessible gratuitement sans connexion";
                                    break;
                                case 0:
                                    price = "Episode accessible après connexion";
                                    break;
                                default:
                                    price = episode.price[0].credit + " crédits";
                            }

                        }
                        row += addCol(price);
                        row += addCol((episode.images.length == 0) ? "vide" :
                            episode.images.length + " images");


                        $("#resultTableEpisode").append("<TR>" + row + "</TR>");
                    });

                    // JSON Pretty
                    //ret = syntaxHighlight(response);
                    //$("#results").append("<pre>" + ret + "</pre>");

                    $("#spinner").hide();


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

    function sortFunction(a, b) {
        if (a.id === b.id) {
            return 0;
        } else {
            return (a.id > b.id) ? -1 : 1;
        }
    }

    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 "-";
    }

    function syntaxHighlight(json) {
        if (typeof json != 'string') {
            json = JSON.stringify(json, undefined, 2);
        }
        json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
        return json.replace(
            /("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g,
            function (match) {
                var cls = 'number';
                if (/^"/.test(match)) {
                    if (/:$/.test(match)) {
                        cls = 'key';
                    } else {
                        cls = 'string';
                    }
                } else if (/true|false/.test(match)) {
                    cls = 'boolean';
                } else if (/null/.test(match)) {
                    cls = 'null';
                }
                return '<span class="' + cls + '">' + match + '</span>';
            });
    }

    function addRow(tableId, col1, col2) {
        row = "<TR><TD class='tab-content text-bold text-info' style='width: 20%;'>" + col1 +
            "</TD><TD class='tab-content'>" + col2 +
            "</TD></TR>";
        $(tableId).append(row);
    }

    function addHeader(col1) {
        col = "<TD class='tab-content text-bold text-info' style='width: 20%;'>" + col1 + "</TD>";
        return col;
    }

    function addCol(col2) {
        if (col2 === null) {
            col2 = "-";
        }
        col = "<TD class='tab-content' style='text-align:center'>" + col2 + "</TD>";
        return col;
    }
</script>

{% endblock %}