@extends('portal.layout')

@section('title', 'Review order')
@section('topbar', 'Order review')

@push('styles')
<style>
    .steps {
        display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1.25rem;
    }
    .steps span {
        padding: .35rem .7rem; border-radius: 999px; font-size: .75rem; font-weight: 700;
        background: #F1F5F9; color: var(--muted);
    }
    .steps .on { background: var(--primary-soft); color: var(--mexco-primary-dark); }
    .review-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 1.25rem; align-items: start; }
    .row-line { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-bottom: 1px solid #F1F5F9; font-size: .9rem; }
    .row-line:last-child { border-bottom: 0; }
    .row-line .muted { color: var(--muted); }
    .total-box {
        margin-top: 1rem; padding: 1rem; border-radius: 12px; background: var(--primary-soft);
        border: 1px solid #DDD6FE;
    }
    .total-box .label { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--mexco-primary-dark); }
    .total-box .amount { font-size: 1.6rem; font-weight: 800; margin-top: .2rem; }
    @media (max-width: 900px) { .review-grid { grid-template-columns: 1fr; } }
</style>
@endpush

@section('content')
@php
    $fmt = fn ($cents) => ($summary['currency'] ?? 'MYR').' '.number_format(($cents ?? 0) / 100, 0);
@endphp

<div class="pg-head">
    <div>
        <h1>Review your order</h1>
        <p>Confirm the event license details before payment.</p>
    </div>
</div>

<div class="steps">
    <span>1. Event</span>
    <span>2. Add-ons</span>
    <span class="on">3. Review</span>
    <span>4. Payment</span>
</div>

<div class="review-grid">
    <div class="card" style="padding:1.35rem">
        <h2 style="margin:0 0 1rem;font-size:1.05rem;font-weight:800">Order details</h2>
        <div class="row-line"><span class="muted">Organisation</span><strong>{{ $summary['organisation'] ?? '-' }}</strong></div>
        <div class="row-line"><span class="muted">Event</span><strong>{{ $summary['event'] ?? '-' }}</strong></div>
        <div class="row-line"><span class="muted">Plan</span><strong>{{ $summary['plan'] ?? '-' }}</strong></div>
        <div class="row-line"><span class="muted">License period</span><strong>{{ $summary['license_period'] ?? '-' }}</strong></div>
        <div class="row-line"><span class="muted">License status</span><strong>{{ ucfirst($summary['license_status'] ?? 'pending') }}</strong></div>
        <div class="row-line"><span class="muted">Order ref</span><strong style="font-family:ui-monospace,monospace;font-size:.8rem">{{ $summary['reference_no'] }}</strong></div>
        @if($summary['invoice_number'])
            <div class="row-line"><span class="muted">Invoice</span><strong style="font-family:ui-monospace,monospace;font-size:.8rem">{{ $summary['invoice_number'] }}</strong></div>
        @endif

        <h3 style="margin:1.35rem 0 .75rem;font-size:.95rem;font-weight:800">Line items</h3>
        <div class="row-line">
            <span>{{ $summary['plan'] }} event license</span>
            <strong>{{ $fmt($summary['plan_price_cents']) }}</strong>
        </div>
        @forelse($summary['addons'] as $addon)
            <div class="row-line">
                <span>{{ $addon['name'] }}</span>
                <strong>{{ $addon['formatted_price'] }}</strong>
            </div>
        @empty
            <div class="row-line"><span class="muted">No add-ons</span><span>-</span></div>
        @endforelse
    </div>

    <aside class="card" style="padding:1.35rem">
        <h2 style="margin:0 0 1rem;font-size:1.05rem;font-weight:800">Totals</h2>
        <div class="row-line"><span class="muted">Subtotal</span><strong>{{ $fmt($summary['subtotal_cents']) }}</strong></div>
        @if(($summary['discount_cents'] ?? 0) > 0)
            <div class="row-line"><span class="muted">Discount</span><strong>-{{ $fmt($summary['discount_cents']) }}</strong></div>
        @endif
        @if(($summary['tax_cents'] ?? 0) > 0)
            <div class="row-line"><span class="muted">Tax</span><strong>{{ $fmt($summary['tax_cents']) }}</strong></div>
        @endif
        <div class="total-box">
            <div class="label">Total</div>
            <div class="amount">{{ $fmt($summary['total_cents']) }}</div>
        </div>

        <form method="POST" action="{{ route('mexco.checkout.review.submit') }}" style="margin-top:1.15rem">
            @csrf
            <button type="submit" class="btn-purple" style="width:100%">Proceed to payment</button>
        </form>
        <a href="{{ route('mexco.checkout.addons') }}" class="btn-outline" style="width:100%;margin-top:.65rem">Edit add-ons</a>
    </aside>
</div>
@endsection
