@extends('layoutstudent.layouts')
@section('title', 'Teacher Preview')

@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">
    <!-- font poppins -->
    <!-- <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>
        .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;
            "

        }

        @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;
            }
        }
    </style>
</head>

<body>
    <div class="container"
        style="max-width:100%; padding-right: unset; padding-left: unset; background-color: #F4FFFF;">

        <!-- Hero Image -->
        <div class="position-relative border">
            <div class="text-center d-flex align-items-center justify-content-center w-100">
                @if ($teacher->hero_image)
                <img src="{{ $teacher->hero_image }}" alt="Hero"
                    style="width: 100%; height: auto; object-fit: contain;">
                @else
                <div class="text-muted d-flex justify-content-center align-items-center bg-light"
                    style="width: 100%; aspect-ratio: 2 / 1; border: 1px dashed #ccc;">
                    ขนาดแนะนำ 1900x750 px
                </div>
                @endif
            </div>
        </div>

        <!-- About Section -->
        <div class="container-fluid bg-white">
            <div class="row align-items-start">

                <!--  About Text-->
                <div class="col-12 col-lg-6 order-2 order-lg-1 ps-5 pt-4 pl-lg-5-25rem">
                    <h5 class="py-3 poppins-700 fs-34"><strong>"About Me"</strong></h5>
                    <!-- <p><strong>ชื่อ:</strong> {{ $teacher->name }}</p> -->
                    <p>{!! $teacher->description !!}</p>
                    <ul class="list-unstyled mt-3 d-flex flex-column gap-3 poppins-500 fs-5 " style="color: #616161;">
                        <li><i class="fas fa-envelope fa-lg me-2"></i> {{ $teacher->email ?? '-' }}</li>
                        <li>
                            <i class="fab fa-youtube fa-lg me-2 "></i>
                            <a href="{{ $teacher->youtube_url }}" target="_blank" class="text-decoration-none"
                                style="color: #616161;">{{
                                $teacher->youtube_url }}</a>
                        </li>
                        <li><i class="fab fa-line fa-lg me-2 "></i> {{ $teacher->username ?? '-' }}</li>
                        <li><i class="fas fa-phone fa-lg me-2"></i> {{ $teacher->phone ?? '-' }}</li>
                        <li>
                            <i class="fab fa-facebook fa-lg me-2"></i>
                            <a href="{{ $teacher->facebook_url }}" target="_blank" class="text-decoration-none"
                                style="color: #616161;">{{
                                $teacher->facebook_url }}</a>
                        </li>
                        <li>
                            <i class="fab fa-x-twitter me-2 "></i>
                            <a href="{{ $teacher->twitter_url }}" target="_blank" class="text-decoration-none"
                                style="color: #616161;">{{
                                $teacher->twitter_url }}</a>
                        </li>
                    </ul>
                </div>

                <!-- Video -->
                <div class="col-12 col-lg-6 text-center order-1 order-lg-2 p-unset">
                    @if ($teacher->video_url)
                    <div id="video_preview_wrapper" class="position-relative" style="cursor: pointer;">
                        <video id="video_thumbnail" src="{{ $teacher->video_url }}" preload="metadata"
                            style="width: 100%; object-fit: cover;" muted></video>

                        <div class="position-absolute top-50 start-50 translate-middle" style="background: rgba(0, 0, 0, 0.5); border-radius: 50%; width: 60px; height: 60px;
                            display: flex; justify-content: center; align-items: center;">
                            <i class="fas fa-play text-white" style="font-size: 32px;"></i>
                        </div>
                    </div>

                    <div id="videoPlayerWrapper" class="d-none">
                        <video id="videoPreview" controls width="100%">
                            <source src="{{ $teacher->video_url }}" type="video/mp4">
                            Your browser does not support video.
                        </video>
                    </div>
                    @else
                    <div class="p-4 text-muted">- ไม่มีวิดีโอ -</div>
                    @endif
                </div>

            </div>
        </div>

        <!-- 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 (!empty($recommendedCourse))
                    <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;
                            ">
                        <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; ">
                            <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">{{ $recommendedCourse->name }}</h3>
                                    <p class="text-white-25 poppins-500 fs-16">{{ $recommendedCourse->description ?? '—'
                                        }}</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>

                        <div class="position-absolute bottom-0 end-0 m-3 bg-dark text-white rounded-pill px-3 py-1">
                            Dr. {{ $recommendedCourse->teacher_name ?? '-' }}
                        </div>
                    </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>

        <!-- Ranking -->
        <!-- Top Enrolled Ranking Section -->
            <div class="container-fluid mt-5 px-3 px-sm-5 my-5">
                <div class="mx-auto w-100 conteainer-w">
                    <h3 class="text-center poppins-700 fs-34 mb-5">"Course Ranking"</h3>
                    <div id="top-course-ranking" class="row justify-content-center text-center position-relative mt-5">
                        <!-- JS จะใส่ card ที่นี่ -->
                    </div>
                </div>
            </div>

        <section class="position-relative text-center py-5" style="min-height: 500px; overflow: hidden;">
            <!-- Background Video -->
            <video autoplay muted loop playsinline class="position-absolute top-0 start-0 w-100 h-100"
                style="object-fit: cover; z-index: 0;">
                <source src="{{ asset('storage/videos/backgroudvideo.mp4') }}" type="video/mp4">
                Your browser does not support the video tag.
            </video>

            <!-- Overlay -->
            <div class="position-absolute top-0 start-0 w-100 h-100"
                style="background-color: rgba(0,0,0,0.5); z-index: 1;"></div>

            <!-- Foreground Content -->
            <div class="container position-relative" style="z-index: 2;">
                <h2 class="text-white fw-bold mb-4 pt-5">"What would you like to study"</h2>

                <div class="d-flex flex-wrap justify-content-center gap-3 pt-5">
                    @foreach($categories as $category)
                    @php
                    $iconMap = [
                    'Trending' => 'fas fa-fire',
                    'UXUI Designer' => 'fas fa-pencil-ruler',
                    'Marketing' => 'fas fa-bullhorn',
                    'SEO' => 'fas fa-chart-line',
                    'Programmer' => 'fas fa-code',
                    'Data' => 'fas fa-database',
                    'Business' => 'fas fa-briefcase',
                    ];
                    $icon = $iconMap[$category->name] ?? 'fas fa-book';
                    @endphp
                    <a href="#"
                        class="d-flex align-items-center gap-2 bg-white rounded-pill px-4 py-2 text-dark text-decoration-none shadow-sm fw-semibold">
                        <i class="{{ $icon }}"></i> <small class="poppins-700 fs-14" > {{ $category->name }}</small>
                    </a>
                    @endforeach
                </div>
            </div>
        </section>


        <!-- Teacher Courses -->
        @if($coursesToshow)
        <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">"A course designed for you"</h4>
                    <div>
                        <a href="#" class="text-decoration-none me-3">See All</a>


                        <div class="btn-group">
                            <!-- @if ($coursesToshow->onFirstPage())
                            <button class="btn btn-outline-secondary btn-sm" disabled>&laquo;</button>
                        @else
                            <a href="{{ $coursesToshow->previousPageUrl() }}" class="btn btn-outline-secondary btn-sm">&laquo;</a>
                        @endif

                        @if ($coursesToshow->hasMorePages())
                            <a href="{{ $coursesToshow->nextPageUrl() }}" class="btn btn-warning btn-sm">&raquo;</a>
                        @else
                            <button class="btn btn-outline-secondary btn-sm" disabled>&raquo;</button>
                        @endif -->
                            <div id="paginationLinks">
                                {!! $coursesToshow->links('pagination::bootstrap-4') !!}
                            </div>
                        </div>
                    </div>
                </div>
                <div id="coursesContainer">
                    <div class="row row-cols-1 row-cols-md-2 row-cols-lg-4 g-5">
                        @foreach($coursesToshow as $course)
                        <div class="col px-3 ">
                            <a href="{{ config('app.url') }}/student/course-package/{{$course->id}}" style="text-decoration: none">
                            <div class="card h-100" style="border: unset;">
                                <img src="{{ $course->image }}" class="card-img-top object-fit-cover" alt="{{ $course->name }}" style="height: 200px; width: 100%;">
                                <div class="card-body">
                                    <small class="poppins-700 fs-14" style="color:#02166C;">{{ $course->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;">{{
                                        Str::limit($course->description, 100) }}</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="{{ asset($teacher->profile_image ?? 'https://i.pravatar.cc/32') }}" class="rounded-circle me-2  object-fit-cover"
                                                width="30" height="30">
                                            <small class="poppins-700 fs-14" style="color:#4C5257;">{{
                                                $course->teacher_name }}<br><span class="poppins-500 fs-12"
                                                    style="color:#7A8189;">1 Enrolled</span></small>
                                        </div>
                                        @if (($enrollmentStatuses[$course->id] ?? 'ยังไม่ลงทะเบียน') === 'ลงทะเบียนแล้ว')
                                            <span class="text-success poppins-700 fs-20">ลงทะเบียนแล้ว</span>
                                        @else
                                            <span class="text-success poppins-700 fs-20">{{ number_format($course->price, 2) }}</span>
                                        @endif
                                    </div>
                                </div>
                            </div>
                            </a>
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
        @endif


        <!-- 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', 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 => {
                    // extract only the course list + pagination
                    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>
    const enrollmentStatuses = @json($enrollmentStatuses);
