@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',
            };
        }
    }

    $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()" x-init="startCountdown()">

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

        {{-- Info --}}
        <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 & Bank --}}
        <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 --}}
        @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>

            {{-- Pesan Error --}}
            @if($errors->any())
                <div class="bg-red-100 text-red-800 px-4 py-2 rounded mb-4 text-sm">
                    <ul class="list-disc list-inside">
                        @foreach($errors->all() as $error)
                            <li>❌ {{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            {{-- Pesan Sukses --}}
            @if(session('success'))
                <div class="bg-green-100 text-green-800 px-4 py-2 rounded mb-4 text-sm">
                    ✅ {{ session('success') }}
                </div>
            @endif

            {{-- Form Upload --}}
            <form action="{{ route('transaction.upload', $transaction->id) }}" method="POST" enctype="multipart/form-data" id="uploadForm" class="space-y-4">
                @csrf

                <input type="file" name="payment_proof" id="payment_proof"
                    accept=".jpg,.jpeg,.png"
                    required
                    class="block w-full text-sm text-gray-700 dark:text-gray-300 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 dark:file:bg-gray-700">

                <p class="text-xs text-gray-600 dark:text-gray-300">
                    Format file: <strong>.jpg</strong> atau <strong>.png</strong>. Ukuran maksimum: <strong>2 MB</strong>.
                </p>

                <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>

        {{-- Preview Bukti --}}
        @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>

{{-- Script Alpine + Validasi --}}
<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);
            }
        }
    }

    // Validasi upload bukti pembayaran
    document.getElementById('uploadForm').addEventListener('submit', function (e) {
        const input = document.getElementById('payment_proof');
        const file = input.files[0];
        const allowedTypes = ['image/jpeg', 'image/png'];
        const maxSize = 2 * 1024 * 1024;

        if (!file) {
            alert("❗ Silakan pilih file.");
            e.preventDefault();
            return;
        }

        if (!allowedTypes.includes(file.type)) {
            alert("❗ Format tidak didukung. Hanya file JPG atau PNG yang diizinkan.");
            e.preventDefault();
            return;
        }

        if (file.size > maxSize) {
            alert("❗ Ukuran file maksimal 2MB.");
            e.preventDefault();
            return;
        }
    });
</script>
@endsection