@php
    $noteBlocks = [
        'standard_invoice_notes' => ['Standard Invoice Notes', 'Printed on Invoices'],
        'standard_load_sheet_notes' => ['Standard Load Sheet Notes', 'Printed on Load Sheets'],
        'standard_bol_notes' => ['Standard BOL Notes', 'Printed on Bill of Lading Sheet'],
        'standard_customer_sheet_notes' => ['Standard Customer Sheet Notes', 'Printed on Customer Sheets'],
        'standard_quote_notes' => ['Standard Quote Notes', 'Printed on Quotes'],
    ];
@endphp

<div class="tab-pane fade {{ $activeTab === 'notes' ? 'show active' : '' }}" id="settings-notes">
    <form method="POST" action="{{ route('settings.update') }}" id="settingsNotesForm">
        @csrf
        @method('PUT')
        <input type="hidden" name="tab" value="notes">

        <div class="accordion ff-settings-notes-accordion" id="settingsNotesAccordion">
            @foreach ($noteBlocks as $field => [$title, $subtitle])
                <div class="accordion-item ff-settings-notes-item">
                    <h2 class="accordion-header" id="notes-heading-{{ $field }}">
                        <button class="accordion-button ff-settings-notes-toggle {{ $loop->first ? '' : 'collapsed' }}"
                                type="button"
                                data-bs-toggle="collapse"
                                data-bs-target="#notes-panel-{{ $field }}"
                                aria-expanded="{{ $loop->first ? 'true' : 'false' }}"
                                aria-controls="notes-panel-{{ $field }}">
                            <span class="ff-settings-notes-title">{{ $title }}</span>
                            <span class="ff-settings-notes-subtitle"><em>({{ $subtitle }})</em></span>
                        </button>
                    </h2>
                    <div id="notes-panel-{{ $field }}"
                         class="accordion-collapse collapse {{ $loop->first ? 'show' : '' }}"
                         aria-labelledby="notes-heading-{{ $field }}"
                         data-bs-parent="#settingsNotesAccordion">
                        <div class="accordion-body">
                            <textarea name="{{ $field }}" rows="8" class="form-control ff-input ff-summernote" data-field="{{ $field }}">{{ old($field, $notes[$field] ?? '') }}</textarea>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>

        <div class="ff-settings-actions">
            <a href="{{ route('settings.index', ['tab' => 'notes']) }}" class="btn btn-outline-secondary">Cancel</a>
            <button type="submit" class="btn btn-accent">Save</button>
        </div>
    </form>
</div>

@push('styles')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/summernote@0.8.20/dist/summernote-bs5.min.css">
<style>
    .ff-settings-notes-item .note-editor.note-frame {
        border: 1px solid var(--border-color);
        border-radius: 10px;
        overflow: hidden;
    }
    .ff-settings-notes-item .note-toolbar {
        background: var(--surface-1, #f8fafc);
        border-bottom: 1px solid var(--border-color);
    }
    .ff-settings-notes-item .note-editable {
        background: var(--card-bg, #fff);
        color: var(--text-main);
        min-height: 180px;
    }
    [data-theme="dark"] .ff-settings-notes-item .note-toolbar {
        background: #111827;
    }
    [data-theme="dark"] .ff-settings-notes-item .note-editable {
        background: #1b1f27;
        color: #f8fafc;
    }
    [data-theme="dark"] .ff-settings-notes-item .note-btn,
    [data-theme="dark"] .ff-settings-notes-item .note-dropdown-menu {
        background: #111827;
        color: #f8fafc;
        border-color: var(--border-color);
    }
</style>
@endpush

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.20/dist/summernote-bs5.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
    const accordion = document.getElementById('settingsNotesAccordion');
    const form = document.getElementById('settingsNotesForm');

    if (!accordion || !form || typeof jQuery === 'undefined' || !jQuery.fn.summernote) {
        return;
    }

    const summernoteOptions = {
        height: 200,
        placeholder: 'Enter standard notes...',
        toolbar: [
            ['style', ['style']],
            ['font', ['bold', 'italic', 'underline', 'strikethrough', 'clear']],
            ['para', ['ul', 'ol', 'paragraph']],
            ['insert', ['link']],
            ['view', ['fullscreen', 'codeview']]
        ],
        styleTags: ['p', 'h6'],
        callbacks: {
            onChange: function (contents) {
                jQuery(this).val(contents);
            }
        }
    };

    function initSummernote($textarea) {
        if (!$textarea.length || $textarea.next('.note-editor').length) {
            return;
        }

        $textarea.summernote(summernoteOptions);
    }

    function destroySummernote($textarea) {
        if (!$textarea.length || !$textarea.next('.note-editor').length) {
            return;
        }

        $textarea.val($textarea.summernote('code'));
        $textarea.summernote('destroy');
    }

    accordion.querySelectorAll('.accordion-collapse.show textarea.ff-summernote').forEach(function (el) {
        initSummernote(jQuery(el));
    });

    accordion.addEventListener('shown.bs.collapse', function (event) {
        initSummernote(jQuery(event.target).find('textarea.ff-summernote'));
    });

    accordion.addEventListener('hide.bs.collapse', function (event) {
        destroySummernote(jQuery(event.target).find('textarea.ff-summernote'));
    });

    form.addEventListener('submit', function () {
        jQuery('.ff-summernote').each(function () {
            const $field = jQuery(this);

            if ($field.next('.note-editor').length) {
                $field.val($field.summernote('code'));
            }
        });
    });
});
</script>
@endpush