@extends('layoutsteacher.layouts')
@section('title', 'แก้ไขคอร์ส')

@section('content')

<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
<style>
    .section-header {
        font-weight: 600;
        font-size: 16px;
        color: #007bff;
        border-left: 3px solid #007bff;
        padding-left: 12px;
        margin-bottom: 16px;
        margin-top: 40px;
    }
    .avatar {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        object-fit: cover;
    }
    .upload-area {
        min-height: 260px;
        background: #f6f7f9;
        border-radius: 16px;
        border: 1px dashed #ccc;
        padding: 24px;
    }

    .input-light {
        border-radius: 12px;
        border: 1px solid #dbe4ec;
        padding: 12px 16px;
        font-size: 15px;
        background-color: #fdfdfd;
        color: #333;
    }

    .input-light::placeholder {
        color: #ccc;
    }
    .sortable-ghost {
  opacity: 0.4;
  background-color: #f0f0f0;
}
.lesson-header {
  cursor: move;
}
.input-light::placeholder {
    color: #ccc;
}
.offcanvas {
  z-index: 1061; /* ต้องสูงกว่า modal (.modal มี z-index 1055) */
}
.accordion-button {
    background-color: #fff;
    color: #007bff;
    font-weight: 500;
}

.accordion-button:focus {
    box-shadow: none;
}

.accordion-button::after {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f078"; /* down arrow */
    transform: rotate(0deg);
    transition: transform 0.2s ease-in-out;
}

.accordion-button:not(.collapsed)::after {
    transform: rotate(180deg);
}
</style>

<div class="container mb-5">
    @if(session('success'))
        <div class="alert alert-success">{{ session('success') }}</div>
    @endif

 

    <form id="courseForm" enctype="multipart/form-data">
        @csrf

        <div class="row mb-4">
            <div class="col-md-6">
                <div class="upload-area text-center">
                    <input type="file" name="image" class="d-none" id="coverImageInput">
                    <label for="coverImageInput" style="cursor:pointer;">
                        @if($course->image)
                            <img src="{{ $course->image}}" class="img-fluid rounded" >
                        @else
                            <p class="fw-bold mb-1 text-dark">อัปโหลดรูปภาพหรือลากวาง</p>
                            <div class="text-muted small">
                                ไฟล์ที่รองรับ : PNG,JPEG<br>
                                ขนาดแนะนำ : 1000x200 px<br>
                                ขนาดไฟล์สูงสุด : 100KB
                            </div>
                        @endif
                    </label>
                </div>
            </div>

            <div class="col-md-6">
                <div class="mb-3">
                    <input type="text" name="name" value="{{ $course->name }}" class="form-control input-light" placeholder="ชื่อคอร์ส" required>
                </div>

                <div class="mb-3">
                    <select name="category_id" class="form-select input-light" required>
                        <option value="">เลือกหมวดหมู่</option>
                        @foreach($categories as $cat)
                            <option value="{{ $cat->id }}" {{ $course->category_id == $cat->id ? 'selected' : '' }}>{{ $cat->name }}</option>
                        @endforeach
                    </select>
                </div>

                 <!-- Icon row -->
           <div class="d-flex align-items-center gap-4 mb-2 text-muted">
                <div><i class="fa fa-calendar-alt me-2"></i> <span id="lessonCount">-</span> Lessons</div>
                <div><i class="fa fa-clock me-2"></i> <span id="totalDuration">-</span></div>
            </div>
                <!-- <div class="mb-3">
                    <input type="number" step="0.01" name="price" id="hiddenPrice" class="d-none" value="{{ $course->price }}">
                </div> -->
                   <div class="d-flex justify-content-between align-items-center mb-3">
        <div id="priceDisplay" class="fw-bold fs-4 text-primary">
            {{ number_format($course->price, 2) }} บาท
        </div>
        <a href="#" data-bs-toggle="modal" data-bs-target="#priceModal" class="text-primary fw-bold">
            <i class="fa fa-edit me-1"></i>แก้ไขราคา
        </a>
    </div>

                <button type="submit" class="btn btn-primary w-100">อัปเดตคอร์ส</button>
            </div>
        </div>

        <div class="section-header">ผู้สอน</div>
        <div class="d-flex align-items-center mb-4">
            <img src="{{ $teacher->avatar ?? '/img/avatar.png' }}" class="avatar me-3" alt="Avatar">
            <strong>{{ $teacher->name ?? 'ไม่ระบุชื่อ' }}</strong>
        </div>

        <div class="section-header">รายละเอียดหลักสูตร</div>
        <textarea name="description" class="form-control mb-4" rows="5">{{ $course->description }}</textarea>

       <!-- เนื้อหาในคอร์ส -->
        <div class="d-flex justify-content-between align-items-center mb-3">
            <h5 class="section-header" style="border-left: 3px solid #007bff; padding-left: 10px;">
                เนื้อหาในคอร์ส
            </h5>
            <a href="#" class="text-primary d-flex align-items-center"
            id="editCourseBtn" data-bs-toggle="modal" data-bs-target="#courseContentModal">
                <i class="fas fa-pen me-1"></i> แก้ไขเนื้อหาในคอร์ส
                <i class="fas fa-chevron-down ms-2"></i>
            </a>
        </div>

       <div id="courseContentList" class="accordion" id="accordionLessons">
            <!-- dynamic content จะถูกเพิ่มที่นี่ -->
        </div>
       
    </form>
