{{-- Unit Materials Partial --}}
@if($unit->materials && $unit->materials->count() > 0)
    <div class="unit-materials mt-3">
        <div class="d-flex align-items-center justify-content-between mb-2 pb-2">
            <h6 class="mb-0 text-muted">
                <i class="mdi mdi-file-multiple me-1"></i>
                Materials ({{ $unit->materials->count() }})
            </h6>
            <div>
                <button type="button" class="btn btn-outline-warning btn-sm me-2" 
                    onclick="showAjaxModal('{{ route('admin.course-materials.sort.view', $unit->course_id) }}?unit_id={{ $unit->id }}', 'Sort Materials - {{ $unit->title }}')">
                <i class="mdi mdi-sort"></i> Sort Materials
                </button>
                <button type="button" class="btn btn-outline-success btn-sm" 
                        onclick="showAjaxModal('{{ route('admin.courses.materials.create', $unit->course_id) }}?unit_id={{ $unit->id }}', 'Add Material to {{ $unit->title }}')">
                    <i class="mdi mdi-plus"></i> Add Material
                </button>
            </div>
        </div>
        
        <div class="materials-list">
            @foreach($unit->materials as $material)
                <div class="material-item p-2 mb-2 border border-light rounded bg-light" data-type="{{ $material->type }}">
                    <div class="d-flex align-items-center justify-content-between">
                        <div class="d-flex align-items-center">
                            <div class="material-icon me-4 text-center">
                                @if($material->type === 'video')
                                    <i class="mdi mdi-play-circle" style="font-size: 32px; color: #9b7ed9;"></i>
                                @elseif($material->type === 'live_class')
                                    <i class="mdi {{ $material->type_icon }}" style="font-size: 32px; color: #f1aeb5;"></i>
                                @elseif($material->type === 'quiz')
                                    <i class="mdi {{ $material->type_icon }}" style="font-size: 32px; color: #a3d5a8;"></i>
                                @else
                                    <i class="mdi {{ $material->type_icon }} text-{{ $material->type === 'document' ? 'info' : 'muted' }}" style="font-size: 32px;"></i>
                                @endif
                                <div class="material-type-label text-muted small mt-1" style="font-weight: 300; opacity: 0.8;">{{ $material->type_label }}</div>
                            </div>
                            <div class="flex-grow-1">
                                <div class="material-title fw-medium">{{ $material->title }}</div>
                                <div class="material-badges mt-2">
                                    <span class="badge border border-{{ $material->access_type === 'free' ? 'info' : ($material->access_type === 'paid' ? 'warning' : 'danger') }} text-{{ $material->access_type === 'free' ? 'info' : ($material->access_type === 'paid' ? 'warning' : 'danger') }} me-2" style="font-size: 0.7rem; font-weight: 300; opacity: 0.7;">
                                        {{ $material->access_type_label }}
                                    </span>
                                    <span class="badge border border-{{ $material->status === 'published' ? 'success' : 'warning' }} text-{{ $material->status === 'published' ? 'success' : 'warning' }}" style="font-size: 0.7rem; font-weight: 300; opacity: 0.7;">
                                        {{ $material->status_label }}
                                    </span>
                                </div>
                            </div>
                        </div>
                        
                        <div class="d-flex align-items-center">
                            {{-- Preview Button --}}
                            @if($material->type === 'video' && $material->hasVideo())
                                <button class="btn btn-outline-info btn-sm me-2" title="Play Video" 
                                        onclick="showVideoModal('{{ $material->title }}', '{{ $material->video->getDirectVideoUrl() }}')">
                                    <i class="mdi mdi-play"></i> Play Video
                                </button>
                            @elseif($material->type === 'document' && $material->document)
                                <a href="{{ $material->document->file_url }}" target="_blank" 
                                    class="btn btn-outline-info btn-sm me-2" title="View File">
                                    <i class="mdi mdi-file-document"></i> View File
                                </a>
                            @elseif($material->type === 'audio' && $material->hasNote())
                                <button class="btn btn-outline-info btn-sm me-2" title="Play Audio" 
                                        onclick="previewAudio({{ $material->note->id }})">
                                    <i class="mdi mdi-play"></i> Play Audio
                                </button>
                            @elseif($material->type === 'text' && $material->hasNote())
                                <button class="btn btn-outline-info btn-sm me-2" title="View Content" 
                                        onclick="previewText({{ $material->note->id }})">
                                    <i class="mdi mdi-text"></i> View Content
                                </button>
                            @endif
                            
                            {{-- Content Management Buttons --}}
                            <div class="d-flex gap-1">
                                @if($material->type === 'video' && $material->hasVideo())
                                    <button class="btn btn-outline-primary btn-sm" title="Edit Video" 
                                            onclick="showAjaxModal('{{ route('admin.videos.edit', [$unit->course_id]) }}?material_id={{ $material->id }}', 'Edit Video - {{ $material->title }}')">
                                        <i class="mdi mdi-pencil"></i>
                                    </button>
                                @elseif($material->type === 'document' && $material->document)
                                    <button class="btn btn-outline-primary btn-sm" title="Edit Document" 
                                            onclick="showAjaxModal('{{ route('admin.documents.edit', $material->document->id) }}', 'Edit Document - {{ $material->title }}')">
                                        <i class="mdi mdi-pencil"></i>
                                    </button>
                                @elseif($material->type === 'video')
                                    <button class="btn btn-outline-success btn-sm" title="Add Video Content" 
                                            onclick="showAjaxModal('{{ route('admin.videos.create') }}?course_id={{ $unit->course_id }}&unit_id={{ $unit->id }}&material_id={{ $material->id }}', 'Add Video Content - {{ $material->title }}')">
                                        <i class="mdi mdi-plus"></i>
                                    </button>
                                @elseif($material->type === 'document')
                                    <button class="btn btn-outline-success btn-sm" title="Add Document Content" 
                                            onclick="showAjaxModal('{{ route('admin.documents.create') }}?course_id={{ $unit->course_id }}&unit_id={{ $unit->id }}&material_id={{ $material->id }}', 'Add Document Content - {{ $material->title }}')">
                                        <i class="mdi mdi-plus"></i>
                                    </button>
                                @endif
                                
                                {{-- Delete Button --}}
                                @if($material->type === 'video' && $material->hasVideo())
                                    <button class="btn btn-outline-danger btn-sm" title="Delete Video" 
                                            onclick="confirmDelete('{{ route('admin.videos.destroy', $material->video->id) }}', '{{ $material->title }}')">
                                        <i class="mdi mdi-delete"></i>
                                    </button>
                                @elseif($material->type === 'document' && $material->document)
                                    <button class="btn btn-outline-danger btn-sm" title="Delete Document" 
                                            onclick="confirmDelete('{{ route('admin.documents.destroy', $material->document->id) }}', '{{ $material->title }}')">
                                        <i class="mdi mdi-delete"></i>
                                    </button>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
