@php
    $initialVariant = $product->variants->first();
@endphp

<section class="productPage"
         x-data="{
    cartQuantities: @js($cartQuantities),
    qty: 1,
    selectedVariantId: @entangle('selectedVariantId'),
    mainImg: '{{ asset('storage/' . $initialVariant->cover_image) }}',
    thumbnails: @js($initialVariant->images ?? []),
    variants: @js($product->variants->map(fn($v) => [
        'id' => $v->id,
        'image' => asset('storage/' . $v->cover_image),
        'images' => $v->images,
        'price' => $v->real_price,
        'stock' => $v->stock,
        'summary' => $v->getAttributeSummary(),
    ])),

   increase() {
    const max = this.variants.find(v => v.id == this.selectedVariantId)?.stock || 0;
    if (this.qty >= max) {
        Livewire.dispatch('over-stock-limit');
        return;
    }
        this.qty++;
        this.cartQuantities[this.selectedVariantId] = this.qty;
    },

    decrease() {
        if (this.qty > 1) {
            this.qty--;
            this.cartQuantities[this.selectedVariantId] = this.qty;
        }
    },
    setImage(img) {
            this.mainImg = '{{ asset('storage') }}/' + img;
        },
        updateImages() {
            const variant = this.variants.find(v => v.id == this.selectedVariantId);
            this.mainImg = variant?.image || '';
            this.thumbnails = variant?.images || [];
        }
}"
         x-init="
    updateImages();
    qty = cartQuantities[selectedVariantId] || 1;
