{% extends 'header.html' %}

{% block css %}
<link rel='stylesheet' href='/static/css/tienda.css'>
{% endblock %}

{% block body %}
<br>
<br>
<div class='container-fluid'>
    <div class='row' id='ElQueue'>






    </div>
</div>

<script>

    var ordenes = jQuery.parseJSON('{{ ordenes | tojson | safe}}');

    var cantidadDeOrdenesPendientes = 0;
    var queue = [];
    $(document).ready(function () {


        for (orden in ordenes) {
            var modal = '<div class="modal fade" id="Modal' + orden + '">' +
                '<div class="modal-dialog" role="document">' +
                '<div class="modal-content">' +
                '<div class="modal-header">' +
                '<h5 class="modal-title">Orden #' + orden + '</h5>' +
                '<button type="button" class="close" data-dismiss="modal" aria-label="Close">' +
                '<span aria-hidden="true">&times;</span>' +
                '</button>' +
                '</div>' + '<div class="modal-body">';
            var comida = '';
            var bebida = '';
            var total = 0;
            for (var i = 0; i < ordenes[orden].ordenCompleta.length; i++) {
                if (ordenes[orden].ordenCompleta[i].comida_bebida == 0) {
                    comida += '<h6 style ="padding-left: 4em">' + ordenes[orden].ordenCompleta[i].nombre + ': $' + ordenes[orden].ordenCompleta[i].precio.toFixed(2) + '</h6>';
                    comida += '<p style ="padding-left: 8em">' + ordenes[orden].ordenCompleta[i].peticion + '</p>';

                }
                else {
                    bebida += '<h6 style ="padding-left: 4em">' + ordenes[orden].ordenCompleta[i].nombre + ': $' + ordenes[orden].ordenCompleta[i].precio.toFixed(2) + '</h6>';
                    bebida += '<p style ="padding-left: 8em">' + ordenes[orden].ordenCompleta[i].peticion + '</p>';


                }
                total += ordenes[orden].ordenCompleta[i].precio


            }
            if (comida != '') {
                modal += '<h4>Comida: </h4>' + comida;
            }
            if (bebida != '') {
                modal += '<h4>Bebida: </h4>' + bebida;
            }

            modal += '<h6 style="text-align: right">Precio : $' + total.toFixed(2) + '</h6>' +
                '</div>' +
                '<div class="modal-footer">' +

                '<button type ="button" class ="btn btn-primary" onclick= "deleteOrder(' + orden + ')">' +
                'Orden terminada</button>' +

                '</div>' +
                '</div>' +
                '</div>' +
                '</div>';




            var card = '<div class="col-auto" id ="order' + orden + '"><div class="card" style =" width: 18rem; height: 20rem; background-color: rgba(219, 226,230, 0.6)">' +
                '<div class="card-body">' +
                '<p class="card-title"><strong>Orden #' + orden + '</strong></p>' +
                '<p class="card-text" ><strong>Precio :' + total.toFixed(2) +
                '</strong></p>' +
                '<p class="card-text" ><strong>Nombre :' + ordenes[orden].nombre +
                '</strong></p>' +
                '<p class="card-text" ><strong>Teléfono :' + ordenes[orden].num_celular +
                '</strong></p>' +
                '</div>' +
                '<div class="card-footer">' +
                '<button type="button" class="btn btn-warning" data-toggle="modal" data-target="#Modal' + orden + '">' +
                'Ver detalles</button>' +
                '<button type="button" class="btn btn-primary" onclick=" deleteOrder(' + orden + ')">' +
                'Terminada </button>' + '</div>' + '</div></div>';

            $('#ElQueue').append(card);
            $('#ElQueue').append(modal);
            cantidadDeOrdenesPendientes += 1;

            if (cantidadDeOrdenesPendientes >= 7) {
                addToQueue(ordenes);
                break;
            }


        }
    });

    $(document).ready(function () {
        setInterval(function () {

            let url = "/papelonDeComida";

            // Get
            $.get(url, function (d) { // jquery function that 'does' the GET request
                if (cantidadDeOrdenesPendientes >= 7) {
                    addToQueue(d);
                    return;
                }
                for (orden in d) {
                    var modal = '<div class="modal fade" id="Modal' + orden + '">' +
                        '<div class="modal-dialog" role="document">' +
                        '<div class="modal-content">' +
                        '<div class="modal-header">' +
                        '<h5 class="modal-title">Orden #' + orden + '</h5>' +
                        '<button type="button" class="close" data-dismiss="modal" aria-label="Close">' +
                        '<span aria-hidden="true">&times;</span>' +
                        '</button>' +
                        '</div>' + '<div class="modal-body">';
                    var comida = '';
                    var bebida = '';
                    var total = 0;
                    for (var i = 0; i < d[orden].ordenCompleta.length; i++) {
                        if (d[orden].ordenCompleta[i].comida_bebida == 0) {
                            comida += '<h6 style ="padding-left: 4em">' + d[orden].ordenCompleta[i].nombre + ': $' + d[orden].ordenCompleta[i].precio.toFixed(2) + '</h6>';
                            comida += '<p style ="padding-left: 8em">' + d[orden].ordenCompleta[i].peticion + '</p>';

                        }
                        else {
                            bebida += '<h6 style ="padding-left: 4em">' + d[orden].ordenCompleta[i].nombre + ': $' + d[orden].ordenCompleta[i].precio.toFixed(2) + '</h6>';
                            bebida += '<p style ="padding-left: 8em">' + d[orden].ordenCompleta[i].peticion + '</p>';


                        }
                        total += d[orden].ordenCompleta[i].precio


                    }
                    if (comida != '') {
                        modal += '<h4>Comida: </h4>' + comida;
                    }
                    if (bebida != '') {
                        modal += '<h4>Bebida: </h4>' + bebida;
                    }

                    modal += '<h6 style="text-align: right">Precio : $' + total.toFixed(2) + '</h6>' +
                        '</div>' +
                        '<div class="modal-footer">' +

                        '<button type ="button" class ="btn btn-primary" onclick= "deleteOrder(' + orden + ')">' +
                        'Orden terminada</button>' +

                        '</div>' +
                        '</div>' +
                        '</div>' +
                        '</div>';




                    var card = '<div class="col-auto" id ="order' + orden + '"><div class="card" style =" width: 18rem; height: 20rem; background-color: rgba(219, 226,230, 0.6)">' +
                        '<div class="card-body">' +
                        '<p class="card-title"><strong>Orden #' + orden + '</strong></p>' +
                        '<p class="card-text" ><strong>Precio :' + total.toFixed(2) +
                        '</strong></p>' +
                        '<p class="card-text" ><strong>Nombre :' + d[orden].nombre +
                        '</strong></p>' +
                        '<p class="card-text" ><strong>Teléfono :' + d[orden].num_celular +
                        '</strong></p>' +
                        '</div>' +
                        '<div class="card-footer">' +
                        '<button type="button" class="btn btn-warning" data-toggle="modal" data-target="#Modal' + orden + '">' +
                        'Ver detalles</button>' +
                        '<button type="button" class="btn btn-primary" onclick=" deleteOrder(' + orden + ')">' +
                        'Terminada </button>' + '</div>' + '</div></div>';

                    $('#ElQueue').append(card);
                    $('#ElQueue').append(modal);
                    cantidadDeOrdenesPendientes += 1;




                }
            });
        }, 30000); // here we have set 1s (1000 ms)
    });

    function addToQueue(CualquierOrden) {
        for (order in CualquierOrden) {
            if ($('#order' + order).length || queue.includes(order)) {
                continue;
            }
            else {
                sig_orden = {};
                sig_orden[order] = CualquierOrden[order];

                queue.push(sig_orden);
                cantidadDeOrdenesPendientes += 1;
            }
        }
        var card = '<div class="col-auto" id ="ordenPendiente"><div class="card" style =" width: 18rem; height: 20rem; background-color: rgba(219, 226,230, 0.6)">' +
            '<div class="card-body">' +
            '<p class="card-title"><strong>Ordenes PENDIENTES SIN VER</strong></p>' +
            '<p class="card-text" ><strong>' + (cantidadDeOrdenesPendientes - 7).toString() +
            '</strong></p>' +
            '<p class="card-text" ><strong> AVANCEN LES GOOO' +
            '</strong></p>' +

            '</div>' +
            '<div class="card-footer">' +
            '</div>' + '</div></div>';
        $('#ordenPendiente').remove()
        $('#ElQueue').append(card);
    }


    function deleteOrder(orderId) {
        var order = orderId;
        var xhr = new XMLHttpRequest();
        xhr.open("POST", '/ordenes', true);
        xhr.setRequestHeader('Content-Type', 'application/json');
        xhr.send(JSON.stringify(
            {
                'order': orderId
            }

        ));


        xhr.onload = function () {
            if (xhr.status != 200) { // analyze HTTP status of the response
                alert(`Error ${xhr.status}: ${xhr.statusText}`); // e.g. 404: Not Found
            } else { // show the result
                $('#order' + orderId.toString()).remove();
                $('#ordenPendiente').remove();
                cantidadDeOrdenesPendientes -= 1;
                todaOrden = queue.shift();

                for (orden in todaOrden) {
                    var modal = '<div class="modal fade" id="Modal' + orden + '">' +
                        '<div class="modal-dialog" role="document">' +
                        '<div class="modal-content">' +
                        '<div class="modal-header">' +
                        '<h5 class="modal-title">Orden #' + orden + '</h5>' +
                        '<button type="button" class="close" data-dismiss="modal" aria-label="Close">' +
                        '<span aria-hidden="true">&times;</span>' +
                        '</button>' +
                        '</div>' + '<div class="modal-body">';
                    var comida = '';
                    var bebida = '';
                    var total = 0;
                    for (var i = 0; i < todaOrden[orden].ordenCompleta.length; i++) {
                        if (todaOrden[orden].ordenCompleta[i].comida_bebida == 0) {
                            comida += '<h6 style ="padding-left: 4em">' + todaOrden[orden].ordenCompleta[i].nombre + ': $' + todaOrden[orden].ordenCompleta[i].precio.toFixed(2) + '</h6>';
                            comida += '<p style ="padding-left: 8em">' + todaOrden[orden].ordenCompleta[i].peticion + '</p>';

                        }
                        else {
                            bebida += '<h6 style ="padding-left: 4em">' + todaOrden[orden].ordenCompleta[i].nombre + ': $' + todaOrden[orden].ordenCompleta[i].precio.toFixed(2) + '</h6>';
                            bebida += '<p style ="padding-left: 8em">' + todaOrden[orden].ordenCompleta[i].peticion + '</p>';


                        }
                        total += todaOrden[orden].ordenCompleta[i].precio


                    }
                    if (comida != '') {
                        modal += '<h4>Comida: </h4>' + comida;
                    }
                    if (bebida != '') {
                        modal += '<h4>Bebida: </h4>' + bebida;
                    }

                    modal += '<h6 style="text-align: right">Precio : $' + total.toFixed(2) + '</h6>' +
                        '</div>' +
                        '<div class="modal-footer">' +

                        '<button type ="button" class ="btn btn-primary" onclick= "deleteOrder(' + orden + ')">' +
                        'Orden terminada</button>' +

                        '</div>' +
                        '</div>' +
                        '</div>' +
                        '</div>';




                    var card = '<div class="col-auto" id ="order' + orden + '"><div class="card" style =" width: 18rem; height: 20rem; background-color: rgba(219, 226,230, 0.6)">' +
                        '<div class="card-body">' +
                        '<p class="card-title"><strong>Orden #' + orden + '</strong></p>' +
                        '<p class="card-text" ><strong>Precio :' + total.toFixed(2) +
                        '</strong></p>' +
                        '<p class="card-text" ><strong>Nombre :' + todaOrden[orden].nombre +
                        '</strong></p>' +
                        '<p class="card-text" ><strong>Teléfono :' + todaOrden[orden].num_celular +
                        '</strong></p>' +
                        '</div>' +
                        '<div class="card-footer">' +
                        '<button type="button" class="btn btn-warning" data-toggle="modal" data-target="#Modal' + orden + '">' +
                        'Ver detalles</button>' +
                        '<button type="button" class="btn btn-primary"  onclick="deleteOrder(' + orden + ')">' +
                        'Terminada </button>' + '</div>' + '</div></div>';

                    $('#ElQueue').append(card);
                    $('#ElQueue').append(modal);

                    if (cantidadDeOrdenesPendientes >= 7) {
                        addToQueue(todaOrden);
                        break;
                    }

                }

            }
        };




    }




</script>
{% endblock %}