@extends('layouts.front-layout')

@section('content')
    <!-- Begin: Main Slider -->
    <div class="innerBan">
        <img src="{{asset('front-assets/images/innerbnr1.png')}}" class="w-100" alt="">
        <div class="overlay">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-md-12">
                        <h2>Products detail</h2>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <section class="product-detail padd-y pb-0 product_data">
        <div class="container">
            <div class="product-detail-title text-center">
                <h5>Home / Face / Essence Toner</h5>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <div class="swiper productSliderpage">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide" id="main-product-image">
                                <figure>
                                    <img id="product-image"
                                         src="{{ $single_product_detail->productImage('product_main_image') ?: asset('upload/No-Image.png') }}"
                                         class="img-fluid" alt="image">
                                </figure>
                            </div>

                            @if ($single_product_detail->singleEntryProductVariation)
                                @foreach ($single_product_detail->singleEntryProductVariation as $variation)
                                    @foreach ($variation->productVariations as $variationImg)
                                        @if ($variationImg->productVariationImage()->first())
                                            <div class="swiper-slide">
                                                <figure>
                                                    <img
                                                        src="{{ $variationImg->productVariationImage()->first()->getUrl() }}"
                                                        class="img-fluid" alt="image"/>
                                                </figure>
                                            </div>
                                        @endif
                                    @endforeach
                                @endforeach
                            @else
                                <h3 class="text-center">Product Gallery Image Not Found</h3>
                            @endif
                        </div>
                    </div>

                    @if ($single_product_detail->singleEntryProductVariation)
                        <div thumbsSlider="" class="swiper productSlideThumb">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide">
                                    <figure>
                                        <img
                                            src="{{ $single_product_detail->productImage('product_main_image') ?: asset('upload/No-Image.png') }}"
                                            class="img-fluid" alt="image">
                                    </figure>
                                </div>

                                @foreach ($single_product_detail->singleEntryProductVariation as $variation)
                                    @foreach ($variation->productVariations as $variationImg)
                                        @if ($variationImg->productVariationImage()->first())
                                            <div class="swiper-slide">
                                                <figure>
                                                    <img
                                                        src="{{ $variationImg->productVariationImage()->first()->getUrl() }}"
                                                        class="img-fluid" alt="variation_image"/>
                                                </figure>
                                            </div>
                                        @endif
                                    @endforeach
                                @endforeach
                            </div>
                        </div>
                    @endif
                </div>



                <div class="col-md-6">
                    <div class="detail__content">
                        <div class="detail__title">
                            <h4>{{$single_product_detail->name ? : ''}}</h4>
                            <p>[ti_wishlists_addtowishlist]</p>
                        </div>
                        <div class="detail__review">
                            <ul class="review-stars">
                                <li><a href=""><i class="far fa-star"></i></a></li>
                                <li><a href=""><i class="far fa-star"></i></a></li>
                                <li><a href=""><i class="far fa-star"></i></a></li>
                                <li><a href=""><i class="far fa-star"></i></a></li>
                                <li><a href=""><i class="far fa-star"></i></a></li>
                            </ul>
                            <p>(<span>1</span> review)</p>
                        </div>
                        <h6 class="detail__price" id="price-display">
                            @if($single_product_detail->price == null)
                                @if ($single_product_detail->productVariation->first())

                                    <del>
                                        $ {{ $single_product_detail->productVariation->first()->variant_compare_at_price ? : '' }}</del>
                                    $ {{ $single_product_detail->productVariation->first()->variant_price ? : '' }}

                                @endif
                            @else

                                @if($single_product_detail->product_discount == null)
                                    $ {{ $single_product_detail->price ? : '' }}
                                @else
                                    <del>$ {{ $single_product_detail->price ? : '' }}</del>
                                    $ {{ $single_product_detail->product_discount ? : '' }}

                                @endif

                            @endif

                        </h6>
                        @if ($single_product_detail && $single_product_detail->singleEntryProductVariation)
                            @foreach ($single_product_detail->singleEntryProductVariation as $entry)

                                <span>{{ $entry->variationName->variation_name ?? 'No Variation Name' }}</span>
                                <br>
                                <br>

                                @if ($entry->productVariations)
                                    <select id="variation-select">
                                        @foreach ($entry->productVariations as $variation)
                                            <option value="{{ $variation->id }}"
                                                    data-image="{{ $variation->productVariationImage()->first() ? $variation->productVariationImage()->first()->getUrl() : '' }}">
                                                {{ $variation->option_name ?? 'No Variation Name' }}
                                            </option>
                                        @endforeach
                                    </select>
                                @else
                                    <p>No Product Variations Available</p>
                                @endif
                            @endforeach
                        @endif


                        <h4 class="stock-count">{{$single_product_detail->stock > 0 ? 'In Stock' : 'Out of Stock'}}</h4>
                        <div class="detail__quantity">
                            <h5>Quantity</h5>
                            <div class="detail__quantity__wrap">
                                <div class="number quantity" data-stock="{{ $single_product_detail->stock ? : '' }}">
                                    <input type="hidden" class="qty-input product_id"
                                           value="{{$single_product_detail->id}}">
                                    <input type="hidden" name="product_variation_id" class="product_variation_id">

                                    <span class="minus decrement-btn-p-d"><i class="fas fa-minus"></i></span>
                                    <input type="text" id="quantity" class="qty_input" value="1" readonly>
                                    <span class="plus increment-btn-p-d"><i class="fas fa-plus"></i></span>
                                </div>
                                @if($single_product_detail->stock > 0)
                                    <button type="button" class="cart__btn add_to_cart_btn">Add To Cart</button>
                                @else
                                    <button type="button" class="cart__btn disabled">Add To Cart</button>

                                @endif
                            </div>
                            {!! $single_product_detail->description ?:''!!}
                        </div>


                        <div class="detail__delivery">
                            <h5><img src="{{asset('front-assets/images/delivery-car.png')}}" alt="image"
                                     class="img-fluid">Estimated Delivery:
                                <span>Within 7-10 Business days</span></h5>
                            <h5><img src="{{asset('front-assets/images/shipping-cart.png')}}" alt="image"
                                     class="img-fluid">Free
                                shipping: <span>On orders over $60 and above</span></h5>
                        </div>
                        <div class="detail__sku">
                            <h6>SKU: ETO50035</h6>
                            <div class="detail__sku__categories">
                                <h6>Categories: <span>{{$single_product_detail->category->category_name ? : ''}}</span>
                                </h6>
                            </div>
                        </div>
                        <div class="detail__paymentoption">
                            <p>Online payment option</p>
                            <img src="{{asset('front-assets/images/payment-option.png')}}" alt="image"
                                 class="img-fluid">
                        </div>
                    </div>
                </div>


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

    <section class="product-info padd-y">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="product-info__tabs">
                        <ul class="nav nav-pills mb-4" id="pills-tab" role="tablist">
                            <li class="nav-item">
                                <a class="nav-link active" id="pills-description-tab" data-toggle="pill"
                                   href="#pills-description" role="tab" aria-controls="pills-description"
                                   aria-selected="true">Description</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" id="pills-information-tab" data-toggle="pill"
                                   href="#pills-information" role="tab" aria-controls="pills-information"
                                   aria-selected="false">Additional
                                    information</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" id="pills-reviews-tab" data-toggle="pill" href="#pills-reviews"
                                   role="tab" aria-controls="pills-reviews" aria-selected="false">Reviews (1)</a>
                            </li>
                        </ul>
                        <div class="tab-content" id="pills-tabContent">
                            <div class="tab-pane fade show active" id="pills-description" role="tabpanel"
                                 aria-labelledby="pills-description-tab">
                                <div class="row">
                                    <div class="col-lg-5">
                                        <div class="product__desimg">
                                            <figure>
                                                <img
                                                    src="{{ $single_product_detail->productImage('product_main_image') ?: asset('upload/No-Image.png') }}"
                                                    alt="image"
                                                    class="img-fluid">
                                            </figure>
                                            <figure>
                                                <img
                                                    src="{{ $single_product_detail->productImage('product_main_image') ?: asset('upload/No-Image.png') }}"
                                                    alt="image"
                                                    class="img-fluid">
                                            </figure>
                                        </div>
                                    </div>
                                    <div class="col-lg-7">
                                        <div class="product__descontent">
                                            <h4>Product description</h4>
                                            {!! $single_product_detail->description ? : '' !!}
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="tab-pane fade" id="pills-information" role="tabpanel"
                                 aria-labelledby="pills-information-tab">
                                <div class="row">
                                    <div class="col-lg-5">
                                        <div class="product__desimg">
                                            <figure>
                                                <img
                                                    src="{{ $single_product_detail->productImage('product_main_image') ?: asset('upload/No-Image.png') }}"
                                                    alt="image"
                                                    class="img-fluid">
                                            </figure>
                                            <figure>
                                                <img
                                                    src="{{ $single_product_detail->productImage('product_main_image') ?: asset('upload/No-Image.png') }}"
                                                    alt="image"
                                                    class="img-fluid">
                                            </figure>
                                        </div>
                                    </div>
                                    <div class="col-lg-7">
                                        @dd( $single_product_detail->additional_info);
                                        <div class="product__descontent">
                                            <h4>Product details</h4>
                                            {!! $single_product_detail->additional_info ? : '' !!}
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane fade" id="pills-reviews" role="tabpanel"
                                 aria-labelledby="pills-reviews-tab">
                                <div class="row">
                                    <div class="col-lg-5">
                                        <div class="product__desimg">
                                            <figure>
                                                <img
                                                    src="{{ $single_product_detail->productImage('product_main_image') ?: asset('upload/No-Image.png') }}"
                                                    alt="image"
                                                    class="img-fluid">
                                            </figure>
                                            <figure>
                                                <img
                                                    src="{{ $single_product_detail->productImage('product_main_image') ?: asset('upload/No-Image.png') }}"
                                                    alt="image"
                                                    class="img-fluid">
                                            </figure>
                                        </div>
                                    </div>
                                    <div class="col-lg-7">
                                        <div class="product__descontent">
                                            <h4>Product details</h4>
                                            {!! $single_product_detail->description ? : '' !!}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="related-product">
        <div class="container g-4">
            <h2 class="secHeading">Related products</h2>
            <div class="row g-4">
                @forelse($get_related_product as $related_product)
                    <div class="col-md-3">
                        <a href="{{ route('product.detail', ['slug' => $related_product->slug] ?: '') }}">
                            <figure class="related-product-img">
                                <img
                                    src="{{
                        $related_product->productImage('product_main_image') ?:
                        ($related_product->productVariation->first() && $related_product->productVariation->first()->productVariationImage()->first()
                            ? $related_product->productVariation->first()->productVariationImage()->first()->getUrl()
                            : asset('upload/No-Image.png'))
                    }}"
                                    alt="image">
                                <h3>{{ $related_product->name ?: '' }}</h3>

                                @if ($related_product->price == null)
                                    @if ($related_product->productVariation->first())
                                        <del>
                                            $ <span>{{ $related_product->productVariation->first()->variant_compare_at_price ?: '' }}</span>
                                        </del>
                                        $ {{ $related_product->productVariation->first()->variant_price ?: '' }}
                                    @endif
                                @else
                                    @if ($related_product->product_discount == null)
                                        <span> ${{ $related_product->price ?: '' }}</span>
                                    @else
                                        <del>${{ $related_product->price ?: '' }}</del>
                                        ${{ $related_product->product_discount ?: '' }}
                                    @endif
                                @endif
                            </figure>
                        </a>
                    </div>
                @empty
                    <p>No related products found.</p>
                @endforelse

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

@endsection
@section('script')
    <script>
        $('#variation-select').on('change', function () {
            var selectedOption = $(this).find('option:selected');
            var selectedImageUrl = selectedOption.data('image');

            if (selectedImageUrl) {
                $('#product-image').attr('src', selectedImageUrl);
            }
        });


        $('#variation-select').on('change', function () {
            var selectedOption = $(this).find('option:selected');
            var selectedVariationImage = selectedOption.data('image');
            var selectedVariationId = $(this).val();
            $('.product_variation_id').val(selectedVariationId); //


            $.ajax({
                url: '{{ route('selected.product.variation', ['id' => '__ID__']) }}'.replace('__ID__', selectedVariationId),
                method: 'GET',
                success: function (data) {
                    if (data) {

                        $('#price-display').html(data.price_html);
                    }
                }
            });

            if (selectedVariationImage) {
                $('#product-image').attr('src', selectedVariationImage);
                $('#main-product-image').show();
            }
        });

    </script>
@endsection