@extends('layoutsteacher.layouts')
@section('title', 'คลังวิดีโอ')
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" rel="stylesheet">
  @section('content')
<style>
    .progress-bar {
        background-color: #02aeff;
    }
    .custom-table th, .custom-table td {
        vertical-align: middle;
        text-align: center;
    }
</style>

  
        <div class="container my-5">
            <h5 class="fw-bold mb-4">คลังวิดีโอ</h5>

            <div class="mb-3">
                <p>จำนวนวิดีโอทั้งหมดของฉัน <strong>{{ count($videos) }}</strong> คลิป</p>
                <p>จำนวนพื้นที่ของวิดีโอที่ฉันอัปโหลด 
                    <strong>{{ $usedSpaceMB }} MB ({{ $usedSpaceGB }} GB) / {{ $totalSpaceGB }} GB</strong>
                </p>

                <div class="progress" style="height: 30px;width:50%">
                    <div class="progress-bar" role="progressbar"
                        style="width: {{ $percentage }}%;"
                        aria-valuenow="{{ $usedSpaceGB }}" aria-valuemin="0" aria-valuemax="{{ $totalSpaceGB }}">
                    </div>
                </div>
                {{-- <small>{{ $usedSpaceGB }} / {{ $totalSpaceGB }} GB</small> --}}

                @if($percentage >= 90)
                    <div class="text-danger mt-2">
                        พื้นที่ของคุณใกล้เต็ม กรุณาลบคลิปเพื่อเพิ่มพื้นที่
                    </div>
                @endif

            </div>

            <!-- Search + Add Video -->
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <div class="w-50">
                        <input type="text" class="form-control" placeholder="ค้นหาวิดีโอ" id="searchInput">
                    </div>
                    <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#uploadVideoModal" style="background-color: #02aeff;">
                        เพิ่มวิดีโอ
                    </button>
                </div>

            <!-- Video Table -->
            <div class="table-responsive">
                <table class="table table-bordered custom-table">
                    <thead class="table-light">
                        <tr>
                            <th>ลำดับ</th>
                            <th>ชื่อวิดีโอ</th>
                            <th>ความยาวของวิดีโอ</th>
                            <th>พื้นที่ของวิดีโอ</th>
                            <th>จัดการ</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($videos as $index => $video)
                            <tr>
                                <td lass="text-center">{{ $index + 1 }}</td>
                                <td lass="text-center">{{ $video->video_name }}</td>
                                <td lass="text-center">{{ $video->duration }}</td>
                                <td lass="text-center">{{ $video->size }} MB</td>
                                <td class="text-center">
                                    <div class="d-flex justify-content-center gap-2">
                                        <button 
                                            class="btn btn-sm d-flex align-items-center justify-content-center view-video-btn"
                                            style="width: 36px; height: 36px;"
                                            data-id="{{ $video->id }}"
                                            data-name="{{ $video->video_name }}"
                                        >
                                            <i class="fa-regular fa-eye" style="color: #02aeff;"></i>
                                        </button>
                                        <button 
                                            class="btn btn-sm  d-flex align-items-center justify-content-center edit-video-btn"
                                            data-bs-toggle="modal" 
                                            data-bs-target="#uploadVideoModal"
                                            data-id="{{ $video->id }}"
                                            style="width: 36px; height: 36px;"
                                        >
                                            <i class="fa-regular fa-pen-to-square" style="color: #02aeff;"></i>
                                        </button>
                                        <button class="btn btn-sm  d-flex align-items-center justify-content-center delete-video-btn"
                                                style="width: 36px; height: 36px;"
                                                data-id="{{ $video->id }}">
                                            <i class="fa-solid fa-trash" style="color: #02aeff;"></i>
                                        </button>
                                    </div>
                                </td>

                            </tr>
                        @endforeach

                        @if(count($videos) == 0)
                            <tr>
                                <td colspan="5">ไม่พบวิดีโอ</td>
                            </tr>
                        @endif
                    </tbody>
                </table>
            </div>

            <!-- Pagination -->
            {{-- <div class="d-flex justify-content-center mt-4">
                {{ $videos->links() }}
            </div> --}}
        </div>


        <!-- Video Player Modal -->
<div class="modal fade" id="viewVideoModal" tabindex="-1" aria-labelledby="viewVideoModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="viewVideoModalLabel">ดูวิดีโอ</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="ปิด"></button>
            </div>
            <div class="modal-body">
                <video id="videoPlayer" controls style="width: 100%; height: auto;">
                    <source id="videoSource" src="" type="video/mp4">
                    เบราว์เซอร์ของคุณไม่รองรับการเล่นวิดีโอ
                </video>
            </div>
        </div>
    </div>
