@extends('layouts.app')

@section('title', 'Manage Materials - ' . $session->title)

@section('content')
<!-- Page Header -->
<section class="bg-edunetra-dark text-white py-5">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-8">
                <nav aria-label="breadcrumb" class="mb-3">
                    <ol class="breadcrumb text-light">
                        <li class="breadcrumb-item"><a href="{{ route('teacher.courses.index') }}" class="text-light">Courses</a></li>
                        <li class="breadcrumb-item"><a href="{{ route('teacher.courses.sessions', $session->course) }}" class="text-light">{{ $session->course->title }}</a></li>
                        <li class="breadcrumb-item active">Session {{ $session->session_number }} Materials</li>
                    </ol>
                </nav>
                <h1 class="display-4 fw-bold mb-3">Session Materials</h1>
                <p class="fs-5 text-light opacity-90">{{ $session->title }}</p>
            </div>
            <div class="col-lg-4 text-lg-end">
                <div class="btn-group" role="group">
                    <a href="{{ route('teacher.sessions.edit', $session) }}" class="btn btn-outline-light">
                        <i class="bi bi-pencil me-2"></i>Edit Session
                    </a>
                    <button type="button" class="btn btn-edunetra" data-bs-toggle="modal" data-bs-target="#addMaterialModal">
                        <i class="bi bi-plus-circle me-2"></i>Add Material
                    </button>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Session Info -->
<section class="py-3 bg-light border-bottom">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-8">
                <div class="d-flex flex-wrap align-items-center gap-3">
                    <span class="badge bg-edunetra-yellow text-dark px-3 py-2">
                        Session {{ $session->session_number }}
                    </span>
                    <span class="text-muted">
                        <i class="bi bi-clock me-1"></i>{{ $session->duration_minutes }} minutes
                    </span>
                    <span class="text-muted">
                        <i class="bi bi-file-earmark me-1"></i>{{ count($session->materials ?? []) }} materials
                    </span>
                    <span class="badge bg-{{ $session->is_published ? 'success' : 'warning' }}">
                        {{ $session->is_published ? 'Published' : 'Draft' }}
                    </span>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Materials Management -->
<section class="py-5">
    <div class="container">
        @if($session->materials && count($session->materials) > 0)
            <div class="row g-4">
                @foreach($session->materials as $index => $material)
                    <div class="col-lg-6">
                        <div class="card border-0 shadow-sm h-100">
                            <div class="card-body">
                                <div class="d-flex justify-content-between align-items-start mb-3">
                                    <div class="d-flex align-items-center">
                                        <div class="me-3">
                                            @switch($material['type'])
                                                @case('text')
                                                    <i class="bi bi-file-text fs-3 text-primary"></i>
                                                    @break
                                                @case('file')
                                                    <i class="bi bi-file-earmark fs-3 text-success"></i>
                                                    @break
                                                @case('link')
                                                    <i class="bi bi-link fs-3 text-info"></i>
                                                    @break
                                                @case('video')
                                                    <i class="bi bi-play-circle fs-3 text-danger"></i>
                                                    @break
                                                @default
                                                    <i class="bi bi-file fs-3 text-muted"></i>
                                            @endswitch
                                        </div>
                                        <div>
                                            <h5 class="fw-bold mb-1">{{ $material['title'] }}</h5>
                                            <span class="badge bg-light text-dark">{{ ucfirst($material['type']) }}</span>
                                        </div>
                                    </div>
                                    <div class="dropdown">
                                        <button class="btn btn-outline-secondary btn-sm" type="button" data-bs-toggle="dropdown">
                                            <i class="bi bi-three-dots"></i>
                                        </button>
                                        <ul class="dropdown-menu">
                                            <li><a class="dropdown-item" href="#" onclick="editMaterial({{ $index }})">
                                                <i class="bi bi-pencil me-2"></i>Edit
                                            </a></li>
                                            <li><a class="dropdown-item text-danger" href="#" onclick="deleteMaterial({{ $index }})">
                                                <i class="bi bi-trash me-2"></i>Delete
                                            </a></li>
                                        </ul>
                                    </div>
                                </div>

                                <div class="mb-3">
                                    @if($material['type'] === 'text')
                                        <p class="text-muted">{{ Str::limit($material['content'], 150) }}</p>
                                    @elseif($material['type'] === 'link')
                                        <a href="{{ $material['content'] }}" target="_blank" class="text-decoration-none">
                                            <i class="bi bi-box-arrow-up-right me-1"></i>{{ $material['content'] }}
                                        </a>
                                    @elseif($material['type'] === 'video')
                                        <div class="d-flex align-items-center text-muted mb-2">
                                            <i class="bi bi-play-circle me-2"></i>
                                            <span>{{ $material['content'] }}</span>
                                        </div>
                                        <button class="btn btn-outline-primary btn-sm" onclick="viewMedia('{{ $material['content'] }}', 'video')">
                                            <i class="bi bi-play me-1"></i>Play Video
                                        </button>
                                    @elseif($material['type'] === 'file')
                                        <div class="d-flex align-items-center text-muted mb-2">
                                            <i class="bi bi-download me-2"></i>
                                            <span>{{ $material['content'] }}</span>
                                        </div>
                                        <div class="btn-group" role="group">
                                            <button class="btn btn-outline-primary btn-sm" onclick="viewDocument('{{ $material['content'] }}')">
                                                <i class="bi bi-eye me-1"></i>View
                                            </button>
                                            <a href="{{ $material['content'] }}" download class="btn btn-outline-secondary btn-sm">
                                                <i class="bi bi-download me-1"></i>Download
                                            </a>
                                        </div>
                                    @else
                                        <div class="d-flex align-items-center text-muted">
                                            <i class="bi bi-file-earmark me-2"></i>
                                            <span>{{ $material['content'] }}</span>
                                        </div>
                                    @endif
                                </div>

                                <div class="d-flex justify-content-between align-items-center text-sm">
                                    <span class="text-muted">
                                        <i class="bi bi-calendar me-1"></i>
                                        Added {{ \Carbon\Carbon::parse($material['created_at'] ?? '')->format('M d, Y') }}
                                    </span>
                                    @if(isset($material['order']))
                                        <span class="badge bg-edunetra-yellow text-dark">Order: {{ $material['order'] }}</span>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        @else
            <div class="text-center py-5">
                <i class="bi bi-file-earmark display-1 text-muted mb-3"></i>
                <h3 class="fw-bold mb-2">No Materials Yet</h3>
                <p class="text-muted mb-4">Start adding materials to enhance your session content</p>
                <button type="button" class="btn btn-edunetra btn-lg" data-bs-toggle="modal" data-bs-target="#addMaterialModal">
                    <i class="bi bi-plus-circle me-2"></i>Add Your First Material
                </button>
            </div>
        @endif
    </div>
