@extends('frontend.layouts.app')

@section('title') Product - {{ config('app.name') }} @endsection

@section('content')

<!-- Start offcanvas filter sidebar -->
<div class="offcanvas__filter--sidebar widget__area">
    <button type="button" class="offcanvas__filter--close" data-offcanvas="">
        <svg class="minicart__close--icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
            <path fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M368 368L144 144M368 144L144 368"></path>
        </svg> 
    </button>

    <div class="offcanvas__filter--sidebar__inner">
        @if(Request::get('keyword'))
        @php
        $keyword = Request::get('keyword');
        @endphp
        @else
        @php
        $keyword = $keyword;
        @endphp
        @endif
        <div class="single__widget widget__bg">
            <h2 class="widget__title h3">Keyword</h2>
            <input class="contact__form--input" name="keyword" id="input-keyword" type="text" @if($keyword!='' ) value="{{$keyword}}" @endif>
        </div>
        <div class="single__widget widget__bg">
            <h2 class="widget__title h3">Categories</h2>
            <ul class="widget__categories--menu">
                <li class="widget__categories--menu__list">
                    <ul class="widget__categories">
                        @if(Request::get('category'))
                        @php
                        $category=Request::get('category');
                        @endphp
                        @endif
                        @foreach ($categories as $cat)
                        <li class="widget__categories--sub__menu--list product-list @if($cat->slug_name==$category) active @endif categories" data-id="{{$cat->slug_name}}">
                            <a class="widget__categories--sub__menu--link d-flex align-items-center">
                                <span class="widget__categories--sub__menu--text">{{$cat->name}}</span>
                            </a>
                        </li>
                        @endforeach
                    </ul>
                </li>
            </ul>
        </div>
        @if(count($toprated)>0)
        <div class="single__widget widget__bg">
            <h2 class="widget__title h3">Top Rated Product</h2>
            <div class="shop__sidebar--product">
                @foreach ($toprated as $tr)
                <div class="small__product--card d-flex">
                    <div class="small__product--thumbnail">
                        <a class="display-block" href="{{$tr->slug_name}}"><img class="top-list-img" src="{{$tr->thumb_image}}" alt="product-img"></a>
                    </div>
                    <div class="small__product--content top-list-text">
                        <h3 class="small__product--card__title"><a href="{{$tr->slug_name}}">{{$tr->product_name}} </a></h3>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
        @endif
    </div>
</div>
<!-- End offcanvas filter sidebar -->



