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

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

    <section class="hero-card compact">
        <div>
            <p class="eyebrow">Carga de asistencia</p>
            <h2>{{ $subject->name }}</h2>
            <p>
                {{ $career->code }} &middot; {{ $subject->year_number }}&deg; a&ntilde;o &middot;
                {{ $classDate->format('d/m/Y') }} &middot;
                Docente: {{ $courseOffering->teacher?->name ?? 'A confirmar' }}
            </p>
            <p class="muted">
                La carga se hace por fecha completa. Cada columna representa una hora c&aacute;tedra de ese d&iacute;a.
            </p>
        </div>

        <div class="attendance-edit-tools">
            <form method="GET" action="{{ route('course-offerings.attendance.edit', $courseOffering) }}" class="admin-card stack-form">
                <label>
                    Fecha de clase
                    <select name="class_date" onchange="this.form.submit()">
                        @foreach ($validClassDates as $validDate)
                            <option value="{{ $validDate['value'] }}" @selected($validDate['value'] === $classDate->format('Y-m-d'))>
                                {{ $validDate['label'] }}
                            </option>
                        @endforeach
                    </select>
                </label>
                <button type="submit">Cambiar fecha</button>
            </form>

            <div class="attendance-edit-actions">
                <a class="button-muted" target="_blank" href="{{ route('course-offerings.printable', [
                    'courseOffering' => $courseOffering,
                    'month' => $classDate->format('Y-m'),
                ]) }}">
                    Plantilla vac&iacute;a
                </a>
                <a class="button-muted" target="_blank" href="{{ route('course-offerings.printable', [
                    'courseOffering' => $courseOffering,
                    'month' => $classDate->format('Y-m'),
                    'filled' => 1,
                ]) }}">
                    Plantilla cargada
                </a>
            </div>
        </div>
    </section>

    <section class="panel">
        <p class="help-text">
            La fecha queda <strong>pendiente</strong> hasta que guardes. En pantalla se muestra
            <strong>Presente</strong> por defecto para agilizar la carga, y pod&eacute;s cambiar solamente
            las excepciones: ausente o justificado.
        </p>

        <form method="POST" action="{{ route('course-offerings.attendance.update', $courseOffering) }}">
            @csrf
            @method('PUT')
            <input type="hidden" name="class_date" value="{{ $classDate->format('Y-m-d') }}">

            <div class="table-wrap">
                <table class="data-table">
                    <thead>
                        <tr>
                            <th>N&deg;</th>
                            <th>Alumno</th>
                            <th>DNI</th>
                            <th>Condici&oacute;n</th>
                            @foreach ($sessions as $session)
                                <th>
                                    {{ $session->module_number ?: $loop->iteration }}&deg; hora
                                    <br>
                                    <small>{{ $session->scheduleSlot?->time_slot ?? 'Sin horario' }}</small>
                                </th>
                            @endforeach
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($enrollments as $enrollment)
                            <tr>
                                <td>{{ $loop->iteration }}</td>
                                <td>{{ $enrollment->student->full_name }}</td>
                                <td>{{ $enrollment->student->dni }}</td>
                                <td>{{ $enrollment->status }}</td>
                                @foreach ($sessions as $session)
                                    @php
                                        $record = $recordsMatrix[$enrollment->id][$session->id] ?? null;
                                        $selectedStatus = $record?->status === \App\Models\AttendanceRecord::EMPTY
                                            ? \App\Models\AttendanceRecord::PRESENT
                                            : ($record?->status ?? \App\Models\AttendanceRecord::PRESENT);
                                    @endphp
                                    <td>
                                        <select
                                            name="records[{{ $enrollment->id }}][{{ $session->id }}][status]"
                                            class="attendance-status-select"
                                            data-attendance-status
                                        >
                                            @foreach ($statusLabels as $value => $label)
                                                <option value="{{ $value }}" @selected($selectedStatus === $value)>
                                                    {{ $label }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </td>
                                @endforeach
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            <div class="form-actions">
                <a class="button-muted" href="{{ route('course-offerings.index', [
                    'career' => $career->code,
                    'q' => $subject->name,
                    'course_offering_id' => $courseOffering->id,
                ]) }}">Volver</a>
                <button type="submit">Guardar asistencia</button>
            </div>
        </form>

        <form method="POST" action="{{ route('course-offerings.attendance.clear', $courseOffering) }}" class="attendance-clear-form">
            @csrf
            <input type="hidden" name="class_date" value="{{ $classDate->format('Y-m-d') }}">
            <button type="submit" class="button-muted">Borrar d&iacute;a</button>
        </form>
    </section>

    <script>
        const statusSelects = document.querySelectorAll('[data-attendance-status]');

        function applyAttendanceStatusClass(select) {
            select.classList.remove('is-present', 'is-absent', 'is-justified');

            if (select.value === 'present') {
                select.classList.add('is-present');
                return;
            }

            if (select.value === 'absent') {
                select.classList.add('is-absent');
                return;
            }

            if (select.value === 'justified') {
                select.classList.add('is-justified');
            }
        }

        statusSelects.forEach((select) => {
            applyAttendanceStatusClass(select);
            select.addEventListener('change', () => applyAttendanceStatusClass(select));
        });
    </script>
@endsection