@if($unit->children && $unit->children->count() > 0)
    {{-- Unit with children - Accordion style --}}
    <div class="unit-accordion level-{{ $level }}" data-level="{{ $level }}">
        <div class="unit-header-accordion" onclick="toggleUnit('unit-{{ $unit->id }}')">
            <div class="d-flex align-items-center justify-content-between">
                <div class="d-flex align-items-center flex-grow-1">
                    {{-- Level indicator --}}
                    <div class="level-indicator me-2">
                        @if($level > 0)
                            <span class="level-line"></span>
                        @endif
                    </div>
                    
                    {{-- Unit icon and content --}}
                    <div class="d-flex align-items-center">
                        @if($level == 0)
                            <div class="unit-number-badge me-2">{{ $loop->iteration }}</div>
                        @else
                            <i class="mdi {{ $unit->type_icon }} me-2 text-{{ $unit->type === 'lesson' ? 'success' : 'info' }}" style="font-size: 16px;"></i>
                        @endif
                        <i class="mdi {{ $loop->first ? 'mdi-chevron-up' : 'mdi-chevron-down' }} unit-chevron me-2 text-primary" style="font-size: 16px; transition: transform 0.2s ease;"></i>

                        <div class="flex-grow-1">
                            <div class="unit-title-accordion">{{ $unit->title }}</div>
                            <div class="unit-meta-accordion">
                                <span class="badge bg-light text-dark me-2">{{ $unit->type_label }}</span>
                                <span class="text-muted">{{ $unit->children->count() > 0 ? $unit->children->count() . ' lessons' : 'No lessons' }}</span>
                                @if($unit->materials && $unit->materials->count() > 0)
                                    <span class="text-muted ms-2">{{ $unit->materials->count() }} materials</span>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
                
                {{-- Action buttons --}}
                <div class="d-flex gap-1 unit-action-buttons">
                    <button type="button" class="btn btn-outline-primary btn-sm" title="Add Materials"
                            onclick="showAjaxModal('{{ route('admin.courses.materials.create', $unit->course_id) }}?unit_id={{ $unit->id }}', 'Add Material to {{ $unit->title }}')">
                        <i class="mdi mdi-file-multiple"></i>
                    </button>
                    @if(has_feature('courses.content.nested_units'))
                        <button type="button" class="btn btn-outline-success btn-sm" title="Add Sub-unit"
                                onclick="showAjaxModal('{{ route('admin.course-units.create', $unit->course_id) }}?parent_id={{ $unit->id }}', 'Add Sub-unit to {{ $unit->title }}')">
                            <i class="mdi mdi-plus"></i>
                        </button>
                    @endif
                    <button type="button" class="btn btn-outline-secondary btn-sm" title="Edit Unit"
                            onclick="showAjaxModal('{{ route('admin.course-units.edit', [$unit->course_id, $unit->id]) }}', 'Edit Course Unit')">
                        <i class="mdi mdi-pencil"></i>
                    </button>
                    <button type="button" class="btn btn-outline-danger btn-sm" title="Delete Unit"
                            onclick="confirmDelete('{{ route('admin.course-units.destroy', [$unit->course_id, $unit->id]) }}', '')">
                        <i class="mdi mdi-trash-can"></i>
                    </button>
                </div>
            </div>
        </div>
        
        <div class="unit-content-accordion collapse {{ $loop->first ? 'show' : '' }}" id="unit-{{ $unit->id }}">
            {{-- Include materials partial for units with children --}}
            @include('admin.course_content.partials.unit-materials', ['unit' => $unit])
            
            {{-- Show children units --}}
            @foreach($unit->children as $child)
                @include('admin.course_content.partials.unit-tree', ['unit' => $child, 'level' => $level + 1])
            @endforeach
        </div>
    </div>
