@extends('layouts.master')

@section('content')
<div class="max-w-7xl mx-auto px-6 py-8">

    <!-- HEADER -->
    <div class="flex items-center justify-between mb-7">
        <div>
            <h1 class="text-slate-900 text-xl font-bold">All Registrations</h1>
            <p class="text-slate-500 text-sm mt-0.5">Complete list of registered users</p>
        </div>
    </div>

    <!-- TABLE -->
    <div class="bg-white border rounded-xl overflow-hidden">

        <table class="w-full text-sm">

            <thead class="bg-slate-50 border-b">
                <tr>
                    <th class="px-5 py-3 text-left">ID</th>
                    <th class="px-5 py-3 text-left">Name</th>
                    <th class="px-5 py-3 text-left">Phone</th>
                    <th class="px-5 py-3 text-left">Email</th>
                    <th class="px-5 py-3 text-center">Total Score</th>
                    <th class="px-5 py-3 text-center">Created</th>
                </tr>
            </thead>

            <tbody>
                @foreach ($registrations as $reg)
                    <tr class="border-b hover:bg-slate-50">

                        <td class="px-5 py-3">#{{ $reg->id }}</td>

                        <td class="px-5 py-3 font-medium">
                            {{ $reg->name ?? '-' }}
                        </td>

                        <td class="px-5 py-3">
                            {{ $reg->phone }}
                        </td>

                        <td class="px-5 py-3">
                            {{ $reg->email ?? '-' }}
                        </td>

                        <td class="px-5 py-3 text-center font-bold">
                            {{ $reg->total_score }}
                        </td>

                        <td class="px-5 py-3 text-center text-slate-500">
                            {{ $reg->created_at->format('Y-m-d') }}
                        </td>

                    </tr>
                @endforeach
            </tbody>

        </table>

        <!-- PAGINATION -->
        <div class="px-5 py-3 border-t flex justify-between items-center">

            <div class="text-xs text-slate-500">
                Showing {{ $registrations->firstItem() }} - {{ $registrations->lastItem() }}
                of {{ $registrations->total() }}
            </div>

            <div>
                {{ $registrations->links() }}
            </div>

        </div>

    </div>

</div>
@endsection