{{--
    Lead Notes Tab
    Usage: @include('admin.leads.partials.notes_tab', ['leadId' => $leadId])
--}}
<div id="lead-notes-panel" data-lead-id="{{ $leadId ?? 0 }}">

    {{-- Search bar + Filters button --}}
    <div class="project-form form-line px-3 pt-3 pb-0">
        <div class="d-flex gap-2 align-items-center">
            <div class="input-group input-group-sm flex-grow-1">
                <span class="input-group-text"><i class="bx bx-search"></i></span>
                <input type="text" id="notesSearchInput" class="form-control" placeholder="Search Notes">
            </div>
            <button type="button" class="green-btn-inner waves-effect btn-sm d-flex align-items-center gap-1" id="notesFilterBtn" style="white-space:nowrap;">
                <i class="bx bx-filter-alt" style="color:#16C4C0;"></i> Filters (<span id="notesFilterCount">10</span>)
            </button>
        </div>
    </div>

    {{-- Filter panel (hidden by default) --}}
    <div id="notesFilterPanel" class="px-3 pt-2" style="display:none;">
        <div class="border-top pt-2">
            <h6 class="text-center text-uppercase fw-bold small mb-2" style="color:#16C4C0;">Filter Lead Notes</h6>
            <div class="row g-2 mb-2">
                @php
                    $noteFilters = [
                        'calendar' => ['icon' => 'bx-calendar', 'label' => 'Calendar'],
                        'communications' => ['icon' => 'bx-phone', 'label' => 'Communications'],
                        'esign' => ['icon' => 'bx-edit', 'label' => 'E-Sign'],
                        'emails' => ['icon' => 'bx-envelope', 'label' => 'Emails'],
                        'status_triggers' => ['icon' => 'bx-transfer', 'label' => 'Status Triggers'],
                        'user' => ['icon' => 'bx-group', 'label' => 'User'],
                        'visitors_tracking' => ['icon' => 'bx-show', 'label' => 'Visitors Tracking'],
                        'post_api' => ['icon' => 'bx-cloud-upload', 'label' => 'POST API'],
                        'payments' => ['icon' => 'bx-dollar', 'label' => 'Payments'],
                        'lead_sharing' => ['icon' => 'bx-share-alt', 'label' => 'Lead Sharing'],
                    ];
                @endphp
                @foreach($noteFilters as $filterKey => $filter)
                <div class="col-6">
                    <div class="custom-control custom-checkbox project-checkbox">
                        <input class="custom-control-input note-filter-check" type="checkbox" value="{{ $filterKey }}" id="nf_{{ $filterKey }}" checked>
                        <label class="custom-control-label small" for="nf_{{ $filterKey }}">
                            <i class="bx {{ $filter['icon'] }}"></i> {{ $filter['label'] }} <span class="text-muted" style="cursor:help;" title="{{ $filter['label'] }} notes">&#9432;</span>
                        </label>
                    </div>
                </div>
                @endforeach
            </div>
            <div class="d-flex justify-content-end gap-2 mb-2">
                <button type="button" class="black-btn-inner waves-effect btn-sm" id="noteFilterCancel"><i class="bx bx-x"></i> Cancel</button>
                <button type="button" class="green-btn-inner btn-sm waves-effect" id="noteFilterConfirm"><i class="bx bx-check"></i> Confirm</button>
            </div>
        </div>
    </div>

    {{-- CREATE NOTE section --}}
    <div class="px-3 mt-2">
        <div class="border-top pt-2">
            <div class="d-flex align-items-center cursor-pointer" id="createNoteToggle" style="cursor:pointer;">
                <strong class="text-uppercase small">Create Note</strong>
                <i class="bx bx-chevron-up ms-1" id="createNoteChevron"></i>
            </div>
            <div id="createNoteCollapse">
                <form id="createNoteForm" class="mt-2" novalidate>
                    <div class="form-floating mb-2">
                        <textarea id="noteBody" class="form-control" style="height:100px;" placeholder="Enter your note"></textarea>
                        <label><span class="text-danger">*</span> Notes</label>
                    </div>
                    <div class="mb-2 project-form form-line">
                        <label class="form-label small">Notify Users</label>
                        <select id="notifyUsersSelect" class="form-control select2" multiple style="width:100%" data-placeholder="Select users to notify...">
                            @php($grouped = isset($assignableUsersRoleWise) && is_array($assignableUsersRoleWise) && count($assignableUsersRoleWise))
                            @if($grouped)
                                @foreach($assignableUsersRoleWise as $roleId => $roleBlock)
                                    @if(!empty($roleBlock['children']))
                                        <optgroup label="{{ $roleBlock['label'] }}">
                                            @foreach($roleBlock['children'] as $cid => $cname)
                                                <option value="{{ $cid }}">{{ $cname }}</option>
                                            @endforeach
                                        </optgroup>
                                    @endif
                                @endforeach
                            @else
                                @foreach(($assignableUsers ?? []) as $au)
                                    <option value="{{ $au->id ?? $au['id'] }}">{{ $au->name ?? (($au->first_name ?? '') . ' ' . ($au->last_name ?? '')) }}</option>
                                @endforeach
                            @endif
                        </select>
                    </div>
                    <div class="custom-control custom-checkbox project-checkbox mb-2">
                        <input type="checkbox" class="custom-control-input" id="notifyAllAssigned">
                        <label class="custom-control-label small" for="notifyAllAssigned">Notify all assigned users</label>
                    </div>
                    <div class="d-flex gap-2 justify-content-end mb-2">
                        <button type="button" class="black-btn-inner waves-effect btn-sm" id="cancelNoteBtn"><i class="bx bx-x"></i> Cancel</button>
                        <button type="button" class="green-btn-inner btn-sm waves-effect" id="submitNoteBtn"><i class="bx bx-plus"></i> Create</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {{-- PREVIOUS notes section --}}
    <div class="px-3 mt-2">
        <div class="border-top pt-2">
            <div class="d-flex justify-content-between align-items-center">
                <strong class="text-uppercase small">Previous (<span id="prevNotesCount">0</span>)</strong>
                <a href="javascript:void(0)" id="expandAllNotes" class="small" style="color:#16C4C0;">Expand All</a>
            </div>
            <div id="notesListContainer" class="mt-2"></div>
            <div id="notesEmptyState" class="text-center py-5 d-none">
                <i class="bx bx-note" style="font-size:3.5rem; color:#ccc;"></i>
                <p class="mb-0 mt-2" style="color:#888; font-size:14px;">No Notes</p>
            </div>
            <div id="notesLoadingState" class="text-center py-3 text-muted">
                <div class="spinner-border spinner-border-sm"></div> Loading...
            </div>
            {{-- Load more --}}
            <div id="notesLoadMore" class="text-center py-2 d-none">
                <button type="button" class="black-btn-inner waves-effect btn-sm" id="loadMoreNotesBtn">Load More</button>
            </div>
        </div>
    </div>