"
         x-effect="updateImages(); qty = cartQuantities[selectedVariantId] || 1">

    <div class="container">
        <div class="row">
            <ol class="breadcrumb">
                <li><a href="/" itemprop="item"><span itemprop="name">Home</span></a></li>
                <li><a href="https://www.ardropshipping.com/mens-fashion">Men's Fashion</a></li>
                <li>{{ $product->title }}</li>
            </ol>

            <div class="col-md-12 col-lg-9 col-md-9 col-sm-12 col-xs-12">
                <div class="row" id="product">
                    <div class="col-md-5 col-sm-6 col-xs-12 deal-gallery-box" id="gallery">
                        <div class="xzoom-container">
                            <img class="xzoom" id="xzoom-default" :src="mainImg"/>
                            <div class="xzoom-thumbs">
                                <template x-for="img in thumbnails" :key="img">
                                    <a href="#" @click.prevent="setImage(img)">
                                        <img class="xzoom-gallery" width="80" :src="'{{ asset('storage') }}/' + img">
                                    </a>
                                </template>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-7 col-sm-6 col-12 single-details">
                        <div class="row">
                            <div class="col-md-9 col-sm-9 col-9">
                                <h1 class="single-product-title">{{ $product->title }}</h1>
                                <p class="text-muted mb-2">
                                    <i class="fa fa-store"></i> Sold by:
                                    <strong>{{ @$product->wholesalerProfile->store_title }}</strong>
                                </p>

                                <div class="form-group mt-2">
                                    <label for="variant" class="control-label">Select Variant:</label>
                                    <select x-model="selectedVariantId" class="form-control">
                                        @foreach($product->variants()->active()->get() as $variant)
                                            <option value="{{ $variant->id }}">
                                                {{ $variant->getAttributeSummary() }} —
                                                PKR {{ number_format($variant->real_price) }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-3 col-sm-3 col-3">
                                <img src="https://www.ardropshipping.com/images/products_qrcodes/qrcode_27442.png"
                                     class="img-responsive pull-right w75">
                            </div>
                        </div>
                        <hr>


                        <div class="row mb-2 align-items-center">
                            <div class="col-auto pe-0">
                                <h4 class="product-price-compact mb-0">
                                    PKR <span
                                        x-text="variants.find(v => v.id == selectedVariantId)?.price.toLocaleString()"></span>
                                </h4>
                            </div>

                            <div class="col-auto px-2 small text-muted">
                                <span x-text="variants.find(v => v.id == selectedVariantId)?.summary"></span>
                                | Stock: <strong x-text="variants.find(v => v.id == selectedVariantId)?.stock"></strong>
                            </div>
                            <div class="col-auto ms-auto d-flex align-items-center gap-2">
                                <a class="product-heart-large" href="#"
                                   wire:click.prevent='toggleWishlist({{ $product->id }})'>
                                    <i class="fa-lg"
                                       :class="{'fa-solid fa-heart text-danger': @js($is_wishlist),'fa-regular fa-heart text-muted': !@js($is_wishlist)}"></i>
                                </a>
                                <span
                                    class="fw-bold fs-6"
                                    :class="variants.find(v => v.id == selectedVariantId)?.stock > 0 ? 'text-success' : 'text-danger'"
                                    x-text="variants.find(v => v.id == selectedVariantId)?.stock > 0 ? 'In Stock' : 'Out of Stock'">
                                </span>
                            </div>

                        </div>
                        <hr>
                        <div class="row align-items-end">
                            <div class="col-md-6 col-6">
                                <label class="qunty-label">Select Quantity<small class="tred">*</small></label>
                                <div class="input-group">
                                    <span class="input-group-addon btn-green"
                                          :class="{ 'disabled-qty': variants.find(v => v.id == selectedVariantId)?.stock <= 0 }"
                                          @click="if (variants.find(v => v.id == selectedVariantId)?.stock > 0) decrease()">
                                        <i class="fa fa-minus"></i> </span>


                                    <input type="text" readonly :value="qty"
                                           class="form-control input-number text-center"
                                           :disabled="variants.find(v => v.id == selectedVariantId)?.stock <= 0">

                                    <span class="input-group-addon btn-green"
                                          :class="{ 'disabled-qty': variants.find(v => v.id == selectedVariantId)?.stock <= 0 }"
                                          @click="if (variants.find(v => v.id == selectedVariantId)?.stock > 0) increase()">
                                        <i class="fa fa-plus"></i>
                                    </span>
                                    <!-- Trash icon if item is in cart -->
                                    <template x-if="cartQuantities[selectedVariantId]">
                                        <button class="btn btn-sm btn-outline-danger ms-2"
                                                @click="deleteFromCart(selectedVariantId)">
                                            <i class="fa fa-cart-arrow-down"></i> Remove
                                        </button>
                                    </template>
                                </div>

                            </div>

                            <div class="col-md-6 col-6 marginBottom5">
                                <button
                                    type="button"
                                    id="add_to_cart_btn"
                                    class="btn btn-block text-capitalize btn-green"
                                    :disabled="variants.find(v => v.id == selectedVariantId)?.stock <= 0"
                                    :class="{ 'btn-disabled': variants.find(v => v.id == selectedVariantId)?.stock <= 0 }"
                                    @click="$wire.call('addToCart', qty)">
                                    add to cart
                                </button>
                            </div>
                        </div>
                        <hr>
                    </div>
                </div>
            </div>

            <div id="sidebar" class=" col-lg-3 col-md-3 col-sm-12 col-xs-12 ">
                <div class="padding10 border-box">
                    <div class="row">
                        <div class="col-xs-12">
                            <h3 class="tbmargin5 text-centertorange">DELIVERY DETAILS</h3>
                        </div>
                    </div>
                    <hr class="tbmargin5">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="media">
                                <div class="media-left media_icon">
                                    <i class="fa fa-dollar torange tmargin7 fa-lg" aria-hidden="true"></i>
                                </div>
                                <div class="media-body">
                                    <p class="media-heading bmargin0 text-red ">Charges</p>
                                    <small>Rs.200</small>
                                </div>
                            </div>
                        </div>
                    </div>
                    <hr class="tbmargin5">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="media">
                                <div class="media-left media_icon">
                                    <i class="fa fa-clock torange tmargin7 fa-lg" aria-hidden="true"></i>
                                </div>
                                <div class="media-body">
                                    <p class="media-heading bmargin0 text-red">Time</p>
                                    <small>2 - 5 days</small>
                                </div>
                            </div>
                        </div>
                    </div>
                    <hr class="tbmargin5">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="media">
                                <div class="media-left media_icon">
                                    <i class="fa fa-credit-card-alt torange tmargin7 fa-lg" aria-hidden="true"></i>
                                </div>
                                <div class="media-body">
                                    <p class="media-heading bmargin0 text-red">Mode</p>
                                    <small>Cash on delivery available</small>
                                </div>
                            </div>
                        </div>
                    </div>
                    <hr class="tbmargin5">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="media">
                                <div class="media-left media_icon">
                                    <i class="fa fa-repeat fa-lg tmargin7 torange" aria-hidden="true"></i>
                                </div>
                                <div class="media-body">
                                    <p class="media-heading text-red">Packaging Charges</p>
                                    <small>Rs. 30</small>
                                </div>

                            </div>
                        </div>
                    </div>
                    <hr class="tbmargin5">
                    <div class="row">
                        <div class="col-xs-12">
                            <div class="media ">
                                <div class="media-left media_icon">
                                    <i class="fa fa-shield fa-lg tmargin7 torange" aria-hidden="true"></i>
                                </div>
                                <div class="media-body">
                                    <p class="media-heading bmargin0 text-red">Return Charges</p>
                                    <small>No Additional charges</small>
                                </div>
                            </div>
                        </div>
                    </div>
                    <hr>
                </div>
            </div>
        </div>

        <div class="tab-section">
            <div class="row">
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-9 col-xl-9 col-xxl-9">
                    <div class="tab-wrp">
                        <ul class="nav nav-tabs" id="myTab" role="tablist">
                            <li class="nav-item" role="presentation">
                                <button class="nav-link active" id="product-tab" data-bs-toggle="tab"
                                        data-bs-target="#product-tab-pane" type="button" role="tab"
                                        aria-controls="product-tab-pane" aria-selected="true">Product Details
                                </button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="specifications-tab" data-bs-toggle="tab"
                                        data-bs-target="#specifications-tab-pane" type="button" role="tab"
                                        aria-controls="specifications-tab-pane"
                                        aria-selected="false">Specifications
                                </button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="Launch-tab" data-bs-toggle="tab"
                                        data-bs-target="#Launch-tab-pane" type="button" role="tab"
                                        aria-controls="Launch-tab-pane"
                                        aria-selected="false">High Price/ Launch Dispute
                                </button>
                            </li>
                        </ul>
                        <div class="tab-content" id="myTabContent">
                            <div class="tab-pane fade show active" id="product-tab-pane" role="tabpanel"
                                 aria-labelledby="home-tab" tabindex="0">
                                <div class="product-tab-body-wrapper">
                                    {!! $product->description !!}
                                </div>
                            </div>

                            <div class="tab-pane fade" id="specifications-tab-pane" role="tabpanel"
                                 aria-labelledby="profile-tab" tabindex="0">
                                <div class="product-tab-body-wrapper">
                                    {!! $product->specifications !!}
                                </div>
                            </div>

                            <div class="tab-pane fade" id="Launch-tab-pane" role="tabpanel"
                                 aria-labelledby="launch-tab" tabindex="0">
                                <div class="product-tab-body-wrapper">
                                    {!! $product->dispute_description !!}
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
                {{--                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-3 col-xl-3 col-xxl-3">--}}
                {{--                    <div class="col-md-12">--}}
                {{--                        <h4 class="h4 opensans600 content-heading text-uppercase torange">--}}
                {{--                            Store Best Sellers--}}
                {{--                        </h4>--}}
                {{--                        @foreach( \App\Models\Product::where('wholesaler_profile_id', $product->wholesaler_profile_id)->where('id', '!=', $product->id)->with(['variants' => function ($q) {--}}
                {{--                                $q->orderBy('id'); // or any logic to get primary variant--}}
                {{--                                 }])->take(8)->get() as $similarProduct)--}}
                {{--                            @php--}}
                {{--                                $variant = $similarProduct->variants->first();--}}
                {{--                            @endphp--}}



                {{--                            <div id="deal-box" class="dealbox-50">--}}
                {{--                                <div class="row">--}}
                {{--                                    <div class="col-md-12">--}}
                {{--                                        <a class=""--}}
                {{--                                           href="{{ route('product.detail', $variant->product->slug) }}">--}}
                {{--                                            <img style="aspect-ratio:1;object-fit:cover;width:100%"--}}
                {{--                                                 class="img-responsive"--}}
                {{--                                                 src="{{ asset('storage/' . $variant->cover_image) }}"--}}
                {{--                                                 alt="{{ $variant->product->title }}">--}}
                {{--                                        </a>--}}
                {{--                                        <div class=" item-box-image-bg"></div>--}}
                {{--                                    </div>--}}
                {{--                                </div>--}}
                {{--                                <div class="row">--}}
                {{--                                    <div class="col-md-12 title">--}}
                {{--                                        <a class="green deal-title"--}}
                {{--                                           href="{{ route('product.detail', $variant->product->slug) }}">--}}
                {{--                                            {{ $variant->product->title }}--}}
                {{--                                            <p>{{$variant->getAttributeSummary()}}</p>--}}
                {{--                                        </a>--}}
                {{--                                    </div>--}}
                {{--                                </div>--}}
                {{--                            </div>--}}
                {{--                        @endforeach--}}

                {{--                    </div>--}}
                {{--                </div>--}}
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-3 col-xl-3 col-xxl-3">
                    <div class="store-best-sellers-box">
                        <h4 class="store-best-sellers-heading">
                            Store Best Sellers
                        </h4>

                        <div class="row g-2">
                            @php
                                $similarProducts =   \App\Models\Product::where('wholesaler_profile_id', $product->wholesaler_profile_id)
                                        ->where('id', '!=', $product->id)
                                          ->with(['variants' => fn($q) => $q->orderBy('id')])
                                          ->take(8)
                                          ->active()
                                          ->get()
                            @endphp
                            @if(count($similarProducts) > 0)
                                @foreach( $similarProducts as $similarProduct)
                                    @php $variant = $similarProduct->variants()->active()->first(); @endphp
                                @if(!empty($variant->id))
                                    <div class="col-6">
                                        <div class="store-best-sellers-item">
                                            <a href="{{ route('product.detail', $similarProduct->slug) }}">
                                                <img
                                                    src="{{ asset('storage/' . $variant->cover_image) }}"
                                                    alt="{{ $similarProduct->title }}"
                                                    class="store-best-sellers-img"
                                                />
                                            </a>
                                            <div class="store-best-sellers-title mt-1">
                                                <a class="text-dark d-block small"
                                                   href="{{ route('product.detail', $similarProduct->slug) }}">
                                                    {{ Str::limit($similarProduct->title, 35) }}
                                                </a>
                                                <p class="text-muted tiny mb-0">{{ $variant->getAttributeSummary() }}</p>
                                            </div>
                                        </div>
                                    </div>
                                    @endif
                                @endforeach
                            @endif
                        </div>
                    </div>
                </div>


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