@extends('layouts.app')
@section('title', 'Stundenplan Cockpit - Live Stundenplan mit Fach-Counter | kotsch.tech')
@section('meta_description', 'Stundenplan Cockpit fuer DE23-1: Live-Wochenansicht, naechster Termin, Countdown und Counter, wie viele Termine pro Fach noch offen sind.')
@section('meta_extra')
<meta name="keywords" content="Stundenplan, Stundenplan Cockpit, Fach Counter, Unterricht Countdown, BA Glauchau Stundenplan, Studienplan Tool">
@endsection

@section('content')
@include('tools._tool_base')

@php
    $timezone = new DateTimeZone('Europe/Berlin');
    $now = new DateTimeImmutable('now', $timezone);
    $sourceUrl = 'https://stundenplan.ba-glauchau.de/stundenplan/PlanServlet?Format=HTML&data=b4ead48f7d62ff07ed2e552ff3edcaa38c19110b06c6e6bf&LegendeFach&AnzahlPlaene=25';

    if (!function_exists('ktScheduleText')) {
        function ktScheduleText(?string $value): string
        {
            $value = html_entity_decode((string) $value, ENT_QUOTES | ENT_HTML5, 'UTF-8');
            $value = preg_replace('/\x{00a0}/u', ' ', $value);
            $value = preg_replace('/\s+/u', ' ', $value);

            return trim($value ?? '');
        }
    }

    if (!function_exists('ktDirectElements')) {
        function ktDirectElements(DOMElement $node, string $tagName): array
        {
            $children = [];
            foreach ($node->childNodes as $child) {
                if ($child instanceof DOMElement && strcasecmp($child->tagName, $tagName) === 0) {
                    $children[] = $child;
                }
            }

            return $children;
        }
    }

    if (!function_exists('ktUniqueTexts')) {
        function ktUniqueTexts(array $values): array
        {
            $result = [];
            foreach ($values as $value) {
                $value = ktScheduleText($value);
                if ($value !== '' && !in_array($value, $result, true)) {
                    $result[] = $value;
                }
            }

            return $result;
        }
    }

    if (!function_exists('ktSpanTexts')) {
        function ktSpanTexts(DOMElement $node, string $className): array
        {
            $texts = [];
            $xpath = new DOMXPath($node->ownerDocument);
            $query = './/span[contains(concat(" ", normalize-space(@class), " "), " ' . $className . ' ")]';
            foreach ($xpath->query($query, $node) as $span) {
                $text = ktScheduleText($span->textContent);
                if ($text !== '') {
                    $texts[] = $text;
                }
            }

            return $texts;
        }
    }

    if (!function_exists('ktParseSlot')) {
        function ktParseSlot(string $text): ?array
        {
            if (!preg_match('/(\d{1,2})\.\s*(\d{2}:\d{2})\s*-\s*(\d{2}:\d{2})/u', $text, $m)) {
                return null;
            }

            return ['number' => (int) $m[1], 'start' => $m[2], 'end' => $m[3]];
        }
    }

    if (!function_exists('ktParseCell')) {
        function ktParseCell(DOMElement $cell): ?array
        {
            $plain = ktScheduleText($cell->textContent);
            if ($plain === '') {
                return null;
            }

            $subjects = ktUniqueTexts(ktSpanTexts($cell, 'fach'));
            $teachers = ktUniqueTexts(ktSpanTexts($cell, 'dozent'));
            $rooms = ktUniqueTexts(ktSpanTexts($cell, 'ort'));
            $notes = ktUniqueTexts(ktSpanTexts($cell, 'bemerkung'));
            $className = $cell->getAttribute('class');
            $isHoliday = stripos($className, 'Feiertag') !== false
                || stripos($plain, 'Feiertag') !== false
                || stripos($plain, 'Pfingstmontag') !== false;

            if (!$subjects && !$isHoliday) {
                $subjects = [$plain];
            }

            return [
                'title' => $subjects ? implode(' / ', $subjects) : $plain,
                'subjects' => $subjects,
                'teachers' => $teachers,
                'rooms' => $rooms,
                'notes' => $notes,
                'type' => $isHoliday ? 'holiday' : 'lesson',
                'raw' => $plain,
            ];
        }
    }

    if (!function_exists('ktLegend')) {
        function ktLegend(DOMXPath $xpath): array
        {
            $legend = [];
            $cells = $xpath->query('//table[contains(@class, "Legende")]//td');
            if (!$cells) {
                return $legend;
            }

            for ($i = 0; $i < $cells->length - 1; $i += 2) {
                $short = ktScheduleText($cells->item($i)->textContent);
                $long = ktScheduleText($cells->item($i + 1)->textContent);
                if ($short !== '' && $long !== '') {
                    $legend[$short] = $long;
                }
            }

            return $legend;
        }
    }

    if (!function_exists('ktParseSchedule')) {
        function ktParseSchedule(string $html, DateTimeZone $timezone): array
        {
            $dom = new DOMDocument();
            @$dom->loadHTML('<?xml encoding="utf-8" ?>' . $html);
            $xpath = new DOMXPath($dom);
            $weeks = [];
            $events = [];
            $stand = preg_match('/Stand:\s*([^<]+)/u', $html, $m) ? ktScheduleText($m[1]) : null;
            $tables = $xpath->query('//table[contains(concat(" ", normalize-space(@class), " "), " Plan ")]');

            foreach ($tables as $table) {
                if (!$table instanceof DOMElement) {
                    continue;
                }

                $captionNode = $table->getElementsByTagName('caption')->item(0);
                $caption = $captionNode ? ktScheduleText($captionNode->textContent) : '';
                if (!preg_match('/vom\s+(\d{1,2}\.\d{1,2}\.\d{4})\s*-\s*(\d{1,2}\.\d{1,2}\.\d{4})/u', $caption, $dm)) {
                    continue;
                }

                $weekStartMutable = DateTime::createFromFormat('!d.m.Y', $dm[1], $timezone);
                if (!$weekStartMutable) {
                    continue;
                }
                $weekStart = DateTimeImmutable::createFromMutable($weekStartMutable);

                $rows = iterator_to_array($table->getElementsByTagName('tr'));
                $headerIndex = null;
                $dayNames = [];

                foreach ($rows as $index => $row) {
                    if (!$row instanceof DOMElement) {
                        continue;
                    }
                    $ths = ktDirectElements($row, 'th');
                    if ($ths && strcasecmp(ktScheduleText($ths[0]->textContent), 'Zeit') === 0) {
                        $headerIndex = $index;
                        for ($i = 1; $i < count($ths); $i++) {
                            $dayNames[] = ktScheduleText($ths[$i]->textContent);
                        }
                        break;
                    }
                }

                if ($headerIndex === null || !$dayNames) {
                    continue;
                }

                $slots = [];
                for ($i = $headerIndex + 1; $i < count($rows); $i++) {
                    if (!$rows[$i] instanceof DOMElement) {
                        continue;
                    }
                    $ths = ktDirectElements($rows[$i], 'th');
                    $slot = $ths ? ktParseSlot(ktScheduleText($ths[0]->textContent)) : null;
                    if ($slot) {
                        $slots[$i] = $slot;
                    }
                }

                $week = ['caption' => $caption, 'start' => $weekStart, 'days' => []];
                foreach ($dayNames as $offset => $dayName) {
                    $week['days'][$offset] = [
                        'name' => $dayName,
                        'date' => $weekStart->modify('+' . $offset . ' days'),
                        'events' => [],
                    ];
                }

                $rowspanDebt = array_fill(0, count($dayNames), 0);
                for ($rowIndex = $headerIndex + 1; $rowIndex < count($rows); $rowIndex++) {
                    if (!isset($slots[$rowIndex]) || !$rows[$rowIndex] instanceof DOMElement) {
                        continue;
                    }

                    $cells = ktDirectElements($rows[$rowIndex], 'td');
                    $cellPointer = 0;

                    for ($dayIndex = 0; $dayIndex < count($dayNames); $dayIndex++) {
                        if ($rowspanDebt[$dayIndex] > 0) {
                            $rowspanDebt[$dayIndex]--;
                            continue;
                        }

                        $cell = $cells[$cellPointer] ?? null;
                        $cellPointer++;
                        if (!$cell instanceof DOMElement) {
                            continue;
                        }

                        $rowspan = max(1, (int) ($cell->getAttribute('rowspan') ?: 1));
                        $rowspanDebt[$dayIndex] = $rowspan - 1;
                        $cellData = ktParseCell($cell);
                        if (!$cellData) {
                            continue;
                        }

                        $endRow = $rowIndex;
                        $remaining = $rowspan - 1;
                        for ($probe = $rowIndex + 1; $probe < count($rows) && $remaining > 0; $probe++) {
                            if (isset($slots[$probe])) {
                                $endRow = $probe;
                                $remaining--;
                            }
                        }

                        $date = $week['days'][$dayIndex]['date'];
                        $start = DateTimeImmutable::createFromFormat('!Y-m-d H:i', $date->format('Y-m-d') . ' ' . $slots[$rowIndex]['start'], $timezone);
                        $end = DateTimeImmutable::createFromFormat('!Y-m-d H:i', $date->format('Y-m-d') . ' ' . ($slots[$endRow]['end'] ?? $slots[$rowIndex]['end']), $timezone);
                        if (!$start || !$end) {
                            continue;
                        }

                        $event = array_merge($cellData, [
                            'date' => $date,
                            'dayName' => $week['days'][$dayIndex]['name'],
                            'start' => $start,
                            'end' => $end,
                            'timeLabel' => $start->format('H:i') . '-' . $end->format('H:i'),
                            'slotCount' => $rowspan,
                        ]);

                        $week['days'][$dayIndex]['events'][] = $event;
                        $events[] = $event;
                    }
                }

                $weeks[] = $week;
            }

            usort($events, static fn ($a, $b) => $a['start'] <=> $b['start']);

            return ['weeks' => $weeks, 'events' => $events, 'legend' => ktLegend($xpath), 'stand' => $stand];
        }
    }

    $rawHtml = cache()->remember('stundenplan_cockpit_source_v1', now()->addMinutes(15), function () use ($sourceUrl) {
        $context = stream_context_create([
            'http' => [
                'timeout' => 12,
                'header' => "User-Agent: kotsch.tech Stundenplan Cockpit\r\n",
            ],
        ]);
        $html = @file_get_contents($sourceUrl, false, $context);

        return is_string($html) && $html !== '' ? $html : null;
    });

    $parsed = $rawHtml ? ktParseSchedule($rawHtml, $timezone) : ['weeks' => [], 'events' => [], 'legend' => [], 'stand' => null];
    $weeks = $parsed['weeks'];
    $legend = $parsed['legend'];
    $stand = $parsed['stand'];
    $hiddenSubjects = ['DE-ZSPLM'];
    $cleanEvent = static function (array $event) use ($hiddenSubjects): ?array {
        if ($event['type'] !== 'lesson') {
            return $event;
        }

        $event['subjects'] = array_values(array_filter($event['subjects'], static fn ($subject) => !in_array($subject, $hiddenSubjects, true)));
        if (!$event['subjects']) {
            return null;
        }

        $event['title'] = implode(' / ', $event['subjects']);

        return $event;
    };

    foreach ($weeks as &$week) {
        foreach ($week['days'] as &$day) {
            $day['events'] = array_values(array_filter(array_map($cleanEvent, $day['events'])));
        }
        unset($day);
    }
    unset($week);

    $visibleEvents = [];
    foreach ($parsed['events'] as $event) {
        $event = $cleanEvent($event);
        if ($event) {
            $visibleEvents[] = $event;
        }
    }

    $futureEvents = array_values(array_filter($visibleEvents, static fn ($event) => $event['end'] >= $now));
    $lessonEvents = array_values(array_filter($futureEvents, static fn ($event) => $event['type'] === 'lesson'));
    $nextEvent = collect($lessonEvents)->first();

    $subjectStats = [];
    foreach ($lessonEvents as $event) {
        foreach (ktUniqueTexts($event['subjects']) as $subject) {
            $subjectStats[$subject] ??= ['code' => $subject, 'label' => $legend[$subject] ?? $subject, 'count' => 0, 'slots' => 0];
            $subjectStats[$subject]['count']++;
            $subjectStats[$subject]['slots'] += $event['slotCount'];
        }
    }
    uasort($subjectStats, static fn ($a, $b) => [$b['count'], $a['code']] <=> [$a['count'], $b['code']]);
    $subjectStats = array_values($subjectStats);

    $palette = [
        ['#2563eb', '#dbeafe'], ['#0f766e', '#ccfbf1'], ['#b45309', '#fef3c7'], ['#be123c', '#ffe4e6'],
        ['#6d28d9', '#ede9fe'], ['#047857', '#d1fae5'], ['#4338ca', '#e0e7ff'], ['#c2410c', '#ffedd5'],
    ];
    $subjectStyle = [];
    foreach (array_column($subjectStats, 'code') as $index => $code) {
        $subjectStyle[$code] = $palette[$index % count($palette)];
    }

    $detailEvents = [];
    foreach ($lessonEvents as $event) {
        $key = md5($event['start']->format(DateTimeInterface::ATOM) . '|' . $event['title'] . '|' . implode(',', $event['rooms']));
        $detailEvents[$key] = [
            'key' => $key,
            'title' => $event['title'],
            'subjects' => $event['subjects'],
            'date' => $event['date']->format('d.m.Y'),
            'weekday' => $event['dayName'],
            'time' => $event['timeLabel'],
            'rooms' => $event['rooms'],
            'teachers' => $event['teachers'],
            'notes' => $event['notes'],
        ];
    }

    $displayWeeks = array_values(array_filter($weeks, static function ($week) use ($now) {
        foreach ($week['days'] as $day) {
            if ($day['date'] >= $now->setTime(0, 0)) {
                return true;
            }
        }

        return false;
    })) ?: $weeks;
    $nextPayload = $nextEvent ? ['start' => $nextEvent['start']->format(DateTimeInterface::ATOM), 'end' => $nextEvent['end']->format(DateTimeInterface::ATOM)] : null;