</div>

<div class="modal fade" id="priceModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-lg">
    <div class="modal-content p-4">
      <div class="modal-header border-0">
        <h5 class="modal-title fw-bold text-primary">แก้ไขราคา</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>

      <div class="modal-body">

        <!-- Price Input -->
        <div class="mb-4">
          <label class="fw-bold mb-2">ราคาขาย (บาท)</label>
          <input type="number" step="0.01" id="priceInput" class="form-control" value="{{ number_format($course->price, 2) }}">
        </div>

        <hr class="my-4">

        <!-- Split Table -->
        <div class="row g-3">
          <!-- Left side: Percent -->
          <div class="col-md-6">
            <label class="form-label fw-bold">ส่วนแบ่งแพลตฟอร์ม (%)</label>
            <input type="number" id="platformPercent" class="form-control" value="0">
            
            <label class="form-label fw-bold mt-3">ส่วนแบ่งผู้สอน (%)</label>
            <input type="number" id="teacherPercent" class="form-control" value="0">

            <label class="form-label fw-bold mt-3">Payment Gateway (%)</label>
            <input type="number" id="gatewayPercent" class="form-control" value="0">
          </div>

          <!-- Right side: Amount -->
          <div class="col-md-6">
            <label class="form-label fw-bold">ส่วนแบ่งแพลตฟอร์ม (บาท)</label>
            <input type="text" id="platformAmount" class="form-control" readonly>

            <label class="form-label fw-bold mt-3">ส่วนแบ่งผู้สอน (บาท)</label>
            <input type="text" id="teacherAmount" class="form-control" readonly>

            <label class="form-label fw-bold mt-3">Payment Gateway (บาท)</label>
            <input type="text" id="gatewayAmount" class="form-control" readonly>
          </div>
        </div>

      </div>

      <div class="modal-footer border-0 mt-4">
        <button class="btn btn-outline-secondary px-4" data-bs-dismiss="modal">ยกเลิก</button>
        <button class="btn btn-primary px-4" data-bs-dismiss="modal" onclick="savePrice()">ตกลง</button>
      </div>
    </div>
  </div>
</div>

<!-- ✅ Modal หลัก -->
<div class="modal fade" id="courseContentModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="courseContentModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">

      <div class="modal-header">
        <h5 class="modal-title" id="courseContentModalLabel">แก้ไขเนื้อหาในคอร์ส</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="ปิด"></button>
      </div>

      <div class="modal-body">
        <div id="lessonContainer" class="sortable-lessons">
          <!-- เริ่มต้นตัวอย่างบทเรียน -->
          <div class="card mb-3 lesson-item">
            <div class="card-header lesson-header d-flex justify-content-between align-items-center">
              <input type="text" class="form-control form-control-sm w-75 lesson-title-input" placeholder="กรอกชื่อบทเรียน">
              <button class="btn btn-sm btn-outline-primary" data-bs-toggle="collapse" data-bs-target="#lesson1Content">แสดง/ซ่อน</button>
                
            </div>

            <div id="lesson1Content" class="collapse show">
              <div class="card-body">
                <div class="video-list mb-2">
                  <div class="video-item mb-2">
                    {{-- <input type="text" class="form-control mb-1" placeholder="ชื่อลิงก์วิดีโอหรืออัปโหลดไฟล์"> --}}
                  </div>
                </div>
                <!-- ปุ่มเปิด Offcanvas -->
                <button type="button" class="btn btn-sm btn-secondary add-video-btn" data-bs-toggle="offcanvas" data-bs-target="#videoLibrary">
                  + เพิ่มวิดีโอ
                </button>
              </div>
            </div>
          </div>
        </div>

        <!-- ปุ่มเพิ่มบทเรียน -->
        <button id="addLessonBtn" class="btn btn-light w-100 mt-3">+ เพิ่มบทเรียน</button>
      </div>

      <div class="modal-footer">
        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">ยกเลิก</button>
        <button type="button" class="btn btn-primary" id="saveLessonsBtn">ตกลง</button>
      </div>

    </div>
  </div>
</div>

