@extends('layoutstudent.layouts')
@section('title', 'All Course')

@section('content')
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/css/bootstrap.min.css" rel="stylesheet">
    <!-- FontAwesome v6 -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
<!-- Font Awesome CDN -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet">
<!-- <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Thai&display=swap" rel="stylesheet"> -->
    <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Thai:wght@400&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Kanit:wght@500&display=swap" rel="stylesheet">
    <!-- Google Fonts: Poppins -->
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Prompt&display=swap" rel="stylesheet">
    <style>
        .ranking-badge {
            width: 60px;
            height: auto;
            z-index: 10;
        }
        .course-box {
            min-height: 400px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background-color: #E8E8E8 !important;
        }
        .p-unset {
            padding: unset;
        }

        .ranking-badge {
            width: 60px;
            height: auto;
            z-index: 10;
        }

        .course-box {
            min-height: 400px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background-color: #E8E8E8 !important;
        }

        .custom-link-style {
            font-family: 'IBM Plex Sans Thai', sans-serif;
            font-weight: 400;
            line-height: 24px;
            letter-spacing: 0;
            text-decoration: underline;
            text-decoration-style: solid;
            text-decoration-offset: 0;
            text-decoration-thickness: 1px;
        }

        .text-gray {
            color: #3A3A3A;
        }

        .text-gray a,
        .text-gray i {
            color: #3A3A3A;
        }

        .fs-8 { font-size: 8px; }
        .fs-12 { font-size: 12px; }
        .fs-14 { font-size: 14px; }
        .fs-16 { font-size: 16px; }
        .fs-18 { font-size: 18px; }
        .fs-20 { font-size: 20px; }
        .fs-22 { font-size: 22px; }
        .fs-24 { font-size: 24px; }
        .fs-26 { font-size: 26px; }
        .fs-28 { font-size: 28px; }
        .fs-30 { font-size: 30px; }
        .fs-32 { font-size: 32px; }
        .fs-34 { font-size: 34px; }
        .fs-36 { font-size: 36px; }
        .fs-38 { font-size: 38px; }
        .fs-40 { font-size: 40px; }
        .fs-48 { font-size: 48px; }

        .kanit-500 {
            font-family: 'Kanit', sans-serif;
            font-weight: 500;
            line-height: 24px;
            letter-spacing: 0;
        }

        .poppins-700 {
            font-family: 'Poppins',"Prompt", sans-serif;
            font-weight: 700;
            line-height: 100%;
            letter-spacing: 0;
        }

        .poppins-600 {
            font-family: 'Poppins',"Prompt", sans-serif;
            font-weight: 500;
            line-height: 100%;
            letter-spacing: 0;
        }

        .poppins-500 {
            font-family: 'Poppins',"Prompt", sans-serif;
            font-weight: 500;
            line-height: 100%;
            letter-spacing: 0;
        }

        .vertical-flex {
            display: flex;
            flex-direction: column;
        }

        .icon-box {
            width: 50px;
            height: 50px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            border-radius: 50%;
            background-color: #f8f9fa;
            transition: background-color 0.3s;

            i {
                font-size: 30px;
                transition: color 0.3s;
            }

            &:hover {
                background-color: #ffc107;

                i {
                    color: #f8f9fa;
                }
            }
        }

        .conteainer-w {
            max-width: 1296px;
        }

        .recommendImg {
            min-height: 400px;
            "

        }
        .carousel-indicators.custom-dots {
    bottom: 100px;
    justify-content: center;
    align-items: center;
    gap: 10px;
}
.carousel-indicators.custom-dots button {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: white;
    opacity: 1;
    border: none;
    transition: background-color 0.3s ease;
}
.carousel-indicators.custom-dots button.active {
    background-color: #3399ff; /* blue active dot */
    width: 20px;
    height: 20px;
}
.search-input-wrapper {
            position: relative; /* Needed for absolute positioning of the icon */
            width: 100%;
        }
        .search-input-wrapper input {
            padding-right: 2.5rem; /* Make space for the icon */
            border-radius: 0.25rem; /* Ensure input itself is rounded */
        }
        .search-input-wrapper .search-icon {
            position: absolute;
            right: 1rem; /* Position from the right edge */
            top: 50%;
            transform: translateY(-50%); /* Vertically center the icon */
            color: #6c757d; /* Grey color for the icon */
            pointer-events: none; /* Allow clicks to pass through to the input if needed */
            z-index: 2; /* Ensure icon is above input */
        }
        @media (min-width: 992px) {

            .pl-lg-5-25rem {
                padding-left: 5.25rem !important;
            }

            .recommendImg {
                min-height: 700px;
                "

            }
        }

        @media (min-width: 1540px) {
            .conteainer-w {
                max-width: 1700px;
            }
        }
        #heroCarousel .carousel-item {
        height: 800px; /* หรือ 600px แล้วแต่ดีไซน์ที่ต้องการ */
        position: relative;
        }

        #heroCarousel img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        }
    </style>
