@extends('layouts.app')

@section('content')
@php
    if (!function_exists('statusColor')) {
        function statusColor($status) {
            return match($status) {
                'approved' => 'text-green-500',
                'payment_verification' => 'text-yellow-500',
                'pending' => 'text-blue-500',
                'cancelled' => 'text-red-500',
                default => 'text-gray-500',
            };
        }
    }

    // Ambil data Profile dari database
    $profile = \App\Models\Profile::first();
    $namaBank = $profile?->nama_bank ?? 'Nama Bank';
    $nomorRekening = $profile?->nomor_rekening ?? 'Nomor Rekening';
    $namaPerusahaan = $profile?->nama_perusahaan ?? 'Nama Perusahaan';
@endphp

<div class="container mx-auto px-4 py-12" x-data="paymentPage()">

    {{-- Header --}}
    <div class="text-center mb-10">
        <h1 class="text-4xl font-bold text-gray-800 dark:text-white">💎 Pembayaran Transaksi</h1>
        <p class="text-gray-600 dark:text-gray-300 mt-2">Silakan selesaikan pembayaran Anda sebelum waktu habis!</p>

        {{-- Countdown Timer --}}
        <div class="mt-4 text-2xl font-semibold text-red-500" x-show="remainingTime > 0">
            🕐 Waktu Tersisa: <span x-text="formatTime(remainingTime)"></span>
        </div>

        <template x-if="remainingTime <= 0">
            <div class="mt-4 text-xl font-semibold text-red-600">
                ❌ Waktu pembayaran habis!
            </div>
        </template>
    </div>

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

        {{-- Info Invoice --}}
        <div class="text-center">
            <h2 class="text-2xl font-bold text-blue-600 dark:text-blue-400">Invoice #{{ $transaction->id }}</h2>
            <p class="text-gray-500 dark:text-gray-300 mt-1">
                Status:
                <span class="font-semibold {{ statusColor($transaction->status) }}">
                    {{ ucfirst(str_replace('_', ' ', $transaction->status)) }}
                </span>
            </p>
        </div>

        {{-- Total & Instruksi --}}
        <div class="flex flex-col md:flex-row justify-between items-center text-lg">
            <div>
                <p>Total Bayar:</p>
                <p class="text-3xl font-extrabold text-[color:var(--primary-color)]">Rp {{ number_format($transaction->total, 0, ',', '.') }}</p>
            </div>
            <div class="text-right">
                <p>Transfer ke:</p>
                <p class="font-semibold">{{ $nomorRekening }} - {{ $namaBank }}</p>

            </div>
        </div>

        {{-- Catatan Pesanan --}}
        @if(!empty($transaction->notes))
            <div class="bg-gray-100 dark:bg-gray-700 p-6 rounded-lg text-sm text-gray-700 dark:text-gray-300">
                <h3 class="text-lg font-bold text-gray-800 dark:text-white mb-2">📝 Catatan Pesanan:</h3>
                <p class="whitespace-pre-line">{{ $transaction->notes }}</p>
            </div>
        @endif

        {{-- Upload Bukti Pembayaran --}}
        <div class="bg-gray-50 dark:bg-gray-700 p-6 rounded-lg">
            <h3 class="text-lg font-bold text-gray-800 dark:text-white mb-4">📤 Upload Bukti Pembayaran</h3>

            <form action="{{ route('transaction.upload', $transaction->id) }}" method="POST" enctype="multipart/form-data" class="space-y-4">
                @csrf
                <input type="file" name="payment_proof"
                       class="block w-full text-sm file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0
                              file:bg-[color:var(--primary-color)] file:text-white hover:file:brightness-110">
                <button type="submit"
                        class="w-full bg-green-600 hover:bg-green-700 text-white py-2 rounded-lg shadow transition">
                    📂 Upload Sekarang
                </button>
            </form>
        </div>

        {{-- Bukti yang Sudah Diupload --}}
        @if($transaction->payment_proof)
            <div class="text-center">
                <h3 class="text-lg font-bold text-gray-800 dark:text-white mb-2">📸 Bukti Pembayaran</h3>
                <img src="{{ asset('storage/' . $transaction->payment_proof) }}"
                     alt="Bukti Pembayaran"
                     class="mx-auto rounded-lg shadow-md object-cover w-60 h-60">
            </div>
        @endif

        {{-- Tombol Kembali --}}
        <div class="text-center mt-6">
            <a href="{{ route('dashboard.transactions') }}"
               class="inline-flex items-center gap-2 bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg shadow-md">
                ← Kembali ke Riwayat Transaksi
            </a>
        </div>

    </div>
</div>

{{-- Alpine.js --}}
<script>
    function paymentPage() {
        return {
            remainingTime: {{ max(0, strtotime($transaction->created_at->addHours(24)) - time()) }},
            formatTime(seconds) {
                const hours = Math.floor(seconds / 3600);
                const minutes = Math.floor((seconds % 3600) / 60);
                const secs = seconds % 60;
                return `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(secs).padStart(2, '0')}`;
            },
            startCountdown() {
                setInterval(() => {
                    if (this.remainingTime > 0) {
                        this.remainingTime--;
                    }
                }, 1000);
            }
        }
    }
</script>
@endsection