@endphp

<style>
.schedule-hero{margin-bottom:18px}
.schedule-panel{margin-bottom:18px}
.schedule-counter,.schedule-day{border:1px solid var(--line);border-radius:var(--radius-md);background:var(--card)}
.schedule-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.schedule-pill{display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--muted);font-size:.82rem;font-weight:800}
.live-dot{width:8px;height:8px;border-radius:999px;background:#16a34a;box-shadow:0 0 0 0 rgba(22,163,74,.36);animation:pulseDot 1.8s infinite}
@keyframes pulseDot{70%{box-shadow:0 0 0 9px rgba(22,163,74,0)}100%{box-shadow:0 0 0 0 rgba(22,163,74,0)}}
.next-title{margin:8px 0 6px;font-size:1.55rem;line-height:1.08;font-weight:900;letter-spacing:-.5px}
.next-meta{margin:0;color:var(--muted);font-weight:700}
.count-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px}
.count-box{min-height:74px;display:grid;place-items:center;border-radius:var(--radius-sm);background:var(--bg);text-align:center}
.count-box strong{display:block;font-size:1.7rem;line-height:1;color:var(--accent);font-variant-numeric:tabular-nums}
.count-box span{display:block;margin-top:4px;font-size:.68rem;font-weight:900;color:var(--muted);text-transform:uppercase;letter-spacing:1px}
.schedule-stats{margin-bottom:18px}
.schedule-section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:18px}
.schedule-section-head h2{margin:0;font-size:clamp(1.35rem,3vw,2rem);letter-spacing:-1px}
.filter-row{display:flex;flex-wrap:wrap;gap:8px}
.filter-chip{min-height:38px;padding:8px 14px;border:2px solid var(--line);border-radius:999px;background:var(--card);color:var(--muted);font:inherit;font-size:.86rem;font-weight:900;cursor:pointer}
.filter-chip.active,.filter-chip:hover{color:#fff;border-color:var(--ink);background:var(--ink)}
.counter-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}
.schedule-counter{padding:18px}
.schedule-counter,.event-card{cursor:pointer;transition:transform .18s,border-color .18s,box-shadow .18s}
.schedule-counter:hover,.event-card:hover{transform:translateY(-1px);border-color:var(--accent);box-shadow:0 10px 26px -20px rgba(15,23,42,.32)}
.schedule-counter:focus,.event-card:focus{outline:3px solid var(--accent-soft);outline-offset:2px}
.counter-top{display:flex;justify-content:space-between;gap:12px;align-items:start}
.subject-code{display:inline-flex;min-height:28px;align-items:center;padding:5px 10px;border-radius:999px;color:var(--subject-ink);background:var(--subject-bg);font-size:.78rem;font-weight:900}
.counter-num{font-size:2.15rem;font-weight:900;line-height:1;color:var(--ink)}
.counter-name{margin:14px 0 0;color:var(--ink);font-weight:900;line-height:1.25}
.counter-sub{margin:7px 0 0;color:var(--muted);font-size:.88rem;font-weight:700}
.week-list{display:grid;gap:18px}
.week-title{margin:0;font-size:1.35rem;letter-spacing:-.5px}
.week-caption{margin:4px 0 12px;color:var(--muted);font-weight:700}
.days-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.schedule-day{overflow:hidden;min-height:180px}
.schedule-day.past{opacity:.55}
.day-head{padding:14px 16px;border-bottom:1px solid var(--line);background:var(--bg)}
.day-head h3{margin:0;font-size:1rem;font-weight:900}
.day-head p{margin:3px 0 0;color:var(--muted);font-size:.82rem;font-weight:800}
.event-list{display:grid;gap:10px;padding:12px}
.event-card{display:grid;gap:5px;padding:12px;border:1px solid color-mix(in srgb,var(--subject-ink) 24%,var(--line));border-left:4px solid var(--subject-ink);border-radius:var(--radius-sm);background:color-mix(in srgb,var(--subject-bg) 58%,var(--card))}
.event-card.active-now{outline:2px solid var(--accent);outline-offset:2px}
.event-card.holiday{--subject-ink:#047857;--subject-bg:#d1fae5}
.event-time{color:var(--muted);font-size:.78rem;font-weight:900}
.event-title{margin:0;color:var(--ink);font-size:.96rem;font-weight:900;line-height:1.2}
.event-meta{margin:0;color:var(--muted);font-size:.8rem;font-weight:700;line-height:1.35}
.empty-day{padding:16px;color:var(--muted);font-size:.9rem;font-weight:700}
.detail-panel{display:none}
.detail-panel.active{display:block}
.detail-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:14px}
.detail-head h2{margin:0;font-size:1.35rem;letter-spacing:-.5px}
.detail-list{display:grid;gap:8px}
.detail-teachers{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:8px;margin-bottom:12px}
.detail-teacher-card{border:1px solid rgba(16,185,129,.22);border-radius:var(--radius-sm);background:var(--accent-soft);padding:12px}
.detail-teacher-card strong{display:block;color:var(--ink);font-size:.95rem}
.detail-teacher-card span{display:block;margin-top:4px;color:var(--accent);font-size:.82rem;font-weight:900}
.detail-row{width:100%;display:grid;grid-template-columns:1fr auto;gap:12px;text-align:left;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--bg);padding:12px 14px;font:inherit;cursor:pointer}
.detail-row:hover{border-color:var(--accent);background:var(--accent-soft)}
.detail-row strong{display:block;color:var(--ink);font-size:.95rem}
.detail-row span{display:block;color:var(--muted);font-size:.82rem;font-weight:700;margin-top:3px}
.detail-pill{align-self:start;white-space:nowrap;color:var(--accent);font-size:.78rem;font-weight:900}
@media(max-width:640px){.schedule-section-head{align-items:start;flex-direction:column}.days-grid,.count-grid{grid-template-columns:1fr}}
</style>

