{% block body_javascript %}
    <script> 
        var pos = 0;
        var client_id = null;

        {% if not client is null %}
            client_id = '{{client.id}}';
        {% endif %}

        var _listUltimaOrdenes = [];
        var _providerSelect = {{provider|json_encode()|raw}};

        $( document ).ready(function() {
            consultarPedidosAnteriores()
            $( "#itemForPage" ).change(function() {
                pos = 0;
                const limit = $('#itemForPage').val();
                consultarPedidosAnteriores(limit, pos, false)
            });
        });

        function toBack(back, here){
            $(`#${back}`).addClass('d-none')
            $(`#${here}`).removeClass('d-none')
        }

    /**Pedidos*/
        function consultarPedidosAnteriores(limt = 10, pos = 0, $push = false, preloader = ''){
            mostrarSpinner(preloader === '' ? 'ultimasOrdenes' : preloader)
            let url = `{{domain_host}}order/getOrderClientPagination?id_provider_filter=${_providerSelect.id}&lim=${limt}&pos=${pos}`
            if(client_id){
                url += `&user_id=${client_id}`;
            }
            _ajax(url, "", 'GET', '{{token}}')
                .done(function (obj) {
                    if($push){
                        obj.map(k => {
                            const search = _listUltimaOrdenes.filter(j => (j.id === k.id) );
                            if(search.length == 0){
                                _listUltimaOrdenes.push(k)
                            }
                        });
                    }else{
                        _listUltimaOrdenes = obj;
                    }
                    listUltimaOrdenes(_listUltimaOrdenes);
                }).fail(function (jqXHR, textStatus, errorThrown) {
                    console.log('Error', jqXHR.responseJSON);
                }).always(function (obj) {
                    if(obj.length > 0){
                        $('#verMasAll').html(`<a href='#!' class='rol-user'>{{'CreateOrderClient.ver_mas'| trans}}</a>`);
                    }else{
                        $('#verMasAll').html(``);
                    }
                });
        }

        function listUltimaOrdenes(list){
            let html = '';

            if(list.length > 0){
                list.map(k => {
                    const date = new Date(k.date)
                    let day = date.getDate()
                    let month = date.getMonth() + 1
                    let year = date.getFullYear()
                    const numberOrder = k.numberOrderProvider === null ? stateText(k.state) : `#${k.numberOrderProvider}`
                    const iconStar = k.state === 0 ? '<i class="fa fa-star color-star" aria-hidden="true" style="position: absolute;right: 0;"></i>' : '';
                    html += `<div class="card shadow">
                        <div class="cont" onclick="openDetailOrder(${k.id})">
                            ${iconStar}
                            <div class="cont-info">
                                <p class="info-one">{{'OrderClient'|trans()}} ${numberOrder}</p>
                                <p class="info-two mb-1"> {{'CreateOrderClient.fech_order'|trans()}} ${day}/${month}/${year}</p>
                                <p class="info-two mb-1"> ${stateText(k.state)}</p>
                            </div>
                        </div>
                    </div>`
                })
            }else{
                html = `<div class="w-100 text-center pt-4 pb-5">
                    <img src = "/img/ic_shopping_basket.svg" alt="ic_shopping_basket" width="200" height="200"/>
                    <h3 class="mt-3 font-weight-bold rol-user">¡Ups!</h3>
                    <h5 class="mt-2">{{'sin_ordener_realizadas'|trans()}}</h5>
                </div>`;
            }

            
            $("#ultimasOrdenes").html(html)
        }

        function handleVerMas(container){
            const limit = $('#itemForPage').val();
            pos++;
            const preloader = 'verMasAll';
            consultarPedidosAnteriores(limit, pos, true, preloader)
        }

        function stateText(state){
            let $retornar = '';
            switch(state) {
                case 1:
                    $retornar = "{{'new'|trans()}}";
                    break;
                case 2:
                    $retornar = "{{'in process'|trans()}}";
                    break;
                case 3:
                    $retornar = "{{'in modify process'|trans()}}";
                    break;
                case 4:
                    $retornar = "{{'cast in'|trans()}}";
                    break;
                case 5:
                    $retornar = "{{'delivered'|trans()}}";
                    break;
                case 6:
                    $retornar = "{{'cancelled'|trans()}}";
                    break;
                case 7:
                    $retornar = "{{'invoiced'|trans()}}";
                    break;
                case 8:
                    $retornar = "{{'new with modify'|trans()}}";
                    break;
                default:
                    $retornar = "{{'saved'|trans()}}";
            }
            return $retornar
        }

        function openDetailOrder(key){
            hadleOpenModalHtmlRender(null, `/admin/viewDetailOrder?pedido=${key}&provider=${_providerSelect.id}`);
        }
    /**Fin Pedidos*/
    </script>
{% endblock %}