<!-- ✅ Offcanvas อยู่ "นอก" Modal -->
<div class="offcanvas offcanvas-end" tabindex="-1" id="videoLibrary" aria-labelledby="videoLibraryLabel">
  <div class="offcanvas-header">
    <h5 id="videoLibraryLabel">จัดการวิดีโอ</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    
    <ul class="nav nav-tabs mb-3" id="videoTab" role="tablist">
      <li class="nav-item" role="presentation">
        <button class="nav-link active" id="library-tab" data-bs-toggle="tab" data-bs-target="#libraryTab" type="button">เลือกจากคลัง</button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="upload-tab" data-bs-toggle="tab" data-bs-target="#uploadTab" type="button">อัปโหลดวิดีโอ</button>
      </li>
    </ul>

    <div class="tab-content" id="videoTabContent">
      <!-- Tab: เลือกจากคลัง -->
      <div class="tab-pane fade show active" id="libraryTab" role="tabpanel">
        <div class="list-group" id="videoListGroup"></div>
      </div>

      <!-- Tab: อัปโหลดวิดีโอ -->
        <div class="tab-pane fade" id="uploadTab" role="tabpanel">
        <form id="videoForm" enctype="multipart/form-data" method="POST">
            <input type="hidden" name="video_id" id="video_id">

            <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">รูปหน้าปก</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">เลือกไฟล์วิดีโอ</label>
            <input type="file" class="form-control" id="videoFile" name="videoFile" accept="video/*">
            </div>

            <div class="mb-3">
            <label class="form-label text-primary mb-2"><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_type" 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_type" 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>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
document.addEventListener("DOMContentLoaded", function () {
  const token = localStorage.getItem("token");
  const videoForm = document.getElementById("videoForm");
  const titleInput = document.getElementById("title");
  const videoFileInput = document.getElementById("videoFile");

  // Autofill title จากชื่อไฟล์
  videoFileInput.addEventListener("change", function () {
    const file = this.files[0];
    if (file && !titleInput.value.trim()) {
      const fileName = file.name.replace(/\.[^/.]+$/, "");
      titleInput.value = fileName;
    }
  });

  function getVideoDuration(file) {
    return new Promise((resolve, reject) => {
      const video = document.createElement('video');
      video.preload = 'metadata';
      video.onloadedmetadata = () => {
        window.URL.revokeObjectURL(video.src);
        resolve(Math.round(video.duration));
      };
      video.onerror = () => reject("ไม่สามารถอ่านความยาววิดีโอได้");
      video.src = URL.createObjectURL(file);
    });
  }

  videoForm.addEventListener("submit", async function (e) {
    e.preventDefault();

    const title = titleInput.value.trim();
    const description = document.getElementById("description").value.trim();
    const permission = document.querySelector('input[name="permission_type"]:checked');
    const videoFile = videoFileInput.files[0];

    if (!title || !description || !permission || !videoFile) {
      Swal.fire("กรุณากรอกข้อมูลให้ครบ", "", "warning");
      return;
    }

    const formData = new FormData();
    formData.append("video_name", title);
    formData.append("video_description", description);
    formData.append("permission_type", permission.value);
    formData.append("video_file", videoFile);

    try {
      const duration = await getVideoDuration(videoFile);
      formData.append("video_duration", duration.toString());
      formData.append("video_size", videoFile.size.toString());
    } catch (err) {
      Swal.fire("Error", err, "error");
      return;
    }

    const coverImage = document.getElementById("cover_image").files[0];
    if (coverImage) {
      formData.append("file_cover_img_name", coverImage);
    }

    Swal.fire({ title: "กำลังอัปโหลด...", allowOutsideClick: false, didOpen: () => Swal.showLoading() });

    try {
      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("สำเร็จ", "อัปโหลดวิดีโอเรียบร้อยแล้ว", "success").then(() => location.reload());
      } else {
        throw new Error(result.status.errorMessage || "เกิดข้อผิดพลาด");
      }
    } catch (err) {
      console.error(err);
      Swal.fire("Error", err.message || "ไม่สามารถอัปโหลดได้", "error");
    }
  });
});
</script>

