@extends('frontEnd.layouts.master')
@section('title', $category->meta_title)
@push('css')
    <link rel="stylesheet" href="{{ asset('public/frontEnd/css/jquery-ui.css') }}" />
@endpush
@push('seo')
    <meta name="app-url" content="{{ route('category', $category->slug) }}" />
    <meta name="robots" content="index, follow" />
    <meta name="description" content="{{ $category->meta_description }}" />
    <meta name="keywords" content="{{ $category->slug }}" />

    <!-- Twitter Card data -->
    <meta name="twitter:card" content="product" />
    <meta name="twitter:site" content="{{ $category->name }}" />
    <meta name="twitter:title" content="{{ $category->name }}" />
    <meta name="twitter:description" content="{{ $category->meta_description }}" />
    <meta name="twitter:creator" content="gomobd.com" />
    <meta property="og:url" content="{{ route('category', $category->slug) }}" />
    <meta name="twitter:image" content="{{ asset($category->image) }}" />

    <!-- Open Graph data -->
    <meta property="og:title" content="{{ $category->name }}" />
    <meta property="og:type" content="product" />
    <meta property="og:url" content="{{ route('category', $category->slug) }}" />
    <meta property="og:image" content="{{ asset($category->image) }}" />
    <meta property="og:description" content="{{ $category->meta_description }}" />
    <meta property="og:site_name" content="{{ $category->name }}" />
@endpush
@section('content')
    <section class="product-section">
        <div class="container">
            <div class="sorting-section d-none">
                <div class="row">
                    <div class="col-sm-6">
                        <div class="category-breadcrumb d-flex align-items-center">
                            <a href="{{ route('home') }}">Home</a>
                            <span>/</span>
                            <strong>{{ $category->name }}</strong>
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="row">
                            <div class="col-sm-6">
                                <div class="showing-data">
                                    <span>Showing {{ $products->firstItem() }}-{{ $products->lastItem() }} of
                                        {{ $products->total() }} Results</span>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="filter_sort">
                                    <div class="filter_btn">
                                        <i class="fa fa-list-ul"></i>
                                    </div>
                                    <div class="page-sort">
                                        <form action="" class="sort-form">
                                            <select name="sort" class="form-control form-select sort">
                                                <option value="1" @if(request()->get('sort')==1)selected @endif>Product: Latest</option>
                                                <option value="2" @if(request()->get('sort')==2)selected @endif>Product: Oldest</option>
                                                <option value="3" @if(request()->get('sort')==3)selected @endif>Price: High To Low</option>
                                                <option value="4" @if(request()->get('sort')==4)selected @endif>Price: Low To High</option>
                                                <option value="5" @if(request()->get('sort')==5)selected @endif>Name: A-Z</option>
                                                <option value="6" @if(request()->get('sort')==6)selected @endif>Name: Z-A</option>
                                            </select>
                                            <input type="hidden" name="min_price" value="{{request()->get('min_price')}}" />
                                            <input type="hidden" name="max_price" value="{{request()->get('max_price')}}" />
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">

                <div class="col-sm-3 filter_sidebar d-none">
                    <div class="filter_close"><i class="fa fa-long-arrow-left"></i> Filter</div>
                    <form action="" class="attribute-submit">
                        <div class="sidebar_item wraper__item">
                            <div class="accordion" id="category_sidebar">
                                <div class="accordion-item">
                                    <h2 class="accordion-header">
                                        <button class="accordion-button" type="button" data-bs-toggle="collapse"
                                            data-bs-target="#collapseCat" aria-expanded="true" aria-controls="collapseOne">
                                            {{ $category->name }}
                                        </button>
                                    </h2>
                                    <div id="collapseCat" class="accordion-collapse collapse show"
                                        data-bs-parent="#category_sidebar">
                                        <div class="accordion-body cust_according_body">
                                            <ul>
                                                @foreach ($category->subcategories as $key => $subcat)
                                                    <li>
                                                        <a
                                                            href="{{ url('subcategory/' . $subcat->slug) }}">{{ $subcat->subcategoryName }}</a>
                                                    </li>
                                                @endforeach
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--sidebar item end-->
                        <div class="sidebar_item wraper__item">
                            <div class="accordion" id="price_sidebar">
                                <div class="accordion-item">
                                    <h2 class="accordion-header">
                                        <button class="accordion-button" type="button" data-bs-toggle="collapse"
                                            data-bs-target="#collapsePrice" aria-expanded="true" aria-controls="collapseOne">
                                            Price
                                        </button>
                                    </h2>
                                    <div id="collapsePrice" class="accordion-collapse collapse show"
                                        data-bs-parent="#price_sidebar">
                                        <div class="accordion-body cust_according_body">
                                            <div class="category-filter-box category__wraper" id="categoryFilterBox">
                                                <div class="category-filter-item">
                                                    <div class="filter-body">
                                                        <div class="slider-box">
                                                            <div class="filter-price-inputs">
                                                                <p class="min-price">৳<input type="text"
                                                                        name="min_price" id="min_price" readonly="" />
                                                                </p>
                                                                <p class="max-price">৳<input type="text"
                                                                        name="max_price" id="max_price" readonly="" />
                                                                </p>
                                                            </div>
                                                            <div id="price-range" class="slider form-attribute"></div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--sidebar item end-->
                        <div class="sidebar_item wraper__item">
                            <div class="accordion" id="filter_sidebar">
                                <div class="accordion-item">
                                    <h2 class="accordion-header">
                                        <button class="accordion-button" type="button" data-bs-toggle="collapse"
                                            data-bs-target="#collapseFilter" aria-expanded="true"
                                            aria-controls="collapseOne">
                                            Filter
                                        </button>
                                    </h2>
                                    <div id="collapseFilter" class="accordion-collapse collapse show"
                                        data-bs-parent="#filter_sidebar">
                                        <div class="accordion-body cust_according_body">
                                            <div class="filter-body">
                                                <ul class="space-y-3">
                                                    @foreach ($subcategories as $subcategory)
                                                        <li class="subcategory-filter-list">
                                                            <label for="{{ $subcategory->slug . '-' . $subcategory->id }}"
                                                                class="subcategory-filter-label">
                                                                <input class="form-checkbox form-attribute"
                                                                    id="{{ $subcategory->slug . '-' . $subcategory->id }}"
                                                                    name="subcategory[]" value="{{ $subcategory->id }}"
                                                                    type="checkbox"
                                                                    @if (is_array(request()->get('subcategory')) && in_array($subcategory->id, request()->get('subcategory'))) checked @endif />
                                                                <p class="subcategory-filter-name">
                                                                    {{ $subcategory->subcategoryName }}</p>
                                                            </label>
                                                        </li>
                                                    @endforeach
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--sidebar item end-->
                    </form>
                </div>
                <div class="col-sm-12">
                    <div class="category-product main_product_inner">
                        @foreach ($products as $key => $value)
                            <x-frontend-product-card :product="$value" />
                        @endforeach
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-12">
                    <div class="homepage pagination">
                        @if ($products->currentPage() > 1)
                            <a href="{{ $products->previousPageUrl() }}" class="btn btn-secondary">« Previous</a>
                        @else
                            <div class="btn btn-secondary disabled">« Previous</div>
                        @endif

                        @if ($products->currentPage() < $products->lastPage())
                            <a href="{{ $products->nextPageUrl() }}" class="btn btn-secondary">Next »</a>
                        @else
                            <div class="btn btn-secondary disabled">Next »</div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- <section class="homeproduct">
        <div class="container">
            <div class="row">
                <div class="col-sm-12">
                    <div class="meta_des">
                        {!! $category->meta_description !!}
                    </div>
                </div>
            </div>
        </div>
    </section> -->

