@extends('web.layouts.template')

@section('content')

<main class="main">
    <div class="page-content">


    <div class="page-header"
        style="background-color: #d32f2e;background-image: url({{asset('assetsV2/images/banner3.jpg')}});">
        <div class="container d-md-flex">
            <img src="{{ asset('assetsV2/images/carshow_logo.png')}}" alt="">
        </div>
        <h3 class="page-subtitle d-none">Pencarian</h3>
        <h1 class="page-title"></h1>
        <ul class="breadcrumb  d-none">
            <li><a href="{{ route('v2.home') }}"><i class="d-icon-home"></i></a></li>
            <li class="delimiter">/</li>
            <li><a href="#">Pencarian</a></li>
        </ul>
    </div>

    <div class="container">
        <div class="main-content">

            <form action="" class="toolbox sticky-toolbox sticky-content fix-top">
                <div class="toolbox-left">
                    <input type="hidden" name="keyword" id="filter-keyword" value="{{request()->get('keyword')}}">
                    <div class="toolbox-item select-box text-dark">
                        <label class="d-block">Kondisi :</label>
                        <select name="kondisi" size="" id="filter-kondisi" class="form-control">
                            <option value="" {{ request()->get('kondisi') ? '' : 'selected'}}>Semua</option>
                            <option value="baru" {{ request()->get('kondisi') == 'baru' ? 'selected' : ''}}>Baru</option>
                            <option value="bekas" {{ request()->get('kondisi') == 'bekas' ? 'selected' : ''}}>Bekas</option>
                        </select>
                    </div>
                    <div class="toolbox-item select-box text-dark mx-2">
                        <label class="d-block">Kategori :</label>
                        <select name="label" size="" id="filter-label" class="form-control">
                            <option value="" {{ request()->get('label') ? '' : 'selected'}} >Semua</option>
                            <option value="hotdeal" {{ request()->get('label') == 'hotdeal' ? 'selected' : ''}}>Hot Deal</option>
                            <option value="rekomendasi" {{ request()->get('label') == 'rekomendasi' ? 'selected' : ''}}>Rekomendasi</option>
                            <option value="murah" {{ request()->get('label') == 'murah' ? 'selected' : ''}}>Murah</option>
                        </select>
                    </div>
                    <div class="toolbox-item text-dark">
                        <button id="btn-apply-filter" class="btn btn-sm btn-primary">Terapkan</button>
                    </div>
                </div>
                <div class="toolbox-right d-none">
                    <div class="toolbox-item toolbox-show select-box text-dark">
                        <label>Show :</label>
                        <select name="count" class="form-control">
                            <option value="12">12</option>
                            <option value="24">24</option>
                            <option value="36">36</option>
                        </select>
                    </div>
                    <div class="toolbox-item toolbox-layout">
                        <a href="shop-list-mode.html" class="d-icon-mode-list btn-layout"></a>
                        <a href="shop.html" class="d-icon-mode-grid btn-layout active"></a>
                    </div>
                </div>
            </form>
            <section class="product-wrapper mt-6 mt-md-10 pt-4 mb-10 pb-2 appear-animate" data-animation-options="{
    'delay': '.6s'}">
                <input type="hidden" name="offset" id="offset" value="0">
                <div class="row cols-1 cols-sm-2 cols-md-4 cols-xl-5" id="htmldata">

                </div>

                <div class="row g-3" style="margin-top: 20px;">
                    <div class="col-12">
                        <center>
                            <button class="btn btn-primary" id="loadMore">Muat Lainnya</button>
                        </center>
                    </div>

                </div>
            </section>
        </div>
    </div>

    </div>
</main>
@endsection

@section('script')
    <script src="{{ asset('assetsV2/js/productLabel.js') }}"></script>
    <script src="{{ asset('assetsV2/js/productCatalog.js?v=0.0.1') }}"></script>
    <script>
        $(function() {
            let element = $('#htmldata');

            let url = "{{ route('v2.detail.product', '') }}/";
            let offset = 0;
            let loadButton = $('#loadMore')
            console.log("Start Product Catalog")
            productCatalog(element, url, offset, $('#loadMore'));
            loadButton.on('click', function(loadButton) {
                offset += 10
                productCatalog(element, url, offset, $('#loadMore'))
            })
        });

    </script>

@endsection