@php
    $noteValue = $value ?? null;
    $noteInputValue = is_array($noteValue)
        ? json_encode($noteValue, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES)
        : (is_string($noteValue) ? $noteValue : '');
    $noteErrorKey = $errorKey ?? $name;
    $noteEditorKey = preg_replace('/[^a-zA-Z0-9_-]+/', '-', (string) $name);
    $noteDialogTitleId = 'delivery-note-link-title-' . trim($noteEditorKey, '-');
@endphp

<div class="admin-rich-note {{ !empty($compact) ? 'is-compact' : '' }}" data-delivery-note-editor>
    <label class="admin-form-label">{{ $label ?? 'Panduan Setelah Pembelian' }}</label>

    <div class="admin-rich-note-shell">
        <div class="admin-rich-note-toolbar" role="toolbar" aria-label="Format panduan pengiriman">
            <button type="button" data-note-command="bold" title="Tebal" aria-label="Tebal"><strong>B</strong></button>
            <button type="button" data-note-command="italic" title="Miring" aria-label="Miring"><em>I</em></button>
            <span class="admin-rich-note-divider" aria-hidden="true"></span>
            <button type="button" data-note-command="link" class="admin-rich-note-link-button" title="Tambahkan link">
                <span aria-hidden="true">↗</span>
                Tambah Link
            </button>
            <span class="admin-rich-note-divider" aria-hidden="true"></span>
            <button type="button" data-note-command="unordered-list" title="Daftar poin">• List</button>
            <button type="button" data-note-command="ordered-list" title="Daftar bernomor">1. List</button>
        </div>

        <div
            class="admin-rich-note-editor"
            contenteditable="true"
            role="textbox"
            aria-multiline="true"
            data-note-editable
            data-placeholder="Contoh: Ketika login diminta kode, ambil kode melalui link di sini."
        ></div>

        <input type="hidden" name="{{ $name }}" value="{{ $noteInputValue }}" data-note-input>
    </div>

    <div class="admin-rich-note-link-dialog" data-note-link-dialog hidden>
        <button type="button" class="admin-rich-note-link-backdrop" data-note-link-close aria-label="Tutup dialog tambah link"></button>

        <div class="admin-rich-note-link-panel" role="dialog" aria-modal="true" aria-labelledby="{{ $noteDialogTitleId }}">
            <div class="admin-rich-note-link-heading">
                <div>
                    <p class="admin-rich-note-link-kicker">Panduan Pengiriman</p>
                    <h3 id="{{ $noteDialogTitleId }}">Tambahkan Link</h3>
                    <p>Tentukan tulisan yang dilihat customer dan alamat link tujuannya.</p>
                </div>

                <button type="button" class="admin-rich-note-link-close" data-note-link-close aria-label="Tutup">
                    <span aria-hidden="true">×</span>
                </button>
            </div>

            <div class="admin-rich-note-link-fields">
                <label>
                    <span>Teks tampil</span>
                    <input type="text" data-note-link-text autocomplete="off" placeholder="Contoh: di sini">
                </label>

                <label>
                    <span>Link tujuan</span>
                    <input type="url" data-note-link-url autocomplete="url" inputmode="url" placeholder="https://contoh.com/kode">
                </label>
            </div>

            <p class="admin-rich-note-link-error" data-note-link-error role="alert" hidden></p>

            <div class="admin-rich-note-link-actions">
                <button type="button" class="admin-rich-note-dialog-button is-secondary" data-note-link-close>Batal</button>
                <button type="button" class="admin-rich-note-dialog-button is-primary" data-note-link-submit>Tambahkan Link</button>
            </div>
        </div>
    </div>

    <p class="admin-form-help">{{ $help ?? 'Opsional. Panduan disnapshot bersama data pengiriman dan hanya tampil jika diisi.' }}</p>
    @if ($errors->has($noteErrorKey))
        <p class="admin-form-error">{{ $errors->first($noteErrorKey) }}</p>
    @endif
</div>