{% extends "admin/dashboard.html" %}
{% load static %}

{% block title %}
    <title>Admin | Edit Video</title>
{% endblock title %}

{% block content %}

<div class="page-content">
    <div class="container-xxl">
        <div class="row">
            <div class="col-xl-12 col-lg-12">
                <form id="video-form" action="{% url 'video_edit' video.id %}" method="post" enctype="multipart/form-data" class="needs-validation" novalidate>
                    {% csrf_token %}

                    <!-- Video Thumbnail Upload Section -->
                    <div class="card">
                        <div class="card-header">
                            <h4 class="card-title">Edit Video Thumbnail</h4>
                            {% if video.thumbnail %}
                                <div>
                                    <img src="{{ video.thumbnail.url }}" alt="Thumbnail" style="width: 150px; margin-top: 20px;">
                                </div>
                            {% endif %}
                            <div id="file-previews" style="display: flex; flex-wrap: wrap; margin-top: 10px;"></div>
                            <input class="form-control mt-3" name="thumbnail" type="file" accept="image/*" id="thumbnailUpload">
                            <small class="text-danger invalid-feedback">Please upload a valid image for the thumbnail.</small>
                        </div>
                    </div>

                    <!-- General Information Section -->
                    <div class="card">
                        <div class="card-header">
                            <h4 class="card-title">General Information</h4>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <!-- Video Title -->
                                <div class="col-lg-4">
                                    <div class="mb-3">
                                        <label for="title" class="form-label">Title</label>
                                        <input type="text" name="title" id="title" class="form-control" value="{{ video.title }}" required>
                                        <small class="text-danger invalid-feedback">Please provide a title for the video.</small>
                                    </div>
                                </div>

                                <!-- Video Author -->
                                <div class="col-lg-4">
                                    <div class="mb-3">
                                        <label for="author" class="form-label">Author</label>
                                        <input type="text" name="author" id="author" class="form-control" value="{{ video.author }}" required>
                                        <small class="text-danger invalid-feedback">Please provide an author for the video.</small>
                                    </div>
                                </div>
                                
                                <!-- Video Status -->
                                <div class="col-lg-4">
                                    <div class="mb-3">
                                        <label for="status" class="form-label">Status</label>
                                        <select name="status" class="form-control" id="status" required>
                                            <option value="1" {% if video.status == 1 %}selected{% endif %}>Published</option>
                                            <option value="0" {% if video.status == 0 %}selected{% endif %}>Unpublished</option>
                                        </select>
                                        <small class="text-danger invalid-feedback">Please select a status for the video.</small>
                                    </div>
                                </div>

                                <!-- Video Description -->
                                <div class="col-lg-12">
                                    <label for="description" class="form-label">Description</label>
                                    <textarea name="description" id="description" class="form-control" style="display:none;">{{ video.description }}</textarea>
                                    <div id="editor"></div>
                                </div>

                                <!-- Video File Upload -->
                                <div class="col-lg-12">
                                    <div class="mt-2">
                                        <label for="videoFile" class="form-label pt-1">Upload Video</label>
                                        <!-- Video Preview -->
                                       {% if video.video_file %}
                                        <div id="videoPreview" style="margin-top: 20px;">
                                          <video id="videoPlayer" width="150" controls>
                                            <source src="{{ video.video_file.url }}" type="video/mp4">
                                            Your browser does not support the video tag.
                                        </video>
                                         </div>
                                       {% endif %}
                                        <input class="form-control mt-2" type="file" name="videoFile" id="videoFile" accept="video/*">
                                        <small class="text-danger invalid-feedback">Please upload a video file.</small>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Action Buttons -->
                    <div class="p-3 bg-light mb-3 rounded">
                        <div class="row justify-content-end g-2">
                            <div class="col-lg-2">
                                <button type="submit" class="btn btn-outline-secondary w-100">Save Changes</button>
                            </div>
                            <div class="col-lg-2">
                                <a href="{% url 'video_list' %}" class="btn btn-primary w-100">Cancel</a>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
    // Initialize the CKEditor for the description field
    ClassicEditor
        .create(document.querySelector('#editor'), {
            toolbar: ['heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', '|', 'blockQuote']
        })
        .then(editor => {
            // Set the initial content of the editor
            editor.setData(document.querySelector('#description').value);
            
            // Update the hidden input value when the content changes
            editor.model.document.on('change:data', () => {
                document.querySelector('#description').value = editor.getData();
            });
        })
        .catch(error => {
            console.error(error);
        });

    // Video file preview functionality (optional)
    document.getElementById('videoFile').addEventListener('change', function(event) {
        var videoFile = event.target.files[0];
        if (videoFile) {
            var videoURL = URL.createObjectURL(videoFile);
            var videoPlayer = document.getElementById('videoPlayer');
            var videoSource = videoPlayer.querySelector('source');
            
            // Set the video URL for preview
            videoSource.src = videoURL;
            document.getElementById('videoPreview').style.display = 'block'; // Show the video player
            videoPlayer.load(); // Load the video
        }
    });
</script>

{% endblock %}