@extends('layouts.app', ['title' => 'Penilaian & Pembelajaran'])

@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' => 'assessment-learning-settings', 'label' => 'Export Excel Penilaian'])
    </div>


    <style>
        .assessment-learning-scroll {
            width: 100%;
            max-height: 520px;
            overflow: auto;
            border: 1px solid rgba(15, 23, 42, 0.10);
            border-radius: 14px;
            background: #fff;
            position: relative;
        }

        .assessment-learning-scroll .manual-rps-table {
            margin: 0;
            border-collapse: separate;
            border-spacing: 0;
        }

        .assessment-learning-scroll .manual-rps-table thead th {
            position: sticky;
            top: 0;
            z-index: 5;
            background: #f8fafc;
            box-shadow: 0 1px 0 rgba(15, 23, 42, 0.12);
        }

        .assessment-learning-scroll .manual-rps-table thead th:first-child {
            border-top-left-radius: 12px;
        }

        .assessment-learning-scroll .manual-rps-table thead th:last-child {
            border-top-right-radius: 12px;
        }

        @media (max-width: 768px) {
            .assessment-learning-scroll {
                max-height: 430px;
            }
        }
    </style>

    @php
        $sectionIcons = [
            'assessment_criteria' => '✓',
            'assessment_techniques' => '✦',
            'offline_learning' => '●',
            'online_learning' => '◎',
        ];
    @endphp

    <div class="hero-card">
        <h2>Penilaian & Pembelajaran</h2>
        <p>Kelola data referensi untuk Kriteria Penilaian, Teknik Penilaian, Pembelajaran Luring, dan Pembelajaran Daring. Kriteria Penilaian menggunakan 4 kolom dan Teknik Penilaian menggunakan 3 kolom agar data tersusun rapi.</p>
        <div class="hero-points">
            <div class="hero-point"><strong>Dinamis</strong><br>Admin dapat menambah dan menghapus baris tanpa mengubah struktur modul lain.</div>
            <div class="hero-point"><strong>Aman untuk baseline</strong><br>Data disimpan pada pengaturan aplikasi dan tidak mengubah proses RPS/AI yang sudah berjalan.</div>
        </div>
    </div>

    <div class="panel" style="margin-top: 20px;">
        <form method="POST" action="{{ route('admin.assessment-learning-settings.update') }}">
            @csrf
            @method('PUT')

            <div class="grid">
                @foreach ($assessmentLearningSections as $sectionKey => $section)
                    @php
                        $rows = old($sectionKey, $settings->{$sectionKey} ?? []);

                        if (in_array($sectionKey, ['assessment_criteria', 'assessment_techniques', 'offline_learning', 'online_learning'], true) && empty($rows)) {
                            $rows = $section['default_rows'] ?? [];
                        }

                        if (empty($rows)) {
                            $rows = match ($sectionKey) {
                                'assessment_criteria' => [['category' => '', 'subcategory' => '', 'name' => '', 'description' => '']],
                                'assessment_techniques' => [['category' => '', 'subcategory' => '', 'name' => '']],
                                'offline_learning' => [['category' => '', 'description' => '', 'subcategory' => '', 'name' => '']],
                                'online_learning' => [['category' => '', 'description' => '', 'subcategory' => '', 'name' => '']],
                                default => [['name' => '', 'description' => '']],
                            };
                        }

                        $isCriteriaSection = $sectionKey === 'assessment_criteria';
                        $isTechniqueSection = $sectionKey === 'assessment_techniques';
                        $isOfflineSection = $sectionKey === 'offline_learning';
                        $isOnlineSection = $sectionKey === 'online_learning';
                    @endphp

                    <div class="field {{ ($isTechniqueSection || $isCriteriaSection || $isOfflineSection || $isOnlineSection) ? 'col-12' : 'col-6' }}">
                        <div class="repeater-item" style="height: 100%;">
                            <div style="display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:14px; flex-wrap:wrap;">
                                <div>
                                    <h3 class="section-title" style="margin-bottom:6px;">{{ $sectionIcons[$sectionKey] ?? '•' }} {{ $section['title'] }}</h3>
                                    <p class="helper" style="margin:0;">
                                        @if ($isCriteriaSection)
                                            Format 4 kolom: Kelompok Utama, Sub Kelompok, Kriteria Penilaian, dan Deskripsi/Level. Sub Kelompok dan Deskripsi boleh dikosongkan bila tidak ada.
                                        @elseif ($isTechniqueSection)
                                            Format 3 kolom: Kelompok Utama, Sub Kelompok, dan Teknik Penilaian. Sub Kelompok boleh dikosongkan bila tidak ada.
                                        @elseif ($isOfflineSection)
                                            Format 4 kolom: Metode/Aktivitas, Deskripsi, Jenis/Variasi/Contoh, dan Rincian Aktivitas. Kolom rincian boleh dikosongkan bila metode tidak memiliki variasi.
                                        @elseif ($isOnlineSection)
                                            Format 4 kolom: Metode/Aktivitas Daring, Deskripsi, Jenis/Platform/Aktivitas/Contoh, dan Rincian Aktivitas/Platform. Kolom rincian boleh dikosongkan bila metode tidak memiliki variasi.
                                        @else
                                            Isi beberapa pilihan yang akan menjadi referensi dalam penyusunan RPS.
                                        @endif
                                    </p>
                                </div>
                                <button class="btn secondary" type="button" data-add-assessment-row="{{ $sectionKey }}">Tambah Baris</button>
                            </div>

                            <div class="table-wrap assessment-learning-scroll">
                                <table class="manual-rps-table" style="min-width: {{ $isCriteriaSection ? '1120px' : ($isTechniqueSection ? '980px' : (($isOfflineSection || $isOnlineSection) ? '1180px' : '720px')) }};">
                                    @if ($isCriteriaSection)
                                        <colgroup>
                                            <col style="width: 5%;">
                                            <col style="width: 27%;">
                                            <col style="width: 22%;">
                                            <col style="width: 28%;">
                                            <col style="width: 10%;">
                                            <col style="width: 8%;">
                                        </colgroup>
                                        <thead>
                                            <tr>
                                                <th>No</th>
                                                <th>{{ $section['category_label'] }}</th>
                                                <th>{{ $section['subcategory_label'] }}</th>
                                                <th>{{ $section['name_label'] }}</th>
                                                <th>{{ $section['description_label'] }}</th>
                                                <th>Aksi</th>
                                            </tr>
                                        </thead>
                                        <tbody data-assessment-body="{{ $sectionKey }}">
                                            @foreach ($rows as $index => $row)
                                                <tr class="assessment-row" data-criteria-row>
                                                    <td><span class="manual-rps-row-no">{{ $index + 1 }}</span></td>
                                                    <td>
                                                        <input name="{{ $sectionKey }}[{{ $index }}][category]" value="{{ $row['category'] ?? '' }}" placeholder="{{ $section['category_placeholder'] }}">
                                                    </td>
                                                    <td>
                                                        <input name="{{ $sectionKey }}[{{ $index }}][subcategory]" value="{{ $row['subcategory'] ?? '' }}" placeholder="{{ $section['subcategory_placeholder'] }}">
                                                    </td>
                                                    <td>
                                                        <input name="{{ $sectionKey }}[{{ $index }}][name]" value="{{ $row['name'] ?? '' }}" placeholder="{{ $section['placeholder'] }}">
                                                    </td>
                                                    <td>
                                                        <textarea name="{{ $sectionKey }}[{{ $index }}][description]" rows="2" placeholder="{{ $section['description_placeholder'] }}">{{ $row['description'] ?? '' }}</textarea>
                                                    </td>
                                                    <td>
                                                        <button class="btn secondary" type="button" data-remove-assessment-row>&times;</button>
                                                    </td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    @elseif ($isTechniqueSection)
                                        <colgroup>
                                            <col style="width: 6%;">
                                            <col style="width: 30%;">
                                            <col style="width: 25%;">
                                            <col style="width: 31%;">
                                            <col style="width: 8%;">
                                        </colgroup>
                                        <thead>
                                            <tr>
                                                <th>No</th>
                                                <th>{{ $section['category_label'] }}</th>
                                                <th>{{ $section['subcategory_label'] }}</th>
                                                <th>{{ $section['name_label'] }}</th>
                                                <th>Aksi</th>
                                            </tr>
                                        </thead>
                                        <tbody data-assessment-body="{{ $sectionKey }}">
                                            @foreach ($rows as $index => $row)
                                                <tr class="assessment-row" data-technique-row>
                                                    <td><span class="manual-rps-row-no">{{ $index + 1 }}</span></td>
                                                    <td>
                                                        <input name="{{ $sectionKey }}[{{ $index }}][category]" value="{{ $row['category'] ?? '' }}" placeholder="{{ $section['category_placeholder'] }}">
                                                    </td>
                                                    <td>
                                                        <input name="{{ $sectionKey }}[{{ $index }}][subcategory]" value="{{ $row['subcategory'] ?? '' }}" placeholder="{{ $section['subcategory_placeholder'] }}">
                                                    </td>
                                                    <td>
                                                        <input name="{{ $sectionKey }}[{{ $index }}][name]" value="{{ $row['name'] ?? '' }}" placeholder="{{ $section['placeholder'] }}">
                                                    </td>
                                                    <td>
                                                        <button class="btn secondary" type="button" data-remove-assessment-row>&times;</button>
                                                    </td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    @elseif ($isOfflineSection || $isOnlineSection)
                                        <colgroup>
                                            <col style="width: 5%;">
                                            <col style="width: 24%;">
                                            <col style="width: 31%;">
                                            <col style="width: 18%;">
                                            <col style="width: 14%;">
                                            <col style="width: 8%;">
                                        </colgroup>
                                        <thead>
                                            <tr>
                                                <th>No</th>
                                                <th>{{ $section['category_label'] }}</th>
                                                <th>{{ $section['description_label'] }}</th>
                                                <th>{{ $section['subcategory_label'] }}</th>
                                                <th>{{ $section['name_label'] }}</th>
                                                <th>Aksi</th>
                                            </tr>
                                        </thead>
                                        <tbody data-assessment-body="{{ $sectionKey }}">
                                            @foreach ($rows as $index => $row)
                                                <tr class="assessment-row" data-offline-row>
                                                    <td><span class="manual-rps-row-no">{{ $index + 1 }}</span></td>
                                                    <td>
                                                        <input name="{{ $sectionKey }}[{{ $index }}][category]" value="{{ $row['category'] ?? '' }}" placeholder="{{ $section['category_placeholder'] }}">
                                                    </td>
                                                    <td>
                                                        <textarea name="{{ $sectionKey }}[{{ $index }}][description]" rows="2" placeholder="{{ $section['description_placeholder'] }}">{{ $row['description'] ?? '' }}</textarea>
                                                    </td>
                                                    <td>
                                                        <input name="{{ $sectionKey }}[{{ $index }}][subcategory]" value="{{ $row['subcategory'] ?? '' }}" placeholder="{{ $section['subcategory_placeholder'] }}">
                                                    </td>
                                                    <td>
                                                        <input name="{{ $sectionKey }}[{{ $index }}][name]" value="{{ $row['name'] ?? '' }}" placeholder="{{ $section['placeholder'] }}">
                                                    </td>
                                                    <td>
                                                        <button class="btn secondary" type="button" data-remove-assessment-row>&times;</button>
                                                    </td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    @else
                                        <colgroup>
                                            <col style="width: 8%;">
                                            <col style="width: 34%;">
                                            <col style="width: 48%;">
                                            <col style="width: 10%;">
                                        </colgroup>
                                        <thead>
                                            <tr>
                                                <th>No</th>
                                                <th>{{ $section['name_label'] }}</th>
                                                <th>{{ $section['description_label'] }}</th>
                                                <th>Aksi</th>
                                            </tr>
                                        </thead>
                                        <tbody data-assessment-body="{{ $sectionKey }}">
                                            @foreach ($rows as $index => $row)
                                                <tr class="assessment-row">
                                                    <td><span class="manual-rps-row-no">{{ $index + 1 }}</span></td>
                                                    <td>
                                                        <input name="{{ $sectionKey }}[{{ $index }}][name]" value="{{ $row['name'] ?? '' }}" placeholder="{{ $section['placeholder'] }}">
                                                    </td>
                                                    <td>
                                                        <textarea name="{{ $sectionKey }}[{{ $index }}][description]" rows="2" placeholder="Tuliskan keterangan singkat bila diperlukan">{{ $row['description'] ?? '' }}</textarea>
                                                    </td>
                                                    <td>
                                                        <button class="btn secondary" type="button" data-remove-assessment-row>&times;</button>
                                                    </td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    @endif
                                </table>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>

            <div class="actions" style="margin-top: 18px;">
                <button class="btn" type="submit">Simpan Data Penilaian & Pembelajaran</button>
                <a class="btn secondary" href="{{ route('admin.settings.edit') }}">Kembali ke Admin</a>
            </div>
        </form>
    </div>

    <template id="assessment-learning-row-template">
        <tr class="assessment-row">
            <td><span class="manual-rps-row-no"></span></td>
            <td><input data-name="name"></td>
            <td><textarea data-name="description" rows="2" placeholder="Tuliskan keterangan singkat bila diperlukan"></textarea></td>
            <td><button class="btn secondary" type="button" data-remove-assessment-row>&times;</button></td>
        </tr>
    </template>

    <template id="assessment-criteria-row-template">
        <tr class="assessment-row" data-criteria-row>
            <td><span class="manual-rps-row-no"></span></td>
            <td><input data-name="category"></td>
            <td><input data-name="subcategory"></td>
            <td><input data-name="name"></td>
            <td><textarea data-name="description" rows="2"></textarea></td>
            <td><button class="btn secondary" type="button" data-remove-assessment-row>&times;</button></td>
        </tr>
    </template>

    <template id="assessment-offline-row-template">
        <tr class="assessment-row" data-offline-row>
            <td><span class="manual-rps-row-no"></span></td>
            <td><input data-name="category"></td>
            <td><textarea data-name="description" rows="2"></textarea></td>
            <td><input data-name="subcategory"></td>
            <td><input data-name="name"></td>
            <td><button class="btn secondary" type="button" data-remove-assessment-row>&times;</button></td>
        </tr>
    </template>

    <template id="assessment-technique-row-template">
        <tr class="assessment-row" data-technique-row>
            <td><span class="manual-rps-row-no"></span></td>
            <td><input data-name="category"></td>
            <td><input data-name="subcategory"></td>
            <td><input data-name="name"></td>
            <td><button class="btn secondary" type="button" data-remove-assessment-row>&times;</button></td>
        </tr>
    </template>

    <script>
        (() => {
            const defaultTemplate = document.getElementById('assessment-learning-row-template');
            const criteriaTemplate = document.getElementById('assessment-criteria-row-template');
            const techniqueTemplate = document.getElementById('assessment-technique-row-template');
            const offlineTemplate = document.getElementById('assessment-offline-row-template');
            const onlineTemplate = document.getElementById('assessment-offline-row-template');
            const sectionConfig = @json($assessmentLearningSections);

            const refreshRows = (sectionKey) => {
                const body = document.querySelector(`[data-assessment-body="${sectionKey}"]`);

                if (!body) {
                    return;
                }

                body.querySelectorAll('.assessment-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^="' + sectionKey + '["], textarea[name^="' + sectionKey + '["]').forEach((field) => {
                        const dataName = field.getAttribute('data-name');

                        if (dataName) {
                            field.setAttribute('name', `${sectionKey}[${index}][${dataName}]`);
                            return;
                        }

                        const currentName = field.getAttribute('name') || '';
                        const suffixMatch = currentName.match(/\]\[([^\]]+)\]$/);
                        if (suffixMatch) {
                            field.setAttribute('name', `${sectionKey}[${index}][${suffixMatch[1]}]`);
                        }
                    });
                });
            };

            document.querySelectorAll('[data-add-assessment-row]').forEach((button) => {
                button.addEventListener('click', () => {
                    const sectionKey = button.getAttribute('data-add-assessment-row');
                    const body = document.querySelector(`[data-assessment-body="${sectionKey}"]`);

                    if (!sectionKey || !body) {
                        return;
                    }

                    const template = sectionKey === 'assessment_criteria'
                        ? criteriaTemplate
                        : (sectionKey === 'assessment_techniques'
                            ? techniqueTemplate
                            : ((sectionKey === 'offline_learning' || sectionKey === 'online_learning') ? offlineTemplate : defaultTemplate));
                    if (!template) {
                        return;
                    }

                    const fragment = template.content.cloneNode(true);
                    const row = fragment.querySelector('.assessment-row');

                    if (sectionKey === 'assessment_criteria') {
                        row?.querySelector('[data-name="category"]')?.setAttribute('placeholder', sectionConfig[sectionKey]?.category_placeholder || 'Kelompok utama');
                        row?.querySelector('[data-name="subcategory"]')?.setAttribute('placeholder', sectionConfig[sectionKey]?.subcategory_placeholder || 'Sub kelompok');
                        row?.querySelector('[data-name="name"]')?.setAttribute('placeholder', sectionConfig[sectionKey]?.placeholder || 'Kriteria penilaian');
                        row?.querySelector('[data-name="description"]')?.setAttribute('placeholder', sectionConfig[sectionKey]?.description_placeholder || 'Deskripsi/level');
                    } else if (sectionKey === 'assessment_techniques') {
                        row?.querySelector('[data-name="category"]')?.setAttribute('placeholder', sectionConfig[sectionKey]?.category_placeholder || 'Kelompok utama');
                        row?.querySelector('[data-name="subcategory"]')?.setAttribute('placeholder', sectionConfig[sectionKey]?.subcategory_placeholder || 'Sub kelompok');
                        row?.querySelector('[data-name="name"]')?.setAttribute('placeholder', sectionConfig[sectionKey]?.placeholder || 'Teknik penilaian');
                    } else if (sectionKey === 'offline_learning' || sectionKey === 'online_learning') {
                        row?.querySelector('[data-name="category"]')?.setAttribute('placeholder', sectionConfig[sectionKey]?.category_placeholder || 'Metode/Aktivitas');
                        row?.querySelector('[data-name="description"]')?.setAttribute('placeholder', sectionConfig[sectionKey]?.description_placeholder || 'Deskripsi');
                        row?.querySelector('[data-name="subcategory"]')?.setAttribute('placeholder', sectionConfig[sectionKey]?.subcategory_placeholder || 'Jenis/Variasi/Contoh');
                        row?.querySelector('[data-name="name"]')?.setAttribute('placeholder', sectionConfig[sectionKey]?.placeholder || 'Rincian Aktivitas');
                    } else {
                        row?.querySelector('[data-name="name"]')?.setAttribute('placeholder', sectionConfig[sectionKey]?.placeholder || 'Nama');
                    }

                    body.appendChild(fragment);
                    refreshRows(sectionKey);
                });
            });

            document.addEventListener('click', (event) => {
                const removeButton = event.target.closest('[data-remove-assessment-row]');

                if (!removeButton) {
                    return;
                }

                const body = removeButton.closest('[data-assessment-body]');
                const row = removeButton.closest('.assessment-row');
                const sectionKey = body?.getAttribute('data-assessment-body');

                if (!body || !row || !sectionKey) {
                    return;
                }

                if (body.querySelectorAll('.assessment-row').length === 1) {
                    row.querySelectorAll('input, textarea').forEach((field) => field.value = '');
                    return;
                }

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

            Object.keys(sectionConfig).forEach(refreshRows);
        })();
    </script>
@endsection