@extends('layouts.front_layout')

@section('title', 'Checkout | Edexcel Papers')

@section('content')
<div class="checkout-page">
    <a class="back-link" href="{{ route('cart.index') }}">&larr; Back to cart</a>
    <h1>Checkout</h1>
    <p class="checkout-intro">Enter your delivery details. Your signed-in email is used for this order.</p>

    @if ($errors->any())
        <div class="checkout-errors">
            <strong>Please correct the following:</strong>
            <ul>@foreach ($errors->all() as $error)<li>{{ $error }}</li>@endforeach</ul>
        </div>
    @endif

    <div class="checkout-layout">
        <form class="checkout-form" method="POST" action="{{ route('checkout.store') }}">
            @csrf
            <label>Name <input name="name" value="{{ old('name', auth()->user()->name) }}" required></label>
            <label>Email <input type="email" value="{{ auth()->user()->email }}" disabled></label>
            <label>Phone <input name="phone" value="{{ old('phone') }}" required></label>
            <label>Address line 1 <input name="address_line_1" value="{{ old('address_line_1') }}" required></label>
            <label>Address line 2 <input name="address_line_2" value="{{ old('address_line_2') }}"></label>
            <div class="checkout-fields">
                <label>City <input name="city" value="{{ old('city') }}" required></label>
                <label>District <input name="district" value="{{ old('district') }}"></label>
            </div>
            <label>Postal code <input name="postal_code" value="{{ old('postal_code') }}"></label>
            <button class="checkout-submit" type="submit">Place order</button>
        </form>
        <aside class="checkout-summary">
            <h2>Order details</h2>
            @foreach ($items as $item)
                <div><span>{{ $item->book->title }} × {{ $item->quantity }}</span><strong>Rs. {{ number_format($item->quantity * (float) $item->unit_price, 2) }}</strong></div>
            @endforeach
            <hr>
            <div><strong>Total</strong><strong>Rs. {{ number_format($total, 2) }}</strong></div>
        </aside>
    </div>
</div>

<style>
    .checkout-page { width: min(1000px, calc(100% - 2rem)); margin: 2rem auto; color: #102a43; }
    .back-link { color: #526477; text-decoration: none; }
    .checkout-page h1 { margin: 1rem 0 .3rem; }
    .checkout-intro { color: #64717c; }
    .checkout-layout { display: grid; grid-template-columns: 1.2fr .8fr; gap: 2rem; margin-top: 1.5rem; }
    .checkout-form, .checkout-summary { padding: 1.4rem; border: 1px solid #dce5eb; border-radius: 12px; }
    .checkout-form { display: grid; gap: 1rem; }
    .checkout-form label { display: grid; gap: .35rem; font-weight: 700; font-size: .85rem; }
    .checkout-form input { border: 1px solid #cbd8e0; border-radius: 7px; padding: .7rem; font: inherit; }
    .checkout-form input:disabled { background: #f1f4f6; }
    .checkout-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
    .checkout-submit { border: 0; border-radius: 8px; padding: .8rem; background: #102a43; color: #fff; font-weight: 700; cursor: pointer; }
    .checkout-summary { height: fit-content; background: #effcfb; }
    .checkout-summary h2 { margin-top: 0; font-size: 1.2rem; }
    .checkout-summary div { display: flex; justify-content: space-between; gap: 1rem; padding: .65rem 0; font-size: .85rem; }
    .checkout-errors { padding: 1rem; border-radius: 8px; background: #fff1ef; color: #a93226; }
    @media (max-width: 700px) { .checkout-layout { grid-template-columns: 1fr; } }
</style>
@endsection