@extends('web.home.layout.master')

@section('content')

<!--Body Content-->
<div id="page-content" class="section">

   @php
                                  $user=Auth::user();
                                  $wishlistData=App\Models\Wishlist::where('user_id',$user->id)->get();
                              @endphp
    <div class="container-fluid wishlist-container" style="padding-right: 5%;padding-left:5%;">
        @if(count($wishlistData) > 0)
        <div class="row">
            <div class="col-12">
                <div class="wishlist-card">
                    <div class="wishlist-header d-none d-md-flex">
                        <div class="row w-100">
                            <div class="col-md-2">Image</div>
                            <div class="col-md-4">Product</div>
                            <div class="col-md-2 text-center">Price</div>
                            <div class="col-md-2 text-center">Status</div>
                            <div class="col-md-2 text-center">Action</div>
                        </div>
                    </div>

                    <div class="wishlist-items">
                        @php
                            $user = Auth::user();
                            $wishlistData = App\Models\Wishlist::where('user_id',$user->id)->get();
                        @endphp

                        @foreach ($wishlistData as $data)
                        @php
                            $productData = App\Models\Product::where('id',$data->product_id)->where('status',1)->first();
                        @endphp

                        <div class="wishlist-item">
                            <div class="row align-items-center">
                                <div class="col-4 col-md-2">
                                    @if($productData)
                                    @php
                                        $imageArray = explode(',', $productData->product_image);
                                        $firstImage = $imageArray[0];
                                    @endphp
                                    <a href="{{ route('american.plastic.web.product.details', ['name' => Str::slug($productData->product_name)]) }}?id={{ $productData->id }}" class="product-image">
                                        <img src="{{ asset('admin/assets/img/product/'.$firstImage) }}" alt="{{ $productData->product_name }}" class="img-fluid" />
                                    </a>
                                    @else
                                    <div class="product-image">
                                        <img src="{{ asset('web/assets/images/placeholder.jpg') }}" alt="Product not available" class="img-fluid" />
                                    </div>
                                    @endif
                                </div>

                                <div class="col-8 col-md-4 product-info">
                                    @if($productData)
                                    <h3>
                                        <a href="{{ route('american.plastic.web.product.details', ['name' => Str::slug($productData->product_name)]) }}?id={{ $productData->id }}">
                                            {{ $productData->product_name }}
                                        </a>
                                    </h3>
                                    @else
                                    <h3>Product not available</h3>
                                    @endif
                                </div>

                                <div class="col-6 col-md-2 text-md-center">
                                    <div class="price">
                                        @if($productData)
                                        LKR {{ number_format($productData->product_price, 2) }}
                                        @else
                                        LKR 0.00
                                        @endif
                                    </div>
                                </div>

                                <div class="col-6 col-md-2 text-md-center">
                                    <div class="stock-status">
                                        @if($productData)
                                        <span class="badge in-stock">In Stock</span>
                                        @else
                                        <span class="badge out-of-stock">Unavailable</span>
                                        @endif
                                    </div>
                                </div>

                                <div class="col-12 col-md-2 text-md-center">
                                    <div class="actions">
                                        @if($productData)
                                        <a href="{{ route('american.plastic.web.wishlist.remove',['id'=>$data->id]) }}" class="btn-remove" title="Remove">
                                            <i class="icon icon anm anm-times-l"></i>
                                        </a>
                                        <a href="{{ route('american.plastic.web.product.details', ['name' => Str::slug($productData->product_name)]) }}?id={{ $productData->id }}" class="btn-view" title="View">
                                            <i class="icon icon anm anm-eye"></i>
                                        </a>
                                        @else
                                        <a href="#" class="btn-remove" title="Remove">
                                            <i class="icon icon anm anm-times-l"></i>
                                        </a>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
        @else
        <div class="row">
            <div class="col-12">
                <div class="empty-wishlist text-center">
                    <div class="empty-icon">
                        <i class="icon icon anm anm-heart-l"></i>
                    </div>
                    <h3>Your wishlist is empty</h3>
                    <p>You don't have any items in your wishlist yet.</p>
                    <a href="{{ route('american.plastic.web') }}" class="btn btn-primary">Continue Shopping</a>
                </div>
            </div>
        </div>
        @endif
    </div>
