@extends('layouts.app')

@section('content')
    <style>
        .classroom-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin: 18px 0; }
        .room-tool { border: 1px solid var(--line); background: #fff; border-radius: 8px; padding: 14px; min-height: 94px; display: grid; gap: 8px; align-content: start; transition: .16s ease; }
        a.room-tool:hover { border-color: var(--blue); color: var(--blue); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(16, 24, 40, .08); }
        .tool-top { display: flex; align-items: center; gap: 10px; }
        .tool-icon { width: 34px; height: 34px; border-radius: 8px; background: var(--soft); color: var(--blue); display: grid; place-items: center; font-size: 12px; font-weight: 800; }
        .tool-title { font-weight: 700; line-height: 1.35; }
        .tool-sub { color: var(--muted); font-size: 13px; }
        .room-tool.pending { opacity: .68; }
        .room-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
    </style>

    <div class="toolbar">
        <div>
            <h1 class="page-title">{{ $classroom->name }}</h1>
            <p class="page-subtitle">{{ $classroom->academicYear->label ?? '-' }}</p>
            <div class="room-meta">
                <span class="badge">ครูที่ปรึกษา: {{ $classroom->advisor_names }}</span>
                <span class="badge">{{ $classroom->students->count() }} คน</span>
            </div>
        </div>
        <div style="display:flex;gap:10px;flex-wrap:wrap;">
            @if ((auth()->user()->role ?? '') === 'admin')
                <a class="btn secondary no-print" href="{{ route('classrooms.edit', $classroom) }}">แก้ไขห้อง</a>
                <a class="btn secondary no-print" href="{{ route('classrooms.roster.edit', $classroom) }}">จัดรายชื่อ</a>
            @endif
            <a class="btn no-print" href="{{ route('classrooms.print', $classroom) }}" target="_blank">พิมพ์รายชื่อ</a>
        </div>
    </div>

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

    <div class="portal-head">
        <div>
            <h2>งานของห้องนี้</h2>
            <p class="page-subtitle">เมนูที่ครูที่ปรึกษาใช้บ่อย รวมไว้ในหน้าห้องเดียว</p>
        </div>
    </div>

    <div class="classroom-actions no-print">
        <a class="room-tool" href="{{ route('classrooms.print', $classroom) }}" target="_blank">
            <div class="tool-top"><span class="tool-icon">PR</span><span class="tool-title">ใบรายชื่อนักเรียน</span></div>
            <div class="tool-sub">พิมพ์รายชื่อพร้อมเลขที่</div>
        </a>

        @if ((auth()->user()->role ?? '') === 'admin')
            <a class="room-tool" href="{{ route('classrooms.roster.edit', $classroom) }}">
                <div class="tool-top"><span class="tool-icon">ED</span><span class="tool-title">จัดรายชื่อในห้อง</span></div>
                <div class="tool-sub">เพิ่ม/ถอดนักเรียน และแก้เลขที่</div>
            </a>
        @endif

        <a class="room-tool" href="{{ route('hair-checks.index', ['classroom_id' => $classroom->id]) }}">
            <div class="tool-top"><span class="tool-icon">HC</span><span class="tool-title">บันทึกตรวจผม</span></div>
            <div class="tool-sub">เปิดบันทึกงานดูแลรายห้อง</div>
        </a>

        <a class="room-tool" href="{{ route('home-visits.index', ['academic_year_id' => $classroom->academic_year_id, 'classroom_id' => $classroom->id]) }}">
            <div class="tool-top"><span class="tool-icon">HV</span><span class="tool-title">เยี่ยมบ้าน</span></div>
            <div class="tool-sub">บันทึกและติดตามการเยี่ยมบ้าน</div>
        </a>

        <span class="room-tool pending">
            <div class="tool-top"><span class="tool-icon">RL</span><span class="tool-title">บทบาทของนักเรียนในห้อง</span></div>
            <div class="tool-sub">รอทำระบบย่อย</div>
        </span>

        <span class="room-tool pending">
            <div class="tool-top"><span class="tool-icon">PH</span><span class="tool-title">เบอร์โทร/ผู้ปกครอง</span></div>
            <div class="tool-sub">รอทำระบบข้อมูลผู้ปกครอง</div>
        </span>

        <span class="room-tool pending">
            <div class="tool-top"><span class="tool-icon">GR</span><span class="tool-title">รายงานคะแนน</span></div>
            <div class="tool-sub">รอทำระบบคะแนน/เกรด</div>
        </span>

        <span class="room-tool pending">
            <div class="tool-top"><span class="tool-icon">AB</span><span class="tool-title">ระบุสาเหตุการขาดเรียน</span></div>
            <div class="tool-sub">รอทำระบบมาเรียน/ขาดเรียน</div>
        </span>
    </div>

    <div class="table-wrap">
        <table>
            <thead>
                <tr>
                    <th>เลขที่</th>
                    <th>เลขประจำตัว</th>
                    <th>ชื่อ - นามสกุล</th>
                    <th>เพศ</th>
                    <th>โทรศัพท์</th>
                </tr>
            </thead>
            <tbody>
                @forelse ($classroom->students as $student)
                    <tr>
                        <td>{{ $student->pivot->student_number ?? '-' }}</td>
                        <td>{{ $student->student_code }}</td>
                        <td><a href="{{ route('students.show', $student) }}">{{ $student->full_name }}</a></td>
                        <td>{{ $student->gender ?? '-' }}</td>
                        <td>{{ $student->phone ?? '-' }}</td>
                    </tr>
                @empty
                    <tr><td colspan="5">ยังไม่มีนักเรียนในห้องนี้</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
@endsection