@extends('layouts.app')

@php
    $pageTitle = 'Teacher Management';
@endphp

@section('page-nav')
    <button type="button" class="page-nav-link active" data-target="tab-directory">Teacher Directory</button>
    <button type="button" class="page-nav-link" data-target="tab-assignments">Teaching Assignments</button>
    <button type="button" class="page-nav-link" data-target="tab-load">Load Monitoring</button>
@endsection

@section('content')

<div class="teachers-page">

<div class="teacher-stats-bar">
    <div class="stat-item">
        <div class="stat-icon stat-icon-primary">
            <i class="bi bi-people"></i>
        </div>
        <div>
            <div class="stat-value">{{ $summary['total_teachers'] ?? 0 }}</div>
            <div class="stat-label">Total Teachers</div>
        </div>
    </div>

    <div class="stat-divider"></div>

    <div class="stat-item">
        <div class="stat-icon stat-icon-success">
            <i class="bi bi-person-check"></i>
        </div>
        <div>
            <div class="stat-value">{{ $summary['assigned_teachers'] ?? 0 }}</div>
            <div class="stat-label">Assigned Teachers</div>
        </div>
    </div>

    <div class="stat-divider"></div>

    <div class="stat-item">
        <div class="stat-icon stat-icon-danger">
            <i class="bi bi-person-dash"></i>
        </div>
        <div>
            <div class="stat-value">{{ $summary['unassigned_teachers'] ?? 0 }}</div>
            <div class="stat-label">Unassigned Teachers</div>
        </div>
    </div>
</div>

