@extends('layouts.app')

@section('content')
    <style>
        .form-shell { margin-top: 18px; display: grid; gap: 16px; max-width: 820px; }
        .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
        .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; }
        .field select[multiple] { min-height: 150px; }
        .hint { color: var(--muted); font-size: 13px; margin-top: 4px; }
        .field.full { grid-column: 1 / -1; }
        .error-text { color: #b54708; font-size: 13px; margin-top: 4px; }
        .form-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
        @media (max-width: 860px) { .form-grid { grid-template-columns: 1fr; } }
    </style>

    <h1 class="page-title">{{ $classroom->exists ? 'แก้ไขห้องเรียน' : 'เพิ่มห้องเรียน' }}</h1>
    <p class="page-subtitle">ใช้กำหนดห้องในแต่ละปี/เทอม และผูกครูที่ปรึกษา</p>

    <form class="form-shell" method="post" action="{{ $classroom->exists ? route('classrooms.update', $classroom) : route('classrooms.store') }}">
        @csrf
        @if ($classroom->exists)
            @method('put')
        @endif

        <div class="card">
            <div class="form-grid">
                <div class="field full">
                    <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', $classroom->academic_year_id) === $year->id)>
                                {{ $year->label }}
                            </option>
                        @endforeach
                    </select>
                    @error('academic_year_id') <div class="error-text">{{ $message }}</div> @enderror
                </div>

                <div class="field">
                    <label for="level">ระดับชั้น ม.</label>
                    <input id="level" type="number" min="1" max="6" name="level" value="{{ old('level', $classroom->level) }}" placeholder="เช่น 1">
                    @error('level') <div class="error-text">{{ $message }}</div> @enderror
                </div>

                <div class="field">
                    <label for="room">ห้อง</label>
                    <input id="room" type="number" min="1" max="99" name="room" value="{{ old('room', $classroom->room) }}" placeholder="เช่น 1">
                    @error('room') <div class="error-text">{{ $message }}</div> @enderror
                </div>

                <div class="field">
                    <label for="name">ชื่อห้องที่แสดง</label>
                    <input id="name" name="name" value="{{ old('name', $classroom->name) }}" placeholder="เช่น ม.1/1 หรือ ม.2">
                    @error('name') <div class="error-text">{{ $message }}</div> @enderror
                </div>

                <div class="field">
                    <label for="advisor_ids">ครูที่ปรึกษา</label>
                    <select id="advisor_ids" name="advisor_ids[]" multiple>
                        @foreach ($teachers as $teacher)
                            <option value="{{ $teacher->id }}" @selected(in_array($teacher->id, array_map('intval', (array) $selectedAdvisorIds), true))>
                                {{ $teacher->teacher_code }} - {{ $teacher->full_name }}
                            </option>
                        @endforeach
                    </select>
                    <div class="hint">เลือกครูได้หลายคน แต่ครู 1 คนเป็นที่ปรึกษาได้เพียง 1 ห้องต่อปี/เทอม คนแรกที่เลือกจะเป็นครูหลักของห้อง</div>
                    @error('advisor_ids') <div class="error-text">{{ $message }}</div> @enderror
                    @error('advisor_ids.*') <div class="error-text">{{ $message }}</div> @enderror
                </div>
            </div>
        </div>

        <div class="form-actions">
            <a class="btn secondary" href="{{ route('classrooms.index') }}">กลับ</a>
            <button class="btn" type="submit">บันทึก</button>
        </div>
    </form>
@endsection