<script>
    document.getElementById("coverImageInput").addEventListener("change", function (e) {
        const file = e.target.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = function (e) {
                document.querySelector("label[for='coverImageInput']").innerHTML = `<img src="${e.target.result}" class="img-fluid rounded" style="max-height:200px;">`;
            };
            reader.readAsDataURL(file);
        }
    });

    const API_BASE_URL = "{{ env('APP_URL') }}/api";
    document.getElementById('courseForm').addEventListener('submit', async function (e) {
        e.preventDefault();

        const form = e.target;
        const formData = new FormData(form);
        const courseId = {{ $course->id }};
        
        
        // Add modal price values
        formData.append('price', document.getElementById('priceInput').value);
        formData.append('platform_percent', document.getElementById('platformPercent').value);
        formData.append('teacher_percent', document.getElementById('teacherPercent').value);
        formData.append('gateway_percent', document.getElementById('gatewayPercent').value);

        try {
            const response = await fetch(`${API_BASE_URL}/course/${courseId}`, {
                method: 'POST',
                headers: { 'Accept': 'application/json' },
                body: formData
            });

            const result = await response.json();

            if (response.ok) {
                alert('✅ อัปเดตคอร์สเรียบร้อยแล้ว!');
                window.location.href = '{{ env("APP_URL") }}/courses';
            } else {
                alert('❌ เกิดข้อผิดพลาด: ' + (result.message || 'ไม่สามารถอัปเดตคอร์สได้'));
            }
        } catch (error) {
            console.error('Error:', error);
            alert('❌ ไม่สามารถเชื่อมต่อกับเซิร์ฟเวอร์');
        }
    });
    function updateAmounts() {
        const price = parseFloat(document.getElementById("priceInput").value || 0);
        const platform = parseFloat(document.getElementById("platformPercent").value || 0);
        const teacher = parseFloat(document.getElementById("teacherPercent").value || 0);
        const gateway = parseFloat(document.getElementById("gatewayPercent").value || 0);

        document.getElementById("platformAmount").value = (price * platform / 100).toFixed(2);
        document.getElementById("teacherAmount").value = (price * teacher / 100).toFixed(2);
        document.getElementById("gatewayAmount").value = (price * gateway / 100).toFixed(2);
    }

    ["priceInput", "platformPercent", "teacherPercent", "gatewayPercent"].forEach(id => {
        document.getElementById(id).addEventListener("input", updateAmounts);
    });

    function savePrice() {
        const newPrice = document.getElementById("priceInput").value;
        document.getElementById("priceDisplay").textContent = parseFloat(newPrice).toFixed(2) + " บาท";
    }
</script>
<script>
document.addEventListener("DOMContentLoaded", function () {
    const token = localStorage.getItem("token");
    const courseId = {{ $course->id }};

    fetch(`{{ env('APP_URL') }}/api/course/${courseId}/lessons`, {
        headers: {
            "Authorization": `Bearer ${token}`
        }
    })
    .then(res => res.json())
    .then(data => {
        if (data.status === 'success') {
            const container = document.getElementById('courseContentList');
            container.innerHTML = '';

            let totalSeconds = 0;
            const lessonCount = data.data.length;

            data.data.forEach((lesson, index) => {
                const lessonId = `lessonCollapse${lesson.id}`;
                const epTitle = lesson.title || `Ep.${index + 1}`;

                const videoHTML = lesson.videos.map(video => {
                const sizeMB = (video.size / (1024 * 1024)).toFixed(2);
                const streamUrl = `{{ url('/video/stream') }}/${video.video_id}`;
                
                // รวมเวลาทั้งหมด
                let durationText = '0:00';
                if (video.duration) {
                    const [min, sec] = video.duration.split(':').map(n => parseInt(n));
                    totalSeconds += (min * 60 + (sec || 0));
                    durationText = `${min}:${sec.toString().padStart(2, '0')}`;
                }

                return `
                    <div class="d-flex mb-4">
                        <video controls width="200" height="120" preload="none" class="rounded me-3" style="object-fit: cover;">
                            <source src="${streamUrl}" type="video/mp4">
                            Your browser does not support the video tag.
                        </video>
                        <div>
                            <h6 class="mb-1 text-primary">ชื่อวิดิโอ: ${video.title}</h6>
                            <p class="text-muted mb-1">เนื้อหาวิดิโอ: ${video.video_description || ''}</p>
                            <p class="text-muted"><i class="fas fa-clock me-1"></i> ความยาว: ${durationText}</p>
                        </div>
                    </div>
                `;
            }).join('');


                let lessonTotalSeconds = 0;
                lesson.videos.forEach(v => {
                    if (v.duration) {
                        const [min, sec] = v.duration.split(':').map(n => parseInt(n));
                        lessonTotalSeconds += (min * 60 + (sec || 0));
                    }
                });

                const lessonMinutes = Math.floor(lessonTotalSeconds / 60);
                const lessonSeconds = lessonTotalSeconds % 60;
                const totalTime = `${lessonMinutes}:${lessonSeconds.toString().padStart(2, '0')}`;

                const isOpen = index < 2 ? 'show' : '';

                const itemHTML = `
                    <div class="accordion-item mb-2 border-bottom">
                        <h2 class="accordion-header">
                            <button class="accordion-button d-flex justify-content-between align-items-center collapsed" 
                                    type="button" data-bs-toggle="collapse" data-bs-target="#${lessonId}">
                                <div class="flex-grow-1">ชื่อบทเรียน: ${epTitle}</div>
                                <div class="text-primary">
                                    <i class="fas fa-clock me-1"></i> ${totalTime}
                                </div>
                            </button>
                        </h2>
                        <div id="${lessonId}" class="accordion-collapse collapse ${isOpen}">
                            <div class="accordion-body pt-2">
                                ${videoHTML || `<p class="text-muted">ไม่มีวิดีโอในบทเรียนนี้</p>`}
                            </div>
                        </div>
                    </div>
                `;

                container.insertAdjacentHTML('beforeend', itemHTML);
            });

            // ✅ แสดงผลรวม
            const hours = Math.floor(totalSeconds / 3600);
            const minutes = Math.floor((totalSeconds % 3600) / 60);

            document.getElementById('lessonCount').textContent = lessonCount;
            let timeDisplay = '';
            if (hours > 0) {
                timeDisplay = `${hours}h`;
                if (minutes > 0) timeDisplay += ` ${minutes}m`;
            } else {
                timeDisplay = `${minutes}m`;
            }
            document.getElementById('totalDuration').textContent = timeDisplay;
                hours > 0 ? `${hours}h ${minutes}m` : `${minutes}m`;
        } else {
            document.getElementById('courseContentList').innerHTML = '<p>❌ ไม่พบข้อมูลบทเรียน</p>';
        }
    })
    .catch(err => {
        console.error("Error loading lessons", err);
        document.getElementById('courseContentList').innerHTML = '<p>❌ เกิดข้อผิดพลาดในการโหลดข้อมูล</p>';
    });
});
</script>

