@extends('layouts.shell')
@section('title', 'Pembayaran '.$transaction->code)

@section('content')
<div class="mb-5 text-center">
    <div class="mx-auto mb-3 grid h-14 w-14 place-items-center rounded-full bg-qr-gold/15">
        <x-icon name="cash" class="w-7 h-7 text-qr-gold"/>
    </div>
    <h1 class="text-xl font-extrabold">Selesaikan Pembayaran</h1>
    <p class="text-sm text-qr-muted">Invoice {{ $transaction->code }}</p>
</div>

{{-- Nominal --}}
<div class="card mb-4 p-5 text-center">
    <p class="text-sm text-qr-muted">Transfer tepat sejumlah</p>
    <p class="my-1 text-3xl font-extrabold text-qr-accent-light">Rp{{ number_format($instructions['total_amount'],0,',','.') }}</p>
    <p class="text-xs text-qr-muted">
        (Rp{{ number_format($instructions['amount'],0,',','.') }}
        + kode unik <span class="font-bold text-qr-gold">{{ $instructions['unique_code'] }}</span>)
    </p>
    <div class="mt-3 rounded-lg bg-qr-gold/10 px-3 py-2 text-xs text-qr-gold">
        ⚠️ Nominal harus SAMA PERSIS hingga 3 digit terakhir agar terverifikasi otomatis.
    </div>
</div>

{{-- Rekening --}}
<div class="card mb-4 divide-y divide-qr-border">
    @foreach([
        ['Bank', $instructions['bank_name']],
        ['No. Rekening', $instructions['account_number']],
        ['Atas Nama', $instructions['account_holder']],
    ] as [$label, $value])
    <div class="flex items-center justify-between p-4">
        <span class="text-sm text-qr-muted">{{ $label }}</span>
        <span class="text-sm font-semibold" x-data="{c:false}">
            {{ $value }}
            <button @click="navigator.clipboard.writeText('{{ $value }}');c=true;setTimeout(()=>c=false,1500)"
                class="ml-2 text-xs text-qr-accent-light" x-text="c ? 'Tersalin!' : 'Salin'"></button>
        </span>
    </div>
    @endforeach
</div>

<div class="rounded-xl border border-qr-border p-4 text-sm text-qr-muted">
    <p class="font-semibold text-qr-text">Status: <span class="text-qr-gold">{{ strtoupper($transaction->status) }}</span></p>
    <p class="mt-1">Setelah transfer, pembayaran terverifikasi otomatis dalam beberapa menit.
    Anda akan menerima notifikasi WA/email. Bila lebih dari 1 jam belum aktif, hubungi admin.</p>
</div>

<a href="{{ route('profile.index') }}" class="btn-outline mt-5 w-full">Cek Status di Profil</a>
@endsection