@extends('layouts.app', ['title' => 'Media Pembelajaran Luring dan Daring'])

@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' => 'learning-media-models', 'label' => 'Export Excel Media'])
    </div>

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

    <style>
        .learning-media-card { display: grid; gap: 20px; }
        .learning-media-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%);
        }
        .learning-media-page-head .section-heading { margin: 0; }
        .learning-media-page-head p { max-width: 920px; line-height: 1.65; }
        .learning-media-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
        .learning-media-stat { border: 1px solid rgba(191,215,248,.95); border-radius: 18px; padding: 14px 16px; background: linear-gradient(180deg,#ffffff,#f7fbff); box-shadow: 0 10px 24px rgba(15,23,42,.045); }
        .learning-media-stat strong { display: block; font-size: 1.55rem; line-height: 1; color: var(--primary); margin-bottom: 6px; }
        .learning-media-stat span { display: block; color: var(--muted); font-size: .9rem; line-height: 1.35; }
        .learning-media-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); }
        .learning-media-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); }
        .learning-media-scroll .manual-rps-table { min-width: 1320px; margin: 0; }
        .learning-media-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,.08); font-size: .9rem; text-align: center; }
        .learning-media-scroll td, .learning-media-scroll th { vertical-align: top; }
        .learning-media-scroll td { padding: 8px 10px; }
        .learning-media-scroll input, .learning-media-scroll textarea, .learning-media-scroll select { width: 100%; border-radius: 10px; font-size: .92rem; }
        .learning-media-scroll textarea { min-height: 82px; resize: vertical; line-height: 1.5; }
        .learning-media-actions { display: flex; gap: 8px; align-items: center; justify-content: center; flex-wrap: wrap; }
        .learning-media-locked-note { color: var(--muted); font-size: .93rem; line-height: 1.6; max-width: 720px; }
        .learning-media-readonly input[readonly], .learning-media-readonly textarea[readonly] { background: rgba(245,249,255,.82); color: var(--text); }
        .learning-media-point-list { display: grid; gap: 8px; }
        .learning-media-point-item { display: grid; grid-template-columns: minmax(170px,1fr) 38px; align-items: center; gap: 8px; }
        .learning-media-point-add { margin-top: 8px; padding: 7px 12px; font-size: .86rem; width: 100%; }
        .learning-media-point-remove { width: 38px; height: 38px; padding: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem; }
        .learning-media-mode-title { align-items: center; gap: 12px; }
        .learning-media-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) {
            .learning-media-toolbar { align-items: stretch; }
            .learning-media-toolbar .action-row { width: 100%; }
            .learning-media-toolbar .action-row .btn { flex: 1; }
            .learning-media-scroll { max-height: none; }
            .learning-media-scroll .manual-rps-table { min-width: 1120px; }
        }
    </style>

    <div class="page-card learning-media-card {{ $locked ? 'learning-media-readonly' : '' }}" data-learning-media-page>
        <div class="learning-media-page-head">
            <div class="section-heading">
                <div>
                    <span class="eyebrow">Admin</span>
                    <h2>Media Pembelajaran</h2>
                    <p>Kelola referensi media pembelajaran luring dan daring. Setiap contoh, bentuk, atau platform dibuat sebagai poin agar lebih rapi, mudah dibaca, dan mudah disesuaikan.</p>
                </div>
            </div>
        </div>

        <div class="learning-media-summary">
            <div class="learning-media-stat">
                <strong>{{ $rowCollection->count() }}</strong>
                <span>Total media pembelajaran</span>
            </div>
            <div class="learning-media-stat">
                <strong>{{ $offlineRows->count() }}</strong>
                <span>Media pembelajaran luring</span>
            </div>
            <div class="learning-media-stat">
                <strong>{{ $onlineRows->count() }}</strong>
                <span>Media pembelajaran daring</span>
            </div>
        </div>

        <div class="learning-media-toolbar">
            <div class="learning-media-locked-note" data-learning-media-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-learning-media-edit>✎ Edit</button>
                <button class="btn" type="submit" form="learning-media-form" data-learning-media-save {{ $locked ? 'disabled' : '' }}>Simpan Perubahan</button>
            </div>
        </div>

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

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

                <div class="learning-media-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>Media Pembelajaran</th>
                                <th>Deskripsi</th>
                                <th>Contoh/Bentuk/Platform</th>
                                <th>Catatan/Tujuan</th>
                                <th>Aksi</th>
                            </tr>
                        </thead>
                        <tbody data-learning-media-body="luring">
                            @foreach ($offlineRows as $row)
                                @include('admin.partials.learning-media-row', ['row' => $row, 'index' => $globalIndex++, 'rowNo' => $loop->iteration, 'locked' => $locked])
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>

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

                <div class="learning-media-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>Media Pembelajaran</th>
                                <th>Deskripsi</th>
                                <th>Contoh/Bentuk/Platform</th>
                                <th>Catatan/Tujuan</th>
                                <th>Aksi</th>
                            </tr>
                        </thead>
                        <tbody data-learning-media-body="daring">
                            @foreach ($onlineRows as $row)
                                @include('admin.partials.learning-media-row', ['row' => $row, 'index' => $globalIndex++, 'rowNo' => $loop->iteration, 'locked' => $locked])
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </form>
    </div>

    <template id="learning-media-row-template">
        <tr class="learning-media-row">
            <td>
                <span class="manual-rps-row-no">__NO__</span>
                <input type="hidden" name="learning_media_models[__INDEX__][mode]" value="__MODE__">
            </td>
            <td><input name="learning_media_models[__INDEX__][category]" value="" placeholder="Contoh: Media Pembelajaran Daring"></td>
            <td><input type="number" min="1" name="learning_media_models[__INDEX__][number]" value="__NUMBER__"></td>
            <td><input name="learning_media_models[__INDEX__][name]" value="" placeholder="Contoh: Media Evaluasi Online"></td>
            <td><textarea name="learning_media_models[__INDEX__][description]" rows="2" placeholder="Deskripsi singkat media pembelajaran"></textarea></td>
            <td>
                <div class="learning-media-point-list" data-learning-media-points>
                    <div class="learning-media-point-item">
                        <input name="learning_media_models[__INDEX__][items_list][]" value="" placeholder="Contoh/Bentuk/Platform">
                        <button class="btn secondary learning-media-point-remove" type="button" data-remove-learning-media-point>&times;</button>
                    </div>
                </div>
                <button class="btn secondary learning-media-point-add" type="button" data-add-learning-media-point>+ Poin</button>
            </td>
            <td><textarea name="learning_media_models[__INDEX__][notes]" rows="2" placeholder="Catatan penggunaan, karakteristik, atau tujuan"></textarea></td>
            <td><div class="learning-media-actions"><button class="btn secondary" type="button" data-remove-learning-media-row>&times;</button></div></td>
        </tr>
    </template>

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

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

            const unlock = () => {
                page?.classList.remove('learning-media-readonly');
                document.querySelectorAll('[data-learning-media-form] input[readonly], [data-learning-media-form] textarea[readonly]').forEach((field) => field.removeAttribute('readonly'));
                document.querySelectorAll('[data-add-learning-media-row], [data-remove-learning-media-row], [data-add-learning-media-point], [data-remove-learning-media-point], [data-learning-media-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-learning-media-row]').forEach((button) => {
                button.addEventListener('click', () => {
                    unlock();
                    const mode = button.getAttribute('data-add-learning-media-row');
                    const body = document.querySelector(`[data-learning-media-body="${mode}"]`);
                    if (! body || ! template) return;
                    const nextNumber = body.querySelectorAll('.learning-media-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-learning-media-point]');
                if (! addPointButton) return;
                unlock();
                const cell = addPointButton.closest('td');
                const list = cell?.querySelector('[data-learning-media-points]');
                const row = addPointButton.closest('.learning-media-row');
                const modeInput = row?.querySelector('input[name$="[mode]"]');
                const name = modeInput?.getAttribute('name') || '';
                const match = name.match(/learning_media_models\[(\d+)\]/);
                const index = match ? match[1] : String(nextIndex++);
                if (! list) return;
                const item = document.createElement('div');
                item.className = 'learning-media-point-item';
                item.innerHTML = `
                    <input name="learning_media_models[${index}][items_list][]" value="" placeholder="Contoh/Bentuk/Platform">
                    <button class="btn secondary learning-media-point-remove" type="button" data-remove-learning-media-point>&times;</button>
                `;
                list.appendChild(item);
                item.querySelector('input')?.focus();
            });

            document.addEventListener('click', (event) => {
                const removePointButton = event.target.closest('[data-remove-learning-media-point]');
                if (! removePointButton) return;
                unlock();
                const list = removePointButton.closest('[data-learning-media-points]');
                const item = removePointButton.closest('.learning-media-point-item');
                if (! list || ! item) return;
                if (list.querySelectorAll('.learning-media-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-learning-media-row]');
                if (! removeButton) return;
                unlock();
                removeButton.closest('tr')?.remove();
                renumber();
            });

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