<div class="tool-page schedule-page">
    <div class="tool-container" data-schedule-root>
        <div class="schedule-hero">
            <div class="tool-header" style="margin-bottom:0">
                <span class="t-tag"><i class="fas fa-calendar-week"></i> Studium</span>
                <h1 class="tool-h1">Stundenplan<span>.</span></h1>
                <p class="tool-sub">Live aus dem BA-Glauchau-Stundenplan gelesen, als schönes Cockpit mit Wochenansicht, nächstem Termin und Fach-Counter für alles, was ab jetzt noch kommt.</p>
                <div class="schedule-meta">
                    <span class="schedule-pill"><span class="live-dot"></span> Stand: {{ $stand ?: $now->format('d.m.Y H:i') }}</span>
                    <a class="schedule-pill" href="{{ $sourceUrl }}" target="_blank" rel="noopener noreferrer"><i class="fas fa-arrow-up-right-from-square"></i> Originalplan</a>
                </div>
            </div>

            <aside class="t-panel schedule-panel" data-next='@json($nextPayload)'>
                <div class="t-panel-title" style="margin-bottom:0"><i class="fas fa-bolt"></i> {{ $nextEvent && $nextEvent['start'] <= $now && $nextEvent['end'] >= $now ? 'Laeuft gerade' : 'Naechster Termin' }}</div>
                @if($nextEvent)
                    <h2 class="next-title">{{ $nextEvent['title'] }}</h2>
                    <p class="next-meta">{{ $nextEvent['dayName'] }}, {{ $nextEvent['date']->format('d.m.Y') }}, {{ $nextEvent['timeLabel'] }}</p>
                    <div class="count-grid" aria-live="polite">
                        <div class="count-box"><div><strong data-count-hours>0</strong><span>Stunden</span></div></div>
                        <div class="count-box"><div><strong data-count-minutes>0</strong><span>Minuten</span></div></div>
                        <div class="count-box"><div><strong data-count-seconds>0</strong><span>Sekunden</span></div></div>
                    </div>
                @else
                    <h2 class="next-title">Kein kommender Termin</h2>
                    <p class="next-meta">Im geladenen Zeitraum wurde keine offene Vorlesung gefunden.</p>
                @endif
            </aside>
        </div>

        @if(!$rawHtml)
            <div class="t-panel" style="text-align:center">
                <h2>Stundenplan-Server nicht erreichbar</h2>
                <p>Das Tool ist bereit, aber die externe Quelle konnte gerade nicht geladen werden.</p>
            </div>
        @else
            <div class="t-grid-4 schedule-stats">
                <div class="t-stat-card accent"><div class="t-stat-num">{{ count($lessonEvents) }}</div><div class="t-stat-lbl">Termine</div></div>
                <div class="t-stat-card"><div class="t-stat-num">{{ count($subjectStats) }}</div><div class="t-stat-lbl">Faecher</div></div>
                <div class="t-stat-card"><div class="t-stat-num">{{ array_sum(array_column($subjectStats, 'slots')) }}</div><div class="t-stat-lbl">Bloecke</div></div>
                <div class="t-stat-card"><div class="t-stat-num">{{ count($displayWeeks) }}</div><div class="t-stat-lbl">Wochen</div></div>
            </div>

            <section class="t-panel">
                <div class="schedule-section-head">
                    <div>
                        <div class="t-panel-title" style="margin-bottom:6px"><i class="fas fa-chart-simple"></i> Noch offen</div>
                        <h2>Fach-Counter</h2>
                    </div>
                    <div class="filter-row" aria-label="Fachfilter">
                        <button class="filter-chip active" type="button" data-filter="all">Alle</button>
                        @foreach(array_slice($subjectStats, 0, 8) as $stat)
                            <button class="filter-chip" type="button" data-filter="{{ $stat['code'] }}">{{ $stat['code'] }}</button>
                        @endforeach
                    </div>
                </div>

                <div class="counter-grid">
                    @foreach($subjectStats as $stat)
                        @php
                            [$ink, $bg] = $subjectStyle[$stat['code']] ?? $palette[0];
                        @endphp
                        <article class="schedule-counter" style="--subject-ink: {{ $ink }}; --subject-bg: {{ $bg }};" data-counter-subject="{{ $stat['code'] }}" data-detail-subject="{{ $stat['code'] }}" role="button" tabindex="0">
                            <div class="counter-top">
                                <span class="subject-code">{{ $stat['code'] }}</span>
                                <span class="counter-num">{{ $stat['count'] }}</span>
                            </div>
                            <p class="counter-name">{{ $stat['label'] }}</p>
                            <p class="counter-sub">{{ $stat['slots'] }} Bloecke bis zum geladenen Planende</p>
                        </article>
                    @endforeach
                </div>
            </section>

            <section class="t-panel detail-panel" id="schedule-detail" aria-live="polite">
                <div class="detail-head">
                    <div>
                        <div class="t-panel-title" style="margin-bottom:6px"><i class="fas fa-circle-info"></i> Details</div>
                        <h2 id="detail-title">Termin</h2>
                    </div>
                    <button class="t-btn ghost sm" type="button" id="detail-close"><i class="fas fa-times"></i> Schliessen</button>
                </div>
                <div id="detail-body" class="detail-list"></div>
            </section>

            <section class="week-list">
                @foreach($displayWeeks as $week)
                    <div class="t-panel" data-week>
                        <h2 class="week-title">{{ $week['caption'] }}</h2>
                        <p class="week-caption">{{ $week['start']->format('d.m.Y') }} bis {{ $week['start']->modify('+6 days')->format('d.m.Y') }}</p>
                        <div class="days-grid">
                            @foreach($week['days'] as $day)
                                <article class="schedule-day {{ $day['date']->setTime(23, 59) < $now ? 'past' : '' }}">
                                    <div class="day-head">
                                        <h3>{{ $day['name'] }}</h3>
                                        <p>{{ $day['date']->format('d.m.Y') }}</p>
                                    </div>
                                    @if($day['events'])
                                        <div class="event-list">
                                            @foreach($day['events'] as $event)
                                                @php
                                                    $primarySubject = $event['subjects'][0] ?? 'frei';
                                                    [$ink, $bg] = $subjectStyle[$primarySubject] ?? ['#64748b', '#f1f5f9'];
                                                    $isActive = $event['start'] <= $now && $event['end'] >= $now;
                                                    $eventKey = md5($event['start']->format(DateTimeInterface::ATOM) . '|' . $event['title'] . '|' . implode(',', $event['rooms']));
                                                    $meta = [];
                                                    if ($event['teachers']) { $meta[] = 'Dozent: ' . implode(', ', $event['teachers']); }
                                                    if ($event['rooms']) { $meta[] = 'Raum: ' . implode(', ', $event['rooms']); }
                                                    if ($event['notes']) { $meta[] = implode(', ', $event['notes']); }
                                                @endphp
                                                <article class="event-card {{ $event['type'] === 'holiday' ? 'holiday' : '' }} {{ $isActive ? 'active-now' : '' }}"
                                                    style="--subject-ink: {{ $ink }}; --subject-bg: {{ $bg }};"
                                                    data-event
                                                    data-event-subjects="{{ implode('|', $event['subjects']) }}"
                                                    data-detail-event="{{ $eventKey }}"
                                                    role="button"
                                                    tabindex="0">
                                                    <div class="event-time">{{ $event['timeLabel'] }}</div>
                                                    <h4 class="event-title">{{ $event['title'] }}</h4>
                                                    @if($meta)
                                                        <p class="event-meta">{{ implode(' | ', $meta) }}</p>
                                                    @endif
                                                </article>
                                            @endforeach
                                        </div>
                                    @else
                                        <div class="empty-day">Keine Termine.</div>
                                    @endif
                                </article>
                            @endforeach
                        </div>
                    </div>
                @endforeach
            </section>
        @endif
    </div>
    @include('tools._ads_banner')
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
    const root = document.querySelector('[data-schedule-root]');
    if (!root) return;

    const scheduleDetails = @json($detailEvents);
    const chips = Array.from(root.querySelectorAll('[data-filter]'));
    const events = Array.from(root.querySelectorAll('[data-event]'));
    const counters = Array.from(root.querySelectorAll('[data-counter-subject]'));
    const weeks = Array.from(root.querySelectorAll('[data-week]'));
    const detailPanel = document.getElementById('schedule-detail');
    const detailTitle = document.getElementById('detail-title');
    const detailBody = document.getElementById('detail-body');
    const detailClose = document.getElementById('detail-close');

    function esc(text) {
        return String(text || '').replace(/[&<>"']/g, char => ({
            '&': '&amp;',
            '<': '&lt;',
            '>': '&gt;',
            '"': '&quot;',
            "'": '&#039;'
        }[char]));
    }

    function metaLine(item) {
        const parts = [];
        if (item.teachers && item.teachers.length) parts.push('Dozent: ' + item.teachers.join(', '));
        if (item.rooms && item.rooms.length) parts.push('Raum: ' + item.rooms.join(', '));
        if (item.notes && item.notes.length) parts.push(item.notes.join(', '));
        return parts.join(' | ') || 'Keine weiteren Angaben';
    }

    function teacherSummary(items) {
        const counts = new Map();
        items.forEach(item => {
            const teachers = item.teachers && item.teachers.length ? item.teachers : ['Ohne Dozent'];
            teachers.forEach(teacher => counts.set(teacher, (counts.get(teacher) || 0) + 1));
        });

        return Array.from(counts.entries())
            .sort((a, b) => b[1] - a[1] || a[0].localeCompare(b[0], 'de'))
            .map(([teacher, count]) => ({ teacher, count }));
    }

    function renderDetail(title, items, options = {}) {
        if (!detailPanel || !detailTitle || !detailBody) return;
        detailTitle.textContent = title;
        const teacherCards = options.showTeachers && items.length ? `
            <div class="detail-teachers">
                ${teacherSummary(items).map(row => `
                    <div class="detail-teacher-card">
                        <strong>${esc(row.teacher)}</strong>
                        <span>${row.count} ${row.count === 1 ? 'Termin' : 'Termine'} offen</span>
                    </div>
                `).join('')}
            </div>
        ` : '';

        const rows = items.length ? items.map(item => `
            <button class="detail-row" type="button" data-jump-event="${esc(item.key)}">
                <span>
                    <strong>${esc(item.weekday)}, ${esc(item.date)} · ${esc(item.title)}</strong>
                    <span>${esc(metaLine(item))}</span>
                </span>
                <span class="detail-pill">${esc(item.time)}</span>
            </button>
        `).join('') : '<div class="t-info">Keine kommenden Termine gefunden.</div>';
        detailBody.innerHTML = teacherCards + rows;
        detailPanel.classList.add('active');
        detailPanel.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
    }

    function showSubjectDetails(subject) {
        const items = Object.values(scheduleDetails).filter(item => (item.subjects || []).includes(subject));
        renderDetail(subject + ' Termine', items, { showTeachers: true });
        applyFilter(subject);
    }

    function showEventDetails(key) {
        const item = scheduleDetails[key];
        if (!item) return;
        renderDetail(item.title, [item]);
    }

    function activateKeyboard(el, callback) {
        el.addEventListener('keydown', event => {
            if (event.key === 'Enter' || event.key === ' ') {
                event.preventDefault();
                callback();
            }
        });
    }

    function applyFilter(subject) {
        chips.forEach(chip => chip.classList.toggle('active', chip.dataset.filter === subject));
        events.forEach(card => {
            const subjects = (card.dataset.eventSubjects || '').split('|').filter(Boolean);
            card.hidden = subject !== 'all' && !subjects.includes(subject);
        });
        counters.forEach(card => {
            card.hidden = subject !== 'all' && card.dataset.counterSubject !== subject;
        });
        weeks.forEach(week => {
            const visibleEvents = week.querySelectorAll('[data-event]:not([hidden])').length;
            week.hidden = subject !== 'all' && visibleEvents === 0;
        });
    }

    chips.forEach(chip => chip.addEventListener('click', () => applyFilter(chip.dataset.filter)));
    counters.forEach(card => {
        const subject = card.dataset.detailSubject;
        card.addEventListener('click', () => showSubjectDetails(subject));
        activateKeyboard(card, () => showSubjectDetails(subject));
    });
    events.forEach(card => {
        const key = card.dataset.detailEvent;
        card.addEventListener('click', () => showEventDetails(key));
        activateKeyboard(card, () => showEventDetails(key));
    });
    detailBody?.addEventListener('click', event => {
        const row = event.target.closest('[data-jump-event]');
        if (!row) return;
        const target = root.querySelector(`[data-detail-event="${CSS.escape(row.dataset.jumpEvent)}"]`);
        target?.scrollIntoView({ behavior: 'smooth', block: 'center' });
        target?.focus({ preventScroll: true });
    });
    detailClose?.addEventListener('click', () => detailPanel?.classList.remove('active'));

    const nextPanel = root.querySelector('[data-next]');
    if (!nextPanel) return;

    let payload = null;
    try { payload = JSON.parse(nextPanel.dataset.next || 'null'); } catch (error) { payload = null; }
    const hourNode = nextPanel.querySelector('[data-count-hours]');
    const minuteNode = nextPanel.querySelector('[data-count-minutes]');
    const secondNode = nextPanel.querySelector('[data-count-seconds]');

    function updateCountdown() {
        if (!payload || !hourNode || !minuteNode || !secondNode) return;
        const now = new Date();
        const start = new Date(payload.start);
        const end = new Date(payload.end);
        const target = now >= start && now <= end ? end : start;
        const diff = Math.max(0, target.getTime() - now.getTime());
        const hours = Math.floor(diff / 3600000);
        const minutes = Math.floor((diff % 3600000) / 60000);
        const seconds = Math.floor((diff % 60000) / 1000);

        hourNode.textContent = String(hours);
        minuteNode.textContent = String(minutes).padStart(2, '0');
        secondNode.textContent = String(seconds).padStart(2, '0');
    }

    updateCountdown();
    window.setInterval(updateCountdown, 1000);
});
</script>

@include('tools._seo_content', ['toolSlug' => 'stundenplan-cockpit', 'toolName' => 'Stundenplan Cockpit'])

@endsection