@extends('layouts.app')

@section('content')
    <style>
        .import-grid { display: grid; grid-template-columns: 1fr .9fr; gap: 16px; margin-top: 18px; }
        .field label { display: block; margin-bottom: 6px; font-weight: 500; }
        .field input, .field select { width: 100%; border: 1px solid #cfd8e3; border-radius: 8px; padding: 10px 12px; font: inherit; background: #fff; }
        .check-row { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; }
        .check-row input { width: auto; margin-top: 4px; }
        .error-text { color: #b54708; font-size: 13px; margin-top: 4px; }
        .example-table { min-width: 0; }
        .example-table th, .example-table td { padding: 9px 10px; }
        .import-errors { margin-top: 16px; background: #fff4ed; border: 1px solid #fedf89; color: #b54708; border-radius: 8px; padding: 12px 14px; }
        @media (max-width: 860px) { .import-grid { grid-template-columns: 1fr; } }
    </style>

    <div class="toolbar">
        <div>
            <h1 class="page-title">นำเข้านักเรียนจาก CSV</h1>
            <p class="page-subtitle">เลือกปี/เทอม แล้วอัปโหลดไฟล์รายชื่อนักเรียนเพื่อเพิ่มหรืออัปเดตข้อมูลอัตโนมัติ</p>
        </div>
        <a class="btn secondary" href="{{ route('students.index') }}">กลับรายชื่อ</a>
    </div>

    @if (session('status'))
        <div class="notice">{{ session('status') }}</div>
    @endif

    @if ($errors->any())
        <div class="import-errors">{{ $errors->first() }}</div>
    @endif

    @if (session('import_errors'))
        <div class="import-errors">
            <strong>รายการที่นำเข้าไม่ได้</strong>
            <ul style="margin:8px 0 0 20px;">
                @foreach (session('import_errors') as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <div class="import-grid">
        <form class="card" method="post" enctype="multipart/form-data" action="{{ route('students.import.store') }}">
            @csrf

            <div class="field">
                <label for="academic_year_id">ปีการศึกษา / เทอม</label>
                <select id="academic_year_id" name="academic_year_id">
                    <option value="">เลือกปี/เทอม</option>
                    @foreach ($academicYears as $year)
                        <option value="{{ $year->id }}" @selected((int) old('academic_year_id') === $year->id || (! old('academic_year_id') && $year->is_active))>
                            {{ $year->label }}
                        </option>
                    @endforeach
                </select>
                @error('academic_year_id') <div class="error-text">{{ $message }}</div> @enderror
            </div>

            <div class="field" style="margin-top:14px;">
                <label for="csv_file">ไฟล์ CSV</label>
                <input id="csv_file" type="file" name="csv_file" accept=".csv,text/csv,text/plain">
                @error('csv_file') <div class="error-text">{{ $message }}</div> @enderror
            </div>

            <label class="check-row">
                <input type="checkbox" name="create_missing_classrooms" value="1" @checked(old('create_missing_classrooms', true))>
                <span>สร้างห้องที่ยังไม่มีอัตโนมัติจากคอลัมน์ห้อง เช่น ม.1/1, 1/1, ม.2</span>
            </label>

            <div style="display:flex;justify-content:flex-end;margin-top:18px;">
                <button class="btn" type="submit">นำเข้า CSV</button>
            </div>
        </form>

        <div class="table-wrap">
            <table class="example-table">
                <thead>
                    <tr>
                        <th>คอลัมน์</th>
                        <th>ตัวอย่าง</th>
                    </tr>
                </thead>
                <tbody>
                    <tr><td>เลขประจำตัว</td><td>10001</td></tr>
                    <tr><td>คำนำหน้า</td><td>ด.ช.</td></tr>
                    <tr><td>ชื่อ</td><td>ธนกฤต</td></tr>
                    <tr><td>นามสกุล</td><td>ตั้งใจ</td></tr>
                    <tr><td>เพศ</td><td>ชาย</td></tr>
                    <tr><td>วันเกิด</td><td>2012-05-12</td></tr>
                    <tr><td>ห้อง</td><td>ม.1/1</td></tr>
                    <tr><td>เลขที่</td><td>1</td></tr>
                </tbody>
            </table>
        </div>
    </div>

    <div class="card" style="margin-top:16px;">
        <strong>ตัวอย่างหัวตาราง CSV</strong>
        <p class="page-subtitle" style="margin-top:6px;">เลขที่เป็นคอลัมน์เสริม ถ้าไม่มีระบบจะปล่อยว่างไว้</p>
        <pre style="white-space:pre-wrap;margin:10px 0 0;">เลขประจำตัว,คำนำหน้า,ชื่อ,นามสกุล,เพศ,วันเกิด,ห้อง,เลขที่
10001,ด.ช.,ธนกฤต,ตั้งใจ,ชาย,2012-05-12,ม.1/1,1</pre>
    </div>
@endsection