@extends('layouts.app', ['title' => 'Cargar asistencias', 'pageClass' => 'page-attendance-import'])

@section('content')
    @php
        $subject = $courseOffering;
        $career = $courseOffering->career;
    @endphp

    <section class="result-heading admin-page-head">
        <div>
            <p class="eyebrow">Asistencias</p>
            <h2>{{ $subject->name }}</h2>
            <p class="muted">{{ $career->code }} · {{ $subject->year_number }}° año · {{ $courseOffering->academic_year }}</p>
        </div>
        <a class="button-muted" href="{{ route('course-offerings.index') }}">Volver al panel</a>
    </section>

    <section class="panel attendance-import-toolbar">
        <form class="finder attendance-import-upload" method="GET" action="{{ route('course-offerings.attendance-import.create', $courseOffering) }}">
            <label>
                Seleccionar mes
                <input type="month" name="month" value="{{ $month }}" required onchange="this.form.submit()">
            </label>
        </form>
        <div class="attendance-import-subject-picker">
            <label>
                Cambiar materia
                <input type="search" data-attendance-subject-filter placeholder="Buscar materia" autocomplete="off">
            </label>
            <div class="attendance-import-subject-results" data-attendance-subject-results hidden>
                @foreach ($availableSubjects as $availableSubject)
                    <a
                        href="{{ route('course-offerings.attendance-import.create', ['courseOffering' => $availableSubject, 'month' => $month]) }}"
                        data-attendance-subject-option
                        data-search="{{ str($availableSubject->career->code.' '.$availableSubject->year_number.' '.$availableSubject->name)->ascii()->lower() }}"
                        class="{{ $availableSubject->id === $courseOffering->id ? 'is-current' : '' }}"
                    >
                        <strong>{{ $availableSubject->name }}</strong>
                        <span>{{ $availableSubject->career->code }} · {{ $availableSubject->year_number }}° año</span>
                    </a>
                @endforeach
                <p class="attendance-import-subject-empty" data-attendance-subject-empty hidden>No se encontraron materias.</p>
            </div>
        </div>
        <div class="attendance-import-print-actions">
            <a
                class="button-muted"
                href="{{ route('course-offerings.printable', ['courseOffering' => $courseOffering, 'month' => $month]) }}"
                target="_blank"
            >
                Imprimir vacía
            </a>
            <a
                class="button-muted button-secondary"
                href="{{ route('course-offerings.printable', ['courseOffering' => $courseOffering, 'month' => $month, 'filled' => 1]) }}"
                target="_blank"
            >
                Imprimir cargada
            </a>
            <a
                class="button-muted"
                href="{{ route('course-offerings.grades-printable', $courseOffering) }}"
                target="_blank"
            >
                Imprimir planilla de calificaciones
            </a>
        </div>
    </section>

    <section class="attendance-import-layout">
        <section class="panel attendance-import-preview">
            <div class="result-heading">
                <div>
                    <p class="eyebrow">Carga mensual</p>
                    <h3>Asistencias a guardar</h3>
                    <p class="muted">Solo se guardan las celdas con Presente o Ausente. Por defecto, Ausente se guarda como justificado; usá Ausente injust. solo cuando figure expresamente.</p>
                </div>
            </div>

            @if ($unmatchedRecordCount > 0)
                <div class="alert">
                    Hay {{ $unmatchedRecordCount }} marcas guardadas de alumnos que ya no figuran en esta cursada y no se muestran en la grilla actual.
                </div>
            @endif

            @if ($columns->isEmpty())
                <div class="empty-state">
                    Esta materia no tiene fechas disponibles para el mes seleccionado.
                </div>
            @else
                @php
                    $columnsByDate = $columns->groupBy('date_key');
                @endphp

                <form method="POST" action="{{ route('course-offerings.attendance-import.store', $courseOffering) }}">
                    @csrf
                    <input type="hidden" name="month" value="{{ $month }}">

                    <div class="attendance-import-tools">
                        <button type="button" class="button-muted" data-fill-all="present">Marcar todo P</button>
                        <button type="button" class="button-muted" data-fill-all="empty">Limpiar todo</button>
                    </div>

                    <div class="monthly-table-wrap attendance-import-table-wrap">
                        <table class="print-table attendance-import-table">
                            <thead>
                                <tr>
                                    <th class="col-number" rowspan="2">N°</th>
                                    <th class="col-student attendance-import-student-head" rowspan="2">Alumnos</th>
                                    @foreach ($columnsByDate as $dateColumns)
                                        @php
                                            $firstColumn = $dateColumns->first();
                                        @endphp
                                        <th
                                            colspan="{{ $dateColumns->count() }}"
                                            class="attendance-import-date-head {{ $firstColumn['is_non_computable'] ? 'holiday-head' : '' }} {{ $firstColumn['is_virtual'] ? 'virtual-head' : '' }}"
                                        >
                                            {{ $firstColumn['day_name'] }} {{ $firstColumn['date']->format('d/m') }}
                                            @if ($firstColumn['calendar_event'])
                                                <span class="attendance-import-holiday-label">{{ $firstColumn['calendar_event']->event_type }}</span>
                                            @endif
                                        </th>
                                    @endforeach
                                </tr>
                                <tr>
                                    @foreach ($columns as $column)
                                        <th class="attendance-import-module-head {{ $column['is_non_computable'] ? 'holiday-head' : '' }} {{ $column['is_virtual'] ? 'virtual-head' : '' }}">
                                            <small>{{ $column['time_slot'] }}</small>
                                            <div>{{ $column['module_number'] }}° hora</div>
                                            @if ($column['is_non_computable'])
                                                <span>No computa</span>
                                            @endif
                                        </th>
                                    @endforeach
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($enrollments as $enrollment)
                                    <tr>
                                        <td class="col-number">{{ $loop->iteration }}</td>
                                        <td class="col-student">
                                            <div class="attendance-import-student-cell">
                                                <span title="{{ $enrollment->student->full_name }}">{{ $enrollment->student->full_name }}</span>
                                                <div class="attendance-import-row-actions">
                                                    <button type="button" data-fill-row="{{ $enrollment->id }}" data-status="present">P</button>
                                                    <button type="button" data-fill-row="{{ $enrollment->id }}" data-status="empty">Limpiar</button>
                                                </div>
                                            </div>
                                        </td>
                                        @foreach ($columns as $column)
                                            <td class="{{ $column['is_non_computable'] ? 'holiday-mark' : '' }}">
                                                @if ($column['is_non_computable'])
                                                    <span class="attendance-import-disabled-cell">No computa</span>
                                                @else
                                                    @php
                                                        $storedStatus = $recordsMatrix[$enrollment->id][$column['key']] ?? \App\Models\AttendanceRecord::EMPTY;
                                                        $storedStatusClass = [
                                                            \App\Models\AttendanceRecord::PRESENT => 'is-present',
                                                            \App\Models\AttendanceRecord::ABSENT => 'is-absent',
                                                            \App\Models\AttendanceRecord::JUSTIFIED => 'is-justified',
                                                        ][$storedStatus] ?? '';
                                                    @endphp
                                                    <select
                                                        name="records[{{ $enrollment->id }}][{{ $column['key'] }}]"
                                                        class="{{ $storedStatusClass }}"
                                                        data-import-status
                                                        data-column-key="{{ $column['key'] }}"
                                                        data-row-key="{{ $enrollment->id }}"
                                                    >
                                                        @foreach ($statusOptions as $statusValue => $statusLabel)
                                                            <option value="{{ $statusValue }}" @selected($storedStatus === $statusValue)>{{ $statusLabel }}</option>
                                                        @endforeach
                                                    </select>
                                                @endif
                                            </td>
                                        @endforeach
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>

                    <div class="form-actions">
                        <button type="submit">Confirmar carga</button>
                    </div>
                </form>
            @endif
        </section>
    </section>

    <script>
        const statusSelects = document.querySelectorAll('[data-import-status]');
        const subjectFilter = document.querySelector('[data-attendance-subject-filter]');
        const subjectResults = document.querySelector('[data-attendance-subject-results]');
        const subjectOptions = document.querySelectorAll('[data-attendance-subject-option]');
        const subjectEmpty = document.querySelector('[data-attendance-subject-empty]');

        function normalizeSubjectSearch(value) {
            return value.normalize('NFD').replace(/[\u0300-\u036f]/g, '').toLowerCase().trim();
        }

        function filterSubjects() {
            const term = normalizeSubjectSearch(subjectFilter.value);
            let visibleCount = 0;

            if (!term) {
                subjectResults.hidden = true;
                return;
            }

            subjectOptions.forEach((option) => {
                const visible = option.dataset.search.includes(term);
                option.hidden = !visible;
                if (visible) visibleCount++;
            });

            subjectEmpty.hidden = visibleCount !== 0;
            subjectResults.hidden = false;
        }

        if (subjectFilter) {
            subjectFilter.addEventListener('input', filterSubjects);
            subjectFilter.addEventListener('keydown', (event) => {
                if (event.key === 'Escape') {
                    subjectFilter.value = '';
                    subjectResults.hidden = true;
                }
            });

            document.addEventListener('click', (event) => {
                if (!event.target.closest('.attendance-import-subject-picker')) {
                    subjectResults.hidden = true;
                }
            });
        }

        function paintImportStatus(select) {
            select.classList.remove('is-present', 'is-absent', 'is-justified');
            if (select.value === 'present') select.classList.add('is-present');
            if (select.value === 'absent') select.classList.add('is-absent');
            if (select.value === 'justified') select.classList.add('is-justified');
        }

        statusSelects.forEach((select) => {
            paintImportStatus(select);
            select.addEventListener('change', () => paintImportStatus(select));
        });

        document.querySelectorAll('[data-fill-all]').forEach((button) => {
            button.addEventListener('click', () => {
                statusSelects.forEach((select) => {
                    select.value = button.dataset.fillAll;
                    paintImportStatus(select);
                });
            });
        });

        document.querySelectorAll('[data-fill-row]').forEach((button) => {
            button.addEventListener('click', () => {
                document.querySelectorAll(`[data-row-key="${button.dataset.fillRow}"]`).forEach((select) => {
                    select.value = button.dataset.status;
                    paintImportStatus(select);
                });
            });
        });
    </script>
@endsection