<script>
let lessonCount = 1;
let activeLessonBody = null;
const lessonsData = [];

// โหลดวิดีโอจาก API
document.addEventListener("DOMContentLoaded", function () {
    const token = localStorage.getItem("token");
    const courseId = {{ $course->id }};
    document.getElementById("saveLessonsBtn").addEventListener("click", function () {
        saveLessonsToServer(courseId);
    });
    fetch("{{ env('APP_URL') }}/api/videos_user", {
        headers: {
            "Authorization": `Bearer ${token}`
        }
    })
    .then(response => response.json())
    .then(res => {
        if (res.status.statusType === "S") {
            const listGroup = document.getElementById("videoListGroup");
            res.data.forEach(video => {
                const sizeMB = (video.video_size / (1024 * 1024)).toFixed(2);

                const item = document.createElement("div");
                item.className = "list-group-item list-group-item-action d-flex gap-3 align-items-start video-select";
                item.setAttribute("data-id", video.id); // ใส่ id ด้วย
                item.setAttribute("data-name", video.video_name);
                item.setAttribute("data-description", video.video_description);
                item.setAttribute("data-url", video.videoUrl);
                item.setAttribute("data-duration", video.duration);
                item.setAttribute("data-size", video.video_size);
                item.setAttribute("data-image", video.image_cover_path);

                item.innerHTML = `
                    <img src="{{ env('APP_URL') }}/storage/${video.image_cover_path}" alt="cover" width="100" height="60" class="rounded">
                    <div class="flex-grow-1">
                        <h6 class="mb-1">ชื่อวิดิโอ: ${video.video_name}</h6>
                        <div class="text-muted small">
                            ความยาว: ${video.duration} | ขนาด: ${sizeMB} MB
                        </div>
                    </div>
                `;

                listGroup.appendChild(item);
            });
        } else {
            alert("ไม่พบข้อมูลวิดีโอ");
        }
    })
    .catch(err => {
        console.error("API Error", err);
        alert("เกิดข้อผิดพลาดในการโหลดข้อมูล");
    });

    initSortable(); // โหลด sortable
});

// จดจำตำแหน่งที่กำลังเพิ่มวิดีโอ
document.addEventListener('click', function (e) {
    if (e.target && e.target.classList.contains('add-video-btn')) {
        activeLessonBody = e.target.closest('.card-body');
    }
});

// เลือกวิดีโอจากรายการ
document.getElementById('videoListGroup').addEventListener('click', function (e) {
    const target = e.target.closest('.video-select');
    if (!target || !this.contains(target)) return;

    if (activeLessonBody) {
        const name = target.getAttribute('data-name');
        const description = target.getAttribute('data-description');
        const duration = target.getAttribute('data-duration');
        const size = parseInt(target.getAttribute('data-size'));
        const image = target.getAttribute('data-image');
        const videoId = target.getAttribute('data-id');
        const sizeMB = (size / (1024 * 1024)).toFixed(2);

        const newVideoItem = document.createElement('div');
        newVideoItem.classList.add('video-item', 'mb-2', 'd-flex', 'align-items-center', 'gap-2');
        newVideoItem.setAttribute('data-id', videoId); // ✅ ต้องมี data-id

        newVideoItem.innerHTML = `
            <div class="d-flex gap-3 align-items-start flex-grow-1">
                <img src="{{ env('APP_URL') }}/storage/${image}" alt="${name}" width="100" height="60" class="rounded">
                <div>
                    <h6 class="mb-1">${name}</h6>
                    <p class="mb-1 small text-muted">${description}</p>
                    <div class="text-muted small">ความยาว: ${duration} | ขนาด: ${sizeMB} MB</div>
                </div>
            </div>
            <button type="button" class="btn btn-sm btn-outline-danger btn-delete-video" title="ลบวิดีโอ">
                🗑️
            </button>
        `;
        activeLessonBody.querySelector('.video-list').appendChild(newVideoItem);

        const lessonCard = activeLessonBody.closest('.lesson-item');
        const collapseId = lessonCard.querySelector('.collapse').id;
        const lesson = lessonsData.find(l => l.id === collapseId);
        if (lesson) {
            lesson.videos.push({
                video_id: parseInt(videoId),
                title: name,
                description: description
            });
        }

        bootstrap.Offcanvas.getInstance(document.getElementById('videoLibrary')).hide();
    }
});

