{{-- <aside class="col-lg-3 right-sidebar sidebar-fixed sticky-sidebar-wrapper">
    <div class="sidebar-overlay">
    </div>
    <a class="sidebar-close" href="#"><i class="d-icon-times"></i></a>
    <a href="#" class="sidebar-toggle"><i class="fas fa-chevron-left"></i></a>
    <div class="sidebar-content">
        <div class="sticky-sidebar" data-sticky-options="{'top': 89, 'bottom': 70}">
            <div class="widget widget-search border-no mb-2 d-none">
                <form action="#" class="input-wrapper input-wrapper-inline btn-absolute">
                    <input type="text" class="form-control" name="search" autocomplete="off"
                        placeholder="Search in Blog" required />
                    <button class="btn btn-search btn-link" type="submit">
                        <i class="d-icon-search"></i>
                    </button>
                </form>
            </div>
            <div class="widget widget-collapsible border-no d-none">
                <h3 class="widget-title">Blog Category</h3>
                <ul class="widget-body filter-items search-ul">
                    <li><a href="#">Accessories</a></li>
                    <li>
                        <a href="#">Clothing</a>
                        <ul class="children">
                            <li><a href="#">Summer Sale</a></li>
                            <li><a href="#">Winter Sale</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">Musicial instruments</a>
                        <ul class="children">
                            <li><a href="#">Headphone</a></li>
                            <li><a href="#">Speaker</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Fashion</a></li>
                    <li><a href="#">Lifestyle</a></li>
                    <li><a href="#">Backpack & Fashion bags</a></li>
                </ul>
            </div>

            <div id="sidebar-product">

            </div>

            <div class="widget widget-collapsible d-none">
                <h3 class="widget-title">Popular Posts</h3>
                <div class="widget-body">
                    <div class="post-col">
                        <div class="post post-list-sm">
                            <figure class="post-media">
                                <a href="post-single.html">
                                    <img src="images/blog/1_xs.jpg" width="90" height="90" alt="post" />
                                </a>
                            </figure>
                            <div class="post-details">
                                <div class="post-meta">
                                    <a href="#" class="post-date">Nov 22, 2020</a>
                                </div>
                                <h4 class="post-title"><a href="post-single.html">The Best
                                        Choice For
                                        Spending Time</a></h4>
                            </div>
                        </div>
                        <div class="post post-list-sm">
                            <figure class="post-media">
                                <a href="post-single.html">
                                    <img src="images/blog/2_xs.jpg" width="90" height="90" alt="post" />
                                </a>
                            </figure>
                            <div class="post-details">
                                <div class="post-meta">
                                    <a href="#" class="post-date">Jun 6, 2019</a>
                                </div>
                                <h4 class="post-title"><a href="post-single.html">Women's
                                        Fashion
                                        Summer Dress</a></h4>
                            </div>
                        </div>
                        <div class="post post-list-sm">
                            <figure class="post-media">
                                <a href="post-single.html">
                                    <img src="images/blog/3_xs.jpg" width="90" height="90" alt="post" />
                                </a>
                            </figure>
                            <div class="post-details">
                                <div class="post-meta">
                                    <a href="#" class="post-date">May 13, 2020</a>
                                </div>
                                <h4 class="post-title"><a href="post-single.html">Women’s
                                        Sneaker</a></h4>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="widget widget-collapsible d-none">
                <h3 class="widget-title">About us</h3>
                <div class="widget-body">
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
                        nonummy nibh euismod tincidunt.</p>
                </div>
            </div>

            <div class="widget widget-posts widget-collapsible d-none">
                <h3 class="widget-title">Tag Cloud</h3>
                <div class="widget-body">
                    <a href="#" class="tag">Bag</a>
                    <a href="#" class="tag">Classic</a>
                    <a href="#" class="tag">Converse</a>
                    <a href="#" class="tag">Leather</a>
                    <a href="#" class="tag">Fit</a>
                    <a href="#" class="tag">Green</a>
                    <a href="#" class="tag">Man</a>
                    <a href="#" class="tag">Jeans</a>
                    <a href="#" class="tag">Women</a>
                </div>
            </div>
        </div>
    </div>
</aside> --}}
<sidebar-product src="/api/cars" id="sidebarProduct"></sidebar-product>


@push('stack-script')
<script src="{{ asset('assetsV2/js/productLabel.js') }}"></script>

<script>
$(document).ready(function() {

    function sidebarProductView (data) {
    let html = '';
    html += `
    <div class="product text-center custom-border-hover">`
    html += `
    <figure class="product-media carshow" style="overflow:hidden">
            <img src="`+ data.default_image +`"
                style="background-color: #f2f3f5;object-fit:cover" />
        <a class="product-label-area" href="`+ url + data.slug +`" class="text-center">
        `;

    html+=`<div class="product-label-group left">`
    if(data.condition == "baru") {
        html+= baruLabel()
    }
    if(data.label == "hotdeal") {
        html+= hotDealLabel()
    }
    if(data.label == "rekomendasi") {
        html+= recLabel()
    }
    html+=`</div>`;
    html+=`<div class="product-label-group left-bot">`
        if(data.is_waranty_plus == 1) {
            html+= wplusLabel()
        }
    html+=`</div>`;
    html+=`<div class="product-label-group right">`
        if(data.discount > 0) {
            html+= discountLabel(data.discount)
        }
    html+=`</div>`;
        html +=`
        </a>
    </figure>
    `
    html += `
    <div class="product-details">
        <h3 class="product-name d-flex justify-content-center align-items-center" style="white-space:none !important">
            <a href="`+ url + data.slug +`">`+ data.name +`</a>
        </h3>
        <div>${data.tahun_pembuatan}</div>

        <div class="product-price">
            <span class="price">Rp. `+
            numberFormatIDR(data.price_after_discount)
             +`</span>

        </div>
    </div>
    `
    html += `</a>`
    html += `</div>`
    return html

    }

    let url = "{{route('v2.detail.product','')}}/"

    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });
    $.get(ajaxUrl+'/api/cars', {
        'label': 'hotdeal',
        'limit': 4
    }).done(function(res) {

        let data = res.result;
        if (data.length == 0) {
            console.log("No Data")
            return false
        }
        for (let index = 0; index < data.length; index++) {
            $('#sidebar-product').append(sidebarProductView(data[index]))
        }
        // console.log(res)
    })
})
</script>
@endpush