@extends('layoutsteacher.layouts')
@section('title', 'คอร์ส')
<style>
    /* Container styling */
.container {
    max-width: 1000px;
    margin: auto;
    background: #fff;
    border-radius: 16px;
    padding: 40px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

/* Table */
.table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 12px;
    font-size: 16px;
    color: #3c3c3c;
}

.table th {
    font-weight: 600;
    color: #0D1B4C;
    font-size: 15px;
    background: none;
    border: none;
    padding-bottom: 12px;
}

.table td {
    background-color: #fff;
    padding: 16px 12px;
    vertical-align: middle;
    border-top: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
    font-size: 15px;
    color: #5a5a89;
}

.table tr {
    transition: background 0.2s;
}

.table tr:hover td {
    /* background-color: #f9faff; */
}

/* Pagination */
.pagination .page-link {
    background-color: #00b0ff;
    border: none;
    color: white;
    border-radius: 12px;
    padding: 6px 16px;
    font-weight: 500;
}

.pagination .page-item.active .page-link,
.pagination .page-link:hover {
    background-color: #0091cc;
    color: white;
}

/* Button: เพิ่มคอร์ส */
.btn-primary {
    background-color: #00b0ff !important;
    border: none;
    padding: 10px 24px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 16px;
}

.btn-primary:hover {
    background-color: #0091cc !important;
}

/* Visibility icons */
.fa-eye,
.fa-eye-slash {
    font-size: 18px;
    cursor: pointer;
    transition: 0.2s;
}

.fa-eye.text-primary {
    color: #00b0ff;
}

.fa-eye-slash.text-muted {
    color: #ccc;
}

/* Action dropdown */
.dropdown-menu {
    font-size: 14px;
    border-radius: 8px;
    padding: 8px 0;
}

.dropdown-menu .dropdown-item {
    padding: 8px 16px;
    color: #3c3c3c;
}

.dropdown-menu .dropdown-item:hover {
    background-color: #f1f9ff;
    color: #007bff;
}

</style>
@section('content')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

<div class="container px-4 py-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h4 class="fw-bold text-dark mb-0">คอร์ส</h4>
        <a href="{{ route('courses.create') }}" class="btn btn-primary rounded px-4">เพิ่มคอร์ส</a>
    </div>

    <div class="card border-0 rounded-4">
        <div class="card-body p-0">
            <table class="table table-borderless align-middle mb-0">
                <thead class="text-secondary border-bottom">
                    <tr>
                        <th class="ps-4">แสดงผล</th>
                        <th>คอร์ส</th>
                        <th>หมวดหมู่</th>
                        <th>ราคา</th>
                        <th>ผู้เข้าเรียน</th>
                        <th class="text-end pe-4">จัดการ</th>
                    </tr>
                </thead>
                <tbody>
                    @if($courses->isEmpty())
                        <tr>
                            <td colspan="5" class="text-center text-muted py-5">
                                ไม่มีคอร์สในระบบขณะนี้
                            </td>
                        </tr>
                    @else
                        @foreach($courses as $course)
                            <tr class="border-bottom">
                                <td class="ps-4">
                                    <a href="javascript:void(0);" onclick="toggleVisibility({{ $course->id }}, this)">
                                        @if($course->visible)
                                            <i class="fa fa-eye text-primary fs-5"></i>
                                        @else
                                            <i class="fa fa-eye-slash text-muted fs-5"></i>
                                        @endif
                                    </a>
                                </td>
                                <td>{{ $course->name }}</td>
                                <td>{{ $course->category->name ?? '-' }}</td>
                                <td>{{ number_format($course->price, 2) }}</td>
                                <td class="student-count" style="cursor:pointer; text-decoration:none;" data-course-id="{{ $course->id }}">-</td>
                                <td class="text-end pe-4">
                                    <div class="dropdown">
                                        <button class="btn btn-sm btn-light rounded-circle" type="button" data-bs-toggle="dropdown">
                                            <i class="fa fa-ellipsis-v"></i>
                                        </button>
                                        <ul class="dropdown-menu dropdown-menu-end">
                                            <a class="dropdown-item" href="{{ route('courses.edit', $course->id) }}">แก้ไข</a>
                                            <li>
                                                <a href="#" class="dropdown-item openAddStudentModalBtn" data-course-id="{{ $course->id }}">
                                                    เพิ่มผู้เข้าเรียน
                                                </a>
                                            </li>
                                            <li><a class="dropdown-item text-danger" href="javascript:void(0);" onclick="confirmDelete({{ $course->id }})">ลบ</a></li>
                                            
                                        </ul>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    @endif
                </tbody>
            </table>
        </div>

        @if(!$courses->isEmpty())
            <div class="card-footer bg-white border-0 py-3">
                <div class="d-flex justify-content-center">
                    {{ $courses->links() }}
                </div>
            </div>
        @endif
    </div>
