@extends('layout')

@section('content')
<link href="https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght@700&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">

<style>
    #wishlist-page-wrapper {
        padding: 60px 20px;
        background-color: #fdfdfd;
        font-family: 'Inter', sans-serif;
    }

    .wishlist-container {
        max-width: 1200px;
        margin: 0 auto;
        background: #fff;
        border: 1px solid #e8d5b5; /* Signature gold border */
        border-radius: 15px;
        overflow: hidden;
    }

    .wishlist-header {
        padding: 25px 40px;
        border-bottom: 1px solid #eee;
    }

    .wishlist-header h1 {
        font-family: 'Libre Baskerville', serif;
        font-size: 24px;
        margin: 0;
        color: #1a1a1a;
    }

    /* Table Styling */
    .wishlist-table {
        width: 100%;
        border-collapse: collapse;
    }

    .wishlist-table thead {
        background-color: #f8f9fa;
        border-bottom: 1px solid #eee;
    }

    .wishlist-table th {
        text-align: left;
        padding: 15px 40px;
        font-size: 12px;
        text-transform: uppercase;
        color: #888;
        letter-spacing: 0.5px;
        font-weight: 600;
    }

    .wishlist-table td {
        padding: 20px 40px;
        border-bottom: 1px solid #f9f9f9;
        vertical-align: middle;
    }

    /* Product Column */
    .wishlist-product {
        display: flex;
        align-items: center;
        gap: 20px;
    }

    .wishlist-product img {
        width: 70px;
        height: 70px;
        border-radius: 8px;
        object-fit: cover;
    }

    .product-name {
        font-family: 'Libre Baskerville', serif;
        font-size: 16px;
        font-weight: 700;
        color: #1a1a1a;
    }

    /* Price Styling */
    .price-col {
        font-size: 16px;
        font-weight: 600;
    }

    .old-price {
        text-decoration: line-through;
        color: #bbb;
        margin-right: 10px;
        font-weight: 400;
    }

    /* Discount Badge */
   span.wishlistdiscount-badge-badge{
        color: #28a745;
        font-weight: 600;
        font-size: 14px;
    }

    /* Action Buttons */
    .actions-col {
        display: flex;
        align-items: center;
        gap: 15px;
    }

    .btn-add-cart {
        background-color: #d4b06d; /* Signature gold button */
        color: white;
        padding: 12px 30px;
        border-radius: 30px;
        text-decoration: none;
        font-size: 14px;
        font-weight: 600;
        border: none;
        transition: background 0.3s ease;
        white-space: nowrap;
    }

    .btn-add-cart:hover {
        background-color: #bc9956;
    }

    .btn-remove {
        color: #ccc;
        font-size: 18px;
        text-decoration: none;
        transition: color 0.2s;
    }

    .btn-remove:hover {
        color: #ff4d4d;
    }

    @media (max-width: 768px) {
        .wishlist-table thead { display: none; }
        .wishlist-table td { display: block; padding: 10px 20px; border: none; }
        .wishlist-container { padding-bottom: 20px; }
        .wishlist-product { margin-bottom: 10px; }
    }
</style>

<div id="wishlist-page-wrapper">
    <div class="wishlist-container">
        <div class="wishlist-header">
            <h1>Wishlist</h1>
        </div>

        <table class="wishlist-table">
            <thead>
                <tr>
                    <th>Products</th>
                    <th>Price</th>
                    <th>Discount</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                {{-- Example Loop for Wishlist Items --}}
                @foreach(range(1, 4) as $item)
                <tr>
                    <td>
                        <div class="wishlist-product">
                            <img src="https://via.placeholder.com/70" alt="Product Image">
                            <span class="product-name">Kaara Boonthi Mixture</span>
                        </div>
                    </td>
                    <td class="price-col">
                        <span class="old-price">₹200</span>
                        <span class="current-price">₹100</span>
                    </td>
                    <td>
                        <span class="wishlistdiscount-badge-badge">50% Discount</span>
                    </td>
                    <td>
                        <div class="actions-col">
                            <a href="#" class="btn-add-cart">Add to Cart</a>
                            <a href="#" class="btn-remove">
                                <i class="fa-regular fa-circle-xmark"></i>
                            </a>
                        </div>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>
@endsection