@extends('layouts.app')

@section('title', 'Edit Session - ' . $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">Edit Session {{ $session->session_number }}</li>
                    </ol>
                </nav>
                <h1 class="display-4 fw-bold mb-3">Edit Session</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.courses.sessions', $session->course) }}" class="btn btn-outline-light">
                        <i class="bi bi-arrow-left me-2"></i>Back to Sessions
                    </a>
                    <a href="{{ route('teacher.sessions.materials', $session) }}" class="btn btn-edunetra">
                        <i class="bi bi-file-earmark me-2"></i>Materials
                    </a>
                </div>
            </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.update', $session) }}" method="POST">
                            @csrf
                            @method('PUT')
                            
                            <!-- 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', $session->session_number) }}" 
                                               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', $session->title) }}" 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" required>{{ old('description', $session->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', $session->duration_minutes) }}" 
                                               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', $session->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">{{ old('content', $session->content) }}</textarea>
                                    <div class="form-text">This is the main content that students will see. Additional materials can be managed separately.</div>
                                    @error('content')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <!-- Materials Summary -->
                            @if($session->materials && count($session->materials) > 0)
                            <div class="mb-4">
                                <h3 class="h5 fw-bold text-edunetra-dark mb-3">
                                    <i class="bi bi-file-earmark me-2"></i>Session Materials
                                </h3>
                                
                                <div class="card bg-light border-0">
                                    <div class="card-body">
                                        <div class="d-flex justify-content-between align-items-center mb-3">
                                            <span class="text-muted">{{ count($session->materials) }} materials attached</span>
                                            <a href="{{ route('teacher.sessions.materials', $session) }}" class="btn btn-outline-edunetra btn-sm">
                                                <i class="bi bi-gear me-1"></i>Manage Materials
                                            </a>
                                        </div>
                                        
                                        <div class="row g-2">
                                            @foreach(array_slice($session->materials, 0, 3) as $material)
                                                <div class="col-md-4">
                                                    <div class="d-flex align-items-center p-2 bg-white rounded">
                                                        <i class="bi bi-{{ $material['type'] === 'file' ? 'file-earmark' : ($material['type'] === 'video' ? 'play-circle' : ($material['type'] === 'link' ? 'link' : 'file-text')) }} me-2 text-edunetra-yellow"></i>
                                                        <span class="small">{{ Str::limit($material['title'], 20) }}</span>
                                                    </div>
                                                </div>
                                            @endforeach
                                            @if(count($session->materials) > 3)
                                                <div class="col-md-4">
                                                    <div class="d-flex align-items-center p-2 bg-white rounded text-muted">
                                                        <i class="bi bi-three-dots me-2"></i>
                                                        <span class="small">+{{ count($session->materials) - 3 }} more</span>
                                                    </div>
                                                </div>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @endif

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

                <!-- Danger Zone -->
                <div class="card border-danger mt-4">
                    <div class="card-header bg-danger text-white">
                        <h5 class="mb-0"><i class="bi bi-exclamation-triangle me-2"></i>Danger Zone</h5>
                    </div>
                    <div class="card-body">
                        <p class="text-muted mb-3">Once you delete a session, there is no going back. Please be certain.</p>
                        <button type="button" class="btn btn-outline-danger" onclick="confirmDelete()">
                            <i class="bi bi-trash me-2"></i>Delete Session
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Delete Confirmation Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Confirm Delete</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p>Are you sure you want to delete this session?</p>
                <p class="text-danger small">This action cannot be undone and will also delete all materials associated with this session.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <form action="{{ route('teacher.sessions.destroy', $session) }}" method="POST" style="display: inline;">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="btn btn-danger">Delete Session</button>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
function confirmDelete() {
    new bootstrap.Modal(document.getElementById('deleteModal')).show();
}

// 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