@extends('layouts.app')

@php
    $pageTitle = 'Dashboard';
    $hours = fn ($value) => rtrim(rtrim(number_format((float) $value, 2), '0'), '.');
@endphp

@section('content')

<div class="pd-eyebrow mb-2">
    {{ $schoolYear?->name ?? 'No School Year' }}
    <span class="pd-sep">&bull;</span>
    {{ $term?->name ?? 'No Term' }}
</div>

@if (!$schoolYear || !$term)
    <div class="card content-card">
        <div class="card-body p-3 text-center text-muted">
            No active School Year and Term is set, so there is nothing to show yet.
        </div>
    </div>
@else
    <div class="pd-stat-grid mb-2">
        <div class="pd-stat">
            <div class="pd-stat-icon pd-icon-success"><i class="bi bi-check2-circle"></i></div>
            <div class="pd-stat-value">{{ $completionPercent }}%</div>
            <div class="pd-stat-label">Schedules Complete</div>
        </div>
        <div class="pd-stat">
            <div class="pd-stat-icon pd-icon-primary"><i class="bi bi-diagram-3"></i></div>
            <div class="pd-stat-value">{{ $totalSections }}</div>
            <div class="pd-stat-label">Sections</div>
        </div>
        <div class="pd-stat">
            <div class="pd-stat-icon pd-icon-info"><i class="bi bi-person-check"></i></div>
            <div class="pd-stat-value">{{ $activeTeachers }}</div>
            <div class="pd-stat-label">Active Teachers</div>
        </div>
        <div class="pd-stat">
            <div class="pd-stat-icon pd-icon-warning"><i class="bi bi-calendar2-check"></i></div>
            <div class="pd-stat-value">{{ $totalClasses }}</div>
            <div class="pd-stat-label">Classes per Week</div>
        </div>
        <div class="pd-stat">
            <div class="pd-stat-icon pd-icon-purple"><i class="bi bi-clock-history"></i></div>
            <div class="pd-stat-value">{{ $hours($weeklyHours) }}</div>
            <div class="pd-stat-label">Hours per Week</div>
        </div>
    </div>

    <div class="row g-2 mb-2">
        {{-- Completion by grade level --}}
        <div class="col-12 col-xl-7">
            <div class="card content-card h-100">
                <div class="card-body p-3">
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <h6 class="pd-card-title mb-0">Schedule Completion</h6>
                        <span class="pd-muted">{{ $completedSections }} of {{ $totalSections }} sections complete</span>
                    </div>

                    @forelse ($gradeSummaries as $grade)
                        @php
                            $total = max($grade['total'], 1);
                        @endphp
                        <div class="pd-grade">
                            <div class="d-flex justify-content-between align-items-center mb-1">
                                <a href="{{ route('teacher.schedules.index', ['view' => 'section', 'grade_level_id' => $grade['gradeLevel']->id]) }}" class="pd-grade-name">
                                    {{ $grade['gradeLevel']->name }}
                                </a>
                                <span class="pd-muted">{{ $grade['complete'] }} / {{ $grade['total'] }}</span>
                            </div>
                            <div class="progress pd-progress" role="progressbar" aria-label="{{ $grade['gradeLevel']->name }} completion">
                                <div class="progress-bar bg-success" style="width: {{ $grade['complete'] / $total * 100 }}%"></div>
                                <div class="progress-bar bg-warning" style="width: {{ $grade['incomplete'] / $total * 100 }}%"></div>
                                <div class="progress-bar bg-danger" style="width: {{ $grade['empty'] / $total * 100 }}%"></div>
                            </div>
                        </div>
                    @empty
                        <div class="pd-empty">No active grade levels.</div>
                    @endforelse

                    <div class="pd-legend">
                        <span><i class="pd-dot bg-success"></i>Complete</span>
                        <span><i class="pd-dot bg-warning"></i>Incomplete</span>
                        <span><i class="pd-dot bg-danger"></i>Not started</span>
                    </div>
                </div>
            </div>
        </div>

        {{-- Readiness snapshot --}}
        <div class="col-12 col-xl-5">
            <div class="card content-card h-100">
                <div class="card-body p-3">
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <h6 class="pd-card-title mb-0">Scheduling Readiness</h6>
                        <a href="{{ route('principal.insights', ['tab' => 'readiness']) }}" class="pd-link">Details</a>
                    </div>

                    <div class="pd-check">
                        <i class="bi {{ $readiness['subjects_no_teacher'] > 0 ? 'bi-x-circle-fill text-danger' : 'bi-check-circle-fill text-success' }}"></i>
                        <span>Subject Coverage</span>
                        <strong>{{ $readiness['subjects_no_teacher'] > 0 ? $readiness['subjects_no_teacher'] . ' without a teacher' : 'All covered' }}</strong>
                    </div>
                    <div class="pd-check">
                        <i class="bi {{ $readiness['room_shortfall'] ? 'bi-x-circle-fill text-danger' : 'bi-check-circle-fill text-success' }}"></i>
                        <span>Specialized Rooms</span>
                        <strong>{{ $readiness['room_shortfall'] ? 'Short on capacity' : 'Sufficient' }}</strong>
                    </div>
                    <div class="pd-check">
                        <i class="bi {{ $readiness['sections_grid_blocked'] > 0 ? 'bi-x-circle-fill text-danger' : 'bi-check-circle-fill text-success' }}"></i>
                        <span>Section Grid Capacity</span>
                        <strong>{{ $readiness['sections_grid_blocked'] > 0 ? $readiness['sections_grid_blocked'] . ' blocked' : 'All schedulable' }}</strong>
                    </div>
                    <div class="pd-check">
                        <i class="bi {{ $idleTeachers > 0 ? 'bi-exclamation-circle-fill text-warning' : 'bi-check-circle-fill text-success' }}"></i>
                        <span>Teacher Assignment</span>
                        <strong>{{ $idleTeachers > 0 ? $idleTeachers . ' with no classes' : 'All assigned' }}</strong>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row g-2 mb-2">
        {{-- Sections to watch --}}
        <div class="col-12 col-xl-7">
            <div class="card content-card h-100">
                <div class="card-body p-3">
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <h6 class="pd-card-title mb-0">Sections Not Yet Complete</h6>
                        <span class="pd-muted">{{ $sectionsToWatch->count() }}</span>
                    </div>

                    <div class="pd-list">
                        @forelse ($sectionsToWatch as $row)
                            <a href="{{ route('teacher.schedules.index', ['view' => 'section', 'grade_level_id' => $row['section']->grade_level_id, 'section_id' => $row['section']->id]) }}" class="pd-list-item">
                                <i class="pd-dot {{ $row['status'] === 'empty' ? 'bg-danger' : 'bg-warning' }}"></i>
                                <span class="flex-grow-1 text-truncate">{{ $row['section']->gradeLevel?->name }} &ndash; {{ $row['section']->name }}</span>
                                <span class="pd-muted">{{ $row['status'] === 'empty' ? 'Not started' : 'Incomplete' }}</span>
                                <i class="bi bi-chevron-right pd-chevron"></i>
                            </a>
                        @empty
                            <div class="pd-empty">
                                <i class="bi bi-check-circle text-success"></i>
                                Every section is fully scheduled.
                            </div>
                        @endforelse
                    </div>
                </div>
            </div>
        </div>

        {{-- Highest teacher loads --}}
        <div class="col-12 col-xl-5">
            <div class="card content-card h-100">
                <div class="card-body p-3">
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <h6 class="pd-card-title mb-0">Highest Teacher Loads</h6>
                        <a href="{{ route('principal.insights', ['tab' => 'load']) }}" class="pd-link">All teachers</a>
                    </div>

                    @php
                        $maxLoad = max((float) ($topTeachers->first()['assigned_hours'] ?? 0), 1);
                    @endphp

                    @forelse ($topTeachers as $row)
                        <div class="pd-load">
                            <div class="d-flex justify-content-between mb-1">
                                <a href="{{ route('teacher.schedules.index', ['view' => 'teacher', 'teacher_id' => $row['teacher']->id]) }}" class="pd-load-name text-truncate">
                                    {{ $row['teacher']->full_name }}
                                </a>
                                <span class="pd-muted text-nowrap">{{ $hours($row['assigned_hours']) }} hrs/wk</span>
                            </div>
                            <div class="progress pd-progress-thin">
                                <div class="progress-bar" style="width: {{ $row['assigned_hours'] / $maxLoad * 100 }}%"></div>
                            </div>
                        </div>
                    @empty
                        <div class="pd-empty">No classes have been assigned this term.</div>
                    @endforelse
                </div>
            </div>
        </div>
    </div>

    {{-- Quick links (read-only portal pages only) --}}
    <div class="card content-card">
        <div class="card-body p-3">
            <h6 class="pd-card-title mb-2">Quick Links</h6>
            <div class="pd-links">
                <a href="{{ route('teacher.schedules.index', ['view' => 'section']) }}" class="pd-quick">
                    <span class="pd-quick-icon"><i class="bi bi-calendar3"></i></span>
                    <span>Section Schedules</span>
                </a>
                <a href="{{ route('teacher.schedules.index', ['view' => 'teacher']) }}" class="pd-quick">
                    <span class="pd-quick-icon"><i class="bi bi-people-fill"></i></span>
                    <span>Teachers</span>
                </a>
                <a href="{{ route('principal.insights', ['tab' => 'load']) }}" class="pd-quick">
                    <span class="pd-quick-icon"><i class="bi bi-speedometer2"></i></span>
                    <span>Teacher Load</span>
                </a>
                <a href="{{ route('principal.insights', ['tab' => 'hours']) }}" class="pd-quick">
                    <span class="pd-quick-icon"><i class="bi bi-clock-history"></i></span>
                    <span>Subject Hours</span>
                </a>
            </div>
        </div>
    </div>
