@extends('layouts.admin')

@section('title', 'Manajemen Transaksi')

@section('content')
<div class="flex">
    {{-- Sidebar --}}
    @include('layouts.partials.sidebar') {{-- Sidebar superadmin tetap digunakan --}}

    <div class="flex flex-col flex-1 min-h-screen bg-gray-100 dark:bg-gray-900">
        {{-- Navbar --}}
        @include('layouts.partials.navigation') {{-- Navbar superadmin tetap digunakan --}}

        {{-- Main Content --}}
        <main class="flex-1 overflow-x-hidden overflow-y-auto p-6">
            <div class="max-w-screen-xl mx-auto">

                {{-- Header --}}
                <div class="flex justify-between items-center mb-8">
                    <h1 class="text-2xl font-bold text-gray-800 dark:text-white">🧾 Manajemen Transaksi</h1>
                </div>

                {{-- Filter Status --}}
                <form method="GET" class="flex flex-col md:flex-row items-center gap-4 mb-8">
                    <select name="status"
                        class="px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-700 dark:bg-gray-800 dark:text-white focus:ring-2 focus:ring-[color:var(--primary-color)]">
                        <option value="">Semua Status</option>
                        <option value="pending" @selected(request('status') === 'pending')>Pending</option>
                        <option value="approved" @selected(request('status') === 'approved')>Approved</option>
                        <option value="canceled" @selected(request('status') === 'canceled')>Canceled</option>
                    </select>
                    <button type="submit"
                        class="px-6 py-2 bg-[color:var(--primary-color)] text-white rounded-lg hover:brightness-110 transition">
                        Filter
                    </button>
                </form>

                {{-- Tabel Transaksi --}}
                <div class="overflow-x-auto bg-white dark:bg-gray-800 rounded-xl shadow-lg">
                    <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                        <thead class="bg-gray-50 dark:bg-gray-700">
                            <tr>
                                <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600 dark:text-gray-300 uppercase">ID</th>
                                <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600 dark:text-gray-300 uppercase">User</th>
                                <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600 dark:text-gray-300 uppercase">Total</th>
                                <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600 dark:text-gray-300 uppercase">Status</th>
                                <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600 dark:text-gray-300 uppercase">Aksi</th>
                            </tr>
                        </thead>
                        <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
                            @forelse ($transactions as $trx)
                                <tr class="hover:bg-gray-50 dark:hover:bg-gray-700 transition">
                                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">#{{ $trx->id }}</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700 dark:text-gray-300">{{ $trx->user->name ?? '-' }}</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-[color:var(--primary-color)]">Rp {{ number_format($trx->total, 0, ',', '.') }}</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm">
                                        <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-semibold
                                            {{ $trx->status === 'approved' ? 'bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300' : '' }}
                                            {{ $trx->status === 'pending' ? 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900 dark:text-yellow-300' : '' }}
                                            {{ $trx->status === 'canceled' ? 'bg-red-100 text-red-700 dark:bg-red-900 dark:text-red-300' : '' }}">
                                            {{ ucfirst($trx->status) }}
                                        </span>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm">
                                        <form method="POST" action="{{ route('admin-area.transactions.update', $trx->id) }}" class="inline">
                                            @csrf
                                            @method('PUT')
                                            <select name="status" onchange="this.form.submit()"
                                                    class="px-2 py-1 rounded-lg bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-white focus:ring-2 focus:ring-[color:var(--primary-color)]">
                                                <option value="pending" @selected($trx->status === 'pending')>Pending</option>
                                                <option value="approved" @selected($trx->status === 'approved')>Approved</option>
                                                <option value="canceled" @selected($trx->status === 'canceled')>Canceled</option>
                                            </select>
                                        </form>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="5" class="px-6 py-12 text-center text-gray-500 dark:text-gray-300">
                                        Tidak ada transaksi ditemukan.
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>

                {{-- Pagination --}}
                <div class="mt-8">
                    {{ $transactions->withQueryString()->links('vendor.pagination.tailwind') }}
                </div>

            </div>
        </main>
    </div>
</div>
@endsection