</div>
<div class="modal fade" id="addStudentModal" tabindex="-1" aria-labelledby="addStudentLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg"> <!-- use modal-lg for wider -->
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="addStudentLabel">ผู้เข้าเรียน</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">

        <table class="table">
          <thead>
            <tr>
              <th>ชื่อ-นามสกุล</th>
              <th>อีเมล์</th>
              <th>จัดการ</th>
            </tr>
          </thead>
          <tbody id="studentTableBody"></tbody>

            <tr>
            <td colspan="3">
                <div class="d-flex">
                <select id="studentSelect" class="form-select me-3" style="max-width: 300px;">
                    <option selected disabled>เลือกรายชื่อ</option>
                    <!-- filled dynamically -->
                </select>
                <button type="button" class="btn btn-outline-primary" id="addStudentBtn">เพิ่ม</button>
                </div>
            </td>
            </tr>

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

<meta name="csrf-token" content="{{ csrf_token() }}">

@endsection

@section('scripts')
<script>
    const API_BASE_URL = "{{ env('APP_URL') }}/api";
function toggleVisibility(courseId, el) {
    fetch(`${API_BASE_URL}/course/${courseId}/toggle-visibility`, {
        method: 'POST',
        headers: {
            // 'X-CSRF-TOKEN': '{{ csrf_token() }}',
            'Accept': 'application/json',
        }
    })
    .then(res => res.json())
    .then(data => {
        const icon = el.querySelector('i');
        if (data.visible) {
            icon.classList.remove('fa-eye-slash', 'text-muted');
            icon.classList.add('fa-eye', 'text-primary');
        } else {
            icon.classList.remove('fa-eye', 'text-primary');
            icon.classList.add('fa-eye-slash', 'text-muted');
        }
    });
}

