@extends('layouts.sidenav')

@section('title', 'Update 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>Update Video</h3>
        <form id="videoForm" enctype="multipart/form-data">
            @csrf
            <div class="mb-3">
                <label for="category" class="form-label">Category</label>
                <select class="form-select" id="category" name="category" required>
                    <option value="" disabled selected>เลือก Category</option>
                    <!-- Categories will be populated here dynamically -->
                </select>
            </div>

            <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="author" class="form-label">Search Author</label>
                <select class="form-control" id="author" name="author" style="width: 100%;" required>
                    <option value="" disabled selected>Select an author</option>
                </select>
            </div>

            <div class="mb-3">
                <label for="tags" class="form-label">Tags</label>
                <input type="text" class="form-control" id="tags" name="tags" placeholder="Enter your Tags" required>
            </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="public" value="1" checked>
                        <label class="form-check-label" for="public">Public</label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="permission" id="private" value="2">
                        <label class="form-check-label" for="private">Private</label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="permission" id="addPeople" value="3">
                        <label class="form-check-label" for="addPeople">Add People</label>
                    </div>
                </div>
            </div>
            <div class="mb-5">
                <label for="">Embed</label>
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" name="Embed" id="Embed">
                    <label class="form-check-label" for="Embed">Embed</label>
                </div>
            </div>
            <div class="mb-3">
                <label for="embedIframe" class="form-label">Embed Preview</label>
                <div id="embedPreview" class="border p-2" style="display: none;">
                    <textarea id="embedCode" class="form-control" rows="3" readonly></textarea>
                </div>
            </div>
            <!-- Add People Search Field -->
            <div class="mb-3 search-field" id="addPeopleSearch">
                <label for="addPeopleSelect" class="form-label">Select People</label>
                <select class="form-control" id="addPeopleSelect" name="peoples[]" multiple="multiple" style="width: 100%;">
                    <!-- Options will be loaded dynamically -->
                </select>
            </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 () {
    // Initialize variables
    const token = localStorage.getItem("jwtToken");
    const urlParams = new URLSearchParams(window.location.search);
    const foldername = urlParams.get('folder');
    const id = urlParams.get('id');
    const categorySelect = $('#category');
    const addPeopleField = $('#addPeopleSearch');
    const addPeopleSelect = $('<select multiple></select>').attr('id', 'addPeopleSelect');
    const embedCheckbox = document.getElementById("Embed");
    const embedPreview = document.getElementById("embedPreview");
    const embedCode = document.getElementById("embedCode");
    const videoInput = document.getElementById("videoFile");
    const authorSelect = $('#author');

    // Initialize Select2 for author search
    authorSelect.select2({
        placeholder: "Search author",
        allowClear: true,
        minimumInputLength: 0,
        ajax: {
            url: '{{ env('APP_URL') }}/api/users',
            dataType: 'json',
            delay: 250,
            headers: {
                'Authorization': 'Bearer ' + token
            },
            data: function (params) {
                return {
                    search: params.term || '',
                };
            },
            processResults: function (data, params) {
                if (data && data.data) {
                    let filteredUsers = data.data.filter(user => {
                        const fullName = user.full_name.toLowerCase();
                        const searchTerm = params.term ? params.term.toLowerCase() : '';
                        return fullName.includes(searchTerm);
                    });

                    return {
                        results: filteredUsers.map(user => ({
                            id: user.id,
                            text: user.full_name
                        }))
                    };
                }
                console.error('No users data found:', data);
                return { results: [] };
            },
            cache: true
        },
        dropdownAutoWidth: true,
        width: '100%'
    });

    // Initialize Select2 for Add People
    addPeopleField.append(addPeopleSelect);
    addPeopleSelect.select2({
        placeholder: "Search and add people",
        allowClear: true,
        minimumInputLength: 0,
        ajax: {
            url: '{{ env('APP_URL') }}/api/register',
            dataType: 'json',
            delay: 250,
            headers: {
                'Authorization': 'Bearer ' + token,
            },
            data: function (params) {
                return {
                    search: params.term || '',
                };
            },
            processResults: function (data, params) {
                if (data && data.data) {
                    return {
                        results: data.data.map(user => ({
                            id: user.id,
                            text: user.name,
                        })),
                    };
                }
                console.error('No users data found:', data);
                return { results: [] };
            },
            cache: true,
        },
        dropdownAutoWidth: true,
        width: '100%',
    });

    // Initialize Select2 for category
    categorySelect.select2({
        placeholder: "Select Category",
        allowClear: true,
        width: '100%',
    });

    // Fetch and populate categories
    fetch('{{ env('APP_URL') }}/api/videos/category', {
        method: 'GET',
        headers: {
            'Authorization': 'Bearer ' + token,
            'Content-Type': 'application/json',
        },
    })
    .then(response => response.json())
    .then(data => {
        if (data && data.data) {
            data.data.forEach(category => {
                const option = new Option(category.category_name, category.id, false, false);
                categorySelect.append(option);
            });
            categorySelect.trigger('change');
        }
    })
    .catch(error => console.error('Error fetching categories:', error));

    // Load initial video data
    const apiUrl = `{{ env('APP_URL') }}/api/videos/${id}`;
    fetch(apiUrl, {
        headers: {
            'Authorization': 'Bearer ' + token
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.status.statusType === "S") {
            const video = data.data;
            
            // Set form values
            categorySelect.val(video.category).trigger('change');
            authorSelect.val(video.author).trigger('change');
            document.getElementById("title").value = video.video_name;
            document.getElementById("description").value = video.video_description;
            
            // Handle tags
            let tagsArray = typeof video.tags === 'string' ? JSON.parse(video.tags) : video.tags;
            document.getElementById("tags").value = tagsArray.join(", ");
            
            // Set permission
            document.querySelector(`input[name="permission"][value="${video.permission_type}"]`).checked = true;
            
            // Handle embed video
            if (video.embed_video) {
                embedCheckbox.checked = true;
                embedPreview.style.display = "block";
                embedCode.value = video.embed_video;
            }
            
            // Handle permission-specific UI
            if (video.permission_type === '3') {
                addPeopleField.show();
                if (video.video_permission && video.video_permission.peoples) {
                    const peoples = JSON.parse(video.video_permission.peoples);
                    addPeopleSelect.val(peoples).trigger('change');
                }
            } else {
                addPeopleField.hide();
            }
        }
    })
    .catch(error => console.error("Error fetching video data:", error));

    // Handle permission change
    document.querySelectorAll('input[name="permission"]').forEach(radio => {
        radio.addEventListener('change', function () {
            if (this.value === '3') {
                addPeopleField.show();
            } else {
                addPeopleField.hide();
                addPeopleSelect.val(null).trigger('change');
            }
        });
    });

    // Handle embed video functionality
    embedCheckbox.addEventListener("change", function () {
        if (this.checked) {
            if (videoInput.files.length > 0) {
                const baseURL = window.location.origin;
                const title = document.getElementById("title").value.trim();
                const sanitizedTitle = title.replace(/\s+/g, "");
                const videoURL = `${baseURL}/video/stream/web_portal/${foldername}/${sanitizedTitle}.mp4`;
                const iframeCode = `<iframe width="560" height="315" src="${videoURL}" frameborder="0" allowfullscreen></iframe>`;
                
                embedCode.value = iframeCode;
                embedPreview.style.display = "block";
            } else {
                alert("Please select a video file first.");
                this.checked = false;
            }
        } else {
            embedPreview.style.display = "none";
            embedCode.value = "";
        }
    });

    // Reset embed preview when video changes
    videoInput.addEventListener("change", function () {
        if (embedCheckbox.checked) {
            embedCheckbox.checked = false;
            embedPreview.style.display = "none";
            embedCode.value = "";
        }
    });

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

            const timeoutId = setTimeout(() => {
                reject(new Error("Timeout getting video duration"));
            }, 10000);

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

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

            video.src = URL.createObjectURL(file);
        });
    }

    // Form submission handler
    // Form submission handler
