@extends('front.main')
@section('content')
    <!-- Main Product Detail Card -->
    <div class="product-detail-card">
        <div class="product-image">
            {{-- <img src="images/ruby.jpg" alt="Main Product"> --}}
            <img src="{{ asset('storage/' . $product->mainImage->file_path ?? null) }}">
        </div>
        <div class="product-info">
            <h2>{{ $product->name }}</h2>
            {{-- <p class="price">${{ number_format($product->starting_price ?? 0) }} to
                ${{ number_format($product->highest_price ?? 0) }}+ <br>per carat</p> --}}

            <p class="description">{{ $product->description }}</p>
            <p class="description-uses"><b>Uses :</b>{{ $product->use }}</p>

            <form action="{{ route('cart.store') }}" method="post">
                @csrf
                  <div class="product-quantity">
                    <label for="quantity"><b>Style:</b></label>
                    <select name="product_details_id" id="style" style="padding: 5px; font-size: 14px; border: 1px solid; border-radius: 5px;">
                        @foreach($product->packagingDetail as $details)
                            <option value="{{ $details->id }}">{{ $details->style }} | ${{ number_format($details->price) }}/carat</option>
                        @endforeach
                    </select>
                </div>
                <div class="product-quantity">
                    <label for="quantity"><b>Quantity:</b></label>
                    <input type="number" id="quantity" name="qty" value="1" min="1">
                    <input type="hidden" name="productId" value="{{ $product->id }}">
                </div>
                <button type="submit" class="buy-button">Add To Cart</button>
            </form>
        </div>
    </div><br><br><br>


    <!-- related silder -->
    <div class="slider-container">
        <h2>Related <span> Gemstones</span> </h2>
        <div class="slider">
            @foreach ($product_list as $single_product)
                <div class="product-card" style="max-width: 300px;">
                        <img src="{{ asset('storage/' . $single_product->mainImage->file_path) }}" alt="Product 2"
                            style="min-height: 260px;">
                        <h3>{{ $single_product->{'product_name_' . Lang::locale()} }}</h3>
                        <p style="margin-bottom: 10%;">{{ $single_product->overview}}
                            </p>
                    <a href="/gem/product/{{ $single_product->id }}" class="buy-button mt-auto px-4 py-2">Buy Now</a>
                </div>
            @endforeach
        </div>
        <!-- Navigation Buttons -->
        <button class="nav-btn prev-btn" onclick="prevSlide()">
            < </button>
                <button class="nav-btn next-btn" onclick="nextSlide()"> > </button>
    </div>
@endsection
@push('script')
<script>
  // slider od related products
        var product_slider = document.querySelector('.slider');
        var productCards = document.querySelectorAll('.product-card');
        var currentIndex = 0;
        var totalCards = productCards.length;
        var cardWidth = productCards[0].offsetWidth + 20;

        // Function to go to the next slide
        function nextSlide() {
            if (currentIndex < totalCards - 1) {
                currentIndex++;
            } else {
                currentIndex = 0;
            }
            updateSlider();
        }

        // Function to go to the previous slide
        function prevSlide() {
            if (currentIndex > 0) {
                currentIndex--;
            } else {
                currentIndex = totalCards - 1;
            }
            updateSlider();
        }

        // Function to update the slider position
        function updateSlider() {
            product_slider.style.transform = 'translateX(' + (-cardWidth * currentIndex) + 'px)';
        }

</script>
@endpush