@extends('layouts.admin')
@section('title', '考生管理')
@section('content')
<div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-6">
    <p class="text-gray-500 dark:text-gray-400 text-sm">App 考生帳號。可將考生綁定到既有的「學生」帳號，讓考生在聊天室以該帳號的身分收發訊息。</p>
    <form method="GET" class="flex gap-2">
        <input type="text" name="q" value="{{ $q }}" placeholder="搜尋姓名／Email" class="w-56 px-4 py-2 rounded-lg border-2 border-gray-200 dark:border-slate-700 bg-gray-50 dark:bg-slate-800 text-gray-900 dark:text-white focus:outline-none focus:border-blue-500">
        <button class="px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-medium hover:bg-blue-700">搜尋</button>
    </form>
</div>

@if(session('success'))
<div class="mb-4 px-4 py-3 rounded-lg border bg-green-50 dark:bg-green-900/20 border-green-200 dark:border-green-800 text-green-700 dark:text-green-300 text-sm">{{ session('success') }}</div>
@endif

<div class="mb-4 px-4 py-3 rounded-lg border bg-amber-50 dark:bg-amber-900/20 border-amber-200 dark:border-amber-800 text-amber-800 dark:text-amber-300 text-sm">
    綁定後，持有該考生帳號的人就能用被綁定學生的身分聊天（看到全部啟用中的使用者、私訊）。請先確認考生與該學生帳號是同一個人。
</div>

<div class="bg-white dark:bg-slate-900 rounded-xl shadow-lg border border-gray-100 dark:border-slate-800 overflow-hidden">
    <table class="w-full text-sm">
        <thead class="bg-gray-50 dark:bg-slate-800/60 text-gray-500 dark:text-gray-400">
            <tr>
                <th class="text-left px-4 py-3 font-semibold">考生</th>
                <th class="text-left px-4 py-3 font-semibold">聊天室帳號</th>
                <th class="text-left px-4 py-3 font-semibold">綁定 / 更換（學生帳號 Email）</th>
            </tr>
        </thead>
        <tbody class="divide-y divide-gray-100 dark:divide-slate-800">
            @forelse($candidates as $candidate)
            <tr class="hover:bg-gray-50 dark:hover:bg-slate-800/40 align-top">
                <td class="px-4 py-3">
                    <div class="font-medium text-gray-900 dark:text-white">{{ $candidate->name }}</div>
                    <div class="text-xs text-gray-500">{{ $candidate->email }}</div>
                </td>
                <td class="px-4 py-3">
                    @if($candidate->user)
                        <div class="text-gray-900 dark:text-white">{{ $candidate->user->name }}</div>
                        <div class="text-xs text-gray-500">{{ $candidate->user->email }}（學校帳號連結）</div>
                    @elseif($candidate->messagingUser)
                        <div class="text-gray-900 dark:text-white">{{ $candidate->messagingUser->name }}</div>
                        <div class="text-xs text-gray-500">{{ $candidate->messagingUser->email }}（{{ $candidate->messagingUser->role?->name ?? '無角色' }}）</div>
                        @if($candidate->messagingUser->email !== $candidate->email)
                            <div class="text-xs text-amber-600 dark:text-amber-400">Email 與考生不同</div>
                        @endif
                    @else
                        <span class="text-gray-400">尚未建立（考生第一次進聊天室時自動建立）</span>
                    @endif
                </td>
                <td class="px-4 py-3">
                    @if($candidate->user)
                        <span class="text-gray-400 text-xs">已連結學校學生帳號，不需綁定</span>
                    @else
                    <form method="POST" action="{{ route('admin.candidates.messaging-user.bind', $candidate) }}" class="flex flex-wrap items-center gap-2">
                        @csrf
                        <input type="email" name="email" required placeholder="student@school.tw" class="w-56 px-3 py-2 rounded-lg border-2 border-gray-200 dark:border-slate-700 bg-gray-50 dark:bg-slate-800 text-gray-900 dark:text-white focus:outline-none focus:border-blue-500">
                        <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded-lg text-xs font-medium hover:bg-blue-700">綁定</button>
                    </form>
                    @if($candidate->messaging_user_id)
                    <form method="POST" action="{{ route('admin.candidates.messaging-user.unbind', $candidate) }}" class="mt-2" onsubmit="return confirm('解除綁定？該考生已取得的聊天室 token 會立即失效。')">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="text-xs text-red-600 dark:text-red-400 hover:underline">解除綁定</button>
                    </form>
                    @endif
                    @endif
                </td>
            </tr>
            @empty
            <tr><td colspan="3" class="px-4 py-10 text-center text-gray-400">沒有符合的考生</td></tr>
            @endforelse
        </tbody>
    </table>
</div>

<div class="mt-4">{{ $candidates->links() }}</div>
@endsection