</div>

@push('page_script')
<script>
(function () {
    var __notesPanel = document.getElementById('lead-notes-panel');
    if (!__notesPanel) return; // tab not rendered on this page
    const leadId   = __notesPanel.dataset.leadId;
    const indexUrl  = '{{ route("leads.notes.index", ["lead" => "__L__"]) }}'.replace('__L__', leadId);
    const storeUrl  = '{{ route("leads.notes.store", ["lead" => "__L__"]) }}'.replace('__L__', leadId);
    const CSRF      = '{{ csrf_token() }}';
    const updateUrlTpl = '{{ route("leads.notes.update", ["lead" => "__L__", "note" => "__N__"]) }}'.replace('__L__', leadId);

    // Safe event binding helper — prevents null crashes
    function _on(id, evt, fn) { var el = document.getElementById(id); if (el) el.addEventListener(evt, fn); }

    let currentPage = 1;
    let lastPage    = 1;
    let activeFilters = [
        'calendar','communications','esign','emails','status_triggers',
        'user','visitors_tracking','post_api','payments','lead_sharing'
    ];
    let searchText = '';
    let searchTimer = null;

    // --- Search ---
    _on('notesSearchInput', 'input', function () {
        clearTimeout(searchTimer);
        searchTimer = setTimeout(function () {
            var si = document.getElementById('notesSearchInput');
            searchText = si ? si.value.trim() : '';
            currentPage = 1;
            loadNotes(true);
        }, 300);
    });

    // --- Filter panel ---
    _on('notesFilterBtn', 'click', function () {
        const panel = document.getElementById('notesFilterPanel');
        if (panel) panel.style.display = panel.style.display === 'none' ? 'block' : 'none';
    });
    _on('noteFilterCancel', 'click', function () {
        var p = document.getElementById('notesFilterPanel');
        if (p) p.style.display = 'none';
    });
    _on('noteFilterConfirm', 'click', function () {
        activeFilters = [];
        document.querySelectorAll('.note-filter-check:checked').forEach(function (cb) {
            activeFilters.push(cb.value);
        });
        var fc = document.getElementById('notesFilterCount');
        if (fc) fc.textContent = activeFilters.length;
        var fp = document.getElementById('notesFilterPanel');
        if (fp) fp.style.display = 'none';
        currentPage = 1;
        loadNotes(true);
    });

    // --- Create note toggle ---
    _on('createNoteToggle', 'click', function () {
        const collapse = document.getElementById('createNoteCollapse');
        const chevron = document.getElementById('createNoteChevron');
        if (collapse && chevron) {
            if (collapse.style.display === 'none') {
                collapse.style.display = 'block';
                chevron.className = 'bx bx-chevron-up ms-1';
            } else {
                collapse.style.display = 'none';
                chevron.className = 'bx bx-chevron-down ms-1';
            }
        }
    });

    // --- Clear inline validation on input ---
    _on('noteBody', 'input', function () {
        if (typeof clearFieldStyling === 'function') clearFieldStyling($('#noteBody'));
    });

    // --- Init Select2 for notify users ---
    try {
        if (typeof $.fn.select2 !== 'undefined') {
            var $ns = $('#notifyUsersSelect');
            if ($ns.length && $ns.hasClass('select2-hidden-accessible')) { $ns.select2('destroy'); }
            if ($ns.length) $ns.select2({ placeholder: 'Select users to notify...', allowClear: true, width: '100%' });
        }
    } catch(e) { /* select2 init is non-critical */ }

    // --- Cancel note ---
    _on('cancelNoteBtn', 'click', function () {
        var nb = document.getElementById('noteBody');
        if (nb) nb.value = '';
        var na = document.getElementById('notifyAllAssigned');
        if (na) na.checked = false;
        if (typeof $.fn.select2 !== 'undefined') {
            $('#notifyUsersSelect').val(null).trigger('change');
        }
        if (typeof clearFieldStyling === 'function') clearFieldStyling($('#noteBody'));
    });

    // --- Create note form ---
    _on('submitNoteBtn', 'click', function (e) {
        e.preventDefault();
        const body = document.getElementById('noteBody').value.trim();
        if (!body) {
            showRequiredTooltip($('#noteBody'), 'Notes is required');
            return;
        }
        clearFieldStyling($('#noteBody'));

        const notifyAll = document.getElementById('notifyAllAssigned').checked;
        const notifyUsers = [];
        var s2val = (typeof $.fn.select2 !== 'undefined') ? ($('#notifyUsersSelect').val() || []) : [];
        s2val.forEach(function (v) { notifyUsers.push(parseInt(v)); });

        const submitBtn = document.getElementById('submitNoteBtn');
        submitBtn.disabled = true;

        fetch(storeUrl, {
            method: 'POST',
            headers: { 'X-CSRF-TOKEN': CSRF, 'Content-Type': 'application/json', 'Accept': 'application/json' },
            body: JSON.stringify({
                body: body,
                notify_all_assigned: notifyAll ? 1 : 0,
                notify_users: notifyUsers
            })
        })
        .then(function (r) { return r.json(); })
        .then(function (json) {
            submitBtn.disabled = false;
            if (json.status === 200) {
                document.getElementById('noteBody').value = '';
                document.getElementById('notifyAllAssigned').checked = false;
                if (typeof $.fn.select2 !== 'undefined') { $('#notifyUsersSelect').val(null).trigger('change'); }
                prependNote(json.data);
                updateCount(1);
                document.getElementById('notesEmptyState').classList.add('d-none');
            } else {
                showErrorToast(json.message || 'Failed to create note.');
            }
        })
        .catch(function () {
            submitBtn.disabled = false;
            showErrorToast('Failed to create note.');
        });
    });

    // --- Load notes ---
    function loadNotes(reset) {
        if (reset) {
            document.getElementById('notesListContainer').innerHTML = '';
            document.getElementById('notesLoadingState').classList.remove('d-none');
            document.getElementById('notesEmptyState').classList.add('d-none');
        }

        var params = new URLSearchParams();
        params.append('page', currentPage);
        params.append('per_page', 20);
        if (searchText) params.append('search', searchText);
        if (activeFilters.length > 0 && activeFilters.length < 10) {
            activeFilters.forEach(function (f) { params.append('filters[]', f); });
        }

        fetch(indexUrl + '?' + params.toString(), {
            headers: { 'X-Requested-With': 'XMLHttpRequest', 'Accept': 'application/json' }
        })
        .then(function (r) { return r.json(); })
        .then(function (json) {
            document.getElementById('notesLoadingState').classList.add('d-none');
            var data = json.data || {};
            var notes = Array.isArray(data.notes) ? data.notes : (data.notes && data.notes.data ? data.notes.data : []);
            lastPage = data.last_page || 1;

            document.getElementById('prevNotesCount').textContent = data.total || 0;

            // Update tab badge
            updateTabBadge(data.total || 0);

            if (notes.length === 0 && currentPage === 1) {
                document.getElementById('notesEmptyState').classList.remove('d-none');
                document.getElementById('notesLoadMore').classList.add('d-none');
                return;
            }

            notes.forEach(function (note) {
                appendNote(note);
            });

            if (currentPage < lastPage) {
                document.getElementById('notesLoadMore').classList.remove('d-none');
            } else {
                document.getElementById('notesLoadMore').classList.add('d-none');
            }
        })
        .catch(function (err) {
            console.error('Notes load error:', err);
            document.getElementById('notesLoadingState').classList.add('d-none');
            if (currentPage === 1 && !document.querySelectorAll('#notesListContainer .note-card').length) {
                document.getElementById('notesEmptyState').classList.remove('d-none');
            }
        });
    }

    // --- Load more ---
    _on('loadMoreNotesBtn', 'click', function () {
        currentPage++;
        loadNotes(false);
    });

    // --- Render note card ---
    function createNoteHtml(note) {
        var initials = (note.user_name || 'U').charAt(0).toUpperCase();
        var bgColor = stringToColor(note.user_name || '');
        var avatarHtml = '<div style="width:36px;height:36px;border-radius:50%;background:' + bgColor + ';color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:14px;flex-shrink:0;">' + escHtml(initials) + '</div>';

        var updateUrl = note.update_url || updateUrlTpl.replace('__N__', note.id);

        var actionsHtml = '<div class="d-flex gap-2 flex-shrink-0 note-actions">' +
            '<button type="button" class="btn btn-sm btn-link p-0 note-action" data-action="edit" data-url="' + updateUrl + '" data-id="' + note.id + '" title="Edit Note"><i class="bx bx-edit-alt" style="font-size:16px; color:#16C4C0;"></i></button>' +
            '<button type="button" class="btn btn-sm btn-link p-0 note-action" data-action="delete" data-url="' + note.delete_url + '" data-id="' + note.id + '" title="Delete Note"><i class="bx bx-trash" style="font-size:16px; color:#dc3545;"></i></button>' +
            '<button type="button" class="btn btn-sm btn-link p-0 note-action" data-action="pin" data-url="' + note.pin_url + '" data-id="' + note.id + '" title="' + (note.is_pinned ? 'Unpin Note' : 'Pin to Top') + '"><i class="bx ' + (note.is_pinned ? 'bxs-pin' : 'bx-pin') + '" style="font-size:16px; color:' + (note.is_pinned ? '#f0ad4e' : '#6c757d') + ';"></i></button>' +
            '</div>';

        var sourceIcon = '';
        if (note.source_type && note.source_type !== 'user') {
            sourceIcon = '<span class="badge bg-light text-dark ms-1 small">' + escHtml(note.source_type) + '</span>';
        }
        if (note.is_pinned) {
            sourceIcon += '<i class="bx bxs-pin text-warning ms-1" title="Pinned"></i>';
        }

        var repliesHtml = '';
        if (note.replies && note.replies.length > 0) {
            repliesHtml = '<div class="ms-4 mt-1 border-start ps-2">';
            note.replies.forEach(function (r) {
                repliesHtml += '<div class="small text-muted mb-1"><strong>' + escHtml(r.user_name) + '</strong> ' + escHtml(r.time_ago) + '<br>' + escHtml(r.body) + '</div>';
            });
            repliesHtml += '</div>';
        }

        // Edit form (hidden by default)
        var editFormHtml = '<div class="note-edit-form d-none mt-2" data-note-id="' + note.id + '">' +
            '<textarea class="form-control form-control-sm note-edit-body" rows="3" style="resize:vertical;">' + escHtml(note.body) + '</textarea>' +
            '<div class="d-flex gap-2 justify-content-end mt-2">' +
                '<button type="button" class="black-btn-inner waves-effect btn-sm note-edit-cancel"><i class="bx bx-x"></i> Cancel</button>' +
                '<button type="button" class="green-btn-inner btn-sm waves-effect note-edit-save" data-url="' + updateUrl + '" data-id="' + note.id + '"><i class="bx bx-check"></i> Save</button>' +
            '</div>' +
        '</div>';

        return '<div class="d-flex gap-2 py-2 border-bottom note-card" data-id="' + note.id + '">' +
            avatarHtml +
            '<div class="flex-grow-1 overflow-hidden">' +
                '<div class="d-flex justify-content-between align-items-start">' +
                    '<div><strong class="small">' + escHtml(note.user_name) + '</strong> <span class="text-muted small">' + escHtml(note.time_ago) + '</span>' + sourceIcon + '</div>' +
                    actionsHtml +
                '</div>' +
                '<div class="small mt-1 note-body-text" style="white-space:pre-wrap;">' + escHtml(note.body) + '</div>' +
                editFormHtml +
                repliesHtml +
            '</div>' +
        '</div>';
    }

    function prependNote(note) {
        var container = document.getElementById('notesListContainer');
        var div = document.createElement('div');
        div.innerHTML = createNoteHtml(note);
        container.prepend(div.firstChild);
        bindNoteActions(container.firstChild);
    }

    function appendNote(note) {
        var container = document.getElementById('notesListContainer');
        var div = document.createElement('div');
        div.innerHTML = createNoteHtml(note);
        container.appendChild(div.firstChild);
        bindNoteActions(container.lastChild);
    }

    function bindNoteActions(card) {
        card.querySelectorAll('.note-action').forEach(function (btn) {
            btn.addEventListener('click', handleNoteAction);
        });
        // Bind edit form cancel
        var editCancel = card.querySelector('.note-edit-cancel');
        if (editCancel) {
            editCancel.addEventListener('click', function () {
                var editForm = this.closest('.note-edit-form');
                var bodyEl = editForm.parentElement.querySelector('.note-body-text');
                editForm.classList.add('d-none');
                bodyEl.classList.remove('d-none');
                // Reset textarea to original
                editForm.querySelector('.note-edit-body').value = bodyEl.textContent;
            });
        }
        // Bind edit form save
        var editSave = card.querySelector('.note-edit-save');
        if (editSave) {
            editSave.addEventListener('click', function () {
                var saveBtn = this;
                var noteId = saveBtn.dataset.id;
                var url = saveBtn.dataset.url;
                var editForm = saveBtn.closest('.note-edit-form');
                var textarea = editForm.querySelector('.note-edit-body');
                var newBody = textarea.value.trim();

                if (!newBody) {
                    textarea.style.borderColor = 'red';
                    showErrorToast('Note body cannot be empty.');
                    return;
                }
                textarea.style.borderColor = '';

                saveBtn.disabled = true;
                fetch(url, {
                    method: 'PUT',
                    headers: { 'X-CSRF-TOKEN': CSRF, 'Content-Type': 'application/json', 'Accept': 'application/json' },
                    body: JSON.stringify({ body: newBody })
                })
                .then(function (r) { return r.json(); })
                .then(function (json) {
                    saveBtn.disabled = false;
                    if (json.status === 200) {
                        var card = document.querySelector('.note-card[data-id="' + noteId + '"]');
                        var bodyEl = card.querySelector('.note-body-text');
                        bodyEl.textContent = json.data.body;
                        editForm.classList.add('d-none');
                        bodyEl.classList.remove('d-none');
                        showSuccessToast('Note updated successfully.');
                    } else {
                        showErrorToast(json.message || 'Failed to update note.');
                    }
                })
                .catch(function () {
                    saveBtn.disabled = false;
                    showErrorToast('Failed to update note.');
                });
            });
        }
    }

    function handleNoteAction(e) {
        e.preventDefault();
        var btn = e.currentTarget;
        var action = btn.dataset.action;
        var url = btn.dataset.url;
        var noteId = btn.dataset.id;

        if (action === 'delete') {
            confirmDialog({
                title: 'Delete Note',
                text: 'Are you sure you want to delete this note? This action cannot be undone.',
                icon: 'warning',
                confirmButtonText: 'Delete',
                confirmButtonColor: '#dc3545'
            }).then(function (result) {
                if (!result.isConfirmed) return;
                fetch(url, {
                    method: 'DELETE',
                    headers: { 'X-CSRF-TOKEN': CSRF, 'Content-Type': 'application/json' }
                })
                .then(function (r) { return r.json(); })
                .then(function (json) {
                    if (json.status === 200) {
                        var card = document.querySelector('.note-card[data-id="' + noteId + '"]');
                        if (card) card.remove();
                        updateCount(-1);
                        if (!document.querySelectorAll('.note-card').length) {
                            document.getElementById('notesEmptyState').classList.remove('d-none');
                        }
                        showSuccessToast('Note deleted successfully.');
                    } else {
                        showErrorToast(json.message || 'Failed to delete note.');
                    }
                })
                .catch(function () {
                    showErrorToast('Failed to delete note.');
                });
            });
        } else if (action === 'edit') {
            var card = document.querySelector('.note-card[data-id="' + noteId + '"]');
            if (!card) return;
            var bodyEl = card.querySelector('.note-body-text');
            var editForm = card.querySelector('.note-edit-form');
            if (!bodyEl || !editForm) return;

            // Toggle edit mode
            bodyEl.classList.add('d-none');
            editForm.classList.remove('d-none');
            var textarea = editForm.querySelector('.note-edit-body');
            textarea.focus();
            // Move cursor to end
            textarea.setSelectionRange(textarea.value.length, textarea.value.length);

        } else if (action === 'pin') {
            fetch(url, {
                method: 'POST',
                headers: { 'X-CSRF-TOKEN': CSRF, 'Content-Type': 'application/json' }
            })
            .then(function (r) { return r.json(); })
            .then(function (json) {
                if (json.status === 200) {
                    var icon = btn.querySelector('i');
                    if (json.data.is_pinned) {
                        icon.className = 'bx bxs-pin';
                        icon.style.color = '#f0ad4e';
                        btn.title = 'Unpin Note';
                        showSuccessToast('Note pinned to top.');
                    } else {
                        icon.className = 'bx bx-pin';
                        icon.style.color = '#6c757d';
                        btn.title = 'Pin to Top';
                        showSuccessToast('Note unpinned.');
                    }
                    // Reload notes to reflect new pin order
                    currentPage = 1;
                    loadNotes(true);
                } else {
                    showErrorToast(json.message || 'Failed to update pin.');
                }
            })
            .catch(function () {
                showErrorToast('Failed to update pin.');
            });
        }
    }

    function updateCount(delta) {
        var el = document.getElementById('prevNotesCount');
        var c = parseInt(el.textContent || '0') + delta;
        if (c < 0) c = 0;
        el.textContent = c;
        updateTabBadge(c);
    }

    function updateTabBadge(count) {
        // Find the tab button for this panel and update its text
        var panel = document.getElementById('lead-notes-panel');
        var tabPane = panel.closest('.tab-pane');
        if (tabPane) {
            var tabId = tabPane.id;
            var tabBtn = document.querySelector('[data-bs-target="#' + tabId + '"], [href="#' + tabId + '"]');
            if (tabBtn) {
                tabBtn.innerHTML = 'Notes (' + count + ')';
            }
        }
    }

    // --- Expand All ---
    _on('expandAllNotes', 'click', function () {
        // Placeholder for expanding collapsed note details
    });

    // --- Helpers ---
    function escHtml(str) {
        var d = document.createElement('div');
        d.appendChild(document.createTextNode(String(str || '')));
        return d.innerHTML;
    }

    function stringToColor(str) {
        var hash = 0;
        for (var i = 0; i < str.length; i++) {
            hash = str.charCodeAt(i) + ((hash << 5) - hash);
        }
        var color = '#';
        for (var i = 0; i < 3; i++) {
            var value = (hash >> (i * 8)) & 0xFF;
            value = Math.max(60, Math.min(200, value)); // keep medium brightness
            color += ('00' + value.toString(16)).substr(-2);
        }
        return color;
    }

    // --- Initial load ---
    loadNotes(true);
})();
</script>
@endpush