</script>
<script>
    document.addEventListener('DOMContentLoaded', async () => {
        const container = document.getElementById('top-course-ranking');
        const badges = ['rank2.png', 'rank1.png', 'rank3.png'];
        const tops = ['-10px', '-30px', '-10px'];
        const pts = ['pt-4', '', 'pt-4'];
        const token = localStorage.getItem('token'); // ดึงจาก localStorage
        try {
           const response = await fetch('{{ env("APP_URL") }}/api/courses/top-enrollments', {
                method: 'GET',
                headers: {
                    'Authorization': 'Bearer ' + token,
                    'Accept': 'application/json'
                }
            });
            const result = await response.json();

            if (result.status === 'success') {
                const courses = result.data;
                 function truncateText(text, maxLength) {
                        if (!text) return '';
                        return text.length > maxLength ? text.slice(0, maxLength) + '...' : text;
                    }
                courses.forEach((course, index) => {
                    const description = truncateText(course.description || 'ไม่มีคำอธิบาย', 100);
                    const teacherName = course.teacher_name ?? '-';
                    const price = parseFloat(course.price).toFixed(2);
                    const category = course.category_name ?? '-';
                    const courseId = course.id;
                     const courseLink = "{{ config('app.url') }}/student/course-package/" + courseId;
                    const enrollmentStatus = enrollmentStatuses[course.id];
                    const priceOrStatus = enrollmentStatus === 'ลงทะเบียนแล้ว'
                        ? 'ลงทะเบียนแล้ว'
                        : `${price} ฿`;
                    
                    const html = `
                     
                    <div class="col-12 col-sm-12 col-md-4 col-lg-3 position-relative px-0 px-sm-3 ${pts[index]}">
                        <a href="${courseLink}" style="text-decoration:none;color:black;">
                        <img src="{{ asset('images') }}/${badges[index]}" class="ranking-badge position-absolute"
                             style="top: ${tops[index]}; right: 0px;">
                        <div class="bg-white rounded shadow text-start position-relative">
                            <div class="w-100">
                                <img src="${course.image}" class="rounded object-fit-cover" style="height: 200px; width: 100%;">
                            </div>
                            <div class="w-100 px-3 py-2" style="height: 240px">
                                <small class="poppins-700 fs-14" style="color:#02166C;">${category}</small>
                                <h5 class="poppins-700 fs-20">${course.name}</h5>
                                <p class="text-muted poppins-500 fs-16" style="height: 90px; 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="https://i.pravatar.cc/32" width="30" height="30" class="rounded-circle me-1 img-fluid">
                                        <small class="poppins-700 fs-14" style="color:#4C5257;">${teacherName}</small>
                                    </div>
                                    <span class="text-success poppins-700 fs-20">${priceOrStatus}</span>
                                </div>
                            </div>
                        </div>
                        </a>
                    </div>
                    `;
                    container.insertAdjacentHTML('beforeend', html);
                });
            }
        } catch (error) {
            console.error('Error fetching top enrolled courses:', error);
        }
    });
</script>

@endsection