@extends('layouts.app')

@section('title', 'Cashout Requests')

@section('content')
<h1 class="font-headline-lg text-headline-lg text-on-surface">Cashout Requests</h1>

<div class="glass-panel rounded-xl overflow-hidden">
    <table class="w-full text-left border-collapse">
        <thead>
            <tr class="border-b border-outline-variant/20 bg-surface-container-lowest/30">
                <th class="p-4 font-data-label text-data-label text-outline uppercase">User</th>
                <th class="p-4 font-data-label text-data-label text-outline uppercase">Points</th>
                <th class="p-4 font-data-label text-data-label text-outline uppercase">Method</th>
                <th class="p-4 font-data-label text-data-label text-outline uppercase">Status</th>
            </tr>
        </thead>
        <tbody class="divide-y divide-outline-variant/10">
            @foreach($cashouts as $cashout)
            <tr class="hover:bg-surface-variant/20 transition-colors">
                <td class="p-4 font-body-sm text-body-sm text-on-surface">{{ $cashout->user->username }}</td>
                <td class="p-4 font-body-sm text-body-sm text-on-surface-variant">{{ number_format($cashout->points_requested) }}</td>
                <td class="p-4 font-body-sm text-body-sm text-on-surface-variant">{{ Str::headline($cashout->method) }}</td>
                <td class="p-4">
                    <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full font-data-label text-data-label
                        {{ $cashout->status === 'pending' ? 'bg-tertiary-container/30 border border-tertiary/50 text-tertiary' : 'bg-secondary-container/20 border border-secondary/30 text-secondary' }}">
                        {{ Str::headline($cashout->status) }}
                    </span>
                </td>
            </tr>
            @endforeach
        </tbody>
    </table>
</div>

{{ $cashouts->links() }}
@endsection