<div class="card content-card tp-card tab-pane active" id="tab-directory">
    <div class="card-body">
        <div class="d-flex justify-content-end align-items-center flex-wrap gap-2 mb-2">
            <button class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#addTeacherModal">
                <i class="bi bi-plus-lg me-1"></i> Add Teacher
            </button>
        </div>

        <form method="GET" action="{{ route('teachers.index') }}" class="row g-2 mb-2">
            <div class="col-12 col-md-6 col-lg-5">
                <div class="input-group input-group-sm">
                    <span class="input-group-text bg-white">
                        <i class="bi bi-search"></i>
                    </span>
                    <input
                        type="text"
                        name="search"
                        class="form-control"
                        id="teacherSearchInput"
                        value="{{ $search ?? '' }}"
                        placeholder="Search teacher by name, employee no., or room">
                    <button class="btn btn-outline-secondary" type="submit">Search</button>
                </div>
            </div>
            <div class="col-12 col-md-4 col-lg-3">
                @include('teachers._grade-filter')
            </div>
        </form>

        <div class="table-responsive">
            <table class="table align-middle" id="teacherDirectoryTable">
                <thead class="table-light">
                    <tr>
                        <th>Employee No.</th>
                        <th>Name</th>
                        <th>Faculty / Grade</th>
                        <th>Contact</th>
                        <th>Weekly Load</th>
                        <th>Current Room</th>
                        <th>Status</th>
                        <th class="text-end">Action</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($teacherDirectory as $directoryItem)
                        @php
                            $teacher = $directoryItem['teacher'];
                            $currentSchedule = $directoryItem['current_schedule'];
                        @endphp
                        <tr class="grade-filter-row" data-grade="{{ $teacher->grade_level_id ?? 'none' }}">
                            <td>{{ $teacher->employee_number }}</td>
                            <td>
                                <div class="fw-semibold">{{ $teacher->full_name }}</div>
                                <div class="text-muted small">{{ $teacher->email ?: 'No email provided' }}</div>
                            </td>
                            <td>{{ $teacher->gradeLevel?->name ?? '—' }}</td>
                            <td>{{ $teacher->contact_number ?: '—' }}</td>
                            <td>{{ number_format((float) $directoryItem['assigned_hours'], 2) }} hours</td>
                            <td>
                                @if ($currentSchedule)
                                    <div class="fw-semibold">{{ $directoryItem['current_room_name'] }}</div>
                                    <div class="text-muted small">{{ $directoryItem['current_room_meta'] }}</div>
                                @else
                                    <div class="fw-semibold text-muted">No active class</div>
                                    <div class="text-muted small">{{ $directoryItem['current_room_meta'] }}</div>
                                @endif
                            </td>
                            <td>
                                <span class="badge {{ $teacher->is_active ? 'text-bg-success' : 'text-bg-secondary' }}">
                                    {{ $teacher->is_active ? 'Active' : 'Inactive' }}
                                </span>
                            </td>
                            <td class="text-end">
                                <div class="dropdown">
                                    <button class="btn btn-sm btn-outline-secondary" type="button" data-bs-toggle="dropdown">
                                        Manage
                                    </button>
                                    <ul class="dropdown-menu dropdown-menu-end">
                                        <li>
                                            <button
                                                type="button"
                                                class="dropdown-item"
                                                data-bs-toggle="modal"
                                                data-bs-target="#editTeacherModal{{ $teacher->id }}">
                                                Edit Record
                                            </button>
                                        </li>
                                        <li>
                                            <form method="POST" action="{{ route('teachers.records.reset-password', $teacher) }}"
                                                data-confirm="Reset the password for {{ $teacher->full_name }}? Their current password stops working and they must set a new one on next login."
                                                data-confirm-text="Reset Password"
                                                data-confirm-variant="warning">
                                                @csrf
                                                <button type="submit" class="dropdown-item">Reset Password</button>
                                            </form>
                                        </li>
                                        <li><hr class="dropdown-divider"></li>
                                        <li>
                                            <form method="POST" action="{{ route('teachers.records.destroy', $teacher) }}"
                                                data-confirm="{{ $teacher->all_schedules_count > 0
                                                    ? 'Delete ' . $teacher->full_name . '? They are assigned to ' . $teacher->all_schedules_count . ' schedule ' . Str::plural('entry', $teacher->all_schedules_count) . '. Those entries will be kept but left with no teacher assigned.'
                                                    : 'Delete ' . $teacher->full_name . '?' }}"
                                                data-confirm-text="Delete">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="dropdown-item text-danger">Delete</button>
                                            </form>
                                        </li>
                                    </ul>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="8" class="text-center text-muted py-4">No teacher records found.</td>
                        </tr>
                    @endforelse
                    <tr class="grade-filter-empty d-none">
                        <td colspan="8" class="text-center text-muted py-4">No teachers found for this grade level.</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

<div class="card content-card tp-card tab-pane" id="tab-assignments">
    <div class="card-body">
        <div class="d-flex flex-wrap gap-2 mb-2">
            <div class="input-group input-group-sm" style="max-width: 340px;">
                <span class="input-group-text bg-white">
                    <i class="bi bi-search"></i>
                </span>
                <input
                    type="text"
                    id="assignmentSearchInput"
                    class="form-control"
                    placeholder="Search teacher by name or employee no.">
            </div>
            <div style="min-width: 200px;">
                @include('teachers._grade-filter')
            </div>
        </div>

        <div class="table-responsive">
            <table class="table align-middle" id="teacherAssignmentsTable">
                <thead class="table-light">
                    <tr>
                        <th>Employee No.</th>
                        <th>Name</th>
                        <th>Faculty / Grade</th>
                        <th>Assigned Subjects</th>
                        <th class="text-end">Action</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($teachers as $teacher)
                        @php
                            $assignedSubjectNames = $teacher->teacherSubjects
                                ->map(fn ($teacherSubject) => $teacherSubject->subject?->name)
                                ->filter()
                                ->values();
                            $visibleSubjectNames = $assignedSubjectNames->take(2);
                            $remainingSubjectCount = $assignedSubjectNames->count() - $visibleSubjectNames->count();
                        @endphp
                        <tr class="assignment-row grade-filter-row" data-grade="{{ $teacher->grade_level_id ?? 'none' }}" data-search="{{ strtolower($teacher->full_name . ' ' . $teacher->employee_number) }}">
                            <td>{{ $teacher->employee_number }}</td>
                            <td class="fw-semibold">{{ $teacher->full_name }}</td>
                            <td>{{ $teacher->gradeLevel?->name ?? '—' }}</td>
                            <td>
                                @if ($assignedSubjectNames->isEmpty())
                                    <span class="text-muted small">No subject assignments yet.</span>
                                @else
                                    <span class="small">{{ $visibleSubjectNames->implode(', ') }}</span>
                                    @if ($remainingSubjectCount > 0)
                                        <button
                                            type="button"
                                            class="btn-view-all"
                                            data-bs-toggle="modal"
                                            data-bs-target="#assignSubjectModal{{ $teacher->id }}">
                                            View all ({{ $assignedSubjectNames->count() }})
                                        </button>
                                    @endif
                                @endif
                            </td>
                            <td class="text-end">
                                <button
                                    type="button"
                                    class="btn btn-outline-primary btn-sm"
                                    data-bs-toggle="modal"
                                    data-bs-target="#assignSubjectModal{{ $teacher->id }}">
                                    Assign
                                </button>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="5" class="text-center text-muted py-4">No teachers available for subject assignment.</td>
                        </tr>
                    @endforelse
                    <tr class="grade-filter-empty d-none">
                        <td colspan="5" class="text-center text-muted py-4">No teachers found for this grade level.</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