</div>
<!-- Modal -->
<div class="modal fade" id="uploadVideoModal" tabindex="-1" aria-labelledby="uploadVideoModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="uploadVideoModalLabel">เพิ่มวิดีโอ</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <form id="videoForm" enctype="multipart/form-data" method="POST">
            @csrf
            <input type="hidden" name="video_id" id="video_id"> <!-- ใช้เช็คว่าเป็น edit หรือ add -->

            <div class="mb-3">
                <label for="title" class="form-label">ชื่อวิดีโอ</label>
                <input type="text" class="form-control" id="title" name="title" required>
            </div>

            <div class="mb-3">
                <label for="description" class="form-label">เนื้อหาวิดีโอ</label>
                <textarea class="form-control" id="description" name="description" rows="3" required></textarea>
            </div>

            <div class="mb-3">
                <label for="cover_image" class="form-label">รูปหน้าปก (ขนาดไฟล์ไม่เกิน 5 MB)</label>
                <input type="file" class="form-control" id="cover_image" name="file_cover_img_name" accept="image/png, image/jpeg">
            </div>

            <div class="mb-5">
                <label for="videoFile" class="form-label">วิดิโอ (ขนาดไฟล์ไม่เกิน 450 MB)</label>
                <input type="file" class="form-control" id="videoFile" name="videoFile" accept="video/*">
            </div>

            {{-- <div class="mb-5">
                <label class="form-label text-primary mb-3"><img src="{{ asset('icon/icon-permission.png') }}" width="20" height="20"> สิทธิ์ของวิดิโอ</label>
                <div class="d-flex gap-5">
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="permission" id="lock" value="1">
                        <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">Preview</label>
                    </div>
                </div>
            </div> --}}

            <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>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script> <!-- Include SweetAlert2 -->
<script>
    const baseUrl = "{{ config('app.url') }}"; // หรือจะใช้เป็นค่าจาก blade ก็ได้

    document.addEventListener('DOMContentLoaded', function () {
        const viewButtons = document.querySelectorAll('.view-video-btn');
        const videoPlayer = document.getElementById('videoPlayer');
        const videoSource = document.getElementById('videoSource');
        const videoModal = new bootstrap.Modal(document.getElementById('viewVideoModal'));

        viewButtons.forEach(button => {
            button.addEventListener('click', function () {
                const videoId = this.getAttribute('data-id');
                const videoName = this.getAttribute('data-name');

                const streamUrl = `${baseUrl}/video/stream/${videoId}`;
                if (videoSource.src !== streamUrl) {
                    videoSource.src = streamUrl;
                    videoPlayer.load();
                }

                // document.getElementById('viewVideoModalLabel').textContent = `ดูวิดีโอ: ${videoName}`;
                // videoModal.show();

                // videoSource.src = streamUrl;
                // videoPlayer.load();

                document.getElementById('viewVideoModalLabel').textContent = `ดูวิดีโอ: ${videoName}`;
                videoModal.show();
            });
        });
    });
</script>
<script>
    function getPayload() {
    let token = localStorage.getItem("token");
    if (!token) return null;
    
    try {
        let payload = JSON.parse(atob(token.split(".")[1])); 
        return payload;
    } catch (error) {
        console.error("Invalid token:", error);
        return null;
    }
}
function parseJwt(token) {
        try {
            const base64Payload = token.split('.')[1];
            const payload = atob(base64Payload);
            return JSON.parse(payload);
        } catch (e) {
            console.error("Invalid token", e);
            return null;
        }
    }
