@extends('layoutsteacher.layouts')

@section('title', 'Upload Video')
{{-- <link rel="icon" href="{{ asset('Bg/logoCRG.png') }}" type="image/png"> --}}
@section('content')
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" rel="stylesheet">

<!-- Load jQuery first -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- Load Select2 CSS and JS -->
<link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>

<style>
    body {
        padding: 20px;
    }
    .form-container {
        max-width: 800px;
        margin: 0;
    }
    .search-field {
        display: none;
    }
</style>

<div class="content" id="mainContent">
    <div class="container mt-5 form-container ms-3">
        <h3>Upload Video</h3>
        <form id="videoForm" enctype="multipart/form-data">
            @csrf
            <div class="mb-3">
                <label for="title" class="form-label">Title</label>
                <input type="text" class="form-control" id="title" name="title" placeholder="Enter video title" required>
            </div>
            <!-- Description -->
            <div class="mb-3">
                <label for="description" class="form-label">Description</label>
                <textarea class="form-control" id="description" name="description" rows="3" placeholder="Enter video description" required></textarea>
            </div>
            
            <!-- Cover Image -->
            <div class="mb-3">
                <label for="cover_image" class="form-label">Cover Image</label>
                <input type="file" class="form-control" id="cover_image" name="file_cover_img_name" accept="image/png, image/jpeg">
            </div>

            <div class="mb-3">  
                <label for="videoFile" class="form-label"><img src="{{ asset('icon/icon-uploadblue.png') }}" width="20" height="20">Upload File Video</label>
            </div>

            <!-- Upload File -->
            <div class="mb-5">
                <label for="videoFile" class="form-label">Video</label>
                <input type="file" class="form-control" id="videoFile" name="videoFile" accept="video/*" required>
            </div>
            <!-- Permissions -->
            <div class="mb-5">
                <label class="form-label text-primary mb-3"> <img src="{{ asset('icon/icon-permission.png') }}" width="20" height="20"> Permission</label>
                <div class="d-flex gap-5">
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="permission" id="lock" value="1" checked>
                        <label class="form-check-label" for="lock">Lock</label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="permission" id="free" value="2">
                        <label class="form-check-label" for="free">Free</label>
                    </div>
                </div>
            </div>
    
            <!-- Buttons -->
            <div class="d-flex justify-content-between">
                <button type="reset" class="btn btn-light w-50">Reset</button>
                <button type="submit" class="btn btn-primary w-50">Submit</button>
            </div>
        </form>
    </div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function () {
    const token = localStorage.getItem("token");
    const urlParams = new URLSearchParams(window.location.search);
    const videoInput = document.getElementById("videoFile");
    // ฟังการเปลี่ยนแปลงของ permission
    const permissionRadios = document.querySelectorAll('input[name="permission"]');

    document.querySelectorAll('input[name="permission"]').forEach(radio => {
        radio.addEventListener('change', function () {
            if (this.value === '3') { // Add People
                addPeopleField.show();
            } else {
                addPeopleField.hide();
                addPeopleSelect.val(null).trigger('change'); // Clear selection
            }
        });
    });
        const form = document.getElementById('videoForm');
form.addEventListener('submit', async function (event) {
    event.preventDefault();

    const title = document.getElementById("title").value;
    const description = document.getElementById("description").value;
    const videoFile = document.getElementById("videoFile").files[0];
    const permission = document.querySelector('input[name="permission"]:checked').value;
    // const author = document.getElementById("author").value;
    const coverImage = document.getElementById("cover_image").files[0];

    // Get video duration
    const videoDuration = await getVideoDuration(videoFile);

    // Get video file size in bytes
    const videoSize = videoFile.size;

    const formData = new FormData();
    formData.append('video_name', title);
    formData.append('video_description', description);
    formData.append('video_file_name', videoFile.name);
    formData.append('video_path', videoFile.name);
    formData.append('video_size', videoSize);
    formData.append('author', ''); // or dynamically get user
    formData.append('tags', JSON.stringify([])); // optional
    formData.append('embed_video', '');
    formData.append('video_duration', videoDuration); // Add duration to form data
    formData.append('file_cover_img_name', coverImage || null);
    formData.append('image_cover_path', coverImage ? coverImage.name : null);
    formData.append('permission_type', permission);

    formData.append('video_file', videoFile);

    try {
        Swal.fire({
            title: 'Uploading...',
            text: 'Please wait while the video is being uploaded.',
            allowOutsideClick: false,
            didOpen: () => Swal.showLoading(),
        });

        const response = await fetch("{{ env('APP_URL') }}/api/videos", {
            method: "POST",
            headers: { "Authorization": "Bearer " + token },
            body: formData,
        });

        const result = await response.json();

        if (result.status.statusType === 'S') {
            Swal.fire({
                icon: 'success',
                title: 'Success!',
                text: 'Video uploaded successfully!',
            }).then(() => {
                document.getElementById("videoForm").reset();
                const urlParams = new URLSearchParams(window.location.search);
                const folder = urlParams.get('folder');

                if (folder) {
                    window.location.href = `{{ env('APP_URL') }}/video_content`;
                } else {
                    window.location.href = "{{ env('APP_URL') }}/video_content";
                }
            });
        } else {
            Swal.fire({
                icon: 'error',
                title: 'Error',
                text: result.status.errorMessage || 'Failed to upload the video.',
            });
        }
    } catch (error) {
        console.error("Error occurred while submitting the form:", error);
        Swal.fire({
            icon: 'error',
            title: 'Unexpected Error',
            text: 'An error occurred while uploading the video. Please try again later.',
        });
    }
});

// Function to get video duration
function getVideoDuration(file) {
    return new Promise((resolve, reject) => {
        const video = document.createElement('video');
        video.preload = 'metadata';

        video.onloadedmetadata = function() {
            window.URL.revokeObjectURL(video.src);
            resolve(Math.round(video.duration));
        }

        video.onerror = function() {
            reject("Error loading video file");
        }

        video.src = URL.createObjectURL(file);
    });
}
    });
</script>
@endsection