@extends('layoutstudent.layouts')
@section('title', 'Home')

@section('content')
<div class="container" style="max-width:100%; padding-right: unset; padding-left: unset; background-color: #F4FFFF;">
    
   <div class="container my-5">
  <div class="d-flex justify-content-between align-items-center mb-4">
    <h4 class="fw-bold mb-4" style="font-size: 34px;">"My Courses"</h4>
    <div>
      <a href="#" class="text-decoration-none me-3">See All</a>
      <div class="btn-group" id="paginationLinks"></div>
    </div>
  </div>
  <div id="coursesContainer">
    <div class="row row-cols-1 row-cols-md-4 g-4" id="courseCardsRow">
      <!-- cards จะถูกเพิ่มที่นี่โดย JS -->
    </div>
  </div>
</div>
    <!-- Footer -->
    <footer class="py-4" style="background-color:rgb(255, 255, 255);">
        <div class="container">
            <div class="row text-center text-md-start">
                <div class="col-md-4 mb-4 pt-4">
                    <h6 class="fw-bold">เกี่ยวกับเรา</h6>
                    <ul class="list-unstyled">
                        <li><a href="#" class="text-decoration-none text-dark">สอนกับเรา</a></li>
                        <li><a href="#" class="text-decoration-none text-dark">Privacy Policy</a></li>
                        <li><a href="#" class="text-decoration-none text-dark">Terms and Conditions</a></li>
                        <li><a href="#" class="text-decoration-none text-dark">Data Protection Policy</a></li>
                        <li><a href="#" class="text-decoration-none text-dark">Cookie Policy</a></li>
                    </ul>
                </div>
                <div class="col-md-4 mb-4 pt-4">
                    <h6 class="fw-bold">ช่องทางการติดต่อ</h6>
                     <div class="mb-2">
                        <a href="#" class="me-2 text-warning"><i class="bi bi-facebook fs-5"></i></a>
                        <a href="#" class="me-2 text-warning"><i class="bi bi-messenger fs-5"></i></a>
                        <a href="#" class="me-2 text-warning"><i class="bi bi-twitter fs-5"></i></a>
                        <a href="#" class="me-2 text-warning"><i class="bi bi-youtube fs-5"></i></a>
                        <a href="#" class="me-2 text-warning"><i class="bi bi-envelope-fill fs-5"></i></a>
                    </div>
                    <p class="mb-0">ที่อยู่ บ้านเลขที่ 111/150 ต.บางพูด</p>
                    <p>อ.ปากเกร็ด จ.นนทบุรี</p>
                </div>
                <div class="col-md-4 d-flex flex-column align-items-center justify-content-center">
                    <img src="{{ asset('images/acdemouslogo.png') }}" style="width: 200px; height: 200px;">
                    <strong class="pt-2">ชื่อ บริษัท</strong>
                </div>
            </div>
        </div>
    </footer>

</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
    const wrapper = document.getElementById('video_preview_wrapper');
    const playerWrapper = document.getElementById('videoPlayerWrapper');
    const video = document.getElementById('videoPreview');

    if (wrapper && playerWrapper && video) {
        wrapper.addEventListener('click', function () {
            wrapper.classList.add('d-none');
            playerWrapper.classList.remove('d-none');
            video.play();
        });
    }
});
document.addEventListener('click', function (e) {
    const target = e.target.closest('a.page-link');
    const link = e.target.closest('.pagination a');

    const courseBox = e.target.closest('.course-box[data-slot]');
    if (courseBox) {
        selectedSlot = courseBox.getAttribute('data-slot');
        console.log('Selected slot set to:', selectedSlot);
    }
    if (link) {
        e.preventDefault();
        fetch(link.href, {
            headers: {
                'X-Requested-With': 'XMLHttpRequest'
            }
        })
        .then(response => response.text())
        .then(html => {
            const tempDom = document.createElement('div');
            tempDom.innerHTML = html;

            const newCourses = tempDom.querySelector('#coursesContainer');
            const newPagination = tempDom.querySelector('#paginationLinks');

            document.getElementById('coursesContainer').innerHTML = newCourses.innerHTML;
            document.getElementById('paginationLinks').innerHTML = newPagination.innerHTML;

            window.history.pushState({}, '', link.href);
        });
    }
});
</script>
<script>
  async function loadCourses() {
  try {
    const token = localStorage.getItem('token'); // หรือวิธีอื่นที่เก็บ token ไว้

    const res = await fetch('{{ env('APP_URL') }}/api/my-courses', {
      headers: {
        'Authorization': 'Bearer ' + token,
        'Accept': 'application/json',
      }
    });

    if (!res.ok) throw new Error('HTTP error ' + res.status);

    const data = await res.json();

    if (data.status === 'success' && data.data.length > 0) {
      const container = document.getElementById('courseCardsRow');
      container.innerHTML = ''; // ล้างของเก่า

      data.data.forEach(course => {
            const cardHtml = `
            <div class="col px-3">
                <div class="card h-100" style="border: unset; cursor: pointer;" onclick="window.location.href='{{ env('APP_URL') }}/student/course/${course.id}/detail'">
                <img src="${course.image}" class="card-img-top" alt="${course.name}">
                <div class="card-body">
                    
                    <h6 class="card-title mt-1">${course.name}</h6>
                    <p class="card-text text-muted small">${course.description.substring(0, 60)}</p>
                    <div class="d-flex align-items-center text-success small mb-2">
                    <span>5.00</span>
                    <span class="text-warning mx-1">★ ★ ★ ★ ★</span>
                    <span class="text-muted">(2,000)</span>
                    </div>
                    <div class="d-flex justify-content-between align-items-center">
                    <div class="d-flex align-items-center">
                        <img src="/images/avatar.jpg" class="rounded-circle me-2" width="30" height="30">
                        <small>${course.teacher_name}<br><span class="text-muted">1 Enrolled</span></small>
                    </div>
                    <span class="fw-bold text-success">${Number(course.price).toFixed(2)}</span>
                    </div>
                </div>
                </div>
            </div>
            `;
            container.insertAdjacentHTML('beforeend', cardHtml);
        });


      // ส่วน pagination ถ้ามี ลองเติมที่นี่ได้
      // document.getElementById('paginationLinks').innerHTML = '...';
    } else {
      document.getElementById('coursesContainer').innerHTML = '<p>No courses found.</p>';
    }
  } catch (error) {
    console.error('Error loading courses:', error);
    document.getElementById('coursesContainer').innerHTML = '<p>Error loading courses.</p>';
  }
}
window.onload = loadCourses;

</script>
@endsection