@extends('layouts.app', ['title' => 'Administración · Materias', 'pageClass' => 'page-admin'])

@section('content')
    <section class="result-heading admin-page-head">
        <div>
            <p class="eyebrow">Administración</p>
            <h2>Materias</h2>
        </div>
        <a class="button-muted" href="{{ route('admin.dashboard') }}">Volver al panel</a>
    </section>

    @include('admin.partials.nav', ['active' => 'subjects'])

    <section class="panel">
        <div class="result-heading admin-toolbar">
            <form class="filters subjects-filters" id="subjectsFilters" onsubmit="return false;">
                <label>
                    Carrera
                    <select id="subjectCareerFilter" name="career_id">
                        <option value="">Todas</option>
                        @foreach ($careers as $career)
                            <option value="{{ $career->id }}" @selected($careerFilter === $career->id)>{{ $career->code }} · {{ $career->name }}</option>
                        @endforeach
                    </select>
                </label>
                <label>
                    Año
                    <select id="subjectYearFilter" name="year_number">
                        <option value="">Todos</option>
                        @for ($year = 1; $year <= 6; $year++)
                            <option value="{{ $year }}" @selected($yearFilter === $year)>{{ $year }}°</option>
                        @endfor
                    </select>
                </label>
                <label>
                    Docente
                    <select id="subjectTeacherFilter" name="teacher_id">
                        <option value="">Todos</option>
                        @foreach ($teachers as $teacher)
                            <option value="{{ $teacher->id }}" @selected($teacherFilter === $teacher->id)>{{ $teacher->name }}</option>
                        @endforeach
                    </select>
                </label>
                <label>
                    Buscar
                    <input type="search" id="subjectSearchFilter" name="q" value="{{ $search }}" placeholder="Materia, formato o docente">
                </label>
            </form>

            <div class="admin-toolbar-actions">
                <a class="button-muted" href="{{ route('admin.subjects.index') }}">Limpiar</a>
                <button type="button" class="button-muted" id="printSubjectsTable">Imprimir</button>
                <button type="button" id="exportSubjectsTable">Excel</button>
            </div>
        </div>

        <div class="table-wrap">
            <table class="data-table subjects-table" id="subjectsTable">
                <thead>
                    <tr>
                        <th class="col-career">Carrera</th>
                        <th class="col-year">Año</th>
                        <th class="col-subject">Materia</th>
                        <th class="col-format">Formato</th>
                        <th class="col-teachers">Docentes</th>
                        <th class="col-count">Alumnos</th>
                        <th class="col-count">Horarios</th>
                        <th class="col-actions">Acciones</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($subjects as $subject)
                        @php
                            $enrollmentsCount = $subject->enrollments_count;
                            $scheduleSlotsCount = $subject->schedule_slots_count;
                            $teachersLabel = $subject->teacher?->name ?? 'A confirmar';
                        @endphp
                        <tr
                            data-career="{{ $subject->career_id }}"
                            data-year="{{ $subject->year_number }}"
                            data-teachers="{{ strtolower($teachersLabel) }}"
                            data-teacher-ids="{{ $subject->teacher_id ?? '' }}"
                            data-search="{{ strtolower($subject->name.' '.$subject->format.' '.$subject->semester.' '.$teachersLabel) }}"
                        >
                            <td class="col-career">
                                <select form="subject-update-{{ $subject->id }}" name="career_id">
                                    @foreach ($careers as $career)
                                        <option value="{{ $career->id }}" @selected($subject->career_id === $career->id)>{{ $career->code }}</option>
                                    @endforeach
                                </select>
                            </td>
                            <td class="col-year">
                                <input form="subject-update-{{ $subject->id }}" type="number" min="1" max="10" name="year_number" value="{{ $subject->year_number }}">
                            </td>
                            <td class="col-subject">
                                <input form="subject-update-{{ $subject->id }}" type="text" name="name" value="{{ $subject->name }}">
                            </td>
                            <td class="col-format">
                                <div class="subject-format-grid">
                                    <input form="subject-update-{{ $subject->id }}" type="text" name="format" value="{{ $subject->format }}" placeholder="Formato">
                                    <input form="subject-update-{{ $subject->id }}" type="text" name="semester" value="{{ $subject->semester }}" placeholder="Sem">
                                </div>
                            </td>
                            <td class="col-teachers">
                                <select form="subject-update-{{ $subject->id }}" name="teacher_id">
                                    <option value="">A confirmar</option>
                                    @foreach ($teachers as $teacher)
                                        <option value="{{ $teacher->id }}" @selected($subject->teacher_id === $teacher->id)>{{ $teacher->name }}</option>
                                    @endforeach
                                </select>
                            </td>
                            <td class="col-count">{{ $enrollmentsCount }}</td>
                            <td class="col-count">{{ $scheduleSlotsCount }}</td>
                            <td class="action-cell compact-actions col-actions">
                                <form id="subject-update-{{ $subject->id }}" method="POST" action="{{ route('admin.subjects.update', $subject) }}">
                                    @csrf
                                    @method('PUT')
                                    <input type="hidden" name="theoretical_hours" value="{{ $subject->theoretical_hours }}">
                                    <input type="hidden" name="classroom_hours" value="{{ $subject->classroom_hours }}">
                                    <button type="submit">Guardar</button>
                                </form>
                                <a class="button-muted" href="{{ route('admin.course-offerings.manage', $subject) }}">Administrar</a>
                                <form method="POST" action="{{ route('admin.subjects.destroy', $subject) }}">
                                    @csrf
                                    @method('DELETE')
                                    <button class="button-muted" type="submit">Eliminar</button>
                                </form>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </section>

    <section class="panel" style="margin-top: 1.5rem;">
        <p class="eyebrow">Nueva materia</p>
        <h3>Alta manual</h3>
        <form class="stack-form" method="POST" action="{{ route('admin.subjects.store') }}">
            @csrf
            <label>
                Carrera
                <select name="career_id">
                    @foreach ($careers as $career)
                        <option value="{{ $career->id }}">{{ $career->code }} · {{ $career->name }}</option>
                    @endforeach
                </select>
            </label>
            <label>
                Año
                <input type="number" name="year_number" min="1" max="10" value="1">
            </label>
            <label>
                Materia
                <input type="text" name="name">
            </label>
            <label>
                Formato
                <input type="text" name="format">
            </label>
            <label>
                Semestre
                <input type="text" name="semester">
            </label>
            <label>
                HC teóricas
                <input type="text" name="theoretical_hours">
            </label>
            <label>
                HC aula
                <input type="text" name="classroom_hours">
            </label>
            <button type="submit">Crear materia</button>
        </form>
    </section>

    <script>
        const subjectsTable = document.getElementById('subjectsTable');
        const subjectRows = Array.from(subjectsTable.querySelectorAll('tbody tr'));
        const careerFilter = document.getElementById('subjectCareerFilter');
        const yearFilter = document.getElementById('subjectYearFilter');
        const teacherFilter = document.getElementById('subjectTeacherFilter');
        const searchFilter = document.getElementById('subjectSearchFilter');
        const printButton = document.getElementById('printSubjectsTable');
        const exportButton = document.getElementById('exportSubjectsTable');

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

        function visibleRows() {
            return subjectRows.filter((row) => row.style.display !== 'none');
        }

        function applySubjectFilters() {
            const careerValue = careerFilter.value;
            const yearValue = yearFilter.value;
            const teacherValue = teacherFilter.value;
            const searchValue = normalize(searchFilter.value);

            subjectRows.forEach((row) => {
                const rowCareer = row.dataset.career || '';
                const rowYear = row.dataset.year || '';
                const teacherIds = (row.dataset.teacherIds || '').split(',').filter(Boolean);
                const rowSearch = normalize(row.dataset.search || '');

                const matchesCareer = !careerValue || rowCareer === careerValue;
                const matchesYear = !yearValue || rowYear === yearValue;
                const matchesTeacher = !teacherValue || teacherIds.includes(teacherValue);
                const matchesSearch = !searchValue || rowSearch.includes(searchValue);

                row.style.display = matchesCareer && matchesYear && matchesTeacher && matchesSearch ? '' : 'none';
            });
        }

        function extractCellText(row) {
            const cells = Array.from(row.querySelectorAll('td:not(.col-actions)'));
            return cells.map((cell) => {
                const select = cell.querySelector('select');
                const input = cell.querySelector('input:not([type="hidden"])');
                const teacherText = cell.querySelector('.subjects-teacher-text');

                if (teacherText) {
                    return teacherText.textContent.trim().replace(/\s+/g, ' ');
                }
                if (input) {
                    return input.value;
                }
                if (select) {
                    return select.options[select.selectedIndex]?.textContent.trim() || '';
                }
                return cell.textContent.trim().replace(/\s+/g, ' ');
            });
        }

        function printableHtml() {
            const headers = Array.from(subjectsTable.querySelectorAll('thead th:not(.col-actions)')).map((th) => th.textContent.trim());
            const rows = visibleRows().map(extractCellText);

            const body = rows.map((columns) => `
                <tr>${columns.map((column) => `<td>${column}</td>`).join('')}</tr>
            `).join('');

            return `
                <!doctype html>
                <html lang="es">
                <head>
                    <meta charset="utf-8">
                    <title>Materias</title>
                    <style>
                        body { font-family: Arial, sans-serif; padding: 20px; }
                        table { border-collapse: collapse; width: 100%; }
                        th, td { border: 1px solid #999; padding: 8px; text-align: left; font-size: 12px; }
                        th { background: #e7eceb; }
                        h1 { margin: 0 0 12px; font-size: 22px; }
                    </style>
                </head>
                <body>
                    <h1>Materias</h1>
                    <table>
                        <thead>
                            <tr>${headers.map((header) => `<th>${header}</th>`).join('')}</tr>
                        </thead>
                        <tbody>${body}</tbody>
                    </table>
                </body>
                </html>
            `;
        }

        function exportToExcel() {
            const html = printableHtml();
            const blob = new Blob([html], { type: 'application/vnd.ms-excel;charset=utf-8;' });
            const url = URL.createObjectURL(blob);
            const link = document.createElement('a');
            link.href = url;
            link.download = 'materias.xls';
            document.body.appendChild(link);
            link.click();
            link.remove();
            URL.revokeObjectURL(url);
        }

        [careerFilter, yearFilter, teacherFilter].forEach((element) => {
            element.addEventListener('change', applySubjectFilters);
        });

        searchFilter.addEventListener('input', applySubjectFilters);

        printButton.addEventListener('click', () => {
            const printWindow = window.open('', '_blank', 'width=1200,height=800');
            printWindow.document.write(printableHtml());
            printWindow.document.close();
            printWindow.focus();
            printWindow.print();
        });

        exportButton.addEventListener('click', exportToExcel);

        applySubjectFilters();
    </script>
@endsection