@php
    $icon = '';
    $hintText = '';

    if ($type == \App\Models\WebinarChapter::$chapterSession) {
        $icon = 'fa-video';
        $hintText = dateTimeFormat($item->date, 'j M Y  H:i') . ' | ' . $item->duration . ' ' . trans('public.min');
    } elseif ($type == \App\Models\WebinarChapter::$chapterFile) {
        $hintText = null;
        // trans('update.file_type_' . $item->file_type) . ($item->volume > 0 ? ' | ' . $item->getVolume() : '');
        $icon = 'fa-solid fa-video'; // Simplified icon handling
    } elseif ($type == \App\Models\WebinarChapter::$chapterTextLesson) {
        $icon = 'fa-file-lines';
        $hintText = $item->study_time . ' ' . trans('public.min');
    }

    $checkSequenceContent = $item->checkSequenceContent();
    $sequenceContentHasError =
        (!empty($checkSequenceContent) and
        (!empty($checkSequenceContent['all_passed_items_error']) or
            !empty($checkSequenceContent['access_after_day_error'])));

    $itemPersonalNote = $item
        ->personalNote()
        ->where('user_id', $authUser->id)
        ->first();
    $hasPersonalNote = (!empty($itemPersonalNote) and !empty($itemPersonalNote->note));
@endphp

<div class="d-flex align-items-start {{ (!empty($checkSequenceContent) and $sequenceContentHasError) ? 'js-sequence-content-error-modal' : 'tab-item' }}"
    style="cursor: pointer"
    data-passed-error="{{ !empty($checkSequenceContent['all_passed_items_error']) ? $checkSequenceContent['all_passed_items_error'] : '' }}"
    data-access-days-error="{{ !empty($checkSequenceContent['access_after_day_error']) ? $checkSequenceContent['access_after_day_error'] : '' }}">
    <div class="me-3 d-flex align-items-center flex-shrink-0 justify-content-center" style="width: 40px; height: 40px;">
        <i class="fas {{ $icon }}"></i>
    </div>

    <div class="flex-grow-1">
        <div class="d-flex align-items-center justify-content-between">
            <div>
                <h6 data-content-type="{{ $type }}" data-content-id="{{ $item->id }}" class="mb-1 tab-title">
                    {{ $item->title }} </h6>
                

                {{-- @php var_dump($item); @endphp --}}
                @isset($hintText)
                    <small class="text-muted">{{ $hintText }}</small>
                @endisset

            </div>

            @if ($hasPersonalNote)
                <span class="badge bg-light text-dark">
                    <i class="fas fa-pen-to-square"></i>
                </span>
            @endif
        </div>

        <div class="">
            <span class="small text-muted">
                @php
                    $description = !empty($item->description)
                        ? $item->description
                        : (!empty($item->summary)
                            ? $item->summary
                            : '');
                @endphp
                {!! truncate($description, 150) !!}
            </span>


            {{-- Passed Lesson Toggle --}}
            {{-- <div class="d-flex align-items-center justify-content-between mt-3">
                <label class="form-check-label" for="readToggle{{ $type }}{{ $item->id }}">
                    {{ trans('public.i_passed_this_lesson') }}
                </label>
                <div class="form-check form-switch">
                    <input type="checkbox" class="form-check-input js-passed-lesson-toggle"
                        @if ($sequenceContentHasError) disabled @endif
                        id="readToggle{{ $type }}{{ $item->id }}" data-item-id="{{ $item->id }}"
                        data-item="{{ $type }}_id" value="{{ $item->webinar_id }}"
                        @if (!empty($item->checkPassedItem())) checked @endif>
                </div>
            </div> --}}

        </div>
        <p>

            <div class="d-flex align-items-start">

                <span class="badge bg-success  {{ !empty($item->checkPassedItem()) ? '' : 'd-none' }}" id="completed-badge-{{ $item->id }}">
                   Completed
                </span>
            </div>

            </p>
    </div>
</div>