</section>

<!-- Add Material Modal -->
<div class="modal fade" id="addMaterialModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Add New Material</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form action="{{ route('teacher.materials.store', $session) }}" method="POST">
                @csrf
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="material_type" class="form-label fw-semibold">Material Type *</label>
                        <select class="form-select" id="material_type" name="type" required onchange="updateContentField()">
                            <option value="">Select Type</option>
                            <option value="text">Text Content</option>
                            <option value="file">Upload File/Document</option>
                            <option value="link">External Link</option>
                            <option value="video">Upload Video</option>
                        </select>
                    </div>

                    <div class="mb-3">
                        <label for="material_title" class="form-label fw-semibold">Title *</label>
                        <input type="text" class="form-control" id="material_title" name="title" required>
                    </div>

                    <!-- File Upload Field (hidden by default) -->
                    <div class="mb-3 d-none" id="file_upload_field">
                        <label for="material_file" class="form-label fw-semibold">Upload File *</label>
                        <input type="file" class="form-control" id="material_file" accept="*/*">
                        <div class="form-text">Maximum file size: 50MB. Supported formats: PDF, DOC, DOCX, PPT, PPTX, XLS, XLSX, MP4, MP3, JPG, PNG, etc.</div>
                        <div class="mt-2">
                            <div class="progress d-none" id="upload_progress">
                                <div class="progress-bar" role="progressbar" style="width: 0%"></div>
                            </div>
                            <div id="upload_status" class="text-muted small"></div>
                        </div>
                    </div>

                    <!-- Content Field -->
                    <div class="mb-3" id="content_field">
                        <label for="material_content" class="form-label fw-semibold">Content *</label>
                        <textarea class="form-control" id="material_content" name="content" rows="4"></textarea>
                        <div class="form-text" id="content_help">Enter the content for this material</div>
                    </div>

                    <div class="mb-3">
                        <label for="material_order" class="form-label fw-semibold">Display Order</label>
                        <input type="number" class="form-control" id="material_order" name="order" min="0" value="{{ count($session->materials ?? []) }}">
                        <div class="form-text">Lower numbers appear first</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-edunetra">Add Material</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
