@extends('admin.layouts.app')

@section('title', 'Manage Course Materials')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Manage Materials - {{ $unit->title }}</h4>
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="{{ url('admin/dashboard') }}">Dashboard</a></li>
                            <li class="breadcrumb-item"><a href="{{ url('admin/courses') }}">Courses</a></li>
                            <li class="breadcrumb-item"><a href="{{ url('admin/courses/'.$course->id.'/edit') }}">{{ $course->title }}</a></li>
                            <li class="breadcrumb-item"><a href="{{ route('admin.course-content.index', $course->id) }}">Content Management</a></li>
                            <li class="breadcrumb-item active">{{ $unit->title }} - Materials</li>
                        </ol>
                    </nav>
                </div>
                <div class="card-body">
                    <div class="row mb-4">
                        <div class="col-12">
                            <div class="d-flex justify-content-between align-items-center">
                                <h5>Study Materials</h5>
                                <div class="btn-group">
                                    <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addMaterialModal">
                                        <i class="mdi mdi-plus"></i> Add Material
                                    </button>
                                    <a href="{{ route('admin.course-content.index', $course->id) }}" class="btn btn-outline-info">
                                        <i class="mdi mdi-arrow-left"></i> Back to Content
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-12">
                            @if($materials->count() > 0)
                                <div class="materials-list">
                                    @foreach($materials as $material)
                                        <div class="material-item p-3 mb-3 border rounded" 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-3">
                                                        <i class="mdi {{ $material->type_icon }} text-{{ $material->type === 'video' ? 'danger' : ($material->type === 'document' ? 'info' : 'secondary') }}" style="font-size: 24px;"></i>
                                                    </div>
                                                    <div>
                                                        <h6 class="mb-1">{{ $material->title }}</h6>
                                                        @if($material->description)
                                                            <p class="text-muted mb-1">{{ Str::limit($material->description, 100) }}</p>
                                                        @endif
                                                        <div class="badges">
                                                            <span class="badge bg-{{ $material->type === 'video' ? 'danger' : ($material->type === 'document' ? 'info' : 'secondary') }} me-1">
                                                                {{ $material->type_label }}
                                                            </span>
                                                            <span class="badge bg-{{ $material->access_type === 'free' ? 'success' : ($material->access_type === 'paid' ? 'warning' : 'danger') }} me-1">
                                                                {{ $material->access_type_label }}
                                                            </span>
                                                            <span class="badge bg-{{ $material->status === 'published' ? 'success' : 'warning' }}">
                                                                {{ $material->status_label }}
                                                            </span>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="d-flex align-items-center">
                                                    <span class="text-muted me-3">Order: {{ $material->sort_order }}</span>
                                                    
                                                    <!-- Video/Note Management Buttons -->
                                                    @if($material->type === 'video')
                                                        @if($material->hasVideo())
                                                            <div class="btn-group btn-group-sm me-2">
                                                                <a href="{{ route('admin.course-materials.videos.index', [$course->id, $material->id]) }}" 
                                                                   class="btn btn-outline-success" title="View Video">
                                                                    <i class="mdi mdi-video"></i>
                                                                </a>
                                                                <a href="{{ route('admin.course-materials.videos.edit', [$course->id, $material->id]) }}" 
                                                                   class="btn btn-outline-warning" title="Edit Video">
                                                                    <i class="mdi mdi-pencil"></i>
                                                                </a>
                                                            </div>
                                                        @else
                                                            <div class="btn-group btn-group-sm me-2">
                                                                <a href="{{ route('admin.course-materials.videos.create', [$course->id, $material->id]) }}" 
                                                                   class="btn btn-outline-primary" title="Add Video">
                                                                    <i class="mdi mdi-plus"></i> Add Video
                                                                </a>
                                                            </div>
                                                        @endif
                                                    @endif
                                                    
                                                    @if($material->type === 'text' || $material->type === 'document')
                                                        @if($material->hasNote())
                                                            <div class="btn-group btn-group-sm me-2">
                                                                <a href="{{ route('admin.course-materials.notes.index', [$course->id, $material->id]) }}" 
                                                                   class="btn btn-outline-info" title="View Note">
                                                                    <i class="mdi mdi-note-text"></i>
                                                                </a>
                                                                <a href="{{ route('admin.course-materials.notes.edit', [$course->id, $material->id]) }}" 
                                                                   class="btn btn-outline-warning" title="Edit Note">
                                                                    <i class="mdi mdi-pencil"></i>
                                                                </a>
                                                            </div>
                                                        @else
                                                            <div class="btn-group btn-group-sm me-2">
                                                                <a href="{{ route('admin.course-materials.notes.create', [$course->id, $material->id]) }}" 
                                                                   class="btn btn-outline-primary" title="Add Note">
                                                                    <i class="mdi mdi-plus"></i> Add Note
                                                                </a>
                                                            </div>
                                                        @endif
                                                    @endif
                                                    
                                                    <!-- Material Management Buttons -->
                                                    <div class="btn-group btn-group-sm">
                                                        <a href="{{ route('admin.course-materials.edit', [$course->id, $material->id]) }}" 
                                                           class="btn btn-outline-primary" title="Edit Material">
                                                            <i class="mdi mdi-pencil"></i>
                                                        </a>
                                                        <button class="btn btn-outline-danger" title="Delete Material" 
                                                                onclick="deleteMaterial({{ $material->id }}, '{{ $material->title }}')">
                                                            <i class="mdi mdi-delete"></i>
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            @else
                                <div class="text-center py-5">
                                    <i class="mdi mdi-file-multiple text-muted" style="font-size: 48px;"></i>
                                    <h5 class="text-muted mt-3">No materials found</h5>
                                    <p class="text-muted">Start by adding your first study material.</p>
                                    <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addMaterialModal">
                                        <i class="mdi mdi-plus"></i> Add First Material
                                    </button>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Add Material Modal -->
