@props(['product'])

@if ($product)
    @php
        $oldPrice = (float) ($product->old_price ?? 0);
        $newPrice = (float) ($product->new_price ?? 0);
        $discount = $oldPrice > 0 ? round((($oldPrice - $newPrice) / $oldPrice) * 100) : 0;
        $firstImg = $product->images->first()->image ?? 'placeholder.jpg';
        $favouriteIds = $favouriteIds ?? []; // Ensure variable exists
    @endphp

    <div class="h-auto max-w-[380px] border v-product-card" data-swiper-slide-index="5">
        <div data-index="0" class="bg-white flex flex-col relative group w-full md:h-auto" style="height: auto;">
            <div class="badges-container absolute top-2.5 left-2.5 z-10 flex flex-wrap gap-y-1 gap-2.5 w-fit">
                @if ($discount > 0)
                    <div class="tag !font-overused bg-white text-nowrap w-fit px-1.5 typo-14r leading-[18px] text-[#FF142B]">
                        -{{ $discount }}%
                    </div>
                @endif
            </div>
            <a class="top h-auto overflow-hidden w-full relative" href="{{ route('product', $product->slug) }}"
                onclick="trackProductClick(this)">
                <div class="relative overflow-hidden">
                    <div
                        class="absolute inset-0 transition-opacity duration-500 z-10 opacity-0 pointer-events-none bg-gray-200">
                    </div>
                    <img alt="Black Executive Panjabi" decoding="async" data-nimg="1"
                        class="transition-opacity duration-700 ease-in-out min-w-full h-full pb-10 lg:pb-0 object-cover min-h-[270px] md:min-h-[380px] lg:min-h-[420px] opacity-100"
                        src={{ asset($firstImg) }} style="color: transparent;">
                </div>
            </a>
            <div class="bottom relative p-2.5 bg-white z-40 flex items-center w-full shrink-0 justify-between pr-0">
                <div class="relative bg-white w-full z-20 left flex flex-col gap-2 ">
                    <a href="{{ route('product', $product->slug) }}" class="typo-16r text-dark line-clamp-1"
                        onclick="trackProductClick(this)">
                        {{ $product->name }}
                    </a>
                    <div class="price flex gap-1.5 items-center">
                        <p class="discounted-price typo-16m text-[#FF142B]">৳{{ number_format($newPrice) }}</p>
                        <p class="regular-price typo-14r text-dark/50 line-through"> 
                            @if ($discount > 0)
                                ৳{{ number_format($oldPrice) }}
                            @endif
                        </p>
                    </div>
                </div>
                <div class="relative inline-block cursor-pointer bg-white z-20 right">
                    <button
                        class="cursor-pointer add-to-wishlist-button transition-all rounded-full hover:scale-105 disabled:opacity-50 disabled:cursor-not-allowed p-2 bg-white/70 backdrop-blur-md add_favourite"
                        data-id="{{ $product->id }}"
                        title="Wishlist"
                        onclick="trackWishlist(this)">
                        @if (in_array($product->id, $favouriteIds))
                            <i class="fa fa-heart text-[#EF233C]"></i>
                        @else
                            <i class="fa-regular fa-heart"></i>
                        @endif
                    </button>

                </div>
                <div class="block absolute inset-0 w-full bg-white z-[14]">
                    <button aria-label="Add to Cart"
                        class="addcartbuttonProduct h-[40px] bg-dark-5 md:h-[50px] cursor-pointer lg:group-hover:-translate-y-full transition-all duration-500 z-20 absolute flex justify-center items-center inset-0 w-full lg:bg-white/70 lg:backdrop-blur-[10px] lg:translate-y-[0px] -translate-y-full"
                        data-id="{{ $product->id }}" data-listener-attached="true">
                        <span class="flex gap-2 items-center">
                            <span class="font-overused text-[#020617] text-sm md:text-base">Add to Cart</span>
                            <svg width="15" height="14" viewBox="0 0 15 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path
                                    d="M6.91699 6.41675V2.91675H8.08366V6.41675H11.5837V7.58342H8.08366V11.0834H6.91699V7.58342H3.41699V6.41675H6.91699Z"
                                    fill="#020617">
                                </path>
                            </svg>
                        </span>
                    </button>

                    <!-- Selection Area (Size & Color) -->
                    <div
                        class="ProductSizesArea hidden py-1.5 min-h-[40px] h-max bg-dark-5 md:min-h-[50px] cursor-pointer transition-all duration-500 z-30 absolute flex justify-center items-center inset-0 w-full bg-white/70 backdrop-blur-[10px] -translate-y-full">
                        <button class="absolute top-2 right-2 text-gray-500 close-selection">
                            <i class="fa fa-times"></i>
                        </button>
                        <form class="cart-form w-full h-full flex flex-col items-center justify-center">
                            @csrf
                            <input type="hidden" name="id" value="{{ $product->id }}">
                            <input type="hidden" name="qty" value="1">
                            <input type="hidden" name="product_size" class="selected_size">
                            <input type="hidden" name="product_color" class="selected_color">

                            <!-- Size Section -->
                            @if ($product->prosizes && count($product->prosizes) > 0)
                                <div class="size-wrapper w-full flex flex-col items-center">
                                    {{-- <p class="text-[12px] font-bold mb-2 uppercase">Select Size</p> --}}
                                    <div class="flex flex-wrap justify-center gap-2">
                                        @foreach ($product->prosizes as $index => $prosize)
                                            <a href="javascript:void(0)"
                                                class="size-choice border border-gray-300 px-1.5 py-1 rounded hover:bg-[#2B2D42] hover:text-white transition-all"
                                                data-productsize="{{ $prosize->size->sizeName ?? $prosize->size->name ?? '' }}"
                                                onclick="trackAddToCart('{{ $product->id }}', '{{ $product->name }}', '{{ $newPrice }}', '{{ $prosize->size->name ?? '' }}')">
                                                {{ $prosize->size->sizeName ?? $prosize->size->name ?? '' }}
                                            </a>
                                        @endforeach
                                    </div>
                                </div>
                            @endif

                            <!-- Sizes -->
                            @if ($product->procolors && count($product->procolors) > 0)
                                <!-- Color Section (Initially Hidden) -->
                                <div class="color-wrapper w-full hidden flex flex-col items-center">
                                    {{-- <p class="text-[12px] font-bold mb-2 ml-1 uppercase">Select Color</p> --}}
                                    <div class="flex flex-wrap justify-center gap-2">
                                        @foreach ($product->procolors as $index => $procolor)
                                            <a href="javascript:void(0)"
                                                class="color-choice border border-gray-300 px-3 py-1 rounded hover:bg-[#2B2D42] hover:text-white transition-all"
                                                data-productcolor="{{ $procolor->color->colorName ?? '' }}"
                                                onclick="trackAddToCart('{{ $product->id }}', '{{ $product->name }}', '{{ $newPrice }}', '{{ $prosize->size->name ?? '' }}')">
                                                {{ $procolor->color->colorName ?? '' }}
                                            </a>
                                        @endforeach
                                    </div>
                                </div>
                            @endif
                            <p class="loading-msg hidden my-2 text-sm text-[#2B2D42]">Adding to bag...</p>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endif