@extends('layoutsteacher.layouts')
@section('title', 'My Profile')

@section('content')
<style>
[data-editable] {
    display: inline-block;
    min-width: 100px;
    max-width: 250px;
    padding: 2px 4px;
    border: 1px dashed #ccc;
    border-radius: 4px;
    background-color: #fff;
    word-break: break-word;
    white-space: pre-wrap;
}
.line-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
    vertical-align: middle; /* แก้ให้ตรงกับข้อความ */
    margin-right: 8px; /* ให้มีระยะห่างเท่ากับ icon ตัวอื่น */
}
/* .edit-mode {
    display: none;
} */
.show-mode {
    display: inline;
}
ul.list-unstyled li {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.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;
}
.card-body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.card-body .card-text {
    margin-bottom: 10px;
}

.card-body .mt-auto {
    margin-top: auto;
}
/* ul.list-unstyled li i,
ul.list-unstyled li img.line-icon {
    width: 18px;
    height: 18px;
    vertical-align: middle;
    margin-right: 8px;
    display: inline-block;
    object-fit: contain;
} */
</style>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
<script src="https://cdn.tiny.cloud/1/zd90krrffvtdqauffvom6vjgx4xxfnre0wetrgijkbrbi6pk/tinymce/7/tinymce.min.js" referrerpolicy="origin"></script>
<div class="container py-4" style="max-height: 80vh;overflow:auto;">

    <!-- Hero Section -->
    <!-- Hero Image Click Area -->
     
    <div class="position-relative mb-4 border" style="min-height: 650px;">
        <div id="hero_image_container"
        class="text-center d-flex align-items-center justify-content-center"
        style="height: 650px; cursor: pointer;">
        
            @if ($teacher->hero_image)
                <img src="{{ $teacher->hero_image }}"
                    alt="Hero"
                    id="hero_image_preview"
                    style="max-height: 100%; width: 100%; object-fit: cover;">
            @else
                <div id="hero_placeholder"
                    class="text-muted d-flex justify-content-center align-items-center bg-light"
                    style="width: 100%; height: 100%; border: 1px dashed #ccc;">
                    ขนาดแนะนำ 100x200 px
                </div>
            @endif
        </div>

        <!-- Hidden Upload Input -->
        <input type="file" id="hero_image_input" name="hero_image" accept="image/*" class="d-none">

        <!-- Toggle Button -->
        <div class="d-flex">
            <button class="btn btn-sm btn-outline-secondary position-absolute top-0 mt-2 me-2 bg-black" id="saveBtn" style="right: 0px; color:white;">
                ✏️ แก้ไขข้อมูลของคุณ
            </button>
                <button class="btn btn-sm btn-danger position-absolute top-0 mt-2 me-2 d-none" id="cancelBtn" style="right: 120px;">
                ❌ ยกเลิก
            </button>
            <a href="{{ url('/teacher/preview') }}" target="_blank" class="btn position-absolute mt-2 me-2 bg-black" style="right: 0px;top: 40px;color:white;">
                ดูตัวอย่างเว็บไซต์ของคุณ
            </a>
        </div>
    </div>
    <!-- Main Info -->
    <!-- <div class="row"> -->
    <div class="d-flex border">    
        <!-- About Me -->
        <div class="col-md-6 border-end px-4 py-4">
            <h5><strong>"About Me"</strong></h5>

             <!-- <p><strong>ชื่อ:</strong>
                <span class="show-mode" id="name_display">{{ $teacher->name }}</span>
                <input type="text" class="form-control edit-mode d-none" id="name" name="name" placeholder="กรอกชื่อ" value="{{ $teacher->name }}">
            </p> -->
            <!--
            <p><strong>ตำแหน่ง:</strong>
                <span class="show-mode" id="title_display">{{ $teacher->title }}</span>
                <input type="text" class="form-control edit-mode d-none" id="title" placeholder="กรอกตำแหน่ง" value="{{ $teacher->title }}">
            </p> -->

            <p>
                <!-- <strong>แนะนำตัว:</strong> -->
                <span class="show-mode" id="description_display">{!! $teacher->description !!}</span>
                <textarea class="form-control edit-mode d-none" id="description" name="description" rows="3" maxlength="100" placeholder="กรอกคำอธิบาย">{{ $teacher->description }}</textarea>
                <!-- <textarea class="form-control edit-mode d-none" id="description" rows="3" maxlength="300" placeholder="กรอกคำอธิบาย">{{ $teacher->description }}</textarea> -->
                <small class="text-muted edit-mode d-none">* ความยาวไม่เกิน 100 ตัวอักษร</small>
            </p>

            <!-- <ul class="list-unstyled mt-3">
                @foreach ([
                    'email' => 'envelope',
                    'youtube_url' => 'youtube',
                    'username' => 'person-circle',
                    'phone' => 'telephone',
                    'facebook_url' => 'facebook',
                    'twitter_url' => 'twitter'
                ] as $field => $icon)
                    <li>
                        <i class="bi bi-{{ $icon }}"></i>
                        <span class="show-mode" id="{{ $field }}_display">{{ $teacher->$field ?? '-' }}</span>
                        <input type="text" class="form-control edit-mode d-none" id="{{ $field }}" placeholder="กรอก{{ $field }}" value="{{ $teacher->$field }}">
                    </li>
                @endforeach
            </ul> -->
            <ul class="list-unstyled mt-3">
                @foreach ([
                    'email' => ['icon' => 'envelope', 'type' => 'text'],
                    'youtube_url' => ['icon' => 'youtube', 'type' => 'url'],
                    'username' => ['icon' => 'line', 'type' => 'text'], {{-- ใช้รูปภาพแทน --}}
                    'phone' => ['icon' => 'telephone', 'type' => 'text'],
                    'facebook_url' => ['icon' => 'facebook', 'type' => 'url'],
                    'twitter_url' => ['icon' => 'twitter', 'type' => 'url']
                ] as $field => $config)
                    <li>
                        @if ($field === 'username')
                            {{-- ใช้รูป LINE แทน icon --}}
                             <i class="fab fa-line"></i>
                            <!-- <img src="{{ asset('images/lineicon.png') }}" alt="LINE"class="line-icon"> -->
                             <!-- <span class="show-mode" id="username_display">{{ $teacher->username ?? '-' }}</span>
                             <input type="text" class="form-control edit-mode d-none" id="username" placeholder="กรอก LINE ID" value="{{ $teacher->username }}"> -->
                        @else
                            <i class="bi bi-{{ $config['icon'] }}"></i>
                        @endif

                        @php $value = $teacher->$field ?? null; @endphp

                        @if ($config['type'] === 'url' && !empty($value))
                            <a href="{{ $value }}" target="_blank" class="show-mode" id="{{ $field }}_display">{{ $value }}</a>
                        @else
                            <span class="show-mode" id="{{ $field }}_display">{{ $value ?: '-' }}</span>
                        @endif
                        @if ($field !== 'username')
                        <input type="text" class="form-control edit-mode d-none" id="{{ $field }}" placeholder="กรอก{{ $field }}" value="{{ $value }}">
                        @else
                        <input type="text" class="form-control edit-mode d-none" id="{{ $field }}" placeholder="กรอก LINE ID" value="{{ $value }}">
                        @endif
                    </li>
                @endforeach
            </ul>
        </div>

        <!-- Profile Picture & Video -->
        <div class="col-md-6 text-center py-4 px-1">
            <!-- <p class="text-muted">รูปขนาดแนะนำ 100x200 px</p> -->
            <!-- <img src="{{ $teacher->profile_image ?? 'https://via.placeholder.com/200x200' }}"
                id="profile_img_preview"
                class="img-thumbnail mb-3"
                style="width: 200px; height: auto;"> -->

            <p id="videosizerec" class="text-muted d-none">วิดีโอขนาดแนะนำไม่เกิน 200 MB</p>

           <div id="video_container" class="position-relative bg-light rounded p-2 overflow-hidden">
                @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 bg-dark text-white rounded-circle"
                            style="width: 60px; height: 60px; display: flex; justify-content: center; align-items: center; font-size: 28px; opacity: 0.8;">
                            ▶
                        </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 id="videoPreview" class="p-4 text-muted">- ไม่มีวิดีโอ -</div>
                @endif

                <!-- @if ($teacher->video_url)
                    <video id="videoPreview" controls width="100%">
                        <source src="{{ $teacher->video_url }}" type="video/mp4">
                        Your browser does not support video.
                    </video>
                @else
                    <div id="videoPreview" class="p-4 text-muted">- ไม่มีวิดีโอ -</div>
                @endif -->
                {{-- ปุ่มอัปโหลดใหม่เฉพาะตอน editMode --}}
                <div id="upload_video_trigger"
                    class="mt-2 btn btn-outline-primary d-none"
                    onclick="document.getElementById('video_input').click()">
                    📁 เลือกวิดีโอใหม่
                </div>
            </div>

            <input type="file" id="video_input" name="video_url" accept="video/*" class="form-control mb-2 d-none">

        </div>
            <input type="hidden" id="teacher_id" value="{{ $teacher->id ?? '' }}">
    </div>
    <!-- Recommended Courses Section -->
    <div class="container my-5">
        <h3 class="text-center fw-bold">"Recommended Courses You Can't Miss!"</h3>
        <p class="text-center text-muted">New Skills with Experts</p>

        <div class="d-flex border rounded overflow-hidden" id="recommendSec">
            <!-- Left: Add Course -->
             @if (empty($recommendedCourse))
             <div id="recommendedCourseCardempty" class="col-md-6 p-4 bg-secondary text-white d-flex flex-column align-items-center justify-content-center text-center">
                    <span class="badge bg-white text-dark mb-3 rounded-pill px-3 py-2 shadow-sm">
                        <strong>Recommended</strong>
                    </span>

                    <div class="text-white mb-3">
                        <i class="bi bi-play-circle" style="font-size: 2rem;" data-bs-toggle="modal" data-bs-target="#courseSelectModal"></i><br>
                        เพิ่มคอร์สของคุณ
                    </div>

                    <a href="#" class="btn btn-info shadow" >Register Now</a>
                </div>
                @endif

            <!-- Right: Empty Courses -->
           <div class="w-100" id="recommendedCourseCard">
                @if (!empty($recommendedCourse))
            <!-- <div class="w-100" id="recommendedCourseCard"> -->
                <div class="w-100 position-relative overflow-hidden rounded" 
            style="background-image: url('{{ asset($recommendedCourse->image ?? 'default.jpg') }}');
                    background-size: cover;
                    background-position: center;
                    min-height: 400px;">

                    {{-- Overlay 50% on the left side --}}
                    <div class="position-absolute top-0 start-0 h-100" style="width: 50%; background-color: rgba(0,0,0,0.5); z-index: 1;"></div>

                    {{-- Main content inside left panel --}}
                    <div class="position-relative text-white d-flex flex-column justify-content-center"
                        style="max-width: 50%; height: 100%; padding: 2rem; z-index: 2;">

                        <div class="position-absolute top-0 end-0 m-2">
                            <button class="btn btn-light btn-sm" data-bs-toggle="modal" data-bs-target="#courseSelectModal" onclick="setSelectedSlot('main')">✏️ แก้ไข</button>
                            <!-- <button class="btn btn-danger btn-sm">🗑 ลบ</button> -->
                             <button class="btn btn-danger btn-sm" data-bs-toggle="modal" data-bs-target="#deleteCourseModal" 
                                data-course-id="{{ $recommendedCourse->id }}" data-slot="main">
                                🗑 ลบ
                            </button>
                        </div>
                        <div class="py-4"></div>
                        <span class="badge bg-white text-dark mb-2 rounded-pill px-3 py-2 shadow-sm" style="max-width:200px;align-self:center;">
                            <strong>Recommended</strong>
                        </span>

                        <!-- <div class="text-white-50 mb-1">{{ $recommendedCourse->category_name ?? '-' }}</div> -->
                        <h3 class="fw-bold text-white text-center">{{ $recommendedCourse->name }}</h3>
                        <p class="text-white-50 text-center">{{ Str::limit($recommendedCourse->description, 60) ?? '-'}}</p>

                        <a href="#" class="btn btn-info mt-3 text-center" style="width: fit-content;align-self:center;">Register Now</a>
                    </div>

                    {{-- Dr. Name badge in bottom right --}}
                    <div class="position-absolute bottom-0 end-0 m-3 bg-dark text-white rounded-pill px-3 py-1" style="z-index: 2;">
                        Dr. {{ $recommendedCourse->teacher_name ?? '-' }}
                    </div>
                </div>
            <!-- </div> -->

            @else
                <div class="d-flex align-items-center justify-content-center bg-light text-muted text-center" style="min-height: 300px;">

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



        </div>
    </div>
    
    <!-- Course Ranking Section -->
     
    <div class="container my-5">
        <h4 class="fw-bold text-center mb-4">"Course ranking"</h4>
        <div class="row justify-content-center text-center position-relative">
           
            <div id="slot-rank2" class="col-md-3 position-relative px-4 pt-4">
                <img src="{{ asset('images/rank2.png') }}" class="ranking-badge position-absolute" style="top: -10px; right: 20px;">
                @if ($recommendedrank2)
                <div class="bg-white rounded shadow text-start position-relative">
                    <div class="w-100">
                        <img src="{{ asset($recommendedrank2->image) }}" class="img-fluid rounded mb-3">
                    </div>
                    <div class="w-100 px-3 py-2" style="height: 240px">
                    <small class="text-muted">{{ $recommendedrank2->category_name }}</small>
                    <h5 class="fw-bold">{{ $recommendedrank2->name }}</h5>
                    <p class="text-muted small" style="height: 80px">{{ Str::limit($recommendedrank2->description, 30) }}</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">
                        <small><img src="/images/avatar.png" width="24" class="rounded-circle me-1"> Dr. {{ $recommendedrank2->teacher_name ?? '-' }}</small>
                        <span class="text-success fw-bold">{{ $recommendedrank2->price }}</span>
                    </div>
                    <button class="btn btn-light btn-sm position-absolute top-0 start-0 m-1"
                            data-bs-toggle="modal" data-bs-target="#courseSelectModal"
                            data-slot="rank2" onclick="setSelectedSlot('rank2')">✏️</button>
                    <button class="btn btn-light btn-sm position-absolute top-0 start-1 m-1"
                            data-bs-toggle="modal"
                            data-bs-target="#deleteCourseModal"
                            data-course-id="{{ $recommendedrank2->id }}"
                            data-slot="rank2" style="left:40px;width:36px;">🗑</button>
                    </div>        
                </div>
            @else
                <div class="course-box bg-light p-4 pt-4 rounded"
                    data-bs-toggle="modal" data-bs-target="#courseSelectModal"
                    data-slot="rank2">
                    <i class="bi bi-play-circle fs-1"></i>
                    <div class="mt-2">เพิ่มคอร์สของคุณ</div>
                </div>
            @endif
            </div>

            <div id="slot-rank1" class="col-md-3 position-relative px-4">
                <img src="{{ asset('images/rank1.png') }}" class="ranking-badge position-absolute" style="top: -30px; right: 20px;">
                @if ($recommendedRank1)
                <div class="bg-white rounded shadow text-start position-relative">
                    <div class="w-100">
                    <img src="{{ asset($recommendedRank1->image) }}" class="img-fluid rounded">

                    </div>
                    <div class="w-100 px-3 py-2" style="height: 240px">
                        <small class="text-muted">{{ $recommendedRank1->category_name }}</small>
                        <h5 class="fw-bold">{{ $recommendedRank1->name }}</h5>
                        <p class="text-muted small" style="height: 80px">{{ Str::limit($recommendedRank1->description, 30) }}</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">
                            <small><img src="/images/avatar.png" width="24" class="rounded-circle me-1"> Dr. {{ $recommendedRank1->teacher_name ?? '-' }}</small>
                            <span class="text-success fw-bold">{{ $recommendedRank1->price }}</span>
                        </div>
                        <button class="btn btn-light btn-sm position-absolute top-0 start-0 m-1"
                                data-bs-toggle="modal" data-bs-target="#courseSelectModal"
                                data-slot="rank1" onclick="setSelectedSlot('rank1')">✏️</button>
                        <button class="btn btn-light btn-sm position-absolute top-0 start-1 m-1"
                                data-bs-toggle="modal"
                                data-bs-target="#deleteCourseModal"
                                data-course-id="{{ $recommendedRank1->id }}"
                                data-slot="rank1" style="left:40px;width:36px;">🗑</button>
                    </div>        
                </div>
            @else
                <div class="course-box bg-light p-4 rounded"
                    data-bs-toggle="modal" data-bs-target="#courseSelectModal"
                    data-slot="rank1">
                    <i class="bi bi-play-circle fs-1"></i>
                    <div class="mt-2">เพิ่มคอร์สของคุณ</div>
                </div>
            @endif
            </div>

            <div id="slot-rank3" class="col-md-3 position-relative px-4 pt-4">
                <img src="{{ asset('images/rank3.png') }}" class="ranking-badge position-absolute" style="top: -10px; right: 20px;">
                @if ($recommendedrank3)
                <div class="bg-white rounded shadow text-start position-relative">
                     <div class="w-100">
                        <img src="{{ asset($recommendedrank3->image) }}" class="img-fluid rounded mb-3">
                    </div>
                    <div class="w-100 px-3 py-2" style="height: 240px">
                    <small class="text-muted">{{ $recommendedrank3->category_name }}</small>
                    <h5 class="fw-bold">{{ $recommendedrank3->name }}</h5>
                    <p class="text-muted small" style="height: 80px">{{ Str::limit($recommendedrank3->description, 30) }}</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">
                        <small><img src="/images/avatar.png" width="24" class="rounded-circle me-1"> Dr. {{ $recommendedrank3->teacher_name ?? '-' }}</small>
                        <span class="text-success fw-bold">{{ $recommendedrank3->price }}</span>
                    </div>
                    <button class="btn btn-light btn-sm position-absolute top-0 start-0 m-1"
                            data-bs-toggle="modal" data-bs-target="#courseSelectModal"
                            data-slot="rank3" onclick="setSelectedSlot('rank3')">✏️</button>
                    <button class="btn btn-light btn-sm position-absolute top-0 start-1 m-1"
                            data-bs-toggle="modal"
                            data-bs-target="#deleteCourseModal"
                            data-course-id="{{ $recommendedrank3->id }}"
                            data-slot="rank3" style="left:40px;width:36px;">🗑</button>
                    </div>
                </div>
            @else
                <div class="course-box bg-light p-4 pt-4 rounded"
                    data-bs-toggle="modal" data-bs-target="#courseSelectModal"
                    data-slot="rank3">
                    <i class="bi bi-play-circle fs-1"></i>
                    <div class="mt-2">เพิ่มคอร์สของคุณ</div>
                </div>
            @endif
            </div>

        </div>
    </div>
    @if($coursesToshow)
    <div class="container my-5">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h4 class="fw-bold">"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-4 g-4">
                @foreach($coursesToshow as $course)
                <div class="col">
                    <div class="card h-100">
                        <img src="{{ $course->image }}" class="card-img-top" alt="{{ $course->name }}">
                        <div class="card-body">
                            <small class="text-primary fw-bold">{{ $course->category_name }}</small>
                            <h6 class="card-title mt-1">{{ $course->name }}</h6>
                            <p class="card-text text-muted small">{{ Str::limit($course->description, 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="{{ asset('images/avatar.jpg') }}" class="rounded-circle me-2" width="30" height="30" alt="{{ $course->teacher_name }}">
                                    <small>{{ $course->teacher_name }}<br><span class="text-muted">1 Enrolled</span></small>
                                </div>
                                <span class="fw-bold text-success">{{ number_format($course->price, 2) }}</span>
                            </div>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
        </div> -->
        <div id="coursesContainer">
    <div class="row row-cols-1 row-cols-md-4 g-4">
        @foreach($coursesToshow as $course)
        <div class="col">
            <div class="card h-100 d-flex flex-column">
                <img src="{{ $course->image }}" class="card-img-top" alt="{{ $course->name }}">
                <div class="card-body d-flex flex-column">
                    <small class="text-primary fw-bold">{{ $course->category_name }}</small>
                    <h6 class="card-title mt-1">{{ $course->name }}</h6>
                    <p class="card-text text-muted small flex-grow-1">{{ Str::limit($course->description, 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>
                    <!-- Flex container to push footer down if no description -->
                    <div class="d-flex justify-content-between align-items-center mt-auto">
                        
                        <div class="d-flex align-items-center">
                            <img src="{{ asset('images/avatar.jpg') }}" class="rounded-circle me-2" width="30" height="30" alt="{{ $course->teacher_name }}">
                            <small>{{ $course->teacher_name }}<br><span class="text-muted">1 Enrolled</span></small>
                        </div>
                        <span class="fw-bold text-success">{{ number_format($course->price, 2) }}</span>
                    </div>
                </div>
            </div>
        </div>
        @endforeach
    </div>
</div>

    </div>
@endif
<footer class="py-4 border-top">
    <div class="container">
        <div class="row text-center text-md-start">
            <!-- About Section -->
            <div class="col-md-4 mb-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>

            <!-- Contact Section -->
            <div class="col-md-4 mb-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>

            <!-- Company Logo -->
            <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;">
                <!-- <div class="bg-secondary mb-2" style="width: 100px; height: 80px;"></div> -->
                <strong class="pt-2">ชื่อ บริษัท</strong>
            </div>
        </div>
    </div>
</footer>



</div>
<!-- Modal: Select Recommended Course -->
<div class="modal fade" id="courseSelectModal" tabindex="-1" aria-labelledby="selectCourseModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="selectCourseModalLabel">เลือกคอร์สของคุณ</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="ปิด"></button>
      </div>
      <div class="modal-body">
        <table class="table">
          <thead>
            <tr>
              <th>เลือก</th>
              <th>หมวดหมู่</th>
              <th>คอร์ส</th>
            </tr>
          </thead>
          <pre></pre>
          <tbody>
            @foreach ($courses as $course)
              <tr>
                <td>
                  <input type="radio" name="selected_course" 
                         value="{{ $course->id }}"
                         data-course="{{ $course->name }}"
                         data-category="{{ $course->category_name  ?? $course->category->name}}">
                </td>
                <td>{{  $course->category_name  ?? $course->category->name}}</td>
                <td>{{ $course->name }}</td>
              </tr>
            @endforeach
          </tbody>
        </table>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">ยกเลิก</button>
        <button type="button" class="btn btn-primary" id="confirmCourseSelect">ตกลง</button>
      </div>
    </div>
  </div>
</div>
<!-- Modal: Delete Course -->
<!-- Custom Styled Delete Modal -->
<div class="modal fade" id="deleteCourseModal" tabindex="-1" aria-labelledby="deleteCourseModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content rounded-4 shadow-lg border-0">
      <div class="modal-body text-center py-5 px-4">

        <!-- Warning Image -->
        <!-- <img src="{{ asset('images/warning-illustration.png') }}" alt="Warning" class="mb-4" style="width: 120px; height: auto;"> -->

        <!-- Bold Title -->
        <h5 class="fw-bold mb-3 text-dark" style="font-size: 1.25rem;">
          คุณยืนยันที่จะลบใช่หรือไม่?
        </h5>

        <!-- Subtext -->
        <p class="text-muted mb-4" style="font-size: 0.95rem;">
          โปรดทราบว่าเมื่อดำเนินการ จะถูกลบออกอย่างถาวร
        </p>

        <!-- Action Buttons -->
        <div class="d-flex justify-content-center gap-3">
          <button type="button" class="btn btn-outline-primary px-4 py-2 rounded-pill" data-bs-dismiss="modal">
            ยกเลิก
          </button>
          <button type="button" id="confirmDeleteCourse" class="btn btn-primary px-4 py-2 rounded-pill">
            ยืนยัน
          </button>
        </div>

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


<!-- </div> -->
@endsection

@section('scripts')
<script>
    let editMode = false;
    
    function toggleEditMode() {
        editMode = !editMode;

        const btn = document.getElementById('saveBtn');
        btn.innerText = editMode ? '💾 บันทึกข้อมูล' : '✏️ แก้ไขข้อมูลของคุณ';
        const heroBox = document.getElementById('hero_image_container');
        heroBox.style.cursor = editMode ? 'pointer' : 'auto';
        // const videoBox = document.getElementById('video_container');
        // videoBox.style.cursor = editMode ? 'pointer' : 'not-allowed';
        const upload_video_trigger = document.getElementById('upload_video_trigger');  
         if (editMode) {
            upload_video_trigger.classList.remove('d-none');
        } else {
            upload_video_trigger.classList.add('d-none');
        }    
        const cancelBtn = document.getElementById('cancelBtn');
        if (editMode) {
            cancelBtn.classList.remove('d-none');
        } else {
            cancelBtn.classList.add('d-none');
        }    
        document.querySelectorAll('.edit-mode').forEach(el => el.classList.toggle('d-none', !editMode));
        document.querySelectorAll('.show-mode').forEach(el => el.style.display = editMode ? 'none' : 'inline-block');
        if (editMode) {
            tinymce.init({
                selector: '#description',
                menubar: false,
                height: 300,
                plugins: [
                    'anchor', 'autolink', 'charmap', 'codesample', 'emoticons', 'image', 'link', 'lists', 'media', 'searchreplace',
                    'table', 'visualblocks', 'wordcount'
                    // , 'checklist', 'mediaembed', 'casechange', 'formatpainter',
                    // 'pageembed', 'a11ychecker', 'tinymcespellchecker', 'permanentpen', 'powerpaste', 'advtable',
                    // 'advcode', 'editimage', 'advtemplate', 'ai', 'mentions', 'tinycomments', 'tableofcontents',
                    // 'footnotes', 'mergetags', 'autocorrect', 'typography', 'inlinecss', 'markdown', 'importword',
                    // 'exportword', 'exportpdf'
                ],
                toolbar: 'undo redo | blocks fontfamily fontsize | bold italic underline strikethrough | link image media table mergetags | addcomment showcomments | spellcheckdialog a11ycheck typography | align lineheight | checklist numlist bullist indent outdent | emoticons charmap | removeformat',
                tinycomments_mode: 'embedded',
                tinycomments_author: 'Author name',
                mergetags_list: [
                    { value: 'First.Name', title: 'First Name' },
                    { value: 'Email', title: 'Email' },
                ],
                ai_request: (request, respondWith) =>
                    respondWith.string(() => Promise.reject('See docs to implement AI Assistant')),
                branding: false,
                setup: function (editor) {
                    const maxLength = 100;

                    editor.on('keydown', function (e) {
                        const content = editor.getContent({ format: 'text' });

                        // Allow navigation and deletion keys
                        const allowedKeys = [
                            'Backspace', 'Delete', 'ArrowLeft', 'ArrowRight',
                            'ArrowUp', 'ArrowDown', 'Tab', 'Enter'
                        ];

                        if (content.length >= maxLength && !allowedKeys.includes(e.key)) {
                            e.preventDefault();
                        }
                    });

                    editor.on('input', function () {
                        const content = editor.getContent({ format: 'text' });

                        // Trim if somehow exceeded (e.g., paste)
                        if (content.length > maxLength) {
                            const trimmed = content.substring(0, maxLength);
                            editor.setContent(trimmed);
                        }
                    });

                    editor.on('change', function () {
                        editor.save(); // Sync with textarea
                    });
                }
            });
        } else {
            if (tinymce.get('description')) {
                tinymce.get('description').remove();
            }
        }
        if (editMode) {
            // heroBox.onclick = () => document.getElementById('hero_image_input').click();
        } else {
            heroBox.onclick = null;
        }
        if (editMode) {
            // ✅ เก็บค่าก่อนแก้ไขไว้
            document.querySelectorAll('.edit-mode').forEach(el => {
                if (el.id) originalValues[el.id] = el.value;
            });
        }
        
    }
    
    document.getElementById('hero_image_container').addEventListener('click', function () {
        if (editMode) {
            document.getElementById('hero_image_input').click();
        }
    });
    document.getElementById('video_container').addEventListener('click', function () {
        if (editMode) {
            // document.getElementById('video_input').click();
        }
    });
    document.getElementById('video_preview_wrapper')?.addEventListener('click', function () {
        this.classList.add('d-none');
        document.getElementById('videoPlayerWrapper').classList.remove('d-none');
        const video = document.getElementById('videoPreview');
        video.play();
    });
 
    document.getElementById('hero_image_input').addEventListener('change', function (event) {
    const file = event.target.files[0];
    if (!file) return;

    const reader = new FileReader();
    reader.onload = function (e) {
        let container = document.getElementById('hero_image_container');
        let preview = document.getElementById('hero_image_preview');

        // ถ้ามี placeholder, ลบทิ้ง
        const placeholder = document.getElementById('hero_placeholder');
        if (placeholder) placeholder.remove();

        // ถ้ายังไม่มี <img> ให้สร้าง
        if (!preview) {
            preview = document.createElement('img');
            preview.id = 'hero_image_preview';
            preview.style = "max-height: 100%; max-width: 100%; object-fit: cover;";
            container.appendChild(preview);
        }

        // ใส่รูป preview
        preview.src = e.target.result;
    };

    reader.readAsDataURL(file);
});
   
    // document.getElementById('video_input').addEventListener('change', function(event) {
    //     const file = event.target.files[0];
    //     if (!file) return;

    //     // ตรวจสอบขนาดไม่เกิน 200MB
    //     if (file.size > 200 * 1024 * 1024) {
    //         alert("❌ วิดีโอต้องไม่เกิน 200MB");
    //         event.target.value = ""; // clear input
    //         return;
    //     }

    //     const videoPreviewContainer = document.getElementById('video_container');

    //     // เคลียร์ element เก่าทั้งหมด
    //     videoPreviewContainer.innerHTML = '';

    //     const video = document.createElement('video');
    //     video.controls = true;
    //     video.style.width = '100%';

    //     const source = document.createElement('source');
    //     source.src = URL.createObjectURL(file); // ใช้ URL.createObjectURL ดีกว่า FileReader
    //     source.type = file.type || 'video/mp4';

    //     video.appendChild(source);
    //     videoPreviewContainer.appendChild(video);
    // });
    document.getElementById('video_input').addEventListener('change', function(event) {
        const file = event.target.files[0];
        if (!file) return;

        if (file.size > 200 * 1024 * 1024) {
            alert("❌ วิดีโอต้องไม่เกิน 200MB");
            event.target.value = ""; 
            return;
        }

        const videoContainer = document.getElementById('video_container');
    videoContainer.innerHTML = ''; // ล้างของเก่า
        // ล้างเนื้อหาเก่า (ยกเว้นปุ่ม)
        // const oldPreview = document.getElementById('videoPreview');
        // if (oldPreview) oldPreview.remove();

        const video = document.createElement('video');
        video.id = 'videoPreview';
        video.controls = true;
        video.style.width = '100%';

        const source = document.createElement('source');
        source.src = URL.createObjectURL(file);
        source.type = file.type;

        video.appendChild(source);
        const uploadBtn = document.createElement('button');
        uploadBtn.className = 'btn btn-outline-primary mt-3';
        uploadBtn.id='upload_video_trigger';
        uploadBtn.innerHTML = '📁 เลือกวิดีโอใหม่';
        uploadBtn.onclick = () => document.getElementById('video_input').click();

        // ✅ แทรกเข้า container
        videoContainer.appendChild(video);
        videoContainer.appendChild(uploadBtn);
        // videoContainer.insertBefore(video, document.getElementById('uploadVideoBtn'));
    });

    document.getElementById('cancelBtn').addEventListener('click', function () {
        // คืนค่าทุกช่อง input กลับค่าเดิม
        // for (const id in originalValues) {
        //     const el = document.getElementById(id);
        //     if (el) el.value = originalValues[id];
        // }

        toggleEditMode();
        location.reload();
    });
    const API_BASE_URL = "{{ env('APP_URL') }}/api";
    // localStorage.setItem('name', document.getElementById('name').value);
    document.getElementById('saveBtn').addEventListener('click', function () {
    if (!editMode) {
            toggleEditMode();
            return;
        }
        const getValue = id => {
            const el = document.getElementById(id);
            if (!el) return '';
            return el.value?.trim?.() ?? el.innerText?.trim?.() ?? '';
        };

        const formData = new FormData();
        formData.append('description', getValue('description'));
        formData.append('email', getValue('email'));
        formData.append('youtube_url', getValue('youtube_url'));
        formData.append('facebook_url', getValue('facebook_url'));
        formData.append('twitter_url', getValue('twitter_url'));
        formData.append('username', getValue('username'));
        formData.append('phone', getValue('phone'));
        const teacherId = document.getElementById('teacher_id')?.value ?? '';
        if (teacherId) formData.append('id', teacherId);
    // const getText = id => document.getElementById(id)?.innerText?.trim() ?? '';

    // const formData = new FormData();
    // formData.append('name', getValue('name'));
    // // formData.append('title', getText('title'));
    // formData.append('description', getText('description'));
    // formData.append('email', getText('email'));
    // formData.append('youtube_url', getText('youtube_url'));
    // formData.append('facebook_url', getText('facebook_url'));
    // formData.append('twitter_url', getText('twitter_url'));
    // formData.append('username', getText('username'));
    // formData.append('phone', getText('phone'));
    // formData.append('_token', '{{ csrf_token() }}');
   
    // ✅ แนบไฟล์เฉพาะตอนบันทึก
    const profileImage = document.getElementById('hero_image_input').files[0];
    const videoFile = document.getElementById('video_input').files[0];

    if (profileImage) formData.append('hero_image', profileImage);
    if (videoFile) formData.append('video_url', videoFile);

    fetch(`${API_BASE_URL}/teacher/inline`, {
        method: 'POST',
        body: formData
    })
    .then(res => res.json())
    .then(res => {
        if (res.status === 'updated' || res.status === 'created') {
            alert('✅ บันทึกสำเร็จ');
            location.reload(); // หรือเปลี่ยนปุ่มกลับเป็น “แก้ไข”
        } else {
            alert('❌ เกิดข้อผิดพลาด');
        }
    }).catch(err => {
    console.error('❌ Fetch error:', err);
    alert('❌ ไม่สามารถเชื่อมต่อเซิร์ฟเวอร์');
});
});
let selectedSlot = 'main'; // fallback
// document.querySelectorAll('.course-box[data-slot]').forEach(box => {
//     box.addEventListener('click', function () {
//         selectedSlot = this.getAttribute('data-slot') || 'main';
//     });
// });
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);
        });
    }
});
function setSelectedSlot(slot) {
    selectedSlot = slot;
    console.log("Selected slot:", selectedSlot);
}
// document.addEventListener('DOMContentLoaded', function () {
    // Listen to all buttons that open the delete modal
    
    const deleteModal = document.getElementById('deleteCourseModal');

    if (deleteModal) {
      document.addEventListener('click', function (e) {
            const target = e.target.closest('[data-bs-target="#deleteCourseModal"]');
            if (!target) return;

            const courseId = target.getAttribute('data-course-id');
            const slot = target.getAttribute('data-slot');

            const confirmBtn = document.getElementById('confirmDeleteCourse');
            if (confirmBtn) {
                confirmBtn.setAttribute('data-course-id', courseId);
                confirmBtn.setAttribute('data-slot', slot);
            }
        });
    }
    const APP_URL = "{{ env('APP_URL') }}";

    document.getElementById('confirmDeleteCourse').addEventListener('click', function () {
        const courseId = this.getAttribute('data-course-id');
        const slot = this.getAttribute('data-slot');

        fetch(`${API_BASE_URL}/delete-recommended-course`, {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({ course_id: courseId, slot: slot })
        })
        .then(res => res.json())
        .then(res => {
            if (res.status === 'success') {
                alert('✅ Course deleted successfully');
                const slot = this.getAttribute('data-slot'); // Get slot again
                if(slot != 'main'){
                    const container = document.getElementById(`slot-${slot}`);
                    if (container) {
                        container.innerHTML = `
                            <img src="${APP_URL}/images/${slot}.png" class="ranking-badge position-absolute" style="top: ${slot === 'rank1' ? '-30px' : '-10px'}; right: 20px;">
                            <div class="course-box bg-light p-4 pt-4 rounded"
                                data-bs-toggle="modal"
                                data-bs-target="#courseSelectModal"
                                data-slot="${slot}">
                                <i class="bi bi-play-circle fs-1"></i>
                                <div class="mt-2">เพิ่มคอร์สของคุณ</div>
                            </div>
                            
                        `;
                    }
                }else{
                     const card = document.getElementById('recommendedCourseCard');
                      if (card) card.remove();
                     // Create a new empty course card to append
                const emptyCard = document.createElement('div');
                emptyCard.id = 'recommendedCourseCardempty';
                emptyCard.classList.add('col-md-6', 'p-4', 'bg-secondary', 'text-white', 'd-flex', 'flex-column', 'align-items-center', 'justify-content-center', 'text-center');

                emptyCard.innerHTML = `
                    <span class="badge bg-white text-dark mb-3 rounded-pill px-3 py-2 shadow-sm">
                        <strong>Recommended</strong>
                    </span>
                    <div class="text-white mb-3">
                        <i class="bi bi-play-circle" style="font-size: 2rem;" data-bs-toggle="modal" data-bs-target="#courseSelectModal"></i><br>
                        เพิ่มคอร์สของคุณ
                    </div>
                    <a href="#" class="btn btn-info shadow">Register Now</a>
                `;
                const emptyCardright = document.createElement('div');
                emptyCardright.id = 'recommendedCourseCard';
                emptyCardright.classList.add('w-100');

                emptyCardright.innerHTML = `
                    <div class="d-flex align-items-center justify-content-center bg-light text-muted text-center" style="min-height: 300px;">

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

                // Append the empty card to the parent container (you need to ensure this parent container exists)
                const parentContainer = document.getElementById('recommendSec');
                if (parentContainer) {
                    parentContainer.appendChild(emptyCard);
                    parentContainer.appendChild(emptyCardright);
                }   
                
                    //  location.reload();
                }
            } else {
                alert('❌ Error deleting course');
            }
        })
        .catch(err => {
            console.error('❌ Error:', err);
            alert('❌ An error occurred while deleting the course');
        });

        const modalEl = document.getElementById('deleteCourseModal');
        if (modalEl) {
            const modal = bootstrap.Modal.getInstance(modalEl);
            modal.hide();
        }
    });
// });
document.getElementById('confirmCourseSelect').addEventListener('click', function () {
        const selectedRadio = document.querySelector('input[name="selected_course"]:checked');
        if (!selectedRadio) return alert("กรุณาเลือกคอร์ส");

        const courseId = selectedRadio.value;
        const userId = document.getElementById('teacher_id').value; // assume this is logged-in teacher
        const slot = selectedSlot; // or dynamic
        if (!userId) return alert("กรุณาบันทึกโปรไฟล์ครูก่อน");
        fetch(`${API_BASE_URL}/store-recommended-course`, {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
    'Content-Type': 'application/json',
            },
            body: JSON.stringify({ user_id: userId, course_id: courseId, slot })
        })
        .then(res => res.json())
        .then(res => {
             if (res.status === 'success') {
            alert('✅ บันทึกคอร์สเรียบร้อย');
                // location.reload();
        // Optional: close the modal
        const modal = bootstrap.Modal.getInstance(document.getElementById('courseSelectModal'));
        modal.hide();

        // Inject new course card
            // const slotCard = document.querySelector(`[data-slot="${selectedSlot}"]`).parentElement;
            const slotCard = document.getElementById(`slot-${selectedSlot}`);
        const card = document.getElementById('recommendedCourseCard');
        // const cardempty = document.getElementById('recommendedCourseCardempty');
        const hasRecommendedCourse = {{ empty($recommendedCourse) ? 'false' : 'true' }};
         if(hasRecommendedCourse == true){
                const cardempty = document.getElementById('recommendedCourseCardempty');
                if (cardempty) cardempty.remove();
            }
         // inject new course
         const limitedDescription = (res.data.description && res.data.description.length > 30)
    ? res.data.description.substring(0, 30) + '...'
    : (res.data.description || ''); 
        if(slot=='main'){
            // @if (empty($recommendedCourse))
            // if(hasRecommendedCourse){
            //     const cardempty = document.getElementById('recommendedCourseCardempty');
            //     cardempty.remove();
            // }
            @if (empty($recommendedCourse))
                const cardempty = document.getElementById('recommendedCourseCardempty');
                if (cardempty) cardempty.remove();
            @endif

           
            // if (cardempty) {
                // cardempty.remove();
            // }
            // @endif
            // location.reload();
            card.innerHTML = `
            <div class="w-100 position-relative overflow-hidden rounded"
                style="background-image: url('${res.data.image}');
                    background-size: cover;
                    background-position: center;
                    min-height: 400px;">

                <!-- 50% dark overlay on the left -->
                <div class="position-absolute top-0 start-0 h-100"
                    style="width: 50%; background-color: rgba(0,0,0,0.5); z-index: 1;"></div>

                <!-- Foreground content inside overlay -->
                <div class="position-relative text-white d-flex flex-column justify-content-center"
                    style="max-width: 50%; height: 100%; padding: 2rem; z-index: 2;">

                    <!-- Edit button -->
                    <div class="position-absolute top-0 end-0 m-2">
                        <button class="btn btn-light btn-sm" data-bs-toggle="modal" data-bs-target="#courseSelectModal" onclick="setSelectedSlot('${selectedSlot}')">✏️ แก้ไข</button>
                        <!-- <button class="btn btn-danger btn-sm">🗑 ลบ</button> -->
                        <button class="btn btn-danger btn-sm" data-bs-toggle="modal" data-bs-target="#deleteCourseModal"
                    data-course-id="${courseId}" data-slot="main">🗑 ลบ</button>
                    </div>

                    <div class="py-4"></div>

                    <span class="badge bg-white text-dark mb-2 rounded-pill px-3 py-2 shadow-sm" style="max-width:200px;align-self:center;">
                        <strong>Recommended</strong>
                    </span>

                    <h3 class="fw-bold text-white text-center">${res.data.name}</h3>
                    <p class="text-white-50 text-center">${limitedDescription ?? '—'}</p>

                    <a href="#" class="btn btn-info mt-3" style="width: fit-content; align-self: center;">Register Now</a>
                </div>

                <!-- Teacher badge -->
                <div class="position-absolute bottom-0 end-0 m-3 bg-dark text-white rounded-pill px-3 py-1" style="z-index: 2;">
                    Dr. ${res.data.teacher_name ?? '-'}
                </div>
            </div>
        `;
        }else{
            slotCard.innerHTML = `
            <div id="slot-${selectedSlot}" class="position-relative">
                <img src="{{ env('APP_URL') }}/images/${selectedSlot}.png" class="ranking-badge position-absolute" style="top: ${selectedSlot === 'rank1' ? '-30px' : '-5px'}; right: 10px;">
                <div class="bg-white rounded shadow text-start position-relative">
                <div class="w-100">
                    <img src="${res.data.image}" class="img-fluid rounded mb-3">
                  </div>  
                  <div class="w-100 px-3 py-2" style="height: 240px">
                    <small class="text-muted">${res.data.category_name || '-'}</small>
                    <h5 class="fw-bold">${res.data.name || '-'}</h5>
                    <p class="text-muted small" style="height: 80px">${limitedDescription ?? '-'}</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">
                        <small><img src="/images/avatar.png" width="24" class="rounded-circle me-1"> Dr. ${res.data.teacher_name || '-'}</small>
                        <span class="text-success fw-bold">${res.data.price}</span>
                    </div>
                   <button class="btn btn-light btn-sm position-absolute top-0 start-0 m-1"
                        data-bs-toggle="modal"
                        data-bs-target="#courseSelectModal"
                        data-slot="${selectedSlot}"
                        onclick="setSelectedSlot('${selectedSlot}')">✏️</button>
                    <button class="btn btn-light btn-sm position-absolute top-0 start-1 m-1"
                            data-bs-toggle="modal"
                            data-bs-target="#deleteCourseModal"
                            data-course-id="${courseId}"
                            data-slot="${selectedSlot}" style="left:40px;width:36px;">🗑</button>
                    </div>        
                </div>
            </div>
            `;
        }
    } else {
        alert('❌ ไม่สามารถบันทึกได้');
    }
// });
        })
        .catch(err => {
            console.error('❌', err);
            alert('❌ เกิดข้อผิดพลาด',err);
        });
    });

    // Initial disable
    document.addEventListener('DOMContentLoaded', () => {
        document.querySelectorAll('[data-editable]').forEach(el => {
            el.contentEditable = false;
            el.style.border = 'none';
        });
        document.getElementById('hero_image_container').onclick = null;
        document.getElementById('hero_image_container').style.cursor = 'auto';

        // document.getElementById('video_container').style.cursor = 'not-allowed';
        document.getElementById('video_container').onclick = null;
        
    });
</script>
@endsection