@extends('layouts.app')

@section('content')
    <style>
        .filter-panel { margin: 18px 0; display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; align-items: end; }
        .filter-panel .field label { color: var(--muted); font-size: 13px; }
        .filter-panel .field input, .filter-panel .field select { width: 100%; border: 1px solid #cfd8e3; border-radius: 8px; padding: 10px 12px; font: inherit; background: #fff; }
        .summary-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 16px 0; }
        .summary-chip { border: 1px solid var(--line); background: #fff; border-radius: 8px; padding: 12px; }
        .summary-chip strong { display: block; color: var(--blue); font-size: 24px; line-height: 1; margin-bottom: 4px; }
        .hair-form-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
        .student-name { font-weight: 600; }
        .student-code { color: var(--muted); font-size: 13px; margin-top: 2px; }
        .status-options { display: flex; flex-wrap: wrap; gap: 8px; }
        .status-option input { position: absolute; opacity: 0; pointer-events: none; }
        .status-option span { display: inline-flex; border: 1px solid #cfd8e3; border-radius: 999px; padding: 7px 11px; color: #475467; background: #fff; cursor: pointer; min-height: 36px; align-items: center; }
        .status-option input:checked + span { border-color: var(--blue); background: var(--soft); color: var(--blue); font-weight: 600; }
        .note-input { width: 100%; min-width: 180px; border: 1px solid #cfd8e3; border-radius: 8px; padding: 9px 10px; font: inherit; }
        .empty-state { margin-top: 18px; }
        @media (max-width: 860px) {
            .filter-panel { grid-template-columns: 1fr; }
            .summary-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
            .hair-form-head .btn { width: 100%; }
        }
    </style>

    <h1 class="page-title">บันทึกตรวจผม</h1>
    <p class="page-subtitle">เลือกวันที่และห้องเรียน แล้วบันทึกสถานะรายคนได้ในหน้าเดียว</p>

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

    @if ($errors->any())
        <div class="notice" style="background:#fff4ed;border-color:#fedf89;color:#b54708;">
            กรุณาตรวจสอบข้อมูลที่กรอกอีกครั้ง
        </div>
    @endif

    <form class="card filter-panel no-print" method="get" action="{{ route('hair-checks.index') }}">
        <div class="field">
            <label for="date">วันที่ตรวจ</label>
            <input id="date" type="date" name="date" value="{{ $date }}">
        </div>
        <div class="field">
            <label for="classroom_id">ห้องเรียน</label>
            <select id="classroom_id" name="classroom_id">
                @foreach ($classrooms as $classroom)
                    <option value="{{ $classroom->id }}" @selected(optional($selectedClassroom)->id === $classroom->id)>
                        {{ $classroom->name }}
                        - {{ $classroom->advisor_names }}
                    </option>
                @endforeach
            </select>
        </div>
        <button class="btn" type="submit">แสดงรายชื่อ</button>
    </form>

    @if (! $selectedClassroom)
        <div class="card empty-state">
            <h2 style="margin:0 0 6px;">ยังไม่มีห้องเรียนที่บันทึกได้</h2>
            <p class="page-subtitle">เมื่อมีข้อมูลห้องเรียนแล้ว หน้านี้จะแสดงรายชื่อนักเรียนให้บันทึกทันที</p>
        </div>
    @else
        <div class="summary-row">
            @foreach ($statuses as $status => $label)
                <div class="summary-chip">
                    <strong>{{ $summary[$status] ?? 0 }}</strong>
                    <span>{{ $label }}</span>
                </div>
            @endforeach
        </div>

        <form method="post" action="{{ route('hair-checks.store') }}">
            @csrf
            <input type="hidden" name="classroom_id" value="{{ $selectedClassroom->id }}">
            <input type="hidden" name="date" value="{{ $date }}">

            <div class="hair-form-head">
                <div>
                    <h2 style="margin:0;">{{ $selectedClassroom->name }}</h2>
                    <p class="page-subtitle">
                        {{ $selectedClassroom->students->count() }} คน
                        | ครูที่ปรึกษา {{ $selectedClassroom->advisor_names }}
                    </p>
                </div>
                <button class="btn no-print" type="submit">บันทึกข้อมูล</button>
            </div>

            <div class="table-wrap">
                <table>
                    <thead>
                        <tr>
                            <th style="width:80px;">เลขที่</th>
                            <th>นักเรียน</th>
                            <th style="width:360px;">สถานะ</th>
                            <th style="width:260px;">หมายเหตุ</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($selectedClassroom->students as $student)
                            @php
                                $check = $checks->get($student->id);
                                $currentStatus = old("checks.{$student->id}.status", $check->status ?? 'normal');
                                $currentNote = old("checks.{$student->id}.note", $check->note ?? '');
                            @endphp
                            <tr>
                                <td>{{ $student->pivot->student_number ?? '-' }}</td>
                                <td>
                                    <div class="student-name">{{ $student->full_name }}</div>
                                    <div class="student-code">{{ $student->student_code }}</div>
                                    <input type="hidden" name="checks[{{ $student->id }}][student_id]" value="{{ $student->id }}">
                                </td>
                                <td>
                                    <div class="status-options">
                                        @foreach ($statuses as $status => $label)
                                            <label class="status-option">
                                                <input type="radio" name="checks[{{ $student->id }}][status]" value="{{ $status }}" @checked($currentStatus === $status)>
                                                <span>{{ $label }}</span>
                                            </label>
                                        @endforeach
                                    </div>
                                </td>
                                <td>
                                    <input class="note-input" name="checks[{{ $student->id }}][note]" value="{{ $currentNote }}" placeholder="เช่น นัดแก้ไข">
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="4">ยังไม่มีนักเรียนในห้องนี้</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </form>
    @endif
@endsection