@extends('layouts.app', ['title' => 'Model Penugasan Mahasiswa'])

@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' => 'student-assignment-models', 'label' => 'Export Excel Penugasan'])
    </div>

    @php
        $rowCollection = collect($rows ?? []);
        $offlineRows = $rowCollection->where('mode', 'luring')->values();
        $onlineRows = $rowCollection->where('mode', 'daring')->values();
        $globalIndex = 0;
        $locked = ! ($isEditMode ?? false);
    @endphp

    <style>
        .assignment-model-card {
            display: grid;
            gap: 20px;
        }

        .assignment-page-head {
            border: 1px solid rgba(191, 215, 248, .95);
            border-radius: 22px;
            padding: 18px 20px;
            background:
                radial-gradient(circle at top right, rgba(37, 99, 235, .10), transparent 30%),
                linear-gradient(180deg, #ffffff 0%, #f6faff 100%);
        }

        .assignment-page-head .section-heading {
            margin: 0;
        }

        .assignment-page-head p {
            max-width: 920px;
            line-height: 1.65;
        }

        .assignment-summary {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
            gap: 12px;
        }

        .assignment-stat {
            border: 1px solid rgba(191, 215, 248, .95);
            border-radius: 18px;
            padding: 14px 16px;
            background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
            box-shadow: 0 10px 24px rgba(15, 23, 42, .045);
        }

        .assignment-stat strong {
            display: block;
            font-size: 1.55rem;
            line-height: 1;
            color: var(--primary);
            margin-bottom: 6px;
        }

        .assignment-stat span {
            display: block;
            color: var(--muted);
            font-size: .9rem;
            line-height: 1.35;
        }

        .assignment-toolbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 12px;
            padding: 14px 16px;
            border: 1px solid rgba(191, 215, 248, .95);
            border-radius: 18px;
            background: rgba(248, 251, 255, .92);
        }

        .assignment-scroll {
            width: 100%;
            max-height: 590px;
            overflow: auto;
            border: 1px solid rgba(191, 215, 248, .95);
            border-radius: 18px;
            background: #fff;
            position: relative;
            box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 14px 32px rgba(15, 23, 42, .05);
        }

        .assignment-scroll .manual-rps-table {
            min-width: 1320px;
            margin: 0;
        }

        .assignment-scroll thead th {
            position: sticky;
            top: 0;
            z-index: 5;
            background: linear-gradient(180deg, #f1f7ff, #e8f1ff);
            box-shadow: 0 1px 0 rgba(15, 23, 42, 0.08);
            font-size: .9rem;
            text-align: center;
        }

        .assignment-scroll td,
        .assignment-scroll th {
            vertical-align: top;
        }

        .assignment-scroll td {
            padding: 8px 10px;
        }

        .assignment-scroll input,
        .assignment-scroll textarea,
        .assignment-scroll select {
            width: 100%;
            border-radius: 10px;
            font-size: .92rem;
        }

        .assignment-scroll textarea {
            min-height: 82px;
            resize: vertical;
            line-height: 1.5;
        }

        .assignment-actions {
            display: flex;
            gap: 8px;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
        }

        .assignment-locked-note {
            color: var(--muted);
            font-size: 0.93rem;
            line-height: 1.6;
            max-width: 720px;
        }

        .assignment-readonly input[readonly],
        .assignment-readonly textarea[readonly] {
            background: rgba(245, 249, 255, 0.82);
            color: var(--text);
        }

        .assignment-point-list {
            display: grid;
            gap: 8px;
        }

        .assignment-point-item {
            display: grid;
            grid-template-columns: minmax(170px, 1fr) 38px;
            align-items: center;
            gap: 8px;
        }

        .assignment-point-add {
            margin-top: 8px;
            padding: 7px 12px;
            font-size: 0.86rem;
            width: 100%;
        }

        .assignment-point-remove {
            width: 38px;
            height: 38px;
            padding: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 1.05rem;
        }

        .assignment-mode-title {
            align-items: center;
            gap: 12px;
        }

        .assignment-mode-pill {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 6px 12px;
            border-radius: 999px;
            background: rgba(37, 99, 235, .10);
            color: var(--primary);
            font-weight: 800;
            font-size: .82rem;
        }

        @media (max-width: 780px) {
            .assignment-toolbar { align-items: stretch; }
            .assignment-toolbar .action-row { width: 100%; }
            .assignment-toolbar .action-row .btn { flex: 1; }
            .assignment-scroll { max-height: none; }
            .assignment-scroll .manual-rps-table { min-width: 1120px; }
        }
    </style>

    <div class="page-card assignment-model-card {{ $locked ? 'assignment-readonly' : '' }}" data-assignment-page>
        <div class="assignment-page-head">
            <div class="section-heading">
                <div>
                    <span class="eyebrow">Admin</span>
                    <h2>Model Penugasan Mahasiswa</h2>
                    <p>Kelola referensi model penugasan untuk pembelajaran luring dan daring. Tabel dibuat lebih rapi dengan header tetap, scroll horizontal, dan area poin yang mudah dibaca.</p>
                </div>
            </div>
        </div>

        <div class="assignment-summary">
            <div class="assignment-stat">
                <strong>{{ $rowCollection->count() }}</strong>
                <span>Total model penugasan</span>
            </div>
            <div class="assignment-stat">
                <strong>{{ $offlineRows->count() }}</strong>
                <span>Model penugasan luring</span>
            </div>
            <div class="assignment-stat">
                <strong>{{ $onlineRows->count() }}</strong>
                <span>Model penugasan daring</span>
            </div>
        </div>

        <div class="assignment-toolbar">
            <div class="assignment-locked-note" data-assignment-note>
                @if ($locked)
                    Mode lihat aktif. Tekan <strong>Edit</strong> untuk mengubah data, menambah baris, atau menghapus baris.
                @else
                    Mode edit aktif. Silakan ubah data lalu tekan <strong>Simpan</strong>.
                @endif
            </div>
            <div class="action-row">
                <button class="btn secondary" type="button" data-assignment-edit>✎ Edit</button>
                <button class="btn" type="submit" form="assignment-model-form" data-assignment-save {{ $locked ? 'disabled' : '' }}>Simpan Perubahan</button>
            </div>
        </div>

        <form id="assignment-model-form" method="POST" action="{{ route('admin.student-assignment-models.update') }}" data-assignment-form>
            @csrf
            @method('PUT')

            <div class="manual-section">
                <div class="section-heading compact assignment-mode-title">
                    <div>
                        <span class="eyebrow">Luring</span>
                        <h3>Pembelajaran Luring (Offline)</h3>
                    </div>
                    <span class="assignment-mode-pill">{{ $offlineRows->count() }} baris</span>
                    <button class="btn secondary" type="button" data-add-assignment-row="luring" {{ $locked ? 'disabled' : '' }}>+ Tambah Baris</button>
                </div>

                <div class="assignment-scroll">
                    <table class="manual-rps-table">
                        <colgroup>
                            <col style="width: 4.5%;">
                            <col style="width: 15%;">
                            <col style="width: 6%;">
                            <col style="width: 16%;">
                            <col style="width: 19%;">
                            <col style="width: 20%;">
                            <col style="width: 16%;">
                            <col style="width: 6.5%;">
                        </colgroup>
                        <thead>
                            <tr>
                                <th>No</th>
                                <th>Kelompok/Kategori</th>
                                <th>Nomor</th>
                                <th>Model Penugasan</th>
                                <th>Deskripsi</th>
                                <th>Contoh/Bentuk/Platform</th>
                                <th>Tujuan/Catatan</th>
                                <th>Aksi</th>
                            </tr>
                        </thead>
                        <tbody data-assignment-body="luring">
                            @foreach ($offlineRows as $row)
                                @include('admin.partials.student-assignment-row', ['row' => $row, 'index' => $globalIndex++, 'rowNo' => $loop->iteration, 'locked' => $locked])
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>

            <div class="manual-section">
                <div class="section-heading compact assignment-mode-title">
                    <div>
                        <span class="eyebrow">Daring</span>
                        <h3>Pembelajaran Daring (Online)</h3>
                    </div>
                    <span class="assignment-mode-pill">{{ $onlineRows->count() }} baris</span>
                    <button class="btn secondary" type="button" data-add-assignment-row="daring" {{ $locked ? 'disabled' : '' }}>+ Tambah Baris</button>
                </div>

                <div class="assignment-scroll">
                    <table class="manual-rps-table">
                        <colgroup>
                            <col style="width: 4.5%;">
                            <col style="width: 15%;">
                            <col style="width: 6%;">
                            <col style="width: 16%;">
                            <col style="width: 19%;">
                            <col style="width: 20%;">
                            <col style="width: 16%;">
                            <col style="width: 6.5%;">
                        </colgroup>
                        <thead>
                            <tr>
                                <th>No</th>
                                <th>Kelompok/Kategori</th>
                                <th>Nomor</th>
                                <th>Model Penugasan</th>
                                <th>Deskripsi</th>
                                <th>Contoh/Bentuk/Platform</th>
                                <th>Tujuan/Catatan</th>
                                <th>Aksi</th>
                            </tr>
                        </thead>
                        <tbody data-assignment-body="daring">
                            @foreach ($onlineRows as $row)
                                @include('admin.partials.student-assignment-row', ['row' => $row, 'index' => $globalIndex++, 'rowNo' => $loop->iteration, 'locked' => $locked])
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </form>
    </div>

    <template id="assignment-row-template">
        <tr class="assignment-model-row">
            <td>
                <span class="manual-rps-row-no">__NO__</span>
                <input type="hidden" name="student_assignment_models[__INDEX__][mode]" value="__MODE__">
            </td>
            <td><input name="student_assignment_models[__INDEX__][category]" value="" placeholder="Contoh: Berdasarkan Aktivitas Digital"></td>
            <td><input type="number" min="1" name="student_assignment_models[__INDEX__][number]" value="__NUMBER__"></td>
            <td><input name="student_assignment_models[__INDEX__][name]" value="" placeholder="Contoh: Tugas Individu"></td>
            <td><textarea name="student_assignment_models[__INDEX__][description]" rows="2" placeholder="Deskripsi singkat model penugasan"></textarea></td>
            <td>
                <div class="assignment-point-list" data-assignment-points>
                    <div class="assignment-point-item">
                        <input name="student_assignment_models[__INDEX__][examples_items][]" value="" placeholder="Contoh/Bentuk/Platform">
                        <button class="btn secondary assignment-point-remove" type="button" data-remove-assignment-point>&times;</button>
                    </div>
                </div>
                <button class="btn secondary assignment-point-add" type="button" data-add-assignment-point>+ Poin</button>
            </td>
            <td><textarea name="student_assignment_models[__INDEX__][notes]" rows="2" placeholder="Tujuan, karakteristik, output, atau catatan"></textarea></td>
            <td>
                <div class="assignment-actions">
                    <button class="btn secondary" type="button" data-remove-assignment-row>&times;</button>
                </div>
            </td>
        </tr>
    </template>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const page = document.querySelector('[data-assignment-page]');
            const form = document.querySelector('[data-assignment-form]');
            const editButton = document.querySelector('[data-assignment-edit]');
            const saveButton = document.querySelector('[data-assignment-save]');
            const note = document.querySelector('[data-assignment-note]');
            const template = document.getElementById('assignment-row-template');
            let nextIndex = {{ $globalIndex }};

            const renumber = () => {
                document.querySelectorAll('[data-assignment-body]').forEach((body) => {
                    body.querySelectorAll('.assignment-model-row').forEach((row, index) => {
                        const number = row.querySelector('.manual-rps-row-no');
                        if (number) number.textContent = index + 1;
                    });
                });
            };

            const unlock = () => {
                page?.classList.remove('assignment-readonly');
                document.querySelectorAll('[data-assignment-form] input[readonly], [data-assignment-form] textarea[readonly]').forEach((field) => field.removeAttribute('readonly'));
                document.querySelectorAll('[data-add-assignment-row], [data-remove-assignment-row], [data-add-assignment-point], [data-remove-assignment-point], [data-assignment-save]').forEach((button) => button.removeAttribute('disabled'));
                if (note) note.innerHTML = 'Mode edit aktif. Silakan ubah data lalu tekan <strong>Simpan</strong>.';
            };

            editButton?.addEventListener('click', unlock);

            document.querySelectorAll('[data-add-assignment-row]').forEach((button) => {
                button.addEventListener('click', () => {
                    unlock();
                    const mode = button.getAttribute('data-add-assignment-row');
                    const body = document.querySelector(`[data-assignment-body="${mode}"]`);
                    if (! body || ! template) return;

                    const nextNumber = body.querySelectorAll('.assignment-model-row').length + 1;
                    const html = template.innerHTML
                        .replaceAll('__INDEX__', String(nextIndex++))
                        .replaceAll('__MODE__', mode)
                        .replaceAll('__NO__', String(nextNumber))
                        .replaceAll('__NUMBER__', String(nextNumber));

                    body.insertAdjacentHTML('beforeend', html);
                    renumber();
                });
            });

            document.addEventListener('click', (event) => {
                const addPointButton = event.target.closest('[data-add-assignment-point]');
                if (! addPointButton) return;

                unlock();
                const cell = addPointButton.closest('td');
                const list = cell?.querySelector('[data-assignment-points]');
                const row = addPointButton.closest('.assignment-model-row');
                const modeInput = row?.querySelector('input[name$="[mode]"]');
                const name = modeInput?.getAttribute('name') || '';
                const match = name.match(/student_assignment_models\[(\d+)\]/);
                const index = match ? match[1] : String(nextIndex++);

                if (! list) return;

                const item = document.createElement('div');
                item.className = 'assignment-point-item';
                item.innerHTML = `
                    <input name="student_assignment_models[${index}][examples_items][]" value="" placeholder="Contoh/Bentuk/Platform">
                    <button class="btn secondary assignment-point-remove" type="button" data-remove-assignment-point>&times;</button>
                `;
                list.appendChild(item);
                item.querySelector('input')?.focus();
            });

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

                unlock();
                const list = removePointButton.closest('[data-assignment-points]');
                const item = removePointButton.closest('.assignment-point-item');
                if (! list || ! item) return;

                if (list.querySelectorAll('.assignment-point-item').length <= 1) {
                    const input = item.querySelector('input');
                    if (input) input.value = '';
                    return;
                }

                item.remove();
            });

            document.addEventListener('click', (event) => {
                const removeButton = event.target.closest('[data-remove-assignment-row]');
                if (! removeButton) return;
                unlock();
                removeButton.closest('tr')?.remove();
                renumber();
            });

            form?.addEventListener('submit', () => {
                document.querySelectorAll('[data-assignment-form] input, [data-assignment-form] textarea, [data-assignment-form] button').forEach((field) => field.removeAttribute('disabled'));
            });
        });
    </script>
@endsection