// ✅ ลบวิดีโอจากรายการและอัปเดต lessonsData
document.addEventListener('click', function (e) {
    if (e.target.classList.contains('btn-delete-video')) {
        const videoItem = e.target.closest('.video-item');
        const lessonCard = videoItem.closest('.lesson-item');
        const collapseId = lessonCard.querySelector('.collapse').id;
        const lesson = lessonsData.find(l => l.id === collapseId);

        const videoId = videoItem.getAttribute('data-id');

        if (lesson && videoId) {
            lesson.videos = lesson.videos.filter(v => String(v.video_id) !== String(videoId));
        }

        if (videoItem) videoItem.remove();
    }
});

// เพิ่มบทเรียนใหม่
document.getElementById('addLessonBtn').addEventListener('click', function () {
    lessonCount++;
    const lessonId = `lesson${lessonCount}Content`;
    const lessonHTML = `
        <div class="card mb-3 lesson-item">
            <div class="card-header lesson-header d-flex justify-content-between align-items-center">
                <input type="text" class="form-control form-control-sm w-75 lesson-title-input" placeholder="กรอกชื่อบทเรียน">
                <button class="btn btn-sm btn-outline-primary" data-bs-toggle="collapse" data-bs-target="#${lessonId}">
                    แสดง/ซ่อน
                </button>
            </div>
            <div id="${lessonId}" class="collapse show">
                <div class="card-body">
                    <div class="video-list mb-2"></div>
                    <button type="button" class="btn btn-sm btn-secondary add-video-btn" data-bs-toggle="offcanvas" data-bs-target="#videoLibrary">
                        + เพิ่มวิดีโอ
                    </button>
                </div>
            </div>
        </div>
    `;
    document.getElementById('lessonContainer').insertAdjacentHTML('beforeend', lessonHTML);
    lessonsData.push({
        id: lessonId,
        title: '',
        videos: []
    });
    initSortable();
});

// อัปเดตชื่อบทเรียนใน lessonsData
document.addEventListener('input', function (e) {
    if (e.target.classList.contains('lesson-title-input')) {
        const lessonCard = e.target.closest('.lesson-item');
        const collapseId = lessonCard.querySelector('.collapse').id;
        const lesson = lessonsData.find(l => l.id === collapseId);
        if (lesson) {
            lesson.title = e.target.value;
        }
    }
});

// เพิ่มชื่อวิดีโอแบบ manual
document.getElementById('uploadForm').addEventListener('submit', function (e) {
    e.preventDefault();
    const title = document.getElementById('videoTitle').value.trim();
    if (title && activeLessonBody) {
        const videoList = activeLessonBody.querySelector('.video-list');
        const newVideoItem = document.createElement('div');
        newVideoItem.classList.add('video-item', 'mb-2');
        newVideoItem.innerHTML = `<input type="text" class="form-control mb-1" value="${title}">`;
        videoList.appendChild(newVideoItem);

        // ใส่ใน lessonsData ถ้าต้องการ
        const lessonCard = activeLessonBody.closest('.lesson-item');
        const collapseId = lessonCard.querySelector('.collapse').id;
        const lesson = lessonsData.find(l => l.id === collapseId);
        if (lesson) {
            lesson.videos.push({ video_id: null, title: title, description: '' });
        }

        bootstrap.Offcanvas.getInstance(document.getElementById('videoLibrary')).hide();
        document.getElementById('uploadForm').reset();
    }
});