<div class="card content-card tp-card tab-pane" id="tab-load">
    <div class="card-body">
        <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-2">
            <div style="min-width: 200px;">
                @include('teachers._grade-filter')
            </div>
            <div class="d-flex align-items-center flex-wrap gap-2">
                <span class="text-muted small">Computed teaching load based on assigned schedules in the active term.</span>
                <span class="badge text-bg-light border">
                    {{ $activeTerm?->name ?? 'No Active Term' }}
                </span>
            </div>
        </div>

        <div class="table-responsive">
            <table class="table align-middle">
                <thead class="table-light">
                    <tr>
                        <th>Teacher</th>
                        <th>Faculty / Grade</th>
                        <th>Weekly Load</th>
                        <th>Mon</th>
                        <th>Tue</th>
                        <th>Wed</th>
                        <th>Thu</th>
                        <th>Fri</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($loadMonitoring as $loadItem)
                        <tr class="grade-filter-row" data-grade="{{ $loadItem['teacher']->grade_level_id ?? 'none' }}">
                            <td>{{ $loadItem['teacher']->full_name }}</td>
                            <td>{{ $loadItem['teacher']->gradeLevel?->name ?? '—' }}</td>
                            <td class="fw-semibold">{{ number_format((float) $loadItem['assigned_hours'], 2) }} hours</td>
                            <td>{{ number_format((float) $loadItem['daily_hours']['monday'], 2) }}</td>
                            <td>{{ number_format((float) $loadItem['daily_hours']['tuesday'], 2) }}</td>
                            <td>{{ number_format((float) $loadItem['daily_hours']['wednesday'], 2) }}</td>
                            <td>{{ number_format((float) $loadItem['daily_hours']['thursday'], 2) }}</td>
                            <td>{{ number_format((float) $loadItem['daily_hours']['friday'], 2) }}</td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="8" class="text-center text-muted py-4">No load monitoring data available.</td>
                        </tr>
                    @endforelse
                    <tr class="grade-filter-empty d-none">
                        <td colspan="8" class="text-center text-muted py-4">No teachers found for this grade level.</td>
                    </tr>
                </tbody>
            </table>
        </div>

        <div class="mt-2 text-muted small">
            There is no configured load cap - weekly and daily load are computed directly from this term's assigned schedule entries. A teacher can only be blocked from a slot by an actual scheduling conflict.
        </div>
    </div>
</div>

</div>