</script>
<script>
document.addEventListener("DOMContentLoaded", function () {
    const token = localStorage.getItem("token");
    const modalTitle = document.getElementById("uploadVideoModalLabel");
    const videoForm = document.getElementById("videoForm");
    const titleInput = document.getElementById("title");
    const descriptionInput = document.getElementById("description");
    const videoIdInput = document.getElementById("video_id");
    const addPeopleField = $('#addPeopleField');  // สมมติใช้ jQuery สำหรับซ่อน/โชว์
    const addPeopleSelect = $('#addPeopleSelect'); // สมมติ select2 หรือ input ที่ใช้เพิ่ม people

    document.getElementById("videoFile").addEventListener("change", function () {
    const file = this.files[0];
    if (file) {
        const fileName = file.name.replace(/\.[^/.]+$/, "");
        titleInput.value = fileName;
    }
});

    let isEditMode = false;
    let currentVideoId = null;

    // ฟังก์ชันช่วยดึงข้อมูลวิดีโอเพื่อแก้ไข
    async function loadVideoData(id) {
        const apiUrl = `{{ config('app.url') }}/api/videos/${id}`;
        try {
            const response = await fetch(apiUrl, {
                headers: { 'Authorization': 'Bearer ' + token }
            });
            const data = await response.json();

            if (data.status.statusType === "S") {
                const video = data.data;
                titleInput.value = video.video_name || "";
                descriptionInput.value = video.video_description || "";
                videoIdInput.value = id;

                // ตั้ง permission
                // if(video.permission_type) {
                //     document.querySelector(`input[name="permission"][value="${video.permission_type}"]`).checked = true;
                // }

                // // ถ้ามี people ใน permission 3 ให้ตั้งค่า select ด้วย (ถ้ามี)
                // if(video.permission_type === '3' && video.peoples) {
                //     const peoples = JSON.parse(video.peoples);
                //     addPeopleSelect.val(peoples).trigger('change');
                //     addPeopleField.show();
                // } else {
                //     addPeopleField.hide();
                //     addPeopleSelect.val(null).trigger('change');
                // }

                // เติมค่าอื่นๆถ้ามี (tags, embed, author ฯลฯ)

            } else {
                Swal.fire("Error", "ไม่พบข้อมูลวิดีโอ", "error");
            }
        } catch (err) {
            console.error(err);
            Swal.fire("Error", "เกิดข้อผิดพลาดขณะดึงข้อมูลวิดีโอ", "error");
        }
    }

    // กดปุ่ม "เพิ่มวิดีโอ"
    const addButton = document.querySelector('[data-bs-target="#uploadVideoModal"]:not(.edit-video-btn)');
    if (addButton) {
        addButton.addEventListener("click", function () {
            isEditMode = false;
            currentVideoId = null;
            modalTitle.textContent = "เพิ่มวิดีโอ";
            videoForm.reset();
            videoIdInput.value = "";
            addPeopleField.hide();
            addPeopleSelect.val(null).trigger('change');
        });
    }

    // กดปุ่ม "แก้ไขวิดีโอ"
    document.querySelectorAll(".edit-video-btn").forEach(button => {
        button.addEventListener("click", function () {
            isEditMode = true;
            currentVideoId = this.dataset.id;
            modalTitle.textContent = "แก้ไขวิดีโอ";
            videoForm.reset();
            addPeopleSelect.val(null).trigger('change');

            loadVideoData(currentVideoId);
        });
    });
    

    // เปลี่ยน permission
    // 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');
    //         }
    //     });
    // });

    // ฟังก์ชันดึงระยะเวลาวิดีโอ
    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);
        });
    }

    // Event submit form
    videoForm.addEventListener('submit', async function (event) {
        event.preventDefault();

        // ตรวจสอบข้อมูลเบื้องต้น (title, description, permission)
        const title = titleInput.value.trim();
        const description = descriptionInput.value.trim();
        // const permission = document.querySelector('input[name="permission"]:checked');
        if (!title || !description) {
            Swal.fire("กรุณากรอกข้อมูลให้ครบถ้วน", "", "warning");
            return;
        }

        const formData = new FormData();

        formData.append('video_name', title);
        formData.append('video_description', description);
        // formData.append('permission_type', permission.value);

        // tags (ถ้ามี)
        const tagsInput = document.getElementById("tags");
        if(tagsInput) {
            const tagsArray = tagsInput.value.split(',').map(t => t.trim()).filter(t => t.length > 0);
            formData.append('tags', JSON.stringify(tagsArray));
        }

        // peoples สำหรับ permission 3
        // if (permission.value === '3') {
        //     const peoples = addPeopleSelect.val() || [];
        //     formData.append('peoples', JSON.stringify(peoples));
        // }

        // ไฟล์วิดีโอ ถ้ามี
        const videoFile = document.getElementById("videoFile").files[0];
        if (videoFile) {
            try {
                const duration = await getVideoDuration(videoFile);
                formData.append('video_duration', duration.toString());
                formData.append('video_size', videoFile.size.toString());
                formData.append('video_file', videoFile);
            } catch (err) {
                Swal.fire("Error", "ไม่สามารถอ่านไฟล์วิดีโอได้", "error");
                return;
            }
        }

        // ไฟล์ภาพปก ถ้ามี
        const coverImage = document.getElementById("cover_image").files[0];
        if (coverImage) {
            formData.append('file_cover_img_name', coverImage);
        }

        // embed video (ถ้ามี)
        const embedCheckbox = document.getElementById("Embed");
        if(embedCheckbox && embedCheckbox.checked) {
            formData.append('embed_video', document.getElementById("embedCode").value);
        }

        // ถ้าเป็น edit ให้แนบ id และ spoof method PUT
        let apiUrl = `{{ config('app.url') }}/api/videos`;
        let method = "POST";

        if (isEditMode && currentVideoId) {
            apiUrl = `{{ config('app.url') }}/api/videos/${currentVideoId}`;
            // Laravel method spoofing via _method field
            formData.append('_method', 'PUT');
        }

        try {
            Swal.fire({
                title: isEditMode ? "กำลังแก้ไขวิดีโอ..." : "กำลังเพิ่มวิดีโอ...",
                allowOutsideClick: false,
                didOpen: () => Swal.showLoading(),
            });

            const response = await fetch(apiUrl, {
                method: method,
                headers: {
                    "Authorization": "Bearer " + token,
                },
                body: formData,
            });

            const result = await response.json();

            if (result.status.statusType === "S") {
                Swal.fire({
                    icon: "success",
                    title: "สำเร็จ",
                    text: isEditMode ? "แก้ไขวิดีโอเรียบร้อยแล้ว" : "เพิ่มวิดีโอเรียบร้อยแล้ว",
                }).then(() => {
                    // ปิด modal และโหลดหน้าใหม่ หรือ redirect ตามต้องการ
                    videoForm.reset();
                    location.reload();
                });
            } else {
                throw new Error(result.status.errorMessage || "เกิดข้อผิดพลาด");
            }
        } catch (err) {
            console.error(err);
            Swal.fire("Error", err.message || "เกิดข้อผิดพลาดขณะบันทึกข้อมูล", "error");
        }
    });
});
</script>

