@if (!empty($course->chapters) and count($course->chapters))
    <div class="accordion" id="chapterAccordion">
        @foreach ($course->chapters as $chapter)
            <div class="accordion-item " data-chapter-order="{{ $chapter->order }}" >
                <h2 class="accordion-header" id="chapter_{{ $chapter->id }}">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                        data-bs-target="#collapseChapter{{ $chapter->id }}" aria-expanded="false"
                        aria-controls="collapseChapter{{ $chapter->id }}">
                        <div class="d-flex align-items-center">
                            {{-- <i class="fas fa-th me-3"></i> --}}
                            <div
                                class=" d-flex flex-column align-items-center justify-content-center pe-5 me-5 border-end">
                                
                                <i id="chapter-complete-{{ $chapter->id }}"
                                    class="fs-1 mb-2 fas fa-check-circle text-success {{ $chapter->isComplete() ? '' : 'd-none' }}"></i>
                                <span id="chapter-number-{{ $chapter->id }}"
                                    class="fw-bold fs-1 mb-2 {{ !$chapter->isComplete() ? '' : 'd-none' }}">
                                    {{ !empty($chapter->order) ? $chapter->order : '1' }}</span>


                                <small class="text-muted">UNIT</small>
                                <small class="text-muted"> {{ $chapter->isComplete() ? $chapter->order : '' }} </small>
                            </div>

                            <div>
                                <div class="fw-bold" id="chapter-heading-{{$chapter->id}}">{{ $chapter->title }}</div>
                                <small class="text-muted">
                                    {{ $chapter->getTopicsCount(true) }} Lessons
                                </small>
                                



                            </div>
                        </div>
                    </button>
                </h2>

                <div id="collapseChapter{{ $chapter->id }}" class="accordion-collapse collapse"
                    aria-labelledby="chapter_{{ $chapter->id }}" data-bs-parent="#chapterAccordion">
                    <div class="accordion-body">
                        @if (!empty($chapter->chapterItems) and count($chapter->chapterItems))
                            @foreach ($chapter->chapterItems as $chapterItem)
                                {{-- label these 1 2 3 4 5 to identify --}}
                                @if (
                                    $chapterItem->type == \App\Models\WebinarChapterItem::$chapterSession and
                                        !empty($chapterItem->session) and
                                        $chapterItem->session->status == 'active')
                                    @include(
                                        'web.default.course.learningPage.components.content_tab.content',
                                        [
                                            'item' => $chapterItem->session,
                                            'type' => 'session',
                                        ]
                                    )
                                @elseif(
                                    $chapterItem->type == \App\Models\WebinarChapterItem::$chapterFile and
                                        !empty($chapterItem->file) and
                                        $chapterItem->file->status == 'active')
                                    @include(
                                        'web.default.course.learningPage.components.content_tab.content',
                                        [
                                            'item' => $chapterItem->file,
                                            'type' => 'file',
                                        ]
                                    )
                                @elseif(
                                    $chapterItem->type == \App\Models\WebinarChapterItem::$chapterTextLesson and
                                        !empty($chapterItem->textLesson) and
                                        $chapterItem->textLesson->status == 'active')
                                    @include(
                                        'web.default.course.learningPage.components.content_tab.content',
                                        [
                                            'item' => $chapterItem->textLesson,
                                            'type' => 'text_lesson',
                                        ]
                                    )
                                    {{-- @elseif(
                                    $chapterItem->type == \App\Models\WebinarChapterItem::$chapterAssignment and
                                        !empty($chapterItem->assignment) and
                                        $chapterItem->assignment->status == 'active')
                                    @include(
                                        'web.default.course.learningPage.components.content_tab.assignment-content-tab',
                                        ['item' => $chapterItem->assignment]
                                    ) --}}
                                @elseif(
                                    $chapterItem->type == \App\Models\WebinarChapterItem::$chapterQuiz and
                                        !empty($chapterItem->quiz) and
                                        $chapterItem->quiz->status == 'active')
                                    @include('web.default.course.learningPage.components.quiz_tab.quiz', [
                                        'item' => $chapterItem->quiz,
                                        'type' => 'quiz',
                                    ])
                                @endif
                            @endforeach
                        @endif
                    </div>
                </div>
            </div>
        @endforeach
    </div>
@endif