</div>
<!--End Body Content-->

<style>
    /* Modern Wishlist Styles */
    .page-header {
        background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
        padding: 60px 0;
        margin-bottom: 40px;
    }

    .page-heading {
        font-size: 2.5rem;
        font-weight: 700;
        color: #2c3e50;
        margin-bottom: 10px;
    }

    .page-subtitle {
        font-size: 1rem;
        color: #7f8c8d;
    }

    .wishlist-container {
        padding-bottom: 60px;
    }

    .wishlist-card {
        background: #fff;
        border-radius: 10px;
        box-shadow: 0 5px 15px rgba(0,0,0,0.05);
        overflow: hidden;
    }

    .wishlist-header {
        background: #f8f9fa;
        padding: 15px 20px;
        font-weight: 600;
        color: #2c3e50;
        border-bottom: 1px solid #eee;
    }

    .wishlist-items {
        padding: 0;
    }

    .wishlist-item {
        padding: 20px;
        border-bottom: 1px solid #eee;
        transition: all 0.3s ease;
    }

    .wishlist-item:hover {
        background: #f9f9f9;
    }

    .product-image {
        display: block;
        border-radius: 8px;
        overflow: hidden;
        background: #f5f5f5;
    }

    .product-image img {
        width: 100%;
        height: auto;
        transition: transform 0.3s ease;
    }

    .product-image:hover img {
        transform: scale(1.05);
    }

    .product-info h3 {
        font-size: 1.1rem;
        margin-bottom: 5px;
    }

    .product-info h3 a {
        color: #2c3e50;
        text-decoration: none;
        transition: color 0.3s ease;
    }

    .product-info h3 a:hover {
        color: #3498db;
    }

    .price {
        font-weight: 600;
        color: #2c3e50;
        font-size: 1rem;
    }

    .badge {
        display: inline-block;
        padding: 2px 10px;
        border-radius: 20px;
        font-size: 0.8rem;
        font-weight: 500;
    }

    .in-stock {
        background: #e3f7e8;
        color: #27ae60;
    }

    .out-of-stock {
        background: #ffebee;
        color: #e74c3c;
    }

    .actions {
        display: flex;
        justify-content: center;
        gap: 15px;
    }

    .btn-remove, .btn-view {
        color: #95a5a6;
        font-size: 1.2rem;
        transition: all 0.3s ease;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border-radius: 50%;
    }

    .btn-remove:hover {
        color: #e74c3c;
        background: #ffebee;
    }

    .btn-view:hover {
        color: #3498db;
        background: #ebf5fb;
    }

    .empty-wishlist {
        padding: 60px 20px;
        background: #fff;
        border-radius: 10px;
        box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    }

    .empty-icon {
        font-size: 3rem;
        color: #bdc3c7;
        margin-bottom: 20px;
    }

    .empty-wishlist h3 {
        font-size: 1.5rem;
        color: #2c3e50;
        margin-bottom: 10px;
    }

    .empty-wishlist p {
        color: #7f8c8d;
        margin-bottom: 20px;
    }

    .btn-primary {
        background: #3498db;
        border: none;
        padding: 10px 25px;
        border-radius: 30px;
        font-weight: 500;
        transition: all 0.3s ease;
    }

    .btn-primary:hover {
        background: #2980b9;
        transform: translateY(-2px);
    }

    @media (max-width: 767px) {
        .page-header {
            padding: 40px 0;
        }

        .page-heading {
            font-size: 2rem;
        }

        .wishlist-item {
            padding: 15px 10px;
        }

        .product-info h3 {
            font-size: 1rem;
        }

        .price, .badge {
            font-size: 0.9rem;
        }

        .actions {
            margin-top: 15px;
            justify-content: flex-start;
        }
    }

    @media only screen and (max-width: 768px) {
        .section {
            padding-top: 20%;
        }
    }

    @media only screen and (min-width: 768px) {
        .section {
            padding-top: 10%;
        }
    }
</style>

@endsection