@extends('layout')
@section('content')
{{-- <div class="training-courses-detail-page">
    <div class="container py-5">
        <div>
            <img src="{{ asset('images/training-detail-banner.png') }}" alt="article" class="img-fluid">
        </div>
        <div class="card custom-card my-5 p-5">
            @foreach ($trainingCoursesItems[0]['course'] as $course)
                <div class="row mb-4 g-5 border-bottom pb-4 sub-course-item">
                    <div class="col-md-3">
                        @php
                            $image = isset($course['image']) ? $course['image'] : $trainingCoursesItems[0]['image'];
                        @endphp
                        <img src="{{ asset($image) }}" alt="article" class="img-fluid">
                    </div>
                    <div class="col">
                        <h2>{{ $course['title'] }}</h2>
                        <p class="text-gray">
                            <img src="{{ asset('icon/time.svg') }}" alt="time" class="img-fluid me-2">
                            {{ $course['date'] }}
                        </p>
                        <p>
                            <img src="{{ asset('icon/play-course.svg') }}" alt="play" class="img-fluid me-2">
                            <a href="#">คลิ๊กที่นี่</a>
                        </p>
                        <p>
                            <img src="{{ asset('icon/zoom.svg') }}" alt="zoom" class="img-fluid me-2">
                            <a href="#">คลิ๊กที่นี่</a>
                        </p>
                        <p>
                            <img src="{{ asset('icon/detail.svg') }}" alt="details" class="img-fluid me-2">
                            <a href="#">คลิ๊กที่นี่</a>
                        </p>
                    </div>
                    <div class="col-auto">
                        <p class="text-blue">
                            <img src="{{ asset('icon/time-blue.svg') }}" alt="time" class="img-fluid">
                            {{ $course['duration'] }}
                        </p>
                    </div>
                </div>
            @endforeach
        </div>
        <div class="related-courses-container mt-5">
            <h2>หลักสูตรฝึกอบรมและบทความ ที่แนะนำ</h2>
            <div class="row g-4">
                @foreach ($relatedtrain as $relatedCourse)
                    <div class="col-md-6 col-sm-6 col-lg-3">
                        <a href="{{ ('training-courses-detail') }}" class="card-link"> --}}
                            {{-- <a href="{{ route('training_courses.detail', ['id' => $relatedCourse['id']]) }}" class="card-link"> --}}

                            {{-- <div class="card-container">
                                <img src="{{ asset('storage/'.$relatedCourse['file_cover_img_name']) }}" alt="news" class="img-fluid">
                                <h3 class="text-truncate">{{ $relatedCourse['title'] }}</h3>
                                <p class="mb-2">{{ $relatedCourse['description'] }}</p>
                                <div class="card-footer">
                                    <div class="avatar small-rounded">
                                        <img src="{{ asset($relatedCourse['avatar']) }}" alt="avatar" class="img-fluid">
                                    </div>
                                    <div>
                                        <h4>{{ $relatedCourse['create_by'] }}</h4>
                                        <p>{{ \Carbon\Carbon::parse($relatedCourse['create_time'])->format('d/m/Y') }}</p>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
</div> --}}
<div class="training-courses-detail-page">
  <div class="container py-5">
      <div id="main-banner" class="w-100">
          {{-- <img src="/images/training-detail-banner.png" alt="Training Banner" class="img-fluid"> --}}
      </div>
      <div class="card custom-card my-5 p-5" id="course-details">
          Loading...
      </div>
      <div class="related-courses-container mt-5">
          <h2>หลักสูตรฝึกอบรม ที่แนะนำ</h2>
          <div class="row g-4">
            @foreach ($relatedtrain as $relatedCourse)
                <div class="col-md-6 col-sm-6 col-lg-3">
                    {{-- <a href="{{ ('training-courses-detail?id=${item.id}') }}" class="card-link">  --}}
                        <a href="{{ ('training-courses-detail?id='.$relatedCourse['id']) }}" class="card-link">
                       <div class="card-container">
                            <img src="{{ asset('storage/'.$relatedCourse['file_cover_img_name']) }}" alt="news" class="img-fluid">
                            <h3 class="text-truncate">{{ $relatedCourse['title'] }}</h3>
                            <p class="mb-2">{{ $relatedCourse['description'] }}</p>
                            <div class="card-footer">
                                <div class="avatar small-rounded">
                                    <img src="{{ asset('storage/'.$relatedCourse['file_cover_img_name']) }}" alt="avatar" class="img-fluid">
                                </div>
                                <div>
                                    <h4>{{ $relatedCourse['create_by'] }}</h4>
                                    <p>{{ \Carbon\Carbon::parse($relatedCourse['create_time'])->format('d/m/Y') }}</p>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
            @endforeach
        </div>
      </div>
  </div>