@else
    {{-- Unit without children - Expandable with no content area --}}
    <div class="unit-accordion level-{{ $level }}" data-level="{{ $level }}">
        <div class="unit-header-accordion" onclick="toggleUnit('unit-{{ $unit->id }}')">
            <div class="d-flex align-items-center justify-content-between">
                <div class="d-flex align-items-center flex-grow-1">
                    {{-- Level indicator --}}
                    <div class="level-indicator me-2">
                        @if($level > 0)
                            <span class="level-line"></span>
                        @endif
                    </div>
                    
                    {{-- Unit icon and content --}}
                    <div class="d-flex align-items-center">
                        @if($level == 0)
                            <div class="unit-number-badge me-2">{{ $loop->iteration }}</div>
                        @else
                            <i class="mdi {{ $unit->type_icon }} me-2 text-{{ $unit->type === 'lesson' ? 'success' : 'info' }}" style="font-size: 16px;"></i>
                        @endif
                        <i class="mdi {{ $loop->first ? 'mdi-chevron-up' : 'mdi-chevron-down' }} unit-chevron me-2 text-primary" style="font-size: 16px; transition: transform 0.2s ease;"></i>
                        <div class="flex-grow-1">
                            <div class="unit-title-accordion">{{ $unit->title }}</div>
                            <div class="unit-meta-accordion">
                                <span class="badge bg-light text-dark me-2">{{ $unit->type_label }}</span>
                                @if($unit->materials && $unit->materials->count() > 0)
                                    <span class="text-muted">{{ $unit->materials->count() }} materials</span>
                                @endif
                                <span class="badge bg-{{ $unit->access_type === 'free' ? 'success' : ($unit->access_type === 'paid' ? 'warning' : 'danger') }} ms-2">
                                    {{ $unit->access_type_label }}
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
                
                {{-- Action buttons --}}
                <div class="d-flex gap-1 unit-action-buttons">
                    <button type="button" class="btn btn-outline-primary btn-sm" title="Add Materials"
                            onclick="showAjaxModal('{{ route('admin.courses.materials.create', $unit->course_id) }}?unit_id={{ $unit->id }}', 'Add Material to {{ $unit->title }}')">
                        <i class="mdi mdi-file-multiple"></i>
                    </button>
                    @if(has_feature('courses.content.nested_units'))
                        <button type="button" class="btn btn-outline-success btn-sm" title="Add Sub-unit"
                                onclick="showAjaxModal('{{ route('admin.course-units.create', $unit->course_id) }}?parent_id={{ $unit->id }}', 'Add Sub-unit to {{ $unit->title }}')">
                            <i class="mdi mdi-plus"></i>
                        </button>
                    @endif
                    <button type="button" class="btn btn-outline-secondary btn-sm" title="Edit Unit"
                            onclick="showAjaxModal('{{ route('admin.course-units.edit', [$unit->course_id, $unit->id]) }}', 'Edit Course Unit')">
                        <i class="mdi mdi-pencil"></i>
                    </button>
                    <button type="button" class="btn btn-outline-danger btn-sm" title="Delete Unit"
                            onclick="confirmDelete('{{ route('admin.course-units.destroy', [$unit->course_id, $unit->id]) }}', '')">
                        <i class="mdi mdi-trash-can"></i>
                    </button>
                </div>
            </div>
        </div>
        
        <div class="unit-content-accordion collapse" id="unit-{{ $unit->id }}">
            {{-- Show materials section if there are materials OR if there are children (to show "no materials" message) --}}
            @if(($unit->materials && $unit->materials->count() > 0) || ($unit->children && $unit->children->count() > 0))
                @include('admin.course_content.partials.unit-materials', ['unit' => $unit])
            @endif
            
            {{-- Show general empty state only if no materials and no children --}}
            @if((!$unit->materials || $unit->materials->count() == 0) && (!$unit->children || $unit->children->count() == 0))
                <div class="empty-state">
                    <div class="text-center py-4">
                        <i class="mdi mdi-folder-open text-muted" style="font-size: 48px;"></i>
                        <h6 class="text-muted mt-2">No content available</h6>
                        <p class="text-muted mb-3 small">This unit doesn't have any sub-units or materials yet.</p>
                        <div class="d-flex gap-2 justify-content-center">
                            @if(has_feature('courses.content.nested_units'))
                                <button type="button" class="btn btn-primary btn-sm btn-clean" 
                                        onclick="showAjaxModal('{{ route('admin.course-units.create', $unit->course_id) }}?parent_id={{ $unit->id }}', 'Add Sub-unit to {{ $unit->title }}')">
                                    <i class="mdi mdi-plus"></i> Add Sub-unit
                                </button>
                            @endif
                            <button type="button" class="btn btn-outline-primary btn-sm btn-clean" 
                                    onclick="showAjaxModal('{{ route('admin.courses.materials.create', $unit->course_id) }}?unit_id={{ $unit->id }}', 'Add Material to {{ $unit->title }}')">
                                <i class="mdi mdi-file-multiple"></i> Add Materials
                            </button>
                        </div>
                    </div>
                </div>
            @endif
        </div>
    </div>
@endif

<script>
function toggleUnit(unitId) {
    const element = document.getElementById(unitId);
    const chevron = element.previousElementSibling.querySelector('.unit-chevron');
    
    if (element.classList.contains('show')) {
        element.classList.remove('show');
        chevron.classList.remove('mdi-chevron-up');
        chevron.classList.add('mdi-chevron-down');
    } else {
        element.classList.add('show');
        chevron.classList.remove('mdi-chevron-down');
        chevron.classList.add('mdi-chevron-up');
    }
}
</script>