@extends('layouts.app')
@section('content')
<div style="max-width: 1000px; margin: 40px auto; padding: 20px; font-family: 'Inter', sans-serif;">
    <h1 style="font-family: 'Times New Roman', serif; font-size: 32px; font-weight: normal; margin-bottom: 30px; text-align: center;">Your Shopping Bag</h1>
    
    @if(session('success'))
        <div style="background: #d4edda; color: #155724; padding: 15px; margin-bottom: 20px; border-radius: 4px; text-align: center;">{{ session('success') }}</div>
    @endif

    @if(count($cart) > 0)
        <table style="width: 100%; border-collapse: collapse; margin-bottom: 30px;">
            <thead>
                                <tr style="border-bottom: 1px solid #ccc; text-align: left;">
                    <th style="padding: 15px 0; width: 15%;">Item</th>
                    <th style="padding: 15px 0; width: 55%;">Details</th>
                    <th style="padding: 15px 0; width: 15%;">Price</th>
                    <th style="padding: 15px 0; width: 15%; text-align: right;">Action</th>
                </tr>
            </thead>
            <tbody>
                @php $total = 0; @endphp
                @foreach($cart as $key => $item)
                    @php $total += (float)str_replace(',', '', $item['price']) * $item['quantity']; @endphp
                    <tr style="border-bottom: 1px solid #eee;">
                                                <td style="padding: 20px 0;">
                            @php
                                $images = [];
                                if (!empty($item['image'])) {
                                    $decoded = json_decode($item['image'], true);
                                    if (is_array($decoded)) {
                                        $images = $decoded;
                                    } else {
                                        $images = [$item['image']];
                                    }
                                }
                                $firstImg = $images[0] ?? 'default-placeholder.png';
                                $imgSrc = str_starts_with($firstImg, 'http') ? $firstImg : asset('assets/images/product/' . trim($firstImg));
                            @endphp
                            <img src="{{ $imgSrc }}" alt="{{ $item['name'] }}" style="width: 120px; height: 120px; object-fit: contain; background: #fcfcfc; padding: 10px; border-radius: 4px; border: 1px solid #f0f0f0;">
                        </td>
                        <td style="padding: 20px 0; vertical-align: top;">
                            <h3 style="font-family: 'Times New Roman', serif; font-size: 18px; margin: 0 0 12px 0; color: #1a252f; font-weight: normal;">{{ $item['name'] }}</h3>
                            <div style="display: grid; grid-template-columns: 80px 1fr; gap: 8px; font-size: 13px; color: #555; line-height: 1.5;">
                                <strong style="color: #333;">Metal:</strong> <span>{{ $item['metal'] }}</span>
                                <strong style="color: #333;">Quality:</strong> <span>{{ $item['quality'] }}</span>
                                <strong style="color: #333;">Size:</strong> <span>{{ $item['ring_size'] }}</span>
                                @if(!empty($item['carat']))
                                <strong style="color: #333;">Carat:</strong> <span>{{ $item['carat'] }} CT</span>
                                @endif
                            </div>
                        </td>
                        <td style="padding: 20px 0; font-weight: bold; vertical-align: top;">$ {{ $item['price'] }} USD</td>
                        <td style="padding: 20px 0; vertical-align: top; text-align: right;">
                            <form action="{{ route('cart.remove') }}" method="POST">
                                @csrf
                                <input type="hidden" name="cart_key" value="{{ $key }}">
                                <button type="submit" style="margin-left: auto; background: none; border: none; color: #7b2936; cursor: pointer; display: flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 500;" title="Remove Item"><i data-lucide="trash-2" style="width: 16px; height: 16px;"></i> Remove</button>
                            </form>
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
        
        <div style="text-align: right; margin-bottom: 30px;">
            <p style="font-size: 20px; font-weight: bold;">Subtotal: $ {{ number_format($total, 2) }} USD</p>
            <p style="font-size: 13px; color: #666;">Shipping & taxes calculated at checkout</p>
        </div>
        
        <div style="text-align: right;">
            <a href="{{ route('engagement-rings') }}" style="display: inline-block; padding: 15px 30px; border: 1px solid #1a252f; color: #1a252f; text-decoration: none; margin-right: 15px; border-radius: 4px; font-weight: bold;">Continue Shopping</a>
            <a href="{{ route('checkout.index') }}" style="display: inline-block; padding: 15px 40px; background: #062b32; color: #fff; border: none; border-radius: 4px; font-weight: bold; cursor: pointer; letter-spacing: 1px; text-decoration: none;">CHECKOUT</a>
        </div>
    @else
        <div style="text-align: center; padding: 50px 0;">
            <p style="font-size: 18px; color: #666; margin-bottom: 20px;">Your bag is currently empty.</p>
            <a href="{{ route('engagement-rings') }}" style="display: inline-block; padding: 15px 30px; background: #062b32; color: #fff; text-decoration: none; border-radius: 4px; font-weight: bold;">Shop Engagement Rings</a>
        </div>
    @endif
</div>
@endsection