@extends('layouts.dashboard')

@section('title', 'Verifikasi Pembayaran')

@section('content')
<form class="mb-5 grid gap-3 rounded-lg border border-slate-200 bg-white p-4 shadow-sm sm:grid-cols-[1fr_auto]">
    <select name="status" class="rounded-md border border-slate-300 px-3 py-3">
        <option value="">Semua status</option>
        @foreach(['belum_bayar','menunggu_verifikasi','diterima','ditolak'] as $status)
            <option value="{{ $status }}" @selected(request('status') === $status)>{{ str($status)->replace('_', ' ')->title() }}</option>
        @endforeach
    </select>
    <button class="inline-flex items-center justify-center gap-2 rounded-md bg-slate-950 px-4 py-3 font-black text-white hover:bg-sky-700">
        <i data-lucide="filter" class="h-4 w-4"></i>
        Filter
    </button>
</form>

<section class="grid gap-4">
    @forelse($payments as $payment)
        <article class="rounded-lg border border-slate-200 bg-white p-5 shadow-sm">
            <div class="grid gap-4 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-start">
                <div class="min-w-0">
                    <div class="flex flex-wrap items-center gap-2">
                        <p class="font-black text-slate-950">{{ $payment->payment_code }}</p>
                        <x-status-badge :status="$payment->status" />
                    </div>
                    <p class="mt-2 text-sm font-semibold text-slate-600">
                        {{ $payment->user?->name ?? 'Pengunjung' }} &middot; {{ \App\Support\LocaleFormat::money($payment->amount) }} &middot; {{ $payment->service_label }}
                    </p>
                    @if($payment->proof_image)
                        <a class="mt-3 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" href="{{ route('payments.proof', $payment) }}" target="_blank">
                            <i data-lucide="image" class="h-4 w-4"></i>
                            Lihat bukti pembayaran
                        </a>
                    @endif
                </div>
            </div>

            <form method="POST" action="{{ route('admin.payments.verify', $payment) }}" class="mt-5 grid gap-3 md:grid-cols-[180px_1fr_auto]">
                @csrf
                <select name="status" class="rounded-md border border-slate-300 px-3 py-3">
                    <option value="diterima">Terima</option>
                    <option value="ditolak">Tolak</option>
                </select>
                <input name="note" placeholder="Catatan penolakan/verifikasi" class="rounded-md border border-slate-300 px-3 py-3">
                <button class="inline-flex items-center justify-center gap-2 rounded-md bg-slate-950 px-4 py-3 font-black text-white hover:bg-sky-700">
                    <i data-lucide="save" class="h-4 w-4"></i>
                    Simpan
                </button>
            </form>
        </article>
    @empty
        <p class="rounded-lg border border-slate-200 bg-white p-5 text-sm font-semibold text-slate-500 shadow-sm">Tidak ada pembayaran untuk filter ini.</p>
    @endforelse
</section>

<div class="mt-4">{{ $payments->links() }}</div>
@endsection