@extends('layouts.app')

@section('title', 'Manage Sessions - ' . $course->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 active">{{ $course->title }}</li>
                    </ol>
                </nav>
                <h1 class="display-4 fw-bold mb-3">{{ $course->title }}</h1>
                <p class="fs-5 text-light opacity-90">Manage course sessions and materials</p>
            </div>
            <div class="col-lg-4 text-lg-end">
                <a href="{{ route('teacher.sessions.create', $course) }}" class="btn btn-edunetra btn-lg">
                    <i class="bi bi-plus-circle me-2"></i>Add Session
                </a>
            </div>
        </div>
    </div>
</section>

<!-- Course Info Bar -->
<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-{{ $course->status === 'published' ? 'success' : 'warning' }} px-3 py-2">
                        {{ ucfirst($course->status) }}
                    </span>
                    <span class="text-muted">
                        <i class="bi bi-list-ol me-1"></i>{{ $sessions->count() }} sessions
                    </span>
                    <span class="text-muted">
                        <i class="bi bi-people me-1"></i>{{ $course->enrollments->where('status', 'enrolled')->count() }} students
                    </span>
                    <span class="text-muted">
                        <i class="bi bi-clock me-1"></i>{{ $course->duration_weeks }} weeks
                    </span>
                </div>
            </div>
            <div class="col-lg-4 text-lg-end">
                <div class="btn-group" role="group">
                    <a href="{{ route('teacher.courses.edit', $course) }}" class="btn btn-outline-edunetra btn-sm">
                        <i class="bi bi-pencil me-1"></i>Edit Course
                    </a>
                    <a href="{{ route('courses.show', $course->slug) }}" class="btn btn-outline-edunetra btn-sm" target="_blank">
                        <i class="bi bi-eye me-1"></i>Preview
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Sessions Management -->
<section class="py-5">
    <div class="container">
        <!-- Sessions Grid (1-8 as shown in requirements) -->
        <div class="row g-4 mb-5">
            @for($i = 1; $i <= 8; $i++)
                @php
                    $session = $sessions->where('session_number', $i)->first();
                @endphp
                <div class="col-lg-3 col-md-6">
                    <div class="card h-100 border-0 shadow-sm {{ $session ? 'border-success' : 'border-dashed' }}">
                        <div class="card-body text-center p-4">
                            <div class="mb-3">
                                <span class="badge bg-edunetra-yellow text-dark rounded-circle d-flex align-items-center justify-content-center mx-auto" 
                                      style="width: 50px; height: 50px; font-size: 1.2rem;">
                                    {{ $i }}
                                </span>
                            </div>
                            
                            @if($session)
                                <h5 class="fw-bold mb-2">{{ $session->title }}</h5>
                                <p class="text-muted small mb-3">{{ Str::limit($session->description, 60) }}</p>
                                
                                <div class="mb-3">
                                    <div class="d-flex justify-content-between text-sm mb-1">
                                        <span class="text-muted">Duration:</span>
                                        <span>{{ $session->duration_minutes }}min</span>
                                    </div>
                                    <div class="d-flex justify-content-between text-sm">
                                        <span class="text-muted">Status:</span>
                                        <span class="badge bg-{{ $session->is_published ? 'success' : 'warning' }} badge-sm">
                                            {{ $session->is_published ? 'Published' : 'Draft' }}
                                        </span>
                                    </div>
                                </div>

                                <div class="d-grid gap-2">
                                    <a href="{{ route('teacher.sessions.edit', $session) }}" class="btn btn-edunetra btn-sm">
                                        <i class="bi bi-pencil me-1"></i>Edit Session
                                    </a>
                                    <a href="{{ route('teacher.sessions.materials', $session) }}" class="btn btn-outline-edunetra btn-sm">
                                        <i class="bi bi-file-earmark me-1"></i>Materials
                                    </a>
                                </div>
                            @else
                                <h5 class="fw-bold mb-2 text-muted">SESI {{ $i }}</h5>
                                <p class="text-muted small mb-3">No session created yet</p>
                                
                                <div class="d-grid">
                                    <a href="{{ route('teacher.sessions.create', $course) }}?session_number={{ $i }}" 
                                       class="btn btn-outline-edunetra btn-sm">
                                        <i class="bi bi-plus-circle me-1"></i>Create Session
                                    </a>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            @endfor
        </div>

        <!-- Additional Sessions (if any beyond 8) -->
        @if($sessions->where('session_number', '>', 8)->count() > 0)
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-white">
                    <h3 class="h5 fw-bold mb-0">Additional Sessions</h3>
                </div>
                <div class="card-body">
                    <div class="row g-3">
                        @foreach($sessions->where('session_number', '>', 8) as $session)
                            <div class="col-lg-4 col-md-6">
                                <div class="card border">
                                    <div class="card-body">
                                        <div class="d-flex align-items-start justify-content-between mb-2">
                                            <span class="badge bg-edunetra-yellow text-dark">{{ $session->session_number }}</span>
                                            <span class="badge bg-{{ $session->is_published ? 'success' : 'warning' }}">
                                                {{ $session->is_published ? 'Published' : 'Draft' }}
                                            </span>
                                        </div>
                                        <h6 class="fw-bold">{{ $session->title }}</h6>
                                        <p class="text-muted small">{{ Str::limit($session->description, 50) }}</p>
                                        <div class="btn-group w-100" role="group">
                                            <a href="{{ route('teacher.sessions.edit', $session) }}" class="btn btn-outline-edunetra btn-sm">
                                                <i class="bi bi-pencil"></i>
                                            </a>
                                            <a href="{{ route('teacher.sessions.materials', $session) }}" class="btn btn-outline-edunetra btn-sm">
                                                <i class="bi bi-file-earmark"></i>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        @endif

        <!-- Quick Actions and Media Library -->
        <div class="row mt-5">
            <div class="col-lg-8">
                <div class="card border-0 shadow-sm">
                    <div class="card-body">
                        <h3 class="h5 fw-bold mb-3">Quick Actions</h3>
                        <div class="row g-3">
                            <div class="col-md-6">
                                <a href="{{ route('teacher.sessions.create', $course) }}" class="btn btn-outline-edunetra w-100">
                                    <i class="bi bi-plus-circle me-2"></i>Add New Session
                                </a>
                            </div>
                            <div class="col-md-6">
                                <a href="{{ route('teacher.courses.edit', $course) }}" class="btn btn-outline-edunetra w-100">
                                    <i class="bi bi-gear me-2"></i>Course Settings
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Media Library -->
                <div class="card border-0 shadow-sm mt-4">
                    <div class="card-header bg-white border-bottom">
                        <div class="d-flex justify-content-between align-items-center">
                            <h3 class="h5 fw-bold mb-0">
                                <i class="bi bi-folder me-2"></i>Course Media Library
                            </h3>
                            <button type="button" class="btn btn-outline-edunetra btn-sm" data-bs-toggle="modal" data-bs-target="#uploadMediaModal">
                                <i class="bi bi-cloud-upload me-1"></i>Upload Media
                            </button>
                        </div>
                    </div>
                    <div class="card-body">
                        <div id="media-library" class="row g-3">
                            <!-- Media files will be loaded here via JavaScript -->
                            <div class="col-12 text-center text-muted py-4">
                                <i class="bi bi-folder2-open fs-1 mb-2"></i>
                                <p class="mb-0">No media files uploaded yet</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-4">
                <div class="card border-0 shadow-sm">
                    <div class="card-body">
                        <h3 class="h5 fw-bold mb-3">Course Status</h3>
                        <form action="{{ route('teacher.courses.update', $course) }}" method="POST">
                            @csrf
                            @method('PUT')
                            <input type="hidden" name="title" value="{{ $course->title }}">
                            <input type="hidden" name="description" value="{{ $course->description }}">
                            <input type="hidden" name="level" value="{{ $course->level }}">
                            <input type="hidden" name="duration_weeks" value="{{ $course->duration_weeks }}">
                            <input type="hidden" name="price" value="{{ $course->price }}">
                            
                            <div class="mb-3">
                                <select name="status" class="form-select" onchange="this.form.submit()">
                                    <option value="draft" {{ $course->status === 'draft' ? 'selected' : '' }}>Draft</option>
                                    <option value="published" {{ $course->status === 'published' ? 'selected' : '' }}>Published</option>
                                </select>
                            </div>
                        </form>
                        <small class="text-muted">
                            {{ $course->status === 'published' ? 'Course is visible to students' : 'Course is hidden from students' }}
                        </small>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Upload Media Modal -->
<div class="modal fade" id="uploadMediaModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Upload Media File</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="uploadMediaForm">
                    <div class="mb-3">
                        <label for="media_file" class="form-label fw-semibold">Select File</label>
                        <input type="file" class="form-control" id="media_file" accept="*/*" required>
                        <div class="form-text">Maximum file size: 50MB. Supported formats: PDF, DOC, DOCX, PPT, PPTX, XLS, XLSX, MP4, MP3, JPG, PNG, etc.</div>
                    </div>
                    <div class="mb-3">
                        <label for="media_description" class="form-label fw-semibold">Description</label>
                        <input type="text" class="form-control" id="media_description" placeholder="Brief description of the file">
                    </div>
                    <div class="progress d-none" id="media_upload_progress">
                        <div class="progress-bar" role="progressbar" style="width: 0%"></div>
                    </div>
                    <div id="media_upload_status" class="text-muted small mt-2"></div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-edunetra" onclick="uploadMediaFile()">Upload File</button>
            </div>
        </div>
    </div>
</div>

<script>
// Load media library on page load
document.addEventListener('DOMContentLoaded', function() {
    loadMediaLibrary();
});

// Upload media file
function uploadMediaFile() {
    const fileInput = document.getElementById('media_file');
    const file = fileInput.files[0];

    if (!file) {
        alert('Please select a file to upload');
        return;
    }

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

    const progressBar = document.querySelector('#media_upload_progress .progress-bar');
    const progressContainer = document.getElementById('media_upload_progress');
    const statusDiv = document.getElementById('media_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) {
            statusDiv.innerHTML = `<span class="text-success">✓ ${data.file.original_name} uploaded successfully</span>`;
            progressBar.style.width = '100%';

            // Reload media library
            setTimeout(() => {
                loadMediaLibrary();
                bootstrap.Modal.getInstance(document.getElementById('uploadMediaModal')).hide();

                // Reset form
                document.getElementById('uploadMediaForm').reset();
                progressContainer.classList.add('d-none');
                statusDiv.textContent = '';
                progressBar.style.width = '0%';
            }, 1000);
        } 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>`;
    });
}

// Load media library
function loadMediaLibrary() {
    fetch(`{{ route("media.files") }}?uploadable_type=Course&uploadable_id={{ $course->id }}`)
    .then(response => response.json())
    .then(data => {
        const mediaLibrary = document.getElementById('media-library');

        if (data.success && data.files.length > 0) {
            mediaLibrary.innerHTML = '';

            data.files.forEach(file => {
                const mediaItem = document.createElement('div');
                mediaItem.className = 'col-lg-3 col-md-4 col-sm-6';
                mediaItem.innerHTML = `
                    <div class="card border h-100">
                        <div class="card-body text-center">
                            <i class="${file.icon} fs-1 text-edunetra-yellow mb-2"></i>
                            <h6 class="fw-bold mb-1">${file.original_name}</h6>
                            <small class="text-muted d-block mb-2">${file.size}</small>
                            ${file.description ? `<p class="small text-muted mb-2">${file.description}</p>` : ''}
                            <div class="btn-group w-100" role="group">
                                <button class="btn btn-outline-primary btn-sm" onclick="viewFile('${file.url}', '${file.type}')">
                                    <i class="bi bi-eye"></i>
                                </button>
                                <a href="${file.url}" download class="btn btn-outline-secondary btn-sm">
                                    <i class="bi bi-download"></i>
                                </a>
                                <button class="btn btn-outline-danger btn-sm" onclick="deleteMediaFile(${file.id})">
                                    <i class="bi bi-trash"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                `;
                mediaLibrary.appendChild(mediaItem);
            });
        } else {
            mediaLibrary.innerHTML = `
                <div class="col-12 text-center text-muted py-4">
                    <i class="bi bi-folder2-open fs-1 mb-2"></i>
                    <p class="mb-0">No media files uploaded yet</p>
                </div>
            `;
        }
    })
    .catch(error => {
        console.error('Error loading media library:', error);
    });
}

// View file function
function viewFile(url, type) {
    if (type === 'image') {
        // Show image in modal
        const modal = document.createElement('div');
        modal.className = 'modal fade';
        modal.innerHTML = `
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Image Viewer</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body text-center">
                        <img src="${url}" class="img-fluid" alt="Image">
                    </div>
                </div>
            </div>
        `;
        document.body.appendChild(modal);
        const bsModal = new bootstrap.Modal(modal);
        bsModal.show();
        modal.addEventListener('hidden.bs.modal', function() {
            document.body.removeChild(modal);
        });
    } else {
        // Open in new tab
        window.open(url, '_blank');
    }
}

// Delete media file
function deleteMediaFile(fileId) {
    if (!confirm('Are you sure you want to delete this file?')) {
        return;
    }

    fetch(`/media/${fileId}`, {
        method: 'DELETE',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            loadMediaLibrary(); // Reload the library
        } else {
            alert('Failed to delete file: ' + data.message);
        }
    })
    .catch(error => {
        alert('Error deleting file: ' + error.message);
    });
}
</script>
@endsection