@extends('layouts.front_layout')

@section('title', 'Your Cart | Edexcel Papers')

@section('content')
<div class="cart-page">
    <header class="cart-page-header">
        <a class="back-link" href="{{ route('storefront') }}">&larr; Continue shopping</a>
        <h1>Your shopping cart</h1>
        <form method="POST" action="{{ route('logout') }}">
            @csrf
            <button class="logout-button" type="submit">Log out</button>
        </form>
    </header>

    @if ($cartItems->isEmpty())
        <section class="empty-cart">
            <div class="empty-cart-icon" aria-hidden="true">&#128722;</div>
            <h2>Your cart is empty</h2>
            <p>Browse our latest books and add your favourites to get started.</p>
            <a class="continue-button" href="{{ route('storefront') }}">Browse books</a>
        </section>
    @else
        <section class="cart-list" aria-label="Cart items">
            @foreach ($cartItems as $item)
                <article class="cart-page-item">
                    <div class="cart-page-cover">
                        @if ($item->book->cover_image)
                            <img src="{{ asset('storage/' . $item->book->cover_image) }}" alt="Cover of {{ $item->book->title }}">
                        @else
                            <span>{{ $item->book->title }}</span>
                        @endif
                    </div>
                    <div class="cart-page-info">
                        <span>{{ $item->book->category?->name }}</span>
                        <h2>{{ $item->book->title }}</h2>
                        <p>{{ $item->quantity }} × Rs. {{ number_format((float) $item->unit_price, 2) }}</p>
                    </div>
                    <strong>Rs. {{ number_format($item->quantity * (float) $item->unit_price, 2) }}</strong>
                    <div class="cart-item-actions">
                        <div class="quantity-controls" aria-label="Quantity for {{ $item->book->title }}">
                            <form method="POST" action="{{ route('cart.update', $item->book) }}">
                                @csrf
                                @method('PATCH')
                                <input type="hidden" name="change" value="-1">
                                <button type="submit" aria-label="Decrease quantity">−</button>
                            </form>
                            <span>{{ $item->quantity }}</span>
                            <form method="POST" action="{{ route('cart.update', $item->book) }}">
                                @csrf
                                @method('PATCH')
                                <input type="hidden" name="change" value="1">
                                <button type="submit" aria-label="Increase quantity" @disabled($item->quantity >= $item->book->stock)>+</button>
                            </form>
                        </div>
                        <form method="POST" action="{{ route('cart.destroy', $item->book) }}">
                            @csrf
                            @method('DELETE')
                            <button class="remove-cart-button" type="submit">Remove</button>
                        </form>
                    </div>
                </article>
            @endforeach
        </section>
        <aside class="cart-summary">
            <span>Total</span>
            <div>
                <strong>Rs. {{ number_format($cartTotal, 2) }}</strong>
                <a class="checkout-button" href="{{ route('checkout.create') }}">Proceed to checkout</a>
            </div>
        </aside>
    @endif
</div>

<style>
    .cart-page { width: min(900px, calc(100% - 2rem)); margin: 2rem auto; color: #102a43; }
    .cart-page-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 2rem; }
    .cart-page-header h1 { flex: 1; margin: 0; font-size: 2rem; }
    .back-link { color: #526477; text-decoration: none; }
    .logout-button { border: 1px solid #dce5eb; border-radius: 7px; padding: .55rem .8rem; background: #fff; color: #102a43; cursor: pointer; }
    .empty-cart { padding: 4rem 1rem; border: 1px solid #dce5eb; border-radius: 14px; text-align: center; }
    .empty-cart-icon { font-size: 2.5rem; }
    .empty-cart p { color: #64717c; }
    .continue-button { display: inline-block; margin-top: .8rem; border-radius: 8px; padding: .7rem 1rem; background: #102a43; color: #fff; text-decoration: none; }
    .cart-list { border-top: 1px solid #dce5eb; }
    .cart-page-item { display: grid; grid-template-columns: 76px 1fr auto auto; align-items: center; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid #dce5eb; }
    .cart-page-cover { width: 76px; height: 92px; display: grid; place-items: center; overflow: hidden; border-radius: 7px; background: #eee9e1; text-align: center; font-size: .7rem; }
    .cart-page-cover img { width: 100%; height: 100%; object-fit: cover; }
    .cart-page-info span, .cart-page-info p { color: #64717c; font-size: .8rem; }
    .cart-page-info h2 { margin: .25rem 0; font-size: 1rem; }
    .cart-page-info p { margin: 0; }
    .cart-item-actions { display: flex; flex-direction: column; align-items: flex-end; gap: .5rem; }
    .quantity-controls { display: flex; align-items: center; gap: .7rem; }
    .quantity-controls form { margin: 0; }
    .quantity-controls button { width: 26px; height: 26px; border: 1px solid #cbd8e0; border-radius: 6px; background: #fff; color: #102a43; font-size: 1rem; line-height: 1; cursor: pointer; }
    .quantity-controls button:disabled { cursor: not-allowed; opacity: .35; }
    .remove-cart-button { border: 0; background: transparent; color: #c0392b; font-size: .8rem; cursor: pointer; }
    .cart-summary { display: flex; justify-content: space-between; margin-top: 1.5rem; padding: 1.2rem; border-radius: 10px; background: #effcfb; font-size: 1.1rem; }
    .cart-summary div { display: flex; align-items: center; gap: 1rem; }
    .checkout-button { border-radius: 8px; padding: .7rem 1rem; background: #102a43; color: #fff; font-size: .85rem; text-decoration: none; }
    @media (max-width: 600px) {
        .cart-page-header { align-items: flex-start; flex-wrap: wrap; }
        .cart-page-header h1 { order: 3; flex-basis: 100%; font-size: 1.5rem; }
        .cart-page-item { grid-template-columns: 60px 1fr auto; gap: .65rem; }
        .cart-page-cover { width: 60px; height: 76px; }
        .cart-page-item > strong { grid-column: 2; }
        .cart-item-actions { grid-column: 2 / -1; align-items: flex-start; }
        .cart-summary { align-items: flex-start; flex-direction: column; gap: .8rem; }
        .cart-summary div { width: 100%; justify-content: space-between; }
    }
</style>
@endsection