@extends('front.layouts.app')
@section('content')
<style>
    .img-thumbnail {
        width: 100%;
        height: auto;
    }

    .cursor-pointer {
        cursor: pointer;
    }
</style>

<nav aria-label="breadcrumb" class="pagebtitle">
    <div class="container">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ route('front.home') }}"><i class="far fa-home"></i></a></li>
            <li class="breadcrumb-item"><a href="{{ route('front.all.product') }}">Product</a></li>
            <li class="breadcrumb-item active" aria-current="page">Product Detail</li>
        </ol>
    </div>
</nav>


<section class="main-prodtl">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-6">
                <!-- Main Carousel -->
                <div class="swiper proDtlSlider">
                    <div class="swiper-wrapper">
                        @foreach($product->image as $key => $image)
                        <div class="swiper-slide">
                            <img src="{{ $image->getUrl() }}" class="d-block w-100" alt="Product Image">
                        </div>
                        @endforeach
                    </div>
                    <div class="proDtl-button proDtl-button-next swiper-button-next"></div>
                    <div class="proDtl-button proDtl-button-prev swiper-button-prev"></div>
                </div>
                <!-- <button class="carousel-control-prev" type="button" data-bs-target="#productCarousel"
                    data-bs-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">Previous</span>
                </button>
                <button class="carousel-control-next" type="button" data-bs-target="#productCarousel"
                    data-bs-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">Next</span>
                </button> -->
                <!-- Thumbnail Gallery -->
                <div class="swiper proDtlSliderThumb mt-2" thumbsSlider="">
                    <div class="swiper-wrapper">
                        @foreach($product->image as $key => $image)
                        <div class="swiper-slide">
                            <img src="{{ $image->getUrl() }}" class="img-thumbnail cursor-pointer"
                                data-bs-target="#productCarousel" data-bs-slide-to="{{ $key }}" alt="Thumbnail Image">
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>



            <div class="col-lg-6">
                <form action="{{route('front.add.to.cart')}}" method="post">
                    @csrf
                    <div class="prodtl-txt">
                        <h2 class="section-heading">{{ $product->name }}</h2>
                        <h6>
                            <span>
                                <i class="fa fa-star" aria-hidden="true"></i>
                                <i class="fa fa-star" aria-hidden="true"></i>
                                <i class="fa fa-star" aria-hidden="true"></i>
                                <i class="fa fa-star" aria-hidden="true"></i>
                                <i class="fa fa-star" aria-hidden="true"></i>
                            </span>
                            3539 Reviews
                        </h6>
                        @php
                        $formattedPrice = \App\Helper\PriceHelper::formatPrice($product->price);
                        $formattedSalePrice = \App\Helper\PriceHelper::formatPrice($product->sale_price);
                        @endphp
                        <ul class="list-unstyled stckst">
                            <li>
                                Price $

                                @if($product->sale == 1)
                                {{ $formattedSalePrice  }}
                                <del>{{ $formattedPrice }}</del>
                                @else
                                {{ $formattedPrice }}
                                @endif
                            </li>
                            @if(Auth::check() && Auth::user()->hasRole('wholesaler'))
                            <p>
                                Wholesale Price: {{$product->dist_price ?? 'No Price'}}
                            </p>
                            @endif
                            <li><i class="fa fa-check" aria-hidden="true"></i>In stock</li>
                        </ul>

                        <input type="hidden" name="product_id" value="{{$product->id}}">
                        <div class="ad-crtst ad-crtstwo">
                            <ul class="list-unstyled">
                                <li>
                                    <div class="proCounter">
                                        <span class="minus" data-item-id="{{ $product['id'] }}">-</span>
                                        <input type="text" name="quantity" class="quantity-input" value="1" readonly>
                                        <span class="plus" data-item-id="{{ $product['id'] }}">+</span>
                                    </div>
                                </li>
                                <br>
                                <li>
                                    <a class="themeBtn">
                                        <input type="submit" value="Add to Cart">
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        <div class="row mt-5">
            <div class="col-md-12 col-lg-12">
                <div class="ratd-txt">
                    <h2>Product Discription</h2>
                    <p>{!! $product->description !!}</p>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection
@push('script')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const plusButtons = document.querySelectorAll('.plus');
        const minusButtons = document.querySelectorAll('.minus');

        plusButtons.forEach(button => {
            button.addEventListener('click', function() {
                const itemId = this.getAttribute('data-item-id');
                const input = this.parentElement.querySelector('.quantity-input');
                const newQuantity = parseInt(input.value) + 1;
                input.value = newQuantity;
                updateQuantity(itemId, newQuantity);
            });
        });

        minusButtons.forEach(button => {
            button.addEventListener('click', function() {
                const itemId = this.getAttribute('data-item-id');
                const input = this.parentElement.querySelector('.quantity-input');
                const newQuantity = Math.max(parseInt(input.value) - 1,
                    1); // Ensure quantity doesn't go below 1
                input.value = newQuantity;
                updateQuantity(itemId, newQuantity);
            });
        });
    });
</script>
@endpush