@extends('layouts.app')

@section('title', __('My Wishlist'))

@php
    /*
     * Always display product prices using the currency selected
     * in Payment Settings.
     */
    $displayCurrency = currency_code(
        $displayCurrency
        ?? $currency
        ?? default_currency()
    );
@endphp

@section('content')
<div class="container py-4">
    {{-- Page Header --}}
    <div
        class="d-flex flex-wrap justify-content-between
            align-items-center gap-3 mb-4"
    >
        <div>
            <h1 class="h3 fw-bold mb-1">
                <i class="fas fa-heart text-danger me-2"></i>
                {{ __('My Wishlist') }}
            </h1>

            <p class="text-muted mb-0">
                {{ __('Products you have saved for later.') }}
            </p>
        </div>

        <div class="d-flex flex-wrap align-items-center gap-2">
            <span
                class="badge rounded-pill bg-primary
                    bg-opacity-10 text-primary px-3 py-2"
            >
                {{
                    trans_choice(
                        ':count saved product|:count saved products',
                        $items->total(),
                        [
                            'count' => number_format(
                                $items->total()
                            ),
                        ]
                    )
                }}
            </span>

            @if(
                \Illuminate\Support\Facades\Route::has(
                    'storefront.products.index'
                )
            )
                <a
                    href="{{ route('storefront.products.index') }}"
                    class="btn btn-outline-primary"
                >
                    <i class="fas fa-search me-1"></i>
                    {{ __('Browse Products') }}
                </a>
            @endif
        </div>
    </div>

    {{-- Flash Messages --}}
    @if(session('success'))
        <div
            class="alert alert-success alert-dismissible
                fade show shadow-sm"
            role="alert"
        >
            <i class="fas fa-check-circle me-2"></i>
            {{ session('success') }}

            <button
                type="button"
                class="btn-close"
                data-bs-dismiss="alert"
                aria-label="{{ __('Close') }}"
            ></button>
        </div>
    @endif

    @if(session('error'))
        <div
            class="alert alert-danger alert-dismissible
                fade show shadow-sm"
            role="alert"
        >
            <i class="fas fa-exclamation-circle me-2"></i>
            {{ session('error') }}

            <button
                type="button"
                class="btn-close"
                data-bs-dismiss="alert"
                aria-label="{{ __('Close') }}"
            ></button>
        </div>
    @endif

    @if($items->isNotEmpty())
        <div class="row g-4">
            @foreach($items as $item)
                @php
                    $product = $item->product;
                    $detail = $product?->details?->first();

                    $title = trim(
                        (string) (
                            $detail?->title
                            ?? $product?->slug
                            ?? __('Unavailable product')
                        )
                    );

                    $description = \Illuminate\Support\Str::limit(
                        strip_tags(
                            (string) (
                                $detail?->short_description
                                ?? $detail?->description
                                ?? ''
                            )
                        ),
                        110
                    );

                    /*
                     * Prefer the main image before falling back
                     * to the first available image.
                     */
                    $image = $product?->images?->firstWhere(
                        'is_main',
                        true
                    ) ?? $product?->images?->first();

                    $imagePath = $image?->image_small
                        ?? $image?->image_big
                        ?? $image?->image_default;

                    $regularPrice = max(
                        0,
                        (float) ($product?->price ?? 0)
                    );

                    $discountedPrice = max(
                        0,
                        (float) (
                            $product?->price_discounted
                            ?? 0
                        )
                    );

                    $hasDiscount =
                        $discountedPrice > 0
                        && $discountedPrice < $regularPrice;

                    $sellingPrice = $hasDiscount
                        ? $discountedPrice
                        : $regularPrice;

                    $isDeleted = (bool) (
                        $product?->is_deleted ?? false
                    );

                    $isDraft = (bool) (
                        $product?->is_draft ?? false
                    );

                    $isPublished =
                        $product !== null
                        && (int) ($product->status ?? 0) === 1
                        && (bool) (
                            $product->visibility ?? true
                        )
                        && (bool) (
                            $product->is_active ?? true
                        )
                        && ! $isDeleted
                        && ! $isDraft;

                    $isOutOfStock =
                        $product !== null
                        && $product->product_type === 'physical'
                        && (int) ($product->stock ?? 0) < 1;

                    $isAvailable =
                        $isPublished
                        && ! $isOutOfStock;

                    $rating = max(
                        0,
                        min(
                            5,
                            (float) ($product?->rating ?? 0)
                        )
                    );

                    $reviewsCount = max(
                        0,
                        (int) (
                            $product?->reviews_count ?? 0
                        )
                    );

                    $discountPercentage = (
                        $hasDiscount
                        && $regularPrice > 0
                    )
                        ? min(
                            100,
                            max(
                                0,
                                (int) round(
                                    (
                                        (
                                            $regularPrice
                                            - $discountedPrice
                                        )
                                        / $regularPrice
                                    ) * 100
                                )
                            )
                        )
                        : 0;

                    $seller = $product?->seller;

                    $sellerName = trim(
                        (string) (
                            $seller?->username
                            ?? trim(
                                (string) (
                                    $seller?->first_name
                                    ?? ''
                                )
                                . ' '
                                . (string) (
                                    $seller?->last_name
                                    ?? ''
                                )
                            )
                        )
                    );

                    if ($sellerName === '') {
                        $sellerName = __('Unknown Seller');
                    }

                    $productUrl = null;

                    if (
                        $product
                        && \Illuminate\Support\Facades\Route::has(
                            'storefront.products.show'
                        )
                    ) {
                        try {
                            $productUrl = route(
                                'storefront.products.show',
                                $product
                            );
                        } catch (\Throwable) {
                            $productUrl = null;
                        }
                    }

                    $sellerUrl = null;

                    if (
                        $seller
                        && filled($seller->slug)
                        && \Illuminate\Support\Facades\Route::has(
                            'sellers.show'
                        )
                    ) {
                        try {
                            $sellerUrl = route(
                                'sellers.show',
                                [
                                    'seller' => $seller->slug,
                                ]
                            );
                        } catch (\Throwable) {
                            $sellerUrl = null;
                        }
                    }

                    $contactUrl = null;

                    if (
                        $product
                        && $seller
                        && (int) $product->user_id
                            !== (int) auth()->id()
                        && \Illuminate\Support\Facades\Route::has(
                            'account.messages.create'
                        )
                    ) {
                        try {
                            $contactUrl = route(
                                'account.messages.create',
                                [
                                    'product' => $product->id,
                                ]
                            );
                        } catch (\Throwable) {
                            $contactUrl = null;
                        }
                    }

                    $cartRouteExists =
                        \Illuminate\Support\Facades\Route::has(
                            'storefront.cart.items.store'
                        );

                    $wishlistRouteExists =
                        $product
                        && \Illuminate\Support\Facades\Route::has(
                            'account.wishlist.toggle'
                        );
                @endphp

                <div class="col-sm-6 col-lg-4 col-xl-3">
                    <article
                        class="card border-0 shadow-sm
                            h-100 wishlist-card"
                    >
                        {{-- Product Image --}}
                        <div
                            class="position-relative
                                product-image-wrapper"
                        >
                            @if($product && filled($imagePath))
                                <img
                                    src="{{
                                        asset(
                                            'storage/'
                                            . ltrim(
                                                $imagePath,
                                                '/'
                                            )
                                        )
                                    }}"
                                    alt="{{ $title }}"
                                    class="card-img-top product-image"
                                    loading="lazy"
                                >
                            @else
                                <div
                                    class="product-placeholder
                                        d-flex align-items-center
                                        justify-content-center"
                                >
                                    <i
                                        class="fas fa-image fa-3x
                                            text-secondary opacity-50"
                                    ></i>
                                </div>
                            @endif

                            {{-- Availability --}}
                            <div
                                class="position-absolute
                                    top-0 start-0 p-2"
                            >
                                @if(! $product || ! $isPublished)
                                    <span class="badge bg-secondary">
                                        <i class="fas fa-ban me-1"></i>
                                        {{ __('Unavailable') }}
                                    </span>
                                @elseif($isOutOfStock)
                                    <span class="badge bg-danger">
                                        <i
                                            class="fas fa-times-circle
                                                me-1"
                                        ></i>

                                        {{ __('Out of Stock') }}
                                    </span>
                                @elseif(
                                    $product->product_type
                                    === 'digital'
                                )
                                    <span
                                        class="badge bg-info text-dark"
                                    >
                                        <i
                                            class="fas fa-download me-1"
                                        ></i>

                                        {{ __('Digital') }}
                                    </span>
                                @else
                                    <span class="badge bg-success">
                                        <i
                                            class="fas fa-check-circle
                                                me-1"
                                        ></i>

                                        {{ __('In Stock') }}
                                    </span>
                                @endif
                            </div>

                            @if($discountPercentage > 0)
                                <div
                                    class="position-absolute
                                        top-0 end-0 p-2"
                                >
                                    <span class="badge bg-danger">
                                        -{{ $discountPercentage }}%
                                    </span>
                                </div>
                            @endif
                        </div>

                        <div
                            class="card-body d-flex flex-column"
                        >
                            {{-- Seller --}}
                            @if($seller)
                                <div
                                    class="small text-muted
                                        text-truncate mb-2"
                                >
                                    <i class="fas fa-store me-1"></i>

                                    @if(filled($sellerUrl))
                                        <a
                                            href="{{ $sellerUrl }}"
                                            class="text-muted
                                                text-decoration-none"
                                        >
                                            {{ $sellerName }}
                                        </a>
                                    @else
                                        {{ $sellerName }}
                                    @endif
                                </div>
                            @endif

                            {{-- Product Title --}}
                            <h2
                                class="h6 fw-bold mb-2
                                    product-title"
                            >
                                @if(
                                    $isPublished
                                    && filled($productUrl)
                                )
                                    <a
                                        href="{{ $productUrl }}"
                                        class="text-dark
                                            text-decoration-none"
                                    >
                                        {{ $title }}
                                    </a>
                                @else
                                    {{ $title }}
                                @endif
                            </h2>

                            {{-- Description --}}
                            @if($description !== '')
                                <p
                                    class="small text-muted
                                        mb-3 product-description"
                                >
                                    {{ $description }}
                                </p>
                            @endif

                            {{-- Rating --}}
                            <div
                                class="d-flex align-items-center
                                    gap-2 mb-3"
                            >
                                <div
                                    class="text-warning small"
                                    aria-label="{{
                                        __('Rating: :rating out of 5', [
                                            'rating' => number_format(
                                                $rating,
                                                1
                                            ),
                                        ])
                                    }}"
                                >
                                    @for($star = 1; $star <= 5; $star++)
                                        <i
                                            class="{{
                                                $star <= round($rating)
                                                    ? 'fas'
                                                    : 'far'
                                            }} fa-star"
                                        ></i>
                                    @endfor
                                </div>

                                <small class="text-muted">
                                    {{ number_format($rating, 1) }}
                                    ({{
                                        number_format(
                                            $reviewsCount
                                        )
                                    }})
                                </small>
                            </div>

                            {{-- Price --}}
                            @if($product)
                                <div class="mb-3">
                                    <span
                                        class="fs-5 fw-bold
                                            text-primary text-nowrap"
                                    >
                                        {{
                                            money(
                                                $sellingPrice,
                                                $displayCurrency
                                            )
                                        }}
                                    </span>

                                    @if($hasDiscount)
                                        <span
                                            class="small text-muted
                                                text-decoration-line-through
                                                ms-2 text-nowrap"
                                        >
                                            {{
                                                money(
                                                    $regularPrice,
                                                    $displayCurrency
                                                )
                                            }}
                                        </span>
                                    @endif
                                </div>
                            @endif

                            {{-- Actions --}}
                            <div class="mt-auto">
                                @if($isPublished)
                                    <div class="d-grid gap-2">
                                        @if(filled($productUrl))
                                            <a
                                                href="{{ $productUrl }}"
                                                class="btn
                                                    btn-primary btn-sm"
                                            >
                                                <i
                                                    class="fas fa-eye me-1"
                                                ></i>

                                                {{ __('View Product') }}
                                            </a>
                                        @endif

                                        @if(
                                            $isAvailable
                                            && $cartRouteExists
                                        )
                                            <form
                                                method="POST"
                                                action="{{
                                                    route(
                                                        'storefront.cart.items.store'
                                                    )
                                                }}"
                                                class="wishlist-cart-form"
                                            >
                                                @csrf

                                                <input
                                                    type="hidden"
                                                    name="product_id"
                                                    value="{{ $product->id }}"
                                                >

                                                <input
                                                    type="hidden"
                                                    name="quantity"
                                                    value="1"
                                                >

                                                <button
                                                    type="submit"
                                                    class="btn
                                                        btn-outline-success
                                                        btn-sm w-100
                                                        wishlist-cart-button"
                                                >
                                                    <i
                                                        class="fas
                                                            fa-shopping-cart
                                                            me-1"
                                                    ></i>

                                                    {{ __('Add to Cart') }}
                                                </button>
                                            </form>
                                        @endif

                                        @if(filled($contactUrl))
                                            <a
                                                href="{{ $contactUrl }}"
                                                class="btn
                                                    btn-outline-secondary
                                                    btn-sm"
                                            >
                                                <i
                                                    class="fas
                                                        fa-envelope me-1"
                                                ></i>

                                                {{ __('Contact Seller') }}
                                            </a>
                                        @endif
                                    </div>
                                @else
                                    <div
                                        class="alert alert-secondary
                                            small py-2 mb-2"
                                    >
                                        <i
                                            class="fas
                                                fa-info-circle me-1"
                                        ></i>

                                        {{
                                            __(
                                                'This product is no longer available.'
                                            )
                                        }}
                                    </div>
                                @endif

                                {{-- Remove from Wishlist --}}
                                @if($wishlistRouteExists)
                                    <form
                                        method="POST"
                                        action="{{
                                            route(
                                                'account.wishlist.toggle',
                                                $product
                                            )
                                        }}"
                                        class="mt-2
                                            wishlist-remove-form"
                                    >
                                        @csrf

                                        <button
                                            type="submit"
                                            class="btn
                                                btn-outline-danger
                                                btn-sm w-100
                                                wishlist-remove-button"
                                        >
                                            <i
                                                class="fas
                                                    fa-heart-broken me-1"
                                            ></i>

                                            {{
                                                __(
                                                    'Remove from Wishlist'
                                                )
                                            }}
                                        </button>
                                    </form>
                                @elseif(! $product)
                                    <div
                                        class="small text-danger
                                            text-center mt-2"
                                    >
                                        {{
                                            __(
                                                'The original product record has been removed.'
                                            )
                                        }}
                                    </div>
                                @endif
                            </div>
                        </div>

                        @if(filled($item->id))
                            <div
                                class="card-footer bg-white
                                    border-0 pt-0"
                            >
                                <small class="text-muted">
                                    <i
                                        class="far fa-bookmark me-1"
                                    ></i>

                                    {{
                                        __('Saved item #:id', [
                                            'id' => $item->id,
                                        ])
                                    }}
                                </small>
                            </div>
                        @endif
                    </article>
                </div>
            @endforeach
        </div>

        {{-- Pagination --}}
        @if($items->hasPages())
            <div class="d-flex justify-content-center mt-5">
                {{
                    $items
                        ->withQueryString()
                        ->links('pagination::bootstrap-5')
                }}
            </div>
        @endif
    @else
        {{-- Empty Wishlist --}}
        <div class="card border-0 shadow-sm">
            <div class="card-body text-center py-5 px-3">
                <div class="empty-icon mx-auto mb-4">
                    <i class="far fa-heart fa-3x text-danger"></i>
                </div>

                <h2 class="h4 fw-bold">
                    {{ __('Your wishlist is empty') }}
                </h2>

                <p
                    class="text-muted mx-auto mb-4"
                    style="max-width: 520px;"
                >
                    {{
                        __(
                            'Save products you are interested in and return to them whenever you are ready to make a purchase.'
                        )
                    }}
                </p>

                @if(
                    \Illuminate\Support\Facades\Route::has(
                        'storefront.products.index'
                    )
                )
                    <a
                        href="{{
                            route('storefront.products.index')
                        }}"
                        class="btn btn-primary"
                    >
                        <i class="fas fa-store me-1"></i>
                        {{ __('Explore Products') }}
                    </a>
                @endif
            </div>
        </div>
    @endif
