@extends('layouts.admin')

@section('content')
<div class="container mx-auto px-4 py-10">
    <div class="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-lg">

        {{-- Header --}}
        <div class="flex justify-between items-center mb-8">
            <h1 class="text-2xl font-bold text-gray-800 dark:text-white">📋 Detail Transaksi Admin</h1>
            <a href="{{ route('admin-area.dashboard') }}" class="inline-flex items-center gap-2 text-sm text-blue-600 dark:text-blue-400 hover:underline">
                ← Kembali ke Dashboard
            </a>
        </div>

        {{-- Informasi Transaksi --}}
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
            <div class="space-y-3 text-sm text-gray-600 dark:text-gray-300">
                <p><strong>Invoice ID:</strong> {{ $transaction->id }}</p>
                <p><strong>Nama User:</strong> {{ $transaction->user->name ?? '-' }}</p>
                <p><strong>Status:</strong>
                    @php
                        $statusClass = match($transaction->status) {
                            'approved' => 'text-green-500',
                            'payment_verification' => 'text-yellow-500',
                            'pending' => 'text-blue-500',
                            'cancelled' => 'text-red-500',
                            default => 'text-gray-500',
                        };
                    @endphp
                    <span class="font-semibold {{ $statusClass }}">
                        {{ ucfirst(str_replace('_', ' ', $transaction->status)) }}
                    </span>
                </p>
                <p><strong>Total Bayar:</strong> Rp {{ number_format($transaction->total, 0, ',', '.') }}</p>
                <p><strong>Tanggal Transaksi:</strong> {{ $transaction->created_at->translatedFormat('d F Y H:i') }}</p>
            </div>

            {{-- Bukti Pembayaran --}}
            <div class="flex flex-col items-center justify-center">
                <h2 class="text-lg font-bold text-gray-800 dark:text-white mb-3">📷 Bukti Pembayaran</h2>
                @if($transaction->payment_proof)
                    <img src="{{ asset('storage/' . $transaction->payment_proof) }}"
                         alt="Bukti Transfer"
                         class="rounded-lg border dark:border-gray-700 object-cover w-64 h-64 shadow-md">
                @else
                    <p class="text-sm text-red-500">Belum ada bukti pembayaran.</p>
                @endif
            </div>
        </div>

        {{-- Catatan Section --}}
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
            @if ($transaction->notes)
                <div class="p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
                    <h3 class="font-semibold text-gray-800 dark:text-white mb-2">📝 Catatan User:</h3>
                    <p class="text-sm text-gray-600 dark:text-gray-300">{{ $transaction->notes }}</p>
                </div>
            @endif

            @if ($transaction->admin_note || $transaction->admin_rationale)
                <div class="p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
                    <h3 class="font-semibold text-gray-800 dark:text-white mb-2">🖋️ Catatan Admin:</h3>
                    @if($transaction->admin_note)
                        <p class="text-sm text-gray-600 dark:text-gray-300 mb-2">{{ $transaction->admin_note }}</p>
                    @endif
                    @if($transaction->admin_rationale)
                        <p class="text-sm italic text-indigo-500 dark:text-indigo-300">Rasionalisasi: {{ $transaction->admin_rationale }}</p>
                    @endif
                </div>
            @endif
        </div>

        {{-- Produk Pesanan --}}
        <div class="mb-8">
            <h2 class="text-lg font-bold text-gray-800 dark:text-white mb-4">🛒 Produk dalam Pesanan</h2>
            <div class="space-y-4">
                @foreach($transaction->items as $item)
                    @php
                        $img = $item->catalog->image_path
                            ? asset('storage/' . $item->catalog->image_path)
                            : asset('images/default-product.png');
                    @endphp
                    <div class="flex items-center gap-4 bg-gray-100 dark:bg-gray-700 p-4 rounded-lg">
                        <img src="{{ $img }}" alt="Gambar Produk"
                             class="w-16 h-16 object-cover rounded border dark:border-gray-600">
                        <div class="flex-1">
                            <p class="font-semibold text-gray-800 dark:text-white">{{ $item->catalog->name }}</p>
                            <p class="text-sm text-gray-600 dark:text-gray-300">
                                Harga: Rp {{ number_format($item->price, 0, ',', '.') }} × {{ $item->quantity }}
                            </p>
                            <p class="text-sm text-gray-500">
                                Subtotal: Rp {{ number_format($item->subtotal, 0, ',', '.') }}
                            </p>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>

        {{-- Form Verifikasi Pembayaran Admin --}}
        @if(in_array($transaction->status, ['payment_verification', 'pending']))
        <div class="bg-gray-100 dark:bg-gray-700 p-6 rounded-lg mt-8">
            <h2 class="text-lg font-bold text-gray-800 dark:text-white mb-4">🔍 Verifikasi Pembayaran</h2>

            <form method="POST" action="{{ route('admin-area.transactions.update', $transaction->id) }}" class="space-y-4">
                @csrf
                @method('PUT')

                {{-- Pilihan Status --}}
                <div>
                    <label for="status" class="block mb-1 text-sm font-medium text-gray-700 dark:text-white">Pilih Status</label>
                    <select id="status" name="status" required
                        class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-white">
                        <option value="">-- Pilih --</option>
                        <option value="approved" @selected($transaction->status === 'approved')>✅ Approve (Pembayaran Valid)</option>
                        <option value="cancelled" @selected($transaction->status === 'cancelled')>❌ Tolak (Pembayaran Tidak Valid)</option>
                    </select>
                </div>

                {{-- Catatan Admin --}}
                <div>
                    <label for="admin_note" class="block mb-1 text-sm font-medium text-gray-700 dark:text-white">Catatan Admin (opsional)</label>
                    <textarea id="admin_note" name="admin_note" rows="3"
                        class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-white">{{ old('admin_note', $transaction->admin_note) }}</textarea>
                </div>

                {{-- Rasionalisasi (Opsional) --}}
                <div>
                    <label for="admin_rationale" class="block mb-1 text-sm font-medium text-gray-700 dark:text-white">
                        Rasionalisasi Keputusan (opsional)
                    </label>
                    <select id="admin_rationale" name="admin_rationale"
                        class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-white">
                        <option value="">-- Pilih Rasionalisasi --</option>
                        <option value="Pembayaran valid dan sesuai" @selected($transaction->admin_rationale == 'Pembayaran valid dan sesuai')>
                            ✅ Pembayaran valid dan sesuai
                        </option>
                        <option value="Bukti pembayaran tidak sesuai" @selected($transaction->admin_rationale == 'Bukti pembayaran tidak sesuai')>
                            ❌ Bukti pembayaran tidak sesuai
                        </option>
                        <option value="Transaksi melebihi batas waktu pembayaran" @selected($transaction->admin_rationale == 'Transaksi melebihi batas waktu pembayaran')>
                            ⏰ Transaksi melebihi batas waktu pembayaran
                        </option>
                        <option value="Pembayaran tidak terbaca jelas" @selected($transaction->admin_rationale == 'Pembayaran tidak terbaca jelas')>
                            📄 Pembayaran tidak terbaca jelas
                        </option>
                        <option value="Permintaan pembatalan oleh user" @selected($transaction->admin_rationale == 'Permintaan pembatalan oleh user')>
                            🙋 Permintaan pembatalan oleh user
                        </option>
                    </select>
                </div>


                <div class="flex gap-4 mt-4">
                    <button type="submit"
                        class="px-6 py-2 bg-green-600 hover:bg-green-700 text-white font-semibold rounded-lg shadow-md hover:shadow-lg transition">
                        💾 Simpan Verifikasi
                    </button>
                    <a href="{{ route('admin-area.dashboard') }}"
                        class="px-6 py-2 bg-gray-500 hover:bg-gray-600 text-white font-semibold rounded-lg shadow-md hover:shadow-lg transition">
                        Batal
                    </a>
                </div>
            </form>
        </div>
        @endif

        {{-- Tombol Download Invoice --}}
        <div class="text-center mt-10">
            <a href="{{ route('transaction.exportInvoice', $transaction->id) }}" target="_blank"
               class="inline-flex items-center gap-2 px-4 py-2 bg-green-600 hover:bg-green-700 text-white font-semibold text-xs rounded-lg shadow-md hover:shadow-lg transition duration-300 ease-in-out">
                💾 Download Invoice
            </a>
        </div>

    </div>
</div>
@endsection