<main class="main__content_wrapper">

    <!-- Start breadcrumb section -->
    <section class="breadcrumb__section breadcrumb__bg">
        <div class="container">
            <div class="row row-cols-1">
                <div class="col">
                    <div class="breadcrumb__content text-center">
                        <h1 class="breadcrumb__content--title">Product</h1>
                        <ul class="breadcrumb__content--menu d-flex justify-content-center">
                            <li class="breadcrumb__content--menu__items"><a href="{{ route('frontend.index') }}">Home</a></li>
                            <li class="breadcrumb__content--menu__items"><span>Product</span></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- End breadcrumb section -->

    <!-- Start shop section -->
    <div class="shop__section section--padding">
        <div class="container">
            <div class="row">
                <div class="col-xl-3 col-lg-4 shop-col-width-lg-4">
                    <div class="shop__sidebar--widget widget__area d-none d-lg-block">
                        @if(Request::get('keyword'))
                        @php
                        $keyword = Request::get('keyword');
                        @endphp
                        @else
                        @php
                        $keyword = $keyword;
                        @endphp
                        @endif
                        <div class="single__widget widget__bg br-18">
                            <h2 class="widget__title h2">Keyword</h2>
                            <input class="contact__form--input" name="keyword" id="input1" type="text" @if($keyword!='' ) value="{{$keyword}}" @endif>
                        </div>
                        <div class="single__widget widget__bg br-18">
                            <h2 class="widget__title h2">Categories</h2>
                            <ul class="widget__categories--menu">
                                <li class="widget__categories--menu__list">

                                    <ul class="widget__categories">
                                        @if(Request::get('category'))
                                        @php
                                        $category=Request::get('category');
                                        @endphp
                                        @endif
                                        @foreach ($categories as $cat)
                                        <li class="widget__categories--sub__menu--list product-list @if($cat->slug_name==$category) active @endif categories" data-id="{{$cat->slug_name}}">
                                            <a class="widget__categories--sub__menu--link d-flex align-items-center">
                                                <span class="widget__categories--sub__menu--text">{{$cat->name}}</span>
                                            </a>
                                        </li>
                                        @endforeach
                                    </ul>

                        </div>

                        @if(count($toprated)>0)
                        <div class="single__widget widget__bg br-18">
                            <h2 class="widget__title h3">Top Rated Product</h2>
                            <div class="shop__sidebar--product">
                                @foreach ($toprated as $tr)
                                <div class="small__product--card d-flex">
                                    <div class="small__product--thumbnail">
                                        <a class="display-block" href="{{$tr->slug_name}}"><img class="top-list-img" src="{{$tr->thumb_image}}" alt="product-img"></a>
                                    </div>
                                    <div class="small__product--content top-list-text">
                                        <h3 class="small__product--card__title"><a href="{{$tr->slug_name}}">{{$tr->product_name}} </a></h3>
                                        {{-- <div class="small__product--card__price">
                                            <span class="current__price">$239.52</span>
                                        </div>
                                        <ul class="rating small__product--rating d-flex">
                                            <li class="rating__list">
                                                <span class="rating__icon">
                                                    <svg width="14" height="13" viewBox="0 0 14 13" fill="none"
                                                        xmlns="http://www.w3.org/2000/svg">
                                                        <path
                                                            d="M6.08398 0.921875L4.56055 4.03906L1.11523 4.53125C0.505859 4.625 0.271484 5.375 0.716797 5.82031L3.17773 8.23438L2.5918 11.6328C2.49805 12.2422 3.1543 12.7109 3.69336 12.4297L6.76367 10.8125L9.81055 12.4297C10.3496 12.7109 11.0059 12.2422 10.9121 11.6328L10.3262 8.23438L12.7871 5.82031C13.2324 5.375 12.998 4.625 12.3887 4.53125L8.9668 4.03906L7.41992 0.921875C7.16211 0.382812 6.36523 0.359375 6.08398 0.921875Z"
                                                            fill="currentColor" />
                                                    </svg>
                                                </span>
                                            </li>
                                            <li class="rating__list">
                                                <span class="rating__icon">
                                                    <svg width="14" height="13" viewBox="0 0 14 13" fill="none"
                                                        xmlns="http://www.w3.org/2000/svg">
                                                        <path
                                                            d="M6.08398 0.921875L4.56055 4.03906L1.11523 4.53125C0.505859 4.625 0.271484 5.375 0.716797 5.82031L3.17773 8.23438L2.5918 11.6328C2.49805 12.2422 3.1543 12.7109 3.69336 12.4297L6.76367 10.8125L9.81055 12.4297C10.3496 12.7109 11.0059 12.2422 10.9121 11.6328L10.3262 8.23438L12.7871 5.82031C13.2324 5.375 12.998 4.625 12.3887 4.53125L8.9668 4.03906L7.41992 0.921875C7.16211 0.382812 6.36523 0.359375 6.08398 0.921875Z"
                                                            fill="currentColor" />
                                                    </svg>
                                                </span>
                                            </li>
                                            <li class="rating__list">
                                                <span class="rating__icon">
                                                    <svg width="14" height="13" viewBox="0 0 14 13" fill="none"
                                                        xmlns="http://www.w3.org/2000/svg">
                                                        <path
                                                            d="M6.08398 0.921875L4.56055 4.03906L1.11523 4.53125C0.505859 4.625 0.271484 5.375 0.716797 5.82031L3.17773 8.23438L2.5918 11.6328C2.49805 12.2422 3.1543 12.7109 3.69336 12.4297L6.76367 10.8125L9.81055 12.4297C10.3496 12.7109 11.0059 12.2422 10.9121 11.6328L10.3262 8.23438L12.7871 5.82031C13.2324 5.375 12.998 4.625 12.3887 4.53125L8.9668 4.03906L7.41992 0.921875C7.16211 0.382812 6.36523 0.359375 6.08398 0.921875Z"
                                                            fill="currentColor" />
                                                    </svg>
                                                </span>
                                            </li>
                                            <li class="rating__list">
                                                <span class="rating__icon">
                                                    <svg width="14" height="13" viewBox="0 0 14 13" fill="none"
                                                        xmlns="http://www.w3.org/2000/svg">
                                                        <path
                                                            d="M6.08398 0.921875L4.56055 4.03906L1.11523 4.53125C0.505859 4.625 0.271484 5.375 0.716797 5.82031L3.17773 8.23438L2.5918 11.6328C2.49805 12.2422 3.1543 12.7109 3.69336 12.4297L6.76367 10.8125L9.81055 12.4297C10.3496 12.7109 11.0059 12.2422 10.9121 11.6328L10.3262 8.23438L12.7871 5.82031C13.2324 5.375 12.998 4.625 12.3887 4.53125L8.9668 4.03906L7.41992 0.921875C7.16211 0.382812 6.36523 0.359375 6.08398 0.921875Z"
                                                            fill="currentColor" />
                                                    </svg>
                                                </span>
                                            </li>
                                            <li class="rating__list">
                                                <span class="rating__icon">
                                                    <svg width="14" height="13" viewBox="0 0 14 13" fill="none"
                                                        xmlns="http://www.w3.org/2000/svg">
                                                        <path
                                                            d="M12.4141 4.53125L8.99219 4.03906L7.44531 0.921875C7.1875 0.382812 6.39062 0.359375 6.10938 0.921875L4.58594 4.03906L1.14062 4.53125C0.53125 4.625 0.296875 5.375 0.742188 5.82031L3.20312 8.23438L2.61719 11.6328C2.52344 12.2422 3.17969 12.7109 3.71875 12.4297L6.78906 10.8125L9.83594 12.4297C10.375 12.7109 11.0312 12.2422 10.9375 11.6328L10.3516 8.23438L12.8125 5.82031C13.2578 5.375 13.0234 4.625 12.4141 4.53125ZM9.53125 7.95312L10.1875 11.75L6.78906 9.96875L3.36719 11.75L4.02344 7.95312L1.25781 5.28125L5.07812 4.71875L6.78906 1.25L8.47656 4.71875L12.2969 5.28125L9.53125 7.95312Z"
                                                            fill="currentColor" />
                                                    </svg>
                                                </span>
                                            </li>
                                        </ul> --}}
                                    </div>
                                </div>
                                @endforeach
                            </div>
                        </div>
                        @endif
                    </div>
                </div>
                <div class="col-xl-9 col-lg-8 shop-col-width-lg-8">
                    <div class="shop__right--sidebar">

                        <div class="shop__product--wrapper">
                            <div class="shop__header d-flex align-items-center justify-content-between mb-30">
                                <button class="widget__filter--btn d-flex d-lg-none align-items-center" data-offcanvas>
                                    <svg class="widget__filter--btn__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                                        <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="28" d="M368 128h80M64 128h240M368 384h80M64 384h240M208 256h240M64 256h80" />
                                        <circle cx="336" cy="128" r="28" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="28" />
                                        <circle cx="176" cy="256" r="28" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="28" />
                                        <circle cx="336" cy="384" r="28" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="28" />
                                    </svg>
                                    <span class="widget__filter--btn__text">Filter</span>
                                </button>
                                {{-- <p class="product__showing--count">Showing 1–9 of 21 results</p> --}}
                            </div>
                            <div class="tab_content">

                                @include('frontend.presult')

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- End shop section -->



