@extends('layouts.app')

@section('content')
    <style>
        .form-shell { margin-top: 18px; display: grid; gap: 16px; }
        .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; }
        .error-text { color: #b54708; font-size: 13px; margin-top: 4px; }
        .add-grid { display: grid; grid-template-columns: 1fr 140px; gap: 12px; }
        .number-input { width: 90px; min-width: 90px; }
        .remove-cell { text-align: center; }
        .form-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
        @media (max-width: 760px) { .add-grid { grid-template-columns: 1fr; } }
    </style>

    <div class="toolbar">
        <div>
            <h1 class="page-title">จัดรายชื่อ {{ $classroom->name }}</h1>
            <p class="page-subtitle">{{ $classroom->academicYear->label ?? '-' }} | ครูที่ปรึกษา {{ $classroom->advisor_names }}</p>
        </div>
        <a class="btn secondary" href="{{ route('classrooms.show', $classroom) }}">กลับหน้าห้อง</a>
    </div>

    <form class="form-shell" method="post" action="{{ route('classrooms.roster.update', $classroom) }}">
        @csrf
        @method('put')

        <div class="card">
            <h2 style="margin:0 0 14px;font-size:18px;">เพิ่มนักเรียนเข้าห้อง</h2>
            <div class="add-grid">
                <div class="field">
                    <label for="add_student_id">นักเรียน</label>
                    <select id="add_student_id" name="add_student_id">
                        <option value="">ไม่เพิ่มนักเรียน</option>
                        @foreach ($availableStudents as $student)
                            <option value="{{ $student->id }}" @selected((int) old('add_student_id') === $student->id)>
                                {{ $student->student_code }} - {{ $student->full_name }}
                            </option>
                        @endforeach
                    </select>
                    @error('add_student_id') <div class="error-text">{{ $message }}</div> @enderror
                </div>
                <div class="field">
                    <label for="add_student_number">เลขที่</label>
                    <input id="add_student_number" type="number" min="1" max="999" name="add_student_number" value="{{ old('add_student_number') }}">
                    @error('add_student_number') <div class="error-text">{{ $message }}</div> @enderror
                </div>
            </div>
        </div>

        <div class="table-wrap">
            <table>
                <thead>
                    <tr>
                        <th style="width:110px;">เลขที่</th>
                        <th>เลขประจำตัว</th>
                        <th>ชื่อ - นามสกุล</th>
                        <th style="width:120px;">ถอดออก</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($classroom->students as $student)
                        <tr>
                            <td>
                                <input class="number-input" type="number" min="1" max="999" name="students[{{ $student->id }}][student_number]" value="{{ old("students.{$student->id}.student_number", $student->pivot->student_number) }}">
                            </td>
                            <td>{{ $student->student_code }}</td>
                            <td>{{ $student->full_name }}</td>
                            <td class="remove-cell">
                                <input type="checkbox" name="students[{{ $student->id }}][remove]" value="1">
                            </td>
                        </tr>
                    @empty
                        <tr><td colspan="4">ยังไม่มีนักเรียนในห้องนี้</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <div class="form-actions">
            <a class="btn secondary" href="{{ route('classrooms.show', $classroom) }}">ยกเลิก</a>
            <button class="btn" type="submit">บันทึกรายชื่อ</button>
        </div>
    </form>
@endsection