function confirmDelete(courseId) {
    if (confirm("คุณแน่ใจหรือไม่ว่าต้องการลบคอร์สนี้?")) {
        fetch(`${API_BASE_URL}/course/${courseId}`, {
            method: 'DELETE',
            headers: {
                // 'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Accept': 'application/json',
            }
        })
        .then(res => res.json())
        .then(data => {
            if (data.status === 'deleted') {
                location.reload();
            }
        });
    }
}
</script>
<script>
document.addEventListener('DOMContentLoaded', () => {
  const token = localStorage.getItem('token');

  const studentSelect = document.getElementById('studentSelect');
  const studentTableBody = document.getElementById('studentTableBody');
  const addStudentBtn = document.getElementById('addStudentBtn');
  const enrollConfirmBtn = document.getElementById('enrollConfirmBtn');
  const modalElement = document.getElementById('addStudentModal');
  const modal = new bootstrap.Modal(modalElement);

  let courseId = null; // course id ปัจจุบันที่แก้ไข
  let enrolledStudents = [];
  let allStudents = [];
  let addStudentIds = [];
  let removeStudentIds = [];

  function clearTable() {
    studentTableBody.innerHTML = '';
  }

  // โหลดนักเรียนทั้งหมดจาก API
  function loadAllStudents() {
    return fetch(`{{ env('APP_URL') }}/api/students-enroll`, {
      headers: { 'Authorization': `Bearer ${token}` }
    })
    .then(res => res.json())
    .then(data => {
      if (data.status === 'success') {
        allStudents = data.data;
        return allStudents;
      } else {
        throw new Error('ไม่สามารถโหลดรายชื่อนักเรียนได้');
      }
    });
  }

  // โหลดนักเรียนที่ลงคอร์สจาก API
  function loadEnrolledStudents() {
    return fetch(`{{ env('APP_URL') }}/api/course/${courseId}/students`, {
      headers: { 'Authorization': `Bearer ${token}` }
    })
    .then(res => res.json())
    .then(data => {
      if (data.status === 'success') {
        enrolledStudents = data.data;
        return enrolledStudents;
      } else {
        throw new Error('ไม่สามารถโหลดข้อมูลผู้เรียนได้');
      }
    });
  }
  document.querySelectorAll('.openAddStudentModalBtn').forEach(link => {
    link.addEventListener('click', async (e) => {
      e.preventDefault(); // ป้องกัน default href="#"

      courseId = link.getAttribute('data-course-id');
      if (!courseId) {
        alert('ไม่พบข้อมูลคอร์ส');
        return;
      }

      try {
        await Promise.all([loadAllStudents(), loadEnrolledStudents()]);

        clearTable();
        addStudentIds = [];
        removeStudentIds = [];

        studentSelect.innerHTML = '<option selected disabled>เลือกรายชื่อ</option>';
        const enrolledIds = enrolledStudents.map(s => s.id);
        allStudents.forEach(student => {
          if (!enrolledIds.includes(student.id)) {
            const option = document.createElement('option');
            option.value = student.id;
            option.textContent = `${student.firstname} ${student.lastname}`;
            studentSelect.appendChild(option);
          }
        });

        studentSelect.style.display = 'inline-block';
        addStudentBtn.style.display = 'inline-block';

        enrolledStudents.forEach(student => {
          const tr = document.createElement('tr');
          tr.innerHTML = `
            <td>${student.firstname} ${student.lastname}</td>
            <td>${student.email || '-'}</td>
            <td><i class="fas fa-trash-alt text-danger delete-student" style="cursor:pointer;" data-id="${student.id}"></i></td>
          `;
          studentTableBody.appendChild(tr);
        });

        modal.show();
      } catch (error) {
        alert(error.message || 'เกิดข้อผิดพลาดในการโหลดข้อมูล');
      }
    });
  });
  // แสดง modal สำหรับเพิ่ม/ลบ นักเรียน
  async function showEditModal(selectedCourseId) {
    if (!selectedCourseId) {
      alert('ไม่พบข้อมูลคอร์ส');
      return;
    }

    courseId = selectedCourseId;

    try {
      await Promise.all([loadAllStudents(), loadEnrolledStudents()]);

      clearTable();
      addStudentIds = [];
      removeStudentIds = [];

      // สร้าง dropdown โดยตัดนักเรียนที่ลงคอร์สแล้วออก
      studentSelect.innerHTML = '<option selected disabled>เลือกรายชื่อ</option>';
      const enrolledIds = enrolledStudents.map(s => s.id);
      allStudents.forEach(student => {
        if (!enrolledIds.includes(student.id)) {
          const option = document.createElement('option');
          option.value = student.id;
          option.textContent = `${student.firstname} ${student.lastname}`;
          studentSelect.appendChild(option);
        }
      });

      studentSelect.style.display = 'inline-block';
      addStudentBtn.style.display = 'inline-block';

      // แสดงนักเรียนที่ลงคอร์สในตาราง (พร้อมปุ่มลบ)
      enrolledStudents.forEach(student => {
        const tr = document.createElement('tr');
        tr.innerHTML = `
          <td>${student.firstname} ${student.lastname}</td>
          <td>${student.email || '-'}</td>
          <td><i class="fas fa-trash-alt text-danger delete-student" style="cursor:pointer;" data-id="${student.id}"></i></td>
        `;
        studentTableBody.appendChild(tr);
      });

      modal.show();

    } catch (error) {
      alert(error.message || 'เกิดข้อผิดพลาดในการโหลดข้อมูล');
    }
  }

  // ดัก event คลิกจำนวนผู้เรียน (สำหรับหลาย element)
  document.querySelectorAll('.student-count').forEach(element => {
    element.addEventListener('click', e => {
      e.preventDefault();
      const selectedCourseId = element.getAttribute('data-course-id');
      showEditModal(selectedCourseId);
    });
  });

  // ปุ่มเพิ่มนักเรียนจาก dropdown
  addStudentBtn.addEventListener('click', () => {
    const selectedId = studentSelect.value;
    if (!selectedId) return;
    if (addStudentIds.includes(selectedId)) return;

    const student = allStudents.find(s => s.id == selectedId);
    if (!student) return;

    addStudentIds.push(selectedId);

    const tr = document.createElement('tr');
    tr.innerHTML = `
      <td>${student.firstname} ${student.lastname}</td>
      <td>${student.email || '-'}</td>
      <td><i class="fas fa-trash-alt text-danger delete-student" style="cursor:pointer;" data-id="${student.id}"></i></td>
    `;
    studentTableBody.appendChild(tr);

    const optionToRemove = studentSelect.querySelector(`option[value="${selectedId}"]`);
    if(optionToRemove) optionToRemove.remove();

    studentSelect.value = '';
  });

  // ลบนักเรียนจากตาราง
  studentTableBody.addEventListener('click', e => {
    if (!e.target.classList.contains('delete-student')) return;

    const id = e.target.getAttribute('data-id');
    e.target.closest('tr').remove();

    if (addStudentIds.includes(id)) {
      addStudentIds = addStudentIds.filter(sid => sid != id);

      const student = allStudents.find(s => s.id == id);
      if (student) {
        const option = document.createElement('option');
        option.value = student.id;
        option.textContent = `${student.firstname} ${student.lastname}`;
        studentSelect.appendChild(option);
      }
    } else {
      if (!removeStudentIds.includes(id)) removeStudentIds.push(id);
    }
  });
// enrollConfirmBtn.disabled = true;
  // บันทึกการเพิ่ม-ลบ นักเรียน
  enrollConfirmBtn.addEventListener('click', () => {
    if (!courseId) {
      alert('ไม่พบข้อมูลคอร์ส');
      return;
    }

    fetch('{{ env('APP_URL') }}/api/courses/update-students', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${token}`,
      },
      body: JSON.stringify({
        course_id: courseId,
        add_student_ids: addStudentIds,
        remove_student_ids: removeStudentIds,
      }),
    })
    .then(res => res.json())
.then(data => {
  // enrollConfirmBtn.disabled = false;
  if (data.status === 'success') {
    alert('อัปเดตผู้เรียนเรียบร้อยแล้ว');
    modal.hide();
    updateAllStudentCounts();
  } else {
    alert('เกิดข้อผิดพลาด: ' + data.message);
  }
})
.catch(() => {
  enrollConfirmBtn.disabled = false;
  alert('เกิดข้อผิดพลาดในการบันทึกข้อมูล');
});
});
  // อัปเดตจำนวนผู้เรียนบนหน้า (อาจต้องแก้ให้รองรับหลาย course ถ้ามี)
  function updateAllStudentCounts() {
  const courseIds = Array.from(document.querySelectorAll('.student-count'))
    .map(el => el.getAttribute('data-course-id'))
    .filter(id => !!id);

  if (courseIds.length === 0) return;

  fetch(`{{ env('APP_URL') }}/api/courses/students/count`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${token}`,
    },
    body: JSON.stringify({ course_ids: courseIds }),
  })
  .then(res => res.json())
  .then(data => {
    if (data.status === 'success' && data.data) {
      Object.entries(data.data).forEach(([cid, count]) => {
        const elements = document.querySelectorAll(`.student-count[data-course-id="${cid}"]`);
        elements.forEach(el => el.textContent = count);
      });
    }
  })
  .catch(() => {});
}

  // โหลดจำนวนผู้เรียนของทุกคอร์สที่มี .student-count ตอนเปิดหน้า
  updateAllStudentCounts();
  let updateTimeout;
  function delayedUpdateStudentCount(courseId) {
    clearTimeout(updateTimeout);
    updateTimeout = setTimeout(() => {
      updateStudentCount(courseId);
    }, 500); // 0.5 วินาที
  }
});
</script>
{{-- <script>
  document.addEventListener('DOMContentLoaded', function() {
    const courseId = {{ $course->id }}; // ดึงจากตัวแปร PHP

    fetch(`{{ env('APP_URL') }}/api/course/${courseId}/students/count`, {
    headers: {
        'Authorization': `Bearer ${token}`, // ถ้า API ใช้ Bearer token
        'Accept': 'application/json'
    }
    })
    .then(response => {
    if (!response.ok) throw new Error('Network response was not ok');
    return response.json();
    })
    .then(data => {
    document.getElementById('student-count').textContent = data.student_count ?? '-';
    })
    .catch(error => {
    console.error('Error fetching student count:', error);
    });
});
</script> --}}


@endsection