@extends('layouts.app')

@php
    $pageTitle = 'Teachers';
@endphp

@section('content')

<div class="card content-card">
    <div class="card-body p-2 px-3">
        <div class="d-flex flex-wrap align-items-center gap-2 mb-2">
            <h6 class="mb-0 fw-semibold">Teachers</h6>
            <span class="badge text-bg-light border">{{ $directory->count() }}</span>

            <div class="input-group input-group-sm ms-2" style="max-width: 260px;">
                <span class="input-group-text bg-white"><i class="bi bi-search"></i></span>
                <input type="text" id="teacherListSearch" class="form-control" placeholder="Search name or employee no." aria-label="Search teachers">
            </div>

            <a href="#" id="viewTeacherScheduleBtn" class="btn btn-primary btn-sm ms-auto disabled" aria-disabled="true" tabindex="-1"
               data-base-url="{{ route('teacher.schedules.index', ['view' => 'teacher']) }}">
                <i class="bi bi-calendar3 me-1"></i>View Teacher Schedule
            </a>
        </div>

        <div class="table-responsive">
            <table class="table table-sm align-middle mb-0 teacher-list-table" id="teacherListTable">
                <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">Assignment</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($directory as $item)
                        @php
                            $teacher = $item['teacher'];
                            $assignments = $teacher->teacherSubjects
                                ->map(fn ($assignment) => $assignment->subject)
                                ->filter()
                                ->sortBy('name')
                                ->map(fn ($subject) => [
                                    'code' => $subject->code,
                                    'name' => $subject->name,
                                    'hours' => rtrim(rtrim(number_format((float) $subject->weekly_hours, 2, '.', ''), '0'), '.'),
                                ])
                                ->values();
                        @endphp
                        <tr class="teacher-list-row" tabindex="0" data-teacher-id="{{ $teacher->id }}"
                            data-search="{{ strtolower($teacher->employee_number . ' ' . $teacher->full_name) }}">
                            <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) $item['assigned_hours'], 2) }} hours</td>
                            <td>
                                @if ($item['current_schedule'])
                                    <div class="fw-semibold">{{ $item['current_room_name'] }}</div>
                                @else
                                    <div class="fw-semibold text-muted">No active class</div>
                                @endif
                                <div class="text-muted small">{{ $item['current_room_meta'] }}</div>
                            </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">
                                <button type="button" class="btn btn-outline-secondary btn-sm js-view-assignment"
                                    data-teacher="{{ $teacher->full_name }}"
                                    data-subjects="{{ $assignments->toJson() }}">
                                    <i class="bi bi-journal-text me-1"></i>View Assignment
                                </button>
                            </td>
                        </tr>
                    @empty
                        <tr><td colspan="8" class="text-center text-muted py-3">No teacher records found.</td></tr>
                    @endforelse
                    <tr id="teacherListEmpty" class="d-none">
                        <td colspan="8" class="text-center text-muted py-3">No teachers match your search.</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

<div class="modal fade" id="teacherAssignmentModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header py-2">
                <h6 class="modal-title">Assigned Subjects <span class="text-muted fw-normal" id="teacherAssignmentName"></span></h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>

            <div class="modal-body p-0">
                <table class="table table-sm align-middle mb-0">
                    <thead class="table-light">
                        <tr>
                            <th>Code</th>
                            <th>Subject</th>
                            <th class="text-end">Hours/Week</th>
                        </tr>
                    </thead>
                    <tbody id="teacherAssignmentBody"></tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<style>
    .teacher-list-table > :not(caption) > * > * { padding: 0.3rem 0.5rem; font-size: 0.85rem; }
    .teacher-list-row { cursor: pointer; }
    .teacher-list-row.is-selected > * { background: #eef2ff; box-shadow: none; }
    .teacher-list-row:focus-visible { outline: 2px solid #4f46e5; outline-offset: -2px; }
</style>

@endsection

@push('scripts')
<script>
(function () {
    const rows = Array.from(document.querySelectorAll('.teacher-list-row'));
    const button = document.getElementById('viewTeacherScheduleBtn');
    const search = document.getElementById('teacherListSearch');
    const emptyRow = document.getElementById('teacherListEmpty');
    let selectedId = null;

    function open(id) {
        window.location.href = button.dataset.baseUrl + '&teacher_id=' + encodeURIComponent(id);
    }

    function select(row) {
        rows.forEach(r => r.classList.toggle('is-selected', r === row));
        selectedId = row ? row.dataset.teacherId : null;

        button.classList.toggle('disabled', !row);
        button.setAttribute('aria-disabled', row ? 'false' : 'true');
        button.tabIndex = row ? 0 : -1;
        button.href = row ? button.dataset.baseUrl + '&teacher_id=' + encodeURIComponent(selectedId) : '#';
    }

    rows.forEach(row => {
        row.addEventListener('click', () => select(row));
        row.addEventListener('dblclick', () => open(row.dataset.teacherId));
        row.addEventListener('keydown', event => {
            if (event.key === 'Enter' || event.key === ' ') {
                event.preventDefault();
                select(row);
            }
        });
    });

    const assignmentModal = document.getElementById('teacherAssignmentModal');
    const assignmentBody = document.getElementById('teacherAssignmentBody');

    document.querySelectorAll('.js-view-assignment').forEach(btn => {
        btn.addEventListener('click', event => {
            event.stopPropagation();

            document.getElementById('teacherAssignmentName').textContent = '- ' + btn.dataset.teacher;
            assignmentBody.replaceChildren();

            const subjects = JSON.parse(btn.dataset.subjects || '[]');

            if (subjects.length === 0) {
                const cell = document.createElement('td');
                cell.colSpan = 3;
                cell.className = 'text-center text-muted py-3';
                cell.textContent = 'No subjects assigned.';
                assignmentBody.appendChild(document.createElement('tr')).appendChild(cell);
            }

            subjects.forEach((subject, index) => {
                const row = assignmentBody.insertRow();
                row.insertCell().textContent = subject.code || '-';
                row.insertCell().textContent = subject.name;
                const hours = row.insertCell();
                hours.className = 'text-end';
                hours.textContent = subject.hours;
            });

            bootstrap.Modal.getOrCreateInstance(assignmentModal).show();
        });
    });

    button.addEventListener('click', event => {
        if (!selectedId) {
            event.preventDefault();
        }
    });

    search.addEventListener('input', () => {
        const term = search.value.trim().toLowerCase();
        let visible = 0;

        rows.forEach(row => {
            const match = term === '' || row.dataset.search.includes(term);
            row.hidden = !match;
            visible += match ? 1 : 0;

            if (!match && row.classList.contains('is-selected')) {
                select(null);
            }
        });

        emptyRow.classList.toggle('d-none', visible > 0 || rows.length === 0);
    });
})();
</script>
@endpush