@extends('layouts.app')

@section('title', 'Create Session - ' . $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"><a href="{{ route('teacher.courses.sessions', $course) }}" class="text-light">{{ $course->title }}</a></li>
                        <li class="breadcrumb-item active">Create Session</li>
                    </ol>
                </nav>
                <h1 class="display-4 fw-bold mb-3">Create New Session</h1>
                <p class="fs-5 text-light opacity-90">Add a new session to {{ $course->title }}</p>
            </div>
            <div class="col-lg-4 text-lg-end">
                <a href="{{ route('teacher.courses.sessions', $course) }}" class="btn btn-outline-light">
                    <i class="bi bi-arrow-left me-2"></i>Back to Sessions
                </a>
            </div>
        </div>
    </div>
</section>

<!-- Form Content -->
<section class="py-5 bg-light">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-8">
                <div class="card border-0 shadow-sm">
                    <div class="card-body p-4">
                        <form action="{{ route('teacher.sessions.store', $course) }}" method="POST">
                            @csrf
                            
                            <!-- Session Basic Info -->
                            <div class="mb-4">
                                <h3 class="h5 fw-bold text-edunetra-dark mb-3">
                                    <i class="bi bi-info-circle me-2"></i>Session Information
                                </h3>
                                
                                <div class="row">
                                    <div class="col-md-3 mb-3">
                                        <label for="session_number" class="form-label fw-semibold">Session Number *</label>
                                        <input type="number" class="form-control @error('session_number') is-invalid @enderror" 
                                               id="session_number" name="session_number" 
                                               value="{{ old('session_number', request('session_number', $nextSessionNumber)) }}" 
                                               min="1" required>
                                        @error('session_number')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="col-md-9 mb-3">
                                        <label for="title" class="form-label fw-semibold">Session Title *</label>
                                        <input type="text" class="form-control @error('title') is-invalid @enderror" 
                                               id="title" name="title" value="{{ old('title') }}" 
                                               placeholder="e.g., Introduction to English Vocabulary" required>
                                        @error('title')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>

                                <div class="mb-3">
                                    <label for="description" class="form-label fw-semibold">Session Description *</label>
                                    <textarea class="form-control @error('description') is-invalid @enderror" 
                                              id="description" name="description" rows="3" 
                                              placeholder="Describe what students will learn in this session" required>{{ old('description') }}</textarea>
                                    @error('description')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label for="duration_minutes" class="form-label fw-semibold">Duration (minutes) *</label>
                                        <input type="number" class="form-control @error('duration_minutes') is-invalid @enderror" 
                                               id="duration_minutes" name="duration_minutes" 
                                               value="{{ old('duration_minutes', 60) }}" 
                                               min="1" max="300" required>
                                        @error('duration_minutes')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label class="form-label fw-semibold">Publication Status</label>
                                        <div class="form-check form-switch">
                                            <input class="form-check-input" type="checkbox" id="is_published" name="is_published" 
                                                   {{ old('is_published') ? 'checked' : '' }}>
                                            <label class="form-check-label" for="is_published">
                                                Publish session (visible to students)
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Session Content -->
                            <div class="mb-4">
                                <h3 class="h5 fw-bold text-edunetra-dark mb-3">
                                    <i class="bi bi-file-text me-2"></i>Session Content
                                </h3>
                                
                                <div class="mb-3">
                                    <label for="content" class="form-label fw-semibold">Session Content</label>
                                    <textarea class="form-control tinymce-editor @error('content') is-invalid @enderror"
                                              id="content" name="content" rows="8"
                                              placeholder="Enter the main content for this session. You can add detailed materials later.">{{ old('content') }}</textarea>
                                    <div class="form-text">This is the main content that students will see. You can add additional materials (files, links, videos) after creating the session.</div>
                                    @error('content')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <!-- Learning Objectives -->
                            <div class="mb-4">
                                <h3 class="h5 fw-bold text-edunetra-dark mb-3">
                                    <i class="bi bi-target me-2"></i>Learning Objectives (Optional)
                                </h3>
                                
                                <div class="card bg-light border-0">
                                    <div class="card-body">
                                        <p class="text-muted mb-3">What will students be able to do after completing this session?</p>
                                        <div id="objectives-container">
                                            <div class="input-group mb-2">
                                                <span class="input-group-text">1.</span>
                                                <input type="text" class="form-control" name="objectives[]" 
                                                       placeholder="e.g., Identify and pronounce 10 basic English words">
                                            </div>
                                        </div>
                                        <button type="button" class="btn btn-outline-edunetra btn-sm" onclick="addObjective()">
                                            <i class="bi bi-plus me-1"></i>Add Objective
                                        </button>
                                    </div>
                                </div>
                            </div>

                            <!-- Submit Buttons -->
                            <div class="d-flex gap-2">
                                <button type="submit" class="btn btn-edunetra">
                                    <i class="bi bi-check-circle me-2"></i>Create Session
                                </button>
                                <a href="{{ route('teacher.courses.sessions', $course) }}" class="btn btn-outline-secondary">
                                    Cancel
                                </a>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<script>
let objectiveCount = 1;

function addObjective() {
    objectiveCount++;
    const container = document.getElementById('objectives-container');
    const newObjective = document.createElement('div');
    newObjective.className = 'input-group mb-2';
    newObjective.innerHTML = `
        <span class="input-group-text">${objectiveCount}.</span>
        <input type="text" class="form-control" name="objectives[]" placeholder="Enter learning objective">
        <button type="button" class="btn btn-outline-danger" onclick="removeObjective(this)">
            <i class="bi bi-trash"></i>
        </button>
    `;
    container.appendChild(newObjective);
}

function removeObjective(button) {
    button.closest('.input-group').remove();
    // Renumber objectives
    const objectives = document.querySelectorAll('#objectives-container .input-group-text');
    objectives.forEach((obj, index) => {
        obj.textContent = (index + 1) + '.';
    });
    objectiveCount = objectives.length;
}

// Initialize TinyMCE
document.addEventListener('DOMContentLoaded', function() {
    if (typeof tinymce !== 'undefined') {
        tinymce.init({
            selector: '.tinymce-editor',
            height: 400,
            menubar: false,
            plugins: [
                'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'preview',
                'anchor', 'searchreplace', 'visualblocks', 'code', 'fullscreen',
                'insertdatetime', 'media', 'table', 'help', 'wordcount'
            ],
            toolbar: 'undo redo | blocks | ' +
                'bold italic forecolor | alignleft aligncenter ' +
                'alignright alignjustify | bullist numlist outdent indent | ' +
                'removeformat | help',
            content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }',
            setup: function (editor) {
                editor.on('change', function () {
                    editor.save();
                });
            }
        });
    }
});
</script>

<!-- TinyMCE CDN -->
<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
@endsection