// เรียงลำดับบทเรียน
function initSortable() {
    new Sortable(document.getElementById("lessonContainer"), {
        animation: 150,
        handle: ".lesson-header",
        ghostClass: "sortable-ghost"
    });
}
document.addEventListener("click", function (e) {
    if (e.target.closest('.btn-delete-lesson')) {
        const btn = e.target.closest('.btn-delete-lesson');
        const card = btn.closest('.lesson-item');
        const lessonId = card.getAttribute('data-lesson-id');

        Swal.fire({
            title: 'ลบบทเรียน?',
            text: 'คุณแน่ใจหรือไม่ว่าต้องการลบบทเรียนนี้',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: 'ใช่, ลบเลย',
            cancelButtonText: 'ยกเลิก'
        }).then((result) => {
            if (result.isConfirmed) {
                // ✅ ลบ DOM
                card.remove();

                // ✅ ลบจาก lessonsData
                const index = lessonsData.findIndex(l => l.lesson_id == lessonId);
                if (index !== -1) {
                    lessonsData.splice(index, 1);
                }

                // ✅ ไม่ต้องส่งอะไรเพิ่ม ตอน save ระบบจะลบให้เอง
            }
        });
    }
});
// ตัวอย่างฟังก์ชันส่งข้อมูลไป backend
function saveLessonsToServer(courseId) {
    const token = localStorage.getItem("token");
    const lessonElements = document.querySelectorAll('.lesson-item');

    const lessons = Array.from(lessonElements).map(lessonEl => {
        const lessonId = lessonEl.getAttribute('data-lesson-id');
        const title = lessonEl.querySelector('.lesson-title-input')?.value.trim() || '';

        const lessonDisableBtn = lessonEl.querySelector('.toggle-lesson-visibility');
        const lessonDisable = lessonDisableBtn ? parseInt(lessonDisableBtn.dataset.visible) : 0;

        const videoItems = lessonEl.querySelectorAll('.video-item');
        const videos = Array.from(videoItems).map(videoItem => {
            const name = videoItem.querySelector('h6')?.textContent.trim();
            const description = videoItem.querySelector('p')?.textContent.trim();
            const videoId = videoItem.getAttribute('data-id');

            const videoDisableBtn = videoItem.querySelector('.toggle-video-visibility');
            const disable = videoDisableBtn ? parseInt(videoDisableBtn.dataset.visible) : 0;

            return {
                video_id: videoId || null,
                title: name,
                description: description,
                disable: disable
            };
        }).filter(video => video.video_id !== null);

        return {
            lesson_id: lessonId || null,
            title: title,
            disable: lessonDisable,
            videos: videos
        };
    });

    console.log("📦 lessons ready to save:", lessons);

    fetch("{{ env('APP_URL') }}/api/save-lessons", {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
            "Authorization": `Bearer ${token}`
        },
        body: JSON.stringify({
            course_id: courseId,
            lessons: lessons
        })
    })
    .then(response => response.json())
    .then(data => {
        console.log("✅ Saved:", data);
        alert("✅ บันทึกสำเร็จ");
        location.reload();
        bootstrap.Modal.getInstance(document.getElementById('courseContentModal')).hide();
    })
    .catch(err => {
        console.error("❌ Save failed:", err);
        alert("❌ เกิดข้อผิดพลาด: " + err.message);
    });
}

</script>
<script>
function initVisibilityToggles() {
    document.querySelectorAll('.toggle-lesson-visibility').forEach(button => {
        button.addEventListener('click', function () {
            const icon = this.querySelector('i');
            const current = parseInt(this.dataset.visible);
            const newVal = current === 1 ? 0 : 1;
            this.dataset.visible = newVal;
            icon.className = newVal === 0 ? 'fas fa-eye' : 'fas fa-eye-slash'; // ✅ ถูกต้อง
        });
    });

    document.querySelectorAll('.toggle-video-visibility').forEach(button => {
        button.addEventListener('click', function () {
            const icon = this.querySelector('i');
            const current = parseInt(this.dataset.visible);
            const newVal = current === 1 ? 0 : 1;
            this.dataset.visible = newVal;
            icon.className = newVal === 0 ? 'fas fa-eye' : 'fas fa-eye-slash'; // ✅ ถูกต้อง
        });
    });
}


