@extends('ecommerce::layout.store-layout')



@section('title', __('ecommerce::ecommerce.wishlist'))

@section('page-styles')
    <style>
        .wishlist-hero {
            padding: 32px 0 42px;
            color: #fff;
            background: linear-gradient(rgba(38, 36, 34, .38), rgba(38, 36, 34, .38)), url('{{ asset('assets/ecommerce/images/ecommerce/breadcrumb.jpg') }}') center/cover
        }

        .wishlist-hero h1 {
            margin: 0 0 7px;
            color: var(--yellow);
            font-size: 28px
        }

        .wishlist-hero p {
            margin: 0
        }

        .wishlist-main {
            padding: 28px 0 70px
        }

        .wishlist-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 22px
        }

        .wishlist-head h2 {
            margin: 0;
            font-size: 21px
        }

        .wishlist-count {
            color: var(--muted)
        }

        .wishlist-grid {
            background: #fff;
            border: 1px solid var(--line);
            border-radius: 8px;
            box-shadow: 0 8px 24px rgba(36, 43, 53, .07);
            overflow: hidden
        }

        .wishlist-table-head,
        .wishlist-card {
            display: grid;
            grid-template-columns: 1.25fr 2fr 1.2fr 1fr;
            align-items: center;
            gap: 15px;
            padding: 16px 24px
        }

        .wishlist-table-head {
            background: #fafbfc;
            color: var(--muted);
            font-size: 11px;
            font-weight: 700;
            text-align: center;
        }

        .wishlist-card {
            min-height: 120px;
            border-top: 1px solid var(--line)
        }

        .wishlist-image-wrap {
            display: block;
            text-align: center
        }

        .wishlist-image {
            width: 86px;
            height: 86px;
            object-fit: contain
        }

        .wishlist-card h3 {
            margin: 0;
            font-size: 14px
        }

        .wishlist-price {
            font-size: 17px;
            text-align: center
        }

        .stock {
            text-align: center;
            color: #24965a;
            font-size: 11px
        }

        .stock.out {
            color: #c0392b
        }

        .card-actions {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px
        }

        .remove-wishlist,
        .details-button {
            color: #7b8790;
            font-size: 18px
        }

        .remove-wishlist:hover {
            color: #c0392b
        }

        .cart-button {
            border: 0;
            border-radius: 5px;
            background: var(--yellow);
            padding: 9px 12px;
            color: #493908;
            font-size: 11px;
            font-weight: 700
        }

        .empty-wishlist {
            min-height: 360px;
            padding: 42px 24px;
            text-align: center;
            background: linear-gradient(145deg, #fff, #fffdf5)
        }

        .empty-wishlist img {
            width: 170px;
            height: 170px;
            object-fit: contain
        }

        .empty-wishlist h2 {
            margin: 12px 0 7px;
            font-size: 21px
        }

        .empty-wishlist p {
            margin: 0 0 20px;
            color: var(--muted)
        }

        .shop-button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            height: 42px;
            padding: 0 24px;
            border-radius: 5px;
            background: var(--yellow);
            color: #493908;
            font-weight: 700
        }

        .pagination {
            padding: 20px;
            text-align: center
        }

        @media(max-width:800px) {
            .wishlist-table-head {
                display: none
            }
        }

        @media(max-width:800px) {
            .wishlist-card {
                grid-template-columns: 90px 1fr;
                gap: 10px;
                padding: 14px
            }
        }

        @media(max-width:800px) {
            .wishlist-card h3 {
                grid-column: 2
            }
        }

        @media(max-width:800px) {

            .wishlist-price,
            .stock,
            .card-actions {
                grid-column: 2;
                text-align: start;
                justify-content: flex-start
            }
        }

        @media(max-width:800px) {
            .wishlist-image-wrap {
                grid-row: 1 / span 4
            }
        }

        .wishlist-card>.wishlist-image-wrap {
            grid-column: 1;
            grid-row: 1 / span 2
        }

        .wishlist-card>h3 {
            grid-column: 2;
            grid-row: 1;
            align-self: center;
            text-align: center;
        }

        .wishlist-card>.wishlist-price {
            grid-column: 3;
            grid-row: 1;
            align-self: center
        }

        .wishlist-card>.stock {
            grid-column: 2;
            grid-row: 2;
            align-self: start;
            text-align: center;
        }

        .wishlist-card>.card-actions {
            grid-column: 4;
            grid-row: 1 / span 2;
            align-self: center;
            flex-wrap: wrap
        }

        .wishlist-card>.card-actions form {
            margin: 0
        }

        @media(max-width:800px) {
            .wishlist-card>.wishlist-image-wrap {
                grid-column: 1;
                grid-row: 1 / span 4
            }
        }

        @media(max-width:800px) {
            .wishlist-card>h3 {
                grid-column: 2;
                grid-row: 1
            }
        }

        @media(max-width:800px) {
            .wishlist-card>.wishlist-price {
                grid-column: 2;
                grid-row: 2;
                text-align: start
            }
        }

        @media(max-width:800px) {
            .wishlist-card>.stock {
                grid-column: 2;
                grid-row: 3
            }
        }

        @media(max-width:800px) {
            .wishlist-card>.card-actions {
                grid-column: 2;
                grid-row: 4
            }
        }
    .wishlist-card>.wishlist-image-wrap{grid-column:1;grid-row:1 / span 2}.wishlist-card>.card-actions form{margin:0}
