@extends('frontend::layouts.master')

@section('title')
    <title>{{ $seo?->title ?? siteName() }}</title>
    <meta name="title" content="{{ $seo?->title ?? siteName() }}" />
    <meta name="description" content="{{ strip_tags($seo?->description ?? siteDescription()) }}" />
    <meta name="keywords" content="{{ strip_tags($seo?->keywords) }}" />
@endsection

@push('style')
    <link rel="stylesheet" href="{{ asset('common/css/nice-select.css') }}">
    <link rel="stylesheet" href="{{ asset('frontend/assets/css/shop.css') }}">


    <style>
        .tg-blog-post-item.featured-product img {
            width: 76px;
            min-width: 76px;
            border-radius: 8px;
            margin-right: 8px;
        }

        .tg-blog-post-item.featured-product .display-price {
            font-size: 14px;
        }

        .tg-blog-post-item.featured-product .display-price span {
            font-size: 13px;
        }
    </style>
@endpush

@section('content')
    <!-- main-area -->
    <main class="fix">

        <x-frontend::breadcrumb>
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('home') }}">Home</a></li>
                <li class="breadcrumb-item active" aria-current="page">Shop</li>
            </ol>
        </x-frontend::breadcrumb>

        <!-- tg-shop-area-start -->
        <div class="tg-shop-area pt-130 pb-80" x-data="data">
            <div class="container">
                <div class="row">
                    <div class="col-xl-3 col-lg-4">
                        <div class="tg-shop-sidebar top-sticky mb-50">
                            <div class="tg-blog-sidebar-search tg-blog-sidebar-box mb-40">

                                <div class="d-flex justify-content-between align-items-center mb-10">
                                    <h5 class="tg-blog-sidebar-title">Search</h5>
                                    <a class="tg-filter-reset mb-3" x-show="isFilterChanged" @click="resetFilters()"
                                        href="javascript:void(0);">Reset All</a>
                                </div>

                                <div class="tg-blog-sidebar-form">
                                    <input x-model="filters.search" type="text" placeholder="Type here . . .">
                                </div>
                            </div>

                            <div class="tg-blog-categories tg-blog-sidebar-box mb-40" x-data="{ showPropertyType: false }">
                                <h4 class="tg-blog-sidebar-title mb-3">Categories</h4>
                                <div class="tg-filter-list">
                                    <ul>
                                        @foreach ($categories as $key => $category)
                                            <li x-show="showPropertyType || {{ $key }} < 7" x-transition>
                                                <div
                                                    class="shop_sidebar_item_box {{ $loop->last ? '' : 'border-bottom pb-2 mb-10' }}">
                                                    <input value="{{ $category?->id }}" x-model="filters.category_ids"
                                                        class="tg-checkbox form-check-input" type="checkbox"
                                                        id="category_{{ $key }}">
                                                    <label for="category_{{ $key }}" class="tg-label">
                                                        {{ $category?->name }}
                                                    </label>
                                                </div>
                                            </li>
                                        @endforeach
                                    </ul>
                                </div>
                                @if (count($categories) > 7)
                                    <div class="tg-filter-seemore mt-2 cp select-none"
                                        @click="showPropertyType = !showPropertyType">
                                        <span class="plus">
                                            <i
                                                :class="showPropertyType ? 'fas fa-minus' :
                                                    'fas fa-plus'"></i>
                                        </span>
                                        <span class="more" x-text="showPropertyType ? 'See Less' : 'See More'"></span>
                                    </div>
                                @endif
                            </div>

                            <div class="tg-blog-categories tg-blog-sidebar-box mb-40" x-data="{ showPropertyType: false }">
                                <h4 class="tg-blog-sidebar-title mb-3">Brands</h4>
                                <div class="tg-filter-list">
                                    <ul>
                                        @foreach ($brands as $key => $brand)
                                            <li x-show="showPropertyType || {{ $key }} < 7" x-transition>
                                                <div
                                                    class="shop_sidebar_item_box {{ $loop->last ? '' : 'border-bottom pb-2 mb-10' }}">
                                                    <input value="{{ $brand?->id }}" x-model="filters.brand_ids"
                                                        class="tg-checkbox form-check-input" type="checkbox"
                                                        id="brand_{{ $key }}">
                                                    <label for="brand_{{ $key }}" class="tg-label">
                                                        {{ $brand?->name }}
                                                    </label>
                                                </div>
                                            </li>
                                        @endforeach
                                    </ul>
                                </div>
                                @if (count($brands) > 7)
                                    <div class="tg-filter-seemore mt-2 cp select-none"
                                        @click="showPropertyType = !showPropertyType">
                                        <span class="plus">
                                            <i
                                                :class="showPropertyType ? 'fas fa-minus' :
                                                    'fas fa-plus'"></i>
                                        </span>
                                        <span class="more" x-text="showPropertyType ? 'See Less' : 'See More'"></span>
                                    </div>
                                @endif
                            </div>

                            @if ($featuredProducts->count() > 0)
                                <div class="tg-blog-post tg-blog-sidebar-box tg-shop-product-list-widget mb-40">
                                    <h5 class="tg-blog-sidebar-title mb-25">Featured Products</h5>

                                    @foreach ($featuredProducts as $key => $fp)
                                        <div class="tg-blog-post-item d-flex mb-20 featured-product">
                                            <div class="tg-blog-post-thumb me-2">
                                                <a href="{{ route('product.detail', $fp->slug) }}">
                                                    <img src="{{ $fp->getFirstMediaUrl('featured') }}"
                                                        alt="{{ $fp->title }}">
                                                </a>
                                            </div>
                                            <div class="tg-blog-post-content w-100">
                                                <h4 class="tg-blog-post-title mb-0">
                                                    <a href="{{ route('product.detail', $fp->slug) }}">
                                                        {{ Str::limit($fp->title, 40, '...') }}
                                                    </a>
                                                </h4>
                                                @include('frontend::components.avg-ratting', [
                                                    'rating' => $fp->approved_reviews_avg_ratting,
                                                    'class' => 'd-flex list-unstyled',
                                                ])
                                                <div class="display-price">
                                                    {!! $fp->getDisplayPrice() !!}
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach

                                </div>
                            @endif

                        </div>
                    </div>
                    <div class="col-xl-9 col-lg-8">
                        <div class="tg-shop-product-wrap mb-50">
                            <div class="tg-listing-box-filter tg-shop-product-filter mb-25">
                                <div class="row align-items-center">
                                    <div class="col-lg-5 col-md-5 mb-15">
                                        <div class="tg-listing-box-number-found">
                                            <span class="custom_pagination_count"></span>
                                        </div>
                                    </div>
                                    <div class="col-lg-7 col-md-7 mb-15">
                                        <div class="tg-listing-box-view-type d-flex justify-content-end align-items-center">
                                            <div class="tg-listing-select-price">
                                                <select id="sortSelect" class="select nice-select">
                                                    <option value="default">Default</option>
                                                    <option value="latest">Latest</option>
                                                    <option value="oldest">Oldest</option>
                                                    <option value="price_low">Price Low</option>
                                                    <option value="price_high">Price High</option>
                                                    <option value="trending">Trending</option>
                                                    <option value="popular">Popular</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div id="filter_data"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- tg-shop-area-end -->

        <!-- newsletter-area -->
        @include('frontend::components.newsletter_area')
        <!-- newsletter-area-end -->

    </main>
    <!-- main-area-end -->
