@extends('layouts.app')

@section('title', 'Invoice ' . $invoice->invoice_number)

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

        <div class="flex items-center gap-3 mb-6">
            <a href="{{ route('invoices.history') }}" class="text-gray-400 hover:text-white">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
                </svg>
            </a>
            <h1 class="text-xl font-bold text-white">Invoice</h1>
        </div>

        {{-- Nomor & Status --}}
        <div class="bg-gray-800 rounded-2xl p-5 mb-4 text-center">
            <p class="text-gray-400 text-sm mb-1">Nomor Invoice</p>
            <p class="text-white text-xl font-bold tracking-wider">{{ $invoice->invoice_number }}</p>
            <div class="mt-3" id="statusBadge">
                @php $badge = $invoice->status_badge; @endphp
                <span class="inline-flex items-center gap-2 px-4 py-2 rounded-full text-sm font-semibold
                    {{ $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>

        {{-- Animasi loading jika pending --}}
        @if($invoice->isPending())
        <div id="pendingNotice" class="bg-yellow-900/30 border border-yellow-700 rounded-2xl px-5 py-4 mb-4 text-center">
            <div class="inline-block w-5 h-5 border-2 border-yellow-400 border-t-transparent rounded-full animate-spin mb-2"></div>
            <p class="text-yellow-300 text-sm">Pesanan sedang diproses, halaman akan otomatis diperbarui...</p>
        </div>
        @endif

        {{-- Error message --}}
        @if($invoice->isError() && $invoice->error_message)
        <div class="bg-red-900/30 border border-red-700 rounded-2xl px-5 py-4 mb-4">
            <p class="text-red-300 text-sm">⚠️ {{ $invoice->error_message }}</p>
        </div>
        @endif

        {{-- Detail Akun & Produk --}}
        <div class="bg-gray-800 rounded-2xl divide-y divide-gray-700 mb-4">
            <div class="px-5 py-4">
                <p class="text-gray-400 text-xs mb-1">Game</p>
                <p class="text-white font-semibold">{{ $invoice->game_name }}</p>
            </div>
            <div class="px-5 py-4">
                <p class="text-gray-400 text-xs mb-1">Akun</p>
                <p class="text-white font-semibold">{{ $invoice->nickname }}</p>
                <p class="text-gray-400 text-sm">
                    ID: {{ $invoice->game_user_id }}
                    @if($invoice->game_server_id) • Server: {{ $invoice->game_server_id }} @endif
                </p>
            </div>
            <div class="px-5 py-4">
                <p class="text-gray-400 text-xs mb-1">Produk</p>
                <p class="text-white font-semibold">{{ $invoice->product_name }}</p>
            </div>
            <div class="px-5 py-4 flex items-center justify-between">
                <p class="text-gray-400 text-sm">Total</p>
                <p class="text-white font-bold">Rp {{ number_format($invoice->total_price, 0, ',', '.') }}</p>
            </div>
            <div class="px-5 py-4 flex items-center justify-between">
                <p class="text-gray-400 text-sm">Dibuat</p>
                <p class="text-gray-300 text-sm">{{ $invoice->created_at->format('d M Y, H:i') }}</p>
            </div>
        </div>

        {{-- Riwayat Status --}}
        @if($invoice->logs->count())
        <div class="bg-gray-800 rounded-2xl p-5 mb-4">
            <h3 class="text-white font-semibold mb-4">Riwayat Status</h3>
            <div class="space-y-3">
                @foreach($invoice->logs as $log)
                <div class="flex items-start gap-3">
                    <div class="w-2 h-2 rounded-full mt-1.5 flex-shrink-0
                        {{ $log->to_status === 'success' ? 'bg-green-400' : ($log->to_status === 'error' ? 'bg-red-400' : 'bg-yellow-400') }}"></div>
                    <div class="flex-1">
                        <p class="text-white text-sm font-medium">
                            {{ $log->from_status ? ucfirst($log->from_status) . ' → ' : '' }}{{ ucfirst($log->to_status) }}
                        </p>
                        @if($log->note)<p class="text-gray-400 text-xs">{{ $log->note }}</p>@endif
                        <p class="text-gray-500 text-xs">{{ $log->created_at->format('d/m/Y H:i:s') }} • {{ $log->actor }}</p>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
        @endif

        <a href="{{ route('invoices.index') }}"
           class="block w-full text-center bg-gray-700 hover:bg-gray-600 text-white font-semibold py-3 rounded-2xl transition-all">
            🏠 Kembali ke Beranda
        </a>

    </div>
</div>

@if($invoice->isPending())
<script>
// Polling setiap 5 detik untuk cek update status
(function poll() {
    setTimeout(async function () {
        try {
            const res  = await fetch(window.location.href, { headers: { 'X-Requested-With': 'XMLHttpRequest' } });
            const html = await res.text();
            const parser = new DOMParser();
            const doc    = parser.parseFromString(html, 'text/html');
            const newBadge = doc.getElementById('statusBadge');
            const newPending = doc.getElementById('pendingNotice');

            if (newBadge) document.getElementById('statusBadge').innerHTML = newBadge.innerHTML;

            // Jika sudah tidak pending, reload halaman penuh
            if (!newPending) {
                window.location.reload();
            } else {
                poll();
            }
        } catch (e) {
            poll();
        }
    }, 5000);
})();
</script>
@endif
@endsection