</style>
@endsection


@section('content')
    <section class="wishlist-hero">
        <div class="container">
            <h1>@lang('ecommerce::ecommerce.wishlist')</h1>
            <p>@lang('ecommerce::ecommerce.wishlist_message')
                < /p>
        </div>
    </section>
    <main class="wishlist-main">
        <div class="container">
            <div class="wishlist-head">
                <h2>@lang('ecommerce::ecommerce.wishlist')</h2><span class="wishlist-count">{{ $favorites->total() }}
                    @lang('ecommerce::ecommerce.items')</span>
            </div>
            @if($favorites->count())
                <div class="wishlist-grid">
                    <div class="wishlist-table-hea
                                                                d">
                        <span>@lang('ecommerce::ecommerce.image')</span><span>@lang('ecommerce::ecommerce.product_name')</span><span>@lang('ecommerce::ecommerce.price')</span><span>@lang('ecommerce::ecommerce.actions')</span>
                    </div>
                    @foreach($favorites as $favorite)
                        @php $item = $favorite->item;
                            $title = is_array($item->title ?? null) ? ($item->title[app()->getLocale()] ?? $item->title['en'] ?? reset($item->title)) : ($item->title ?? __('ecommerce::ecommerce.product_label'));
                            $image = $item->main_image['image_path'] ?? asset('assets/images/pro/1.jpg');
                            $price = (float) ($item->default_price ?? 0);
                        $inStock = $item->isInStock(); @endphp
                        <div class="wishlist-card"><a class="wishlist-image-wrap" href="{{ route('product.show', $item->id) }}"><img
                                    class="wishlist-image" src="{{ $image }}" alt="{{ $title }}"></a>
                            <h3>{{ $title }}</h3>
                            <div class="wishlist-price">{{ \App\Domain\AppBase\Models\Setting\Currency::format($price) }}</div>
                            <div class="stock {{ $inStock ? '' : 'out' }}">
                                {{ $inStock ? __('ecommerce::ecommerce.in_stock') : __('ecommerce::ecommerce.out_of_stock') }}</div>
                            <div class="card-actions"><a class="remove-wishlist" href="{{ route('wishlist.add') }}" up-method="post"
                                    up-params='{"product_id":"{{ $item->id }}","from_page":"wishlist"}' up-target=".wishlist-main"
                                    title="@lang('ecommerce::ecommerce.remove_from_wishlist')"><i class="ti-close"></i></a><a class="details-button"
                                    href="{{ route('product.show', $item->id) }}" aria-label="@lang('ecommerce::ecommerce.details')"><i
                                        class="fa fa-eye"></i></a>@if($inStock)
                                            <form action="{{ route('cart.add') }}" method="POST">@csrf<input type="hidden" name="item_id"
                                                    value="{{ $item->id }}"><input type="hidden" name="qty" value="1"><button type="submit"
                                                    class="cart-button"><i class="ti-shopping-cart"></i>
                                        @lang('ecommerce::ecommerce.add_to_cart')</button></form>@endif
                            </div>
                        </div>
                    @endforeach
                </div>
                <div class="pagination">{{ $favorites->links() }}</div>
            @else
                <div class="empty-wishlist"><img src="{{ asset('assets/ecommerce/images/empty-wishlist.png') }}"
                        alt="@lang('ecommerce::ecommerce.wishlist_empty')">
                    <h2>@lang('ecommerce::ecommerce.wishlist_empty')</h2>
                    <p>@lang('ecommerce::ecommerce.explore_products')</p><a class="shop-button"
                        href="{{ route('ecommerce.static') }}">@lang('ecommerce::ecommerce.shop_now')</a>
                </div>
            @endif
        </div>
    </main>
@endsection

@section('scripts')
    <script>document.addEventListener('DOMContentLoaded', function () { document.querySelectorAll('a.remove-wishlist').forEach(function (link) { link.addEventListener('click', function (event) { event.preventDefault(); var params = JSON.parse(link.getAttribute('up-params') || '{}'), form = document.createElement('form'); form.method = 'POST'; form.action = link.href;[['product_id', params.product_id], ['from_page', 'wishlist_static']].forEach(function (pair) { var input = document.createElement('input'); input.type = 'hidden'; input.name = pair[0]; input.value = pair[1] || ''; form.appendChild(input) }); var token = document.createElement('input'); token.type = 'hidden'; token.name = '_token'; token.value = '{{ csrf_token() }}'; form.appendChild(token); document.body.appendChild(form); form.submit(); }); }); });</script>
@endsection