@extends('layouts.app')

@section('content')
<div class="container mx-auto py-12">

    {{-- Logo dan Nama Institusi --}}
    <div class="flex flex-col items-center justify-center mb-10">
        @if($profile?->logo)
            <img src="{{ asset('storage/' . $profile->logo) }}" alt="Logo" class="h-20 mb-4">
        @endif
        <h1 class="text-2xl font-bold text-gray-800 dark:text-white">
            {{ $profile->nama_perusahaan ?? 'Nama Institusi' }}
        </h1>
        <p class="text-sm text-gray-600 dark:text-gray-400">{{ $profile->alamat ?? '-' }}</p>
    </div>

    {{-- Badge Validasi --}}
    <div class="flex flex-col items-center justify-center mb-10">
        <div class="bg-green-100 border-4 border-green-400 text-green-700 font-bold py-6 px-12 rounded-full text-2xl shadow-lg animate-bounce">
            ✅ VALIDATED
        </div>
        <p class="text-gray-600 dark:text-gray-300 mt-4 text-center max-w-md">
            Dokumen ini adalah bukti transaksi resmi yang tercatat di sistem
            <strong>{{ $profile->nama_perusahaan ?? 'Institusi' }}</strong>.
        </p>
    </div>

    {{-- Info Transaksi --}}
    <div class="bg-white dark:bg-gray-800 p-8 rounded-xl shadow max-w-3xl mx-auto space-y-6">

        <h2 class="text-2xl font-bold text-gray-800 dark:text-white text-center">🔎 Detail Transaksi</h2>

        <div class="space-y-4 text-sm text-gray-700 dark:text-gray-300">
            <div class="flex justify-between">
                <span><strong>ID Transaksi:</strong></span>
                <span>#{{ $transaction->id }}</span>
            </div>
            <div class="flex justify-between">
                <span><strong>Nama Pelanggan:</strong></span>
                <span>{{ $transaction->user->name }}</span>
            </div>
            <div class="flex justify-between">
                <span><strong>Status Pembayaran:</strong></span>
                <span class="px-2 py-1 rounded-full
                    @if($transaction->status == 'approved') bg-green-100 text-green-700
                    @elseif($transaction->status == 'payment_verification') bg-blue-100 text-blue-700
                    @elseif($transaction->status == 'cancelled') bg-red-100 text-red-700
                    @endif">
                    {{ ucfirst(str_replace('_', ' ', $transaction->status)) }}
                </span>
            </div>
            <div class="flex justify-between">
                <span><strong>Total Pembayaran:</strong></span>
                <span>Rp {{ number_format($transaction->total, 0, ',', '.') }}</span>
            </div>
            <div class="flex justify-between">
                <span><strong>Tanggal Transaksi:</strong></span>
                <span>{{ $transaction->created_at->translatedFormat('d F Y H:i') }}</span>
            </div>
        </div>

        {{-- Produk --}}
        <div class="mt-8">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-3">📦 Produk Dipesan:</h3>
            <ul class="list-disc list-inside space-y-1 text-gray-600 dark:text-gray-300">
                @foreach($transaction->items as $item)
                    <li>{{ $item->catalog->name }} (x{{ $item->quantity }})</li>
                @endforeach
            </ul>
        </div>

        {{-- QR Code untuk Validasi --}}
        @php
            $qrImage = \SimpleSoftwareIO\QrCode\Facades\QrCode::format('svg')
                ->size(150)
                ->generate(url('/verifikasi-transaksi/' . $transaction->id));
            $qrBase64 = base64_encode($qrImage);
        @endphp

        <div class="text-center mt-10">
            <p class="text-sm text-gray-500 dark:text-gray-400 mb-2">Scan ulang QR ini untuk validasi transaksi:</p>
            <img src="data:image/svg+xml;base64,{{ $qrBase64 }}" alt="QR Code" class="mx-auto w-32 h-32">
        </div>

    </div>

    {{-- Footer --}}
    <div class="text-center mt-8 text-xs text-gray-400">
        Sistem Verifikasi &copy; {{ now()->year }} -
        {{ $profile->nama_perusahaan ?? 'Nama Institusi' }}.
    </div>

</div>
@endsection