<div class="modal fade" id="addMaterialModal" tabindex="-1" aria-labelledby="addMaterialModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addMaterialModalLabel">Add New Material</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="addMaterialForm">
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="material_type" class="form-label">Material Type</label>
                                <select class="form-select" id="material_type" name="type" required>
                                    <option value="">Select Type</option>
                                    <option value="video">Video</option>
                                    <option value="document">Document</option>
                                    <option value="audio">Audio</option>
                                    <option value="text">Text</option>
                                    <option value="scorm">SCORM</option>
                                    <option value="live_class">Live Class</option>
                                    <option value="quiz">Quiz</option>
                                    <option value="exam">Exam</option>
                                    <option value="assignment">Assignment</option>
                                    <option value="other">Other</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="access_type" class="form-label">Access Type</label>
                                <select class="form-select" id="access_type" name="access_type" required>
                                    <option value="paid">Paid</option>
                                    <option value="free">Free</option>
                                    <option value="restricted">Restricted</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="mb-3">
                                <label for="material_title" class="form-label">Title</label>
                                <input type="text" class="form-control" id="material_title" name="title" required>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="mb-3">
                                <label for="material_description" class="form-label">Description</label>
                                <textarea class="form-control" id="material_description" name="description" rows="3"></textarea>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="sort_order" class="form-label">Sort Order</label>
                                <input type="number" class="form-control" id="sort_order" name="sort_order" value="0" min="0">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="material_status" class="form-label">Status</label>
                                <select class="form-select" id="material_status" name="status" required>
                                    <option value="draft">Draft</option>
                                    <option value="published">Published</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Add Material</button>
                </div>
            </form>
        </div>
    </div>
</div>

<style>
.material-item {
    transition: all 0.2s;
}

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

.material-icon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f9fa;
    border-radius: 8px;
}

/* Video/Note Management Button Styles */
.btn-group-sm .btn {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
}

.btn-outline-success {
    border-color: #198754;
    color: #198754;
}

.btn-outline-success:hover {
    background-color: #198754;
    border-color: #198754;
}

.btn-outline-info {
    border-color: #0dcaf0;
    color: #0dcaf0;
}

.btn-outline-info:hover {
    background-color: #0dcaf0;
    border-color: #0dcaf0;
}

.btn-outline-warning {
    border-color: #ffc107;
    color: #ffc107;
}

.btn-outline-warning:hover {
    background-color: #ffc107;
    border-color: #ffc107;
    color: #000;
}

/* Material status indicators */
.material-item {
    position: relative;
}

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

.material-item[data-type="video"]::before {
    background: #dc3545;
}

.material-item[data-type="document"]::before {
    background: #0dcaf0;
}

.material-item[data-type="text"]::before {
    background: #6c757d;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Handle form submission
    document.getElementById('addMaterialForm').addEventListener('submit', function(e) {
        e.preventDefault();
        
        // Here you would typically send the form data to your backend
        // For now, we'll just show a success message
        alert('Material added successfully!');
        
        // Close modal and reset form
        const modal = bootstrap.Modal.getInstance(document.getElementById('addMaterialModal'));
        modal.hide();
        this.reset();
    });
});

// Delete material function
function deleteMaterial(materialId, materialTitle) {
    if (confirm(`Are you sure you want to delete "${materialTitle}"? This action cannot be undone.`)) {
        // Here you would typically send a DELETE request to your backend
        // For now, we'll just show a success message
        alert('Material deleted successfully!');
        
        // You can add AJAX call here to actually delete the material
        // fetch(`/admin/courses/{{ $course->id }}/materials/${materialId}`, {
        //     method: 'DELETE',
        //     headers: {
        //         'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        //     }
        // }).then(response => {
        //     if (response.ok) {
        //         location.reload();
        //     }
        // });
    }
}
</script>
@endsection