@extends('layouts.app')

@section('title', 'Riwayat Invoice')

@section('content')
<div class="min-h-screen bg-gray-950 py-10 px-4">
    <div class="max-w-lg mx-auto">

        <h1 class="text-xl font-bold text-white mb-6">📋 Riwayat Invoice</h1>

        @if($invoices->isEmpty())
            <div class="bg-gray-800 rounded-2xl p-10 text-center text-gray-400">
                <div class="text-4xl mb-3">📄</div>
                <p>Belum ada invoice.</p>
                <a href="{{ route('invoices.index') }}" class="inline-block mt-4 text-indigo-400 hover:text-indigo-300 text-sm">
                    Mulai Top Up →
                </a>
            </div>
        @else
            <div class="space-y-3">
                @foreach($invoices as $invoice)
                @php $badge = $invoice->status_badge; @endphp
                <a href="{{ route('invoices.show', $invoice->invoice_number) }}"
                   class="block bg-gray-800 hover:bg-gray-750 rounded-2xl p-4 transition-all">
                    <div class="flex items-start justify-between gap-3">
                        <div class="flex-1 min-w-0">
                            <p class="text-white font-semibold text-sm truncate">{{ $invoice->invoice_number }}</p>
                            <p class="text-gray-400 text-xs mt-0.5">{{ $invoice->game_name }} • {{ $invoice->product_name }}</p>
                            <p class="text-gray-500 text-xs mt-0.5">{{ $invoice->created_at->format('d M Y, H:i') }}</p>
                        </div>
                        <div class="text-right flex-shrink-0">
                            <p class="text-white text-sm font-semibold">Rp {{ number_format($invoice->total_price, 0, ',', '.') }}</p>
                            <span class="inline-block mt-1 text-xs px-2 py-0.5 rounded-full
                                {{ $invoice->isSuccess() ? 'bg-green-900 text-green-300' : ($invoice->isError() ? 'bg-red-900 text-red-300' : 'bg-yellow-900 text-yellow-300') }}">
                                {{ $badge['emoji'] }} {{ $badge['label'] }}
                            </span>
                        </div>
                    </div>
                </a>
                @endforeach
            </div>

            <div class="mt-6">
                {{ $invoices->links() }}
            </div>
        @endif

    </div>
</div>
@endsection