@extends('layouts.app', ['title' => 'Calendario semanal'])

@section('content')
    @php
        $subjectDetails = $subjects->mapWithKeys(function ($subject) {
            return [
                $subject->id => [
                    'title' => $subject->name,
                    'career' => $subject->career->code.' · '.$subject->year_number.'° año',
                    'teacher' => $subject->teacher?->name ?? 'Docente a confirmar',
                    'students' => $subject->enrollments
                        ->sortBy('student.full_name')
                        ->map(fn ($enrollment) => [
                            'name' => $enrollment->student->full_name,
                            'status' => $enrollment->status,
                        ])
                        ->values(),
                    'schedule' => $subject->scheduleSlots
                        ->sortBy(['day_of_week', 'time_slot'])
                        ->map(fn ($slot) => trim($slot->day_of_week.' · '.$slot->time_slot.($slot->classroom ? ' · '.$slot->classroom : '')))
                        ->values(),
                ],
            ];
        });
    @endphp

    <section class="hero-card compact weekly-calendar-hero">
        <div>
            <h2>Calendario académico</h2>
            <p>
                Vista operativa de las materias cargadas: los días están en columnas y las horas cátedra en filas.
            </p>
        </div>
        <div class="metric-grid">
            <strong data-weekly-subject-count>{{ number_format($subjectsCount, 0, ',', '.') }}</strong>
            <span>materias con horario</span>
        </div>
    </section>

    <section class="panel weekly-calendar-filters">
        <form class="filters filters-wide" method="GET" action="{{ route('weekly-calendar.index') }}">
            <label>
                Carrera
                <select name="career_id">
                    <option value="">Todas</option>
                    @foreach ($careers as $career)
                        <option value="{{ $career->id }}" @selected($careerId === $career->id)>{{ $career->code }} · {{ $career->name }}</option>
                    @endforeach
                </select>
            </label>
            <label>
                Año
                <select name="year_number">
                    <option value="">Todos</option>
                    @foreach ($yearOptions as $year)
                        <option value="{{ $year }}" @selected($yearNumber === $year)>{{ $year }}° año</option>
                    @endforeach
                </select>
            </label>
            <label>
                Materia
                <input type="search" data-weekly-subject-filter placeholder="Buscar materia" autocomplete="off">
            </label>
            <button type="submit">Filtrar</button>
            <a class="button-muted" href="{{ route('weekly-calendar.index') }}">Limpiar</a>
        </form>
    </section>

    <section class="panel weekly-calendar-panel">
        <div class="weekly-calendar-table-wrap">
            <div class="weekly-calendar-table" style="--calendar-days: {{ count($dayOptions) }}">
                <div class="weekly-calendar-corner">Hora</div>
                @foreach ($dayOptions as $dayLabel)
                    <div class="weekly-calendar-head">{{ $dayLabel }}</div>
                @endforeach

                @foreach ($timeSlots as $timeSlot)
                    <div class="weekly-calendar-time">{{ $timeSlot }}</div>
                    @foreach ($dayOptions as $dayKey => $dayLabel)
                        <div class="weekly-calendar-cell">
                            @forelse ($grid[$timeSlot][$dayKey] as $entry)
                                @php
                                    $subject = $entry['subject'];
                                    $slot = $entry['slot'];
                                @endphp
                                <button
                                    type="button"
                                    class="weekly-class-card"
                                    data-subject-id="{{ $subject->id }}"
                                    data-subject-name="{{ str($subject->name)->ascii()->lower() }}"
                                >
                                    <span>{{ $subject->career->code }} · {{ $subject->year_number }}°</span>
                                    <strong>{{ $subject->name }}</strong>
                                    <small>{{ $subject->teacher?->name ?? 'Docente a confirmar' }}</small>
                                    @if ($slot->classroom)
                                        <em>{{ $slot->classroom }}</em>
                                    @endif
                                </button>
                            @empty
                                <span class="weekly-calendar-empty"></span>
                            @endforelse
                        </div>
                    @endforeach
                @endforeach
            </div>
        </div>
    </section>

    <div class="weekly-detail-backdrop" data-weekly-detail-backdrop hidden>
        <section class="weekly-detail-panel" role="dialog" aria-modal="true" aria-labelledby="weeklyDetailTitle">
            <div class="weekly-detail-head">
                <div>
                    <p class="eyebrow" data-weekly-detail-career></p>
                    <h3 id="weeklyDetailTitle" data-weekly-detail-title></h3>
                    <p data-weekly-detail-teacher></p>
                </div>
                <button type="button" class="button-muted weekly-detail-close" data-weekly-detail-close>Cerrar</button>
            </div>

            <div class="weekly-detail-grid">
                <article>
                    <h4>Días y horarios</h4>
                    <ul class="weekly-detail-list" data-weekly-detail-schedule></ul>
                </article>
                <article>
                    <h4>Alumnos</h4>
                    <ul class="weekly-detail-list weekly-detail-students" data-weekly-detail-students></ul>
                </article>
            </div>
        </section>
    </div>

    <script type="application/json" id="weeklySubjectDetails">@json($subjectDetails)</script>
    <script>
        const weeklyDetails = JSON.parse(document.getElementById('weeklySubjectDetails').textContent);
        const detailBackdrop = document.querySelector('[data-weekly-detail-backdrop]');
        const detailTitle = document.querySelector('[data-weekly-detail-title]');
        const detailCareer = document.querySelector('[data-weekly-detail-career]');
        const detailTeacher = document.querySelector('[data-weekly-detail-teacher]');
        const detailSchedule = document.querySelector('[data-weekly-detail-schedule]');
        const detailStudents = document.querySelector('[data-weekly-detail-students]');
        const subjectFilter = document.querySelector('[data-weekly-subject-filter]');
        const subjectCount = document.querySelector('[data-weekly-subject-count]');
        const subjectCards = Array.from(document.querySelectorAll('.weekly-class-card'));

        const normalizeSearch = (value) => value
            .normalize('NFD')
            .replace(/[\u0300-\u036f]/g, '')
            .toLowerCase()
            .trim();

        subjectFilter.addEventListener('input', () => {
            const search = normalizeSearch(subjectFilter.value);
            const visibleSubjectIds = new Set();

            subjectCards.forEach((card) => {
                const matches = card.dataset.subjectName.includes(search);
                card.hidden = !matches;

                if (matches) {
                    visibleSubjectIds.add(card.dataset.subjectId);
                }
            });

            subjectCount.textContent = visibleSubjectIds.size.toLocaleString('es-AR');
        });

        const fillList = (list, items, emptyText, renderItem) => {
            list.innerHTML = '';
            if (!items.length) {
                const empty = document.createElement('li');
                empty.className = 'weekly-detail-empty';
                empty.textContent = emptyText;
                list.appendChild(empty);
                return;
            }

            items.forEach((item) => {
                const li = document.createElement('li');
                renderItem(li, item);
                list.appendChild(li);
            });
        };

        document.querySelectorAll('[data-subject-id]').forEach((button) => {
            button.addEventListener('click', () => {
                const detail = weeklyDetails[button.dataset.subjectId];
                if (!detail) {
                    return;
                }

                detailTitle.textContent = detail.title;
                detailCareer.textContent = detail.career;
                detailTeacher.textContent = `Profesor: ${detail.teacher}`;
                fillList(detailSchedule, detail.schedule, 'No hay horarios cargados.', (li, item) => {
                    li.textContent = item;
                });
                fillList(detailStudents, detail.students, 'No hay alumnos inscriptos.', (li, item) => {
                    const name = document.createElement('strong');
                    const status = document.createElement('span');
                    name.textContent = item.name;
                    status.textContent = item.status;
                    li.append(name, status);
                });

                detailBackdrop.hidden = false;
            });
        });

        document.querySelector('[data-weekly-detail-close]').addEventListener('click', () => {
            detailBackdrop.hidden = true;
        });

        detailBackdrop.addEventListener('click', (event) => {
            if (event.target === detailBackdrop) {
                detailBackdrop.hidden = true;
            }
        });

        document.addEventListener('keydown', (event) => {
            if (event.key === 'Escape') {
                detailBackdrop.hidden = true;
            }
        });
    </script>
@endsection