@extends('pages.layouts.app')

@section('content')
@push('styles')
<style>
    /* Styling the product-wrapper for positioning */
    .product-wrapper {
        position: relative;
        border: 1px solid #ddd;
        padding: 15px;
        border-radius: 10px;
        background-color: #fff;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Add subtle shadow to start */
    }

    /* Hover effect for product item */
    .product-wrapper:hover {
        transform: scale(1.05);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15); /* Slightly stronger shadow on hover */
    }

    /* Styling the remove button container */
    .wd-remove-btn {
        position: absolute;
        top: 10px;
        right: 10px;
        padding: 8px;
        z-index: 10;
        background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
        border-radius: 150px;
    }

    /* Styling the remove button */
    .wd-remove-btn button {
        background: none;
        border: none;
        cursor: pointer;
        padding: 0;
        color: #ff4d4d;
        font-size: 20px;
    }

    /* Hover effect on remove button */
    .wd-remove-btn button:hover {
        color: #1eff00;
    }

    /* Styling the product image */
    .product-image-link img {
        width: 100%;
        height: 300px; /* Set consistent height */
        object-fit: cover; /* Ensures the image covers the area without distortion */
        border-radius: 8px;
    }

    /* Styling the product title */
    .wd-entities-title a {
        color: #333;
        font-size: 16px;
        font-weight: bold;
        text-decoration: none;
        transition: color 0.3s ease;
        display: block;
        margin-top: 10px;
    }

    .wd-entities-title a:hover {
        color: #ff4d4d;
    }

    /* Price and additional product details */
    .product-rating-price {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 10px;
    }

    .price {
        font-size: 18px;
        font-weight: bold;
        color: #333;
    }

    /* Add to cart button styling */
    .wd-add-btn-replace .button {
        background-color: #ff4d4d;
        color: #fff;
        padding: 10px;
        border-radius: 5px;
        display: inline-block;
        text-decoration: none;
        transition: background-color 0.3s ease;
        margin-top: 10px;
    }

    .wd-add-btn-replace .button:hover {
        background-color: #1eff00;
    }

    /* Ensure the wishlist grid is responsive */
    .wd-products {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
        margin-top: 20px; /* Add some space above the grid */
    }

    /* Responsive grid for smaller screens */
    @media (max-width: 768px) {
        .wd-products {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @media (max-width: 480px) {
        .wd-products {
            grid-template-columns: 1fr;
        }
    }
</style>

@endpush

<div class="main-page-wrapper">
    <div class="container">
        <div class="row content-layout-wrapper align-items-start">
            <div class="site-content col-lg-12 col-12 col-md-12" role="main">
                <article id="post-118" class="post-118 page type-page status-publish hentry">
                    <div class="entry-content">
                        <div data-elementor-type="wp-page" data-elementor-id="118" class="elementor elementor-118">
                            <section class="elementor-section elementor-top-section elementor-element elementor-element-f8863df elementor-section-boxed">
                                <div class="elementor-container elementor-column-gap-default">
                                    <div class="elementor-column elementor-col-100">
                                        <div class="elementor-widget-wrap">
                                            <div class="elementor-element elementor-widget-wd_wishlist">
                                                <div class="elementor-widget-container">
                                                    <div class="woocommerce-my-account-wrapper">
                                                        <div class="woocommerce-MyAccount-content">
                                                            <div class="wd-wishlist-content">
                                                                <div class="wd-wishlist-head">
                                                                    <h4 class="title">{{ __('Your Favorite Products') }}</h4>
                                                                </div>
                                                                <div class="wd-products-element">
                                                                    <div class="products wd-products">
                                                                        @forelse ($favorites as $favorite)
                                                                            <div class="wd-product product-wrapper">
                                                                                <div class="product-element-top">
                                                                                    <a href="" class="product-image-link">
                                                                                        <img loading="lazy"
                                                                                        src="{{ $favorite->product->images && $favorite->product->images->isNotEmpty() ? asset('storage/' . $favorite->product->images->first()->image) : asset('empty.jpg') }}"
                                                                                        alt="{{ $favorite->product->name ?? 'Product Name' }}">
                                                                                    </a>
                                                                                </div>

                                                                                <!-- Remove Button -->
                                                                                <div class="wd-remove-btn">
                                                                                    <form action="{{ route('removefavorite', $favorite->product_id) }}" method="POST">
                                                                                        @csrf
                                                                                        @method('DELETE')
                                                                                        <button type="submit" title="Remove from Favorites">
                                                                                            <i class="fa fa-trash"></i>
                                                                                        </button>
                                                                                    </form>
                                                                                </div>

                                                                                <!-- Product Details -->
                                                                                <div class="product-element-bottom product-information">
                                                                                    <h3 class="wd-entities-title">
                                                                                        <a href="">{{ app()->getLocale() === 'ar' ? $favorite->product->name_ar : $favorite->product->name }}</a>
                                                                                    </h3>
                                                                                    <div class="product-rating-price">
                                                                                        <div class="price">
                                                                                            <span class="woocommerce-Price-currencySymbol">
                                                                                                {{ app()->getLocale() === 'ar' ? 'دأ ' : 'JD' }}
                                                                                            </span>

                                                                                            @if($favorite->product->price_after_discount)
                                                                                                <!-- Display the old price with a strikethrough and the new price -->
                                                                                                <del>{{ $favorite->product->price }}</del>
                                                                                                {{ $favorite->product->price_after_discount }}
                                                                                            @else
                                                                                                <!-- Display the original price if no discount -->
                                                                                                {{ $favorite->product->price }}
                                                                                            @endif
                                                                                        </div>
                                                                                    </div>

                                                                                    <div class="wd-add-btn-replace">
                                                                                        <a class="button add-to-cart-link" rel="nofollow" data-product-id="{{ $favorite->product->id }}" data-quantity="1">
                                                                                            <i class="fa fa-shopping-cart"></i> {{ __('Add to cart') }}
                                                                                        </a>

                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        @empty
                                                                            <p>{{ __('No favorites found') }}</p>
                                                                        @endforelse
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </section>
                        </div>
                    </div>
                </article>
            </div>
        </div>
    </div>
</div>
@endsection