@extends('layouts.public')

@section('title', 'Pesanan '.$order->code.' — Undangan Digital')

@push('styles')
<style>
    .status-pill {
        display: inline-flex;
        align-items: center;
        padding: .35rem .7rem;
        border-radius: 999px;
        background: rgba(47,107,85,.12);
        color: var(--leaf-deep);
        font-size: .82rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .06em;
    }

    .pay-box {
        border-left: 3px solid var(--leaf);
        padding-left: 1rem;
        margin: 1rem 0;
    }

    .pay-box code {
        font-size: 1.1rem;
        background: var(--foam);
        padding: .15rem .45rem;
        border-radius: .4rem;
    }
</style>
@endpush

@section('content')
    <main class="page-shell" style="max-width:760px">
        <header class="page-header">
            <span class="eyebrow">Detail Pesanan</span>
            <h1>{{ $order->code }}</h1>
            <p>{{ $order->groom_name }} & {{ $order->bride_name }} · Paket {{ $order->package->name }}</p>
        </header>

        @if (session('success'))
            <div class="flash">{{ session('success') }}</div>
        @endif

        <section class="panel" style="margin-bottom:1rem;animation:rise .7s ease both">
            <span class="status-pill">{{ $order->status }}</span>
            <p style="margin:1rem 0 .35rem">Total transfer</p>
            <div style="font-family:var(--font-display);font-size:2rem;color:var(--leaf-deep)">
                {{ $order->formattedAmount() }}
            </div>

            <div class="pay-box">
                <p class="muted" style="margin:0 0 .35rem">Transfer ke</p>
                <strong>{{ config('payment.bank_name') }}</strong><br>
                <code>{{ config('payment.account_number') }}</code><br>
                <span class="muted">a.n. {{ config('payment.account_holder') }}</span>
            </div>

            <p class="muted" style="margin:0">
                Cantumkan kode <code>{{ $order->code }}</code> pada berita transfer bila memungkinkan.
            </p>
        </section>

        @if (! in_array($order->status, ['paid', 'cancelled'], true))
            <section class="panel" style="animation:rise .85s ease both">
                <h2 style="font-family:var(--font-display);font-weight:560;margin:0 0 .75rem">Upload Bukti Transfer</h2>
                @if ($order->paymentProofUrl())
                    <p class="muted">Bukti sudah diupload. Menunggu konfirmasi admin.</p>
                    <img src="{{ $order->paymentProofUrl() }}" alt="Bukti transfer" style="max-width:240px;border-radius:.8rem;margin-bottom:1rem">
                @endif
                <form method="POST" action="{{ route('orders.proof', $order->code) }}" enctype="multipart/form-data" class="form-grid">
                    @csrf
                    <label>
                        Pilih gambar bukti
                        <input type="file" name="payment_proof" accept="image/*" required>
                    </label>
                    <button class="btn btn-primary" type="submit" style="justify-self:start">Kirim Bukti</button>
                </form>
            </section>
        @elseif ($order->status === 'paid')
            <section class="panel">
                <h2 style="font-family:var(--font-display);font-weight:560;margin:0 0 .75rem">Pembayaran Lunas</h2>
                <p class="muted">Silakan masuk ke dashboard untuk melengkapi undangan.</p>
                <a class="btn btn-primary" href="/login">Masuk Dashboard</a>
            </section>
        @endif
    </main>
@endsection