@extends('layouts.admin')

@section('title', 'Paiements enseignants')

@section('content')
<div class="p-8">
    <header class="mb-10">
        <h1 class="text-4xl font-black text-gray-900 tracking-tight mb-2">Paiements enseignants</h1>
        <p class="text-gray-500">Historique des paiements liés aux comptes enseignants.</p>
    </header>

    <div class="bg-white rounded-3xl shadow-xl border border-gray-100 overflow-hidden">
        @if($payments->count() === 0)
            <div class="p-10 text-gray-400">
                Aucun paiement trouvé pour le moment.
            </div>
        @else
            <div class="overflow-x-auto">
                <table class="w-full text-left border-collapse">
                    <thead>
                        <tr class="bg-gray-50/50 text-gray-400 uppercase text-[10px] font-black tracking-widest border-b border-gray-100">
                            <th class="py-6 px-8">Enseignant</th>
                            <th class="py-6 px-8">Montant</th>
                            <th class="py-6 px-8">Méthode</th>
                            <th class="py-6 px-8">Statut</th>
                            <th class="py-6 px-8 text-right">Date</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-50">
                        @foreach($payments as $payment)
                            <tr class="hover:bg-gray-50/30 transition-colors">
                                <td class="py-6 px-8 font-bold text-gray-900">{{ optional($payment->user)->name }}</td>
                                <td class="py-6 px-8">
                                    <span class="font-black text-blue-600">{{ number_format($payment->amount, 2) }} {{ $payment->currency }}</span>
                                </td>
                                <td class="py-6 px-8 text-gray-500">{{ $payment->payment_method }}</td>
                                <td class="py-6 px-8">
                                    <span class="px-3 py-1 bg-green-50 text-green-600 text-[10px] font-black rounded-lg uppercase border border-green-100">{{ $payment->status }}</span>
                                </td>
                                <td class="py-6 px-8 text-gray-400 text-sm text-right font-medium">
                                    {{ optional($payment->created_at)->diffForHumans() }}
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            <div class="p-8 border-t border-gray-50">
                {{ $payments->links() }}
            </div>
        @endif
    </div>
</div>
@endsection