@extends('layouts.app')

@section('content')
<div class="container mx-auto px-4 py-12" x-data="{ filterStatus: '' }">
    <h1 class="text-2xl font-bold text-gray-800 dark:text-white mb-6">Verifikasi Pembayaran</h1>

    {{-- Flash Message --}}
    @if(session('message'))
        <div class="mb-4 bg-green-100 text-green-800 px-4 py-2 rounded shadow">
            {{ session('message') }}
        </div>
    @endif

    {{-- Filter --}}
    <div class="flex justify-between mb-6">
        <div>
            <select x-model="filterStatus"
                    class="border px-4 py-2 rounded text-gray-700 dark:bg-gray-800 dark:text-gray-200">
                <option value="">Semua Status</option>
                <option value="pending">Pending</option>
                <option value="payment_verification">Butuh Verifikasi</option>
                <option value="paid">Sudah Bayar</option>
                <option value="rejected">Ditolak</option>
                <option value="expired">Expired</option>
            </select>
        </div>

        {{-- Batch Approve --}}
        <form method="POST" action="{{ route('admin.transactions.batchAccept') }}">
            @csrf
            <button type="submit"
                    onclick="return confirm('Yakin ingin menyetujui semua transaksi yang butuh verifikasi?')"
                    class="px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded shadow">
                ✔️ Setujui Semua Verifikasi
            </button>
        </form>
    </div>

    {{-- Tabel --}}
    <div class="overflow-x-auto bg-white dark:bg-gray-800 rounded-xl shadow-md">
        <table class="min-w-full text-sm text-left">
            <thead class="bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 uppercase">
                <tr>
                    <th class="px-6 py-3">Invoice</th>
                    <th class="px-6 py-3">User</th>
                    <th class="px-6 py-3">Total</th>
                    <th class="px-6 py-3">Status</th>
                    <th class="px-6 py-3">Bukti</th>
                    <th class="px-6 py-3">Aksi</th>
                </tr>
            </thead>
            <tbody class="text-gray-700 dark:text-gray-300">
                @foreach($transactions as $trx)
                    <tr class="border-b dark:border-gray-700" x-show="!filterStatus || '{{ $trx->status }}' === filterStatus">
                        <td class="px-6 py-4">{{ $trx->id }}</td>
                        <td class="px-6 py-4">{{ $trx->user->name ?? '-' }}</td>
                        <td class="px-6 py-4">Rp {{ number_format($trx->total, 0, ',', '.') }}</td>
                        <td class="px-6 py-4">
                            @php
                                $badgeColor = match($trx->status) {
                                    'pending' => 'bg-yellow-400',
                                    'payment_verification' => 'bg-blue-500',
                                    'paid' => 'bg-green-500',
                                    'rejected' => 'bg-red-500',
                                    'expired' => 'bg-gray-400',
                                    default => 'bg-gray-300'
                                };
                            @endphp
                            <span class="px-2 py-1 text-xs text-white rounded {{ $badgeColor }}">
                                {{ ucfirst(str_replace('_', ' ', $trx->status)) }}
                            </span>
                        </td>
                        <td class="px-6 py-4">
                            @if($trx->payment_proof)
                                <a href="{{ asset('storage/'.$trx->payment_proof) }}" target="_blank"
                                   class="text-blue-500 hover:underline">Lihat</a>
                            @else
                                <span class="text-gray-400">-</span>
                            @endif
                        </td>
                        <td class="px-6 py-4 space-x-2">
                            @if($trx->payment_proof && $trx->status == 'payment_verification')
                                <form method="POST" action="{{ route('admin.transactions.accept', $trx->id) }}" class="inline">
                                    @csrf
                                    <button type="submit" class="bg-green-600 hover:bg-green-700 text-white px-4 py-1 rounded">Terima</button>
                                </form>
                                <form method="POST" action="{{ route('admin.transactions.reject', $trx->id) }}" class="inline">
                                    @csrf
                                    <button type="submit" class="bg-red-600 hover:bg-red-700 text-white px-4 py-1 rounded">Tolak</button>
                                </form>
                            @else
                                <span class="text-gray-400">-</span>
                            @endif
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>
@endsection