@extends('layouts.app')

@section('title', 'Kelola Kegiatan')

@section('content')
<div class="pkbm-master-page mx-auto max-w-7xl space-y-5">
    <header class="pkbm-dashboard__heading">
        <div class="min-w-0">
            <p class="pkbm-dashboard__breadcrumb"><span>Kelola Kegiatan</span><i class="bi bi-chevron-right" aria-hidden="true"></i>Riwayat & Risalah</p>
            <h1 class="pkbm-dashboard__title">Kelola Kegiatan</h1>
            <p class="pkbm-dashboard__subtitle">Catat kegiatan organisasi FK, kelola personalia dan risalah, serta cetak dokumen kegiatan.</p>
        </div>
        <div class="flex flex-wrap gap-2">
            @if ($canManageCategories)
                <a href="{{ route('fk.kegiatan.categories') }}" class="sp-btn-secondary shrink-0">
                    <i class="bi bi-tags" aria-hidden="true"></i>Kategori Kegiatan
                </a>
            @endif
            @if ($canManage)
                <button type="button" class="sp-btn-primary shrink-0" data-open-dialog="activity-create-dialog">
                    <i class="bi bi-plus-lg" aria-hidden="true"></i>Tambah Kegiatan
                </button>
            @endif
        </div>
    </header>

    @if (session('status'))
        <div role="status" class="settings-notice settings-notice--success">
            <i class="bi bi-check-circle-fill" aria-hidden="true"></i><span>{{ session('status') }}</span>
        </div>
    @endif
    @if ($errors->any())
        <div role="alert" class="settings-notice settings-notice--error">
            <i class="bi bi-exclamation-circle-fill" aria-hidden="true"></i>
            <div>
                <p class="font-semibold">Periksa kembali data kegiatan.</p>
                <ul class="mt-1 list-inside list-disc">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        </div>
    @endif

    <section class="sp-card overflow-hidden">
        <div class="sp-card-header settings-history-card__header flex flex-wrap items-center justify-between gap-3">
            <div>
                <h2 class="sp-section-title">Daftar kegiatan</h2>
                <p class="mt-1 text-xs text-slate-500">{{ number_format($activities->total(), 0, ',', '.') }} kegiatan terdaftar</p>
            </div>
            <form method="GET" action="{{ route(request()->routeIs('fk.kegiatan.history') ? 'fk.kegiatan.history' : 'fk.kegiatan.index') }}" class="flex w-full flex-wrap gap-2 sm:w-auto">
                <label for="activity-search" class="sr-only">Cari kegiatan</label>
                <input id="activity-search" type="search" name="q" value="{{ $filters['q'] ?? '' }}" placeholder="Cari judul atau tempat..."
                       class="sp-form-control min-w-0 flex-1 px-3 py-2 text-sm sm:w-56">
                <label for="activity-category-filter" class="sr-only">Filter kategori</label>
                <select id="activity-category-filter" name="kategori" class="sp-form-control min-w-0 flex-1 px-3 py-2 text-sm sm:w-48">
                    <option value="">Semua kategori</option>
                    @foreach ($categories as $category)
                        <option value="{{ $category->id }}" @selected((string) ($filters['kategori'] ?? '') === (string) $category->id)>{{ $category->nama_kategori }}</option>
                    @endforeach
                </select>
                <button type="submit" class="sp-btn-secondary"><i class="bi bi-search" aria-hidden="true"></i><span class="sr-only sm:not-sr-only">Cari</span></button>
                @if (($filters['q'] ?? '') !== '' || ($filters['kategori'] ?? '') !== '')
                    <a href="{{ route(request()->routeIs('fk.kegiatan.history') ? 'fk.kegiatan.history' : 'fk.kegiatan.index') }}" class="sp-btn-secondary">Reset</a>
                @endif
            </form>
        </div>

        <div class="overflow-x-auto">
            <table class="sp-table min-w-full">
                <thead>
                    <tr>
                        <th scope="col" class="w-12">No</th>
                        <th scope="col">Kegiatan & waktu</th>
                        <th scope="col">Kategori / tempat</th>
                        <th scope="col" class="text-center">Personalia</th>
                        <th scope="col" class="text-center">Agenda</th>
                        <th scope="col" class="text-center">Notula</th>
                        @if ($canPrint)<th scope="col" class="text-center">Cetak</th>@endif
                        @if ($canManage)<th scope="col" class="text-right">Aksi</th>@endif
                    </tr>
                </thead>
                <tbody>
                    @forelse ($activities as $activity)
                        @php
                            $startDate = $activity->tanggal_kegiatan && $activity->tanggal_kegiatan !== '0000-00-00'
                                ? \Carbon\CarbonImmutable::parse($activity->tanggal_kegiatan)->format('d/m/Y')
                                : '-';
                            $endDate = $activity->tanggal_selesai && $activity->tanggal_selesai !== '0000-00-00'
                                ? \Carbon\CarbonImmutable::parse($activity->tanggal_selesai)->format('d/m/Y')
                                : $startDate;
                        @endphp
                        <tr>
                            <td class="text-slate-500">{{ $activities->firstItem() + $loop->index }}</td>
                            <td class="min-w-56">
                                <span class="block font-bold text-slate-900">{{ $activity->judul_kegiatan ?: 'Kegiatan tanpa judul' }}</span>
                                <span class="mt-1 block text-xs text-slate-500"><i class="bi bi-calendar-event mr-1" aria-hidden="true"></i>{{ $startDate }}{{ $endDate !== $startDate ? ' s.d. '.$endDate : '' }}</span>
                                <span class="block text-xs text-slate-500"><i class="bi bi-clock mr-1" aria-hidden="true"></i>{{ $activity->jam_mulai ? substr($activity->jam_mulai, 0, 5) : '--:--' }}–{{ $activity->jam_selesai ? substr($activity->jam_selesai, 0, 5) : '--:--' }}</span>
                            </td>
                            <td>
                                <span class="block font-medium text-slate-700">{{ $activity->nama_kategori ?: 'Tanpa kategori' }}</span>
                                <span class="mt-1 block text-xs text-slate-500">{{ $activity->tempat_kegiatan ?: 'Tempat belum diisi' }}</span>
                            </td>
                            <td class="text-center">
                                @if ($canManage)
                                    <button type="button" class="sp-btn-secondary whitespace-nowrap" data-open-dialog="personnel-dialog-{{ $activity->id }}">
                                        <i class="bi bi-people" aria-hidden="true"></i>{{ $activity->pimpinan_kegiatan || $activity->notulis_sekretaris ? 'Personalia' : 'Isi data' }}
                                    </button>
                                @else
                                    <span class="text-xs text-slate-500">{{ $activity->pimpinan_kegiatan ?: 'Belum diisi' }}</span>
                                @endif
                            </td>
                            <td class="text-center">
                                @if ($canManage)
                                    <button type="button" class="sp-btn-secondary whitespace-nowrap" data-open-dialog="content-dialog-agenda-{{ $activity->id }}">
                                        <i class="bi bi-list-task" aria-hidden="true"></i>{{ $activity->agenda_kegiatan ? 'Agenda' : 'Isi agenda' }}
                                    </button>
                                @else
                                    <span @class(['text-xs font-medium', 'text-emerald-700' => $activity->agenda_kegiatan, 'text-slate-500' => ! $activity->agenda_kegiatan])>{{ $activity->agenda_kegiatan ? 'Tersedia' : 'Belum diisi' }}</span>
                                @endif
                            </td>
                            <td class="text-center">
                                @if ($canManage)
                                    <button type="button" class="sp-btn-secondary whitespace-nowrap" data-open-dialog="content-dialog-notula-{{ $activity->id }}">
                                        <i class="bi bi-file-earmark-text" aria-hidden="true"></i>{{ $activity->notula_hasil ? 'Notula' : 'Isi notula' }}
                                    </button>
                                @else
                                    <span @class(['text-xs font-medium', 'text-emerald-700' => $activity->notula_hasil, 'text-slate-500' => ! $activity->notula_hasil])>{{ $activity->notula_hasil ? 'Tersedia' : 'Belum diisi' }}</span>
                                @endif
                            </td>
                            @if ($canPrint)
                                <td class="text-center">
                                    <div class="flex justify-center gap-1">
                                        <a href="{{ route('fk.kegiatan.print.minutes', $activity->id) }}" target="_blank" rel="noopener" class="sp-btn-secondary whitespace-nowrap" title="Cetak risalah">
                                            <i class="bi bi-printer" aria-hidden="true"></i><span>Risalah</span>
                                        </a>
                                        <a href="{{ route('fk.kegiatan.print.attendance', $activity->id) }}" target="_blank" rel="noopener" class="sp-btn-secondary whitespace-nowrap" title="Cetak daftar hadir">
                                            <i class="bi bi-person-lines-fill" aria-hidden="true"></i><span>Hadir</span>
                                        </a>
                                    </div>
                                </td>
                            @endif
                            @if ($canManage)
                                <td class="text-right">
                                    <div class="flex justify-end gap-1">
                                        <button type="button" class="settings-icon-action" data-open-dialog="activity-edit-dialog-{{ $activity->id }}" aria-label="Edit {{ $activity->judul_kegiatan }}" title="Edit kegiatan"><i class="bi bi-pencil-square" aria-hidden="true"></i></button>
                                        <form method="POST" action="{{ route('fk.kegiatan.destroy', $activity->id) }}" onsubmit="return confirm('Hapus seluruh data kegiatan ini?')">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="settings-icon-action settings-icon-action--delete" aria-label="Hapus {{ $activity->judul_kegiatan }}" title="Hapus kegiatan"><i class="bi bi-trash3" aria-hidden="true"></i></button>
                                        </form>
                                    </div>
                                </td>
                            @endif
                        </tr>
                    @empty
                        <tr>
                            <td colspan="{{ 6 + ($canPrint ? 1 : 0) + ($canManage ? 1 : 0) }}" class="px-4 py-10 text-center">
                                <span class="mx-auto grid size-11 place-items-center rounded-xl bg-blue-50 text-xl text-blue-600"><i class="bi bi-calendar2-event" aria-hidden="true"></i></span>
                                <p class="mt-3 font-semibold text-slate-700">Belum ada kegiatan</p>
                                <p class="mt-1 text-xs text-slate-500">{{ ($filters['q'] ?? '') !== '' ? 'Coba ubah kata pencarian atau filter kategori.' : 'Tambahkan kegiatan untuk mulai mencatat agenda dan risalah.' }}</p>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        @if ($activities->hasPages())
            <div class="border-t border-slate-100 px-4 py-3">{{ $activities->links() }}</div>
        @endif
    </section>