</div>
@endsection

@once
    @push('styles')
        <style>
            .wishlist-card {
                overflow: hidden;
                transition:
                    transform 0.2s ease,
                    box-shadow 0.2s ease;
            }

            .wishlist-card:hover {
                transform: translateY(-4px);
                box-shadow:
                    0 0.75rem 1.5rem
                    rgba(0, 0, 0, 0.12) !important;
            }

            .product-image-wrapper {
                height: 210px;
                overflow: hidden;
                background: #f8f9fa;
            }

            .product-image {
                width: 100%;
                height: 100%;
                object-fit: cover;
                transition: transform 0.25s ease;
            }

            .wishlist-card:hover .product-image {
                transform: scale(1.04);
            }

            .product-placeholder {
                width: 100%;
                height: 100%;
                background:
                    linear-gradient(
                        135deg,
                        #f8f9fa,
                        #e9ecef
                    );
            }

            .product-title {
                line-height: 1.45;
                min-height: 46px;
            }

            .product-description {
                line-height: 1.5;
                min-height: 42px;
            }

            .empty-icon {
                width: 90px;
                height: 90px;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 50%;
                background: rgba(220, 53, 69, 0.1);
            }

            @media (max-width: 575.98px) {
                .product-image-wrapper {
                    height: 240px;
                }
            }

            @media (prefers-reduced-motion: reduce) {
                .wishlist-card,
                .product-image {
                    transition: none;
                }

                .wishlist-card:hover {
                    transform: none;
                }

                .wishlist-card:hover .product-image {
                    transform: none;
                }
            }
        </style>
    @endpush