function updateContentField() {
    const type = document.getElementById('material_type').value;
    const contentField = document.getElementById('material_content');
    const contentFieldContainer = document.getElementById('content_field');
    const fileUploadField = document.getElementById('file_upload_field');
    const helpText = document.getElementById('content_help');

    // Reset visibility
    contentFieldContainer.classList.remove('d-none');
    fileUploadField.classList.add('d-none');
    contentField.required = true;

    switch(type) {
        case 'text':
            contentField.placeholder = 'Enter the text content...';
            helpText.textContent = 'Enter the text content that students will read';
            break;
        case 'file':
        case 'video':
            // Show file upload field, hide content field
            contentFieldContainer.classList.add('d-none');
            fileUploadField.classList.remove('d-none');
            contentField.required = false;
            break;
        case 'link':
            contentField.placeholder = 'https://example.com';
            helpText.textContent = 'Enter the full URL including http:// or https://';
            break;
        default:
            contentField.placeholder = 'Enter content...';
            helpText.textContent = 'Enter the content for this material';
    }
}

// File upload handling
document.getElementById('material_file').addEventListener('change', function(e) {
    const file = e.target.files[0];
    if (!file) return;

    const formData = new FormData();
    formData.append('file', file);
    formData.append('uploadable_type', 'CourseSession');
    formData.append('uploadable_id', '{{ $session->id }}');
    formData.append('description', document.getElementById('material_title').value);

    const progressBar = document.querySelector('#upload_progress .progress-bar');
    const progressContainer = document.getElementById('upload_progress');
    const statusDiv = document.getElementById('upload_status');

    // Show progress
    progressContainer.classList.remove('d-none');
    statusDiv.textContent = 'Uploading...';

    // Upload file
    fetch('{{ route("media.upload") }}', {
        method: 'POST',
        body: formData,
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            // Set the file URL in the hidden content field
            document.getElementById('material_content').value = data.file.url;
            statusDiv.innerHTML = `<span class="text-success">✓ ${data.file.original_name} uploaded successfully</span>`;
            progressBar.style.width = '100%';
        } else {
            statusDiv.innerHTML = `<span class="text-danger">✗ Upload failed: ${data.message}</span>`;
        }
    })
    .catch(error => {
        statusDiv.innerHTML = `<span class="text-danger">✗ Upload failed: ${error.message}</span>`;
    });
});

// Document viewer functions
function viewDocument(url) {
    // Create modal for document viewing
    const modal = document.createElement('div');
    modal.className = 'modal fade';
    modal.innerHTML = `
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Document Viewer</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body p-0">
                    <iframe src="${url}" style="width: 100%; height: 70vh; border: none;"></iframe>
                </div>
                <div class="modal-footer">
                    <a href="${url}" download class="btn btn-primary">
                        <i class="bi bi-download me-1"></i>Download
                    </a>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    `;

    document.body.appendChild(modal);
    const bsModal = new bootstrap.Modal(modal);
    bsModal.show();

    // Remove modal from DOM when hidden
    modal.addEventListener('hidden.bs.modal', function() {
        document.body.removeChild(modal);
    });
}

function viewMedia(url, type) {
    // Create modal for media viewing
    const modal = document.createElement('div');
    modal.className = 'modal fade';

    let mediaContent = '';
    if (type === 'video') {
        mediaContent = `<video controls style="width: 100%; max-height: 70vh;">
            <source src="${url}" type="video/mp4">
            Your browser does not support the video tag.
        </video>`;
    } else if (type === 'audio') {
        mediaContent = `<audio controls style="width: 100%;">
            <source src="${url}" type="audio/mpeg">
            Your browser does not support the audio tag.
        </audio>`;
    }

    modal.innerHTML = `
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">${type.charAt(0).toUpperCase() + type.slice(1)} Player</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body text-center">
                    ${mediaContent}
                </div>
                <div class="modal-footer">
                    <a href="${url}" download class="btn btn-primary">
                        <i class="bi bi-download me-1"></i>Download
                    </a>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    `;

    document.body.appendChild(modal);
    const bsModal = new bootstrap.Modal(modal);
    bsModal.show();

    // Remove modal from DOM when hidden
    modal.addEventListener('hidden.bs.modal', function() {
        document.body.removeChild(modal);
    });
}

function editMaterial(index) {
    // This would open an edit modal - simplified for now
    alert('Edit functionality would be implemented here for material ' + (index + 1));
}

function deleteMaterial(index) {
    if (confirm('Are you sure you want to delete this material?')) {
        // This would send a delete request - simplified for now
        alert('Delete functionality would be implemented here for material ' + (index + 1));
    }
}
</script>
@endsection