@extends('layouts.app')
@section('title', 'Shopping Cart - AVIOBOOTS')

@section('content')
<main class="container" style="padding: 4rem 2rem;">
    <div style="display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; margin-bottom:2rem;">
        <h1>Shopping Cart</h1>
        <div>
            <span style="font-size:1.5rem; font-weight:600;" id="cartTotalLabel">Total: <span id="cartTotal">Rs {{ number_format($total, 0) }}</span></span>
            <a href="{{ route('checkout.show') }}" class="btn" style="margin-left:1rem;">Proceed to Checkout</a>
        </div>
    </div>

    <div id="cartItems">
        @forelse($items as $key => $item)
            <div class="cart-row" data-key="{{ $key }}">
                <img src="{{ asset($item['image']) }}" alt="{{ $item['name'] }}">
                <div>
                    <h4 style="margin-bottom:.25rem;">{{ $item['name'] }}</h4>
                    <p style="color:#777; margin:0;">Size: {{ $item['size'] ?? 'N/A' }}</p>
                    <p style="margin:.25rem 0 0;">Unit: Rs {{ number_format($item['price'], 0) }}</p>
                </div>
                <div class="col-qty qty-controls">
                    <button type="button" class="qty-dec">−</button>
                    <span class="qty-val" style="min-width:28px; text-align:center; font-weight:600;">{{ $item['qty'] }}</span>
                    <button type="button" class="qty-inc">+</button>
                </div>
                <div class="col-price" style="font-weight:600;">
                    <span class="line-total">Rs {{ number_format($item['price'] * $item['qty'], 0) }}</span>
                </div>
                <button type="button" class="col-remove btn btn-danger cart-remove" style="background:#f44336; color:#fff; border:none; padding:.6rem 1rem; border-radius:6px; cursor:pointer;">Remove</button>
            </div>
        @empty
            <p style="text-align:center; padding:3rem; font-size:1.1rem;">Your cart is empty.</p>
        @endforelse
    </div>

    <div style="text-align:center; margin-top:3rem;">
        <a href="{{ route('home') }}" class="btn btn-secondary" style="background:#f5f5f5; color:#000; border:2px solid #000;">Continue Shopping</a>
    </div>
</main>
@endsection