@php
    $cardStyle = ui('product_card_style', 'modern');
    $imgRatio = ui('product_img_ratio', '1/1');
    $actionStyle = ui('product_action_style', 'hover');
    $ratingStyle = ui('product_rating_style', 'stars');
    
    // Default badge to null if not provided
    $badge = $badge ?? null;
    
    $ratioMap = ['1/1' => '100%', '3/4' => '133%', '4/3' => '75%'];
    $ratioPadding = $ratioMap[$imgRatio] ?? '100%';
    
    $cardClasses = match($cardStyle) {
        'minimal' => 'border-0 bg-transparent',
        'bordered' => 'border shadow-none',
        'shadow' => 'border-0 shadow-lg',
        default => 'border-0 shadow-sm rounded-4'
    };
@endphp

<div class="card h-100 {{ $cardClasses }} product-card position-relative overflow-hidden">
    {{-- Badges --}}
    <div class="position-absolute top-0 start-0 m-3 d-flex flex-column gap-2" style="z-index: 10;">
        @if($badge)
            <span class="badge rounded-pill text-uppercase px-3 py-2" style="background-color: var(--secondary-color);">
                {{ $badge }}
            </span>
        @elseif($product->sale_price && $product->price > $product->sale_price)
            @php $discount = round((($product->price - $product->sale_price) / $product->price) * 100); @endphp
            <span class="badge bg-danger rounded-pill px-3 py-2">
                -{{ $discount }}%
            </span>
        @endif
    </div>

    {{-- Wishlist Button (Top Right) --}}
    <form action="{{ route('customer.wishlist.add') }}" method="POST" class="position-absolute top-0 end-0 m-3" style="z-index: 10;">
        @csrf
        <input type="hidden" name="product_id" value="{{ $product->id }}">
        <button type="submit" class="btn btn-white rounded-circle shadow-sm p-0 d-flex align-items-center justify-content-center border-0 wishlist-btn" style="width: 40px; height: 40px; background: white;">
            <i class="bi bi-heart fs-5"></i>
        </button>
    </form>

    {{-- Product Image --}}
    <a href="{{ $product->publicUrl() }}" class="position-relative d-block overflow-hidden" style="padding-top: {{ $ratioPadding }}; background: #f8f9fa;">
        <img src="{{ $product->getPrimaryImage() }}" 
             class="card-img-top position-absolute top-0 start-0 w-100 h-100 object-fit-cover transition-all duration-500 product-img" 
             alt="{{ $product->name }}">
    </a>

    {{-- Card Body --}}
    <div class="card-body d-flex flex-column p-3">
        {{-- Category --}}
        @if($product->category)
            <small class="text-muted text-uppercase mb-1 fw-bold" style="font-size: 0.65rem; letter-spacing: 1px;">
                {{ $product->category->name }}
            </small>
        @endif

        {{-- Name --}}
        <h6 class="card-title fw-bold mb-2">
            <a href="{{ $product->publicUrl() }}" class="text-decoration-none text-dark hover-primary text-truncate-2">
                {{ $product->name }}
            </a>
        </h6>

        {{-- Rating --}}
        <div class="mb-3">
            <div class="d-flex align-items-center gap-2">
                <div class="bg-success text-white px-2 py-0 rounded small fw-bold" style="font-size: 0.75rem;">
                    4.2 <i class="bi bi-star-fill" style="font-size: 0.65rem;"></i>
                </div>
                <span class="text-muted small" style="font-size: 0.75rem;">(15)</span>
            </div>
        </div>

        {{-- Price --}}
        <div class="mt-auto d-flex align-items-baseline gap-2">
            @if($product->sale_price)
                <span class="fw-bold fs-5" style="color: var(--primary-color);">₹{{ number_format($product->sale_price, 0) }}</span>
                <span class="text-muted text-decoration-line-through small">₹{{ number_format($product->price, 0) }}</span>
            @else
                <span class="fw-bold fs-5" style="color: var(--primary-color);">₹{{ number_format($product->price, 0) }}</span>
            @endif
        </div>
    </div>

    {{-- Hover Action Footer --}}
    <div class="card-footer bg-transparent border-top-0 p-3 pt-0">
        <form action="{{ route('cart.add') }}" method="POST" class="d-grid">
            @csrf
            <input type="hidden" name="product_id" value="{{ $product->id }}">
            <input type="hidden" name="qty" value="1">
            <button type="submit" class="btn btn-primary-custom w-100 rounded-pill py-2">
                <i class="bi bi-cart-plus me-2"></i> Add to Cart
            </button>
        </form>
    </div>
</div>

<style>
    .product-card {
        transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
        border: 1px solid transparent !important;
    }
    .product-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 20px 40px rgba(0,0,0,0.08) !important;
        border-color: var(--primary-light) !important;
    }
    .product-img {
        transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
    }
    .product-card:hover .product-img {
        transform: scale(1.1);
    }
    .hover-primary:hover {
        color: var(--primary-color) !important;
    }
    .text-truncate-2 {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        min-height: 2.4em;
    }
    .btn-primary-custom {
        background-color: var(--primary-color);
        color: white;
        border: none;
    }
    .btn-primary-custom:hover {
        background-color: var(--primary-dark);
        color: white;
        transform: scale(1.02);
    }
    .wishlist-btn:hover {
        background-color: var(--secondary-color) !important;
        color: white !important;
        transform: scale(1.1);
    }
    .bg-primary-light {
        background-color: var(--primary-light);
    }
</style>