@extends('layouts.app')

@section('title', 'Draft Proposal Kegiatan')

@section('content')
<div class="pkbm-master-page mx-auto max-w-5xl space-y-5">
    <header class="pkbm-dashboard__heading">
        <div class="min-w-0">
            <p class="pkbm-dashboard__breadcrumb"><a href="{{ route('fk.kegiatan.administration') }}">Administrasi Kegiatan</a><i class="bi bi-chevron-right" aria-hidden="true"></i>Draft Proposal</p>
            <h1 class="pkbm-dashboard__title">Susun Proposal</h1>
            <p class="pkbm-dashboard__subtitle">{{ $activity->judul_kegiatan }} · lengkapi narasi dan susunan kegiatan sebelum dicetak.</p>
        </div>
        <div class="flex flex-wrap gap-2">
            <a href="{{ route('fk.kegiatan.administration.print-proposal', $activity->id) }}" target="_blank" rel="noopener" class="sp-btn-secondary"><i class="bi bi-printer" aria-hidden="true"></i>Pratinjau cetak</a>
            <a href="{{ route('fk.kegiatan.administration') }}" class="sp-btn-secondary"><i class="bi bi-arrow-left" aria-hidden="true"></i>Kembali</a>
        </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 isi proposal.</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 flex items-start gap-4 border border-blue-100 bg-gradient-to-r from-blue-50 to-white p-5">
        <span class="grid size-11 shrink-0 place-items-center rounded-xl bg-white text-xl text-blue-700 shadow-sm"><i class="bi bi-lightbulb" aria-hidden="true"></i></span>
        <div><h2 class="sp-section-title">Draft proposal kegiatan</h2><p class="mt-1 text-xs leading-5 text-slate-600">Lengkapi empat bagian di bawah ini. Data waktu dan tempat diambil dari informasi kegiatan, sedangkan RAB dikelola pada langkah berikutnya.</p></div>
    </section>

    @if ($canManage)
        <form method="POST" action="{{ route('fk.kegiatan.proposal.update', $activity->id) }}" data-proposal-form>
            @csrf
            @method('PUT')
            <div class="space-y-4">
            @foreach ([
                'latar_belakang' => ['I', 'Latar belakang', 'Jelaskan alasan dan konteks kegiatan ini perlu dilaksanakan.'],
                'tujuan_kegiatan' => ['II', 'Tujuan kegiatan', 'Tuliskan hasil yang ingin dicapai melalui kegiatan.'],
                'panitia_kegiatan' => ['III', 'Susunan panitia', 'Cantumkan nama dan jabatan panitia; gunakan tabel bila diperlukan.'],
                'jadwal_kegiatan' => ['IV', 'Jadwal / rundown', 'Susun waktu, rangkaian acara, dan penanggung jawab.'],
            ] as $field => [$number, $title, $hint])
                <section class="sp-card overflow-hidden">
                    <div class="sp-card-header flex items-start gap-3">
                        <span class="grid size-9 shrink-0 place-items-center rounded-xl bg-blue-50 font-bold text-blue-700">{{ $number }}</span>
                        <div><h2 class="sp-section-title">{{ $title }}</h2><p class="mt-1 text-xs text-slate-500">{{ $hint }}</p></div>
                    </div>
                    <div class="p-4 pt-0">
                        <div class="activity-content-toolbar" role="toolbar" aria-label="Format {{ strtolower($title) }}">
                            <button type="button" class="sp-btn-secondary" data-proposal-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-proposal-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-proposal-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-proposal-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-proposal-indent="outdent" aria-label="Kurangi indentasi paragraf" 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-proposal-indent="indent" aria-label="Tambah indentasi paragraf" title="Tambah indentasi (Tab)"><i class="bi bi-text-indent-right" aria-hidden="true"></i></button>
                        </div>
                        <textarea name="{{ $field }}" class="hidden" data-proposal-input>{{ $activity->{$field.'_safe'} }}</textarea>
                        <div class="activity-content-editor" contenteditable="true" role="textbox" aria-label="{{ $title }}" aria-multiline="true" spellcheck="true" data-proposal-editor>{!! $activity->{$field.'_safe'} !!}</div>
                    </div>
                </section>
            @endforeach
            </div>
            <div class="sticky bottom-3 z-10 mt-5 flex flex-wrap items-center justify-between gap-3 rounded-2xl border border-slate-200 bg-white/95 p-3 shadow-lg backdrop-blur">
                <p class="text-xs text-slate-500"><i class="bi bi-shield-check mr-1 text-emerald-600" aria-hidden="true"></i>Draft tersimpan untuk kegiatan ini.</p>
                <div class="flex gap-2">
                    <a href="{{ route('fk.kegiatan.budget', $activity->id) }}" class="sp-btn-secondary"><i class="bi bi-arrow-right" aria-hidden="true"></i>Lanjut ke RAB</a>
                    <button type="submit" class="sp-btn-primary"><i class="bi bi-cloud-check" aria-hidden="true"></i>Simpan draft</button>
                </div>
            </div>
        </form>
    @else
        <div class="space-y-4">
            @foreach ([
                'latar_belakang' => ['I', 'Latar belakang'],
                'tujuan_kegiatan' => ['II', 'Tujuan kegiatan'],
                'panitia_kegiatan' => ['III', 'Susunan panitia'],
                'jadwal_kegiatan' => ['IV', 'Jadwal / rundown'],
            ] as $field => [$number, $title])
                <section class="sp-card">
                    <div class="sp-card-header flex items-center gap-3"><span class="grid size-9 place-items-center rounded-xl bg-blue-50 font-bold text-blue-700">{{ $number }}</span><h2 class="sp-section-title">{{ $title }}</h2></div>
                    <div class="activity-content-editor">{!! $activity->{$field.'_safe'} ?: '<em>Belum diisi.</em>' !!}</div>
                </section>
            @endforeach
        </div>
    @endif