@endonce

@once
    @push('scripts')
        <script>
        document.addEventListener('DOMContentLoaded', function () {
            document.querySelectorAll(
                '.wishlist-remove-form'
            ).forEach(function (form) {
                form.addEventListener(
                    'submit',
                    function (event) {
                        const confirmed = window.confirm(
                            @json(
                                __(
                                    'Remove this product from your wishlist?'
                                )
                            )
                        );

                        if (!confirmed) {
                            event.preventDefault();
                            return;
                        }

                        const button = form.querySelector(
                            '.wishlist-remove-button'
                        );

                        if (button) {
                            button.disabled = true;
                            button.innerHTML =
                                '<i class="fas fa-spinner '
                                + 'fa-spin me-1"></i>'
                                + @json(__('Removing...'));
                        }
                    }
                );
            });

            document.querySelectorAll(
                '.wishlist-cart-form'
            ).forEach(function (form) {
                form.addEventListener(
                    'submit',
                    function () {
                        const button = form.querySelector(
                            '.wishlist-cart-button'
                        );

                        if (button) {
                            button.disabled = true;
                            button.innerHTML =
                                '<i class="fas fa-spinner '
                                + 'fa-spin me-1"></i>'
                                + @json(__('Adding...'));
                        }
                    }
                );
            });
        });
        </script>
    @endpush
@endonce