@endsection
@push('script')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
    <script>
        $("#price-range").click(function() {
            $(".price-submit").submit();
        })
        $(".form-attribute").on('change click',function(){
            $(".attribute-submit").submit();
        })
        $(".sort").change(function() {
            $(".sort-form").submit();
        })
        $(".form-checkbox").change(function() {
            $(".subcategory-submit").submit();
        })
    </script>
    <script>
        $(function() {
            // $("#price-range").slider({
            //     step: 5,
            //     range: true,
            //     min: {{ $min_price }},
            //     max: {{ $max_price }},
            //     values: [
            //         {{ request()->get('min_price') ? request()->get('min_price') : $min_price }},
            //         {{ request()->get('max_price') ? request()->get('max_price') : $max_price }}
            //     ],
            //     slide: function(event, ui) {
            //         $("#min_price").val(ui.values[0]);
            //         $("#max_price").val(ui.values[1]);
            //     }
            // });
            // $("#min_price").val({{ request()->get('min_price') ? request()->get('min_price') : $min_price }});
            // $("#max_price").val({{ request()->get('max_price') ? request()->get('max_price') : $max_price }});
            // $("#priceRange").val($("#price-range").slider("values", 0) + " - " + $("#price-range").slider("values",
            //     1));

            // $("#mobile-price-range").slider({
            //     step: 5,
            //     range: true,
            //     min: {{ $min_price }},
            //     max: {{ $max_price }},
            //     values: [
            //         {{ request()->get('min_price') ? request()->get('min_price') : $min_price }},
            //         {{ request()->get('max_price') ? request()->get('max_price') : $max_price }}
            //     ],
            //     slide: function(event, ui) {
            //         $("#min_price").val(ui.values[0]);
            //         $("#max_price").val(ui.values[1]);
            //     }
            // });
            // $("#min_price").val({{ request()->get('min_price') ? request()->get('min_price') : $min_price }});
            // $("#max_price").val({{ request()->get('max_price') ? request()->get('max_price') : $max_price }});
            // $("#priceRange").val($("#price-range").slider("values", 0) + " - " + $("#price-range").slider("values",
            //     1));
                function getFbp() {
                    return document.cookie.match(/_fbp=([^;]+)/)?.[1] || '';
                }
            @if($settings['fb_pageview_event'] == 1)
                fbq('track', 'PageView',{}, {
                    event_id: '{{ $eventID }}-1',
                    fbp: getFbp(),
                    pageType: 'Category',
                    pageName: document.title,
                    url: window.location.href,
                    path: window.location.pathname,
                    referrer: document.referrer || 'direct',
                });
            @endif

            @if($settings['fb_view_content_event'] == 1)
                fbq('track', 'ViewContent', {
                    content_ids: @json($products->pluck('id')),
                    content_name: "{{ $category->name }}",
                    content_type: 'Category',
                }, {
                    event_id: '{{ $eventID }}',
                    fbp: getFbp(),
                
                });
            @endif

            setTimeout(function() {
                @if($settings['fb_view_content_event'] == 1)
                    sendEventData({
                        event_id: '{{ $eventID }}',
                        fbp: getFbp(),
                        event_name: "ViewContent",
                        page_title: document.title,
                        page_url: window.location.href,
                        custom_data: {
                            content_ids: @json($products->pluck('id')),
                            content_name: "{{ $category->name }}",
                            content_type: 'Category',
                            value: 0,
                            currency: 'BDT'
                        }
                        
                    });
                @endif

                @if($settings['fb_pageview_event'] == 1)
                    sendEventData({
                        event_id: '{{ $eventID }}-1',
                        fbp: getFbp(),
                        event_name: "PageView",
                        page_title: document.title,
                        page_url: window.location.href,
                    });
                @endif
                
            }, 4000);
        });
    </script>
@endpush