@extends('layouts.admin')

@section('content')
<div class="container mx-auto px-4 py-8" x-data="{ selectAll: false }">

    {{-- Heading --}}
    <div class="flex justify-between items-center mb-8">
        <h1 class="text-3xl font-bold text-gray-800 dark:text-white">
            Dashboard Admin 🚀
        </h1>
        <div class="text-sm text-gray-600 dark:text-gray-300">
            Login sebagai: <span class="font-semibold text-[color:var(--primary-color)]">{{ $user->name }}</span>
        </div>
    </div>

    {{-- Ringkasan --}}
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-10">
        @foreach ([
            ['label' => 'Total', 'value' => $total, 'color' => 'text-[color:var(--primary-color)]'],
            ['label' => 'Approved', 'value' => $approved, 'color' => 'text-green-500'],
            ['label' => 'Cancelled', 'value' => $cancelled, 'color' => 'text-red-500'],
        ] as $stat)
            <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow text-center">
                <h2 class="text-lg font-semibold text-gray-700 dark:text-white mb-2">{{ $stat['label'] }}</h2>
                <p class="text-2xl font-bold {{ $stat['color'] }}">{{ $stat['value'] }}</p>
            </div>
        @endforeach
    </div>

    {{-- Filter & Export --}}
    <form method="GET" action="{{ route('admin-area.dashboard') }}" class="flex flex-col md:flex-row justify-between items-center mb-6 gap-4">
        <div class="flex gap-2">
            <input type="text" name="search" value="{{ request('search') }}" placeholder="Cari Nama/User ID..."
                class="px-4 py-2 rounded border dark:bg-gray-700 dark:text-white">
            <select name="status" class="px-4 py-2 rounded border dark:bg-gray-700 dark:text-white">
                <option value="">Semua Status</option>
                <option value="payment_verification" @selected(request('status') == 'payment_verification')>Verifikasi Bayar</option>
                <option value="approved" @selected(request('status') == 'approved')>Approved</option>
                <option value="cancelled" @selected(request('status') == 'cancelled')>Cancelled</option>
            </select>
            <button type="submit"
                class="px-4 py-2 bg-[color:var(--primary-color)] text-white rounded hover:brightness-110 transition">
                🔍 Filter
            </button>
        </div>

        <div class="flex gap-2">
            <a href="{{ route('admin-area.transactions.export', request()->query()) }}"
                class="inline-flex items-center gap-2 px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded transition">
                📥 Export Excel
            </a>
            <a href="{{ route('admin-area.transactions.exportPdf', request()->query()) }}"
                class="inline-flex items-center gap-2 px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded transition">
                📄 Export PDF
            </a>
        </div>
    </form>

    {{-- Form Mass Action --}}
    <form method="POST" action="{{ route('admin-area.transactions.massAction') }}">
        @csrf
        <div class="flex mb-4 gap-2">
            <select name="action" required class="px-4 py-2 rounded border dark:bg-gray-700 dark:text-white">
                <option value="">-- Pilih Aksi --</option>
                <option value="approve">✅ Approve Semua</option>
                <option value="reject">❌ Reject Semua</option>
            </select>
            <button type="submit"
                class="px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white rounded transition">
                🚀 Proses Massal
            </button>
        </div>

        {{-- Tabel --}}
        <div class="overflow-x-auto rounded-lg shadow ring-1 ring-gray-200 dark:ring-gray-700">
            <table class="min-w-full bg-white dark:bg-gray-900 text-gray-700 dark:text-gray-300">
                <thead class="bg-gray-100 dark:bg-gray-800">
                    <tr>
                        <th class="px-6 py-3 text-left">
                            <input type="checkbox" @click="selectAll = !selectAll; document.querySelectorAll('input[name=\'transactions[]\']').forEach(c => c.checked = selectAll)">
                        </th>
                        <th class="px-6 py-3 text-left">Invoice ID</th>
                        <th class="px-6 py-3 text-left">User</th>
                        <th class="px-6 py-3 text-left">Total</th>
                        <th class="px-6 py-3 text-left">Status</th>
                        <th class="px-6 py-3 text-left">Sisa Waktu</th>
                        <th class="px-6 py-3 text-center">Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($transactions as $transaction)
                        @php
                            $expiredAt = \Carbon\Carbon::parse($transaction->created_at)->addHours(24);
                            $sisaJam = now()->diffInHours($expiredAt, false);

                            $statusToShow = $transaction->status;

                            // Update status di database jika expired
                            if ($sisaJam <= 0 && $transaction->status === 'payment_verification') {
                                $transaction->update(['status' => 'cancelled']);
                                $statusToShow = 'cancelled';
                            }
                        @endphp
                        <tr class="border-b dark:border-gray-700 {{ $statusToShow === 'cancelled' ? 'bg-red-50 dark:bg-red-900/20' : '' }}">
                            <td class="px-6 py-4">
                                <input type="checkbox" name="transactions[]" value="{{ $transaction->id }}">
                            </td>
                            <td class="px-6 py-4 font-bold text-gray-900 dark:text-white">#{{ $transaction->id }}</td>
                            <td class="px-6 py-4">{{ $transaction->user?->name ?? '-' }}</td>
                            <td class="px-6 py-4">Rp {{ number_format($transaction->total, 0, ',', '.') }}</td>
                            <td class="px-6 py-4">
                                <span class="px-2 py-1 rounded-full text-xs font-semibold
                                    @if($statusToShow == 'payment_verification') bg-blue-100 text-blue-700
                                    @elseif($statusToShow == 'approved') bg-green-100 text-green-700
                                    @elseif($statusToShow == 'cancelled') bg-red-100 text-red-700
                                    @endif">
                                    {{ ucfirst(str_replace('_', ' ', $statusToShow)) }}
                                </span>
                            </td>
                            <td class="px-6 py-4 text-sm">
                                @if($statusToShow === 'payment_verification')
                                    @if($sisaJam <= 0)
                                        <span class="text-red-500 font-semibold">⏰ Expired</span>
                                    @else
                                        <span>{{ $sisaJam }} jam lagi</span>
                                    @endif
                                @else
                                    <span class="text-gray-400">-</span>
                                @endif
                            </td>
                            <td class="px-6 py-4 text-center">
                                <a href="{{ route('admin-area.transactions.show', $transaction->id) }}" target="_blank" class="text-blue-500 hover:underline">
                                    🔍 Lihat Detail
                                </a>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="7" class="px-6 py-4 text-center text-gray-400">
                                Tidak ada transaksi ditemukan.
                            </td>
                        </tr>
                    @endforelse
                </tbody>

            </table>
        </div>
    </form>

    {{-- Pagination --}}
    <div class="mt-6">
        {{ $transactions->appends(request()->query())->links() }}
    </div>

</div>
@endsection