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

@section('content')
<main class="container" style="padding: 4rem 2rem;">
    <h1>Checkout</h1>
    @if($errors->any())
        <div style="background:#f8d7da; color:#721c24; padding:1rem; border-radius:8px; margin:1rem 0;">
            <ul style="margin:0; padding-left:1.2rem;">
                @foreach($errors->all() as $e)<li>{{ $e }}</li>@endforeach
            </ul>
        </div>
    @endif

    <form action="{{ route('checkout.place') }}" method="POST">
        @csrf
        <div class="checkout-grid">
            <div class="checkout-box">
                <h3>Shipping Details</h3>
                <div class="form-group"><label>Full Name</label><input type="text" name="name" required value="{{ old('name', auth()->user()->name ?? '') }}"></div>
                <div class="form-group"><label>Email</label><input type="email" name="email" required value="{{ old('email', auth()->user()->email ?? '') }}"></div>
                <div class="form-group"><label>Phone</label><input type="tel" name="phone" required value="{{ old('phone') }}"></div>
                <div class="form-group"><label>Address</label><textarea name="address" rows="3" required>{{ old('address') }}</textarea></div>
                <div style="display:grid; grid-template-columns: 1fr 1fr 1fr; gap:1rem;">
                    <div class="form-group"><label>City</label><input type="text" name="city" required value="{{ old('city') }}"></div>
                    <div class="form-group"><label>State</label><input type="text" name="state" required value="{{ old('state') }}"></div>
                    <div class="form-group"><label>Zip / Postal</label><input type="text" name="zip" required value="{{ old('zip') }}"></div>
                </div>
                <div class="form-group"><label>Delivery Notes (optional)</label><textarea name="notes" rows="2" placeholder="e.g. leave at gate, call before delivery">{{ old('notes') }}</textarea></div>

                <div class="form-group" style="margin-top:1.5rem; background:#fffbeb; border:1px solid #fde68a; border-radius:10px; padding:1.25rem;">
                    <label style="color:#92400e; font-weight:600;"><i class="fa-solid fa-ruler" style="margin-right:.4rem;"></i> Size / Measurement Notes</label>
                    <p style="font-size:.85rem; color:#78350f; margin:.35rem 0 .75rem;">Since every pair is made to order, please share your foot measurements or any special sizing requirements. Our craftsman will use these to make your perfect fit.</p>
                    <textarea name="customer_notes" rows="4" placeholder="e.g. Foot length: 27cm, width: wide, high instep. Right foot slightly bigger. Please make EU 43.">{{ old('customer_notes') }}</textarea>
                </div>

                <h3 style="margin-top:2rem; margin-bottom:1rem;">Payment Method</h3>

                <label for="pay_cod" style="display:flex; align-items:center; gap:1.1rem; padding:1.1rem 1.25rem; border:2px solid #6366f1; border-radius:14px; background:linear-gradient(135deg,#f5f3ff,#ede9fe); cursor:pointer; transition:box-shadow .2s; box-shadow:0 4px 14px rgba(99,102,241,.13);">
                    <input type="radio" name="payment_method" value="cod" id="pay_cod" checked style="display:none;">

                    {{-- Icon --}}
                    <div style="width:48px; height:48px; background:linear-gradient(135deg,#6366f1,#4f46e5); border-radius:12px; display:flex; align-items:center; justify-content:center; flex-shrink:0; box-shadow:0 4px 10px rgba(99,102,241,.35);">
                        <i class="fa-solid fa-money-bill-wave" style="color:#fff; font-size:1.2rem;"></i>
                    </div>

                    {{-- Text --}}
                    <div style="flex:1;">
                        <div style="font-weight:700; font-size:1rem; color:#3730a3;">Cash on Delivery (COD)</div>
                        <div style="font-size:.82rem; color:#6366f1; margin-top:.15rem;">Pay in cash when your boots arrive at your door</div>
                    </div>

                    {{-- Selected badge --}}
                    <div style="width:22px; height:22px; border-radius:50%; background:#6366f1; display:flex; align-items:center; justify-content:center; flex-shrink:0;">
                        <i class="fa-solid fa-check" style="color:#fff; font-size:.65rem;"></i>
                    </div>
                </label>

                {{-- Trust badges --}}
                <div style="display:flex; gap:.75rem; margin-top:1rem; flex-wrap:wrap;">
                    <span style="display:inline-flex; align-items:center; gap:.35rem; font-size:.75rem; color:#64748b; background:#f8fafc; border:1px solid #e2e8f0; padding:.3rem .7rem; border-radius:20px;">
                        <i class="fa-solid fa-shield-halved" style="color:#10b981;"></i> 100% Secure
                    </span>
                    <span style="display:inline-flex; align-items:center; gap:.35rem; font-size:.75rem; color:#64748b; background:#f8fafc; border:1px solid #e2e8f0; padding:.3rem .7rem; border-radius:20px;">
                        <i class="fa-solid fa-rotate-left" style="color:#6366f1;"></i> No Advance Payment
                    </span>
                    <span style="display:inline-flex; align-items:center; gap:.35rem; font-size:.75rem; color:#64748b; background:#f8fafc; border:1px solid #e2e8f0; padding:.3rem .7rem; border-radius:20px;">
                        <i class="fa-solid fa-truck-fast" style="color:#f59e0b;"></i> Pay on Delivery
                    </span>
                </div>
            </div>

            <div class="checkout-box">
                <h3>Order Summary</h3>
                @foreach($items as $item)
                    <div class="summary-row">
                        <span>{{ $item['name'] }} × {{ $item['qty'] }}</span>
                        <span>Rs {{ number_format($item['price'] * $item['qty'], 0) }}</span>
                    </div>
                @endforeach
                <div class="summary-row"><span>Subtotal</span><span>Rs {{ number_format($subtotal, 0) }}</span></div>
                <div class="summary-row"><span>Shipping</span><span>{{ $shipping == 0 ? 'FREE' : 'Rs '.number_format($shipping, 0) }}</span></div>
                <div class="summary-row total"><span>Total</span><span>Rs {{ number_format($total, 0) }}</span></div>

                <button type="submit" class="btn" style="width:100%; margin-top:1.5rem; padding:1.2rem; font-size:1.05rem;">PLACE ORDER (COD)</button>
                <a href="{{ route('cart.index') }}" style="display:block; text-align:center; margin-top:.75rem; color:#555;">← Back to cart</a>
            </div>
        </div>
    </form>
</main>
@endsection