@extends('layouts.app', ['title' => 'Pembagian Mata Kuliah Tiap Semester'])

@section('content')
    <div class="action-row admin-export-excel-toolbar" style="justify-content: flex-end; margin-bottom: 14px;">
        @include('admin.partials.export-excel-button', ['section' => 'semester-course-assignments', 'label' => 'Export Excel Pembagian MK'])
    </div>

    @php
        $assignmentRows = $assignmentRows ?? old('semester_course_assignments', []);
        $periodRows = $periodRows ?? old('semester_course_periods', []);
        $lecturerOptions = collect($lecturerOptions ?? [])
            ->filter()
            ->unique()
            ->values()
            ->all();
        $courseOptions = collect($courseStructureRows ?? [])
            ->pluck('course_name')
            ->filter()
            ->unique()
            ->values()
            ->all();
        $courseCodeMap = collect($courseStructureRows ?? [])
            ->mapWithKeys(function ($row) {
                $courseName = trim((string) ($row['course_name'] ?? ''));
                $courseCode = trim((string) ($row['course_code'] ?? ''));

                return $courseName !== '' ? [$courseName => $courseCode] : [];
            })
            ->all();
    @endphp

    <style>
        .assignment-switch {
            position: relative;
            display: inline-flex;
            align-items: center;
            width: 58px;
            height: 30px;
        }
        .assignment-switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }
        .assignment-switch span {
            position: absolute;
            cursor: pointer;
            inset: 0;
            background: #cbd5e1;
            border-radius: 999px;
            transition: .2s ease;
            box-shadow: inset 0 1px 3px rgba(15, 23, 42, .22);
        }
        .assignment-switch span::before {
            content: '';
            position: absolute;
            width: 24px;
            height: 24px;
            left: 3px;
            top: 3px;
            background: #fff;
            border-radius: 50%;
            transition: .2s ease;
            box-shadow: 0 4px 10px rgba(15, 23, 42, .22);
        }
        .assignment-switch input:checked + span {
            background: linear-gradient(135deg, #15803d, #22c55e);
        }
        .assignment-switch input:checked + span::before {
            transform: translateX(28px);
        }
        .period-status-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 10px;
            border-radius: 999px;
            font-weight: 700;
            font-size: 12px;
        }
        .period-status-badge.active { background: #dcfce7; color: #166534; }
        .period-status-badge.locked { background: #fee2e2; color: #991b1b; }
        .btn.danger {
            border-color: #fecaca;
            color: #b91c1c;
            background: #fff5f5;
        }
        .btn.danger:hover {
            background: #fee2e2;
        }
    </style>

    <div class="hero-card">
        <h2>Pembagian Mata Kuliah Tiap Semester</h2>
        <p>Kelola periode tahun akademik dan semester terlebih dahulu. Setelah periode dibuat, klik tombol aksi untuk mengatur dosen dan mata kuliah pada periode tersebut.</p>
        <div class="hero-points">
            <div class="hero-point"><strong>Multi halaman</strong><br>Halaman pertama untuk memilih Tahun Akademik, Semester, dan status Aktif/Nonaktif.</div>
            <div class="hero-point"><strong>Terkunci otomatis</strong><br>Hanya periode aktif yang dapat ditarik datanya ke form RPS.</div>
        </div>
    </div>

    @if (! $isDetailPage)
        <div class="panel" style="margin-top: 20px;">
            <form method="POST" action="{{ route('admin.semester-course-assignments.update') }}">
                @csrf
                @method('PUT')
                <input type="hidden" name="mode" value="periods">

                <div class="table-wrap">
                    <table class="manual-rps-table">
                        <colgroup>
                            <col style="width: 7%;">
                            <col style="width: 27%;">
                            <col style="width: 22%;">
                            <col style="width: 15%;">
                            <col style="width: 14%;">
                            <col style="width: 15%;">
                        </colgroup>
                        <thead>
                            <tr>
                                <th>No</th>
                                <th>Tahun Akademik</th>
                                <th>Semester</th>
                                <th>Status</th>
                                <th>Jumlah Data</th>
                                <th>Aksi</th>
                            </tr>
                        </thead>
                        <tbody id="semester-course-periods-body">
                            @forelse ($periodRows as $index => $period)
                                @php
                                    $academicYear = $period['academic_year'] ?? '';
                                    $term = $period['term'] ?? '';
                                    $isActive = (bool) ($period['is_active'] ?? true);
                                    $canOpen = filled($academicYear) && filled($term);
                                @endphp
                                <tr class="period-row">
                                    <td><span class="manual-rps-row-no">{{ $index + 1 }}</span></td>
                                    <td><input name="semester_course_periods[{{ $index }}][academic_year]" value="{{ $academicYear }}" placeholder="2025/2026" data-period-academic-year></td>
                                    <td>
                                        <select name="semester_course_periods[{{ $index }}][term]" data-period-term>
                                            <option value="">Pilih Semester</option>
                                            <option value="Gasal" @selected($term === 'Gasal')>Gasal</option>
                                            <option value="Genap" @selected($term === 'Genap')>Genap</option>
                                        </select>
                                    </td>
                                    <td>
                                        <label class="assignment-switch" title="Geser kanan untuk aktif, geser kiri untuk nonaktif">
                                            <input type="hidden" name="semester_course_periods[{{ $index }}][is_active]" value="0">
                                            <input type="checkbox" name="semester_course_periods[{{ $index }}][is_active]" value="1" @checked($isActive)>
                                            <span></span>
                                        </label>
                                    </td>
                                    <td>{{ $period['assignment_count'] ?? 0 }} baris</td>
                                    <td>
                                        <div class="actions" style="gap: 8px; flex-wrap: nowrap;">
                                            @if ($canOpen)
                                                <a class="btn secondary" href="{{ route('admin.semester-course-assignments.edit', ['academic_year' => $academicYear, 'semester' => $term]) }}">Buka</a>
                                            @else
                                                <span class="helper">Simpan dulu</span>
                                            @endif
                                            <button class="btn secondary danger" type="button" data-remove-period>Hapus</button>
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr class="period-row">
                                    <td><span class="manual-rps-row-no">1</span></td>
                                    <td><input name="semester_course_periods[0][academic_year]" placeholder="2025/2026" data-period-academic-year></td>
                                    <td>
                                        <select name="semester_course_periods[0][term]" data-period-term>
                                            <option value="">Pilih Semester</option>
                                            <option value="Gasal">Gasal</option>
                                            <option value="Genap">Genap</option>
                                        </select>
                                    </td>
                                    <td>
                                        <label class="assignment-switch" title="Geser kanan untuk aktif, geser kiri untuk nonaktif">
                                            <input type="hidden" name="semester_course_periods[0][is_active]" value="0">
                                            <input type="checkbox" name="semester_course_periods[0][is_active]" value="1" checked>
                                            <span></span>
                                        </label>
                                    </td>
                                    <td>0 baris</td>
                                    <td>
                                        <div class="actions" style="gap: 8px; flex-wrap: nowrap;">
                                            <span class="helper">Simpan dulu</span>
                                            <button class="btn secondary danger" type="button" data-remove-period>Hapus</button>
                                        </div>
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>

                <div class="actions" style="margin-top: 16px;">
                    <button class="btn secondary" type="button" id="add-semester-course-period">Tambah Periode</button>
                    <button class="btn" type="submit">Simpan Periode Aktif</button>
                    <a class="btn secondary" href="{{ route('admin.curriculum.edit') }}">Buka Informasi Kurikulum</a>
                </div>
                <p class="helper" style="margin-top: 8px;">Setelah menambahkan periode baru, simpan terlebih dahulu. Tombol <strong>Buka</strong> akan muncul setelah Tahun Akademik dan Semester tersimpan.</p>
            </form>
        </div>

        <template id="semester-course-period-row-template">
            <tr class="period-row">
                <td><span class="manual-rps-row-no"></span></td>
                <td><input data-name="academic_year" placeholder="2025/2026" data-period-academic-year></td>
                <td>
                    <select data-name="term" data-period-term>
                        <option value="">Pilih Semester</option>
                        <option value="Gasal">Gasal</option>
                        <option value="Genap">Genap</option>
                    </select>
                </td>
                <td>
                    <label class="assignment-switch" title="Geser kanan untuk aktif, geser kiri untuk nonaktif">
                        <input type="hidden" data-name="is_active" value="0">
                        <input type="checkbox" data-name="is_active" value="1" checked>
                        <span></span>
                    </label>
                </td>
                <td>0 baris</td>
                <td><span class="helper">Simpan dulu</span></td>
            </tr>
        </template>

        <script>
            (() => {
                const body = document.getElementById('semester-course-periods-body');
                const template = document.getElementById('semester-course-period-row-template');
                const addButton = document.getElementById('add-semester-course-period');

                if (!body || !template || !addButton) return;

                const refreshRows = () => {
                    body.querySelectorAll('.period-row').forEach((row, index) => {
                        const number = row.querySelector('.manual-rps-row-no');
                        if (number) number.textContent = String(index + 1);

                        row.querySelectorAll('[data-name], input[name^="semester_course_periods["], select[name^="semester_course_periods["]').forEach((field) => {
                            const dataName = field.getAttribute('data-name');
                            if (!dataName) {
                                const currentName = field.getAttribute('name') || '';
                                const suffixMatch = currentName.match(/\]\[([^\]]+)\]$/);
                                if (suffixMatch) field.setAttribute('name', `semester_course_periods[${index}][${suffixMatch[1]}]`);
                                return;
                            }
                            field.setAttribute('name', `semester_course_periods[${index}][${dataName}]`);
                        });
                    });
                };

                addButton.addEventListener('click', () => {
                    body.appendChild(template.content.cloneNode(true));
                    refreshRows();
                });

                body.addEventListener('click', (event) => {
                    const removeButton = event.target.closest('[data-remove-period]');
                    if (!removeButton) return;

                    const row = removeButton.closest('.period-row');
                    if (!row) return;

                    const academicYear = row.querySelector('[data-period-academic-year]')?.value?.trim() || '';
                    const term = row.querySelector('[data-period-term]')?.value?.trim() || '';
                    const message = academicYear || term
                        ? `Hapus periode ${academicYear} ${term}? Semua data pembagian mata kuliah pada periode ini akan ikut dihapus setelah disimpan.`
                        : 'Hapus baris periode ini?';

                    if (!confirm(message)) return;

                    if (body.querySelectorAll('.period-row').length === 1) {
                        row.querySelectorAll('input[type="text"], input:not([type]), select').forEach((field) => field.value = '');
                        row.querySelectorAll('input[type="checkbox"]').forEach((checkbox) => checkbox.checked = false);
                        refreshRows();
                        return;
                    }

                    row.remove();
                    refreshRows();
                });

                refreshRows();
            })();
        </script>
    @else
        <div class="panel" style="margin-top: 20px;">
            <div class="actions" style="justify-content: space-between; align-items: center; margin-bottom: 16px;">
                <div>
                    <h3 style="margin: 0;">Pengaturan Detail: {{ $selectedAcademicYear }} — {{ $selectedTerm }}</h3>
                    <p class="helper" style="margin: 6px 0 0;">Data pada halaman ini hanya akan ditarik ke RPS jika periode berstatus aktif.</p>
                </div>
                <div class="actions">
                    <span class="period-status-badge {{ $selectedPeriodIsActive ? 'active' : 'locked' }}">
                        {{ $selectedPeriodIsActive ? 'Aktif' : 'Terkunci / Nonaktif' }}
                    </span>
                    <a class="btn secondary" href="{{ route('admin.semester-course-assignments.edit') }}">Kembali ke Periode</a>
                </div>
            </div>

            <form method="POST" action="{{ route('admin.semester-course-assignments.import') }}" enctype="multipart/form-data" style="margin-bottom: 20px;">
                @csrf
                <input type="hidden" name="academic_year" value="{{ $selectedAcademicYear }}">
                <input type="hidden" name="term" value="{{ $selectedTerm }}">
                <input type="hidden" name="period_is_active" value="{{ $selectedPeriodIsActive ? 1 : 0 }}">
                <div class="field">
                    <label for="assignment_file">Import Data Pembagian Mata Kuliah Periode Ini (Excel)</label>
                    <div class="actions" style="align-items: flex-end; margin-top: 10px;">
                        <input id="assignment_file" name="assignment_file" type="file" accept=".xlsx,.xls,.csv" required>
                        <button class="btn secondary" type="submit">Import Excel</button>
                        <a class="btn secondary" href="{{ route('admin.semester-course-assignments.template') }}">Download Template Excel</a>
                    </div>
                    <p class="helper" style="margin-top: 8px;">Gunakan kolom: <strong>Dosen Pengampu</strong>, <strong>Mata Kuliah</strong>, dan <strong>Kode Mata Kuliah</strong>. Tahun Akademik/Semester mengikuti periode yang sedang dibuka.</p>
                </div>
            </form>

            <form method="POST" action="{{ route('admin.semester-course-assignments.update') }}">
                @csrf
                @method('PUT')
                <input type="hidden" name="mode" value="detail">
                <input type="hidden" name="academic_year" value="{{ $selectedAcademicYear }}">
                <input type="hidden" name="term" value="{{ $selectedTerm }}">
                <input type="hidden" name="period_is_active" value="{{ $selectedPeriodIsActive ? 1 : 0 }}">

                <div class="table-wrap">
                    <table class="manual-rps-table">
                        <colgroup>
                            <col style="width: 7%;">
                            <col style="width: 36%;">
                            <col style="width: 39%;">
                            <col style="width: 12%;">
                            <col style="width: 6%;">
                        </colgroup>
                        <thead>
                            <tr>
                                <th>No</th>
                                <th>Dosen Pengampu</th>
                                <th>Mata Kuliah</th>
                                <th>Kode MK</th>
                                <th>Aksi</th>
                            </tr>
                        </thead>
                        <tbody id="semester-course-assignments-body">
                            @forelse ($assignmentRows as $index => $row)
                                <tr class="assignment-row">
                                    <td><span class="manual-rps-row-no">{{ $index + 1 }}</span></td>
                                    <td>
                                        <select name="semester_course_assignments[{{ $index }}][lecturer_name]" data-lecturer-name-select>
                                            <option value="">Pilih Dosen Pengampu</option>
                                            @foreach ($lecturerOptions as $lecturerName)
                                                <option value="{{ $lecturerName }}" @selected(($row['lecturer_name'] ?? '') === $lecturerName)>{{ $lecturerName }}</option>
                                            @endforeach
                                            @if (filled($row['lecturer_name'] ?? '') && ! in_array($row['lecturer_name'], $lecturerOptions, true))
                                                <option value="{{ $row['lecturer_name'] }}" selected>{{ $row['lecturer_name'] }}</option>
                                            @endif
                                        </select>
                                    </td>
                                    <td>
                                        <select name="semester_course_assignments[{{ $index }}][course_name]" data-course-name-select>
                                            <option value="">Pilih Mata Kuliah</option>
                                            @foreach ($courseOptions as $courseName)
                                                <option value="{{ $courseName }}" @selected(($row['course_name'] ?? '') === $courseName)>{{ $courseName }}</option>
                                            @endforeach
                                            @if (filled($row['course_name'] ?? '') && ! in_array($row['course_name'], $courseOptions, true))
                                                <option value="{{ $row['course_name'] }}" selected>{{ $row['course_name'] }}</option>
                                            @endif
                                        </select>
                                    </td>
                                    <td><input name="semester_course_assignments[{{ $index }}][course_code]" value="{{ $row['course_code'] ?? '' }}" placeholder="Kode MK" data-course-code-input></td>
                                    <td><button class="btn secondary" type="button" data-remove-assignment>&times;</button></td>
                                </tr>
                            @empty
                                <tr class="assignment-row">
                                    <td><span class="manual-rps-row-no">1</span></td>
                                    <td>
                                        <select name="semester_course_assignments[0][lecturer_name]" data-lecturer-name-select>
                                            <option value="">Pilih Dosen Pengampu</option>
                                            @foreach ($lecturerOptions as $lecturerName)
                                                <option value="{{ $lecturerName }}">{{ $lecturerName }}</option>
                                            @endforeach
                                        </select>
                                    </td>
                                    <td>
                                        <select name="semester_course_assignments[0][course_name]" data-course-name-select>
                                            <option value="">Pilih Mata Kuliah</option>
                                            @foreach ($courseOptions as $courseName)
                                                <option value="{{ $courseName }}">{{ $courseName }}</option>
                                            @endforeach
                                        </select>
                                    </td>
                                    <td><input name="semester_course_assignments[0][course_code]" placeholder="Kode MK" data-course-code-input></td>
                                    <td><button class="btn secondary" type="button" data-remove-assignment>&times;</button></td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>

                <div class="actions" style="margin-top: 16px;">
                    <button class="btn secondary" type="button" id="add-semester-course-assignment">Tambah Baris</button>
                    <button class="btn" type="submit">Simpan Pembagian Mata Kuliah</button>
                    <a class="btn secondary" href="{{ route('admin.semester-course-assignments.edit') }}">Kembali</a>
                </div>
            </form>
        </div>

        <template id="semester-course-assignment-row-template">
            <tr class="assignment-row">
                <td><span class="manual-rps-row-no"></span></td>
                <td>
                    <select data-name="lecturer_name" data-lecturer-name-select>
                        <option value="">Pilih Dosen Pengampu</option>
                        @foreach ($lecturerOptions as $lecturerName)
                            <option value="{{ $lecturerName }}">{{ $lecturerName }}</option>
                        @endforeach
                    </select>
                </td>
                <td>
                    <select data-name="course_name" data-course-name-select>
                        <option value="">Pilih Mata Kuliah</option>
                        @foreach ($courseOptions as $courseName)
                            <option value="{{ $courseName }}">{{ $courseName }}</option>
                        @endforeach
                    </select>
                </td>
                <td><input data-name="course_code" placeholder="Kode MK" data-course-code-input></td>
                <td><button class="btn secondary" type="button" data-remove-assignment>&times;</button></td>
            </tr>
        </template>

        <script>
            (() => {
                const body = document.getElementById('semester-course-assignments-body');
                const template = document.getElementById('semester-course-assignment-row-template');
                const addButton = document.getElementById('add-semester-course-assignment');
                const courseCodeMap = @json($courseCodeMap);

                if (!body || !template || !addButton) return;

                const refreshRows = () => {
                    body.querySelectorAll('.assignment-row').forEach((row, index) => {
                        const number = row.querySelector('.manual-rps-row-no');
                        if (number) number.textContent = String(index + 1);

                        row.querySelectorAll('[data-name], input[name^="semester_course_assignments["], select[name^="semester_course_assignments["]').forEach((field) => {
                            const dataName = field.getAttribute('data-name');
                            if (!dataName) {
                                const currentName = field.getAttribute('name') || '';
                                const suffixMatch = currentName.match(/\]\[([^\]]+)\]$/);
                                if (suffixMatch) field.setAttribute('name', `semester_course_assignments[${index}][${suffixMatch[1]}]`);
                                return;
                            }
                            field.setAttribute('name', `semester_course_assignments[${index}][${dataName}]`);
                        });
                    });
                };

                const syncCourseCode = (row) => {
                    const courseSelect = row.querySelector('[data-course-name-select]');
                    const courseCodeInput = row.querySelector('[data-course-code-input]');
                    if (!courseSelect || !courseCodeInput) return;

                    const selectedCourse = courseSelect.value;
                    if (selectedCourse && courseCodeMap[selectedCourse]) {
                        courseCodeInput.value = courseCodeMap[selectedCourse];
                    }
                };

                addButton.addEventListener('click', () => {
                    body.appendChild(template.content.cloneNode(true));
                    refreshRows();
                });

                body.addEventListener('click', (event) => {
                    const removeButton = event.target.closest('[data-remove-assignment]');
                    if (!removeButton) return;

                    if (body.querySelectorAll('.assignment-row').length === 1) {
                        const row = removeButton.closest('.assignment-row');
                        row.querySelectorAll('input').forEach((input) => input.value = '');
                        row.querySelectorAll('select').forEach((select) => select.value = '');
                        return;
                    }

                    removeButton.closest('.assignment-row')?.remove();
                    refreshRows();
                });

                body.addEventListener('change', (event) => {
                    const courseSelect = event.target.closest('[data-course-name-select]');
                    if (!courseSelect) return;
                    syncCourseCode(courseSelect.closest('.assignment-row'));
                });

                refreshRows();
            })();
        </script>
    @endif
@endsection