</head>
<body>
<div class="container" style="max-width:100%; padding-right: unset; padding-left: unset; background-color: #F4FFFF;">
    <!-- Hero Section with Slider -->
<div class="position-relative">

    <!-- Carousel -->
    <div id="heroCarousel" class="carousel slide" data-bs-ride="carousel" data-bs-interval="2000">
    <div class="carousel-inner" id="carouselInner"></div>

    <div class="carousel-indicators custom-dots" id="carouselIndicators"></div>
    </div>

    <div class="position-absolute start-50 translate-middle-x"
    style="bottom: -80px; z-index: 3; width: 90%; max-width: 1000px;">
    
    <div class="bg-white shadow rounded px-5 py-5 d-flex flex-column gap-3">

        <!-- หัวข้อ All Courses -->
        <div class="text-center mb-3">
            <h4 class="poppins-700 fs-30 m-0" id="courseTitle">หมวดหมู่ทั้งหมด</h4>
        </div>

        <!-- กล่องค้นหาและ dropdown filter -->
        <div class="d-flex flex-column flex-md-row gap-3 align-items-center justify-content-between">
            
            <!-- Search Input -->
            <div style="flex: 0 0 70%;">
                <div class="search-input-wrapper position-relative">
                    <input type="text" id="courseSearchInput" class="form-control"
                        placeholder="ค้นหาด้วยชื่อคอร์ส หัวข้อ หรือชื่อผู้สอน" aria-label="Search input">
                    <i class="fas fa-search search-icon position-absolute"
                        style="right: 10px; top: 50%; transform: translateY(-50%); color: #888;"></i>
                </div>
            </div>

            <!-- Dropdown Select -->
            <div style="flex: 0 0 30%;">
                <select class="form-select" id="categoryFilter">
                    <option value="">เลือกหมวดหมู่/แสดงทั้งหมด</option>
                </select>
            </div>
            
        </div>
    </div>
</div>


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

<div class="container-fluid mt-5 px-3 px-sm-5 my-5 py-5">
    <div class="mx-auto w-100 conteainer-w">
        <div id="coursesContainer">
            <div class="row row-cols-1 row-cols-md-2 row-cols-lg-4 g-5" id="courseRow">
                <!-- คอร์สจะถูกเพิ่มโดย JS -->
            </div>
        </div>
    </div>