<script>
// Tabs reset to their markup default (Teacher Directory) on every full page
// reload. Restore the remembered tab here, inline right after the last tab
// pane, so it runs while the page is still being parsed - before the
// browser paints the markup default - same pattern as Admin Settings and
// Academic Setup. This is also how the Setup Guide deep-links into a
// specific tab (e.g. Teaching Assignments) via sessionStorage before
// navigating here.
(function () {
    var stored = sessionStorage.getItem('teachersActiveTab');
    if (!stored) {
        return;
    }

    var pane = document.getElementById(stored);
    var link = document.querySelector('.page-nav-link[data-target="' + stored + '"]');
    if (!pane || !link) {
        return;
    }

    document.querySelectorAll('.tab-pane').forEach(function (p) { p.classList.remove('active'); });
    document.querySelectorAll('.page-nav-link').forEach(function (l) { l.classList.remove('active'); });
    pane.classList.add('active');
    link.classList.add('active');
})();
</script>

{{-- TEACHER LOGIN CREDENTIALS (after create / password reset) --}}
@if (session('teacher_credentials'))
    @php $credentials = session('teacher_credentials'); @endphp
    <div class="modal fade" id="teacherCredentialsModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title"><i class="bi bi-check-circle-fill text-success me-2"></i>{{ $credentials['title'] }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <p class="mb-3">{{ $credentials['teacher'] }}</p>
                    <div class="mb-3">
                        <label class="form-label">Username</label>
                        <div class="input-group">
                            <input type="text" class="form-control" value="{{ $credentials['login'] }}" readonly>
                            <button type="button" class="btn btn-outline-secondary" data-copy="{{ $credentials['login'] }}" title="Copy username"><i class="bi bi-clipboard"></i></button>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Temporary Password</label>
                        <div class="input-group">
                            <input type="text" class="form-control" value="{{ $credentials['password'] }}" readonly>
                            <button type="button" class="btn btn-outline-secondary" data-copy="{{ $credentials['password'] }}" title="Copy password"><i class="bi bi-clipboard"></i></button>
                        </div>
                    </div>
                    <div class="text-muted small">Password {{ $credentials['note'] }}.</div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Done</button>
                </div>
            </div>
        </div>
    </div>
@endif

{{-- ADD TEACHER --}}
<div class="modal fade" id="addTeacherModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-scrollable">
        <div class="modal-content">
            <form method="POST" action="{{ route('teachers.records.store') }}">
                @csrf
                <div class="modal-header">
                    <h5 class="modal-title">Add Teacher</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="row g-3">
                        <div class="col-md-4">
                            <label class="form-label">Employee Number</label>
                            <input type="text" name="employee_number" class="form-control" required>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">First Name</label>
                            <input type="text" name="first_name" class="form-control" required>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Middle Name</label>
                            <input type="text" name="middle_name" class="form-control">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Last Name</label>
                            <input type="text" name="last_name" class="form-control" required>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Sex</label>
                            <select name="sex" class="form-select">
                                <option value="">Select sex</option>
                                <option value="male">Male</option>
                                <option value="female">Female</option>
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Faculty</label>
                            <select name="grade_level_id" class="form-select">
                                <option value="">Not grade-specific</option>
                                @foreach ($gradeLevels as $gradeLevel)
                                    <option value="{{ $gradeLevel->id }}">{{ $gradeLevel->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Contact Number</label>
                            <input type="text" name="contact_number" class="form-control">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Email</label>
                            <input type="email" name="email" class="form-control">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Status</label>
                            <select name="is_active" class="form-select" required>
                                <option value="1" selected>Active</option>
                                <option value="0">Inactive</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-primary" type="submit">Save Teacher</button>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- EDIT TEACHER MODALS --}}
@foreach ($teachers as $teacher)
    <div class="modal fade" id="editTeacherModal{{ $teacher->id }}" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-scrollable">
            <div class="modal-content">
                <form method="POST" action="{{ route('teachers.records.update', $teacher) }}">
                    @csrf
                    @method('PUT')
                    <div class="modal-header">
                        <h5 class="modal-title">Edit Teacher</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <div class="row g-3">
                            <div class="col-md-4">
                                <label class="form-label">Employee Number</label>
                                <input type="text" name="employee_number" class="form-control" value="{{ $teacher->employee_number }}" required>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">First Name</label>
                                <input type="text" name="first_name" class="form-control" value="{{ $teacher->first_name }}" required>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Middle Name</label>
                                <input type="text" name="middle_name" class="form-control" value="{{ $teacher->middle_name }}">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Last Name</label>
                                <input type="text" name="last_name" class="form-control" value="{{ $teacher->last_name }}" required>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Sex</label>
                                <select name="sex" class="form-select">
                                    <option value="">Select sex</option>
                                    <option value="male" {{ $teacher->sex === 'male' ? 'selected' : '' }}>Male</option>
                                    <option value="female" {{ $teacher->sex === 'female' ? 'selected' : '' }}>Female</option>
                                </select>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Faculty</label>
                                <select name="grade_level_id" class="form-select">
                                    <option value="">Not grade-specific</option>
                                    @foreach ($gradeLevels as $gradeLevel)
                                        <option value="{{ $gradeLevel->id }}" {{ (int) $teacher->grade_level_id === $gradeLevel->id ? 'selected' : '' }}>{{ $gradeLevel->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Contact Number</label>
                                <input type="text" name="contact_number" class="form-control" value="{{ $teacher->contact_number }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Email</label>
                                <input type="email" name="email" class="form-control" value="{{ $teacher->email }}">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Status</label>
                                <select name="is_active" class="form-select" required>
                                    <option value="1" {{ $teacher->is_active ? 'selected' : '' }}>Active</option>
                                    <option value="0" {{ !$teacher->is_active ? 'selected' : '' }}>Inactive</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-primary" type="submit">Update Teacher</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endforeach

{{-- ASSIGN SUBJECT MODALS --}}
@foreach ($teachers as $teacher)
    <div class="modal fade" id="assignSubjectModal{{ $teacher->id }}" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-scrollable modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Manage Assignments — {{ $teacher->full_name }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="d-flex flex-wrap gap-2 mb-3">
                        <span class="badge text-bg-light border">
                            <i class="bi bi-calendar3 me-1"></i>{{ $activeTerm?->name ?? 'No active term' }}
                        </span>
                        <span class="badge text-bg-light border">
                            <i class="bi bi-mortarboard me-1"></i>{{ $teacher->gradeLevel?->name ?? 'No grade level set' }}
                        </span>
                    </div>

                    <div class="text-muted small mb-2">Current Assignments</div>

                    @if ($teacher->teacherSubjects->isNotEmpty())
                        <div class="d-flex flex-column gap-2 mb-4">
                            @foreach ($teacher->teacherSubjects as $teacherSubject)
                                <div class="d-flex justify-content-between align-items-center border rounded-3 px-3 py-2">
                                    <span class="small">{{ $teacherSubject->subject?->name }}</span>
                                    <form method="POST" action="{{ route('teachers.subject-assignments.destroy', $teacherSubject) }}"
                                        data-confirm="Remove this teaching assignment?" class="m-0">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="btn btn-sm p-0 border-0 bg-transparent text-danger">
                                            <i class="bi bi-trash"></i>
                                        </button>
                                    </form>
                                </div>
                            @endforeach
                        </div>
                    @else
                        <div class="text-muted small mb-4">No subject assignments yet.</div>
                    @endif

                    @php
                        // Own grade level first (bordered off from the rest
                        // below it), then the other grade levels in order.
                        // Each grade level heading appears exactly once, and
                        // only subjects live in the active term are offered
                        // at all. Subjects already assigned to this teacher
                        // stay visible but their checkbox is disabled.
                        $orderedGradeLevels = $teacher->grade_level_id
                            ? $gradeLevels->sortByDesc(fn ($gradeLevel) => (int) ($gradeLevel->id === $teacher->grade_level_id))->values()
                            : $gradeLevels;

                        $assignedSubjectIds = $teacher->teacherSubjects->pluck('subject_id');

                        $subjectGroups = $orderedGradeLevels
                            ->map(fn ($gradeLevel) => [
                                'gradeLevel' => $gradeLevel,
                                'subjects' => $subjectsByGradeLevel[$gradeLevel->id] ?? collect(),
                            ])
                            ->filter(fn (array $group) => $group['subjects']->isNotEmpty())
                            ->values();
                    @endphp

                    <form method="POST" action="{{ route('teachers.subject-assignments.store') }}">
                        @csrf
                        <input type="hidden" name="teacher_id" value="{{ $teacher->id }}">
                        <label class="form-label small text-muted">Add Subjects</label>
                        @if ($activeTerm)
                            <div class="text-muted small mb-2">Showing subjects offered in {{ $activeTerm->name }}.</div>
                        @endif

                        @if ($activitySubjects->isNotEmpty())
                            <div class="mb-3">
                                <div class="small fw-semibold mb-1 text-muted">
                                    Activities <span class="fw-normal">(all grade levels and tracks)</span>
                                </div>
                                <div class="d-flex flex-column gap-1">
                                    @foreach ($activitySubjects as $activity)
                                        @php
                                            $isAssigned = $assignedSubjectIds->contains($activity->id);
                                            $checkboxId = 'subject-' . $teacher->id . '-' . $activity->id;
                                        @endphp
                                        <div class="d-flex align-items-center justify-content-between border rounded-3 px-3 py-2 {{ $isAssigned ? 'bg-light' : '' }}">
                                            <div class="form-check mb-0">
                                                <input
                                                    class="form-check-input"
                                                    type="checkbox"
                                                    name="subject_ids[]"
                                                    value="{{ $activity->id }}"
                                                    id="{{ $checkboxId }}"
                                                    @disabled($isAssigned)>
                                                <label class="form-check-label small {{ $isAssigned ? 'text-muted' : '' }}" for="{{ $checkboxId }}">
                                                    {{ $activity->name }}{{ $isAssigned ? ' (assigned)' : '' }}
                                                </label>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        @endif

                        @forelse ($subjectGroups as $group)
                            <div class="mb-3">
                                <div class="small fw-semibold mb-1 {{ (int) $teacher->grade_level_id === $group['gradeLevel']->id ? 'text-primary' : 'text-muted' }}">
                                    {{ $group['gradeLevel']->name }}{{ (int) $teacher->grade_level_id === $group['gradeLevel']->id ? ' (Your Grade Level)' : '' }}
                                </div>
                                <div class="d-flex flex-column gap-1">
                                    @foreach ($group['subjects'] as $subject)
                                        @php
                                            $isAssigned = $assignedSubjectIds->contains($subject->id);
                                            $coverage = $subjectCoverageById->get($subject->id, ['teacher_count' => 0, 'sections_needing' => 0]);
                                            $checkboxId = 'subject-' . $teacher->id . '-' . $subject->id;

                                            $readinessIcon = $coverage['teacher_count'] > 0
                                                ? ['bi-check-circle-fill', 'text-success']
                                                : ['bi-exclamation-triangle-fill', 'text-danger'];

                                            $readinessTitle = $coverage['teacher_count'] > 0
                                                ? "Assigned to {$coverage['teacher_count']} " . Str::plural('teacher', $coverage['teacher_count'])
                                                : 'No teacher assigned yet';

                                            if ($coverage['sections_needing'] > 0) {
                                                $readinessTitle .= " · needed by {$coverage['sections_needing']} " . Str::plural('section', $coverage['sections_needing']);
                                            }
                                        @endphp
                                        <div class="d-flex align-items-center justify-content-between border rounded-3 px-3 py-2 {{ $isAssigned ? 'bg-light' : '' }}">
                                            <div class="form-check mb-0">
                                                <input
                                                    class="form-check-input"
                                                    type="checkbox"
                                                    name="subject_ids[]"
                                                    value="{{ $subject->id }}"
                                                    id="{{ $checkboxId }}"
                                                    @disabled($isAssigned)>
                                                <label class="form-check-label small {{ $isAssigned ? 'text-muted' : '' }}" for="{{ $checkboxId }}">
                                                    {{ $subject->name }}{{ $isAssigned ? ' (assigned)' : '' }}
                                                </label>
                                            </div>
                                            <i class="bi {{ $readinessIcon[0] }} {{ $readinessIcon[1] }}" title="{{ $readinessTitle }}" aria-label="{{ $readinessTitle }}"></i>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        @empty
                            @if ($activitySubjects->isEmpty())
                                <div class="text-muted small mb-3">No subjects offered in the active term</div>
                            @endif
                        @endforelse

                        <button class="btn btn-primary" type="submit">Assign Selected</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endforeach

<style>
.teacher-own-grade-optgroup {
    font-weight: 700;
    border-bottom: 2px solid #adb5bd;
}

/* --- Compact, size-scaled layout ---------------------------------------
   Same approach as the Scheduling page: every card, text size and table
   dimension on this page reads from these tokens, so smaller screens step
   the whole page down together. */
.teachers-page {
    --tp-gap: 0.75rem;
    --tp-pad: 0.75rem;
    --tp-radius: 14px;
    --tp-fs: 0.8rem;
    --tp-fs-sm: 0.72rem;
    --tp-fs-xs: 0.66rem;
    --tp-stat-value: 1.1rem;
    --tp-stat-icon: 32px;
    --tp-cell-y: 0.3rem;
    --tp-cell-x: 0.5rem;
}

@media (max-width: 1199.98px) {
    .teachers-page {
        --tp-gap: 0.65rem;
        --tp-pad: 0.65rem;
        --tp-radius: 12px;
        --tp-fs: 0.76rem;
        --tp-fs-sm: 0.68rem;
        --tp-fs-xs: 0.62rem;
        --tp-stat-value: 1.02rem;
        --tp-stat-icon: 30px;
    }
}

@media (max-width: 767.98px) {
    .teachers-page {
        --tp-gap: 0.55rem;
        --tp-pad: 0.55rem;
        --tp-radius: 10px;
        --tp-fs: 0.72rem;
        --tp-fs-sm: 0.65rem;
        --tp-fs-xs: 0.58rem;
        --tp-stat-value: 0.95rem;
        --tp-stat-icon: 28px;
        --tp-cell-x: 0.4rem;
    }
}

.teachers-page .tp-card {
    margin-bottom: var(--tp-gap);
    border-radius: var(--tp-radius);
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05);
}

.teachers-page .tp-card .card-body {
    padding: var(--tp-pad);
    font-size: var(--tp-fs);
}

.teachers-page .tp-card .table {
    margin-bottom: 0;
    font-size: var(--tp-fs);
}

.teachers-page .tp-card .table > :not(caption) > * > * {
    padding: var(--tp-cell-y) var(--tp-cell-x);
}

.teachers-page .tp-card .table thead th {
    font-size: var(--tp-fs-sm);
    font-weight: 600;
    white-space: nowrap;
}

.teachers-page .tp-card .small,
.teachers-page .tp-card small {
    font-size: var(--tp-fs-sm);
}

.teachers-page .tp-card .badge {
    font-size: var(--tp-fs-xs);
    padding: 0.25em 0.55em;
}

.teachers-page .tp-card .btn-sm {
    --bs-btn-font-size: var(--tp-fs-sm);
    --bs-btn-padding-y: 0.2rem;
    --bs-btn-padding-x: 0.55rem;
}

.teachers-page .tp-card .form-control,
.teachers-page .tp-card .form-select,
.teachers-page .tp-card .input-group-text {
    font-size: var(--tp-fs);
}

.teachers-page .tp-card .dropdown-menu {
    --bs-dropdown-font-size: var(--tp-fs-sm);
    --bs-dropdown-item-padding-y: 0.25rem;
    --bs-dropdown-item-padding-x: 0.75rem;
    --bs-dropdown-padding-y: 0.25rem;
}

.teachers-page .btn-view-all {
    font-size: var(--tp-fs-xs);
}

.teacher-stats-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    padding-bottom: var(--tp-gap);
    margin-bottom: var(--tp-gap);
    border-bottom: 1px solid #e5e7eb;
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.stat-icon {
    width: var(--tp-stat-icon);
    height: var(--tp-stat-icon);
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.stat-icon-primary {
    background: #e8eefc;
    color: #2563eb;
}

.stat-icon-success {
    background: #e5f6ec;
    color: #16a34a;
}

.stat-icon-danger {
    background: #fdecec;
    color: #dc3545;
}

.stat-value {
    font-size: var(--tp-stat-value);
    font-weight: 600;
    color: #111827;
    line-height: 1.15;
}

.stat-label {
    font-size: var(--tp-fs-sm);
    color: #6b7280;
    margin-top: 1px;
}

.stat-divider {
    width: 1px;
    height: 26px;
    background: #e5e7eb;
}

@media (max-width: 767.98px) {
    .stat-divider {
        display: none;
    }

    .teacher-stats-bar {
        gap: 0.5rem 1.1rem;
    }
}

.tab-pane {
    display: none;
}

.tab-pane.active {
    display: block;
}

.btn-view-all {
    background: none;
    border: none;
    padding: 0;
    margin-left: 6px;
    font-size: 0.78rem;
    color: #2563eb;
    text-decoration: underline;
}

.btn-view-all:hover {
    color: #1d4ed8;
}
</style>

@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const tabLinks = document.querySelectorAll('.page-nav-link');
    const tabPanes = document.querySelectorAll('.tab-pane');

    tabLinks.forEach(link => {
        link.addEventListener('click', () => {
            tabLinks.forEach(l => l.classList.remove('active'));
            tabPanes.forEach(p => p.classList.remove('active'));

            link.classList.add('active');
            document.getElementById(link.dataset.target).classList.add('active');

            sessionStorage.setItem('teachersActiveTab', link.dataset.target);
        });
    });

    // One grade-level filter shared by all three tabs: changing it in any tab
    // updates the others and survives the directory's GET search reload.
    const gradeFilters = document.querySelectorAll('.teacher-grade-filter');
    const applyGradeFilter = value => {
        gradeFilters.forEach(select => { select.value = value; });

        document.querySelectorAll('.tab-pane').forEach(pane => {
            const rows = pane.querySelectorAll('.grade-filter-row');
            let visible = 0;

            rows.forEach(row => {
                const match = value === '' || row.dataset.grade === value;
                row.classList.toggle('d-none', !match);
                if (match) {
                    visible++;
                }
            });

            pane.querySelector('.grade-filter-empty')
                ?.classList.toggle('d-none', rows.length === 0 || visible > 0);
        });
    };

    gradeFilters.forEach(select => {
        select.addEventListener('change', () => {
            sessionStorage.setItem('teachersGradeFilter', select.value);
            applyGradeFilter(select.value);
        });
    });

    applyGradeFilter(sessionStorage.getItem('teachersGradeFilter') ?? '');

    const credentialsModal = document.getElementById('teacherCredentialsModal');
    if (credentialsModal) {
        credentialsModal.querySelectorAll('[data-copy]').forEach(btn => {
            btn.addEventListener('click', () => {
                navigator.clipboard?.writeText(btn.dataset.copy).then(() => window.showToast('Copied.', 'success'));
            });
        });
        bootstrap.Modal.getOrCreateInstance(credentialsModal).show();
    }

    const assignmentSearchInput = document.getElementById('assignmentSearchInput');
    if (assignmentSearchInput) {
        assignmentSearchInput.addEventListener('input', () => {
            const term = assignmentSearchInput.value.trim().toLowerCase();
            document.querySelectorAll('#teacherAssignmentsTable .assignment-row').forEach(row => {
                row.hidden = term !== '' && !row.dataset.search.includes(term);
            });
        });
    }
});
</script>
@endpush