{{-- <script>
document.addEventListener("DOMContentLoaded", function () {
    // Initialize variables
    const token = localStorage.getItem("token");
    const payload = parseJwt(token);
    const modalTitle = document.getElementById("uploadVideoModalLabel");
    const videoForm = document.getElementById("videoForm");
    const titleInput = document.getElementById("title");
    const descriptionInput = document.getElementById("description");
    const permissionRadios = document.querySelectorAll('input[name="permission"]');
    const videoIdInput = document.getElementById("video_id");
    const videoInput = document.getElementById("videoFile");

    // ปุ่ม Edit ทั้งหมด
    document.querySelectorAll(".edit-video-btn").forEach(button => {
        button.addEventListener("click", function () {
            const id = this.dataset.id;
            const apiUrl = `{{ config('app.url') }}/api/videos/${id}`;

            // เปลี่ยน modal title และ form action
            modalTitle.textContent = "แก้ไขวิดีโอ";
            // videoForm.action = "/update_video";
            videoForm.reset();
            videoIdInput.value = id;

            // ดึงข้อมูลจาก API
            fetch(apiUrl, {
                headers: {
                    'Authorization': 'Bearer ' + token
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.status.statusType === "S") {
                    const video = data.data;

                    titleInput.value = video.video_name;
                    descriptionInput.value = video.video_description;

                    // กรอก permission
                    document.querySelector(`input[name="permission"][value="${video.permission_type}"]`).checked = true;

                    // หากมีฟิลด์ tag / embed / category / author ให้เติมที่นี่ตามต้องการ
                    // เช่น:
                    // document.getElementById("tags").value = JSON.parse(video.tags).join(", ");

                } else {
                    console.error("Video not found");
                }
            })
            .catch(err => console.error("API error:", err));
        });
    });
     // ปุ่มเพิ่มวิดีโอ
    const addButton = document.querySelector('[data-bs-target="#uploadVideoModal"]:not(.edit-video-btn)');
    if (addButton) {
        addButton.addEventListener("click", function () {
            modalTitle.textContent = "เพิ่มวิดีโอ";
            videoForm.reset();
            // videoForm.action = "/upload_video";
            videoIdInput.value = "";
        });
    }
    // 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');
            }
        });
    });


    // 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);
        });
    }
            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);

                // 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 = `{{ config('app.url') }}/folder/${foldername}`;
                            } else {
                                window.location.href = "{{ config('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>
<script>
document.addEventListener("DOMContentLoaded", function () {
    const token = localStorage.getItem("token");
    const payload = parseJwt(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("{{ config('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 = `{{ config('app.url') }}/folder/${payload.id}`;
                } else {
                    window.location.href = `{{ config('app.url') }}/folder/${payload.id}`;
                }
            });
        } 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> --}}