</div>
     <!-- All Courses -->
{{-- <div class="container-fluid mt-5 px-3 px-sm-5 my-5 py-5">
    <div class="mx-auto w-100 conteainer-w">
        <div class="d-flex justify-content-center align-items-center mb-4">
            <h4 class="poppins-700 fs-34 mb-4">"New Courses for you"</h4>
        </div>
        <div id="coursesContainer">
            <div class="row row-cols-1 row-cols-md-2 row-cols-lg-4 g-5">
                <!-- Mock courses data -->
                @for($i = 0; $i < 4; $i++)
                <div class="col px-3">
                    <div class="card h-100" style="border: unset;">
                        <img src="https://placehold.co/375x200" class="card-img-top" alt="Course Image">
                        <div class="card-body">
                            <small class="poppins-700 fs-14" style="color:#02166C;">Category Name</small>
                            <h6 class="poppins-700 fs-20">Course Name</h6>
                            <p class="text-muted poppins-500 fs-16" style="height: 80px; color:#7A8189;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae nunc eu nisi hendrerit fermentum.</p>
                            <div class="d-flex align-items-center text-success small mb-2">
                                <span class="poppins-500 fs-16">5.00</span>
                                <span class="text-warning mx-1">★ ★ ★ ★ ★</span>
                                <span class="text-muted poppins-500 fs-8">(2,000)</span>
                            </div>
                            <div class="d-flex justify-content-between align-items-center">
                                <div class="d-flex align-items-center text-start">
                                    <img src="https://placehold.co/30x30" class="rounded-circle me-2 object-fit-cover" width="30" height="30">
                                    <small class="poppins-700 fs-14" style="color:#4C5257;">Teacher Name<br><span class="poppins-500 fs-12" style="color:#7A8189;">1 Enrolled</span></small>
                                </div>
                                <span class="text-success poppins-700 fs-20">$99.99</span>
                            </div>
                        </div>
                    </div>
                </div>
                @endfor
            </div>
        </div>
    </div>
</div>
<br/>

 <!-- Recommended Course -->
        <div class="container-fluid mt-5 px-3 px-sm-5">
            <div class="mx-auto w-100 conteainer-w">
                <h3 class="text-center poppins-700 fs-34">"Recommended Courses You Can't Miss!"</h3>
                <p class="text-center text-muted mb-5"
                    style=" font-weight: 500; font-size: 34px; line-height: 100%; letter-spacing: 0%;">New Skills with
                    Experts</p>

                <div class="w-100 border rounded">
                    @if (true)
                    <div class="w-100 position-relative overflow-hidden rounded recommendImg" style="background-image: url('{{ asset($recommendedCourse->image ?? 'default.jpg') }}');
                            background-size: cover;
                            background-position: center;
                            ">
                        
                        <!-- mock up -->
                         <div class="w-100 position-relative overflow-hidden rounded recommendImg"
    style="background-image: url('https://placehold.co/800x400?text=Course+Image'); background-size: cover; background-position: center;">
    <div class="position-absolute top-0 start-0 h-100 d-flex justify-content-center align-items-center"
        style="width: 50%; background-color: rgba(0,0,0,0.5); z-index: 1; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);">
        <div class="text-white text-center px-4" style="z-index: 2; max-width: 90%;">
            <span class="badge bg-white text-dark mb-2 rounded-pill px-3 py-2 shadow-sm">
                <strong>Recommended</strong>
            </span>
            <h3 class="mb-4 poppins-700 fs-48">Mock Course Title</h3>
            <p class="text-white-50 poppins-500 fs-16">
                This is a short mock description for the recommended course. Learn something amazing today!
            </p>
            <a href="#" class="btn btn-info mt-3 poppins-600 fs-20"
                style="width: 220px; padding: 15px; color:#FFFFFF;">
                Register Now
            </a>
        </div>
    </div>
    <div class="position-absolute bottom-0 end-0 m-3 bg-dark text-white rounded-pill px-3 py-1">
        Dr. John Doe
    </div>
</div>

<!-- mock -->
                    </div>
                    @else
                    <div class="d-flex align-items-center justify-content-center bg-light text-muted text-center"
                        style="min-height: 300px;">
                        <span>ไม่มีคอร์สที่แสดง</span>
                    </div>
                    @endif
                </div>
            </div>
        </div>
<br/>

 <!-- All Courses -->
<div class="container-fluid mt-5 px-3 px-sm-5 my-5">
    <div class="mx-auto w-100 conteainer-w">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h4 class="poppins-700 fs-34 mb-4">"All Courses"</h4>
            <div>
                <a href="#" class="text-decoration-none me-3">See All</a>

                <div class="btn-group">
                    <div id="paginationLinks">
                        <!-- Mock pagination links -->
                        <a href="#">1</a>
                        <a href="#">2</a>
                        <a href="#">3</a>
                    </div>
                </div>
            </div>
        </div>
        <div id="coursesContainer">
            <div class="row row-cols-1 row-cols-md-2 row-cols-lg-4 g-5">
                <!-- Mock courses data -->
                @for($i = 0; $i < 4; $i++)
                <div class="col px-3">
                    <div class="card h-100" style="border: unset;">
                        <img src="https://placehold.co/375x200" class="card-img-top" alt="Course Image">
                        <div class="card-body">
                            <small class="poppins-700 fs-14" style="color:#02166C;">Category Name</small>
                            <h6 class="poppins-700 fs-20">Course Name</h6>
                            <p class="text-muted poppins-500 fs-16" style="height: 80px; color:#7A8189;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae nunc eu nisi hendrerit fermentum.</p>
                            <div class="d-flex align-items-center text-success small mb-2">
                                <span class="poppins-500 fs-16">5.00</span>
                                <span class="text-warning mx-1">★ ★ ★ ★ ★</span>
                                <span class="text-muted poppins-500 fs-8">(2,000)</span>
                            </div>
                            <div class="d-flex justify-content-between align-items-center">
                                <div class="d-flex align-items-center text-start">
                                    <img src="https://placehold.co/30x30" class="rounded-circle me-2 object-fit-cover" width="30" height="30">
                                    <small class="poppins-700 fs-14" style="color:#4C5257;">Teacher Name<br><span class="poppins-500 fs-12" style="color:#7A8189;">1 Enrolled</span></small>
                                </div>
                                <span class="text-success poppins-700 fs-20">$99.99</span>
                            </div>
                        </div>
                    </div>
                </div>
                @endfor
            </div>
        </div>
    </div>
</div>
<br/>
<br/> --}}

    <!-- Footer -->
    <footer class="py-4" style="background-color:rgb(255, 255, 255);">
            <div class="container-fluid mt-5 px-3 px-sm-5 my-5">
                <div class="mx-auto w-100 conteainer-w">
                    <div class="row text-center text-md-start gy-4">
                        <div class="col-12 col-sm-6 col-md-6 col-lg-4 mb-4 pt-4">
                            <h6 class="kanit-500 fs-34 text-dark mb-4">เกี่ยวกับเรา</h6>
                            <ul class="list-unstyled d-flex flex-column gap-2 gap-md-3">
                                <li><a href="#" class="custom-link-style fs-20 text-dark">สอนกับเรา</a></li>
                                <li><a href="#" class="custom-link-style fs-20 text-dark">Privacy Policy</a></li>
                                <li><a href="#" class="custom-link-style fs-20 text-dark">Terms and Conditions</a></li>
                                <li><a href="#" class="custom-link-style fs-20 text-dark">Data Protection Policy</a>
                                </li>
                                <li><a href="#" class="custom-link-style fs-20 text-dark">Cookie Policy</a></li>
                            </ul>
                        </div>

                        <div class="col-12 col-sm-6 col-md-6 col-lg-4 mb-4 pt-4">
                            <h6 class="kanit-500 fs-34 text-dark mb-3">ช่องทางการติดต่อ</h6>
                            <div class="mb-4">
                                <a href="#" class="icon-box me-2 text-warning"><i class="bi bi-facebook"></i></a>
                                <a href="#" class="icon-box me-2 text-warning"><i class="bi bi-messenger"></i></a>
                                <a href="#" class="icon-box me-2 text-warning"><i class="bi bi-twitter"></i></a>
                                <a href="#" class="icon-box me-2 text-warning"><i class="bi bi-youtube"></i></a>
                                <a href="#" class="icon-box me-2 text-warning"><i class="bi bi-envelope-fill"></i></a>
                            </div>
                            <div class="d-flex flex-column gap-2 gap-md-3">
                                <p class="mb-0 custom-link-style fs-20 text-dark text-decoration-none">ที่อยู่
                                    บ้านเลขที่ 111/150 ต.บางพูด</p>
                                <p class="mb-0 custom-link-style fs-20 text-dark text-decoration-none">อ.ปากเกร็ด
                                    จ.นนทบุรี</p>
                            </div>
                        </div>

                        <div
                            class="col-12 col-sm-12 col-md-12 col-lg-4 d-flex flex-column align-items-center justify-content-center text-center">
                            <img src="{{ asset('images/acdemouslogo.png') }}" 
                                class="img-fluid mb-3" 
                                style="height: auto; max-height: 250px;">

                            <strong class="kanit-500 fs-34 text-dark">Academous</strong>
                        </div>
                    </div>
                </div>
            </div>
        </footer>

