@extends('layouts.app', ['title' => 'Durasi Perkuliahan'])

@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' => 'lecture-duration-models', 'label' => 'Export Excel Durasi'])
    </div>

    @php
        $rowCollection = collect($rows ?? []);
        $locked = ! ($isEditMode ?? false);
    @endphp

    <style>
        .lecture-duration-card { display: grid; gap: 20px; }
        .lecture-duration-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%);
        }
        .lecture-duration-page-head .section-heading { margin: 0; }
        .lecture-duration-page-head p { max-width: 920px; line-height: 1.65; }
        .lecture-duration-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); }
        .lecture-duration-scroll { width: 100%; max-height: 620px; 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); }
        .lecture-duration-scroll .manual-rps-table { min-width: 1320px; margin: 0; }
        .lecture-duration-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; }
        .lecture-duration-scroll td, .lecture-duration-scroll th { vertical-align: top; }
        .lecture-duration-scroll td { padding: 8px 10px; }
        .lecture-duration-scroll input, .lecture-duration-scroll textarea, .lecture-duration-scroll select { width: 100%; border-radius: 10px; font-size: .92rem; }
        .lecture-duration-scroll textarea { min-height: 82px; resize: vertical; line-height: 1.5; }
        .lecture-duration-actions { display: flex; gap: 8px; align-items: center; justify-content: center; flex-wrap: wrap; }
        .lecture-duration-locked-note { color: var(--muted); font-size: .93rem; line-height: 1.6; max-width: 720px; }
        .lecture-duration-readonly input[readonly], .lecture-duration-readonly textarea[readonly] { background: rgba(245,249,255,.82); color: var(--text); }
        .lecture-duration-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
        .lecture-duration-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); }
        .lecture-duration-stat strong { display: block; font-size: 1.55rem; line-height: 1; color: var(--primary); margin-bottom: 6px; }
        .lecture-duration-stat span { display: block; color: var(--muted); font-size: .9rem; line-height: 1.35; }
        .lecture-duration-mode-title { align-items: center; gap: 12px; }
        .lecture-duration-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) {
            .lecture-duration-toolbar { align-items: stretch; }
            .lecture-duration-toolbar .action-row { width: 100%; }
            .lecture-duration-toolbar .action-row .btn { flex: 1; }
            .lecture-duration-scroll { max-height: none; }
            .lecture-duration-scroll .manual-rps-table { min-width: 1120px; }
        }
    </style>

    <div class="page-card lecture-duration-card {{ $locked ? 'lecture-duration-readonly' : '' }}" data-lecture-duration-page>
        <div class="lecture-duration-page-head">
            <div class="section-heading">
                <div>
                    <span class="eyebrow">Admin</span>
                    <h2>Durasi Perkuliahan</h2>
                    <p>Kelola referensi durasi sinkronus dan asinkronus untuk berbagai model perkuliahan. Tabel dibuat lebih ringkas dengan header tetap, scroll horizontal, dan isian yang lebih nyaman dibaca.</p>
                </div>
            </div>
        </div>

        <div class="lecture-duration-summary">
            <div class="lecture-duration-stat">
                <strong>{{ $rowCollection->count() }}</strong>
                <span>Total alternatif durasi</span>
            </div>
            <div class="lecture-duration-stat">
                <strong>{{ $rowCollection->pluck('group')->filter()->unique()->count() }}</strong>
                <span>Kelompok durasi</span>
            </div>
            <div class="lecture-duration-stat">
                <strong>{{ $rowCollection->pluck('model')->filter()->unique()->count() }}</strong>
                <span>Model/konteks</span>
            </div>
        </div>

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

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

            <div class="manual-section">
                <div class="section-heading compact lecture-duration-mode-title">
                    <div>
                        <span class="eyebrow">Referensi Durasi</span>
                        <h3>Alternatif Durasi Sinkronus dan Asinkronus</h3>
                    </div>
                    <span class="lecture-duration-mode-pill">{{ $rowCollection->count() }} baris</span>
                    <button class="btn secondary" type="button" data-add-lecture-duration-row {{ $locked ? 'disabled' : '' }}>+ Tambah Baris</button>
                </div>

                <div class="lecture-duration-scroll">
                    <table class="manual-rps-table">
                        <colgroup>
                            <col style="width:4.5%;"><col style="width:18%;"><col style="width:15%;"><col style="width:18%;"><col style="width:14%;"><col style="width:14%;"><col style="width:18%;"><col style="width:6.5%;">
                        </colgroup>
                        <thead>
                            <tr>
                                <th>No</th>
                                <th>Kelompok</th>
                                <th>Model/Jenis</th>
                                <th>Cocok Untuk/Konteks</th>
                                <th>Durasi Sinkronus</th>
                                <th>Durasi Asinkronus</th>
                                <th>Catatan/Tujuan</th>
                                <th>Aksi</th>
                            </tr>
                        </thead>
                        <tbody data-lecture-duration-body>
                            @forelse ($rowCollection as $row)
                                @include('admin.partials.lecture-duration-row', ['row' => $row, 'index' => $loop->index, 'rowNo' => $loop->iteration, 'locked' => $locked])
                            @empty
                                @include('admin.partials.lecture-duration-row', ['row' => [], 'index' => 0, 'rowNo' => 1, 'locked' => $locked])
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </form>
    </div>

    <template id="lecture-duration-row-template">
        @include('admin.partials.lecture-duration-row', ['row' => [], 'index' => '__INDEX__', 'rowNo' => '__NO__', 'locked' => false])
    </template>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const page = document.querySelector('[data-lecture-duration-page]');
            if (!page) return;

            const body = page.querySelector('[data-lecture-duration-body]');
            const template = document.getElementById('lecture-duration-row-template');
            const editButton = page.querySelector('[data-lecture-duration-edit]');
            const saveButton = page.querySelector('[data-lecture-duration-save]');
            const addButton = page.querySelector('[data-add-lecture-duration-row]');
            const note = page.querySelector('[data-lecture-duration-note]');

            let locked = page.classList.contains('lecture-duration-readonly');

            const renumber = () => {
                body.querySelectorAll('[data-lecture-duration-row]').forEach((row, idx) => {
                    const numberCell = row.querySelector('.row-number');
                    if (numberCell) numberCell.textContent = idx + 1;
                    row.querySelectorAll('input, textarea').forEach((field) => {
                        field.name = field.name.replace(/lecture_duration_models\[[^\]]+\]/, `lecture_duration_models[${idx}]`);
                    });
                });
            };

            const setLocked = (state) => {
                locked = state;
                page.classList.toggle('lecture-duration-readonly', locked);
                page.querySelectorAll('input, textarea').forEach((field) => field.readOnly = locked);
                page.querySelectorAll('[data-remove-lecture-duration-row], [data-add-lecture-duration-row]').forEach((button) => button.disabled = locked);
                if (saveButton) saveButton.disabled = locked;
                if (note) {
                    note.innerHTML = locked
                        ? 'Mode lihat aktif. Tekan <strong>Edit</strong> untuk mengubah data, menambah baris, atau menghapus baris.'
                        : 'Mode edit aktif. Silakan ubah data lalu tekan <strong>Simpan</strong>.';
                }
            };

            editButton?.addEventListener('click', () => setLocked(false));

            addButton?.addEventListener('click', () => {
                if (locked || !template || !body) return;
                const index = body.querySelectorAll('[data-lecture-duration-row]').length;
                const html = template.innerHTML.replaceAll('__INDEX__', index).replaceAll('__NO__', index + 1);
                body.insertAdjacentHTML('beforeend', html);
                renumber();
            });

            body?.addEventListener('click', (event) => {
                const button = event.target.closest('[data-remove-lecture-duration-row]');
                if (!button || locked) return;
                const row = button.closest('[data-lecture-duration-row]');
                if (!row) return;
                if (body.querySelectorAll('[data-lecture-duration-row]').length <= 1) {
                    row.querySelectorAll('input, textarea').forEach((field) => field.value = '');
                    return;
                }
                row.remove();
                renumber();
            });

            setLocked(locked);
        });
    </script>
@endsection