@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 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; }
        .visit-status { display: inline-flex; border-radius: 999px; padding: 4px 10px; font-size: 13px; font-weight: 600; }
        .visit-status.done { background: #ecfdf3; color: #067647; }
        .visit-status.wait { background: #fff4ed; color: #b54708; }
        .small-muted { color: var(--muted); font-size: 13px; }
        .split-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 16px; margin-top: 18px; }
        .mini-table { min-width: 0; }
        .mini-table th, .mini-table td { padding: 10px 12px; }
        @media (max-width: 860px) {
            .filter-panel { grid-template-columns: 1fr; }
            .summary-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
            .split-grid { grid-template-columns: 1fr; }
        }
    </style>

    <h1 class="page-title">เยี่ยมบ้าน</h1>
    <p class="page-subtitle">เลือกปี/เทอมและห้องเรียน แล้วบันทึกข้อมูลเยี่ยมบ้านเป็นรายคน</p>

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

    <form class="card filter-panel no-print" method="get" action="{{ route('home-visits.index') }}">
        <div class="field">
            <label for="academic_year_id">ปีการศึกษา / เทอม</label>
            <select id="academic_year_id" name="academic_year_id">
                @foreach ($academicYears as $year)
                    <option value="{{ $year->id }}" @selected(optional($selectedAcademicYear)->id === $year->id)>
                        {{ $year->label }}
                    </option>
                @endforeach
            </select>
        </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 (! $selectedAcademicYear || ! $selectedClassroom)
        <div class="card">
            <h2 style="margin:0 0 6px;">ยังไม่มีห้องเรียนสำหรับบันทึกเยี่ยมบ้าน</h2>
            <p class="page-subtitle">เมื่อมีปีการศึกษาและห้องเรียนแล้ว หน้านี้จะแสดงรายชื่อนักเรียนให้บันทึกทันที</p>
        </div>
    @else
        <div class="summary-row">
            <div class="summary-chip"><strong>{{ $summary['total'] }}</strong><span>นักเรียนในห้อง</span></div>
            <div class="summary-chip"><strong>{{ $summary['visited'] }}</strong><span>เยี่ยมแล้ว</span></div>
            <div class="summary-chip"><strong>{{ $summary['remaining'] }}</strong><span>ยังไม่เยี่ยม</span></div>
            <div class="summary-chip"><strong>{{ $summary['with_photos'] }}</strong><span>มีรูปแนบ</span></div>
        </div>

        <div class="card" style="margin-bottom:18px;">
            <div style="display:flex;justify-content:space-between;gap:12px;align-items:end;flex-wrap:wrap;">
                <div>
                    <h2 style="margin:0;">{{ $selectedClassroom->name }}</h2>
                    <p class="page-subtitle">
                        {{ $selectedAcademicYear->label }}
                        | ครูที่ปรึกษา {{ $selectedClassroom->advisor_names }}
                    </p>
                </div>
                <span class="badge">{{ $summary['percent'] }}% เยี่ยมแล้ว</span>
            </div>
        </div>

        <div class="table-wrap">
            <table>
                <thead>
                    <tr>
                        <th style="width:80px;">เลขที่</th>
                        <th>นักเรียน</th>
                        <th style="width:140px;">สถานะ</th>
                        <th style="width:120px;">รูปแนบ</th>
                        <th style="width:160px;">วันที่เยี่ยม</th>
                        <th style="width:130px;"></th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($selectedClassroom->students as $student)
                        @php $visit = $visits->get($student->id); @endphp
                        <tr>
                            <td>{{ $student->pivot->student_number ?? '-' }}</td>
                            <td>
                                <strong>{{ $student->full_name }}</strong>
                                <div class="small-muted">{{ $student->student_code }}</div>
                            </td>
                            <td>
                                @if ($visit)
                                    <span class="visit-status done">เยี่ยมแล้ว</span>
                                @else
                                    <span class="visit-status wait">ยังไม่เยี่ยม</span>
                                @endif
                            </td>
                            <td>{{ $visit?->has_photos ? 'มี' : '-' }}</td>
                            <td>{{ $visit?->visit_date?->format('Y-m-d') ?? '-' }}</td>
                            <td>
                                <a class="btn secondary" href="{{ route('home-visits.edit', [$selectedClassroom, $student]) }}">
                                    {{ $visit ? 'แก้ไข' : 'บันทึก' }}
                                </a>
                            </td>
                        </tr>
                    @empty
                        <tr><td colspan="6">ยังไม่มีนักเรียนในห้องนี้</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <div class="split-grid">
            <div class="table-wrap">
                <table class="mini-table">
                    <thead>
                        <tr>
                            <th>ระดับชั้น</th>
                            <th>นักเรียน</th>
                            <th>เยี่ยมแล้ว</th>
                            <th>มีรูป</th>
                            <th>ร้อยละ</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($summaryByLevel as $row)
                            <tr>
                                <td>ม.{{ $row['level'] }}</td>
                                <td>{{ $row['total'] }}</td>
                                <td>{{ $row['visited'] }}</td>
                                <td>{{ $row['with_photos'] }}</td>
                                <td>{{ $row['percent'] }}%</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            <div class="table-wrap">
                <table class="mini-table">
                    <thead>
                        <tr>
                            <th>ประเภทที่อยู่อาศัย</th>
                            <th>จำนวน</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($homeTypes as $type => $label)
                            <tr>
                                <td>{{ $label }}</td>
                                <td>{{ $homeTypeSummary[$type] ?? 0 }}</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    @endif
@endsection