@php
    $materialTypes = get_feature('material_options');
    $enabledCount = count($materialTypes);
@endphp

@if($enabledCount == 1)
    {{-- Auto-trigger for single material type --}}
    @foreach($materialTypes as $type => $label)
        <script>
            $(document).ready(function() {
                showAjaxModal('{{ route('admin.videos.create') }}?course_id={{ $course->id }}&unit_id={{ $unit->id }}&type={{ $type }}', 'Add {{ $label }} Material');
            });
        </script>
    @endforeach
@else
    <div class="material-selection-container" style="background-color: #f8f9fa; padding: 20px; border-radius: 10px; margin-bottom: 20px;">
        <div class="row g-3 {{ $enabledCount == 2 ? 'justify-content-center' : '' }}">
        @if(isset($materialTypes['video']))
            <div class="col-{{ $enabledCount == 2 ? '6' : ($enabledCount == 3 ? '4' : '4') }} col-md-{{ $enabledCount == 2 ? '6' : ($enabledCount == 3 ? '4' : '4') }} col-lg-{{ $enabledCount == 2 ? '6' : ($enabledCount == 3 ? '4' : '3') }}">
                <div class="card material-type-card h-100 border-0 shadow-sm" style="cursor: pointer; transition: all 0.3s ease; border-radius: 10px; background: white;" 
                     onclick="showAjaxModal('{{ route('admin.videos.create') }}?course_id={{ $course->id }}&unit_id={{ $unit->id }}&type=video', 'Add Video')">
                    <div class="card-body text-center p-4">
                        <i class="mdi mdi-video mb-3 text-danger" style="font-size: 48px;"></i>
                        <h5 class="card-title mb-2 fw-bold text-dark">Video</h5>
                        <p class="card-text small mb-0 text-muted">Upload video content</p>
                    </div>
                </div>
            </div>
        @endif
        
        @if(isset($materialTypes['document']))
            <div class="col-{{ $enabledCount == 2 ? '6' : ($enabledCount == 3 ? '4' : '4') }} col-md-{{ $enabledCount == 2 ? '6' : ($enabledCount == 3 ? '4' : '4') }} col-lg-{{ $enabledCount == 2 ? '6' : ($enabledCount == 3 ? '4' : '3') }}">
                <div class="card material-type-card h-100 border-0 shadow-sm" style="cursor: pointer; transition: all 0.3s ease; border-radius: 10px; background: white;" 
                     onclick="showAjaxModal('{{ route('admin.documents.create') }}?course_id={{ $course->id }}&unit_id={{ $unit->id }}&type=document', 'Add Document')">
                    <div class="card-body text-center p-4">
                        <i class="mdi mdi-file-document mb-3 text-primary" style="font-size: 48px;"></i>
                        <h5 class="card-title mb-2 fw-bold text-dark">Document</h5>
                        <p class="card-text small mb-0 text-muted">Upload documents & files</p>
                    </div>
                </div>
            </div>
        @endif
        
        @if(isset($materialTypes['audio']))
            <div class="col-{{ $enabledCount == 2 ? '6' : ($enabledCount == 3 ? '4' : '4') }} col-md-{{ $enabledCount == 2 ? '6' : ($enabledCount == 3 ? '4' : '4') }} col-lg-{{ $enabledCount == 2 ? '6' : ($enabledCount == 3 ? '4' : '3') }}">
                <div class="card material-type-card h-100 border-0 shadow-sm" style="cursor: pointer; transition: all 0.3s ease; border-radius: 10px; background: white;" 
                     onclick="showAjaxModal('{{ route('admin.audios.create', $course->id) }}?unit_id={{ $unit->id }}&type=audio', 'Add Audio Material')">
                    <div class="card-body text-center p-4">
                        <i class="mdi mdi-music mb-3 text-success" style="font-size: 48px;"></i>
                        <h5 class="card-title mb-2 fw-bold text-dark">Audio</h5>
                        <p class="card-text small mb-0 text-muted">Upload audio files</p>
                    </div>
                </div>
            </div>
        @endif
        
        @if(isset($materialTypes['text']))
            <div class="col-{{ $enabledCount == 2 ? '6' : ($enabledCount == 3 ? '4' : '4') }} col-md-{{ $enabledCount == 2 ? '6' : ($enabledCount == 3 ? '4' : '4') }} col-lg-{{ $enabledCount == 2 ? '6' : ($enabledCount == 3 ? '4' : '3') }}">
                <div class="card material-type-card h-100 border-0 shadow-sm" style="cursor: pointer; transition: all 0.3s ease; border-radius: 10px; background: white;" 
                     onclick="showAjaxModal('{{ route('admin.notes.create', $course->id) }}?unit_id={{ $unit->id }}&type=text', 'Add Text Material')">
                    <div class="card-body text-center p-4">
                        <i class="mdi mdi-text-box mb-3 text-info" style="font-size: 48px;"></i>
                        <h5 class="card-title mb-2 fw-bold text-dark">Text</h5>
                        <p class="card-text small mb-0 text-muted">Create text content</p>
                    </div>
                </div>
            </div>
        @endif
        
        @if(isset($materialTypes['scorm']))
            <div class="col-{{ $enabledCount == 2 ? '6' : ($enabledCount == 3 ? '4' : '4') }} col-md-{{ $enabledCount == 2 ? '6' : ($enabledCount == 3 ? '4' : '4') }} col-lg-{{ $enabledCount == 2 ? '6' : ($enabledCount == 3 ? '4' : '3') }}">
                <div class="card material-type-card h-100 border-0 shadow-sm" style="cursor: pointer; transition: all 0.3s ease; border-radius: 10px; background: white;" 
                     onclick="showAjaxModal('{{ route('admin.scorms.create', $course->id) }}?unit_id={{ $unit->id }}&type=scorm', 'Add SCORM Material')">
                    <div class="card-body text-center p-4">
                        <i class="mdi mdi-package-variant mb-3 text-warning" style="font-size: 48px;"></i>
                        <h5 class="card-title mb-2 fw-bold text-dark">SCORM</h5>
                        <p class="card-text small mb-0 text-muted">Upload SCORM packages</p>
                    </div>
                </div>
            </div>
        @endif
        
        @if(isset($materialTypes['live_class']))
            <div class="col-{{ $enabledCount == 2 ? '6' : ($enabledCount == 3 ? '4' : '4') }} col-md-{{ $enabledCount == 2 ? '6' : ($enabledCount == 3 ? '4' : '4') }} col-lg-{{ $enabledCount == 2 ? '6' : ($enabledCount == 3 ? '4' : '3') }}">
                <div class="card material-type-card h-100 border-0 shadow-sm" style="cursor: pointer; transition: all 0.3s ease; border-radius: 10px; background: white;" 
                     onclick="showAjaxModal('{{ route('admin.live-classes.create', $course->id) }}?unit_id={{ $unit->id }}&type=live_class', 'Add Live Class Material')">
                    <div class="card-body text-center p-4">
                        <i class="mdi mdi-video-account mb-3 text-danger" style="font-size: 48px;"></i>
                        <h5 class="card-title mb-2 fw-bold text-dark">Live Class</h5>
                        <p class="card-text small mb-0 text-muted">Schedule live sessions</p>
                    </div>
                </div>
            </div>
        @endif
        
        @if(isset($materialTypes['quiz']))
            <div class="col-{{ $enabledCount == 2 ? '6' : ($enabledCount == 3 ? '4' : '4') }} col-md-{{ $enabledCount == 2 ? '6' : ($enabledCount == 3 ? '4' : '4') }} col-lg-{{ $enabledCount == 2 ? '6' : ($enabledCount == 3 ? '4' : '3') }}">
                <div class="card material-type-card h-100 border-0 shadow-sm" style="cursor: pointer; transition: all 0.3s ease; border-radius: 10px; background: white;" 
                     onclick="showAjaxModal('{{ route('admin.quizzes.create', $course->id) }}?unit_id={{ $unit->id }}&type=quiz', 'Add Quiz Material')">
                    <div class="card-body text-center p-4">
                        <i class="mdi mdi-help-circle mb-3 text-secondary" style="font-size: 48px;"></i>
                        <h5 class="card-title mb-2 fw-bold text-dark">Quiz</h5>
                        <p class="card-text small mb-0 text-muted">Create interactive quizzes</p>
                    </div>
                </div>
            </div>
        @endif
        
        @if(isset($materialTypes['exam']))
            <div class="col-{{ $enabledCount == 2 ? '6' : ($enabledCount == 3 ? '4' : '4') }} col-md-{{ $enabledCount == 2 ? '6' : ($enabledCount == 3 ? '4' : '4') }} col-lg-{{ $enabledCount == 2 ? '6' : ($enabledCount == 3 ? '4' : '3') }}">
                <div class="card material-type-card h-100 border-0 shadow-sm" style="cursor: pointer; transition: all 0.3s ease; border-radius: 10px; background: white;" 
                     onclick="showAjaxModal('{{ route('admin.exams.create', $course->id) }}?unit_id={{ $unit->id }}&type=exam', 'Add Exam Material')">
                    <div class="card-body text-center p-4">
                        <i class="mdi mdi-clipboard-text mb-3 text-dark" style="font-size: 48px;"></i>
                        <h5 class="card-title mb-2 fw-bold text-dark">Exam</h5>
                        <p class="card-text small mb-0 text-muted">Create formal exams</p>
                    </div>
                </div>
            </div>
        @endif
        
        @if(isset($materialTypes['assignment']))
            <div class="col-{{ $enabledCount == 2 ? '6' : ($enabledCount == 3 ? '4' : '4') }} col-md-{{ $enabledCount == 2 ? '6' : ($enabledCount == 3 ? '4' : '4') }} col-lg-{{ $enabledCount == 2 ? '6' : ($enabledCount == 3 ? '4' : '3') }}">
                <div class="card material-type-card h-100 border-0 shadow-sm" style="cursor: pointer; transition: all 0.3s ease; border-radius: 10px; background: white;" 
                     onclick="showAjaxModal('{{ route('admin.assignments.create', $course->id) }}?unit_id={{ $unit->id }}&type=assignment', 'Add Assignment Material')">
                    <div class="card-body text-center p-4">
                        <i class="mdi mdi-file-edit mb-3 text-primary" style="font-size: 48px;"></i>
                        <h5 class="card-title mb-2 fw-bold text-dark">Assignment</h5>
                        <p class="card-text small mb-0 text-muted">Create assignments</p>
                    </div>
                </div>
            </div>
        @endif
        
        @if(isset($materialTypes['other']))
            <div class="col-{{ $enabledCount == 2 ? '6' : ($enabledCount == 3 ? '4' : '4') }} col-md-{{ $enabledCount == 2 ? '6' : ($enabledCount == 3 ? '4' : '4') }} col-lg-{{ $enabledCount == 2 ? '6' : ($enabledCount == 3 ? '4' : '3') }}">
                <div class="card material-type-card h-100 border-0 shadow-sm" style="cursor: pointer; transition: all 0.3s ease; border-radius: 10px; background: white;" 
                     onclick="showAjaxModal('{{ route('admin.others.create', $course->id) }}?unit_id={{ $unit->id }}&type=other', 'Add Other Material')">
                    <div class="card-body text-center p-4">
                        <i class="mdi mdi-file mb-3 text-muted" style="font-size: 48px;"></i>
                        <h5 class="card-title mb-2 fw-bold text-dark">Other</h5>
                        <p class="card-text small mb-0 text-muted">Other content types</p>
                    </div>
                </div>
            </div>
        @endif
        </div>
    </div>
@endif

<style>
.material-type-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.1) !important;
}
</style>