@extends('frontend::layouts.master')

@php
$assetPath = 'frontend_assets';
@endphp

@section('content')
    <div class="container-fluid px-2 px-lg-5">
        <div class="main-header-bar">
            <a href="javascript:history.back()" class="back-btn">
                <img src="{{ asset($assetPath . '/icons/back.png') }}" alt="{{ webTrans('back', 'wishlist') }}">
            </a>
            <nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb" class="py-3">
                <ol class="breadcrumb m-0">
                    <li class="breadcrumb-item item-nav">
                        <a href="{{ route('frontend.home') }}">{{ webTrans('home', 'wishlist') }}</a>
                    </li>
                    <li class="breadcrumb-item item-nav active">
                        <a href="#">{{ webTrans('wishlist', 'wishlist') }}</a>
                    </li>
                </ol>
            </nav>
        </div>
    </div>

    @auth('web')
        {{-- Wishlist --}}
        <section class="featured pb-5" id="wishlist-section" style="display: {{ !$products->isEmpty() ? 'block' : 'none' }};">
            <div class="container-fluid px-2 px-lg-5">
                <div class="top-selling-wrapper">
                    <div class="row g-4 g-md-4" id="wishlist-container">
                        @foreach($products as $product)
                        <div class="col-6 col-lg-2 wishlist-item-col" data-product-id="{{ $product->id }}">
                            @include('frontend::home.sections._product_card', [
                                'product'        => $product,
                                'wishlistItems'  => $wishlistItems,
                                'currentCountry' => $currentCountry,
                                'pageName'       => 'wishlist',
                            ])
                        </div>
                        @endforeach
                    </div>

                    @if($products instanceof \Illuminate\Pagination\LengthAwarePaginator && $products->hasPages())
                    <div class="pagination-container d-flex justify-content-center align-items-center mt-5">
                        {{ $products->links('frontend::partials.pagination') }}
                    </div>
                    @endif
                </div>
            </div>
        </section>

        <section id="empty-wishlist-section" style="display: {{ $products->isEmpty() ? 'block' : 'none' }};">
            <div class="order-success-container d-flex flex-column align-items-center justify-content-center text-center p-4">
                <img src="{{ asset($assetPath . '/images/Group497.png') }}" class="img-fluid" alt="{{ webTrans('empty_wishlist', 'wishlist') }}">
                <div class="order-info-text mt-4 mb-4">
                    <p class="no-order-text mb-1">{{ webTrans('empty_wishlist_message', 'wishlist') }}</p>
                </div>
            </div>
        </section>
    @else
        <section id="guest-wishlist-section">
            <div class="order-success-container d-flex flex-column align-items-center justify-content-center text-center p-5">
                <img src="{{ asset($assetPath . '/images/Group497.png') }}" class="img-fluid mb-4" style="max-width: 250px;" alt="{{ webTrans('wishlist', 'wishlist') }}">
                <div class="order-info-text mt-2 mb-4">
                    <p class="no-order-text mb-3">{{ webTrans('guest_wishlist_message', 'wishlist') }}</p>
                    <button class="btn btn-next px-5" data-bs-toggle="modal" data-bs-target="#mobileModal">
                        {{ webTrans('sign_in', 'wishlist') }}
                    </button>
                </div>
            </div>
        </section>
    @endauth

@endsection