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

{% block title %}{% endblock %}

{% block stylesheets %}
<style>
    td {
        word-break: break-all;
    }
</style>
{% endblock %}



{% block row %}

<div class="row">
    <div class="col-md-6">
        {% 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">Prix de l'épisode&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) }}

                        <!--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>
                </div>

            </section>
        </form>
    </div>

    <!--STATUS-->
    <div class="col-md-6">
        <form id="form1" class="form-horizontal" method="POST">
            <section class="panel">
                <header class="panel-heading">
                    <h2 class="panel-title">Etat <span id="spinnerStatus" class="fa fa-refresh fa-spin"></span>
                    </h2>
                </header>
                <div class="panel-body">
                    <div class="form-horizontal form-bordered" id="status">
                    </div>
                </div>
            </section>
        </form>
    </div>
</div>

<!--HISTORIQUE-->
<div class="row">
    <div class="col-md-6">

        <form id="form1" class="form-horizontal" method="POST">
            <section class="panel">
                <header class="panel-heading">
                    <h2 class="panel-title">Historique <span id="spinnerResult" class="fa fa-refresh fa-spin"></span>
                    </h2>
                </header>
                <div class="panel-body">
                    <div class="form-horizontal form-bordered" id="history">
                    </div>
                </div>
            </section>
        </form>
    </div>
    <!--Nouveau Prix-->
    <div class="col-md-6">
        {% 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 %}
        <div id="form1" class="form-horizontal">
            <section class="panel">
                <header class="panel-heading">
                    <h2 class="panel-title">Nouveau Prix <span id="spinnerPrice" class="fa fa-refresh fa-spin"></span>
                    </h2>
                </header>
                <div class="panel-body">
                    <div class="form-horizontal form-bordered" id="newPrice">
                    </div>
                </div>
            </section>
        </div>
    </div>
</div>


{% endblock %}


{% block javascripts %}
<script>
    $(document).ready(function () {
        $("#spinner").hide();
        $("#spinnerPrice").hide();
        $("#spinnerStatus").hide();
        $("#spinnerResult").hide();
        $("#form_episode").attr('disabled', 'disabled');
        empty_info();

        $("#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);
        var episodeSelect = $("#form_episode");

        episodeSelect.attr('disabled', 'disabled');
        episodeSelect.html('');
        episodeSelect.append('<option value> Chargement de la liste des épisodes en cours ...</option>');

        empty_info();

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

    });

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


    $('#form_episode').change(function () {
        $('#form_album').attr('disabled', 'disabled');
        $('#form_episode').attr('disabled', 'disabled');
        var episode = $(this);
        update_info(episode);
    });

    function update_info(episode) {
        empty_info();
        $("#spinnerStatus").show();
        $("#spinnerResult").show();
        // Request the episodes
        $.ajax({
            url: "{{ url }}price/episode/" + episode.val(),
            type: "GET",
            dataType: "JSON",
            headers: {
                'apikey': '{{ apikey }}',
                'Content-Type': 'application/json'
            },
            data: {},
            success: function (response) {
                {
                    console.log(response);
                    response.prices.sort(sortFunction);
                    //MAJ status
                    if (response.publishDate == null) {
                        $("#status").append(
                            "<H3>Episode n'est pas accessible car il n'est pas publié</H3>"
                        );
                    } else
                    if ((response.publishDate != null) && (response.prices.length == 0)) {
                        $("#status").append(
                            "<H3>Episode accessible gratuitement sans connexion</H3>"
                        );
                    } else
                    if ((response.publishDate != null) && (response.prices.length != 0)) {
                        switch (response.prices[0].credit) {
                            case -1:
                                $("#status").append(
                                    "<H3>Episode accessible gratuitement sans connexion</H3>"
                                );
                                break;
                            case 0:
                                $("#status").append(
                                    "<H3>Episode accessible après connexion</H3>"
                                );
                                break;
                            default:
                                $("#status").append(
                                    "<H3>Episode payant</H3>"
                                );
                        }
                    }
                    $("#spinnerStatus").hide();
                    //MAJ History
                    if (response.prices.length == 0) {
                        if (response.publishDate.lenght == 0) {
                            $("#history").append(
                                "<H3>Cet épisode n'a pas encore de prix fixé</H3><H3>Si il est publié alors il est accessible librement sans connexion</H3>"
                            );
                        }
                    } else {
                        $("#history").empty();
                        publishDate = "";
                        if (response.publishDate != null) {
                            publishDate = "<H5>Publication de l'épisode : " + display_date(response
                                .publishDate
                                .date) + "</H5>";
                        }


                        table = publishDate +
                            "<H3>Historique des prix</H3><TABLE id='resultTable' style='width: 100%;table-layout: fixed;'></TABLE>";
                        $(
                            "#history").append(table);
                        header = addHeader("Id");
                        header +=
                            addHeader("Crédits");
                        header += addHeader(
                            "Début");
                        header += addHeader("Fin");
                        addRow(header);

                        response.prices
                            .forEach(function (price) {
                                row = addCol(price.id);
                                row += addCol(price.credit);
                                row += addCol(display_date(price.beginDate));
                                row += addCol(display_date(price.endDate));

                                addRow(row);
                            });

                        $('#form_episode').removeAttr('disabled');
                        $('#form_album').removeAttr(
                            'disabled');
                    }
                    $("#newPrice").empty();
                    $("#newPrice").append(
                        newPrice());
                    $("#spinner").hide();
                    $("#spinnerResult").hide();
                }
            },
            error: function (err) {
                alert("An error ocurred while loading data ...");
                $('#form_album').removeAttr('disabled');
                $('#form_episode').removeAttr('disabled');
                $("#spinner").hide();
            }
        });
        //episode_info(episode);
    }

    function newPrice() {
        form = addInput("Crédits", "credits");
        form += addDateInput("Début", "beginDate");
        form += addDateInput("Fin", "endDate");

        form +=
            '<div class="form-group"><div class="col-md-3"></div>';
        form +=
            '<button class="col-md-3 btn-primary btnSubmit btn" onclick="setNewPrice()">Enregistrer</button></div>';
        return form;
    }

    function setNewPrice() {
        $("#spinnerPrice").show();
        $.ajax({
            url: "{{ url }}price/create",
            type: "POST",
            dataType: "JSON",
            headers: {
                'apikey': '{{ apikey }}',
                'Content-Type': 'application/json'
            },
            data: JSON.stringify({
                "episodeId": $('#form_episode').val(),
                "credit": $('#form_credits').val(),
                "beginDate": $('#form_beginDate').val(),
                "endDate": $('#form_endDate').val()
            }),
            success: function (response) {
                console.log(JSON.stringify(response));

                update_info($('#form_episode'));
                $("#spinnerPrice").hide();
            },
            error: function (err) {
                alert("An error ocurred while loading data ..." + JSON.stringify(err));
                $("#spinnerPrice").hide();
            }
        });
    }

    function addDateInput(label, name) {
        form =
            '<div class="form-group"><label class="col-md-3 control-label" >' + label + '</label>';
        form +=
            '<div class="col-md-6"><input type="date" id="form_' + name +
            '"  class ="form-control form-control"></div></div>';
        return form;
    }

    function addInput(label, name) {
        form = '<div class="form-group">';
        form += '<label class="col-md-3 control-label">' + label + '</label>';
        form += '<div class="col-md-6"><select id="form_' + name +
            '" required="required" class="form-control form-control">';
        form += '<option value="-1" selected="selected">Gratuit, libre d\'accès</option>';
        form += '<option value="0" >Gratuit, accès sous inscription</option>';
        form += '<option value="1" >1 crédit</option>';
        for (i = 2; i < 40; i++) {
            form += '<option value="' + i + '>' + i + ' crédits</option>';
        }
        /*form +=
            '<div class="col-md-6"><input type="text" id="form_' + name +
            '"  required="required" class="form-control form-control"></div>';*/
        form += '</select></div></div>';
        return form;
    }

    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'>" + col2 + "</TD>";
        return col;
    }

    function addRow(row) {
        row = "<TR>" + row + "</TR>";
        $("#resultTable").append(row);
    }

    function empty_info() {
        $("#results").empty();
        $("#status").empty();
        $("#history").empty();
    }

    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 %}