@extends('layouts.admin')
@section('title', '批次匯入帳號')
@section('content')
<div class="max-w-2xl">
    <div class="bg-white dark:bg-slate-900 rounded-xl shadow-lg border border-gray-100 dark:border-slate-800 p-6">
        <div class="mb-6">
            <h3 class="text-lg font-bold text-gray-900 dark:text-white mb-2">CSV 批次匯入帳號</h3>
            <p class="text-sm text-gray-600 dark:text-gray-400">上傳 CSV 檔案，批次建立使用者帳號。所有匯入的帳號首次登入時皆須變更密碼。</p>
        </div>

        <form action="{{ route('admin.users.import.store') }}" method="POST" enctype="multipart/form-data" class="space-y-5">
            @csrf

            <!-- CSV 檔案 -->
            <div>
                <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-1">CSV 檔案 *</label>
                <input type="file" name="csv_file" accept=".csv,.txt" required
                    class="w-full 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 file:mr-4 file:py-1 file:px-4 file:rounded file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 dark:file:bg-blue-900/30 dark:file:text-blue-400">
                @error('csv_file')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
            </div>

            <div class="grid grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-1">預設角色 *</label>
                    <select name="default_role_id" required class="w-full 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">
                        @foreach($roles as $r)<option value="{{ $r->id }}" {{ $r->slug === 'student' ? 'selected' : '' }}>{{ $r->name }}</option>@endforeach
                    </select>
                    <p class="mt-1 text-xs text-gray-500">CSV 中有 role 欄位者以 CSV 為準</p>
                </div>
                <div>
                    <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-1">預設學校</label>
                    <select name="default_school_id" class="w-full 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($schools as $s)<option value="{{ $s->id }}">{{ $s->name }}</option>@endforeach
                    </select>
                </div>
            </div>

            <div class="flex gap-3">
                <button type="submit" class="px-6 py-2.5 bg-purple-600 text-white rounded-lg font-medium hover:bg-purple-700">開始匯入</button>
                <a href="{{ route('admin.users.import.template') }}" class="px-6 py-2.5 bg-gray-200 dark:bg-slate-700 text-gray-700 dark:text-gray-300 rounded-lg font-medium hover:bg-gray-300 dark:hover:bg-slate-600">下載範本</a>
                <a href="{{ route('admin.users.index') }}" class="px-6 py-2.5 bg-gray-200 dark:bg-slate-700 text-gray-700 dark:text-gray-300 rounded-lg font-medium">返回</a>
            </div>
        </form>
    </div>

    <!-- CSV 格式說明 -->
    <div class="mt-6 bg-white dark:bg-slate-900 rounded-xl shadow-lg border border-gray-100 dark:border-slate-800 p-6">
        <h4 class="text-sm font-bold text-gray-900 dark:text-white mb-3">CSV 格式說明</h4>
        <div class="overflow-x-auto">
            <table class="w-full text-xs">
                <thead class="bg-gray-50 dark:bg-slate-800">
                    <tr>
                        <th class="px-3 py-2 text-left font-semibold text-gray-600 dark:text-gray-300">欄位名稱</th>
                        <th class="px-3 py-2 text-left font-semibold text-gray-600 dark:text-gray-300">必填</th>
                        <th class="px-3 py-2 text-left font-semibold text-gray-600 dark:text-gray-300">說明</th>
                    </tr>
                </thead>
                <tbody class="text-gray-700 dark:text-gray-300">
                    <tr class="border-t border-gray-100 dark:border-slate-800">
                        <td class="px-3 py-2 font-mono font-bold">name</td>
                        <td class="px-3 py-2 text-red-600">*</td>
                        <td class="px-3 py-2">使用者姓名</td>
                    </tr>
                    <tr class="border-t border-gray-100 dark:border-slate-800">
                        <td class="px-3 py-2 font-mono font-bold">email</td>
                        <td class="px-3 py-2 text-red-600">*</td>
                        <td class="px-3 py-2">電子郵件（不可重複）</td>
                    </tr>
                    <tr class="border-t border-gray-100 dark:border-slate-800">
                        <td class="px-3 py-2 font-mono font-bold">password</td>
                        <td class="px-3 py-2 text-red-600">*</td>
                        <td class="px-3 py-2">密碼（8字元以上，需包含大小寫+數字+特殊符號）</td>
                    </tr>
                    <tr class="border-t border-gray-100 dark:border-slate-800">
                        <td class="px-3 py-2 font-mono font-bold">role</td>
                        <td class="px-3 py-2 text-gray-400">選填</td>
                        <td class="px-3 py-2">角色代碼：admin, school_admin, homeroom, teacher, student</td>
                    </tr>
                    <tr class="border-t border-gray-100 dark:border-slate-800">
                        <td class="px-3 py-2 font-mono font-bold">school_id</td>
                        <td class="px-3 py-2 text-gray-400">選填</td>
                        <td class="px-3 py-2">學校 ID</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="mt-3 bg-gray-50 dark:bg-slate-800 rounded-lg p-3">
            <p class="text-xs font-mono text-gray-600 dark:text-gray-400">
                name,email,password,role,school_id<br>
                王小明,wang@example.com,Test@1234,student,1<br>
                李老師,li@example.com,Pass#5678,teacher,1
            </p>
        </div>
    </div>
</div>
@endsection