</div>
@push('scripts')
    <script>
        function selectedProposalBlock(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;
            if (anchor?.nodeType === Node.TEXT_NODE && anchor.parentElement === editor) {
                const paragraph = document.createElement('p');
                anchor.replaceWith(paragraph);
                paragraph.append(anchor);
                placeProposalCaretAtEnd(paragraph);

                return paragraph;
            }
            if (activeNode === editor) {
                const child = editor.childNodes[selection.anchorOffset]
                    || editor.childNodes[selection.anchorOffset - 1];
                if (child?.nodeType === Node.TEXT_NODE) {
                    const paragraph = document.createElement('p');
                    child.replaceWith(paragraph);
                    paragraph.append(child);
                    placeProposalCaretAtEnd(paragraph);

                    return paragraph;
                }
                if (child instanceof HTMLElement) {
                    return child.matches('li, p, div, h1, h2') ? child : child.querySelector('li, p, div, h1, h2');
                }

                const paragraph = document.createElement('p');
                paragraph.append(document.createElement('br'));
                editor.append(paragraph);
                placeProposalCaretAtEnd(paragraph);

                return paragraph;
            }

            const block = activeNode.closest('li, p, div, h1, h2');

            return block === editor ? null : block;
        }

        function placeProposalCaretAtEnd(block) {
            const walker = document.createTreeWalker(block, NodeFilter.SHOW_TEXT);
            let lastText = null;
            let textNode;
            while ((textNode = walker.nextNode())) {
                if (block.tagName.toLowerCase() !== 'li' || textNode.parentElement.closest('li') === block) {
                    lastText = textNode;
                }
            }

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

        function changeProposalIndent(editor, direction) {
            const block = selectedProposalBlock(editor);
            if (!block) return;

            if (block.tagName.toLowerCase() === 'li') {
                const list = block.parentElement;
                if (!['ul', 'ol'].includes(list.tagName.toLowerCase())) return;

                if (direction === 'indent') {
                    const previousItem = block.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(block);
                } else {
                    const parentItem = list.parentElement;
                    const parentList = parentItem?.parentElement;
                    if (parentItem?.tagName.toLowerCase() !== 'li' || !['ul', 'ol'].includes(parentList?.tagName.toLowerCase())) return;
                    parentItem.after(block);
                    if (!list.querySelector('li')) list.remove();
                }
                placeProposalCaretAtEnd(block);

                return;
            }

            if (direction === 'indent') {
                const quote = document.createElement('blockquote');
                block.before(quote);
                quote.append(block);
                placeProposalCaretAtEnd(block);

                return;
            }

            const quote = block.closest('blockquote');
            if (!quote || !editor.contains(quote)) return;
            quote.before(...quote.childNodes);
            quote.remove();
            placeProposalCaretAtEnd(block);
        }

        document.querySelectorAll('[data-proposal-form]').forEach((form) => {
            form.querySelectorAll('[data-proposal-command]').forEach((button) => {
                button.addEventListener('mousedown', (event) => event.preventDefault());
                button.addEventListener('click', () => {
                    const editor = button.closest('.sp-card').querySelector('[data-proposal-editor]');
                    editor.focus();
                    document.execCommand(button.dataset.proposalCommand, false);
                });
            });
            form.querySelectorAll('[data-proposal-indent]').forEach((button) => {
                button.addEventListener('mousedown', (event) => event.preventDefault());
                button.addEventListener('click', () => {
                    const editor = button.closest('.sp-card').querySelector('[data-proposal-editor]');
                    editor.focus();
                    changeProposalIndent(editor, button.dataset.proposalIndent);
                });
            });
            form.querySelectorAll('[data-proposal-editor]').forEach((editor) => {
                editor.addEventListener('keydown', (event) => {
                    if (event.key !== 'Tab') return;
                    event.preventDefault();
                    changeProposalIndent(editor, event.shiftKey ? 'outdent' : 'indent');
                });
            });
            form.addEventListener('submit', () => {
                form.querySelectorAll('[data-proposal-editor]').forEach((editor) => {
                    editor.previousElementSibling.value = editor.innerHTML;
                });
            });
        });
    </script>
@endpush
@endsection