const form = document.getElementById("videoForm");
form.addEventListener('submit', async function (event) {
    event.preventDefault();
    
    // Validate required fields
    const title = document.getElementById("title").value;
    const description = document.getElementById("description").value;
    const category = categorySelect.val();
    const author = authorSelect.val();
    
    if (!title || !description || !category || !author) {
        Swal.fire({
            icon: "error",
            title: "Required Fields Missing",
            text: "Please fill in all required fields.",
        });
        return;
    }
    
    // Create FormData object
    const formData = new FormData();
    
    // Add basic fields - use consistent field names with backend
    formData.append('video_name', title);
    formData.append('video_description', description);
    formData.append('permission_type', document.querySelector('input[name="permission"]:checked').value);
    formData.append('author', author);
    formData.append('category', category);
    formData.append('foldername', foldername);

    // Handle tags
    const tagsInput = document.getElementById("tags").value;
    const tagsArray = tagsInput.split(',').map(tag => tag.trim()).filter(tag => tag.length > 0);
    formData.append('tags', JSON.stringify(tagsArray));

    // Handle peoples for permission type 3 (private)
    if (formData.get('permission_type') === '3') {
        const peoples = addPeopleSelect.val() || [];
        formData.append('peoples', JSON.stringify(peoples));
    }

    // Handle video file if selected
    const videoFile = document.getElementById("videoFile").files[0];
    if (videoFile) {
        try {
            const duration = await getVideoDuration(videoFile);
            formData.append('video_duration', duration.toString()); // Convert to string
            formData.append('video_size', videoFile.size.toString()); // Convert to string
            formData.append('video_file', videoFile);
        } catch (error) {
            console.error('Error getting video duration:', error);
            Swal.fire({
                icon: "error",
                title: "Error",
                text: "Could not process video file. Please try again.",
            });
            return;
        }
    }

    // Handle cover image if selected
    const coverImage = document.getElementById("cover_image").files[0];
    if (coverImage) {
        formData.append('file_cover_img_name', coverImage);
    }

    // Handle embed video
    if (document.getElementById("Embed").checked) {
        formData.append('embed_video', document.getElementById("embedCode").value);
    }

    try {
        // Log FormData contents for debugging
        for (let pair of formData.entries()) {
            console.log(pair[0] + ': ' + pair[1]);
        }

        Swal.fire({
            title: "Updating...",
            text: "Please wait while the video is being updated.",
            allowOutsideClick: false,
            didOpen: () => Swal.showLoading(),
        });

        const response = await fetch(apiUrl, {
            method: "POST", // Change to POST
            headers: {
                "Authorization": `Bearer ${token}`,
                "X-HTTP-Method-Override": "PUT" // Add this header for method spoofing
            },
            body: formData
        });

        const result = await response.json();

        if (result.status.statusType === "S") {
            Swal.fire({
                icon: "success",
                title: "Success!",
                text: "Video updated successfully!",
            }).then(() => {
                if (foldername) {
                    window.location.href = `{{ env('APP_URL') }}/folder/${foldername}`;
                } else {
                    window.location.href = "{{ env('APP_URL') }}/video_content";
                }
            });
        } else {
            throw new Error(result.status.errorMessage || "Failed to update video");
        }
    } catch (error) {
        console.error("Error updating video:", error);
        Swal.fire({
            icon: "error",
            title: "Error",
            text: error.message || "An error occurred while updating the video.",
        });
    }
});
});
</script>
@endsection