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

{% block title %}
    <title>Admin | Video Create</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_create' %}" 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">Add Video Thumbnail</h4>
                            <input class="form-control mt-3" name="thumbnail" type="file" accept="image/*" id="thumbnailUpload" required>
                            <div id="file-previews" style="display: flex; flex-wrap: wrap; margin-top: 10px;"></div>
                            <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" placeholder="Enter 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" placeholder="Enter 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 selected value="">Select Status</option>
                                            <option value="1">Published</option>
                                            <option value="0">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;"></textarea>
                                    <div id="editor"></div>
                                </div>

                                <!-- Video File Upload -->
                                <div class="col-lg-12">
                                    <div class="mb-3">
                                        <label for="videoFile" class="form-label">Upload Video</label>
                                        <input class="form-control" type="file" name="videoFile" id="videoFile" accept="video/*" required>
                                        <small class="text-danger invalid-feedback">Please upload a video file.</small>
                                    </div>

                                    <!-- Video Preview -->
                                    <div id="videoPreview" style="margin-top: 20px; display: none;">
                                        <video id="videoPlayer" width="300" controls>
                                            <source id="videoSource" src="" type="video/mp4">
                                            Your browser does not support the video tag.
                                        </video>
                                    </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">Create</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
    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 = document.getElementById('videoSource');
            
            // 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 %}