@extends('layouts.backend')

@section('title', 'Daftar Transaksi Toko')
@section('page_heading', 'Manajemen Validasi & Riwayat Transaksi Member')

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

    <div class="bg-white border border-gray-200 rounded-xl shadow-sm overflow-hidden">
        <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
            <h2 class="font-bold text-gray-800 text-sm">Semua Rekam Data Transaksi</h2>
        </div>

        <div class="overflow-x-auto">
            <table class="w-full text-left text-xs text-gray-600">
                <thead class="bg-gray-100 text-[10px] text-gray-700 uppercase font-bold border-b border-gray-200">
                    <tr>
                        <th class="px-6 py-3">ID Nota</th>
                        <th class="px-6 py-3">Nama Member</th>
                        <th class="px-6 py-3">Tanggal Masuk</th>
                        <th class="px-6 py-3 text-right">Total Bayar</th>
                        <th class="px-6 py-3 text-center">Status Transaksi</th>
                        <th class="px-6 py-3 text-center">Aksi</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-200">
                    @forelse($transaksis as $trx)
                    <tr class="hover:bg-gray-50/70 font-medium text-gray-900">
                        <td class="px-6 py-4 font-mono font-bold text-[11px]">#TRX-{{ $trx->id }}</td>
                        <td class="px-6 py-4">{{ $trx->pelanggan->nama }}</td>
                        <td class="px-6 py-4 text-gray-500 font-mono">{{ $trx->created_at->format('d M Y H:i') }}</td>
                        <td class="px-6 py-4 text-right font-bold text-blue-600">Rp {{ number_format($trx->total_bayar, 0, ',', '.') }}</td>
                        <td class="px-6 py-4 text-center">
                            @if($trx->status == 'menunggu')
                            <span class="px-2 py-0.5 text-[9px] font-black bg-amber-100 text-amber-700 rounded border border-amber-200 uppercase">Menunggu</span>
                            @elseif($trx->status == 'proses')
                            <span class="px-2 py-0.5 text-[9px] font-black bg-blue-100 text-blue-700 rounded border border-blue-200 uppercase">Diproses</span>
                            **@elseif($trx->status == 'selesai')**
                            <span class="px-2 py-0.5 text-[9px] font-black bg-emerald-100 text-emerald-700 rounded border border-emerald-200 uppercase">Selesai</span>
                            @else
                            <span class="px-2 py-0.5 text-[9px] font-black bg-red-100 text-red-700 rounded border border-red-200 uppercase">Ditolak</span>
                            @endif
                        </td>
                        <td class="px-6 py-4 text-center">
                            <a href="{{ route('admin.transaksi.periksa', $trx->id) }}" class="inline-block bg-slate-900 text-white px-2.5 py-1.5 rounded-md text-[10px] font-black hover:bg-slate-800 transition shadow-sm">
                                🔍 {{ $trx->status == 'menunggu' ? '⚡ Verifikasi' : 'Detail' }}
                            </a>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="6" class="px-6 py-8 text-center text-gray-400 font-medium">
                            📭 Belum ada data transaksi yang tercatat di database.
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection