@php
    // Determine the column class based on the number of cards per row.
    $columnClass = 'col-lg-4 col-md-6'; // Default to 3 columns
    if (isset($cardsPerRow) && $cardsPerRow == 4) {
        $columnClass = 'col-lg-3 col-md-6'; // 4 columns
    } elseif (isset($cardsPerRow) && $cardsPerRow == 6) {
        $columnClass = 'col-lg-2 col-md-6'; // 6 columns
    } elseif (isset($cardsPerRow) && $cardsPerRow == 3) {
        $columnClass = 'col-lg-4 col-md-6'; // 3 columns
    }

    // Check if the product is in the user's favorites *if the user is authenticated*.
    $isFavorite = false;
    if (Auth::check()) {
        $isFavorite = Auth::user()->favorites()->where('product_id', $product->id)->exists();
    }
@endphp

<div class="{{ $columnClass }}">
    <div class="product-card wow flipInY">
        <div class="product-actions-info">
            <div class="products-fav">
                {{-- <button type="button" class="toggle-favorite"
                    id="toggle-favorite-{{ $product->id }}" data-product-id="{{ $product->id }}">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
                        fill="{{ $isFavorite ? 'red' : 'currentColor' }}">
                        <path
                            d="M16.5 3C19.5376 3 22 5.5 22 9C22 16 14.5 20 12 21.5C9.5 20 2 16 2 9C2 5.5 4.5 3 7.5 3C9.35997 3 11 4 12 5C13 4 14.64 3 16.5 3ZM12.9339 18.6038C13.8155 18.0485 14.61 17.4955 15.3549 16.9029C18.3337 14.533 20 11.9435 20 9C20 6.64076 18.463 5 16.5 5C15.4241 5 14.2593 5.56911 13.4142 6.41421L12 7.82843L10.5858 6.41421C9.74068 5.56911 8.5759 5 7.5 5C5.55906 5 4 6.6565 4 9C4 11.9435 5.66627 14.533 8.64514 16.9029C9.39 17.4955 10.1845 18.0485 11.0661 18.6038C11.3646 18.7919 11.6611 18.9729 12 19.1752C12.3389 18.9729 12.6354 18.7919 12.9339 18.6038Z">
                        </path>
                    </svg>
                </button> --}}
                {{-- Favorite Button --}}
                <button type="button" class="toggle-favorite" data-product-id="{{ $product->id }}">
                    <i class="bi {{ $isFavorite ? 'bi-heart-fill' : 'bi-heart' }}" style="{{ $isFavorite ? 'color: red;' : '' }}"></i>
                </button>
            </div>
            @if ($product->is_new_arrival)
                <div class="product-status">
                    <span>جديد</span>
                </div>
            @elseif ($product->has_special_discount)
                <div class="product-status offer">
                    <span>عرض</span>
                </div>
            @endif

            @if ($product->stock == 0)
                <div class="product-status sold">
                    <span>نفذت</span>
                </div>
            @endif
        </div>
        <a href="{{ route('products.details', ['id' => $product->id]) }}"
            class="product-image-link">
            <div class="product-image">
                <img src="{{ Storage::url($product->main_image) }}" alt="{{ $product->name }}">
            </div>
        </a>
        <div class="product-info">
            <div class="product-category">
                {{ $product->category->name }}
            </div>
            <a href="{{ route('products.details', ['id' => $product->id]) }}"
                class="product-name-link">
                <h3>{{ $product->name }}</h3>
            </a>
            <div class="product-price">
                <div class="current">
                    {{ $product->price }}<span>L.E</span>
                </div>
                @if ($product->has_special_discount)
                    <div class="discount">
                        {{ $product->original_price }}<span>L.E</span>
                    </div>
                @endif
            </div>
        </div>
        <button type="button" class="add-to-card-btn" data-product-id="{{ $product->id }}">
            <span>أضف الى السلة</span>
            <svg class="qodef-svg--dropdown-cart" xmlns="http://www.w3.org/2000/svg" width="16.665"
                height="18" viewBox="0 0 16.665 18">
                <path
                    d="M15.816 3.962a.85.85 0 0 0-.848.848v4.4a1 1 0 0 1-1 1H5.511a1 1 0 0 1-1-1V2.26a.848.848 0 0 0-.468-.759L1.222.092A.854.854 0 0 0 .085.473a.85.85 0 0 0 .381 1.138l2.349 1.174V9.21a2.7 2.7 0 0 0 2.694 2.7h8.461a2.7 2.7 0 0 0 2.7-2.7v-4.4a.85.85 0 0 0-.854-.848Z">
                </path>
                <path
                    d="M6.534 13.073a2.464 2.464 0 1 0 2.464 2.463 2.465 2.465 0 0 0-2.464-2.463Zm0 3.231a.768.768 0 1 1 .768-.768.769.769 0 0 1-.768.768Z">
                </path>
                <path
                    d="M14.018 13.073a2.464 2.464 0 1 0 2.464 2.463 2.465 2.465 0 0 0-2.464-2.463Zm0 3.231a.768.768 0 1 1 .768-.768.768.768 0 0 1-.768.768Z">
                </path>
            </svg>
        </button>
    </div>
</div>