<script>
     document.addEventListener("DOMContentLoaded", function () {
    // Select all Copy Link buttons
    document.querySelectorAll(".copyLinkButton").forEach(button => {
        button.addEventListener("click", function () {
            const videoId = this.getAttribute("data-video-id");
            const input = document.getElementById(`videoLink-${videoId}`);

            if (input) {
                const originalUrl = input.value;
                const encodedUrl = encodeURI(originalUrl);

                copyToClipboard(encodedUrl);

                Swal.fire({
                    icon: 'success',
                    title: 'Copied!',
                    text: 'Video link has been copied to clipboard.',
                    confirmButtonText: 'OK'
                });
            }
        });
    });

    document.querySelectorAll(".copyEmbedButton").forEach(button => {
        button.addEventListener("click", function () {
            const videoId = this.getAttribute("data-video-id");
            copyToClipboard(`embedCode-${videoId}`);

            Swal.fire({
                icon: 'success',
                title: 'Copied!',
                text: 'Embed code has been copied to clipboard.',
                confirmButtonText: 'OK'
            });
        });
    });

    function copyToClipboard(elementId) {
        const inputElement = document.getElementById(elementId);
        if (!inputElement) {
            console.error('Element not found:', elementId);
            return;
        }
        navigator.clipboard.writeText(inputElement.value).then(function () {
            console.log('Text successfully copied');
        }).catch(function (error) {
            console.error('Error copying text:', error);
        });
    }
});


</script>
<script>
    document.getElementById('createFolderForm').addEventListener('submit', function(event) {
        event.preventDefault();

        const formData = new FormData(this);

        fetch('{{ route("subfolder.create") }}', {
            method: 'POST',
            body: formData,
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                Swal.fire({
                    icon: 'success',
                    title: 'Folder Created',
                    text: 'The folder was created successfully!',
                    confirmButtonText: 'OK',
                }).then(() => {
                    // Close the modal
                    $('#addFolderModal').modal('hide');

                    // Append the new folder to the row
                    const folderList = document.querySelector('.row'); // Target the row directly
                    const newFolderHTML = `
                        <div class="col-md-3 mb-4">
                            <a href="/folder/${data.folderPath}" style="text-decoration: none;">
                                <div class="card text-center">
                                    <div class="card-body">
                                        <h5 class="card-title mt-3">${data.folderName}</h5>
                                        <img src="{{ asset('icon/icon-folder.png') }}" width="100">
                                    </div>
                                </div>
                            </a>
                        </div>
                    `;
                    folderList.innerHTML += newFolderHTML; // Append the new folder
                    location.reload();
                });
            } else {
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: data.message || 'An error occurred.',
                    confirmButtonText: 'OK',
                });
            }
        })
    });
    
</script>
<script>
document.querySelectorAll('.delete-video-btn').forEach(button => {
    button.addEventListener('click', async function () {
        const videoId = this.getAttribute('data-id');
        const token = localStorage.getItem("token");  // ดึง token มาใช้

        const result = await Swal.fire({
            title: 'ยืนยันการลบ',
            text: 'คุณแน่ใจว่าจะลบวิดีโอนี้หรือไม่?',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: 'ใช่, ลบเลย',
            cancelButtonText: 'ยกเลิก'
        });

        if (result.isConfirmed) {
            try {
                Swal.fire({
                    title: 'กำลังลบ...',
                    allowOutsideClick: false,
                    didOpen: () => {
                        Swal.showLoading();
                    }
                });

                const response = await fetch(`{{ config('app.url') }}/api/videos/${videoId}`, {
                    method: "DELETE",
                    headers: {
                        "Content-Type": "application/json",
                        Authorization: `Bearer ${token}`,
                    },
                });

                Swal.close(); // ปิด loading

                if (response.ok) {
                    Swal.fire({
                        title: 'ลบสำเร็จ!',
                        text: 'วิดีโอถูกลบเรียบร้อยแล้ว',
                        icon: 'success'
                    }).then(() => {
                        location.reload();
                    });
                } else {
                    throw new Error("ลบวิดีโอไม่สำเร็จ");
                }
            } catch (error) {
                Swal.close(); // ปิด loading ถ้าเกิด error
                Swal.fire({
                    title: 'เกิดข้อผิดพลาด',
                    text: error.message,
                    icon: 'error'
                });
            }
        }
    });
});
</script>


@endsection