@endsection

@push('script')
    <script src="{{ asset('common/js/nice-select.js') }}"></script>
    <script script src="https://cdn.jsdelivr.net/npm/gasparesganga-jquery-loading-overlay@2.1.7/dist/loadingoverlay.min.js">
    </script>
    <script>
        document.addEventListener('alpine:init', () => {
            Alpine.data('data', () => ({
                page: 1,
                filters: {
                    search: `{{ request('search', '') }}`,
                    category_ids: {!! json_encode(request('category_ids', [])) !!},
                    brand_ids: {!! json_encode(request('brand_ids', [])) !!},

                    max_price: `{{ request('max_price', '') }}`,
                    min_price: `{{ request('min_price', '') }}`,
                    amenity_ids: {!! json_encode(request('amenity_ids', [])) !!},
                    languages: {!! json_encode(request('languages', [])) !!},
                    sort_by: `{{ request('sort_by', '') }}`,
                    ratings: {!! json_encode(request('ratings', [])) !!},
                },
                defaultFilters: {
                    search: '',
                    category_ids: [],
                    brand_ids: [],

                    max_price: '',
                    min_price: '',
                    amenity_ids: [],
                    languages: [],
                    sort_by: '',
                    ratings: []
                },
                get isFilterChanged() {
                    return JSON.stringify(this.filters) !== JSON.stringify(this
                        .defaultFilters);
                },
                updateURL(value) {
                    var currentURL = window.location.protocol + "//" + window.location.host +
                        window
                        .location.pathname;
                    var queryParams = [];

                    // Loop through the object and only add non-empty values to the query params
                    for (const [key, val] of Object.entries(value)) {
                        // Check if the value is an array
                        if (Array.isArray(val)) {
                            if (val.length > 0) {
                                // Append [] to key for array values
                                val.forEach(item => {
                                    queryParams.push(
                                        `${encodeURIComponent(key)}%5B%5D=${encodeURIComponent(item)}`
                                    );
                                });
                            }
                        }
                        // Check if the value is not empty, and not equal to the default value
                        else if (val !== null && val !== undefined && val !== '') {
                            queryParams.push(
                                `${encodeURIComponent(key)}=${encodeURIComponent(val)}`);
                        }
                    }

                    // Join all query parameters with '&'
                    var queryString = queryParams.length > 0 ? '?' + queryParams.join('&') : '';

                    var newURL = currentURL + queryString;

                    // Update the browser's URL
                    window.history.pushState({
                        path: newURL
                    }, '', newURL);
                },
                resetFilters() {
                    this.filters = JSON.parse(JSON.stringify(this.defaultFilters));
                    this.$nextTick(() => {
                        $('#sortSelect').val('default').niceSelect('update');
                    });
                },
                init() {
                    this.$watch('filters', (value, oldValue) => {
                        this.page = 1;
                        this.fetchProducts();
                        this.updateURL({
                            ...this.filters
                        });
                    });
                    this.initializeAll();
                },
                fetchProducts() {
                    that = this;

                    this.loadingOverlay("show");

                    $.ajax({
                        url: `{{ route('shop.load') }}`,
                        method: 'GET',
                        data: {
                            ...this.filters,
                            page: this.page
                        },
                        success: function(response) {
                            $('#filter_data').html(response.view);
                            $('.custom_pagination_count').html(response
                                .customPaginationCount);
                        },
                        error: function(xhr, status, error) {
                            console.error(error);
                        },
                        complete: function() {
                            that.loadingOverlay("hide");
                        }
                    });
                },
                searchServices() {
                    this.page = 1;
                    this.fetchProducts();
                    this.updateURL({
                        ...this.filters
                    });
                },
                initializeAll() {
                    $(document).on('click', '.pagination a', (event) => {
                        event.preventDefault();
                        const page = $(event.target).attr('href').split('page=')[1];
                        this.page = page;
                        this.fetchProducts();
                        $("html, body").animate({
                            scrollTop: 0
                        }, 500);
                    });

                    this.$nextTick(() => {
                        $('#sortSelect').niceSelect();
                        $('#sortSelect').on('change', (e) => {
                            this.filters.sort_by = e.target.value;
                        });
                        $('#sortSelect').val(this.filters.sort_by || 'default')
                            .niceSelect(
                                'update');

                    });

                    this.loadingOverlay("show");

                    this.fetchProducts();
                },
                loadingOverlay(action = 'show', target = false) {
                    const options = {
                        size: 50,
                        maxSize: 50,
                        minSize: 50
                    };

                    if (target && typeof target === 'string') {
                        $(target).LoadingOverlay(action, options);
                    } else {
                        $.LoadingOverlay(action, options);
                    }
                }
            }));
        });
    </script>
    <script src="{{ asset('frontend/assets/js/cart.js') }}"></script>
@endpush