<x-app-layout>
    <x-slot name="header">
        <h2 class="serif" style="font-size: 1.3rem; color: var(--cream); font-weight: 400; letter-spacing: 0.05em;">
            {{ __('Your Shopping Bag') }}
        </h2>
    </x-slot>

    <style>
        .cart-container {
            background: #fff;
            border-radius: 4px;
            border: 1px solid rgba(26,24,20,0.08);
            overflow: hidden;
            margin-bottom: 3rem;
        }
        .cart-header {
            background: var(--ivory);
            padding: 1rem 2rem;
            border-bottom: 1px solid rgba(26,24,20,0.06);
            display: grid;
            grid-template-columns: 2fr 1fr 1fr 1fr 40px;
            gap: 1rem;
            font-size: 0.65rem;
            letter-spacing: 0.15em;
            text-transform: uppercase;
            color: var(--warm-gray);
            font-weight: 600;
        }
        .cart-item {
            padding: 2rem;
            display: grid;
            grid-template-columns: 2fr 1fr 1fr 1fr 40px;
            gap: 1rem;
            align-items: center;
            border-bottom: 1px solid rgba(26,24,20,0.04);
        }
        .cart-item:last-child { border-bottom: none; }
        
        .item-info { display: flex; align-items: center; gap: 1.5rem; }
        .item-img {
            width: 80px;
            height: 100px;
            background: var(--cream);
            border-radius: 2px;
            object-fit: cover;
        }
        .item-name {
            font-family: 'Cormorant Garamond', Georgia, serif;
            font-size: 1.2rem;
            font-weight: 600;
            color: var(--charcoal);
        }
        .item-meta { font-size: 0.75rem; color: var(--mist); }

        .price-text { font-family: 'DM Sans', sans-serif; font-size: 0.95rem; color: var(--ink); }
        .subtotal-text { font-weight: 600; color: var(--charcoal); }

        .qty-badge {
            background: var(--cream);
            padding: 0.3rem 0.8rem;
            border-radius: 2px;
            font-size: 0.85rem;
            font-weight: 500;
        }

        .remove-btn {
            color: var(--mist);
            transition: color 0.2s;
            cursor: pointer;
            background: none;
            border: none;
            padding: 5px;
        }
        .remove-btn:hover { color: var(--terracotta); }

        .cart-summary {
            padding: 3rem;
            background: var(--charcoal);
            border-radius: 4px;
            color: var(--cream);
        }
        .summary-row {
            display: flex;
            justify-content: space-between;
            margin-bottom: 1rem;
            font-size: 0.9rem;
        }
        .total-row {
            border-top: 1px solid rgba(255,255,255,0.1);
            margin-top: 1.5rem;
            padding-top: 1.5rem;
            font-family: 'Cormorant Garamond', serif;
            font-size: 2rem;
            font-weight: 600;
        }

        .btn-checkout {
            display: block;
            width: 100%;
            padding: 1.25rem;
            background: var(--amber);
            color: var(--charcoal);
            text-align: center;
            text-decoration: none;
            font-size: 0.8rem;
            letter-spacing: 0.15em;
            text-transform: uppercase;
            font-weight: 700;
            border-radius: 2px;
            margin-top: 2rem;
            transition: all 0.3s;
        }
        .btn-checkout:hover {
            background: var(--amber-light);
            transform: translateY(-2px);
        }

        .empty-cart {
            text-align: center;
            padding: 8rem 2rem;
            background: #fff;
            border: 1px solid rgba(26,24,20,0.08);
            border-radius: 4px;
        }
    </style>

    <div style="padding: 4rem 0 8rem;">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            
            @if(session('success'))
                <div class="alert-animate" style="background: var(--success); color: #fff; padding: 1rem 1.5rem; border-radius: 2px; margin-bottom: 2rem; font-size: 0.9rem; display: flex; align-items: center; gap: 0.75rem;">
                    <svg xmlns="http://www.w3.org/2000/svg" style="width:20px;height:20px;" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                    </svg>
                    {{ session('success') }}
                </div>
            @endif

            <div style="display: grid; grid-template-columns: 1fr 340px; gap: 3rem; align-items: start;" class="flex-col lg:flex-row">
                
                @if(count($cart) > 0)
                    <!-- Left: Cart Items -->
                    <div>
                        <div class="cart-container">
                            <div class="cart-header md:grid" style="display: none;">
                                <div>Item</div>
                                <div style="text-align: center;">Price</div>
                                <div style="text-align: center;">Qty</div>
                                <div style="text-align: right;">Total</div>
                                <div></div>
                            </div>
                            
                            @foreach($cart as $id => $details)
                                <div class="cart-item">
                                    <div class="item-info">
                                        @if($details['image'])
                                            <img src="{{ asset('storage/' . $details['image']) }}" class="item-img">
                                        @else
                                            <div class="item-img" style="display:flex;align-items:center;justify-content:center;color:var(--mist);">
                                                <svg style="width:24px;height:24px;" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
                                            </div>
                                        @endif
                                        <div>
                                            <div class="item-name">{{ $details['name'] }}</div>
                                            <div class="item-meta">Style: Classic</div>
                                        </div>
                                    </div>
                                    
                                    <div class="price-text" style="text-align: center;">
                                        ৳{{ number_format($details['price'], 2) }}
                                    </div>
                                    
                                    <div style="text-align: center;">
                                        <span class="qty-badge">{{ $details['quantity'] }}</span>
                                    </div>
                                    
                                    <div class="price-text subtotal-text" style="text-align: right;">
                                        ৳{{ number_format($details['price'] * $details['quantity'], 2) }}
                                    </div>
                                    
                                    <div style="text-align: right;">
                                        <form action="{{ route('cart.remove') }}" method="POST">
                                            @csrf
                                            <input type="hidden" name="id" value="{{ $id }}">
                                            <button type="submit" class="remove-btn">
                                                <svg style="width:18px;height:18px;" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                                                </svg>
                                            </button>
                                        </form>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                        
                        <a href="{{ route('home') }}" class="serif" style="color: var(--charcoal); text-decoration: none; display: flex; align-items: center; gap: 0.5rem; font-weight: 600; font-size: 1.1rem;">
                            <svg style="width:16px;height:16px;" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path d="M10 19l-7-7m0 0l7-7m-7 7h18"/></svg>
                            Continue Browsing
                        </a>
                    </div>

                    <!-- Right: Summary -->
                    <div class="cart-summary">
                        <h4 class="serif" style="font-size: 1.6rem; margin-bottom: 2rem;">Summary</h4>
                        
                        <div class="summary-row">
                            <span style="color: var(--warm-gray);">Subtotal</span>
                            <span>৳{{ number_format($total, 2) }}</span>
                        </div>
                        <div class="summary-row">
                            <span style="color: var(--warm-gray);">Shipping</span>
                            <span>{{ $total > 15000 ? 'Complimentary' : '৳150.00' }}</span>
                        </div>
                        <div class="summary-row">
                            <span style="color: var(--warm-gray);">Tax (Estimated)</span>
                            <span>৳0.00</span>
                        </div>
                        
                        <div class="summary-row total-row">
                            <span>Total</span>
                            <span>৳{{ number_format($total > 15000 ? $total : $total + 150, 2) }}</span>
                        </div>
                        
                        <a href="{{ route('checkout') }}" class="btn-checkout">
                            Secure Checkout
                        </a>
                        
                        <p style="text-align: center; color: var(--warm-gray); font-size: 0.7rem; margin-top: 1.5rem; letter-spacing: 0.05em;">
                            Complimentary shipping on orders over ৳15,000
                        </p>
                    </div>
                @else
                    <div class="empty-cart" style="grid-column: 1 / -1;">
                        <div style="background: var(--ivory); width: 80px; height: 80px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 2rem;">
                            <svg style="width:32px;height:32px;color:var(--mist);" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"/></svg>
                        </div>
                        <h3 class="serif" style="font-size: 2rem; margin-bottom: 1rem;">Your bag is empty</h3>
                        <p style="color: var(--warm-gray); margin-bottom: 2.5rem;">Explore our curated selection and find something unique.</p>
                        <a href="{{ route('home') }}" class="btn-checkout" style="width: auto; display: inline-block; padding-left: 3rem; padding-right: 3rem;">
                            Start Shopping
                        </a>
                    </div>
                @endif

            </div>
        </div>
    </div>
</x-app-layout>
