@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 {{ $attributes->merge(['class' => 'v-product-card group relative bg-white rounded-[12px] border border-black/[0.06] flex flex-col h-full overflow-hidden transition-all duration-500 ease-[cubic-bezier(0.2,1,0.3,1)] hover:-translate-y-[5px] hover:shadow-[0_20px_40px_rgba(43,45,66,0.08)] hover:border-[#2B2D42]/20']) }}>

        <!-- Image Section -->
        <div class="relative aspect-[1/1.1] overflow-hidden bg-[#FDFDFD]">
            <a href="{{ route('product', $product->slug) }}" class="block w-full h-full">
                <img src="{{ asset($firstImg) }}" alt="{{ $product->name }}"
                    class="w-full h-full object-cover transition-transform duration-[1000ms] group-hover:scale-[1.06]">
                <div class="absolute inset-0 bg-gradient-to-b from-transparent via-transparent to-black/[0.02]"></div>
            </a>

            <!-- Discount Badge -->
            @if ($discount > 0)
                <span
                    class="absolute top-[10px] left-[10px] bg-[#EF233C] text-white text-[14px] font-[800] px-[9px] py-[4px] rounded-[3px] z-[2]">
                    -{{ $discount }}%
                </span>
            @endif

            <!-- Floating Quick Action (Mobile Only) -->
            <div class="absolute top-[10px] right-[10px] z-[3] flex flex-col gap-2 lg:hidden">
                <button
                    class="w-[34px] h-[34px] rounded-full bg-white/90 backdrop-blur-[4px] border-none shadow-[0_4px_10px_rgba(0,0,0,0.05)] flex items-center justify-center text-[#2B2D42] add_favourite"
                    data-id="{{ $product->id }}">
                    @if (in_array($product->id, $favouriteIds))
                        <i class="fa fa-heart text-[#EF233C]"></i>
                    @else
                        <i class="fa-regular fa-heart"></i>
                    @endif
                </button>

                <button
                    class="w-[34px] h-[34px] rounded-full bg-white/90 backdrop-blur-[4px] border-none shadow-[0_4px_10px_rgba(0,0,0,0.05)] flex items-center justify-center text-[#2B2D42] quick-view-btn"
                    data-id="{{ $product->id }}">
                    <i class="fa-regular fa-eye"></i>
                </button>
            </div>
        </div>

        <!-- Details Section -->
        <div class="p-[10px_14px] flex-grow flex flex-col md:p-[10px]">
            <a href="{{ route('product', $product->slug) }}"
                class="text-[14px] md:text-[13px] font-[600] text-[#2B2D42] no-underline leading-[1.4] line-clamp-2 h-[2.8em] overflow-hidden"
                title="{{ $product->name }}">
                {{ $product->name }}
            </a>

            <div class="flex justify-between items-center m-0 mt-auto">
                <div class="flex items-baseline gap-[6px]">
                    <span class="text-[17px] font-[800] text-[#2B2D42]">৳{{ number_format($newPrice) }}</span>
                    @if ($oldPrice > $newPrice)
                        <span class="text-[12px] text-[#8D99AE] line-through">৳{{ number_format($oldPrice) }}</span>
                    @endif
                </div>

                <div class="hidden sm:block">
                    <span class="text-[9px] font-[700] text-[#8D99AE] uppercase tracking-[1px]">
                        {{ $product->category->name ?? 'New Arrival' }}
                    </span>
                </div>
            </div>
        </div>

        <!-- Advanced Footer / Action Bar -->
        <div class="p-[0_12px_12px]">
            <div class="ProductBtonArea flex flex-col lg:flex-row gap-[10px] w-full items-center">

                <!-- Add to Cart (70% on Desktop) -->
                <button
                    class="lg:flex-[7] w-full bg-[#2B2D42] text-white border-none rounded-[6px] p-[10px] font-[700] text-[14px] uppercase flex items-center justify-center gap-[6px] transition-colors duration-300 hover:bg-black addcartbuttonProduct"
                    data-id="{{ $product->id }}">
                    <i class="fa-solid fa-bag-shopping"></i>
                    <span class="v-label">Add to Bag</span>
                </button>

                <!-- Wishlist (15% on Desktop) -->
                <button
                    class="hidden lg:flex lg:flex-[1.5] aspect-square bg-[#f8f9fa] text-[#2B2D42] border border-black/[0.05] rounded-[6px] items-center justify-center transition-all duration-300 text-[18px] hover:bg-[#2B2D42] hover:text-white add_favourite"
                    data-id="{{ $product->id }}" title="Wishlist">
                    @if (in_array($product->id, $favouriteIds))
                        <i class="fa fa-heart text-[#EF233C]"></i>
                    @else
                        <i class="fa-regular fa-heart"></i>
                    @endif
                </button>

                <!-- Quick View (15% on Desktop) -->
                <button
                    class="hidden lg:flex lg:flex-[1.5] aspect-square bg-[#f8f9fa] text-[#2B2D42] border border-black/[0.05] rounded-[6px] items-center justify-center transition-all duration-300 text-[18px] hover:bg-[#2B2D42] hover:text-white quick-view-btn"
                    data-id="{{ $product->id }}" title="Quick View">
                    <i class="fa-regular fa-eye"></i>
                </button>

            </div>
        </div>


        <!-- Selection Area (Size & Color) -->
        <div
            class="ProductSizesArea hidden backdrop-blur-[10px] bg-white/90 h-full w-full absolute inset-0 z-20 flex flex-col items-center justify-center p-4 transition-all duration-300">
            <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-3 py-1 rounded hover:bg-[#2B2D42] hover:text-white transition-all"
                                    data-productsize="{{ $prosize->size->sizeName ?? $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 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 ?? '' }}">
                                    {{ $procolor->color->colorName ?? '' }}
                                </a>
                            @endforeach
                        </div>
                    </div>
                    @endif
                <p class="loading-msg hidden mt-2 text-sm text-[#2B2D42]">Adding to bag...</p>
            </form>
        </div>
    </div>
@endif