{% put scripts %}

<script>
    getSearchProducts('{{limit}}', '{{key}}', '1');
    $('#pagination').hide();
    // console.log("qqq");
    function getSearchProducts(limit, key, page) {
        $(document).ready(function () {
            $.ajax({
                url: `http://216.250.11.229/app/api/products-search?key=`+ key + `&limit=` + limit + `&page=` + page,
                type: 'GET',
                dataType: 'json',
                beforeSend: function () {
                    $('#products_{{id}}').html("");
                    $('#products_list_{{id}}').html("");
                    $('#pagination_numbers').html("");
                    $('#detail_screen').hide();
                    $('#products_{{id}}').hide();
                    $('#loader_{{id}}').show();
                },
                success: function (data, textStatus, xhr) {
                    $('#detail_screen').show();
                    $('#loader_{{id}}').hide();
                    $('#products_{{id}}').show();
                    $('#show_title').html(`<span>{{'all'|_}}` + data.meta.total + `, {{'per.page'|_}} ` + data.meta.to + `</span>`);

                    if (data.meta.total > 8) {
                        $('#pagination').show();
                    }
                    // console.log(data.data);

                    var products = data.data;
                    for (var product of products) {
                        // console.log(product.name);
                        $('#products_{{id}}').append(productCard(product));
                        $('#products_list_{{id}}').append(productList(product));
                    }

                    var pagination = data.meta;


                    $('#pagination_numbers').append(
                        (pagination.current_page != 1 ?
                        `<li><a href="javascript:;" onClick="getCatProducts(` + `'{{query}}'` + `,` + `'{{limit}}'` + `,` + `'{{catId}}'` + `,` + pagination.links[1].label + `)"><i class="icon-arrow-left"></i></a></li>`
                        :
                        `<li><a href="javascript:;"><i class="icon-arrow-left"></i></a></li>`
                        )
                    );
                    // for (var paginate of pagination.links) {
                    for (var i = 0; i < pagination.links.length; i++) {
                        if (i != 0 && i != pagination.links.length-1) {
                        $('#pagination_numbers').append(
                            `<li` + (pagination.links[i].active ? ` class="active" ` : ``) + `><a href="javascript:;" onClick="getCatProducts(` + `'{{query}}'` + `,` + `'{{limit}}'` + `,` + `'{{catId}}'` + `,` + pagination.links[i].label + `)">` + pagination.links[i].label + `</a></li>`
                        );
                        }
                    }

                    $('#pagination_numbers').append(
                        (pagination.current_page != pagination.last_page ?
                        `<li><a href="javascript:;" onClick="getCatProducts(` + `'{{query}}'` + `,` + `'{{limit}}'` + `,` + `'{{catId}}'` + `,` + (pagination.current_page + 1) + `)"><i class="icon-arrow-right"></i></a></li>`
                        :
                        `<li><a href="javascript:;"><i class="icon-arrow-right"></i></a></li>`
                        )
                    );

                    // $('#pagination_numbers').append(
                    //     `<li` + (pagination.current_page == (pagination.from - pagination.per_page) ? ` class="active" ` : ``) + `><a href="javascript:;" onClick="getCatProducts(` + `'{{query}}'` + `,` + `'{{limit}}'` + `,` + `'{{catId}}'` + `, '2')">` + (pagination.from - pagination.per_page) + `</a></li>`
                    //     // <li><a href="javascript:;" id="pagination_prev"><i class="icon-arrow-right"></i></a></li>
                    // );


                },
                error: function (xhr, textStatus, errorThrown) {
                    console.log('Error in Operation');
                }
            });
        });
    }
</script>
{% endput %}

{%partial 'scripts/setModal' %}
{%partial 'scripts/prodCard' %}