{{--
    Accordion of the 9 rich-text profile sections shown as tabs on the public faculty page
    (resources/views/frontend/faculty-details.blade.php). Shared by faculty_create.blade.php
    and faculty_edit.blade.php so both stay identical.

    Built as a small self-contained component (own CSS/JS, own class names) rather than on the
    admin theme's Bootstrap `.panel`/`.collapse` classes: this theme restyles those globally and
    the result was a bare list of links with no visible panel or content area.

    Usage: @include('cmsdept.partials.faculty-profile-sections', ['faculty_info' => $faculty_info ?? null])
--}}
@php
    $sections = \App\Models\faculty::profileSections();
    $firstField = array_key_first($sections);
    $faculty_info = $faculty_info ?? null;
@endphp

<div class="line-dashed"></div>
<h3 class="col-sm-12" style="margin-bottom:20px;">Profile Sections</h3>

<style>
    .fp-accordion {
        width: 100%;
        margin: 0 0 20px;
        border: 1px solid #e3e6ea;
        border-radius: 6px;
        overflow: hidden;
        background: #fff;
    }

    .fp-item {
        border-bottom: 1px solid #e3e6ea;
    }

    .fp-item:last-child {
        border-bottom: 0;
    }

    .fp-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 18px;
        cursor: pointer;
        background: #fafbfc;
        transition: background-color .15s ease;
        user-select: none;
    }

    .fp-header:hover {
        background: #f0f1fb;
    }

    .fp-item.open .fp-header {
        background: #eef0fd;
        border-bottom: 1px solid #e3e6ea;
    }

    .fp-header .fp-label {
        font-size: 15px;
        font-weight: 600;
        color: #2c2f45;
    }

    .fp-item.open .fp-header .fp-label {
        color: #4f46e5;
    }

    .fp-header .fp-icon {
        color: #8a8fa3;
        transition: transform .2s ease;
    }

    .fp-item.open .fp-header .fp-icon {
        transform: rotate(180deg);
        color: #4f46e5;
    }

    .fp-body {
        display: none;
        padding: 18px;
    }

    .fp-item.open .fp-body {
        display: block;
    }
</style>

<div class="col-sm-12">
    <div class="fp-accordion" id="profileSectionsAccordion">
        @foreach ($sections as $field => $label)
            <div class="fp-item {{ $field === $firstField ? 'open' : '' }}" data-field="{{ $field }}">
                <div class="fp-header">
                    <span class="fp-label">{{ $label }}</span>
                    <i class="fa fa-angle-down fp-icon"></i>
                </div>
                <div class="fp-body">
                    <textarea class="span12 profile-section-editor" id="{{ $field }}" name="{{ $field }}"
                        rows="8" style="height:250px;">{{ $faculty_info->$field ?? '' }}</textarea>
                </div>
            </div>
        @endforeach
    </div>
</div>

@push('scripts')
    <script>
        (function () {
            // CKEditor (classic, iframe-based) can render with a broken/zero height if it's created
            // while its textarea is hidden (display:none). So each editor is created only once its
            // panel is actually shown: immediately for the one panel that starts open, lazily (on
            // first expand) for the rest.
            function initEditor(id) {
                if (window.CKEDITOR && !CKEDITOR.instances[id]) {
                    CKEDITOR.replace(id, {
                        extraPlugins: 'image,link',
                        filebrowserUploadUrl: "{{ route('ckeditor.upload', ['_token' => csrf_token()]) }}",
                        filebrowserImageUploadUrl: "{{ route('ckeditor.upload') }}?_token={{ csrf_token() }}",
                        filebrowserUploadMethod: 'form',
                    });
                }
            }

            var items = document.querySelectorAll('#profileSectionsAccordion .fp-item');

            items.forEach(function (item) {
                var textarea = item.querySelector('.profile-section-editor');
                if (!textarea) {
                    return;
                }

                if (item.classList.contains('open')) {
                    initEditor(textarea.id);
                }

                item.querySelector('.fp-header').addEventListener('click', function () {
                    var wasOpen = item.classList.contains('open');

                    items.forEach(function (other) { other.classList.remove('open'); });

                    if (!wasOpen) {
                        item.classList.add('open');
                        initEditor(textarea.id);
                        if (window.CKEDITOR && CKEDITOR.instances[textarea.id]) {
                            CKEDITOR.instances[textarea.id].resize('100%', 250);
                        }
                    }
                });
            });
        })();
    </script>
@endpush