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

@section('content')
    <section class="hero-card">
        <div>
            <p class="eyebrow">Consultas</p>
            <h2>Buscar información académica</h2>
            <p>
                Podés consultar la cursada actual de un alumno, abrir su historial académico completo o ver la
                nómina de una materia con su estado de asistencia cargado hasta el momento.
            </p>
        </div>
    </section>

    <section class="consult-grid">
        <article class="panel">
            <h3>Buscar alumno</h3>
            <form class="stack-form" method="GET" action="{{ route('consultations.index') }}" id="studentFinder">
                <input type="hidden" name="student_id" id="studentId" value="{{ $filters['student_id'] ?? '' }}">
                <label class="inline-check filter-toggle">
                    <input type="checkbox" name="ex_students" value="1" @checked($showExStudents) onchange="this.form.submit()">
                    <span>ExAlumnos</span>
                </label>
                <label>
                    Nombre, DNI o correo
                    <input type="search" id="studentSearch" placeholder="Ej: Gómez, 31007258 o correo" autocomplete="off">
                </label>
                <select id="studentSelect">
                    <option value="">Seleccionar alumno</option>
                </select>
                <button type="submit">Ver alumno</button>
            </form>
            <div class="suggestions compact-suggestions" id="studentSuggestions"></div>
        </article>

        <article class="panel">
            <h3>Buscar por materia</h3>
            <form class="stack-form" method="GET" action="{{ route('consultations.index') }}" id="courseFinderConsult">
                <input type="hidden" name="course_offering_id" id="consultCourseOfferingId" value="{{ $filters['course_offering_id'] ?? '' }}">
                <label>
                    Carrera
                    <select name="career" id="consultCareer">
                        <option value="">Todas</option>
                        <option value="BT" @selected(($filters['career'] ?? '') === 'BT')>BT - Bachillerato</option>
                        <option value="CS" @selected(($filters['career'] ?? '') === 'CS')>CS - Profesorado</option>
                    </select>
                </label>
                <label>
                    Año
                    <select name="year" id="consultYear">
                        <option value="">Todos</option>
                        @for ($year = 1; $year <= 5; $year++)
                            <option value="{{ $year }}" @selected(($filters['year'] ?? '') == $year)>{{ $year }}° año</option>
                        @endfor
                    </select>
                </label>
                <label>
                    Materia
                    <input type="search" name="q" id="consultSubjectSearch" value="{{ $filters['q'] ?? '' }}" placeholder="Ej: Eclesiología" autocomplete="off">
                </label>
                <select id="consultSubjectSelect">
                    <option value="">Seleccionar materia</option>
                </select>
                <button type="submit">Ver materia</button>
            </form>
        </article>
    </section>

    @if ($selectedStudent)
        <section class="panel result-panel">
            <div class="result-heading">
                <div>
                    <p class="eyebrow">Alumno</p>
                    <h2>{{ $selectedStudent->full_name }}</h2>
                    <p class="muted">
                        DNI: {{ $selectedStudent->dni ?: 'Sin dato' }} ·
                        Email: {{ $selectedStudent->email ?: 'Sin dato' }}
                    </p>
                </div>
                <div class="history-action-group">
                    @if (($selectedStudent->academic_profiles_count ?? 0) > 0)
                        <a href="{{ route('consultations.student-history', $selectedStudent) }}" class="button-muted">
                            Historial
                        </a>
                    @endif
                    <a href="{{ route('consultations.print-student', $selectedStudent) }}" class="button-print" target="_blank">
                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <polyline points="6 9 6 2 18 2 18 9"></polyline>
                            <path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"></path>
                            <rect x="6" y="14" width="12" height="8"></rect>
                        </svg>
                        Imprimir actual / PDF
                    </a>
                </div>
            </div>

            @php
                $currentEnrollments = $selectedStudent->enrollments
                    ->sortBy(fn ($enrollment) => $enrollment->subject->career->code.'-'.$enrollment->subject->year_number.'-'.$enrollment->subject->name)
                    ->groupBy(fn ($enrollment) => $enrollment->subject->career->code.' · '.$enrollment->subject->year_number.'° año');
            @endphp

            @if ($currentEnrollments->isEmpty())
                <div class="empty-state">
                    Este alumno no tiene materias cursándose hoy en el sistema.
                    @if (($selectedStudent->academic_profiles_count ?? 0) > 0)
                        <div class="empty-actions">
                            <a href="{{ route('consultations.student-history', $selectedStudent) }}" class="button-muted">
                                Ver historial académico
                            </a>
                        </div>
                    @endif
                </div>
            @else
                @foreach ($currentEnrollments as $group => $enrollments)
                    <h3 class="group-title">{{ $group }}</h3>
                    <div class="table-wrap">
                        <table class="data-table">
                            <thead>
                                <tr>
                                    <th>Materia</th>
                                    <th>Docente</th>
                                    <th>Condición</th>
                                    <th>% Presente</th>
                                    <th>% Ausente</th>
                                    <th>% Justificado</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($enrollments as $enrollment)
                                    @php
                                        $summary = \App\Http\Controllers\ConsultationController::attendanceSummary($enrollment);
                                    @endphp
                                    <tr>
                                        <td>{{ $enrollment->subject->name }}</td>
                                        <td>{{ $enrollment->subject->teacher?->name ?? 'A confirmar' }}</td>
                                        <td>{{ $enrollment->status }}</td>
                                        <td>{{ $summary['present_pct'] !== null ? $summary['present_pct'].'%' : 'Sin carga' }}</td>
                                        <td>{{ $summary['absent_pct'] !== null ? $summary['absent_pct'].'%' : 'Sin carga' }}</td>
                                        <td>{{ $summary['justified_pct'] !== null ? $summary['justified_pct'].'%' : 'Sin carga' }}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @endforeach
            @endif
        </section>
    @endif

    @if ($selectedCourseOffering)
        @php
            $subject = $selectedCourseOffering;
            $career = $subject->career;
            $enrollments = $subject->enrollments->sortBy(fn ($enrollment) => $enrollment->student->full_name, SORT_NATURAL | SORT_FLAG_CASE);
        @endphp

        <section class="panel result-panel">
            <div class="result-heading">
                <div>
                    <p class="eyebrow">Materia</p>
                    <h2>{{ $subject->name }}</h2>
                    <p class="muted">
                        {{ $career->name }} · {{ $subject->year_number }}° año ·
                        Docente: {{ $subject->teacher?->name ?? 'A confirmar' }}
                    </p>
                </div>
                <div style="display: flex; align-items: center; gap: 1rem;">
                    <strong class="result-count">{{ $enrollments->count() }} alumnos</strong>
                    <a href="{{ route('consultations.print-subject', $subject) }}" class="button-print" target="_blank">
                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <polyline points="6 9 6 2 18 2 18 9"></polyline>
                            <path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"></path>
                            <rect x="6" y="14" width="12" height="8"></rect>
                        </svg>
                        Imprimir / Exportar PDF
                    </a>
                </div>
            </div>

            <div class="table-wrap">
                <table class="data-table">
                    <thead>
                        <tr>
                            <th>N°</th>
                            <th>Alumno</th>
                            <th>DNI</th>
                            <th>Condición</th>
                            <th>% Presente</th>
                            <th>% Ausente</th>
                            <th>% Justificado</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($enrollments as $enrollment)
                            @php
                                $summary = \App\Http\Controllers\ConsultationController::attendanceSummary($enrollment);
                            @endphp
                            <tr>
                                <td>{{ $loop->iteration }}</td>
                                <td>{{ $enrollment->student->full_name }}</td>
                                <td>{{ $enrollment->student->dni }}</td>
                                <td>{{ $enrollment->status }}</td>
                                <td>{{ $summary['present_pct'] !== null ? $summary['present_pct'].'%' : 'Sin carga' }}</td>
                                <td>{{ $summary['absent_pct'] !== null ? $summary['absent_pct'].'%' : 'Sin carga' }}</td>
                                <td>{{ $summary['justified_pct'] !== null ? $summary['justified_pct'].'%' : 'Sin carga' }}</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </section>
    @endif

    <script>
        const students = @json($studentOptions);
        const courses = @json($courseOptionRows);

        function normalize(text) {
            return String(text || '').normalize('NFD').replace(/[\u0300-\u036f]/g, '').toLowerCase();
        }

        const studentSearch = document.getElementById('studentSearch');
        const studentSelect = document.getElementById('studentSelect');
        const studentId = document.getElementById('studentId');
        const studentSuggestions = document.getElementById('studentSuggestions');
        const studentFinder = document.getElementById('studentFinder');

        function renderStudents() {
            const query = normalize(studentSearch.value.trim());
            const matches = students
                .filter((student) => !query || normalize(student.search).includes(query))
                .slice(0, query ? 10 : 0);

            studentSelect.innerHTML = '<option value="">Seleccionar alumno</option>';
            studentSuggestions.innerHTML = '';

            for (const student of matches) {
                const option = document.createElement('option');
                option.value = student.id;
                option.textContent = `${student.name} · ${student.dni || 'sin DNI'}`;
                studentSelect.appendChild(option);

                const link = document.createElement('a');
                link.className = 'suggestion-card';
                link.href = `{{ route('consultations.index') }}?student_id=${student.id}`;
                link.innerHTML = `<strong>${student.name}</strong><span>DNI: ${student.dni || 'Sin dato'} · ${student.email || 'Sin correo'}</span>`;
                studentSuggestions.appendChild(link);
            }
        }

        studentSearch.addEventListener('input', () => {
            studentId.value = '';
            renderStudents();
        });
        studentSelect.addEventListener('change', () => studentId.value = studentSelect.value);
        studentFinder.addEventListener('submit', () => {
            if (!studentId.value && studentSelect.value) studentId.value = studentSelect.value;
        });

        const consultCareer = document.getElementById('consultCareer');
        const consultYear = document.getElementById('consultYear');
        const consultSubjectSearch = document.getElementById('consultSubjectSearch');
        const consultSubjectSelect = document.getElementById('consultSubjectSelect');
        const consultCourseOfferingId = document.getElementById('consultCourseOfferingId');
        const courseFinderConsult = document.getElementById('courseFinderConsult');

        function renderCourses() {
            const career = consultCareer.value;
            const year = consultYear.value;
            const query = normalize(consultSubjectSearch.value.trim());
            const matches = courses
                .filter((course) => !career || course.career === career)
                .filter((course) => !year || String(course.year) === year)
                .filter((course) => !query || normalize(course.search).includes(query));

            consultSubjectSelect.innerHTML = '<option value="">Seleccionar materia</option>';
            for (const course of matches) {
                const option = document.createElement('option');
                option.value = course.id;
                option.textContent = `${course.career} ${course.year}° - ${course.subject} - ${course.teacher}`;
                consultSubjectSelect.appendChild(option);
            }
        }

        [consultCareer, consultYear, consultSubjectSearch].forEach((field) => {
            field.addEventListener('input', () => {
                consultCourseOfferingId.value = '';
                renderCourses();
            });
            field.addEventListener('change', () => {
                consultCourseOfferingId.value = '';
                renderCourses();
            });
        });
        consultSubjectSelect.addEventListener('change', () => consultCourseOfferingId.value = consultSubjectSelect.value);
        courseFinderConsult.addEventListener('submit', () => {
            if (!consultCourseOfferingId.value && consultSubjectSelect.value) {
                consultCourseOfferingId.value = consultSubjectSelect.value;
            }
        });

        renderStudents();
        renderCourses();
    </script>
@endsection