@extends('pages.layouts.app')

@section('content')
    @push('styles')
        <style>
            .product-image {
                width: 100%;
                height: auto;
                aspect-ratio: 5 / 3;
                /* Corresponds to 500px by 300px */
                object-fit: cover;
            }
        </style>
    @endpush
    <div id="product"
        class="single-product-page single-product-content product-design-default tabs-location-standard tabs-type-tabs meta-location-add_to_cart reviews-location-tabs product-summary-shadow product-no-bg product type-product post-9045 status-publish first outofstock product_cat-audio product_cat-wiwu product_tag-airpods has-post-thumbnail shipping-taxable purchasable product-type-variable">

        <div class="container">

            <div class="woocommerce-notices-wrapper"></div>
            <div class="row product-image-summary-wrap">
                <div class="product-image-summary col-lg-12 col-12 col-md-12">
                    <div class="row product-image-summary-inner">
                        <div class="col-lg-6 col-12 col-md-6 product-images">
                            <div
                                class="woocommerce-product-gallery woocommerce-product-gallery--with-images woocommerce-product-gallery--columns-4 images wd-has-thumb thumbs-position-bottom images image-action-zoom">
                                <div class="wd-carousel-container wd-gallery-images">
                                    <div class="wd-carousel-inner">


                                        <figure class="woocommerce-product-gallery__wrapper wd-carousel wd-grid"
                                            style="--wd-col-lg:1;--wd-col-md:1;--wd-col-sm:1;">
                                            <div class="wd-carousel-wrap">



                                                @forelse ($product->images as $image)
                                                    <div class="wd-carousel-item">
                                                        <figure class="woocommerce-product-gallery__image">
                                                            <a href="{{ asset('storage/' . $image->image) }}"
                                                                data-fancybox="gallery">
                                                                <img loading="lazy"
                                                                    src="{{ asset('storage/' . $image->image) }}"
                                                                    alt="{{ $product->name }}" class="product-image" />
                                                            </a>
                                                        </figure>
                                                    </div>
                                                @empty
                                                    <div class="wd-carousel-item">
                                                        <figure class="woocommerce-product-gallery__image">
                                                            <a href="{{ asset('empty.jpg') }}" data-fancybox="gallery">
                                                                <img loading="lazy" src="{{ asset('empty.jpg') }}"
                                                                    class="product-image" />
                                                            </a>
                                                        </figure>
                                                    </div>
                                                @endforelse





                                        </figure>

                                        <div class="wd-nav-arrows wd-pos-sep wd-hover-1 wd-custom-style wd-icon-1">
                                            <div class="wd-btn-arrow wd-prev wd-disabled">
                                                <div class="wd-arrow-inner"></div>
                                            </div>
                                            <div class="wd-btn-arrow wd-next">
                                                <div class="wd-arrow-inner"></div>
                                            </div>
                                        </div>
                                        {{--
                                        <div class="product-additional-galleries">
                                            <div
                                                class="wd-show-product-gallery-wrap wd-action-btn wd-style-icon-bg-text wd-gallery-btn">
                                                <a href="#" rel="nofollow"
                                                    class="woodmart-show-product-gallery"><span>Click to enlarge</span></a>
                                            </div>
                                        </div> --}}

                                    </div>

                                    <div class="wd-nav-pagin-wrap text-center wd-style-shape wd-custom-style">
                                        <ul class="wd-nav-pagin"></ul>
                                    </div>
                                </div>


                            </div>
                        </div>
                        <div class="col-lg-6 col-12 col-md-6 text-left summary entry-summary">
                            <div class="summary-inner set-mb-l reset-last-child">
                                <div class="single-breadcrumbs-wrapper">
                                    <div class="single-breadcrumbs">
                                        <div class="wd-breadcrumbs">
                                            <nav class="woocommerce-breadcrumb" aria-label="Breadcrumb"> <a
                                                    href="{{ route('home') }}" class="breadcrumb-link">
                                                    {{ __('Home') }} </a>
                                                <a href="{{ route('productsBycategory', $product->category_id) }}"
                                                    class="breadcrumb-link">
                                                    {{ __('By Category') }} </a>
                                                <span class="breadcrumb-last">
                                                    {{ app()->getLocale() === 'ar' ? $product->name_ar : $product->name }}</span>
                                            </nav>
                                        </div>


                                    </div>
                                </div>


                                <h1 class="product_title entry-title wd-entities-title">

                                    {{ app()->getLocale() === 'ar' ? $product->name_ar : $product->name }}
                                </h1>

                                <p class="price"><span class="woocommerce-Price-amount amount">

                                    <bdi>
                                        <span class="woocommerce-Price-currencySymbol">
                                            {{ app()->getLocale() === 'ar' ? 'دأ ' : 'JD' }}
                                        </span>

                                        @if($product->price_after_discount)
                                            <!-- Display the old price with a strikethrough and the new price -->
                                            <del>{{ $product->price }}</del>
                                            {{ $product->price_after_discount }}
                                        @else
                                            <!-- Display only the original price if no discount -->
                                            {{ $product->price }}
                                        @endif
                                    </bdi>



                                            </span>
                                </p>
                                <div class="woocommerce-product-details__short-description">
                                    <table width="301">
                                        <tbody>
                                            <tr>

                                                <td width="301">
                                                    <strong>{{ app()->getLocale() === 'ar' ? $product->description_ar : $product->description }}</strong>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>


                                <div class="product-colors">
                                    <h4>{{ __('Available Colors') }}</h4>
                                    @if ($product->colors->isNotEmpty())
                                        @foreach ($product->colors->chunk(5) as $colorChunk)
                                            <ul style="display: flex; gap: 10px; margin-bottom: 10px;">
                                                @foreach ($colorChunk as $color)
                                                    <li style="display: flex; align-items: center; gap: 10px;">
                                                        <input type="radio" name="selected_color"
                                                            id="color_{{ $color->id }}" value="{{ $color->color->id }}"
                                                            style="margin-right: 10px;">
                                                        <label for="color_{{ $color->id }}"
                                                            style="display: flex; align-items: center; gap: 10px;">
                                                            <div
                                                                style="width: 20px; height: 20px; background-color: {{ $color->color->hex_code }}; border: 1px solid #000;">
                                                            </div>
                                                            <span>{{ app()->getLocale() === 'ar' ? $color->name_ar : $color->name }}</span>
                                                        </label>
                                                    </li>
                                                @endforeach
                                            </ul>
                                        @endforeach
                                    @else
                                        <p>{{ __('No colors available') }}</p>
                                    @endif
                                </div>


                                <style>
                                    .product-colors ul {
                                        list-style: none;
                                        padding: 0;
                                        margin: 0;
                                    }

                                    .product-colors li {
                                        margin-bottom: 5px;
                                    }
                                </style>


                                <div class="product-note">
                                    <input type="text" id="product_note" class="input-text" name="note"
                                        placeholder="{{ __('Add a note for this product') }}">
                                </div>









                                {{-- <div class="wd-shipping-progress-bar wd-style-bordered">
					<div class="wd-progress-bar wd-free-progress-bar">
			<div class="progress-msg">
				Your order qualifies for free shipping!			</div>
			<div class="progress-area">
				<div class="progress-bar" style="width: 100%"></div>
			</div>
		</div>
				</div> --}}


                                <div class="single_variation_wrap">
                                    <div class="woocommerce-variation single_variation"></div>
                                    <div class="woocommerce-variation-add-to-cart variations_button">


                                        <div class="quantity">

                                            <input type="button" value="-" class="minus2" id="minus" />


                                            <input type="number" id="quantity" class="input-text qty text" value="1"
                                                aria-label="Product quantity" min="1" name="quantity" step="1"
                                                placeholder="" inputmode="numeric" autocomplete="off">

                                            <input type="button" value="+" class="plus2" id="plus" />

                                        </div>

                                        <button type="submit" data-product-id="{{ $product->id }}" data-quantity="1"
                                            class="single_add_to_cart_button button add-to-cart-link">{{ __('Add to cart') }}</button>

                                        {{-- <button id="wd-add-to-cart" type="submit" name="wd-add-to-cart" value="9045"
                                                class="wd-buy-now-btn button alt"> {{ __('Buy now') }} </button> --}}


                                    </div>
                                </div>



                                @auth

                                    <div
                                        class="wd-wishlist-btn wd-action-btn wd-style-text {{ $favorite ? 'wd-wishlist-icon-full' : 'wd-wishlist-icon' }}">
                                        <a href="{{ $favorite ? 'javascript:void(0)' : route('addtofavorite', $product->id) }}"
                                            class="{{ $favorite ? 'disabled-link' : '' }}"
                                            {{ $favorite ? 'aria-disabled="true"' : '' }}>
                                            <span>{{ $favorite ? __('Already In Favorites') : __('Add To Favorites') }}</span>
                                        </a>
                                    </div>

                                @endauth



                                <div class="wd-product-count wd-visits-count wd-style-with-bg wd-hide">
                                    <span class="wd-count-icon"></span><span class="wd-count-number">0</span>
                                    <span class="wd-count-msg">People watching this product now!</span>
                                </div>

                                <div class="product_meta">


                                    <span class="posted_in"><span class="meta-label">{{ __('Categories') }}:</span> <a
                                            href="{{ route('productsBycategory', $product->id) }}"
                                            rel="tag">{{ app()->getLocale() === 'ar' ? $product->category->name_ar : $product->category->name }}</a>
                                    </span>

                                </div>

                                <div
                                    class=" wd-social-icons icons-design-default icons-size-small color-scheme-dark social-share social-form-circle product-share wd-layout-inline text-left">

                                    <span class="wd-label share-title">{{ __('Share') }}:</span>

                                    <a rel="noopener noreferrer nofollow"
                                        href="https://www.facebook.com/wholesale.jomarket/" target="_blank"
                                        class=" wd-social-icon social-facebook" aria-label="Facebook social link">
                                        <span class="wd-icon"></span>
                                    </a>

                                    <a rel="noopener noreferrer nofollow" href="https://www.instagram.com/elgomla_market"
                                        target="_blank" class=" wd-social-icon social-instagram"
                                        aria-label="X social link">
                                        <span class="wd-icon"></span>
                                    </a>





                                </div>

                            </div>
                        </div>
                    </div><!-- .summary -->
                </div>


            </div>


        </div>



        <div class="container related-and-upsells">
            <div class="wd-products-element with-title related-products">

                <h4 class="wd-el-title title element-title">
                    {{ __('Related products') }} </h4>




                <div class="products wd-products grid-columns-6 elements-grid wd-grid-g wd-products-with-bg"
                    data-source="shortcode" data-columns="6"
                    style="--wd-col-lg:6;--wd-col-md:4;--wd-col-sm:2;--wd-gap-lg:6px;">


                    @forelse ($relatedproducts as $product)
                        <div
                            class="wd-product wd-hover-base wd-hover-with-fade wd-col product-grid-item product product-no-swatches type-product post-6253 status-publish first instock product_cat-audio has-post-thumbnail shipping-taxable purchasable product-type-simple">


                            <div class="product-wrapper">
                                <div class="content-product-imagin"></div>
                                <a href="{{ route('productDetails', $product->id) }}">
                                    <div class="product-element-top wd-quick-shop">
                                        <img loading="lazy" decoding="async" width="768" height="768"
                                            src="{{ $product->images && $product->images->isNotEmpty() ? asset('storage/' . $product->images->first()->image) : asset('empty.jpg') }}"
                                            class="attachment-medium_large size-medium_large"
                                            style="width: 150px; height: 150px;"
                                            sizes="(max-width: 768px) 100vw, 768px" />
                                    </div>
                                </a>

                                <div class="product-element-bottom product-information">
                                    <h3 class="wd-entities-title"><a
                                            href="{{ route('productDetails', $product->id) }}">{{ app()->getLocale() === 'ar' ? $product->name_ar : $product->name }}</a>
                                    </h3>
                                    <div class="product-rating-price">
                                        <div class="wrapp-product-price">

                                            <span class="price"><span class="woocommerce-Price-amount amount"><bdi><span
                                                            class="woocommerce-Price-currencySymbol">{{ app()->getLocale() === 'ar' ? 'دأ ' : 'JD' }}</span>{{ $product->price }}</bdi></span></span>
                                        </div>
                                    </div>
                                    <div class="fade-in-block wd-scroll">
                                        <div class="hover-content wd-more-desc">
                                            <div class="hover-content-inner wd-more-desc-inner">
                                            </div>
                                            <a href="#" rel="nofollow" class="wd-more-desc-btn"
                                                aria-label="Read more description"><span></span></a>
                                        </div>
                                        <div class=" wd-bottom-actions">
                                            <div class="wrap-wishlist-button">
                                                <div
                                                    class="wd-wishlist-btn wd-action-btn wd-style-icon {{ $product->favorites->contains('user_id', auth()->id()) ? 'wd-wishlist-icon-full' : 'wd-wishlist-icon' }}">
                                                    <a href="{{ $product->favorites->contains('user_id', auth()->id()) ? 'javascript:void(0)' : route('addtofavorite', $product->id) }}"
                                                        class="{{ $product->favorites->contains('user_id', auth()->id()) ? 'disabled-link' : '' }}"
                                                        {{ $product->favorites->contains('user_id', auth()->id()) ? 'aria-disabled="true"' : '' }}>
                                                        <span>{{ __('Add To Favorites') }}</span>
                                                    </a>

                                                </div>
                                            </div>
                                            <div class="wd-add-btn wd-add-btn-replace">
                                                <a data-product-id="{{ $product->id }}"
                                                    class="button add-to-cart-link"><span>{{ __('Add to cart') }}</span></a>

                                                </a>
                                            </div>
                                            <div class="wrap-quickview-button">
                                                <div class=" wd-action-btn wd-style-icon wd-quick-view-icon">
                                                    <a
                                                        href="{{ route('productDetails', $product->id) }}">{{ __('View Details') }}</a>
                                                </div>
                                            </div>
                                        </div>



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

                    @empty
                        <div class="wd-empty-message">
                            <h2 class="wd-empty-message-title">{{ __('No related products found') }}</h2>
                        </div>
                    @endforelse


                </div>



            </div>

        </div>

    </div><!-- #product-9045 -->

    </div>
@endsection