cms.uldp.edu.vn/views/admin/home/videoGallery/index.ejs

<div class="container">
    <div class="d-flex justify-content-between align-items-center mt-4 mb-4">
        <div>
            <h1 class="h3 mb-0" style="color: var(--primary-dark);">
                <%= title %>
            </h1>
            <p class="text-muted mb-0">Manage video gallery section on homepage</p>
        </div>
        <div>
            <a href="<%= frontendUrl %>/" class="btn btn-outline-primary" target="_blank">
                <i class="fas fa-external-link-alt me-2"></i>View Homepage
            </a>
        </div>
    </div>

    <div class="row">
        <div class="col-12">
            <form method="POST" class="content-with-fixed-buttons" id="videoGalleryForm"
                action="/admin/video-gallery/update">
                <div class="card shadow-sm border-0 mb-4">
                    <div class="card-header bg-white border-bottom">
                        <h5 class="mb-0"><i class="fas fa-video me-2"></i>Video Gallery Settings</h5>
                    </div>

                    <div class="card-body">
                        <div class="row g-3">
                            <div class="col-md-12">
                                <label class="form-label fw-medium">Heading</label>
                                <input type="text" class="form-control" name="heading" id="heading"
                                    value="<%= data.heading || '' %>" placeholder="e.g., Explore World">
                            </div>

                            <div class="col-md-12">
                                <label class="form-label fw-medium">Video URL</label>
                                <div class="input-group">
                                    <input type="text" class="form-control" name="videoUrl" id="videoUrl"
                                        value="<%= data.videoUrl || '' %>" placeholder="/assets/video/sample.mp4">
                                    <button type="button" class="btn btn-outline-primary btn-upload-video"
                                        data-target-input="videoUrl">
                                        <i class="fas fa-upload me-1"></i>Upload Video
                                    </button>
                                </div>
                                <small class="text-muted">MP4 video file path or URL</small>
                                <% if (data.videoUrl) { %>
                                    <div class="mt-2">
                                        <video width="100%" height="200" controls style="border-radius: 8px;">
                                            <source src="<%= data.videoUrl %>" type="video/mp4">
                                            Your browser does not support the video tag.
                                        </video>
                                    </div>
                                    <% } %>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Fixed Bottom Buttons -->
                <div class="fixed-bottom-buttons">
                    <button type="reset" class="btn btn-secondary" onclick="resetForm()">
                        <i class="fas fa-undo me-2"></i>Reset
                    </button>
                    <button type="submit" class="btn btn-primary" id="submitBtn">
                        <i class="fas fa-save me-2"></i>Save Changes
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        initializeFormHandlers();
    });

    function initializeFormHandlers() {
        document.querySelectorAll('.btn-upload-image').forEach(button => {
            button.addEventListener('click', function () {
                const targetInput = this.dataset.targetInput;
                const imageType = this.dataset.imageType;
                openImageUploader(targetInput, imageType);
            });
        });

        document.querySelectorAll('.btn-upload-video').forEach(button => {
            button.addEventListener('click', function () {
                const targetInput = this.dataset.targetInput;
                openVideoUploader(targetInput);
            });
        });
    }

    function resetForm() {
        if (confirm('Are you sure you want to reset all changes?')) {
            location.reload();
        }
    }

    function openImageUploader(targetInput, imageType) {
        const fileInput = document.createElement('input');
        fileInput.type = 'file';
        fileInput.accept = 'image/*';
        fileInput.style.display = 'none';
        document.body.appendChild(fileInput);

        fileInput.onchange = async function (e) {
            const file = e.target.files[0];
            if (!file) return;

            try {
                const formData = new FormData();
                formData.append('image', file);

                const uploadBtn = document.querySelector(`[data-target-input="${targetInput}"]`);
                const originalBtnHtml = uploadBtn ? uploadBtn.innerHTML : 'Upload';
                if (uploadBtn) {
                    uploadBtn.disabled = true;
                    uploadBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>Uploading...';
                }

                const response = await fetch(`/admin/upload/image?imageType=${imageType}`, {
                    method: 'POST',
                    body: formData
                });

                const result = await response.json();

                if (!result.success) {
                    throw new Error(result.error || 'Upload failed');
                }

                document.getElementById(targetInput).value = result.path;

                if (uploadBtn) {
                    uploadBtn.disabled = false;
                    uploadBtn.innerHTML = originalBtnHtml;
                }

                alert('Image uploaded successfully!');
                location.reload();

            } catch (error) {
                console.error('Upload error:', error);
                alert('Failed to upload image: ' + error.message);
            } finally {
                document.body.removeChild(fileInput);
            }
        };

        fileInput.click();
    }

    function openVideoUploader(targetInput) {
        const fileInput = document.createElement('input');
        fileInput.type = 'file';
        fileInput.accept = 'video/mp4,video/webm,video/ogg';
        fileInput.style.display = 'none';
        document.body.appendChild(fileInput);

        fileInput.onchange = async function (e) {
            const file = e.target.files[0];
            if (!file) return;

            try {
                const formData = new FormData();
                formData.append('video', file);

                const uploadBtn = document.querySelector(`[data-target-input="${targetInput}"]`);
                const originalBtnHtml = uploadBtn ? uploadBtn.innerHTML : 'Upload';
                if (uploadBtn) {
                    uploadBtn.disabled = true;
                    uploadBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>Uploading...';
                }

                const response = await fetch('/admin/upload/video', {
                    method: 'POST',
                    body: formData
                });

                const result = await response.json();

                if (!result.success) {
                    throw new Error(result.error || 'Upload failed');
                }

                document.getElementById(targetInput).value = result.path;

                if (uploadBtn) {
                    uploadBtn.disabled = false;
                    uploadBtn.innerHTML = originalBtnHtml;
                }

                alert('Video uploaded successfully!');
                location.reload();

            } catch (error) {
                console.error('Upload error:', error);
                alert('Failed to upload video: ' + error.message);
            } finally {
                document.body.removeChild(fileInput);
            }
        };

        fileInput.click();
    }
</script>