@else
    <div class="unit-materials mt-3">
        <div class="d-flex align-items-center justify-content-between mb-2">
            <h6 class="mb-0 text-muted">
                <i class="mdi mdi-file-multiple me-1"></i>
                Materials (0)
            </h6>
            <button type="button" class="btn btn-outline-primary btn-sm" 
                    onclick="showAjaxModal('{{ route('admin.courses.materials.create', $unit->course_id) }}?unit_id={{ $unit->id }}', 'Add Material to {{ $unit->title }}')">
                <i class="mdi mdi-plus"></i> Add Material
            </button>
        </div>
        
        <div class="text-center py-3 text-muted">
            <i class="mdi mdi-file-multiple" style="font-size: 24px;"></i>
            <p class="mb-0 small">No materials added yet</p>
        </div>
    </div>
@endif

<style>
.unit-materials {
    border-top: 1px solid #e9ecef;
    padding-top: 0.75rem;
}

.material-item {
    transition: all 0.2s;
    position: relative;
}

.material-item:hover {
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.material-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: #e9ecef;
    border-radius: 2px 0 0 2px;
}

.material-item[data-type="video"]::before {
    background: #e6e6fa; /* light blue violet */
}

.material-item[data-type="document"]::before {
    background: #cff4fc; /* light info */
}

.material-item[data-type="text"]::before {
    background: #f8f9fa; /* light secondary */
}

.material-item[data-type="audio"]::before {
    background: #e2d9f3; /* light purple */
}

.material-item[data-type="scorm"]::before {
    background: #ffeaa7; /* light orange */
}

.material-item[data-type="live_class"]::before {
    background: #f8d7da; /* light red */
}

.material-item[data-type="quiz"]::before {
    background: #d4edda; /* light green */
}

.material-item[data-type="exam"]::before {
    background: #f8d7da; /* light danger */
}

.material-item[data-type="assignment"]::before {
    background: #d1ecf1; /* light info */
}

.material-icon {
    width: 80px;
    height: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.material-type-label {
    font-size: 0.65rem;
    line-height: 1;
    white-space: nowrap;
}

.material-title {
    font-size: 0.9rem;
    line-height: 1.2;
}

.material-description {
    font-size: 0.8rem;
    line-height: 1.2;
}

.material-badges .badge {
    font-size: 0.7rem;
    padding: 0.2rem 0.4rem;
}

.btn-group-sm .btn {
    font-size: 0.7rem;
    padding: 0.2rem 0.4rem;
}
</style>

<script>
// Preview functions for different material types
function previewVideo(videoId) {
    // Open video in a modal or new window
    showAjaxModal(`/admin/videos/${videoId}/preview`, 'Video Preview');
}

function previewDocument(documentId) {
    // Open document in a modal or new window
    showAjaxModal(`/admin/documents/${documentId}/preview`, 'Document Preview');
}

function previewAudio(noteId) {
    // Open audio player in a modal
    showAjaxModal(`/admin/notes/${noteId}/preview`, 'Audio Preview');
}

function previewText(noteId) {
    // Open text content in a modal
    showAjaxModal(`/admin/notes/${noteId}/preview`, 'Content Preview');
}
</script>