@extends('layouts.dashboard')

@section('title', 'Pendaftaran Sekolah Renang')

@section('content')
<div class="mb-4 flex justify-end">
    <a href="{{ route('user.school-registration.create') }}" class="inline-flex items-center gap-2 rounded-lg bg-sky-700 px-4 py-2 text-sm font-black text-white hover:bg-slate-950">
        <i data-lucide="waves" class="h-4 w-4"></i>
        Daftar Program
    </a>
</div>

<div class="grid gap-4">
@forelse($registrations as $registration)
    <article class="rounded-lg border border-slate-200 bg-white p-5 shadow-sm">
        <div class="flex flex-wrap items-start justify-between gap-3">
            <div>
                <p class="font-black text-slate-950">{{ $registration->participant_name }}</p>
                <p class="mt-1 text-sm text-slate-600">{{ $registration->program_type }} · {{ $registration->created_at->format('d/m/Y') }}</p>
                @if($registration->payment)
                    <p class="mt-1 text-sm font-semibold text-slate-600">
                        {{ $registration->payment->payment_code }} · {{ \App\Support\LocaleFormat::money($registration->payment->amount) }}
                    </p>
                @endif
            </div>
            <div class="flex flex-wrap gap-2">
                <x-status-badge :status="$registration->payment_status" />
                <x-status-badge :status="$registration->registration_status" />
            </div>
        </div>

        <div class="mt-4 flex flex-wrap gap-2">
            @if($registration->payment)
                <a href="{{ route('user.payments.show', $registration->payment) }}" class="inline-flex items-center gap-2 rounded-md bg-sky-700 px-3 py-2 text-sm font-black text-white hover:bg-slate-950">
                    <i data-lucide="receipt-text" class="h-4 w-4"></i>
                    Pembayaran
                </a>
                @if($registration->payment->proof_image)
                    <a href="{{ route('payments.proof', $registration->payment) }}" target="_blank" class="inline-flex items-center gap-2 rounded-md bg-sky-50 px-3 py-2 text-sm font-black text-sky-700 hover:bg-sky-100">
                        <i data-lucide="image" class="h-4 w-4"></i>
                        Bukti
                    </a>
                @endif
            @endif
        </div>

        @if($registration->admin_note)
            <p class="mt-3 rounded-lg bg-slate-50 p-3 text-sm text-slate-600">Catatan: {{ $registration->admin_note }}</p>
        @endif
    </article>
@empty
    <div class="rounded-lg border border-dashed border-slate-300 bg-white p-5 text-slate-500 shadow-sm">Belum ada pendaftaran.</div>
@endforelse
</div>
@endsection