@extends('Website.Includes.header', ['meta_Details' => $meta_details])
@section('content')
    <section class="about-sec1">
        <img src="{{ asset('WebsiteAssets/assets/img/counter-bg-1.jpg') }}" alt="Background Image" class="bg-image" />
        <div class="container">
            <div class="text-center">
                <h2>Shop</h2>
                <p><span>Sydney Quality Meats:</span> Shop</p>
            </div>
        </div>
    </section>
    <!-- Section 1 End -->
    <div class="container pt-5 pb-4">
        <div class="results-container d-lg-none">
            <!-- @if ($featuredproducts->total() > 0)
                <p class="results-text" id="results-counter">
                    Showing {{ $featuredproducts->firstItem() }} - {{ $featuredproducts->lastItem() }}
                    of {{ $featuredproducts->total() }} Results
                </p>
            @else
                <p class="results-text" id="results-counter">
                    Showing 0 - 0 of 0 results
                </p>
            @endif -->

            <!-- Sort Form (Hidden) -->
            <form id="sortForm" action="{{ url('/shop') }}" method="GET">
                <input type="hidden" name="sort" id="sortInput">
                @if (request('category_id'))
                    <input type="hidden" name="category_id" value="{{ request('category_id') }}">
                @endif
                @if (request('search'))
                    <input type="hidden" name="search" value="{{ request('search') }}">
                @endif
                @if (request('min_price'))
                    <input type="hidden" name="min_price" value="{{ request('min_price') }}">
                @endif
                @if (request('max_price'))
                    <input type="hidden" name="max_price" value="{{ request('max_price') }}">
                @endif
            </form>

            <div class="d-flex gap-3 align-items-center">
                <!-- All Products Button -->
                <div class="All_Products_Button">
                    <button type="button" onclick="window.location.href='{{ url('shop') }}'">
                        Clear Filter
                    </button>
                </div>

                <!-- Dropdown Wrapper for Sorting -->
                <!-- <div class="custom-dropdown">
                                                                                                                <div class="dropdown-header" onclick="toggleDropdown()">
                                                                                                                    @php
                                                                                                                        // Display the text for the currently active sort
                                                                                                                        $sortLabel = 'Default Sorting';
                                                                                                                        if ($sortOrder == 'price-low') {
                                                                                                                            $sortLabel = 'Price: Low to High';
                                                                                                                        } elseif ($sortOrder == 'price-high') {
                                                                                                                            $sortLabel = 'Price: High to Low';
                                                                                                                        } elseif ($sortOrder == 'name-az') {
                                                                                                                            $sortLabel = 'Name: A to Z';
                                                                                                                        } elseif ($sortOrder == 'name-za') {
                                                                                                                            $sortLabel = 'Name: Z to A';
                                                                                                                        }
                                                                                                                    @endphp
                                                                                                                    {{ $sortLabel }} <i class="fa-solid fa-angle-down"></i>
                                                                                                                </div>
                                                                                                                <div class="dropdown-options">
                                                                                                                    <div class="dropdown-option @if ($sortOrder == 'default') active @endif"
                                                                                                                         data-value="default">
                                                                                                                        Default sorting
                                                                                                                    </div>
                                                                                                                    <div class="dropdown-option @if ($sortOrder == 'price-low') active @endif"
                                                                                                                         data-value="price-low">
                                                                                                                        Price: Low to High
                                                                                                                    </div>
                                                                                                                    <div class="dropdown-option @if ($sortOrder == 'price-high') active @endif"
                                                                                                                         data-value="price-high">
                                                                                                                        Price: High to Low
                                                                                                                    </div>
                                                                                                                    <div class="dropdown-option @if ($sortOrder == 'name-az') active @endif"
                                                                                                                         data-value="name-az">
                                                                                                                        Name: A to Z
                                                                                                                    </div>
                                                                                                                    <div class="dropdown-option @if ($sortOrder == 'name-za') active @endif"
                                                                                                                         data-value="name-za">
                                                                                                                        Name: Z to A
                                                                                                                    </div>
                                                                                                                </div>
                                                                                                            </div> -->
            </div>
        </div>
    </div>

    <!-- About Section 2 -->
    <section data-aos="fade-up" class="about-sec2 position-relative">
        <div class="container">
            <div class="row about-sec2-row about-sec2-row232">
                <div class="col-12 col-lg-8 col-xl-9 order-2 order-lg-1">
                    <section class="Sec7">
                        <div class="Shop_Sec2_Main_Div">
                            <!-- Header Section -->
                            <div class="text-center mb-8">
                                <div class="results-container Display___none">
                                    <!-- Sort Form (Hidden) -->
                                    <form id="sortForm" action="{{ url('/shop') }}" method="GET">
                                        <input type="hidden" name="sort" id="sortInput">
                                        @if (request('category_id'))
                                            <input type="hidden" name="category_id" value="{{ request('category_id') }}">
                                        @endif
                                        @if (request('search'))
                                            <input type="hidden" name="search" value="{{ request('search') }}">
                                        @endif
                                        @if (request('min_price'))
                                            <input type="hidden" name="min_price" value="{{ request('min_price') }}">
                                        @endif
                                        @if (request('max_price'))
                                            <input type="hidden" name="max_price" value="{{ request('max_price') }}">
                                        @endif
                                    </form>

                                    <div class="d-flex gap-3 align-items-center">
                                        <!-- Dropdown Wrapper for Sorting -->
                                        <!-- <div class="custom-dropdown">
                                                                                                                <div class="dropdown-header" onclick="toggleDropdown()">
                                                                                                                    @php
                                                                                                                        // Display the text for the currently active sort
                                                                                                                        $sortLabel = 'Default Sorting';
                                                                                                                        if ($sortOrder == 'price-low') {
                                                                                                                            $sortLabel = 'Price: Low to High';
                                                                                                                        } elseif ($sortOrder == 'price-high') {
                                                                                                                            $sortLabel = 'Price: High to Low';
                                                                                                                        } elseif ($sortOrder == 'name-az') {
                                                                                                                            $sortLabel = 'Name: A to Z';
                                                                                                                        } elseif ($sortOrder == 'name-za') {
                                                                                                                            $sortLabel = 'Name: Z to A';
                                                                                                                        }
                                                                                                                    @endphp
                                                                                                                    {{ $sortLabel }} <i class="fa-solid fa-angle-down"></i>
                                                                                                                </div>
                                                                                                                <div class="dropdown-options">
                                                                                                                    <div class="dropdown-option @if ($sortOrder == 'default') active @endif"
                                                                                                                         data-value="default">
                                                                                                                        Default sorting
                                                                                                                    </div>
                                                                                                                    <div class="dropdown-option @if ($sortOrder == 'price-low') active @endif"
                                                                                                                         data-value="price-low">
                                                                                                                        Price: Low to High
                                                                                                                    </div>
                                                                                                                    <div class="dropdown-option @if ($sortOrder == 'price-high') active @endif"
                                                                                                                         data-value="price-high">
                                                                                                                        Price: High to Low
                                                                                                                    </div>
                                                                                                                    <div class="dropdown-option @if ($sortOrder == 'name-az') active @endif"
                                                                                                                         data-value="name-az">
                                                                                                                        Name: A to Z
                                                                                                                    </div>
                                                                                                                    <div class="dropdown-option @if ($sortOrder == 'name-za') active @endif"
                                                                                                                         data-value="name-za">
                                                                                                                        Name: Z to A
                                                                                                                    </div>
                                                                                                                </div>
                                                                                                            </div> -->
                                    </div>
                                </div>

                                <!-- Product Grid -->
                                <div class="row justify-content-start">
                                    @if ($featuredproducts->isEmpty())
                                        <div class="col-12">
                                            <span class="mt-4" style="color: #666; font-size: 14px;">No products found </span>
                                        </div>
                                    @else

                                                                @foreach ($featuredproducts as $product)

                                                                                            @php
                                                                                                // Grab price from productMeta
                                                                                                $priceMeta = $product->productMeta->firstWhere('option', '_price');
                                                                                                $stockMeta = $product->productMeta->firstWhere('option', '_stock_status');
                                                                                                $price = $priceMeta ? $priceMeta->value : '0';
                                                                                                $stock = $stockMeta ? $stockMeta->value : '';
                                                                                            @endphp


                                                                                            <div class="col-12 col-sm-6 col-xl-4 mb-4">
                                                                                                <div class="card product-card">
                                                                                                    <div class="position-relative Sec7_product-image">
                                                                                                        <!-- Product Image -->
                                                                                                        <img src="{{ asset($product->featured_image ?: 'default/default.jpg') }}"
                                                                                                            alt="{{ $product->title }}" class="card-img-top" />

                                                                                                        <!-- Show "Out of Stock" Badge -->
                                                                                                        @php
                                                                                                            $stock = $product->productMeta->firstWhere('option', '_stock_status')->value ?? 'in_stock';
                                                                                                        @endphp
                                                                                                        @if ($stock != 'in_stock')
                                                                                                            <span class="badge bg-danger position-absolute rounded-0"
                                                                                                                style="top: 10px; left: 10px;">
                                                                                                                Out of Stock
                                                                                                            </span>
                                                                                                        @endif
                                                                                                    </div>
                                                                                                    <div class="card-body text-center p-2">
                                                                                                        <!-- Product Name -->
                                                                                                        <div>
                                                                                                            <a class="Product_Links"
                                                                                                                href="/product-detail/{{ $product->permalink }}">
                                                                                                                <h5 class="Product_card-title mb-0">{{ $product->title }}</h5>
                                                                                                            </a>
                                                                                                        </div>

                                                                                                        <!-- Product Price -->
                                                                                                        @php
                                                                                                            $priceMeta = $product->productMeta->firstWhere('option', '_price');
                                                                                                            $weightMeta = $product->productMeta->firstWhere('option', '_weight');
                                                                                                            $price = $priceMeta ? $priceMeta->value : 0;
                                                                                                            $weight = $weightMeta ? $weightMeta->value : 0;
                                                                                                            $discountData = $product->discount_data ?? null;
                                                                                                        @endphp

                                                                                                        @if ($discountData)
                                                                                                                <!-- Display Discounted Price -->
                                                                                                                <p class="card-text text-muted my-2">
                                                                                                                    <span class="text-danger"><del>${{ $price }}</del></span>
                                                                                                                    <span
                                                                                                                        class="card-text text-muted">${{ $discountData['discounted_price'] }}</span>
                                                                                                                </p>
                                                                                                                <p class="card-text text-muted">{{ $weight }} KG</p>
                                                                                                        @else
                                                                                                                <!-- Display Original Price -->
                                                                                                                <p class="card-text text-muted my-2">${{ $price }}</p>
                                                                                                                <p class="card-text text-muted">{{ $weight }} KG</p>
                                                                                                        @endif

                                                                                                        <!-- Show "Out of Stock" Message Instead of Add to Cart -->
                                                                                                        @if ($stock == 'in_stock')
                                                                                                            <form action="{{ route('cart.store') }}" method="POST">
                                                                                                                @csrf
                                                                                                                <input type="hidden" name="pId" value="{{ $product->id }}">
                                                                                                                <input type="hidden" name="title" value="{{ $product->title }}">
                                                                                                                <input type="hidden" name="amount"
                                                                                                                    value="{{ $discountData ? $discountData['discounted_price'] : $price }}">
                                                                                                                <input type="hidden" name="featuredImage"
                                                                                                                    value="{{ $product->featured_image }}">
                                                                                                                <input type="hidden" name="quantity" value="1">
                                                                                                                <input type="hidden" name="weight" value="{{$weight}}">
                                                                                                                <button class="btn btn-danger w-50 add-to-cart-btn" type="submit">
                                                                                                                    ADD TO CART
                                                                                                                </button>
                                                                                                            </form>
                                                                                                        @else
                                                                                                            <button class="btn btn-dark add-to-cart-btn w-50" disabled>
                                                                                                                OUT OF STOCK
                                                                                                            </button>
                                                                                                        @endif
                                                                                                    </div>
                                                                                                </div>
                                                                                            </div>
                                                                @endforeach

                                    @endif

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

                <!-- Sidebar -->
                <div class="col-12 col-lg-4 col-xl-3 order-1 order-lg-2 mb-5 mb-lg-0">
                    <!-- Searcorm -->
                    <div class="search-container_Div">
                        <form action="{{ url('/shop') }}" method="GET" class="search-container">
                            <input type="text" class="form-control" name="search" placeholder="Search product"
                                value="{{ request('search') }}" />
                            <button type="submit" class="icon-button">
                                <svg class="search-icon" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                    <path
                                        d="M11.742 10.344a6.5 6.5 0 1 
                                                                                                                 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85
                                                                                                                 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007
                                                                                                                 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1
                                                                                                                 1-11 0 5.5 5.5 0 0 1 11 0z" />
                                </svg>
                            </button>

                            <!-- Preserve sort & category if present -->
                            @if (request('sort'))
                                <input type="hidden" name="sort" value="{{ request('sort') }}">
                            @endif
                            @if (request('category_id'))
                                <input type="hidden" name="category_id" value="{{ request('category_id') }}">
                            @endif
                            @if (request('min_price'))
                                <input type="hidden" name="min_price" value="{{ request('min_price') }}">
                            @endif
                            @if (request('max_price'))
                                <input type="hidden" name="max_price" value="{{ request('max_price') }}">
                            @endif
                        </form>
                    </div>

                    <!-- Price Range Slider -->
                    <div class="price-slider-container mt-4">
                        <h4>Price</h4>
                        <div class="price-range-slider">
                            <form action="{{ url('/shop') }}" method="GET">
                                @if (request('search'))
                                    <input type="hidden" name="search" value="{{ request('search') }}">
                                @endif
                                @if (request('sort'))
                                    <input type="hidden" name="sort" value="{{ request('sort') }}">
                                @endif
                                @if (request('category_id'))
                                    <input type="hidden" name="category_id" value="{{ request('category_id') }}">
                                @endif

                                <input type="hidden" name="min_price" id="min_price" value="{{ request('min_price', 10) }}">
                                <input type="hidden" name="max_price" id="max_price"
                                    value="{{ request('max_price', 1000) }}">

                                <div id="slider-range" class="range-bar"></div>
                                <p class="range-value">
                                    <input type="text" id="amount" readonly />
                                    <button type="submit">Apply</button>
                                </p>
                            </form>
                        </div>
                    </div>

                    <!-- Categories List -->
                    <div class="search-container_Div mt-4">
                        <h2 class="search-container_Header">Categories</h2>
                        <div class="wp-widget-group__inner-blocks">
                            <ul style="text-decoration: none; list-style: none; padding: 0;">
                                @foreach($categories as $category)
                                    {{-- Assign "active-category" class to the <div> if this category is selected --}}
                                        <div class="Shop_Cat_List @if(request('category_id') == $category->id) active-category @endif"
                                            data-url="{{ url('/shop') }}?{{ http_build_query(array_merge(request()->except('page', 'category_id'), ['category_id' => $category->id])) }}">
                                            <li>
                                                <a href="{{ url('/shop') }}?{{ http_build_query(array_merge(request()->except('page', 'category_id'), ['category_id' => $category->id])) }}"
                                                    class="text-capitalize category-link" style="text-decoration: none;">
                                                    {{ $category->title }}
                                                </a>
                                            </li>
                                        </div>
                                @endforeach
                            </ul>
                        </div>
                    </div>

                    <!-- All Products Button -->
                    <div class="All_Products_Button d-none d-lg-block">
                        <button type="button" onclick="window.location.href='{{ url('shop') }}'">
                            Clear Filter
                        </button>
                    </div>

                </div>
            </div>
            @if ($featuredproducts->total() > 0)
                <p class="results-text py-3 ps-sm-5 ps-lg-4" id="results-counter">
                    Showing {{ $featuredproducts->firstItem() }} - {{ $featuredproducts->lastItem() }}
                    of {{ $featuredproducts->total() }} Results
                </p>
            @else
                <p class="results-text py-3 ps-sm-5 ps-lg-4" id="results-counter">
                    Showing 0 - 0 of 0 results
                </p>
            @endif
        </div>
    </section>

    <!-- Custom Pagination -->
    <section class="mb-4">
        <div class="container ">
            <nav aria-label="Page navigation">
                <ul class="pagination justify-content-center pb-5 gap-1">
                    {{-- Previous Page Link --}}
                    @if ($featuredproducts->onFirstPage())
                        <li class="page-item disabled" aria-disabled="true" aria-label="@lang('pagination.previous')">
                            <span class="page-link" aria-hidden="true">‹</span>
                        </li>
                    @else
                        <li class="page-item">
                            <a class="page-link"
                                href="{{ $featuredproducts->previousPageUrl() . '&' . http_build_query(request()->except('page')) }}"
                                rel="prev" aria-label="@lang('pagination.previous')">‹</a>
                        </li>
                    @endif

                    {{-- Page Number Links --}}
                    @for ($i = 1; $i <= $featuredproducts->lastPage(); $i++)
                        @if ($i == $featuredproducts->currentPage())
                            <li class="page-item active" aria-current="page">
                                <span class="page-link">{{ $i }}</span>
                            </li>
                        @else
                            <li class="page-item">
                                <a class="page-link"
                                    href="{{ $featuredproducts->url($i) . '&' . http_build_query(request()->except('page')) }}">{{ $i }}</a>
                            </li>
                        @endif
                    @endfor

                    {{-- Next Page Link --}}
                    @if ($featuredproducts->hasMorePages())
                        <li class="page-item">
                            <a class="page-link"
                                href="{{ $featuredproducts->nextPageUrl() . '&' . http_build_query(request()->except('page')) }}"
                                rel="next" aria-label="@lang('pagination.next')">›</a>
                        </li>
                    @else
                        <li class="page-item disabled" aria-disabled="true" aria-label="@lang('pagination.next')">
                            <span class="page-link" aria-hidden="true">›</span>
                        </li>
                    @endif
                </ul>
            </nav>
        </div>
    </section>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const searchInput = document.querySelector('input[name="search"]');
            if (searchInput) {
                searchInput.addEventListener('keydown', function (event) {
                    if (event.key === 'Enter') {
                        event.preventDefault(); // only if you want to prevent default first
                        this.form.submit();
                    }
                });
            }
        });
    </script>
    <!-- jQuery UI Slider Initialization -->
    <script>
        function toggleDropdown() {
            document.querySelector('.custom-dropdown').classList.toggle('active');
        }

        // Close dropdown when clicking outside
        document.addEventListener("click", function (event) {
            let dropdown = document.querySelector(".custom-dropdown");
            if (!dropdown.contains(event.target)) {
                dropdown.classList.remove("active");
            }
        });

        // Listen for click on sorting options:
        document.querySelectorAll('.dropdown-option').forEach(option => {
            option.addEventListener('click', function () {
                // Get the chosen sort value and set it in hidden input
                const sortValue = this.getAttribute('data-value');
                document.getElementById('sortInput').value = sortValue;
                // Submit the form
                document.getElementById('sortForm').submit();
            });
        });

        document.addEventListener("DOMContentLoaded", function () {
            document.querySelectorAll(".Shop_Cat_List").forEach(function (categoryDiv) {
                categoryDiv.addEventListener("click", function () {
                    let url = categoryDiv.getAttribute("data-url");
                    if (url) {
                        window.location.href = url;
                    }
                });
            });
        });

    </script>

    @push('scripts')
    <script>
        $(document).ready(function () {
            let currentMin = {{ request('min_price', 1) }};
            let currentMax = {{ request('max_price', 1000) }};

            $("#slider-range").slider({
                range: true,
                min: 1,
                max: 5000,
                values: [currentMin, currentMax],
                slide: function (event, ui) {
                    // Update the amount display and hidden input values when the slider is moved
                    $("#amount").val("$" + ui.values[0] + " - $" + ui.values[1]);
                    $("#min_price").val(ui.values[0]);
                    $("#max_price").val(ui.values[1]);
                }
            });

            // Manually handle touch events
            $("#slider-range").on('touchstart', function (event) {
                var touch = event.originalEvent.touches[0];
                var simulatedEvent = document.createEvent('MouseEvent');
                simulatedEvent.initMouseEvent({
                    type: 'mousedown',
                    clientX: touch.clientX,
                    clientY: touch.clientY
                });
                touch.target.dispatchEvent(simulatedEvent);
                event.preventDefault();
            });

            $("#slider-range").on('touchmove', function (event) {
                var touch = event.originalEvent.touches[0];
                var simulatedEvent = document.createEvent('MouseEvent');
                simulatedEvent.initMouseEvent({
                    type: 'mousemove',
                    clientX: touch.clientX,
                    clientY: touch.clientY
                });
                touch.target.dispatchEvent(simulatedEvent);
                event.preventDefault();
            });

            $("#slider-range").on('touchend', function (event) {
                var touch = event.originalEvent.changedTouches[0];
                var simulatedEvent = document.createEvent('MouseEvent');
                simulatedEvent.initMouseEvent({
                    type: 'mouseup',
                    clientX: touch.clientX,
                    clientY: touch.clientY
                });
                touch.target.dispatchEvent(simulatedEvent);
                event.preventDefault();
            });

            $("#amount").val("$" + $("#slider-range").slider("values", 0) + " - $" + $("#slider-range").slider("values", 1));
        });
    </script>
    @endpush
@endsection