</div>
<script>
  document.addEventListener('DOMContentLoaded', () => {
    const urlParams = new URLSearchParams(window.location.search);
    const id = urlParams.get('id');

    if (!id) {
        alert('No course ID provided!');
        return;
    }

    const apiUrl = "{{env('APP_URL')}}/api/contents/" + id;

    // Fetch main course details
    fetch(apiUrl)
        .then(response => response.json())
        .then(data => {
            if (data.status.statusType === "S") {
                const course = data.data;
                console.log(course);

                // Populate the page with course details
                const mainBannerElement = document.getElementById("main-banner");
                const courseDetailsElement = document.getElementById("course-details");

                // Set main banner image
                mainBannerElement.innerHTML = `
                    <img src="{{ env('APP_URL') }}/storage/${course.file_cover_img_name}" alt="course-banner" class="img-fluid w-100">
                `;

                // Set course details
                courseDetailsElement.innerHTML = `
                    <div class="row mb-4 g-5 border-bottom pb-4 sub-course-item">
                        <div class="col-md-3">
                            <img src="{{ env('APP_URL') }}/storage/${course.file_cover_img_name}" alt="course-thumbnail" class="img-fluid">
                        </div>
                        <div class="col">
                            <h2>${course.title}</h2>
                            <p class="text-gray">
                                <img src="/icon/time.svg" alt="time" class="img-fluid me-2">
                                ${new Date(course.create_time).toLocaleDateString("th-TH")}
                            </p>
                            <p>
                                <img src="/icon/detail.svg" alt="details" class="img-fluid me-2">
                                รายละเอียด: ${course.description || "ไม่มีคำอธิบาย"}
                            </p>
                        </div>
                        <div class="col-auto">
                            <p class="text-blue">
                                <img src="/icon/time-blue.svg" alt="duration" class="img-fluid">
                                ${course.duration || 1} ชั่วโมง
                            </p>
                        </div>
                    </div>
                `;

                // Handle gallery images
                const galleryImages = JSON.parse(course.images || "[]");
                if (galleryImages.length > 0) {
                    const mainImageElement = document.getElementById("main-image");
                    mainImageElement.src = `{{ env('APP_URL') }}/storage/${galleryImages[0]}`;
                    renderGallery(galleryImages);
                }else{
                    mainImageElement.src = `{{ env('APP_URL') }}/storage/${course.file_cover_img_name}`;
                }

                // Helper function to render gallery thumbnails
                function renderGallery(images) {
                    const galleryContainer = document.getElementById("gallery-images");
                    galleryContainer.innerHTML = "";

                    images.forEach((image, index) => {
                        const thumbnail = document.createElement("img");
                        thumbnail.src = `{{ env('APP_URL') }}/storage/${image}`;
                        thumbnail.className = "img-thumbnail";
                        thumbnail.alt = `Gallery Image ${index + 1}`;
                        thumbnail.addEventListener("click", () => {
                            const mainImageElement = document.getElementById("main-image");
                            mainImageElement.src = `{{ env('APP_URL') }}/storage/${image}`;
                        });
                        galleryContainer.appendChild(thumbnail);
                    });
                }

                // Render course description
                const descriptionElement = document.getElementById("course-description");
                descriptionElement.innerHTML = course.description.replace(/\t/g, "&emsp;");
            } else {
                throw new Error('Failed to fetch course details.');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Failed to load training course details. Please try again.');
        });
});

// Format date utility
function formatDate(dateString) {
    const date = new Date(dateString);
    return date.toLocaleDateString();
}

</script>
@endsection