{% put scripts %}

<script>
    getTopProducts('{{query}}');
    // console.log("qqq");
    var topProd = document.getElementById("products_top");

    function getTopProducts(query) {
        var html_data = ``;
        console.log(query);
        $(document).ready(function () {
            $.ajax({
                url: 'http://216.250.11.229/app/api/products?' + query,
                type: 'GET',
                dataType: 'json',
                beforeSend: function () {
                    $('#products_top').hide();
                    $('#loader_top').show();
                },
                success: function (data, textStatus, xhr) {
                    $('#loader_top').hide(500);
                    $('#products_top').show(500);

                    var products = data.data;
                    for (var product of products) {
                        // $('.slick-track').append(sliderProductCard(product));
                        html_data += sliderProductCard(product);
                    }

                    // topProd.innerHTML = html_data;
                    $('.slick-track').html(html_data);
                },
                error: function (xhr, textStatus, errorThrown) {
                    console.log('Error in Operation');
                }
            });
        });
    }

    function sliderProductCard(product) {

        var product_str = JSON.stringify(product);

        var card = `<div class="col-12">
        <div class="ltn__product-item text-center">
            <div class="product-img">
                <a href="/">
                    <img src="`+ product.images[0].original_image_url + `" alt="Nurgul ` + product.name + `" style="width: 400px;height: 280px;object-fit: fill;">
                </a>
                `
            +

            (product.hasOwnProperty('special_price') ?
                `<div class="product-badge">
                    <ul>
                        <li class="badge-2">{{'product.badge.discount'|_}}</li>
                    </ul>
                </div>`
                :
                ``
            )

            +
            `<div class="product-hover-action product-hover-action-2">
                    <ul>
                        <li>`+
            "<a href='#' onClick='setModal(" + product_str + ")' title='Quick View' data-bs-toggle='modal' data-bs-target='#quick_view_modal'>"
            + `<i class="icon-magnifier"></i>
                            </a>
                        </li>
                        <li class="add-to-cart">
                            <a href="#" title="Add to Cart" data-bs-toggle="modal"
                                data-bs-target="#add_to_cart_modal">
                                <span class="cart-text d-none d-xl-block">{{add}}</span>
                                <span class="d-block d-xl-none"><i class="icon-handbag"></i></span>
                            </a>
                        </li>
                        <li>
                            <a href="#" title="Quick View" data-bs-toggle="modal"
                                data-bs-target="#quick_view_modal">
                                <i class="icon-shuffle"></i>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="product-info">
                <h2 class="product-title"><a href="product-details.html">`+ product.name + `</a></h2>
                <div class="product-price">
                    <span>`+ product.formatted_price + `</span>`
            +
            (product.hasOwnProperty('special_price') ? `<del>` + product.formatted_regular_price + `</del>` : ``) +
            `</div>
            </div>
        </div>
    </div>`;

        return card;
    }

</script>

{% endput %}

{% partial 'scripts/setModal' %}