</div>

@if ($canManage)
    <dialog id="activity-create-dialog" class="pkbm-master-dialog pkbm-class-form-dialog" aria-labelledby="activity-create-title">
        <form method="POST" action="{{ route('fk.kegiatan.store') }}">
            @csrf
            <input type="hidden" name="_form" value="create">
            <div class="pkbm-class-form-dialog__header flex items-start justify-between gap-3 border-b border-slate-100 p-5">
                <div>
                    <h2 id="activity-create-title" class="sp-section-title">Tambah kegiatan</h2>
                    <p class="mt-1 text-xs text-slate-500">Isi informasi dasar kegiatan yang akan dicatat.</p>
                </div>
                <button type="button" data-close-dialog class="pkbm-class-form-dialog__close grid size-8 shrink-0 place-items-center rounded-lg text-slate-500" aria-label="Tutup"><i class="bi bi-x-lg" aria-hidden="true"></i></button>
            </div>
            <div class="grid gap-4 p-5 sm:grid-cols-2">
                <div class="sm:col-span-2">
                    <label for="activity-title" class="sp-form-label">Judul kegiatan</label>
                    <input id="activity-title" name="judul_kegiatan" maxlength="255" required value="{{ old('_form') === 'create' ? old('judul_kegiatan') : '' }}" class="sp-form-control px-3 py-2.5 text-sm">
                </div>
                <div>
                    <label for="activity-category" class="sp-form-label">Kategori</label>
                    <select id="activity-category" name="kategori_kegiatan" required class="sp-form-control px-3 py-2.5 text-sm">
                        <option value="">Pilih kategori</option>
                        @foreach ($categories as $category)
                            <option value="{{ $category->id }}" @selected(old('_form') === 'create' && old('kategori_kegiatan') == $category->id)>{{ $category->nama_kategori }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label for="activity-place" class="sp-form-label">Tempat kegiatan</label>
                    <input id="activity-place" name="tempat_kegiatan" maxlength="255" value="{{ old('_form') === 'create' ? old('tempat_kegiatan') : '' }}" placeholder="Aula / ruang rapat" class="sp-form-control px-3 py-2.5 text-sm">
                </div>
                <div>
                    <label for="activity-start-date" class="sp-form-label">Tanggal mulai</label>
                    <input id="activity-start-date" type="date" name="tanggal_mulai" required value="{{ old('_form') === 'create' ? old('tanggal_mulai') : '' }}" class="sp-form-control px-3 py-2.5 text-sm">
                </div>
                <div>
                    <label for="activity-end-date" class="sp-form-label">Tanggal selesai</label>
                    <input id="activity-end-date" type="date" name="tanggal_selesai" required value="{{ old('_form') === 'create' ? old('tanggal_selesai') : '' }}" class="sp-form-control px-3 py-2.5 text-sm">
                </div>
                <div>
                    <label for="activity-start-time" class="sp-form-label">Jam mulai</label>
                    <input id="activity-start-time" type="time" name="jam_mulai" required value="{{ old('_form') === 'create' ? old('jam_mulai') : '' }}" class="sp-form-control px-3 py-2.5 text-sm">
                </div>
                <div>
                    <label for="activity-end-time" class="sp-form-label">Jam selesai</label>
                    <input id="activity-end-time" type="time" name="jam_selesai" required value="{{ old('_form') === 'create' ? old('jam_selesai') : '' }}" class="sp-form-control px-3 py-2.5 text-sm">
                </div>
            </div>
            <div class="pkbm-class-form-dialog__footer flex justify-end gap-2 border-t border-slate-100 p-5">
                <button type="button" data-close-dialog class="sp-btn-secondary">Batal</button>
                <button type="submit" class="sp-btn-primary"><i class="bi bi-check2-circle" aria-hidden="true"></i>Simpan kegiatan</button>
            </div>
        </form>
    </dialog>

    @foreach ($activities as $activity)
        <dialog id="activity-edit-dialog-{{ $activity->id }}" class="pkbm-master-dialog pkbm-class-form-dialog" aria-labelledby="activity-edit-title-{{ $activity->id }}">
            <form method="POST" action="{{ route('fk.kegiatan.update', $activity->id) }}">
                @csrf
                @method('PUT')
                <input type="hidden" name="_form" value="edit-{{ $activity->id }}">
                <div class="pkbm-class-form-dialog__header flex items-start justify-between gap-3 border-b border-slate-100 p-5">
                    <div><h2 id="activity-edit-title-{{ $activity->id }}" class="sp-section-title">Edit informasi kegiatan</h2><p class="mt-1 text-xs text-slate-500">{{ $activity->judul_kegiatan }}</p></div>
                    <button type="button" data-close-dialog class="pkbm-class-form-dialog__close grid size-8 shrink-0 place-items-center rounded-lg text-slate-500" aria-label="Tutup"><i class="bi bi-x-lg" aria-hidden="true"></i></button>
                </div>
                <div class="grid gap-4 p-5 sm:grid-cols-2">
                    <div class="sm:col-span-2">
                        <label for="activity-title-{{ $activity->id }}" class="sp-form-label">Judul kegiatan</label>
                        <input id="activity-title-{{ $activity->id }}" name="judul_kegiatan" maxlength="255" required value="{{ old('_form') === 'edit-'.$activity->id ? old('judul_kegiatan') : $activity->judul_kegiatan }}" class="sp-form-control px-3 py-2.5 text-sm">
                    </div>
                    <div>
                        <label for="activity-category-{{ $activity->id }}" class="sp-form-label">Kategori</label>
                        <select id="activity-category-{{ $activity->id }}" name="kategori_kegiatan" required class="sp-form-control px-3 py-2.5 text-sm">
                            @foreach ($categories as $category)
                                <option value="{{ $category->id }}" @selected((string) (old('_form') === 'edit-'.$activity->id ? old('kategori_kegiatan') : $activity->kategori_kegiatan) === (string) $category->id)>{{ $category->nama_kategori }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label for="activity-place-{{ $activity->id }}" class="sp-form-label">Tempat kegiatan</label>
                        <input id="activity-place-{{ $activity->id }}" name="tempat_kegiatan" maxlength="255" value="{{ old('_form') === 'edit-'.$activity->id ? old('tempat_kegiatan') : $activity->tempat_kegiatan }}" class="sp-form-control px-3 py-2.5 text-sm">
                    </div>
                    <div>
                        <label for="activity-start-date-{{ $activity->id }}" class="sp-form-label">Tanggal mulai</label>
                        <input id="activity-start-date-{{ $activity->id }}" type="date" name="tanggal_mulai" required value="{{ old('_form') === 'edit-'.$activity->id ? old('tanggal_mulai') : ($activity->tanggal_kegiatan === '0000-00-00' ? '' : $activity->tanggal_kegiatan) }}" class="sp-form-control px-3 py-2.5 text-sm">
                    </div>
                    <div>
                        <label for="activity-end-date-{{ $activity->id }}" class="sp-form-label">Tanggal selesai</label>
                        <input id="activity-end-date-{{ $activity->id }}" type="date" name="tanggal_selesai" required value="{{ old('_form') === 'edit-'.$activity->id ? old('tanggal_selesai') : ($activity->tanggal_selesai === '0000-00-00' ? '' : $activity->tanggal_selesai) }}" class="sp-form-control px-3 py-2.5 text-sm">
                    </div>
                    <div>
                        <label for="activity-start-time-{{ $activity->id }}" class="sp-form-label">Jam mulai</label>
                        <input id="activity-start-time-{{ $activity->id }}" type="time" name="jam_mulai" required value="{{ old('_form') === 'edit-'.$activity->id ? old('jam_mulai') : substr((string) $activity->jam_mulai, 0, 5) }}" class="sp-form-control px-3 py-2.5 text-sm">
                    </div>
                    <div>
                        <label for="activity-end-time-{{ $activity->id }}" class="sp-form-label">Jam selesai</label>
                        <input id="activity-end-time-{{ $activity->id }}" type="time" name="jam_selesai" required value="{{ old('_form') === 'edit-'.$activity->id ? old('jam_selesai') : substr((string) $activity->jam_selesai, 0, 5) }}" class="sp-form-control px-3 py-2.5 text-sm">
                    </div>
                </div>
                <div class="pkbm-class-form-dialog__footer flex justify-end gap-2 border-t border-slate-100 p-5">
                    <button type="button" data-close-dialog class="sp-btn-secondary">Batal</button>
                    <button type="submit" class="sp-btn-primary"><i class="bi bi-check2-circle" aria-hidden="true"></i>Simpan perubahan</button>
                </div>
            </form>
        </dialog>

        <dialog id="personnel-dialog-{{ $activity->id }}" class="pkbm-master-dialog pkbm-class-form-dialog" aria-labelledby="personnel-title-{{ $activity->id }}">
            <form method="POST" action="{{ route('fk.kegiatan.personnel.update', $activity->id) }}">
                @csrf
                @method('PUT')
                <input type="hidden" name="_form" value="personnel-{{ $activity->id }}">
                <div class="pkbm-class-form-dialog__header flex items-start justify-between gap-3 border-b border-slate-100 p-5">
                    <div><h2 id="personnel-title-{{ $activity->id }}" class="sp-section-title">Personalia kegiatan</h2><p class="mt-1 text-xs text-slate-500">{{ $activity->judul_kegiatan }}</p></div>
                    <button type="button" data-close-dialog class="pkbm-class-form-dialog__close grid size-8 shrink-0 place-items-center rounded-lg text-slate-500" aria-label="Tutup"><i class="bi bi-x-lg" aria-hidden="true"></i></button>
                </div>
                <div class="space-y-4 p-5">
                    <div><label for="activity-leader-{{ $activity->id }}" class="sp-form-label">Pimpinan / narasumber</label><input id="activity-leader-{{ $activity->id }}" name="pimpinan_kegiatan" maxlength="100" value="{{ old('_form') === 'personnel-'.$activity->id ? old('pimpinan_kegiatan') : $activity->pimpinan_kegiatan }}" class="sp-form-control px-3 py-2.5 text-sm"></div>
                    <div><label for="activity-secretary-{{ $activity->id }}" class="sp-form-label">Notulis / sekretaris</label><input id="activity-secretary-{{ $activity->id }}" name="notulis_sekretaris" maxlength="100" value="{{ old('_form') === 'personnel-'.$activity->id ? old('notulis_sekretaris') : $activity->notulis_sekretaris }}" class="sp-form-control px-3 py-2.5 text-sm"></div>
                    <div><label for="activity-participants-{{ $activity->id }}" class="sp-form-label">Peserta</label><textarea id="activity-participants-{{ $activity->id }}" name="peserta_kegiatan" rows="4" maxlength="5000" class="sp-form-control px-3 py-2.5 text-sm">{{ old('_form') === 'personnel-'.$activity->id ? old('peserta_kegiatan') : $activity->peserta_kegiatan }}</textarea></div>
                </div>
                <div class="pkbm-class-form-dialog__footer flex justify-end gap-2 border-t border-slate-100 p-5">
                    <button type="button" data-close-dialog class="sp-btn-secondary">Batal</button><button type="submit" class="sp-btn-primary">Simpan personalia</button>
                </div>
            </form>
        </dialog>

        @foreach (['agenda' => ['Agenda kegiatan', $activity->agenda_safe], 'notula' => ['Hasil notula', $activity->notula_safe]] as $section => [$title, $content])
            <dialog id="content-dialog-{{ $section }}-{{ $activity->id }}" class="pkbm-master-dialog pkbm-class-form-dialog" aria-labelledby="content-title-{{ $section }}-{{ $activity->id }}">
                <form method="POST" action="{{ route('fk.kegiatan.content.update', ['activityId' => $activity->id, 'section' => $section]) }}" data-activity-editor-form>
                    @csrf
                    @method('PUT')
                    <input type="hidden" name="_form" value="{{ $section }}-{{ $activity->id }}">
                    <div class="pkbm-class-form-dialog__header flex items-start justify-between gap-3 border-b border-slate-100 p-5">
                        <div><h2 id="content-title-{{ $section }}-{{ $activity->id }}" class="sp-section-title">{{ $title }}</h2><p class="mt-1 text-xs text-slate-500">{{ $activity->judul_kegiatan }}</p></div>
                        <button type="button" data-close-dialog class="pkbm-class-form-dialog__close grid size-8 shrink-0 place-items-center rounded-lg text-slate-500" aria-label="Tutup"><i class="bi bi-x-lg" aria-hidden="true"></i></button>
                    </div>
                    <div class="p-5">
                        <label for="content-editor-{{ $section }}-{{ $activity->id }}" class="sp-form-label">Isi {{ strtolower($title) }}</label>
                        <div class="activity-content-toolbar" role="toolbar" aria-label="Format teks">
                            <button type="button" class="sp-btn-secondary" data-format-command="bold" aria-label="Tebal" title="Tebal"><i class="bi bi-type-bold" aria-hidden="true"></i></button>
                            <button type="button" class="sp-btn-secondary" data-format-command="italic" aria-label="Miring" title="Miring"><i class="bi bi-type-italic" aria-hidden="true"></i></button>
                            <button type="button" class="sp-btn-secondary" data-format-command="insertUnorderedList" aria-label="Daftar berpoin" title="Daftar berpoin"><i class="bi bi-list-ul" aria-hidden="true"></i></button>
                            <button type="button" class="sp-btn-secondary" data-format-command="insertOrderedList" aria-label="Daftar bernomor" title="Daftar bernomor"><i class="bi bi-list-ol" aria-hidden="true"></i></button>
                            <span class="activity-content-toolbar__separator" aria-hidden="true"></span>
                            <button type="button" class="sp-btn-secondary" data-format-command="outdent" aria-label="Kurangi indentasi daftar" title="Kurangi indentasi (Shift+Tab)"><i class="bi bi-text-indent-left" aria-hidden="true"></i></button>
                            <button type="button" class="sp-btn-secondary" data-format-command="indent" aria-label="Tambah indentasi daftar" title="Tambah indentasi (Tab)"><i class="bi bi-text-indent-right" aria-hidden="true"></i></button>
                        </div>
                        <textarea name="content" maxlength="60000" class="hidden" data-content-input>{{ $content }}</textarea>
                        <div id="content-editor-{{ $section }}-{{ $activity->id }}" class="activity-content-editor" contenteditable="true" role="textbox" aria-multiline="true" spellcheck="true" data-activity-editor>{!! $content !!}</div>
                        <p class="mt-2 text-xs text-slate-500">Teks dan format dasar seperti daftar, tebal, dan paragraf akan dipertahankan pada hasil cetak.</p>
                    </div>
                    <div class="pkbm-class-form-dialog__footer flex justify-end gap-2 border-t border-slate-100 p-5">
                        <button type="button" data-close-dialog class="sp-btn-secondary">Batal</button><button type="submit" class="sp-btn-primary">Simpan {{ strtolower($title) }}</button>
                    </div>
                </form>
            </dialog>
        @endforeach
    @endforeach
@endif

@push('scripts')
    <script>
        function selectedActivityListItem(editor) {
            const selection = window.getSelection();
            const anchor = selection?.anchorNode;
            const activeNode = anchor?.nodeType === Node.ELEMENT_NODE ? anchor : anchor?.parentElement;
            if (!activeNode || !editor.contains(activeNode)) return null;

            return activeNode.closest('li');
        }

        function placeActivityCaretAtEnd(item) {
            const list = item.parentElement;
            const walker = document.createTreeWalker(item, NodeFilter.SHOW_TEXT);
            let lastText = null;
            let textNode;
            while ((textNode = walker.nextNode())) {
                if (textNode.parentElement.closest('ul, ol') === list) lastText = textNode;
            }

            const range = document.createRange();
            if (lastText) {
                range.setStart(lastText, lastText.length);
            } else {
                range.selectNodeContents(item);
                range.collapse(true);
            }
            const selection = window.getSelection();
            selection.removeAllRanges();
            selection.addRange(range);
        }

        function changeActivityListIndent(editor, direction) {
            const item = selectedActivityListItem(editor);
            const list = item?.parentElement;
            if (!item || !['ul', 'ol'].includes(list.tagName.toLowerCase())) return;

            if (direction === 'indent') {
                const previousItem = item.previousElementSibling;
                if (!previousItem || previousItem.tagName.toLowerCase() !== 'li') return;

                let nestedList = [...previousItem.children].find(
                    (child) => child.tagName.toLowerCase() === list.tagName.toLowerCase()
                );
                if (!nestedList) {
                    nestedList = document.createElement(list.tagName.toLowerCase());
                    previousItem.append(nestedList);
                }
                nestedList.append(item);
                placeActivityCaretAtEnd(item);

                return;
            }

            const parentItem = list.parentElement;
            const parentList = parentItem?.parentElement;
            if (parentItem?.tagName.toLowerCase() !== 'li' || !['ul', 'ol'].includes(parentList?.tagName.toLowerCase())) return;
            parentItem.after(item);
            if (!list.querySelector('li')) list.remove();
            placeActivityCaretAtEnd(item);
        }

        document.querySelectorAll('[data-open-dialog]').forEach((button) => {
            button.addEventListener('click', () => document.getElementById(button.dataset.openDialog)?.showModal());
        });
        document.querySelectorAll('[data-close-dialog]').forEach((button) => {
            button.addEventListener('click', () => button.closest('dialog')?.close());
        });
        document.querySelectorAll('dialog').forEach((dialog) => {
            dialog.addEventListener('click', (event) => {
                if (event.target === dialog) dialog.close();
            });
        });
        document.querySelectorAll('[data-format-command]').forEach((button) => {
            button.addEventListener('mousedown', (event) => event.preventDefault());
            button.addEventListener('click', () => {
                const editor = button.closest('form').querySelector('[data-activity-editor]');
                editor.focus();
                if (['indent', 'outdent'].includes(button.dataset.formatCommand)) {
                    changeActivityListIndent(editor, button.dataset.formatCommand);
                    return;
                }
                document.execCommand(button.dataset.formatCommand, false);
            });
        });
        document.querySelectorAll('[data-activity-editor-form]').forEach((form) => {
            form.addEventListener('submit', () => {
                form.querySelector('[data-content-input]').value = form.querySelector('[data-activity-editor]').innerHTML;
            });
        });
        document.querySelectorAll('[data-activity-editor]').forEach((editor) => {
            editor.addEventListener('keydown', (event) => {
                if (event.key !== 'Tab') return;
                if (!selectedActivityListItem(editor)) return;
                event.preventDefault();
                changeActivityListIndent(editor, event.shiftKey ? 'outdent' : 'indent');
            });
        });
        const failedForm = @json((string) old('_form'));
        const activityFormPrefix = ['edit-', 'personnel-', 'agenda-', 'notula-'].find((prefix) => failedForm.startsWith(prefix));
        const dialogToOpen = failedForm === 'create' || @json(request()->boolean('tambah'))
            ? 'activity-create-dialog'
            : activityFormPrefix
                ? (activityFormPrefix === 'edit-' ? 'activity-edit-dialog-' : activityFormPrefix === 'personnel-' ? 'personnel-dialog-' : `content-dialog-${activityFormPrefix.slice(0, -1)}-`) + failedForm.slice(activityFormPrefix.length)
                : null;
        if (dialogToOpen) document.getElementById(dialogToOpen)?.showModal();
    </script>
@endpush
@endsection