</div>
</body>
<script>
document.addEventListener('DOMContentLoaded', async function () {
    const token = localStorage.getItem('token'); // หรือ JWT ที่เก็บไว้
    const apiUrl = '{{ config('app.url') }}/api/student/get-course-images';

    try {
        const response = await fetch(apiUrl, {
            headers: {
                'Authorization': 'Bearer ' + token
            }
        });

        const result = await response.json();

        if (result.status === 'success') {
            const slides = result.data.filter(course => course.image !== null); // ตัด null ออก
            const carouselInner = document.getElementById('carouselInner');
            const carouselIndicators = document.getElementById('carouselIndicators');

            // ล้างก่อน
            carouselInner.innerHTML = '';
            carouselIndicators.innerHTML = '';

            slides.forEach((course, index) => {
                // สร้าง slide
                const div = document.createElement('div');
                div.classList.add('carousel-item');
                if (index === 0) div.classList.add('active');
                div.innerHTML = `
                            <img 
                                src="${course.image}" 
                                class="d-block w-100 h-100" 
                                style="object-fit: cover;" 
                                alt="Course ${course.id}">
                            `;
                carouselInner.appendChild(div);

                // สร้าง indicator
                const btn = document.createElement('button');
                btn.type = 'button';
                btn.setAttribute('data-bs-target', '#heroCarousel');
                btn.setAttribute('data-bs-slide-to', index);
                btn.className = index === 0 ? 'active' : '';
                btn.setAttribute('aria-label', `Slide ${index + 1}`);
                if (index === 0) btn.setAttribute('aria-current', 'true');
                carouselIndicators.appendChild(btn);
            });
        } else {
            console.error('Failed to load images');
        }
    } catch (error) {
        console.error('Error loading carousel images:', error);
    }
});
</script>
<script>
    let allCourses = [];

    async function fetchCourses() {
        try {
            const response = await fetch("{{ config('app.url') }}/api/student/get-all-course", {
                headers: {
                    'Authorization': 'Bearer ' + localStorage.getItem('token')
                }
            });
            const result = await response.json();

            if (result.status === "success") {
                allCourses = result.data;
                renderCategories(allCourses);
                renderCourses(allCourses);
            }
        } catch (err) {
            console.error("Error loading courses", err);
        }
    }

    function renderCategories(courses) {
        const categoryFilter = document.getElementById("categoryFilter");
        const categoryMap = {};

        // ล้าง option เดิม (ถ้ามี)
        categoryFilter.innerHTML = '<option value="">หมวดหมู่ทั้งหมด</option>';

        courses.forEach(course => {
            if (course.category_id && !categoryMap[course.category_id]) {
                categoryMap[course.category_id] = course.category_name;
            }
        });

        Object.entries(categoryMap).forEach(([id, name]) => {
            const option = document.createElement('option');
            option.value = id;
            option.textContent = name;
            categoryFilter.appendChild(option);
        });
    }

    function renderCourses(courses) {
        const courseRow = document.getElementById("courseRow");
        courseRow.innerHTML = '';

        if (!courses.length) {
            courseRow.innerHTML = '<p class="text-center text-muted">ไม่พบคอร์ส</p>';
            return;
        }

        courses.forEach(course => {
            const image = course.image || 'https://placehold.co/375x200?text=No+Image';
            const profile_image = course.profile_image ? `{{ config('app.url') }}/${course.profile_image}` : 'https://placehold.co/30x30';
            const description = course.description
                ? course.description.slice(0, 80) + (course.description.length > 80 ? '...' : '')
                : 'ไม่มีคำอธิบาย';
            const teacherName = course.teacher_name || course.firstname || "Unknown";
            const category = course.category_name || "ไม่ระบุ";
            const price = parseFloat(course.price).toFixed(2);
            const courseId = course.id;
            const courseLink = "{{ config('app.url') }}/student/course-package/" + courseId;
            // ✅ เช็ค enrollment_status และกำหนด priceText
            const priceText = course.enrollment_status === "ลงทะเบียนแล้ว"
                ? `<span class="text-success poppins-700 fs-20">ลงทะเบียนแล้ว</span>`
                : `<span class="text-success poppins-700 fs-20">฿${price}</span>`;

            const html = `
                <div class="col px-3">
                    <a href="${courseLink}" style="text-decoration:none;">
                    <div class="card h-100" style="border: unset;">
                        <img src="${image}" class="card-img-top" alt="Course Image"
                            style="height: 200px; object-fit: cover; width: 100%;">
                        <div class="card-body">
                            <small class="poppins-700 fs-14" style="color:#02166C;">${category}</small>
                            <h6 class="poppins-700 fs-20">${course.name}</h6>
                            <p class="text-muted poppins-500 fs-16" style="height: 80px; color:#7A8189;">
                                ${description}
                            </p>
                            <div class="d-flex align-items-center text-success small mb-2">
                                <span class="poppins-500 fs-16">5.00</span>
                                <span class="text-warning mx-1">★ ★ ★ ★ ★</span>
                                <span class="text-muted poppins-500 fs-8">(2,000)</span>
                            </div>
                            <div class="d-flex justify-content-between align-items-center">
                                <div class="d-flex align-items-center text-start">
                                    <img src="${profile_image}" class="rounded-circle me-2 object-fit-cover" width="30" height="30">
                                    <small class="poppins-700 fs-14" style="color:#4C5257;">
                                        ${teacherName}<br>
                                        <span class="poppins-500 fs-12" style="color:#7A8189;">1 Enrolled</span>
                                    </small>
                                </div>
                                ${priceText}
                            </div>
                        </div>
                    </div>
                    </a>
                </div>
            `;

            courseRow.insertAdjacentHTML('beforeend', html);
        });
    }

    function applyFilters() {
        const keyword = document.getElementById("courseSearchInput").value.toLowerCase();
        const selectedCategory = document.getElementById("categoryFilter").value;
        const title = document.getElementById("courseTitle");

        let filtered = allCourses.filter(course => {
            const matchKeyword = course.name?.toLowerCase().includes(keyword) ||
                                 course.teacher_name?.toLowerCase().includes(keyword) ||
                                 course.firstname?.toLowerCase().includes(keyword);

            const matchCategory = selectedCategory ? course.category_id == selectedCategory : true;
            return matchKeyword && matchCategory;
        });

        // เปลี่ยนชื่อ title ตาม category ที่เลือก
        if (selectedCategory) {
            const selectedCat = allCourses.find(c => c.category_id == selectedCategory);
            title.textContent = selectedCat ? selectedCat.category_name : "หมวดหมู่ทั้งหมด";
        } else {
            title.textContent = "หมวดหมู่ทั้งหมด";
        }

        renderCourses(filtered);
    }

    document.addEventListener('DOMContentLoaded', () => {
        fetchCourses();

        document.getElementById("courseSearchInput").addEventListener('input', applyFilters);
        document.getElementById("categoryFilter").addEventListener('change', applyFilters);
    });
</script>




@endsection