@extends('layouts.apoteker')

@section('title', '🧾 Daftar Transaksi Pembeli')

@section('content')
<div class="space-y-6">

    {{-- Judul --}}
    <div class="flex justify-between items-center">
        <h1 class="text-2xl font-bold">🧾 Daftar Transaksi Pembeli</h1>
    </div>

    {{-- Filter Pencarian --}}
    <form method="GET" class="flex flex-wrap gap-4 items-center">
        <input type="text" name="search" value="{{ request('search') }}"
               placeholder="🔍 Cari nama / catatan..."
               class="px-4 py-2 border rounded w-full md:w-1/3 dark:bg-gray-700 dark:text-white" />

        <select name="status" class="px-4 py-2 border rounded dark:bg-gray-700 dark:text-white">
            <option value="">📂 Semua Status</option>
            <option value="pending" {{ request('status') == 'pending' ? 'selected' : '' }}>🟡 Pending</option>
            <option value="proses" {{ request('status') == 'proses' ? 'selected' : '' }}>🔵 Proses</option>
            <option value="approved" {{ request('status') == 'approved' ? 'selected' : '' }}>✅ Disetujui</option>
            <option value="cancelled" {{ request('status') == 'cancelled' ? 'selected' : '' }}>❌ Dibatalkan</option>
        </select>

        <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">🔍 Cari</button>
    </form>

    {{-- Tabel Transaksi --}}
    <div class="overflow-x-auto bg-white dark:bg-gray-800 rounded-lg shadow">
        <table class="w-full table-auto text-sm">
            <thead class="bg-gray-100 dark:bg-gray-700 text-left text-xs font-semibold text-gray-600 dark:text-gray-300 uppercase">
                <tr>
                    <th class="px-4 py-3">#</th>
                    <th class="px-4 py-3">Pembeli</th>
                    <th class="px-4 py-3">Total</th>
                    <th class="px-4 py-3">Status</th>
                    <th class="px-4 py-3">Catatan Pembeli</th>
                    <th class="px-4 py-3">Catatan Apoteker</th>
                    <th class="px-4 py-3">Alasan</th>
                    <th class="px-4 py-3">Bukti</th>
                    <th class="px-4 py-3">Aksi</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
                @forelse($transactions as $trx)
                    <tr>
                        <td class="px-4 py-2">{{ $loop->iteration + ($transactions->currentPage() - 1) * $transactions->perPage() }}</td>
                        <td class="px-4 py-2">{{ $trx->user->name ?? 'Anonim' }}</td>
                        <td class="px-4 py-2 font-bold text-green-600">Rp {{ number_format($trx->total, 0, ',', '.') }}</td>
                        <td class="px-4 py-2">
                            <span class="text-xs px-2 py-1 rounded
                                {{ match($trx->status) {
                                    'pending' => 'bg-yellow-100 text-yellow-700',
                                    'proses' => 'bg-blue-100 text-blue-700',
                                    'approved' => 'bg-green-100 text-green-700',
                                    'batal', 'cancelled' => 'bg-red-100 text-red-700',
                                    default => 'bg-gray-100 text-gray-700'
                                } }}">
                                {{ ucfirst($trx->status) }}
                            </span>
                        </td>
                        <td class="px-4 py-2 text-xs text-gray-700 dark:text-gray-200 italic">
                            {{ $trx->notes ?: '—' }}
                        </td>
                        <td class="px-4 py-2 text-xs text-blue-700 dark:text-blue-300">
                            {{ $trx->admin_note ?: '—' }}
                        </td>
                        <td class="px-4 py-2 text-xs text-purple-700 dark:text-purple-300">
                            {{ $trx->admin_rationale ?: '—' }}
                        </td>
                        <td class="px-4 py-2">
                            @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 italic">Belum ada</span>
                            @endif
                        </td>
                        <td class="px-4 py-2">
                            <a href="{{ route('apoteker.transactions.show', $trx->id) }}" class="text-blue-600 hover:underline">🔍 Detail</a>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="9" class="px-4 py-8 text-center text-gray-500 dark:text-gray-300">
                            Tidak ada transaksi ditemukan.
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>

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