</main>

@endsection
@push ('after-scripts')
<script>
    $(document).ready(function() {
        const fetch_data = (page, grid, category, keyword) => {
            if (grid === undefined) {
                grid = "";
            }
            if (category === undefined) {
                category = "";
            }
            if (keyword === undefined) {
                keyword = "";
            }

            $.ajax({
                url: "product/?page=" + page + "&grid=" + grid + "&category=" + category + "&keyword=" + keyword,
                success: function(data) {
                    $(".shop__header").click();
                    $('.tab_content').html('');
                    $('.tab_content').html(data);
                }
            })
        }
        $('body').on('click', '.pager a', function(event) {
            event.preventDefault();
            var page = $(this).attr('href').split('page=')[1];
            $('#hidden_page').val(page);
            var grid = $('#hidden_target').val();
            var category = $('li.widget__categories--sub__menu--list.categories.active').attr('data-id');
            var keyword = $("#input1").val();
            fetch_data(page, grid, category, keyword);
        });
        $(".gridbtn").on('click', function(event) {
            if ($(this).attr('data-target') == "#product_list") $("#hidden_target").val(2);
            else $("#hidden_target").val(1);

            var grid = $('#hidden_target').val();
            var page = $('#hidden_page').val();
            fetch_data(page, grid);
        });

        $(".categories").on('click', function(event) {
            $(".categories").removeClass('active');
            var grid = "";
            var category = $(this).data('id');
            var keyword = $("#input1").val();
            fetch_data("", grid, category, keyword);
            $('li[data-id=' + category + ']').addClass('active');
        });


        var timeout;
        var delay = 2000;
        $('#input1').keyup(function() {
            clearTimeout(timeout);
            timeout = setTimeout(function() {
                delayFunction();
            }, delay);
        });
        $('#input-keyword').keyup(function() {
            clearTimeout(timeout);
            timeout = setTimeout(function() {
                delayFunction();
            }, delay);
        });

        function delayFunction() {
            var grid = "";
            var keyword = "";
            var category = $('li.widget__categories--sub__menu--list.categories.active').attr('data-id');
            if ($("#input1").val() != '') {
                keyword = $("#input1").val();
            } else {
                keyword = $("#input-keyword").val();
            }
            fetch_data("", grid, category, keyword);
        }
    });
</script>
@endpush