document.getElementById('editCourseBtn').addEventListener('click', function () {
    const token = localStorage.getItem("token");
    const courseId = {{ $course->id }};
    const lessonContainer = document.getElementById("lessonContainer");

    // เคลียร์บทเรียนก่อน
    lessonContainer.innerHTML = "";
    lessonsData.length = 0;

    fetch(`{{ env('APP_URL') }}/api/course/${courseId}/lessons`, {
        headers: { "Authorization": `Bearer ${token}` }
    })
    .then(res => res.json())
    .then(data => {
        if (data.status === 'success') {
            data.data.forEach((lesson, index) => {
                const lessonId = `lesson${index + 1}Content`;
                const lessonHTML = `
                    <div class="card mb-3 lesson-item" data-lesson-id="${lesson.id || ''}">
                        <div class="card-header lesson-header d-flex justify-content-between align-items-center">
                            <input type="text" class="form-control form-control-sm w-75 lesson-title-input" value="${lesson.title}" placeholder="กรอกชื่อบทเรียน">
                            <div class="d-flex gap-2 align-items-center">
                                <button class="btn btn-sm toggle-lesson-visibility" data-visible="${lesson.disable === 0 ? 0 : 1}">
                                    <i class="fas ${lesson.disable === 0 ? 'fa-eye' : 'fa-eye-slash'}"></i>
                                </button>
                                <button class="btn btn-sm btn-outline-primary" data-bs-toggle="collapse" data-bs-target="#${lessonId}">
                                    แสดง/ซ่อน
                                </button>
                                <button class="btn btn-sm btn-outline-danger btn-delete-lesson" title="ลบบทเรียนนี้">
                                    🗑️
                                </button>
                            </div>
                        </div>
                        <div id="${lessonId}" class="collapse show">
                            <div class="card-body">
                                <div class="video-list mb-2">
                                    ${lesson.videos.map(video => `
                                        <div class="video-item mb-2 d-flex align-items-center gap-2" data-id="${video.video_id}">
                                            <div class="d-flex gap-3 align-items-start flex-grow-1">
                                                <img src="{{ env('APP_URL') }}/storage/${video.image_cover_path}" alt="${video.title}" width="100" height="60" class="rounded">
                                                <div>
                                                    <h6 class="mb-1">${video.title}</h6>
                                                    <p class="mb-1 small text-muted">${video.video_description}</p>
                                                    <div class="text-muted small">ความยาว: ${video.duration} | ขนาด: ${(video.size / (1024 * 1024)).toFixed(2)} MB</div>
                                                </div>
                                            </div>
                                            <button class="btn btn-sm toggle-video-visibility" data-visible="${video.disable === 0 ? 0 : 1}">
                                                เลือกเป็นวิดิโอตัวอย่าง <i class="fas ${video.disable === 0 ? 'fa-eye' : 'fa-eye-slash'}"></i>
                                            </button>
                                            <button type="button" class="btn btn-sm btn-outline-danger btn-delete-video" title="ลบวิดีโอ">
                                                🗑️
                                            </button>
                                        </div>
                                    `).join('')}
                                </div>
                                <button type="button" class="btn btn-sm btn-secondary add-video-btn" data-bs-toggle="offcanvas" data-bs-target="#videoLibrary">
                                    + เพิ่มวิดีโอ
                                </button>
                            </div>
                        </div>
                    </div>
                `;
                lessonContainer.insertAdjacentHTML('beforeend', lessonHTML);

                lessonsData.push({
                    id: lessonId,
                    lesson_id: lesson.id,
                    title: lesson.title,
                    disable: lesson.disable ?? 0,
                    videos: lesson.videos.map((v) => ({
                        lesson_video_id: v.lesson_video_id || null,
                        video_id: v.video_id,
                        title: v.title,
                        description: v.video_description,
                        disable: v.disable ?? 0
                    }))
                });

                lessonCount = index + 1;
            });

            initSortable();       // ✅ Sortable
            initVisibilityToggles(); // ✅ ปุ่มตา 👁️
        } else {
            alert("❌ โหลดบทเรียนไม่สำเร็จ");
        }
    })
    .catch(err => {
        console.error("❌ Failed to load lessons:", err);
        alert("❌ เกิดข้อผิดพลาดในการโหลดบทเรียน");
    });
});
</script>

<script>
    
document.addEventListener("DOMContentLoaded", function () {
    const videoEl = document.getElementById("videoPlayer");

    document.querySelectorAll('.video-thumbnail-wrapper').forEach(el => {
        el.addEventListener("click", async function () {
            const videoId = this.getAttribute("data-video-id");
            const storageKey = `videoTime_${videoId}`;
            const videoUrl = `{{ url('/video/stream/') }}/${videoId}`; // ใช้ route()

            try {
                const response = await fetch(videoUrl);
                if (!response.ok) throw new Error("โหลดวิดีโอล้มเหลว");

                const blob = await response.blob();
                const objectUrl = URL.createObjectURL(blob);

                // เล่นวิดีโอใหม่
                videoEl.src = objectUrl;
                videoEl.load();
                videoEl.play();

                // Revoke object URL หลังโหลด
                videoEl.addEventListener("loadeddata", () => {
                    setTimeout(() => URL.revokeObjectURL(objectUrl), 1000);
                });

                // กลับมาดูเวลาที่เคยดูไว้
                videoEl.addEventListener("loadedmetadata", () => {
                    const savedTime = sessionStorage.getItem(storageKey);
                    if (savedTime) {
                        videoEl.currentTime = parseFloat(savedTime);
                    }
                });

                videoEl.addEventListener("timeupdate", () => {
                    sessionStorage.setItem(storageKey, videoEl.currentTime);
                });

                videoEl.addEventListener("ended", () => {
                    sessionStorage.removeItem(storageKey);
                });

            } catch (err) {
                console.error("❌ Error loading video:", err);
            }
        });
    });
});
</script>
@endsection