@extends('layouts.app')
@section('title', 'Timetable')
@section('page_title', 'Timetable & Teacher Allocation')
@section('breadcrumbs')
    <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Home</a></li>
    <li class="breadcrumb-item active">Timetable</li>
@endsection
@section('page_actions')
    <button type="button" onclick="window.print()" class="btn btn-light border"><i class="bi bi-printer me-1"></i>Print</button>
@endsection

@section('content')
    {{-- Summary --}}
    <div class="row g-3 mb-3">
        <div class="col-sm-4"><div class="card stat-card"><div class="card-body d-flex align-items-center gap-3">
            <div class="icon bg-soft-primary"><i class="bi bi-grid-3x3-gap"></i></div>
            <div><div class="value">{{ $totalAllocations }}</div><div class="label">Subject Allocations</div></div>
        </div></div></div>
        <div class="col-sm-4"><div class="card stat-card"><div class="card-body d-flex align-items-center gap-3">
            <div class="icon bg-soft-success"><i class="bi bi-person-check"></i></div>
            <div><div class="value">{{ $assigned }}</div><div class="label">Teacher Assigned</div></div>
        </div></div></div>
        <div class="col-sm-4"><div class="card stat-card"><div class="card-body d-flex align-items-center gap-3">
            <div class="icon bg-soft-warning"><i class="bi bi-person-dash"></i></div>
            <div><div class="value">{{ $unassigned }}</div><div class="label">Unassigned</div></div>
        </div></div></div>
    </div>

    {{-- Tabs --}}
    <ul class="nav nav-pills mb-3 no-print" role="tablist">
        <li class="nav-item"><button class="nav-link active" data-bs-toggle="pill" data-bs-target="#tab-class">By Class</button></li>
        <li class="nav-item"><button class="nav-link" data-bs-toggle="pill" data-bs-target="#tab-teacher">By Teacher</button></li>
        <li class="nav-item"><button class="nav-link" data-bs-toggle="pill" data-bs-target="#tab-subject">By Subject</button></li>
    </ul>

    <div class="tab-content">
        {{-- ===== By Class ===== --}}
        <div class="tab-pane fade show active" id="tab-class">
            <div class="row g-3">
                @forelse($classes as $class)
                    <div class="col-md-6 col-xl-4">
                        <div class="card h-100">
                            <div class="card-header d-flex justify-content-between align-items-center py-2">
                                <span class="fw-semibold"><i class="bi bi-mortarboard me-1"></i>{{ $class->name }}</span>
                                <span class="badge bg-soft-primary">{{ $class->subjects->count() }} subjects</span>
                            </div>
                            <div class="card-body p-0">
                                <table class="table table-sm align-middle mb-0">
                                    <thead class="table-light"><tr><th>Subject</th><th>Teacher</th></tr></thead>
                                    <tbody>
                                        @forelse($class->subjects as $subject)
                                            <tr>
                                                <td class="small fw-semibold">{{ $subject->name }}</td>
                                                <td class="small">
                                                    @if($subject->pivot->teacher_id)
                                                        <span class="text-success">{{ $userMap[$subject->pivot->teacher_id] ?? 'Unknown' }}</span>
                                                    @else
                                                        <span class="text-muted">— Unassigned —</span>
                                                    @endif
                                                </td>
                                            </tr>
                                        @empty
                                            <tr><td colspan="2" class="text-muted text-center small py-2">No subjects allocated.</td></tr>
                                        @endforelse
                                    </tbody>
                                </table>
                            </div>
                            @can('academics.update')
                                <div class="card-footer bg-white py-1 text-end">
                                    <a href="{{ route('classes.show', $class) }}" class="btn btn-sm btn-light border"><i class="bi bi-gear me-1"></i>Manage</a>
                                </div>
                            @endcan
                        </div>
                    </div>
                @empty
                    <div class="col-12"><div class="card"><div class="card-body text-center text-muted py-4">No classes set up yet.</div></div></div>
                @endforelse
            </div>
        </div>

        {{-- ===== By Teacher ===== --}}
        <div class="tab-pane fade" id="tab-teacher">
            <div class="card"><div class="card-body">
                <table class="table table-hover align-middle">
                    <thead><tr><th style="width:220px">Teacher</th><th>Classes & Subjects</th><th class="text-center">Periods</th></tr></thead>
                    <tbody>
                        @forelse($teacherView as $teacher => $rows)
                            <tr>
                                <td class="fw-semibold {{ $teacher === '— Unassigned —' ? 'text-muted' : '' }}">
                                    <i class="bi bi-person-badge me-1"></i>{{ $teacher }}
                                </td>
                                <td>
                                    @foreach($rows as $r)
                                        <span class="badge bg-soft-secondary me-1 mb-1">{{ $r['class'] }} · {{ $r['subject'] }}</span>
                                    @endforeach
                                </td>
                                <td class="text-center">{{ count($rows) }}</td>
                            </tr>
                        @empty
                            <tr><td colspan="3" class="text-muted text-center py-3">No allocations yet.</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div></div>
        </div>

        {{-- ===== By Subject ===== --}}
        <div class="tab-pane fade" id="tab-subject">
            <div class="card"><div class="card-body">
                <table class="table table-hover align-middle">
                    <thead><tr><th style="width:220px">Subject</th><th>Classes (Teacher)</th></tr></thead>
                    <tbody>
                        @forelse($subjectView as $subject => $rows)
                            <tr>
                                <td class="fw-semibold"><i class="bi bi-journal-text me-1"></i>{{ $subject }}</td>
                                <td>
                                    @foreach($rows as $r)
                                        <span class="badge {{ $r['teacher'] ? 'bg-soft-success' : 'bg-soft-warning' }} me-1 mb-1">
                                            {{ $r['class'] }}{{ $r['teacher'] ? ' · '.$r['teacher'] : ' · (no teacher)' }}
                                        </span>
                                    @endforeach
                                </td>
                            </tr>
                        @empty
                            <tr><td colspan="2" class="text-muted text-center py-3">No subjects allocated.</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div></div>
        </div>
    </div>
@endsection
