@extends('front.main')
@section('content')
    <!-- Category section -->
    <div class="main-content">
        <div class="similar-products">
            <h1>Our <span>Catalogue</span></h1>
            <div class="similar-product-list">
                @foreach ($products as $product)
                    <div class="similar-product-card" style="">
                        <div class="similar-product-image">
                            <img src="{{ asset('storage/' . $product->mainImage->file_path ?? null) }}"
                                alt="No Product Image">
                        </div>
                        <div class="similar-product-info">
                            <h4>{{ $product->name }}</h4>
                              <p>{{ $product->overview}}</p><br>
                            {{-- <p class="price">${{ number_format($product->starting_price ?? 0) }} to
                                ${{ number_format($product->highest_price ?? 0) }}+ <br>per carat</p> --}}

                            {{-- <button class="add-to-cart-btn"
                                onclick="addToCart({{ $product->id }},'{{ $product->name }}',{{ $product->starting_price }})">Add
                                to
                                Cart</button> --}}
                            {{-- <a class="add-to-cart-btn" href="addtocart?productId={{ $product->id }}"
                                onclick="addToCart({{ $product->id }},'{{ $product->name }}',{{ $product->starting_price }})">Add
                                to
                                Cart</a> --}}
                            <a class="add-to-cart-btn" href="/gem/product/{{ $product->id }}" class="buy-button">Add to Cart</a>
                            {{-- <a class="buy-button">Buy Now</a> --}}
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div><br><br>



    <!-- pagination -->

    @if ($products->hasPages())
    <section id="pagination" class="section-p1">
        {{-- Previous Page Link --}}
        @if ($products->onFirstPage())
            <a class="prev-page disabled" style="margin:5px;"> < </a>
        @else
            <a href="{{ $products->previousPageUrl() }}" class="prev-page" rel="prev" style="margin:5px;"> < </a>
        @endif

        {{-- Pagination Elements --}}
        @foreach ($products->links()->elements as $element)
            {{-- "Three Dots" Separator --}}
            @if (is_string($element))
                <span class="disabled">{{ $element }}</span>
            @endif

            {{-- Array Of Links --}}
           @if (is_array($element))
                @foreach ($element as $page => $url)
                    @if ($page == $products->currentPage())
                        {{-- Make current page clickable as well --}}
                        <a href="{{ $url }}" class="page-number active" style="margin:5px;">{{ $page }}</a>
                    @else
                        <a href="{{ $url }}" class="page-number" style="margin:5px;">{{ $page }}</a>
                    @endif
                @endforeach
            @endif
        @endforeach

        {{-- Next Page Link --}}
        @if ($products->hasMorePages())
            <a href="{{ $products->nextPageUrl() }}" class="next-page" rel="next"> > </a>
        @else
            <a class="next-page disabled"> > </a>
        @endif
    </section>
@endif
@endsection
@push('script')
    <script>
        const productsPerPage = 6;
        let currentPage = 1;

        // Function to display products of a specific page
        function showPage(page) {
            const productList = document.querySelectorAll('.similar-product-card');
            const totalProducts = productList.length;
            const totalPages = Math.ceil(totalProducts / productsPerPage);

            // Correct page number if it's out of bounds
            if (page < 1) page = 1;
            if (page > totalPages) page = totalPages;

            currentPage = page; // Set the current page

            // Hide all products initially
            productList.forEach(product => product.style.display = 'none');

            // Calculate start and end indices for the current page
            const startIndex = (page - 1) * productsPerPage;
            const endIndex = startIndex + productsPerPage;

            // Display only the products for the current page
            for (let i = startIndex; i < endIndex && i < totalProducts; i++) {
                productList[i].style.display = 'block';
            }
        }

        // Function to go to the next page
        function nextPage() {
            showPage(currentPage + 1);
        }

        // Event listener to show the first page on load
        document.addEventListener('DOMContentLoaded', () => {
            showPage(1);
        });
    </script>
@endpush