@extends('layouts.app')
@section('title', 'Candidate Registrations')
@section('page-title', 'Registrations — ' . $exam->title)
@section('content')

<div style="display: flex; align-items: center; gap: 12px; margin-bottom: 24px; flex-wrap: wrap;">
    <a href="{{ route('tester.exams.index') }}" class="btn btn-outline btn-sm">
        <i class="bi bi-arrow-left"></i> Back
    </a>
    <div class="text-muted text-sm">{{ $registrations->total() }} registration(s)</div>
    <div style="margin-left: auto; display: flex; gap: 8px;">
        <a href="{{ route('tester.exams.results', $exam) }}" class="btn btn-outline btn-sm">
            <i class="bi bi-bar-chart"></i> Results
        </a>
        <a href="{{ route('tester.exams.export', $exam) }}" class="btn btn-success btn-sm">
            <i class="bi bi-file-earmark-excel"></i> Export Results
        </a>
    </div>
</div>

{{-- Bulk approve form --}}
<form method="POST" action="{{ route('tester.exams.registrations.bulk-approve', $exam) }}" id="bulkForm">
    @csrf
    <div class="card">
        <div class="card-header">
            <div style="display: flex; align-items: center; gap: 12px;">
                <label style="display: flex; align-items: center; gap: 8px; cursor: pointer;">
                    <input type="checkbox" id="selectAll" style="width:16px;height:16px;accent-color:var(--accent);">
                    <span style="font-size: .85rem; font-weight: 600;">Select All</span>
                </label>
            </div>
            <button type="submit" class="btn btn-success btn-sm" onclick="return confirm('Approve selected candidates?')">
                <i class="bi bi-check2-all"></i> Bulk Approve Selected
            </button>
        </div>
        <div class="table-wrapper">
            <table>
                <thead>
                    <tr>
                        <th style="width: 40px;"></th>
                        <th>Candidate</th>
                        <th>Registered</th>
                        <th>Status</th>
                        <th>Payment</th>
                        <th>Notified</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($registrations as $reg)
                    <tr>
                        <td>
                            @if($reg->status === 'pending')
                            <input type="checkbox" name="registration_ids[]" value="{{ $reg->id }}"
                                   class="reg-checkbox" style="width:16px;height:16px;accent-color:var(--accent);">
                            @endif
                        </td>
                        <td>
                            <div style="font-weight: 600;">{{ $reg->candidate->name }}</div>
                            <div class="text-xs text-muted">{{ $reg->candidate->email }}</div>
                            @if($reg->candidate->organization)
                            <div class="text-xs text-muted">{{ $reg->candidate->organization }}</div>
                            @endif
                        </td>
                        <td class="text-sm text-muted">{{ $reg->created_at->format('M j, Y') }}</td>
                        <td>
                            <span class="badge {{ match($reg->status) {
                                'approved'  => 'badge-success',
                                'pending'   => 'badge-warning',
                                'rejected'  => 'badge-danger',
                                'completed' => 'badge-info',
                                default     => 'badge-muted'
                            } }}">{{ ucfirst($reg->status) }}</span>
                        </td>
                        <td>
                            @if(!$reg->payment_required)
                                <span class="badge badge-muted">N/A</span>
                            @elseif($reg->payment_confirmed)
                                <span class="badge badge-success"><i class="bi bi-check"></i> Paid</span>
                            @else
                                <span class="badge badge-danger">Unpaid</span>
                            @endif
                        </td>
                        <td class="text-xs text-muted">
                            {{ $reg->notified_at ? $reg->notified_at->format('M j H:i') : '—' }}
                        </td>
                        <td>
                            @if($reg->status === 'pending')
                            <form method="POST" action="{{ route('tester.registrations.approve', $reg) }}" style="display:inline;">
                                @csrf
                                <button class="btn btn-success btn-sm">
                                    <i class="bi bi-check"></i> Approve
                                </button>
                            </form>
                            @elseif($reg->status === 'approved')
                            <form method="POST" action="{{ route('tester.registrations.approve', $reg) }}" style="display:inline;">
                                @csrf
                                <button class="btn btn-outline btn-sm">
                                    <i class="bi bi-envelope"></i> Re-notify
                                </button>
                            </form>
                            @endif
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="7" style="text-align: center; padding: 60px; color: var(--muted);">
                            No registrations yet for this exam.
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        @if($registrations->hasPages())
        <div class="pagination-wrapper">{{ $registrations->links() }}</div>
        @endif
    </div>
</form>

@push('scripts')
<script>
document.getElementById('selectAll').addEventListener('change', function() {
    document.querySelectorAll('.reg-checkbox').forEach(cb => cb.checked = this.checked);
});
</script>
@endpush
@endsection