@endif

<style>
    .pd-eyebrow { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #898781; }
    .pd-sep { margin: 0 6px; color: #d1d0c9; }
    .pd-card-title { font-size: 0.92rem; font-weight: 600; color: #111827; }
    .pd-muted { font-size: 0.75rem; color: #6b7280; }
    .pd-link { font-size: 0.75rem; font-weight: 500; text-decoration: none; }

    .pd-stat-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
    .pd-stat { background: #fff; border-radius: 12px; box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06); padding: 10px 12px; }
    .pd-stat-icon { width: 28px; height: 28px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-size: 0.85rem; margin-bottom: 6px; }
    .pd-icon-success { background: #e7f8e7; color: #0ca30c; }
    .pd-icon-primary { background: #e8eefc; color: #2563eb; }
    .pd-icon-info { background: #e0f7fa; color: #0891b2; }
    .pd-icon-purple { background: #f1e9fe; color: #7c3aed; }
    .pd-icon-warning { background: #fef3e2; color: #d97706; }
    .pd-stat-value { font-size: 1.05rem; font-weight: 700; color: #111827; line-height: 1.15; }
    .pd-stat-label { font-size: 0.7rem; color: #6b7280; }

    .pd-grade + .pd-grade { margin-top: 12px; }
    .pd-grade-name { font-size: 0.82rem; font-weight: 600; color: #111827; text-decoration: none; }
    .pd-grade-name:hover { color: #2563eb; }
    .pd-progress { height: 10px; border-radius: 999px; background: #eef0f3; }
    .pd-progress-thin { height: 6px; border-radius: 999px; background: #eef0f3; }
    .pd-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px; font-size: 0.72rem; color: #6b7280; }
    .pd-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; flex-shrink: 0; }

    .pd-check { display: flex; align-items: center; gap: 8px; padding: 7px 0; font-size: 0.8rem; color: #4b5563; }
    .pd-check + .pd-check { border-top: 1px solid #f1f3f6; }
    .pd-check strong { margin-left: auto; font-weight: 600; color: #111827; text-align: right; }

    .pd-list { max-height: 240px; overflow-y: auto; margin: 0 -6px; }
    .pd-list-item { display: flex; align-items: center; gap: 8px; padding: 7px 6px; border-radius: 8px; font-size: 0.8rem; color: #111827; text-decoration: none; }
    .pd-list-item:hover { background: #f5f7fb; }
    .pd-chevron { font-size: 0.7rem; color: #c1c5cc; }
    .pd-empty { padding: 18px 0; text-align: center; font-size: 0.8rem; color: #6b7280; }

    .pd-load + .pd-load { margin-top: 10px; }
    .pd-load-name { font-size: 0.8rem; color: #111827; text-decoration: none; min-width: 0; }
    .pd-load-name:hover { color: #2563eb; }

    .pd-links { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
    .pd-quick { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border: 1px solid #e5e7eb; border-radius: 10px; font-size: 0.8rem; font-weight: 600; color: #111827; text-decoration: none; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
    .pd-quick:hover { border-color: #c7d2fe; box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06); }
    .pd-quick-icon { width: 28px; height: 28px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: #e8eefc; color: #2563eb; flex-shrink: 0; }

    @media (max-width: 991.98px) {
        .pd-stat-grid { grid-template-columns: repeat(3, 1fr); }
        .pd-links { grid-template-columns: repeat(2, 1fr); }
    }

    @media (max-width: 575.98px) {
        .pd-stat-grid { grid-template-columns: repeat(2, 1fr); }
    }
</style>

@endsection