@extends('layouts.admin')
@section('title', $examProduct->title . ' - 序號管理')
@section('content')
<div class="flex items-center justify-between mb-6">
    <div>
        <a href="{{ route('admin.exam-products.edit', $examProduct) }}" class="text-sm text-blue-600 dark:text-blue-400 hover:underline">&larr; 返回商品編輯</a>
        <h2 class="text-xl font-bold text-gray-900 dark:text-white mt-1">{{ $examProduct->title }} - 序號管理</h2>
    </div>
    <a href="{{ route('admin.exam-products.codes.export', $examProduct) }}" class="px-4 py-2 bg-gray-600 text-white rounded-lg text-sm hover:bg-gray-700 font-medium">匯出 CSV</a>
</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
@if($errors->any())
<div class="mb-4 px-4 py-3 rounded-lg border bg-red-50 dark:bg-red-900/20 border-red-200 dark:border-red-800 text-red-700 dark:text-red-300 text-sm">
    @foreach($errors->all() as $error) <div>{{ $error }}</div> @endforeach
</div>
@endif

<div class="bg-white dark:bg-slate-900 rounded-xl shadow-lg border border-gray-100 dark:border-slate-800 p-4 mb-6">
    <form method="POST" action="{{ route('admin.exam-products.codes.store', $examProduct) }}" class="flex flex-wrap items-end gap-3">
        @csrf
        <div>
            <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-1">範圍</label>
            <select name="exam_product_subject_id" class="w-40 px-4 py-2.5 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">
                <option value="">整包（全部科目）</option>
                @foreach($examProduct->subjects as $subject)
                <option value="{{ $subject->id }}">{{ $subject->name }}</option>
                @endforeach
            </select>
        </div>
        <div>
            <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-1">產生數量 *</label>
            <input type="number" name="count" min="1" max="500" value="10" required class="w-32 px-4 py-2.5 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">
        </div>
        <div>
            <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-1">批次標籤（選填）</label>
            <input type="text" name="batch_label" placeholder="例：2026春季活動" class="w-56 px-4 py-2.5 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">
        </div>
        <div>
            <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-1">到期時間（選填）</label>
            <input type="datetime-local" name="expires_at" class="w-56 px-4 py-2.5 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">
        </div>
        <button type="submit" class="px-6 py-2.5 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700">產生序號</button>
    </form>
</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">批次</th>
                <th class="text-center 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">到期時間</th>
                <th class="text-right px-4 py-3 font-semibold">操作</th>
            </tr>
        </thead>
        <tbody class="divide-y divide-gray-100 dark:divide-slate-800">
            @forelse($codes as $code)
            <tr class="hover:bg-gray-50 dark:hover:bg-slate-800/40">
                <td class="px-4 py-3 font-mono text-gray-900 dark:text-white">{{ $code->code }}</td>
                <td class="px-4 py-3 text-gray-500 dark:text-gray-400">{{ $code->subject?->name ?? '整包' }}</td>
                <td class="px-4 py-3 text-gray-500 dark:text-gray-400">{{ $code->batch_label ?? '—' }}</td>
                <td class="px-4 py-3 text-center">
                    @php
                        $statusMap = [
                            'unused' => ['未使用', 'bg-gray-100 text-gray-600 dark:bg-slate-800 dark:text-gray-400'],
                            'used' => ['已使用', 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300'],
                            'revoked' => ['已作廢', 'bg-red-100 text-red-600 dark:bg-red-900/30 dark:text-red-300'],
                        ];
                        [$label, $class] = $statusMap[$code->status] ?? [$code->status, 'bg-gray-100 text-gray-600'];
                    @endphp
                    <span class="px-2.5 py-1 rounded-full text-xs font-medium {{ $class }}">{{ $label }}</span>
                </td>
                <td class="px-4 py-3 text-gray-500 dark:text-gray-400">{{ $code->candidate?->email ?? '—' }}</td>
                <td class="px-4 py-3 text-gray-500 dark:text-gray-400">{{ $code->expires_at?->format('Y-m-d H:i') ?? '不限' }}</td>
                <td class="px-4 py-3 text-right">
                    @if($code->status === 'unused')
                    <form action="{{ route('admin.exam-products.codes.revoke', [$examProduct, $code]) }}" method="POST" onsubmit="return confirm('確定作廢此序號？')">
                        @csrf
                        <button type="submit" class="text-red-600 dark:text-red-400 hover:underline">作廢</button>
                    </form>
                    @endif
                </td>
            </tr>
            @empty
            <tr><td colspan="7" class="px-4 py-10 text-center text-gray-400">尚未產生任何序號</td></tr>
            @endforelse
        </tbody>
    </table>
</div>

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