@extends('frontend.maintemplate.maintemplate')

@section('title', 'Course Details' . ' :: AgeLess Institute')

@section('content')
<style>
    .practical-hours-tab-content table .custom-practical-row td {
        background-color: #E1F0E9 !important;
        border: none !important;
        padding-top: 15px !important;
    }
    .practical-hours-tab-content table td:first-child  {
        border-bottom-left-radius: 25px;
        border-top-left-radius: 25px;
    }
    .practical-hours-tab-content table td:last-child  {
        border-bottom-right-radius: 25px;
        border-top-right-radius: 25px;
    }
    .video-play-btn[disabled] {
        opacity: 0.5;
        cursor: not-allowed;
        pointer-events: none;
        background-color: rgb(225, 240, 233);
        color: #666;
        border: 1px solid #1987ee;
    }

    .view-pdf-btn[disabled] {
        opacity: 0.5;
        cursor: not-allowed;
        pointer-events: none;
        background-color: rgb(225, 240, 233);
        color: #666;
        border: 1px solid #1987ee;
    }

    .my-courses-details-tabs-button-wrapepr .my-courses-tab-content-wrapepr .my-courses-tab-content-inner .tab-content-wrapepr .table-data-wrapper .table-details-section table tr td {
        text-overflow: unset !important;
    }

    .my-courses-details-tabs-button-wrapepr .my-courses-tab-content-wrapepr .my-courses-tab-content-inner .tab-content-wrapepr .table-data-wrapper .table-details-section table tr td .link-wrapper {
        font-size: 17px !important;
    }

    .my-courses-details-tabs-button-wrapepr .my-courses-tab-content-wrapepr .my-courses-tab-content-inner .tab-content-wrapepr .table-data-wrapper .table-details-section table tr td .icon-wrapper {
        font-size: 17px;
    }

    .custom-table td:nth-child(1),
    .custom-table th:nth-child(1) {
        width: 20%;
    }

    .custom-table td:nth-child(2),
    .custom-table th:nth-child(2) {
        width: 25%;
    }

    .custom-table td:nth-child(3),
    .custom-table th:nth-child(3) {
        width: 35%;
    }

    .custom-table td:nth-child(4),
    .custom-table th:nth-child(4) {
        width: 20%;
    }

    .my-courses-details-tabs-button-wrapepr .my-courses-tab-content-wrapepr .my-courses-tab-content-inner .tab-content-wrapepr .table-data-wrapper .table-details-section table tr td .icon-text {
        font-size: 17px;
    }

    .watch-video-icon {
        height: 15px !important;
        width: 15px !important;
    }

    #flipbookModal,
    #flipbookModal * {
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    /* 🔥 Screenshot protection overlay */
    .screen-protect::before {
        content: '';
        position: fixed;
        inset: 0;
        background: #000;
        z-index: 999999;
    }

</style>

    <!-- My courses details top section  -->
    <div class="my-courses-details-top-section">
        <div class="container-fluid">
            <div class="my-courses-details-top-inner">
                <div class="image-title-progress-wrapper">
                    <div class="image-wrapper">
                        <img src="{{ asset('storage/' . $checkCoursePurchase->course->thumbnail_image) }}"
                            alt="{{ $checkCoursePurchase->course->name }}">
                    </div>
                    <div class="right-details-section">
                        <h6>Course Program</h6>
                        <h4>{{ $checkCoursePurchase->course->subcategory->name ?? '' }}</h4>
                        @php
                            $progress = $progressData[$checkCoursePurchase->course->id] ?? 0;
                            $course = $checkCoursePurchase->course;
                        @endphp
                        <div class="progress-completed-wrapepr">
                            <div class="progress-wrapper">
                                <p class="complete-progress">{{ $progress }}% Complete</p>
                                <div class="progress">
                                    <div class="progress-bar" role="progressbar" aria-label="Example with label"
                                        style="width: {{ $progress }}%;" aria-valuenow="{{ $progress }}"
                                        aria-valuemin="0" aria-valuemax="100">

                                    </div>
                                </div>
                            </div>
                            <div class="completed-wrapper">
                                @if ($progress == 100)
                                    <div class="icon-wrapper">
                                        <span class="material-icons">done</span>
                                    </div>
                                    <p>Completed</p>
                                @else
                                    <p style="color: #F2B100">In Progress</p>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- My courses details top section  -->

    <div class="my-courses-details-tabs-button-wrapepr">
        <div class="my-courses-details-tabs-button-inner">
            <div class="container-fluid">
                <div class="inner-wrapper">
                    <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
                        {{-- <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill"
                                data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home"
                                aria-selected="true">
                                <div class="courses-tabs-button-inenr">
                                    <div class="image-wrapepr">
                                        <img src="{{ asset('frontend/assets/images/others/courses-material-icon.png') }}"
                                            alt="">
                                    </div>
                                    Course Material
                                </div>
                            </button>
                        </li> --}}
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="pills-profile-tab" data-bs-toggle="pill"
                                data-bs-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile"
                                aria-selected="true">
                                <div class="courses-tabs-button-inenr">
                                    <div class="image-wrapepr">
                                        <img src="{{ asset('frontend/assets/images/others/courses-practical-sessions.png') }}"
                                            alt="">
                                    </div>
                                    Theory Material
                                </div>
                            </button>
                        </li>
                        {{-- @if($checkCoursePurchase->course->course_type === "practical") --}}
                            {{-- <li class="nav-item" role="presentation">
                                <button class="nav-link schedule-session-link" id="pills-contact-tab" data-bs-toggle="pill"
                                    data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact"
                                    aria-selected="false">
                                    <div class="courses-tabs-button-inenr">
                                        <div class="image-wrapepr">
                                            <img src="{{ asset('frontend/assets/images/others/courses-schedule-sessions.png') }}"
                                                alt="">
                                        </div>
                                        Scheduled Sessions
                                    </div>
                                </button>
                            </li> --}}
                        {{-- @endif --}}
                    </ul>
                </div>
            </div>
        </div>
        <div class="my-courses-tab-content-wrapepr">
            <div class="container-fluid">
                <div class="my-courses-tab-content-inner">
                    <div class="tab-content" id="pills-tabContent">
                        <div class="tab-pane fade" id="pills-home" role="tabpanel"
                            aria-labelledby="pills-home-tab" tabindex="0">
                            <div class="tab-content-wrapepr">
                                <div class="tracking-material-wrapper">
                                    <div class="top-icon-wrapper">
                                        <img src="{{ asset('frontend/assets/images/others/tracking-icon.png') }}"
                                            alt="">
                                    </div>
                                    <div class="tracking-link-wrapepr">
                                        <a href="{{ $checkCoursePurchase->tracking_url ?? '' }}" target="_blank">Click Here
                                            Track Your
                                            Reading
                                            Material </a>
                                    </div>
                                    <div class="track-id-wrapper">
                                        <p>Track ID: <span>{{ $checkCoursePurchase->tracking_id ?? '' }}</span></p>
                                    </div>
                                </div>
                                <div class="link-wrapper">
                                    <a href="#" id="completeTheoryLink">Complete Theory</a>
                                </div>
                            </div>
                        </div>

                        <div class="tab-pane fade show active" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab"
                            tabindex="0">
                            <div class="tab-content-wrapepr">
                                <div class="course-title-wrapper">
                                    <h5>{{ $checkCoursePurchase->course->name ?? '' }} Course</h5>
                                </div>

                                <div class="table-data-wrapper">
                                    @php
                                        $canStartNextTopic = true; // First topic always starts
                                        $topicCount = 1;
                                        $courseFullyCompleted = true;
                                        $blockSubsequentTopics = false;
                                    @endphp

                                    @foreach ($sortedCoursePurchaseTopics as $courseTopic)
                                        @php
                                            // if ($courseTopic->type === 'practical_only') {
                                            //     continue;
                                            // }

                                            $topicId = $courseTopic->topic->id;
                                            $isPurchasedTopic = in_array($topicId, $purchasedTopics);
                                            $statuses = $topicProgress[$topicId] ?? [];

                                            $status1 = $statuses['read_book'] ?? 'pending';
                                            $status2 = $statuses['watch_video'] ?? 'pending';
                                            $status3 = $statuses['mcq'] ?? 'pending';

                                            // NEW: Check MCQ pass status (preserves your existing exam_master logic)
                                            // $mcqPassed = isset($examScores[$topicId]) && $examScores[$topicId] >= env('EXAM_PASS_SCORE');
                                            $mcqPassed = isset($examAttempts[$topicId]) && $examAttempts[$topicId]->firstWhere('status', 'pass') !== null;
                                            $currentTopicFailed = $status3 === 'complete' && !$mcqPassed;

                                            // Modified progression logic
                                            if ($blockSubsequentTopics) {
                                                $canStartTopic = false;
                                            } else {
                                                $canStartTopic = $canStartNextTopic;
                                            }

                                            // Set flag if this topic failed
                                            if ($currentTopicFailed) {
                                                $blockSubsequentTopics = true;
                                            }

                                            // $filename = $courseTopic->topic->video->video_upload ?? null;
                                            $hasVideo = $courseTopic->topic->video->count() > 0 ?? null;

                                            $btnMap = function ($status) {
                                                return [
                                                    'text' =>
                                                        $status === 'pending'
                                                            ? 'Start'
                                                            : ($status === 'inprogress'
                                                                ? 'Complete'
                                                                : 'Completed'),
                                                    'class' =>
                                                        $status === 'inprogress'
                                                            ? 'btn-success'
                                                            : ($status === 'complete'
                                                                ? 'btn-secondary'
                                                                : 'btn-primary'),
                                                ];
                                            };

                                            $b1 = $btnMap($status1);
                                            $b2 = $btnMap($status2);
                                            $b3 = $btnMap($status3);

                                            // Only allow access if previous topic was fully complete
                                            // $canStartTopic = $canStartNextTopic;
                                            $videoStepEnabled = $hasVideo && $checkCoursePurchase->course->is_government_course == 0;
                                            // Check if this topic is completed
                                            $statusesToCheck = [$status1, $status3];
                                            if ($videoStepEnabled) {
                                                $statusesToCheck[] = $status2;
                                            }

                                            $isCurrentTopicComplete =
                                                !in_array('pending', $statusesToCheck) &&
                                                !in_array('inprogress', $statusesToCheck);

                                            // 👇 Add this line
                                            if (!$isCurrentTopicComplete) {
                                                $courseFullyCompleted = false;
                                            }

                                            // Prepare for next topic
                                            $canStartNextTopic = $isCurrentTopicComplete && $mcqPassed;
                                        @endphp
                                        {{-- Now call topic_card --}}
                                        @include(
                                            'frontend.course_detail.topic_card',
                                            compact(
                                                'course',
                                                'courseTopic',
                                                'status1',
                                                'status2',
                                                'status3',
                                                'b1',
                                                'b2',
                                                'b3',
                                                'checkCoursePurchase',
                                                'canStartTopic',
                                                'hasVideo',
                                                'topicCount',
                                                'currentTopicFailed',
                                                ))
                                        @php $topicCount++; @endphp
                                    @endforeach


                                    <div class="link-wrapper">
                                        @if($checkCoursePurchase->course->is_government_course == 0)
                                            @if ($courseFullyCompleted)
                                                @if ($courseExamPassed)
                                                    <button id="completed-btn" type="button">Completed</button>
                                                @else
                                                    <form action="{{ route('student.exam.store') }}" method="POST"
                                                        class="topic-progress-form">
                                                        @csrf
                                                        <input type="hidden" name="student_id" value="{{ Auth::id() }}">
                                                        <input type="hidden" name="course_id"
                                                            value="{{ $checkCoursePurchase->course->id }}">
                                                        <input type="hidden" name="course_purchase_id"
                                                            value="{{ $checkCoursePurchase->id ?? '' }}">
                                                        <button type="submit">Examination</button>
                                                    </form>
                                                @endif
                                            @else
                                                <button class="btn" disabled style="padding: 7px 12px;">Examination</button>
                                            @endif
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>

                        {{-- @php
                            $totalPracticalHours = $checkCoursePurchase->coursePurchaseTopics->sum(function ($purchaseTopic) {
                                return $purchaseTopic->topic->practical_hours ?? 0;
                            });
                        @endphp --}}

                        <div class="tab-pane fade" id="pills-contact" role="tabpanel"
                            aria-labelledby="pills-contact-tab" tabindex="0">
                            <div class="tab-content-wrapepr schedule-tab-content-wrapper">
                                <div class="schedule-session-content-wrapper">
                                    <div class="top-inner-tabs-time-button-wrapper">
                                        <div class="left-time-remaining-wrapper">
                                            <div class="inner-wrapper">
                                                <div class="image-wrapper">
                                                    <img src="{{ asset('frontend/assets/images/others/hours-count.png') }}" alt="">
                                                </div>
                                                <h5>Remaining Hours : <span>{{ fmod($totalHours, 1) == 0 ? intval($totalHours) : number_format($totalHours, 1) }}</span> Hrs</h5>

                                            </div>
                                        </div>
                                        <div class="right-side-viewBooking-buyMoreHours-section">
                                            <ul class="nav nav-pills" id="pills-inner-tab" role="tablist">
                                                <li>
                                                    <a href="javascript:void(0)" class="nav-link" id="view-bookings-link">
                                                        <div class="courses-tabs-button-inenr">
                                                            <div class="image-wrapepr">
                                                                <img src="{{ asset('frontend/assets/images/others/courses-schedule-sessions.png') }}" alt="">
                                                            </div>
                                                            View Your Bookings
                                                        </div>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="#staticBackdropBuyPractical" data-bs-toggle="modal" data-bs-target="#staticBackdropBuyPractical" class="nav-link">
                                                        <div class="courses-tabs-button-inenr">
                                                            Buy More Practical Hours
                                                        </div>
                                                    </a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                    <div class="schedule-contents-section" id="schedule-contents-section">

                                    </div>

                                    <!-- New default page  -->
                                    <div class="practical-hours-tab-content" id="main-content-schedule">
                                        <div class="table-responsive">
                                            <table class="table">
                                                <tr>
                                                    <th>Topic</th>
                                                    <th>Total Practical Hrs</th>
                                                    <th>Model Requirement</th>
                                                    <th>Scheduling</th>
                                                </tr>

                                                @php
                                                    $isLockedAfterForfeit = false;
                                                    $forfeitId = "";
                                                    $allPreviousTopicsScheduled = true;
                                                    $lastCompletedSessionId = '';
                                                    $count = 1;
                                                @endphp

                                                @foreach ($sortedCoursePurchaseTopics as $key => $courseTopic)
                                                    @php
                                                        $sessions = $sessionsByTopic[$courseTopic->topic_id] ?? collect();


                                                        // $highestScore = \App\Models\ExamMaster::where('course_purchase_id', $checkCoursePurchase->id)
                                                        //         ->where('topic_id', $courseTopic->topic_id)
                                                        //         ->max('score');

                                                        // $isTheoryExamPass = $highestScore !== null && $highestScore >= env('EXAM_PASS_SCORE');

                                                        // $isTheoryExamPass = $courseTopic->type === 'practical_only' ? true : (isset($examAttempts[$courseTopic->topic_id]) && $examAttempts[$courseTopic->topic_id]->firstWhere('status', 'pass') !== null);

                                                        $isTheoryExamPass = isset($examAttempts[$courseTopic->topic_id]) && $examAttempts[$courseTopic->topic_id]->firstWhere('status', 'pass') !== null;

                                                        // Skip this topic if no sessions are available
                                                        if ($sessions->isEmpty()) continue;

                                                        // Check if all previous topics are fully scheduled


                                                        // foreach ($checkCoursePurchase->coursePurchaseTopics as $prevKey => $prevTopic) {
                                                        //     if ($prevKey >= $key) break;

                                                        //     $prevSessions = $sessionsByTopic[$prevTopic->topic_id] ?? collect();

                                                        //     foreach ($prevSessions as $prevSession) {
                                                        //         $prevSchedule = $prevSession->practicalSchedules->where('secdule_status', 'Pending')->where('course_purchase_id',$checkCoursePurchase->id)->first();
                                                        //         if (!$prevSchedule) {
                                                        //             $allPreviousTopicsScheduled = false;
                                                        //             break 2;
                                                        //         }
                                                        //     }
                                                        // }


                                                        // Skip current topic if previous topics are not fully scheduled
                                                        // if (!$allPreviousTopicsScheduled) continue;

                                                        // Calculate total hours for this topic
                                                        $totalSessionMinutes = $sessions->sum(function($session) {
                                                            return $session->practicalsession->time ?? 0;
                                                        });

                                                        $totalSessionHours = round($totalSessionMinutes / 60, 1);

                                                    @endphp

                                                    <tr class="custom-practical-row">
                                                        <td>{{ $count++ }}. {{ $courseTopic->topic->title }}</td>
                                                        <td>Practical Hrs = {{ $totalSessionHours ?? 0 }} Hrs</td>
                                                        <td></td>
                                                        <td></td>
                                                    </tr>

                                                    @php
                                                        $canScheduleThis = true; // Allow first session in this topic
                                                        $currentScheduledId = "";
                                                    @endphp

                                                    @foreach ($sessions as $session)
                                                        @php
                                                            $schedule = $session->practicalSchedules->whereIn('secdule_status', ['Pending', 'Forfeited'])->whereNull('extra_practical_hour_id')->where('course_purchase_id',$checkCoursePurchase->id)->last();
                                                            $rescheduleBeforeHours = env('RESCHEDULE_BEFORE_HOURS');

                                                            $canReschedule = false;
                                                            $isForfeited = false;
                                                            $sessionStart = "";
                                                            if ($schedule && $schedule->slot && $schedule->date) {
                                                                $currentScheduledId = $schedule->id;
                                                                $sessionStart = \Carbon\Carbon::parse($schedule->date . ' ' . $schedule->slot->start_time);
                                                                $now = \Carbon\Carbon::now();
                                                                $canReschedule = $now->diffInHours($sessionStart, false) >= $rescheduleBeforeHours;
                                                            }

                                                            if (!empty($sessionStart) && $sessionStart->lt($now)) {
                                                                $isForfeited = true;
                                                                $isLockedAfterForfeit = true;
                                                                if($forfeitId==""){
                                                                    $forfeitId = $session->id;
                                                                }
                                                            }

                                                            $session->can_reschedule = $canReschedule;
                                                            $sessionTime = round($session->practicalsession->time / 60, 2);

                                                        @endphp

                                                        <tr>
                                                            <td>{{ $session->practicalsession->title }}</td>
                                                            <td>{{ $sessionTime }} Hrs</td>
                                                            <td>
                                                                <div class="information-wrapper">
                                                                    <img src="{{ asset('frontend/assets/images/others/information.png') }}" alt="">
                                                                    {{ $session->model_requirement }}
                                                                </div>
                                                            </td>
                                                            <td>
                                                                @if ($schedule)
                                                                    <div class="schedule-reschedule-wrapper">
                                                                        @if ($isForfeited)
                                                                            <div class="icon-wrapper">
                                                                                <span class="material-icons" style="background-color: red">done</span>
                                                                            </div>
                                                                            <div class="links-wrapper">
                                                                                <a href="javascript:void(0);" class="text-center">Forfeited</a>
                                                                                {{-- <a href="#staticBackdropBuyPractical" data-bs-toggle="modal" data-bs-target="#staticBackdropBuyPractical" class="main-schedule-link disabled" data-bs-toggle="tooltip" title="Your hours are forfeited due to no show.">
                                                                                    Buy Practical Hours
                                                                                </a> --}}
                                                                                <a href="#staticBackdropBuyPractical"
                                                                                    data-bs-toggle="modal"
                                                                                    data-bs-target="#staticBackdropBuyPractical"
                                                                                    class="nav-link"
                                                                                    data-session-id="{{ $session->practicalsession->id ?? '' }}"
                                                                                    data-is-forfeited="{{ $isForfeited ? '1' : '0' }}"
                                                                                    title="Your hours are forfeited due to no show.">
                                                                                    <div class="courses-tabs-button-inenr">Buy Practical Hours</div>
                                                                                </a>
                                                                            </div>
                                                                        @else
                                                                            <div class="icon-wrapper">
                                                                                <span class="material-icons">done</span>
                                                                            </div>
                                                                            <div class="links-wrapper">

                                                                                @if(!$isLockedAfterForfeit)
                                                                                    <a href="javascript:void(0);">Scheduled</a>
                                                                                    @if ($session->can_reschedule)
                                                                                        <div class="links-wrapper">
                                                                                            <a href="javascript:void(0);" class="main-schedule-link reschedule-session-links"
                                                                                            data-id="{{ $session->id }}"
                                                                                            data-topic-id="{{ $session->topic_id }}"
                                                                                            data-max-students="{{ $session->max_students_per_slot }}"
                                                                                            data-course-purchase-id="{{ $checkCoursePurchase->id }}"
                                                                                            data-schedule-id="{{ $schedule->id }}">Reschedule ></a>
                                                                                        </div>
                                                                                    @else
                                                                                        <a href="#staticBackdrop" data-bs-toggle="modal" data-bs-target="#staticBackdrop" class="open-reschedule-modal" data-id="{{ $session->id }}" data-topic-id="{{ $session->topic_id }}" data-course-purchase-id="{{ $checkCoursePurchase->id }}">Reschedule ></a>
                                                                                    @endif
                                                                                @else
                                                                                    <a href="javascript:void(0);" class="disabled" style="pointer-events: none; opacity: 0.5;">Scheduled</a>
                                                                                    <a href="#staticBackdrop" class="open-reschedule-modal disabled" style="pointer-events: none; opacity: 0.5;">Reschedule ></a>
                                                                                @endif
                                                                            </div>
                                                                        @endif
                                                                    </div>
                                                                    @php
                                                                        $canScheduleThis = true;
                                                                    @endphp
                                                                @else
                                                                {{-- @dd(!$isLockedAfterForfeit) --}}
                                                                    @if (!$isLockedAfterForfeit && $canScheduleThis && ($allPreviousTopicsScheduled) && $totalHours >= $sessionTime && $isTheoryExamPass)
                                                                        <div class="schedule-reschedule-wrapper schedule-now-wrapper">
                                                                            <div class="links-wrapper">
                                                                                <a href="javascript:void(0);" class="main-schedule-link schedule-session-links"
                                                                                data-id="{{ $session->id }}"
                                                                                data-topic-id="{{ $session->topic_id }}"
                                                                                data-max-students="{{ $session->max_students_per_slot }}"
                                                                                data-course-purchase-id="{{ $checkCoursePurchase->id }}">Schedule Now</a>
                                                                            </div>
                                                                        </div>
                                                                        @php
                                                                            $canScheduleThis = false;
                                                                        @endphp
                                                                    @else
                                                                        <div class="schedule-reschedule-wrapper schedule-now-wrapper">
                                                                            <div class="links-wrapper">
                                                                                <a href="javascript:void(0);" class="main-schedule-link schedule-session-links disabled"
                                                                                style="pointer-events: none; opacity: 0.5;">Schedule Now</a>
                                                                            </div>
                                                                        </div>
                                                                    @endif
                                                                @endif
                                                            </td>
                                                        </tr>
                                                        @php
                                                             if(!isset($schedule) || $schedule->secdule_status == 'Cancel'){
                                                                $allPreviousTopicsScheduled = false;
                                                            }
                                                        @endphp
                                                        @if (!empty($extraPurchasedSession[$session->practicalsession_id] ?? []))
                                                            @foreach ($extraPurchasedSession[$session->practicalsession_id] as $extra)
                                                                @php
                                                                    $schedule = $session->practicalSchedules->whereIn('secdule_status', ['Pending', 'Forfeited'])->where('course_purchase_id',$checkCoursePurchase->id)->where('id', $extra['practical_schedule_id'])->last();
                                                                    // dd($schedule);

                                                                    $rescheduleBeforeHours = env('RESCHEDULE_BEFORE_HOURS');

                                                                    $canReschedule = false;
                                                                    $isForfeited = false;

                                                                    $sessionStartExtra = "";
                                                                    if ($schedule && $schedule->slot && $schedule->date) {
                                                                        $sessionStartExtra = \Carbon\Carbon::parse($schedule->date . ' ' . $schedule->slot->start_time);
                                                                        $now = \Carbon\Carbon::now();
                                                                        $canReschedule = $now->diffInHours($sessionStartExtra, false) >= $rescheduleBeforeHours;
                                                                    }

                                                                    if (!empty($sessionStartExtra) && $sessionStartExtra->lt($now)) {
                                                                        $isForfeited = true;
                                                                        // $isLockedAfterForfeit = true;
                                                                    }else{
                                                                        $isLockedAfterForfeit = false;
                                                                    }

                                                                    $session->can_reschedule = $canReschedule;
                                                                    $sessionTime = round($session->practicalsession->time / 60, 2);
                                                                    // $canScheduleThis = true;

                                                                @endphp
                                                                <tr class="extra-session-row">
                                                                    <td>{{ $session->practicalsession->title }}</td>
                                                                    <td class="text-danger"><span>Extra : </span>{{ $extra['time'] / 60 }} Hrs</td>
                                                                    <td></td>
                                                                    <td>
                                                                        @if ($schedule)
                                                                            <div class="schedule-reschedule-wrapper ">
                                                                                @if ($isForfeited)
                                                                                    <div class="icon-wrapper">
                                                                                        <span class="material-icons" style="background-color: red">done</span>
                                                                                    </div>
                                                                                    <div class="links-wrapper">
                                                                                        <a href="javascript:void(0);" class="text-center">Forfeited</a>
                                                                                        {{-- <a href="#staticBackdropBuyPractical" data-bs-toggle="modal" data-bs-target="#staticBackdropBuyPractical" class="nav-link" data-bs-toggle="tooltip" data-schedule-id="{{ $schedule->id ?? '' }}" title="Your hours are forfeited due to no show.">
                                                                                            Buy Practical Hours
                                                                                        </a> --}}

                                                                                        <a href="#staticBackdropBuyPractical"
                                                                                            data-bs-toggle="modal"
                                                                                            data-bs-target="#staticBackdropBuyPractical"
                                                                                            class="nav-link"
                                                                                            data-session-id="{{ $session->practicalsession->id ?? '' }}"
                                                                                            data-is-forfeited="{{ $isForfeited ? '1' : '0' }}"
                                                                                            title="Your hours are forfeited due to no show.">
                                                                                            <div class="courses-tabs-button-inenr">Buy Practical Hours</div>
                                                                                        </a>
                                                                                    </div>
                                                                                @else
                                                                                    <div class="icon-wrapper">
                                                                                        <span class="material-icons">done</span>
                                                                                    </div>
                                                                                    <div class="links-wrapper">
                                                                                        @if(!$isLockedAfterForfeit || ($forfeitId==$session->id))
                                                                                            <a href="javascript:void(0);">Scheduled</a>
                                                                                            @if ($session->can_reschedule)
                                                                                                <div class="links-wrapper">
                                                                                                    <a href="javascript:void(0);" class="main-schedule-link reschedule-session-links"
                                                                                                    data-id="{{ $session->id }}"
                                                                                                    data-topic-id="{{ $session->topic_id }}"
                                                                                                    data-max-students="{{ $session->max_students_per_slot }}"
                                                                                                    data-course-purchase-id="{{ $checkCoursePurchase->id }}"
                                                                                                    data-schedule-id="{{ $schedule->id }}"
                                                                                                    data-extra-practical-hour-id="{{ $extra['id'] }}">Reschedule ></a>
                                                                                                </div>
                                                                                            @else
                                                                                                <a href="#staticBackdrop" data-bs-toggle="modal" data-bs-target="#staticBackdrop" class="open-reschedule-modal" data-id="{{ $session->id }}" data-topic-id="{{ $session->topic_id }}" data-course-purchase-id="{{ $checkCoursePurchase->id }}">Reschedule ></a>
                                                                                            @endif
                                                                                        @else
                                                                                            <a href="javascript:void(0);" class="disabled" style="pointer-events: none; opacity: 0.5;">Scheduled</a>
                                                                                            <a href="#staticBackdrop" class="open-reschedule-modal disabled" style="pointer-events: none; opacity: 0.5;">Reschedule ></a>
                                                                                        @endif
                                                                                    </div>
                                                                                @endif
                                                                            </div>
                                                                            @php
                                                                                $canScheduleThis = true;
                                                                            @endphp
                                                                        @else
                                                                            @if ((!$isLockedAfterForfeit || ($forfeitId==$session->id))  && ($allPreviousTopicsScheduled) && $totalHours >= $sessionTime)
                                                                                <div class="schedule-reschedule-wrapper schedule-now-wrapper">
                                                                                    <div class="links-wrapper">
                                                                                        <a href="javascript:void(0);" class="main-schedule-link schedule-session-links"
                                                                                        data-id="{{ $session->id }}"
                                                                                        data-topic-id="{{ $session->topic_id }}"
                                                                                        data-max-students="{{ $session->max_students_per_slot }}"
                                                                                        data-course-purchase-id="{{ $checkCoursePurchase->id }}"
                                                                                        data-schedule-id="{{ $currentScheduledId }}"
                                                                                        data-is-extra-schedule="true"
                                                                                        data-extra-practical-hour-id="{{ $extra['id'] }}">Schedule Now</a>
                                                                                    </div>
                                                                                </div>
                                                                                @php
                                                                                    $canScheduleThis = false;
                                                                                @endphp
                                                                            @else
                                                                                <div class="schedule-reschedule-wrapper schedule-now-wrapper">
                                                                                    <div class="links-wrapper">
                                                                                        <a href="javascript:void(0);" class="main-schedule-link schedule-session-links disabled"
                                                                                        style="pointer-events: none; opacity: 0.5;">Schedule Now</a>
                                                                                    </div>
                                                                                </div>
                                                                            @endif
                                                                        @endif
                                                                    </td>
                                                                </tr>
                                                                @php
                                                                    if(!isset($schedule) || $schedule->secdule_status == 'Cancel'){
                                                                        $allPreviousTopicsScheduled = false;
                                                                    }
                                                                @endphp
                                                            @endforeach
                                                        @endif
                                                    @endforeach
                                                @endforeach
                                            </table>

                                        </div>
                                        <div class="bottom-reschedule-wrapper">
                                            <h5>Want To Reschedule? </h5>
                                            <a href="#staticBackdrop" data-bs-toggle="modal" data-bs-target="#staticBackdrop"  class="open-reschedule-modal" data-course-purchase-id="{{ $checkCoursePurchase->id }}">Contact Us</a>
                                        </div>
                                    </div>

                                    <div class="view-bookings-schedule-wrapper" id="view-your-bookings">
                                        <div class="table-responsive">
                                            <table class="table">
                                                <tr>
                                                    <th>Course Topic</th>
                                                    <th>Date</th>
                                                    <th>Time</th>
                                                    <th>Practical Hours Booked</th>
                                                    <th>Model Requirement</th>
                                                    <th>Status</th>
                                                </tr>
                                                @foreach ($bookedSessions as $key => $bookedSession)
                                                <tr>
                                                    <td><span>{{ $key + 1 }}.</span> {{ $bookedSession->practicalsession->title }}</td>
                                                    <td>
                                                        {{ \Carbon\Carbon::parse($bookedSession->date)->format('d-m-Y') }}

                                                         @php
                                                            $canReschedule = false;
                                                            $rescheduleBeforeHours = env('RESCHEDULE_BEFORE_HOURS', 24); // default to 24 if not set

                                                            if (
                                                                $bookedSession->secdule_status != 'Cancel' && $bookedSession->slot && $bookedSession->date
                                                            ) {
                                                                $sessionStart = \Carbon\Carbon::parse($bookedSession->date . ' ' . $bookedSession->slot->start_time);
                                                                $now = \Carbon\Carbon::now();
                                                                $canReschedule = $now->diffInHours($sessionStart, false) >= $rescheduleBeforeHours;
                                                            }
                                                        @endphp

                                                        @if ($bookedSession->secdule_status != 'Cancel')
                                                            @if ($canReschedule)
                                                                {{-- <a href="#staticBackdrop" data-bs-toggle="modal" data-bs-target="#staticBackdrop">Reschedule ></a> --}}
                                                                <div class="links-wrapper">
                                                                                    <a href="javascript:void(0);" class="main-schedule-link reschedule-session-links"
                                                                                    data-id="{{ $bookedSession->courseAssignSession->id }}"
                                                                                    data-topic-id="{{ $bookedSession->courseAssignSession->topic_id }}"
                                                                                    data-max-students="{{ $bookedSession->courseAssignSession->max_students_per_slot }}"
                                                                                    data-course-purchase-id="{{ $checkCoursePurchase->id }}" data-schedule-id="{{ $bookedSession->id }}">Reschedule ></a>
                                                                                </div>
                                                            @else
                                                                <a href="#staticBackdrop" data-bs-toggle="modal" data-bs-target="#staticBackdrop" class="open-reschedule-modal" data-id="{{ $bookedSession->courseAssignSession->id }}" data-topic-id="{{ $bookedSession->courseAssignSession->topic_id }}" data-course-purchase-id="{{ $checkCoursePurchase->id }}">Reschedule ></a>
                                                            @endif
                                                        @endif

                                                        {{-- @if($bookedSession->secdule_status != 'Cancel')
                                                            <a href="#staticBackdrop" data-bs-toggle="modal" data-bs-target="#staticBackdrop">Reschedule ></a>
                                                        @endif --}}
                                                    </td>
                                                    <td>
                                                        {{-- @php
                                                            $schedule = $bookedSession->slot;
                                                            $start = $end = null;

                                                            if ($schedule) {
                                                                $start = \Carbon\Carbon::parse($schedule->start_time)->format('g:i A');
                                                                $end = \Carbon\Carbon::parse($schedule->end_time)->format('g:i A');
                                                            }
                                                        @endphp

                                                        {{ $start && $end ? $start . ' - ' . $end : 'N/A' }} --}}
                                                        @php
                                                            $slots = $bookedSession->multiSlotBookingForStudent->load('slot');

                                                            $start = $end = null;

                                                            if ($slots && $slots->count() > 0) {

                                                                // sort by slot start time
                                                                $sorted = $slots->sortBy(function ($item) {
                                                                    return $item->slot->start_time;
                                                                });

                                                                $start = \Carbon\Carbon::parse($sorted->first()->slot->start_time)
                                                                            ->format('g:i A');

                                                                $end   = \Carbon\Carbon::parse($sorted->last()->slot->end_time)
                                                                            ->format('g:i A');
                                                            }
                                                        @endphp

                                                        {{ $start && $end ? $start . ' - ' . $end : 'N/A' }}

                                                    </td>
                                                    {{-- <td>{{ $bookedSession->practicalsession->time }} Hrs</td> --}}
                                                    <td>{{ number_format($bookedSession->practicalsession->time / 60, 1) }} Hrs</td>
                                                    <td>{{ $bookedSession->courseAssignSession->model_requirement }}</td>
                                                    <td>{{ $bookedSession->secdule_status }}</td>
                                                @endforeach

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

                                    <!-- Reschedule contact popup  -->
                                    <div class="modal fade rescheduleModal" id="staticBackdrop" data-bs-backdrop="static"
                                        data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel"
                                        aria-hidden="true">
                                        <div class="modal-dialog modal-dialog-centered">
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                        aria-label="Close"><span class="material-symbols-outlined">
                                                            close
                                                        </span></button>
                                                </div>
                                                <div class="modal-body">
                                                    <div class="reschedule-form-wrapper">
                                                        <div class="title-wrapper">
                                                            <h5>Contact Us To Reschedule</h5>
                                                        </div>
                                                        <form action="{{ route('student.reschedule_requests') }}" method="POST">

                                                            @csrf

                                                            <input type="hidden" name="course_assign_session_id" id="inputSessionId">
                                                            <input type="hidden" name="topic_id" id="inputTopicId">
                                                            <input type="hidden" name="course_purchase_id" id="inputCoursePurchaseId">

                                                            <div class="row">
                                                                <div class="col-md-6">
                                                                    <div class="form-group">
                                                                        <label for="">First Name<span class="text-danger">*</span></label></label>
                                                                        <input type="text" class="form-control" name="first_name" required>
                                                                    </div>
                                                                </div>
                                                                <div class="col-md-6"></div>
                                                            </div>
                                                            <div class="row">
                                                                <div class="col-md-6">
                                                                    <div class="form-group">
                                                                        <label for="">Email Address<span class="text-danger">*</span></label>
                                                                        <input type="email" class="form-control" name="email" required>
                                                                    </div>
                                                                </div>
                                                                <div class="col-md-6"></div>
                                                            </div>
                                                            <div class="row">
                                                                <div class="col-md-6">
                                                                    <div class="form-group">
                                                                        <label for="">Phone No.<span class="text-danger">*</span></label>
                                                                        <input type="text" class="form-control" name="phone" required>
                                                                    </div>
                                                                </div>
                                                                <div class="col-md-6"></div>
                                                            </div>

                                                            <div class="form-group">
                                                                <label for="">Reason<span class="text-danger">*</span></label>
                                                                <textarea name="reason" placeholder="Type Here..." class="form-control" required></textarea>
                                                            </div>
                                                            <div class="submit-wrapper">
                                                                <button class="submit_btn" type="submit">Submit</button>
                                                            </div>
                                                        </form>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- Reschedule contact popup  -->

                                    <!-- Buy more practical hours popup  -->
                                    <div class="modal fade" id="staticBackdropBuyPractical" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropBuyPracticalLabel" aria-hidden="true">
                                        <div class="modal-dialog modal-dialog-centered">
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <h5 class="modal-title">Buy More Practical Hours</h5>
                                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                                                        <span class="material-symbols-outlined">close</span>
                                                    </button>
                                                </div>
                                                <div class="modal-body">
                                                    <div class="select-course-title">
                                                        <h5>Select Course</h5>
                                                    </div>
                                                    <div class="select-practical-hours-form">
                                                        <form action="{{ route('student.extra-practical-hours') }}" method="POST">
                                                            @csrf

                                                            <input type="hidden" name="course_purchase_id" value="{{ $checkCoursePurchase->id }}">
                                                            <input type="hidden" name="total_hours" id="inputTotalHours">
                                                            <input type="hidden" name="total_price" id="inputTotalPrice">
                                                            <input type="hidden" name="schedule_id" id="modal_schedule_id">

                                                            <div class="left-select-course-wrapper">
                                                                @foreach ($checkCoursePurchase->coursePurchaseTopics as $key => $courseTopic)
                                                                    @php
                                                                        $sessions = $sessionsByTopic[$courseTopic->topic_id] ?? collect();
                                                                        $uniqueSessions = $sessions->unique(fn($session) => $session->practicalsession->title);
                                                                    @endphp

                                                                    @foreach($uniqueSessions as $session)
                                                                        @php
                                                                            $sessionId = $session->practicalsession->id;
                                                                            $topicTitle = $session->practicalsession->title ?? 'Unknown Topic';
                                                                            $totaltimes = $session->practicalsession->time;
                                                                            $hours = $session->practicalsession->time / 60;

                                                                            // If forfeited, only show the forfeited session
                                                                            // if ($isForfeited && $sessionId != $forfeitedSessionId) {
                                                                            //     continue;
                                                                            // }
                                                                        @endphp

                                                                        <div class="session-wrapper" data-session-id="{{ $sessionId }}">
                                                                            <div class="form-check">
                                                                                <input class="form-check-input session-checkbox" type="checkbox" value="{{ $sessionId }}" name="selected_sessions[]" id="session-{{ $sessionId }}" data-title="{{ $topicTitle }}" data-hours="{{ $hours }}">
                                                                                <label class="form-check-label" for="session-{{ $sessionId }}">
                                                                                    <span>{{ $topicTitle }}</span>
                                                                                    <span>{{ $hours }} Hrs</span>
                                                                                </label>
                                                                                <input type="hidden" name="session_times[{{ $sessionId }}]" value="{{ $totaltimes }}">
                                                                            </div>
                                                                        </div>
                                                                    @endforeach
                                                                @endforeach
                                                            </div>

                                                            <div class="right-selected-course-wrapper">
                                                                <div class="selected-course">
                                                                    <h5>Selected Course</h5>
                                                                    <div class="course-wrapper-details" id="selectedCoursesList" style="list-style: none">
                                                                        <!-- Dynamically filled via JS -->
                                                                    </div>
                                                                </div>

                                                                <div class="totals-wrapper">
                                                                    <div class="inner-wrapper">
                                                                        <div class="total-box" id="totalHours"></div>
                                                                        <div class="total-box">
                                                                            <h6>Charges Per Hour</h6>
                                                                            <h6>₹ {{ number_format(env('CHARGE_PER_HOUR'), 2) }}</h6>
                                                                        </div>
                                                                        <div class="total-box" id="totalPrice"></div>
                                                                    </div>

                                                                    <div class="submit-wrapper">
                                                                        <button class="submit_btn">
                                                                            <img src="{{ asset('frontend/assets/images/others/add-cart-img.png') }}" alt="">
                                                                            Checkout
                                                                        </button>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </form>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- Buy more practical hours popup  -->

                                    <!-- Modal -->
                                    <div class="modal fade" id="staticBackdropBook" data-bs-backdrop="static"
                                        data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropBookLabel"
                                        aria-hidden="true">
                                        <div class="modal-dialog modal-dialog-centered">
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    {{-- <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                        aria-label="Close"><span class="material-symbols-outlined">
                                                            close
                                                        </span></button> --}}
                                                </div>
                                                <div class="modal-body">
                                                    <div class="icon-wrapper">
                                                        <span class="material-icons">
                                                            done
                                                        </span>
                                                    </div>
                                                    <h3>Your Practical Session Has
                                                        Been<br /> Successfully Booked.
                                                    </h3>
                                                    <div id="modelNotice" style="display: none;">
                                                        <p>Please Note: Bringing A Model
                                                            Is Mandatory For This
                                                            Session.
                                                            Without A Model, You Will
                                                            Not Be Able To Perform The
                                                            Practical Training.
                                                        </p>
                                                        <h6>Model Details Are Mentioned
                                                            On The Course Page—Kindly
                                                            Review Them In Advance.</h6>
                                                    </div>
                                                    <h3>We Look Forward To Seeing You!</h3>
                                                </div>
                                                <div class="modal-footer">
                                                    <button type="button" class="btn btn-secondary reload-page-btn"
                                                        data-bs-dismiss="modal">Ok</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- New  -->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div id="videoModal"
            style="display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.8); z-index: 10000; justify-content: center; align-items: center;">

            <div id="fullscreenWrapper" style="position: relative; width: 80%; max-width: 900px;">
                <span id="closeModal"
                    style="position: absolute; top: -10px; right: -10px; background: red; color: #fff; padding: 5px 10px; cursor: pointer; z-index: 10001;">X</span>

                <div style="position: relative; padding-top: 56.25%;">
                    <video id="secureVideo" controls preload="metadata" controlsList="nodownload noplaybackrate"
                        style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
                    </video>
                    <div id="emailOverlay"
                        style="position: absolute; color: rgba(255,255,255,0.3); font-size: 18px; pointer-events: none; z-index: 9999;">
                        {{ Auth::user()->email }}
                    </div>
                </div>
            </div>
        </div>

        <div id="flipbookModal" style="display:none; position:fixed; inset:0; background:#000; z-index:9999;">
            <div id="flipbookWrapper">
                <div id="flipbookContainer" style="width:100%; height:100%;" data="flipBook"></div>
            </div>

            <button id="flipbookCloseBtn" style="
                    position:fixed;
                    top:15px;
                    right:20px;
                    z-index:10001;
                    background:#000;
                    color:#fff;
                    border:none;
                    padding:8px 14px;
                    cursor:pointer;
                    font-size:16px;">
                ✕ Close
            </button>

        </div>

    @endsection

    @section('custome_js')

    <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
    {{-- <script src="{{ asset('flipbook/js/flipbook.min.js') }}"></script> --}}
    <script src="{{ asset('flipbookDemo/js/jquery.js') }}"></script>

    <script src="{{ asset('flipbookDemo/js/flipbook.min.js') }}"></script>


        <script>
            document.addEventListener('DOMContentLoaded', function() {
                if (window.location.hash === '#theory') {
                    const theoryTab = document.querySelector('#pills-profile-tab');
                    if (theoryTab) {
                        // Bootstrap 5 way to show tab
                        const tab = new bootstrap.Tab(theoryTab);
                        tab.show();

                        // Also make sure the corresponding pane is shown
                        const theoryPane = document.querySelector('#pills-profile');
                        if (theoryPane) {
                            theoryPane.classList.add('show', 'active');
                            theoryTab.classList.add('active');

                            // Remove active class from other tabs/panes
                            document.querySelectorAll('.nav-link, .tab-pane').forEach(el => {
                                if (el !== theoryTab && el !== theoryPane) {
                                    el.classList.remove('active', 'show');
                                }
                            });

                            // Remove focus outline after a short delay
                            setTimeout(() => {
                                theoryTab.blur(); // This removes the focus outline
                                theoryTab.style.outline = 'none'; // Additional safeguard
                            }, 10);
                        }
                    }
                }
            });
        </script>

        <script>
            document.addEventListener('DOMContentLoaded', function () {
                const reloadButton = document.querySelector('.reload-page-btn');
                reloadButton?.addEventListener('click', function () {
                    // Set flag before reloading
                    localStorage.setItem('openScheduledSessions', 'true');
                    location.reload();
                });

                if (localStorage.getItem('openScheduledSessions') === 'true') {
                    localStorage.removeItem('openScheduledSessions');

                    const scheduleBtn = document.querySelector('.schedule-session-link');
                    scheduleBtn?.click();
                    scheduleBtn?.blur(); // Prevent focus styling (black border)
                }
            });
        </script>

        <script>
            document.addEventListener('DOMContentLoaded', function () {
                const modal = document.getElementById('staticBackdropBuyPractical');
                const scheduleInput = document.getElementById('modal_schedule_id');

                // On modal show
                modal.addEventListener('show.bs.modal', function (event) {
                });

                modal.addEventListener('hidden.bs.modal', function () {
                    const tabBtn = document.getElementById('pills-contact-tab');

                    if (tabBtn) {
                        const tab = new bootstrap.Tab(tabBtn);
                        tab.show();
                    }
                });
            });
        </script>

        <script>
            document.addEventListener('DOMContentLoaded', function () {
                const modalTriggerLinks = document.querySelectorAll('.open-reschedule-modal');

                modalTriggerLinks.forEach(link => {
                    link.addEventListener('click', function () {
                        // Read data attributes
                        const sessionId = this.getAttribute('data-id');
                        const topicId = this.getAttribute('data-topic-id');
                        const coursePurchaseId = this.getAttribute('data-course-purchase-id');

                        // Set them to hidden inputs in modal
                        document.getElementById('inputSessionId').value = sessionId;
                        document.getElementById('inputTopicId').value = topicId;
                        document.getElementById('inputCoursePurchaseId').value = coursePurchaseId;
                    });
                });
            });
        </script>

        <script>
            // Load calendar section via AJAX
            $(document).ready(function() {

                const totalRemainingPrasticalHours = "{{ $totalHours }}";

                function loadCalendarSection(sessionId, topicId, maxStudents,coursePurchaseId,scheduleId=null,extraPracticalHourId=null,isExtraSchedule=false) {
                    console.log('loading topic_id :', topicId);

                    $.ajax({
                        url: "{{ route('student.calendar.section') }}", // You'll need to create this route
                        type: "GET",
                        data: {
                            session_id: sessionId,
                            topic_id: topicId,
                            maxStudents: maxStudents,
                            coursePurchaseId: coursePurchaseId,
                            scheduleId: scheduleId,
                            extraPracticalHourId: extraPracticalHourId,
                            isExtraSchedule: isExtraSchedule,
                            totalRemainingPrasticalHours: totalRemainingPrasticalHours
                        },
                        success: function(response) {
                            $('#schedule-contents-section').html(response);
                            // Reinitialize calendar after loading
                            if (typeof initCalendar === 'function') {
                                // initCalendar(topicId);
                            }
                        },
                        error: function(xhr, status, error) {
                            console.error('Error loading calendar section:', error);
                        }
                    });
                }

                 $(document).on('click', '.schedule-session-links', function () {

                    const sessionId = $(this).data('id');
                    const topicId = $(this).data('topic-id');
                    const maxStudents = $(this).data('max-students');
                    const coursePurchaseId = $(this).data('course-purchase-id');
                    const scheduleId = $(this).data('schedule-id');
                    const extraPracticalHourId = $(this).data('extra-practical-hour-id');
                    const isExtraSchedule = $(this).data('is-extra-schedule');
                    console.log('isExtraSchedule : ',isExtraSchedule);

                    console.log('topicId:', topicId);

                    loadCalendarSection(sessionId, topicId, maxStudents,coursePurchaseId,scheduleId,extraPracticalHourId,isExtraSchedule);
                });

                // On "Reschedule" click
                $(document).on('click', '.reschedule-session-links', function () {
                    const sessionId = $(this).data('id');
                    const topicId = $(this).data('topic-id');
                    const maxStudents = $(this).data('max-students');
                    const coursePurchaseId = $(this).data('course-purchase-id');
                    const scheduleId = $(this).data('schedule-id');
                    const extraPracticalHourId = $(this).data('extra-practical-hour-id');
                    loadCalendarSection(sessionId, topicId,maxStudents,coursePurchaseId,scheduleId,extraPracticalHourId);
                });
            });
        </script>

        <script>
            document.addEventListener('DOMContentLoaded', function () {
                const modal = document.getElementById('staticBackdropBuyPractical');

                const checkboxes = document.querySelectorAll('input[name="selected_sessions[]"]');
                const selectedCoursesList = document.getElementById('selectedCoursesList');
                const totalHoursEl = document.getElementById('totalHours');
                const totalPriceEl = document.getElementById('totalPrice');
                const chargePerHour = {{ $chargePerHour ?? 2000 }};

                const inputTotalHours = document.getElementById('inputTotalHours');
                const inputTotalPrice = document.getElementById('inputTotalPrice');

                function calculateTotals() {
                    let totalHours = 0;
                    selectedCoursesList.innerHTML = '';

                    checkboxes.forEach(cb => {
                        if (cb.checked) {
                            const title = cb.dataset.title;
                            const hours = parseFloat(cb.dataset.hours);
                            totalHours += hours;

                            selectedCoursesList.innerHTML += `
                                <div class="course-details">
                                    <h6>${title}</h6>
                                    <h6>${hours} Hrs</h6>
                                </div>
                            `;
                        }
                    });

                    totalHoursEl.innerHTML = `
                        <h6>Total Practical Hrs</h6>
                        <h6 class="hours-count">${totalHours} Hrs</h6>
                    `;

                    const totalPrice = totalHours * chargePerHour;

                    totalPriceEl.innerHTML = `
                        <h6>Total Price</h6>
                        <h6 class="price-amount">₹ ${totalPrice.toLocaleString('en-IN', { minimumFractionDigits: 2 })}</h6>
                    `;

                    inputTotalHours.value = totalHours;
                    inputTotalPrice.value = totalPrice;
                }

                checkboxes.forEach(checkbox => {
                    checkbox.addEventListener('change', calculateTotals);
                });

                modal.addEventListener('show.bs.modal', function (event) {
                    const trigger = event.relatedTarget;
                    const isForfeited = trigger.getAttribute('data-is-forfeited') === '1';
                    const forfeitedSessionId = trigger.getAttribute('data-session-id');

                    const allSessionWrappers = modal.querySelectorAll('.session-wrapper');
                    const checkboxes = modal.querySelectorAll('.session-checkbox');

                    // Reset all visibility and checkbox
                    checkboxes.forEach(cb => cb.checked = false);
                    allSessionWrappers.forEach(wrapper => wrapper.style.display = 'block');

                    if (isForfeited && forfeitedSessionId) {
                        // Hide all session blocks
                        allSessionWrappers.forEach(wrapper => {
                            const sessionId = wrapper.getAttribute('data-session-id');
                            wrapper.style.display = (sessionId === forfeitedSessionId) ? 'block' : 'none';
                        });

                        const forfeitedCheckbox = modal.querySelector(`#session-${forfeitedSessionId}`);
                        if (forfeitedCheckbox) {
                            forfeitedCheckbox.checked = true;
                            forfeitedCheckbox.dispatchEvent(new Event('change'));
                        }
                    } else {
                        // If not forfeited, show all and recalculate
                        allSessionWrappers.forEach(wrapper => wrapper.style.display = 'block');
                        calculateTotals();
                    }
                });
            });
        </script>

        <script>
            $(document).ready(function() {
                $('.step-action').click(function(e) {
                    const $button = $(this);
                    const step = parseInt($button.data('step'));

                    // ✅ Skip logic if step 3 (MCQ) — allow default form submit
                    if (step === 3) return;

                    e.preventDefault(); // prevent form submit for Step 1 and 2

                    const $form = $button.closest('form');
                    const type = $button.data('type');
                    const currentStatus = $button.data('status');
                    const coursePurchaseId = $form.find('input[name="course_purchase_id"]').val();
                    const topicId = $form.find('input[name="topic_id"]').val();

                    let newStatus = '';
                    let newButtonText = '';
                    let disableButton = false;
                    let updateIcon = false;
                    let addCompletedClass = false;

                    if (currentStatus === 'pending') {
                        newStatus = 'inprogress';
                        newButtonText = 'Complete'; // Change immediately to "Completed"
                    } else if (currentStatus === 'inprogress') {
                        newStatus = 'complete';
                        newButtonText = 'Completed';
                        disableButton = true;
                        updateIcon = true;
                        addCompletedClass = true;
                    } else {
                        return;
                    }

                    $button.html('<i class="fa fa-spinner fa-spin"></i>');

                    $.ajax({
                        url: "{{ route('student.progress.update') }}",
                        type: "POST",
                        data: {
                            _token: "{{ csrf_token() }}",
                            course_purchase_id: coursePurchaseId,
                            topic_id: topicId,
                            type: type,
                            status: newStatus,
                            start_time: newStatus === 'inprogress' ? new Date().toISOString() : null,
                            complete_time: newStatus === 'complete' ? new Date().toISOString() : null
                        },
                        success: function(response) {
                            if (response.success) {
                                $button
                                    .data('status', newStatus)
                                    .removeClass('btn-primary btn-success btn-secondary')
                                    .addClass(newStatus === 'inprogress' ? 'btn-success' :
                                        'btn-secondary')
                                    .text(newButtonText);

                                if (newStatus === 'inprogress') {
                                    $form.find(`.status-${step}`).text('In Progress');

                                    if (type === 'watch_video') {
                                        $form.find('.view_video_button')
                                            .show(); // ✅ show hidden video view button
                                        $button.addClass('d-none');
                                    }
                                }

                                if (updateIcon) {
                                    $form.find(`.status-${step}`).replaceWith(`
                                <div class="icon-wrapper status status-${step}">
                                    <span class="material-icons">done</span>Completed
                                </div>
                            `);
                                }

                                if (disableButton) {
                                    $button.prop('disabled', true);
                                }

                                if (addCompletedClass) {
                                    $button.addClass('completed-link');
                                }

                                if (newStatus === 'complete') {
                                    // Find all remaining steps (2 or 3)
                                    const allSteps = [2, 3];

                                    for (let next of allSteps) {
                                        if (next <= step) continue; // skip earlier or same steps

                                        const $nextBtn = $form.find(
                                            `.step-action[data-step="${next}"]`);

                                        if ($nextBtn.length && $nextBtn.is(':disabled')) {
                                            // Enable only if it's currently disabled
                                            $nextBtn.prop('disabled', false);
                                            break; // only enable the next valid one
                                        }
                                    }
                                }
                            } else {
                                alert('Something went wrong. Try again.');
                                $button.text('Retry');
                            }
                        },
                        error: function() {
                            alert('Error occurred while updating progress.');
                            $button.text('Retry');
                        }
                    });
                });

                $(document).on('click', '.read-book-btn', function () {
                    const btn = $(this);
                    const status = btn.data('status');
                    const form = btn.closest('form');

                    if (status === 'pending') {
                        form.find('.pdf-row').removeClass('d-none'); // show PDFs
                        btn.addClass('d-none'); // hide Start button
                    }
                });

                // $(document).on('click', '.view-pdf-btn', function () {
                //     $(this).siblings('.read-pdf-btn').removeClass('d-none');
                // });

                $(document).on('click', '.view-pdf-btn', function (e) {

                    e.preventDefault();
                    const btn = $(this);
                    const pdfUrl = btn.attr('href');
                    const row = btn.closest('.pdf-row');
                    const pdfId = btn.data('pdf-id');

                    const form = btn.closest('form');
                    const topicId = form.data('topic-id');
                    const coursePurchaseId = form.data('course-purchase-id');
                    const readBookStatus = btn.data('read-book-status');
                    const pdfType = btn.data('pdf-type');

                    btn.prop('disabled', true);

                    // 🔥 SAVE "READING" STATE IN DB
                    $.ajax({
                        url: "{{ route('student.progress.update') }}",
                        type: "POST",
                        data: {
                            _token: "{{ csrf_token() }}",
                            type: 'read_book',
                            course_purchase_id: coursePurchaseId,
                            topic_id: topicId,
                            pdf_id: pdfId,
                            action: 'reading',
                            status: readBookStatus
                        },
                        success: function (res) {

                            // ❌ backend denied
                            if (res.success === false) {
                                alert(res.message || 'Please complete previous PDF first');
                                btn.prop('disabled', false);
                                return;
                            }
                            // window.open(pdfUrl, '_blank');
                            // openFlipBook(pdfUrl);

                            // // ✅ backend allowed → NOW UI update
                            // row.find('.read-pdf-btn').removeClass('d-none');
                            var pdPath ='{{ route('pdf.secure', ['type' => ':type', 'id' => ':id']) }}';
                            pdPath = pdPath.replace(':type', pdfType);
                            pdPath = pdPath.replace(':id', pdfId);
                            $.get(pdPath)
                            .done(function (response) {

                                if (!response.url) {
                                    alert('Unable to load PDF');
                                    btn.prop('disabled', false);
                                    return;
                                }

                                // 🔥 STEP 3: open FlipBook with SIGNED URL
                                openFlipBook(response.url);

                                // UI update
                                row.find('.read-pdf-btn').removeClass('d-none');
                                btn.prop('disabled', false);
                            })
                            .fail(function () {
                                alert('Access denied');
                                btn.prop('disabled', false);
                            });
                        },
                        error: function (xhr) {

                            const msg = xhr.responseJSON?.message || 'Please complete previous PDF first';
                            alert(msg);
                            btn.prop('disabled', false);
                        }
                    });

                    // UI
                    // row.find('.read-pdf-btn').removeClass('d-none');
                });


                $(document).on('click', '.read-pdf-btn', function () {

                    const btn = $(this);
                    const pdfId = btn.data('pdf-id');
                    const topicId = btn.data('topic-id');
                    const coursePurchaseId = btn.data('course-purchase-id');
                    const index = btn.data('index');
                    const form = btn.closest('form');
                    const currentRow = document.querySelector(`form[data-topic-id="${topicId}"] .pdf-row[data-index="${index}"]`);
                    $.ajax({
                        url: "{{ route('student.progress.update') }}",
                        type: "POST",
                        data: {
                            _token: "{{ csrf_token() }}",
                            type: 'read_book',
                            course_purchase_id: coursePurchaseId,
                            topic_id: topicId,
                            pdf_id: pdfId,
                            action: 'completed',
                            status: 'inprogress'
                        },
                        success: function (res) {

                            // btn.prev('.view-pdf-btn').remove();
                            btn.replaceWith('<button type="button" class="btn link-wrapper completed-link" disabled>Completed</button>');

                            const statusEl = currentRow.querySelector('.pdf-status');
                            if (statusEl) {
                                statusEl.outerHTML = `
                                    <div class="icon-wrapper status status-1">
                                        <span class="material-icons">done</span>Completed
                                    </div>
                                `;
                            }

                            // enable next PDF
                            form.find(`.pdf-row[data-index="${index + 1}"]`)
                                .find('.view-pdf-btn')
                                .removeAttr('disabled')
                                .prop('disabled', false);

                            // all PDFs done → show parent Complete
                            // if (res.all_pdfs_completed) {
                            //     form.find(
                            //         '.step-action.read-book-btn[data-step="1"][data-type="read_book"]'
                            //     ).removeClass('d-none');
                            // }
                            if (res.all_pdfs_completed) {

                                // Hide Read Book button
                                form.find('.step-action.read-book-btn[data-step="1"]').remove();

                                const stepRow = form.find('.status-1').closest('tr');

                                stepRow.find('td').eq(2).html(`
                                    <button type="button" class="btn link-wrapper completed-link" disabled>
                                        Completed
                                    </button>
                                `);

                                stepRow.find('td').eq(3).html(`
                                    <div class="icon-wrapper status status-1">
                                        <span class="material-icons">done</span>Completed
                                    </div>
                                `);

                                form.find('.step-action[data-step="2"][data-type="watch_video"]').removeAttr('disabled').prop('disabled', false);

                                if (form.find('.step2-main-row').length === 0) {
                                    form.find('.mcq-btn')
                                        .removeAttr('disabled')
                                        .prop('disabled', false);
                                }
                            }
                        }
                    });
                });

            });
        </script>

        <script>

            function openFlipBook(pdfUrl) {

                const modal = $('#flipbookModal');

                // 🔥 HARD RESET (VERY IMPORTANT)
                $('#flipbookWrapper').html('<div id="flipbookContainer"></div>');

                modal.fadeIn(200, function () {

                    setTimeout(function () {

                        const container = $('#flipbookContainer');

                        container.flipBook({

                            pdfUrl: encodeURI(pdfUrl),

                            viewMode: '2d', // 🔥 CHANGE (see note below)
                            pageMode: 'double',

                            skin: 'dark',

                            loadOnDemand: false,
                            useRange: false,
                            rangeChunkSize: 0,

                            preloadPages: 2,
                            pdfTextLayer: false,

                            btnSingle: { enabled: false },
                            btnSound: { enabled: false },
                            btnToc: { enabled: false },

                            btnDownloadPages: { enabled: false },
                            btnDownloadPdf: { enabled: false },
                            btnPrint: { enabled: false },
                            btnShare: { enabled: false },
                            btnSelect: { enabled: false },

                            ready: function () {
                                container.flipBook('turnToPage', 1);
                            }
                        });

                    }, 300);
                });
            }

            function closeFlipBook() {

                const container = $('#flipbookContainer');

                try {
                    if (container.data('flipBook')) {
                        container.flipBook('destroy');
                    }
                } catch (e) {}

                // 🔥 FORCE REMOVE EVERYTHING
                $('#flipbookWrapper').html('<div id="flipbookContainer"></div>');

                $('#flipbookModal').fadeOut(200);
            }

            /* ❌ Right click disable (ONLY flipbook) */
            $(document).on('contextmenu', '#flipbookModal', function (e) {
                e.preventDefault();
                return false;
            });

            /* ❌ Keyboard copy / print */
            $(document).on('keydown', function (e) {

                if (!$('#flipbookModal').is(':visible')) return;

                if (
                    (e.ctrlKey && ['c','x','a','s','p'].includes(e.key.toLowerCase()))
                ) {
                    e.preventDefault();
                    return false;
                }
            });

            /* 🔥 SCREENSHOT PROTECTION */
            (function () {

                let timer = null;

                function blackout() {
                    if (!$('#flipbookModal').is(':visible')) return;

                    $('#flipbookModal').addClass('screen-protect');

                    clearTimeout(timer);
                    timer = setTimeout(() => {
                        $('#flipbookModal').removeClass('screen-protect');
                    }, 1500);
                }

                // Print Screen
                document.addEventListener('keyup', function (e) {
                    if (e.key === 'PrintScreen') {
                        blackout();
                    }
                });

                // Win + Shift + S / Snipping Tool
                document.addEventListener('keydown', function (e) {
                    if ((e.shiftKey && e.metaKey) || (e.shiftKey && e.ctrlKey)) {
                        blackout();
                    }
                });

            })();

            /* 🔒 Tab change / minimize */
            document.addEventListener('visibilitychange', function () {
                if (document.hidden && $('#flipbookModal').is(':visible')) {
                    closeFlipBook();
                }
            });

            $('#flipbookCloseBtn').on('click', closeFlipBook);

        </script>

        <script>
            document.getElementById('completeTheoryLink').addEventListener('click', function(e) {
                e.preventDefault(); // Prevent the default link behavior (which is page reload)
                var myTab = new bootstrap.Tab(document.getElementById('pills-profile-tab')); // Get the tab element
                myTab.show(); // Show the tab
            });
        </script>

        <script>
            document.addEventListener('DOMContentLoaded', function() {
                const completedBtn = document.getElementById('completed-btn');
                const scheduleTabBtn = document.getElementById('pills-contact-tab');

                if (completedBtn && scheduleTabBtn) {
                    completedBtn.addEventListener('click', function() {
                        scheduleTabBtn.click(); // programmatically open the Scheduled Sessions tab
                    });
                }
            });
        </script>

    <script>
        const video = document.getElementById('secureVideo');
        const overlay = document.getElementById('emailOverlay');
        const modal = document.getElementById('videoModal');
        const fullscreenWrapper = document.getElementById('fullscreenWrapper');

        // videoDetailsPerTopic: { [topicId]: { [videoId]: timestampIso, ... } }
        let videoDetailsPerTopic = {};

        const lastTimes = {};
        let overlayTimer;
        let suppressTimeupdate = false;
        let hls = null; // HLS.js instance

        // Fullscreen helpers (same as yours)
        function enterFullscreen() {
            if (fullscreenWrapper.requestFullscreen) return fullscreenWrapper.requestFullscreen();
            else if (fullscreenWrapper.webkitRequestFullscreen) return fullscreenWrapper.webkitRequestFullscreen();
            else if (fullscreenWrapper.mozRequestFullScreen) return fullscreenWrapper.mozRequestFullScreen();
            else if (fullscreenWrapper.msRequestFullscreen) return fullscreenWrapper.msRequestFullscreen();
        }

        function exitFullscreen() {
            if (document.exitFullscreen) return document.exitFullscreen();
            else if (document.webkitExitFullscreen) return document.webkitExitFullscreen();
            else if (document.mozCancelFullScreen) return document.mozCancelFullScreen();
            else if (document.msExitFullscreen) return document.msExitFullscreen();
        }

        function isFullscreen() {
            return document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement;
        }

        // Check if URL is HLS stream
        function isHLS(url) {
            if (!url) return false;
            return url.includes('.m3u8') || url.includes('m3u8') || url.toLowerCase().endsWith('.m3u8');
        }

        // Initialize HLS player
        function initHLS(videoUrl) {
            // Destroy existing HLS instance if any
            if (hls) {
                hls.destroy();
                hls = null;
            }

            // Parse the master playlist URL to extract base URL and signed parameters
            let masterUrlObj;
            let signedParams = new URLSearchParams();
            let baseUrlForSegments = '';

            try {
                masterUrlObj = new URL(videoUrl);
                signedParams = new URLSearchParams(masterUrlObj.search);

                // Create base URL for resolving relative segment URLs
                // Remove query string and filename to get the directory
                const pathWithoutFile = masterUrlObj.pathname.substring(0, masterUrlObj.pathname.lastIndexOf('/') + 1);
                baseUrlForSegments = masterUrlObj.origin + pathWithoutFile;
            } catch (e) {
                // If URL parsing fails, try to extract query string manually
                const queryIndex = videoUrl.indexOf('?');
                if (queryIndex !== -1) {
                    const queryString = videoUrl.substring(queryIndex + 1);
                    signedParams = new URLSearchParams(queryString);

                    // Extract base URL manually
                    const urlWithoutQuery = videoUrl.substring(0, queryIndex);
                    const lastSlashIndex = urlWithoutQuery.lastIndexOf('/');
                    if (lastSlashIndex !== -1) {
                        const protocolIndex = urlWithoutQuery.indexOf('://');
                        if (protocolIndex !== -1) {
                            const domainEnd = urlWithoutQuery.indexOf('/', protocolIndex + 3);
                            if (domainEnd !== -1) {
                                baseUrlForSegments = urlWithoutQuery.substring(0, lastSlashIndex + 1);
                            }
                        }
                    }
                }
            }

            // Check if HLS.js is available
            if (typeof Hls !== 'undefined' && Hls.isSupported()) {
                hls = new Hls({
                    enableWorker: true,
                    lowLatencyMode: false,
                    backBufferLength: 90,
                    xhrSetup: function(xhr, url) {
                        // Preserve signed URL parameters for all requests (master playlist, segments, etc.)
                        if (signedParams && signedParams.toString()) {
                            try {
                                let segmentUrl;
                                let isAbsolute = false;

                                // Check if URL is absolute or relative
                                try {
                                    // Try to parse as absolute URL first
                                    segmentUrl = new URL(url);
                                    isAbsolute = true;
                                } catch (e) {
                                    // URL is relative - resolve it against the master playlist directory
                                    isAbsolute = false;
                                }

                                if (!isAbsolute) {
                                    // URL is relative - resolve it against the master playlist directory
                                    if (masterUrlObj && baseUrlForSegments) {
                                        // Use the base directory from master playlist
                                        segmentUrl = new URL(url, baseUrlForSegments);
                                    } else if (baseUrlForSegments) {
                                        // Fallback: use manually constructed base URL
                                        segmentUrl = new URL(url, baseUrlForSegments);
                                    } else {
                                        // Last resort: try to construct from videoUrl
                                        const urlWithoutQuery = videoUrl.split('?')[0];
                                        const lastSlashIndex = urlWithoutQuery.lastIndexOf('/');
                                        if (lastSlashIndex !== -1) {
                                            const baseDir = urlWithoutQuery.substring(0, lastSlashIndex + 1);
                                            segmentUrl = new URL(url, baseDir);
                                        } else {
                                            throw new Error('Cannot resolve relative URL: ' + url);
                                        }
                                    }
                                }

                                // Merge signed parameters into the segment URL
                                // This ensures all requests (master playlist, segments, variant playlists) have signed params
                                signedParams.forEach((value, key) => {
                                    segmentUrl.searchParams.set(key, value);
                                });

                                // Override the xhr with the modified URL
                                xhr.open('GET', segmentUrl.toString(), true);
                            } catch (e) {
                                console.warn('Error processing segment URL:', url, e);
                                // Fallback: simple string append if URL parsing fails
                                // This handles edge cases where URL parsing might fail
                                try {
                                    const separator = url.includes('?') ? '&' : '?';
                                    const modifiedUrl = url + separator + signedParams.toString();
                                    xhr.open('GET', modifiedUrl, true);
                                } catch (fallbackError) {
                                    console.error('Failed to modify URL:', fallbackError);
                                    // If all else fails, use original URL (might fail auth, but won't crash)
                                    xhr.open('GET', url, true);
                                }
                            }
                        }
                    }
                });
                hls.loadSource(videoUrl);
                hls.attachMedia(video);
                return hls;
            } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
                // Native HLS support (Safari)
                video.src = videoUrl;
                return null; // No HLS.js instance needed
            } else {
                throw new Error('HLS is not supported in this browser');
            }
        }

        // Destroy HLS instance
        function destroyHLS() {
            if (hls) {
                hls.destroy();
                hls = null;
            }
        }

        document.addEventListener('fullscreenchange', function () {
            overlay.style.display = 'block';
            if (!isFullscreen() && modal.style.display === 'flex') {
                video.pause();
                destroyHLS();
                video.src = '';
                modal.style.display = 'none';
                clearTimeout(overlayTimer);
            }
        });

        function moveOverlayRandomly() {
            if (!overlay || !fullscreenWrapper) return;

            const containerRect = fullscreenWrapper.getBoundingClientRect();
            const overlayWidth = 150;
            const overlayHeight = 30;
            const maxLeft = Math.max(containerRect.width - overlayWidth, 0);
            const maxTop = Math.max(containerRect.height - overlayHeight, 0);

            const randomLeft = Math.floor(Math.random() * (maxLeft + 1));
            const randomTop = Math.floor(Math.random() * (maxTop + 1));

            overlay.style.left = `${randomLeft}px`;
            overlay.style.top = `${randomTop}px`;

            const nextMoveIn = Math.floor(Math.random() * 5000) + 3000;
            overlayTimer = setTimeout(moveOverlayRandomly, nextMoveIn);
        }

        function isVideoCompleted(videoId) {
            if (!videoId) return false;
            const topicId = video.dataset.topicId;
            const topicDetails = videoDetailsPerTopic[topicId] || {};

            return topicDetails.hasOwnProperty(String(videoId)) || topicDetails.hasOwnProperty(Number(videoId));
        }

        // Prevent forward seeking for incomplete video per-topic / per-video
        video.addEventListener('timeupdate', function () {
            if (suppressTimeupdate) return;
            const videoId = video.dataset.videoId;
            // const topicId = video.dataset.topicId;

            // const topicDetails = videoDetailsPerTopic[topicId] || {};
            const isCompleted = isVideoCompleted(videoId);
            // const isCompleted = topicDetails.hasOwnProperty(videoId);

            if (!lastTimes[videoId]) lastTimes[videoId] = 0;

            if (!isCompleted) {
                if (video.currentTime > lastTimes[videoId] + 1) {
                    video.currentTime = lastTimes[videoId];
                } else {
                    // lastTime = video.currentTime;
                    lastTimes[videoId] = Math.max(lastTimes[videoId], video.currentTime);
                }
            } else {
                // lastTime = video.currentTime;
                lastTimes[videoId] = Math.max(lastTimes[videoId], video.currentTime);
            }
        });

        function programmaticSeekAndPlay(pos) {
            // if pos is zero or small, no need to do fancy
            if (!pos || pos <= 0.1) {
                video.play();
                return;
            }

            const videoId = video.dataset.videoId;
            // suppress the timeupdate seeking guard while we jump
            suppressTimeupdate = true;

            // add a one-time listener to re-enable after seek completes
            function onSeeked() {
                video.removeEventListener('seeked', onSeeked);
                // give one animation frame to let video.currentTime settle
                requestAnimationFrame(() => {
                    lastTimes[videoId] = pos; // mark progress
                    video.play();

                    // wait until play starts properly
                    video.addEventListener('playing', function onPlayStarted() {
                        video.removeEventListener('playing', onPlayStarted);
                        // re-enable seek guard AFTER we're playing at the correct time
                        suppressTimeupdate = false;
                    }, { once: true });
                });
            }

            video.addEventListener('seeked', onSeeked);
            // perform the jump
            try {
                video.currentTime = pos;
            } catch (err) {
                // Some browsers require load/metadata; fallback: enable again and play from 0
                console.warn('Programmatic seek failed:', err);
                suppressTimeupdate = false;
                video.play();
            }
        }

        async function saveVideoProgress() {

            if (!video.currentTime || !video.dataset.videoId || !video.dataset.topicId || !video.dataset.coursePurchaseId) return;

            const topicId = video.dataset.topicId;
            const videoId = video.dataset.videoId;
            const currentTime = video.currentTime;
            const coursePurchaseId = video.dataset.coursePurchaseId;
            try {
                await fetch('{{ route("student.topic.saveTopicVideoWatchProgress") }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    },
                    body: JSON.stringify({
                        topic_id: topicId,
                        video_id: videoId,
                        course_purchase_id: coursePurchaseId,
                        current_time: currentTime
                    })
                });
                // console.log(`Progress saved at ${currentTime.toFixed(1)}s`);
            } catch (err) {
                console.warn('Save progress failed:', err);
            }
        }

        let saveTimeout;
        function scheduleSaveProgress() {
            clearTimeout(saveTimeout);
            saveTimeout = setTimeout(saveVideoProgress, 500); // wait 0.5s before saving
        }
        video.addEventListener('pause', scheduleSaveProgress);
        video.addEventListener('ended', saveVideoProgress);

        video.addEventListener('contextmenu', event => event.preventDefault());

        document.getElementById('closeModal').addEventListener('click', async function () {
            await saveVideoProgress();
            video.pause();

            // Destroy HLS instance if exists
            destroyHLS();

            video.src = '';
            modal.style.display = 'none';
            clearTimeout(overlayTimer);

            if (isFullscreen()) {
                try {
                    await exitFullscreen();
                } catch (err) {
                    console.warn('Could not exit fullscreen:', err);
                }
            }
        });

        // === STEP 2 START button handler ===
        document.querySelectorAll('.step-action[data-step="2"]').forEach(btn => {
            btn.addEventListener('click', function () {
                const form = this.closest('form');
                const topicId = form.getAttribute('data-topic-id');
                const coursePurchaseId = form.querySelector('.video-play-btn')?.dataset.coursePurchaseId;
                console.log(coursePurchaseId);

                // Show only rows inside this topic form
                form.querySelectorAll('.video-row').forEach(row => row.classList.remove('d-none'));
                // Hide this start button
                this.classList.add('d-none');

                // Update status cell for this topic
                const statusCell = form.querySelector('.status-2');
                if (statusCell) statusCell.textContent = 'In Progress';

                // Save started flag locally per-topic
                localStorage.setItem(`topic_${topicId}_${coursePurchaseId}_video_started`, 'true');
            });
        });

        // === Play button - per-topic (already used closest(form) but we keep it) ===
        document.querySelectorAll('.video-play-btn').forEach(btn => {
            btn.addEventListener('click', async function (ev) {
                ev.preventDefault();
                if (btn.hasAttribute('disabled')) return;

                const index = parseInt(btn.dataset.index);
                const form = btn.closest('form');
                const topicId = form.dataset.topicId;
                const coursePurchaseId = btn.dataset.coursePurchaseId;
                const videoUrl = btn.dataset.video;
                const videoId = btn.dataset.videoId;

                let resumePosition = 0;

                try {
                    // 🔹 Fetch last watch position
                    const response = await fetch('{{ route("student.topic.saveTopicVideoWatchProgress") }}', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        },
                        body: JSON.stringify({
                            topic_id: topicId,
                            course_purchase_id: coursePurchaseId,
                            video_id: videoId,
                            get_only: true
                        })
                    });

                    const data = await response.json();
                        resumePosition = parseFloat(data.last_position) || 0;
                        // console.log('Fetched resume position:', resumePosition);
                } catch (err) {
                    console.warn('Resume check failed:', err);
                }

                try {
                    const verifyRes = await fetch('{{ route("student.topic.verifyVideoAccess") }}', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        },
                        body: JSON.stringify({
                            topic_id: topicId,
                            video_id: videoId,
                            course_purchase_id: coursePurchaseId
                        }),
                    });

                    const verifyData = await verifyRes.json();

                    if (!verifyData.success) {
                        alert(verifyData.message || "Please complete the previous video first!");
                        return;
                    }
                } catch (error) {
                    console.error('Video access check failed:', error);
                    alert("Unable to verify access. Please try again.");
                    return;
                }

                // Set video metadata
                video.dataset.topicId = topicId;
                video.dataset.index = index;
                video.dataset.videoId = videoId;
                video.dataset.coursePurchaseId = coursePurchaseId;

                // Check if video URL is HLS
                const isHLSStream = isHLS(videoUrl);

                if (isHLSStream) {
                    // Use HLS.js for HLS streams
                    try {
                        initHLS(videoUrl);

                        // Wait for HLS to be ready
                        const onHLSReady = () => {
                            const videoId = video.dataset.videoId;

                            if (!lastTimes[videoId]) lastTimes[videoId] = 0;

                            // Ensure position is greater than a very small threshold
                            if (resumePosition > 0.1) {
                                programmaticSeekAndPlay(resumePosition);
                            } else {
                                video.play();
                            }
                        };

                        if (hls && typeof Hls !== 'undefined') {
                            // HLS.js events
                            hls.on(Hls.Events.MANIFEST_PARSED, function() {
                                onHLSReady();
                            });
                            hls.on(Hls.Events.ERROR, function(event, data) {
                                console.error('HLS error:', data);
                                if (data.fatal) {
                                    switch(data.type) {
                                        case Hls.ErrorTypes.NETWORK_ERROR:
                                            console.error('Fatal network error, try to recover');
                                            hls.startLoad();
                                            break;
                                        case Hls.ErrorTypes.MEDIA_ERROR:
                                            console.error('Fatal media error, try to recover');
                                            hls.recoverMediaError();
                                            break;
                                        default:
                                            console.error('Fatal error, cannot recover');
                                            hls.destroy();
                                            alert('Error loading video. Please try again.');
                                            break;
                                    }
                                }
                            });
                        } else {
                            // Native HLS (Safari)
                            video.addEventListener('loadedmetadata', function onMetaLoaded() {
                                video.removeEventListener('loadedmetadata', onMetaLoaded);
                                onHLSReady();
                            });
                        }
                    } catch (error) {
                        console.error('HLS initialization failed:', error);
                        alert('Error loading HLS video. Please try again.');
                        return;
                    }
                } else {
                    // Regular video (non-HLS)
                    video.src = videoUrl;
                    video.load();

                    // 🔹 Wait for video metadata before setting currentTime
                    video.addEventListener('loadedmetadata', function onMetaLoaded() {
                        video.removeEventListener('loadedmetadata', onMetaLoaded);

                        const videoId = video.dataset.videoId;

                        if (!lastTimes[videoId]) lastTimes[videoId] = 0;

                        // Ensure position is greater than a very small threshold
                        if (resumePosition > 0.1) {
                            programmaticSeekAndPlay(resumePosition);
                        } else {
                            video.play();
                        }
                    });
                }

                modal.style.display = 'flex';
                moveOverlayRandomly();

                if (!isFullscreen()) {
                    try { await enterFullscreen(); } catch (err) { console.warn('Fullscreen failed:', err); }
                }
            });
        });

        // === When a video ends: scope updates to the same topic only ===
        video.addEventListener('ended', async function () {
            const topicId = video.dataset.topicId;
            const currentIndex = parseInt(video.dataset.index);

            // Find current row inside the same topic
            const currentRow = document.querySelector(`form[data-topic-id="${topicId}"] .video-row[data-index="${currentIndex}"]`);
            if (!currentRow) return;

            const playBtn = currentRow.querySelector('.video-play-btn');
            const videoId = playBtn.dataset.videoId;
            const coursePurchaseId = playBtn.dataset.coursePurchaseId;

            // If not already marked completed, send AJAX
            if (!playBtn.dataset.completed) {
                try {
                    const response = await fetch('{{ route('student.topic.video.progress') }}', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        },
                        body: JSON.stringify({
                            topic_id: topicId,
                            video_id: videoId,
                            course_purchase_id: coursePurchaseId
                        })
                    });
                    const data = await response.json();
                    if (data.success) {
                        // ensure topic object exists
                        videoDetailsPerTopic[topicId] = videoDetailsPerTopic[topicId] || {};
                        videoDetailsPerTopic[topicId][videoId] = new Date().toISOString();

                        // update UI for this row
                        const statusEl = currentRow.querySelector('.video-status');
                        // if (statusEl) {
                        //     statusEl.textContent = 'Completed';
                        //     statusEl.classList.remove('text-muted');
                        //     statusEl.classList.add('text-success');
                        // }

                        if (statusEl) {
                            statusEl.outerHTML = `
                                <div class="icon-wrapper status status-2">
                                    <span class="material-icons">done</span>Completed
                                </div>
                            `;
                        }

                        const btnText = playBtn.querySelector('.icon-text');
                        if (btnText) {
                            btnText.innerHTML = `
                                <img src="{{ asset('frontend/assets/images/others/watch-video.png') }}" alt=""> Rewatch
                            `;
                        }

                        const parentTd = playBtn.parentElement;
                        if (!parentTd.querySelector('.completed-link')) {
                            parentTd.insertAdjacentHTML('afterbegin', '<button type="button" class="link-wrapper btn completed-link" disabled>Completed</button>');
                        }

                        playBtn.dataset.completed = 'true';
                    }
                } catch (err) {
                    console.error('Error saving progress:', err);
                }
            }

            // Unlock next video in same topic
            const nextRow = document.querySelector(`form[data-topic-id="${topicId}"] .video-row[data-index="${currentIndex + 1}"]`);
            if (nextRow) {
                const nextBtn = nextRow.querySelector('.video-play-btn');
                if (nextBtn) {
                    nextBtn.removeAttribute('disabled');
                    nextBtn.classList.replace('btn-secondary', 'btn-primary');
                }
                return;
            }

            // If no nextRow -> last video for this topic completed -> mark Step 2 complete for THIS topic
            const form = document.querySelector(`form[data-topic-id="${topicId}"]`);
            if (!form) return;

            const completeBtn = form.querySelector('.step-action[data-step="2"]');
            if (!completeBtn) return;

            // Prepare completeData
            const completeData = {
                _token: '{{ csrf_token() }}',
                topic_id: topicId,
                type: 'watch_video',
                status: 'complete',
                complete_time: new Date().toISOString(),
                course_purchase_id: coursePurchaseId
            };

            // AJAX to mark step 2 complete (scoped to topic)
            $.ajax({
                url: "{{ route('student.progress.update') }}",
                type: "POST",
                data: completeData,
                success: function(response) {
                    if (response.success) {
                        // update the specific topic's UI
                        completeBtn.classList.remove('d-none');
                        completeBtn.textContent = 'Completed';
                        completeBtn.classList.remove('btn-primary', 'btn-success');
                        completeBtn.classList.add('btn-secondary');
                        completeBtn.classList.add('completed-link');
                        completeBtn.disabled = true;
                        completeBtn.dataset.status = 'complete';

                        const statusCell = form.querySelector('.status-2');
                        if (statusCell) {
                            statusCell.innerHTML = '<div class="icon-wrapper"><span class="material-icons">done</span>Completed</div>';
                        }

                        const mcqBtn = form.querySelector('.final-submit[data-step="3"]');
                        if (mcqBtn) {
                            mcqBtn.removeAttribute('disabled');
                            mcqBtn.classList.remove('btn-secondary');
                            mcqBtn.classList.add('btn-primary');
                        }

                        // optional: update global progress UI if you have one
                    }
                },
                error: function() {
                    console.error('Error updating topic progress for Step 2');
                }
            });
        });

        // === DOMContentLoaded: fetch video details PER topic and init UI per topic ===
        document.addEventListener('DOMContentLoaded', async function () {
            const forms = document.querySelectorAll('form[data-topic-id]');
            if (!forms.length) return;

            // For each topic form, fetch video details for that topic and init UI
            for (const form of forms) {
                const topicId = form.dataset.topicId;
                const coursePurchaseId = form.querySelector('.video-play-btn')?.dataset.coursePurchaseId;

                videoDetailsPerTopic[topicId] = {};

                if (topicId && coursePurchaseId) {
                    await new Promise(resolve => setTimeout(resolve, 100));
                    try {
                        const response = await fetch("{{ route('student.topic.video.details') }}", {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                            },
                            body: JSON.stringify({
                                topic_id: topicId,
                                course_purchase_id: coursePurchaseId
                            }),
                        });

                        const data = await response.json();
                        if (data.success && data.video_details) {
                            // Expecting video_details to be { videoId: timestamp, ... } for that topic
                            videoDetailsPerTopic[topicId] = data.video_details;
                        } else {
                            videoDetailsPerTopic[topicId] = {};
                        }

                        initVideoUIForForm(form, videoDetailsPerTopic[topicId]);
                    } catch (error) {
                        console.error("Error fetching video details for topic", topicId, error);
                        // videoDetailsPerTopic[topicId] = {};
                        // initVideoUIForForm(form, {});
                    }
                } else {
                    // if no coursePurchaseId/topicId
                    initVideoUIForForm(form, {});
                }

                // Initialize UI for this one topic
                // initVideoUIForForm(form, videoDetailsPerTopic[topicId]);
            }
        });

        function initVideoUIForForm(form, videoDetailsForThisTopic) {
            const topicId = form.dataset.topicId;
            const allVideoRows = Array.from(form.querySelectorAll('.video-row'));
            const totalVideos = allVideoRows.length;
            const completedCount = Object.keys(videoDetailsForThisTopic || {}).length;
            const coursePurchaseId = form.querySelector('.video-play-btn')?.dataset.coursePurchaseId;

            // If any video started/completed: show rows and hide start button
            if (completedCount > 0 || localStorage.getItem(`topic_${topicId}_${coursePurchaseId}_video_started`) === 'true') {
                form.querySelectorAll('.video-row').forEach(row => row.classList.remove('d-none'));
                const startBtn = form.querySelector('.step-action[data-step="2"]');
                if (startBtn) startBtn.classList.add('d-none');

                const statusCell = form.querySelector('.status-2');
                if (statusCell) statusCell.textContent = 'In Progress';
            }

            let foundFirstUncompleted = false;

            allVideoRows.forEach((row, idx) => {
                const btn = row.querySelector('.video-play-btn');
                const statusEl = row.querySelector('.video-status');
                const videoId = btn.dataset.videoId;

                // const isCompleted = (videoDetailsForThisTopic || {})[videoId];
                const isCompleted = videoDetailsForThisTopic && (
                    videoDetailsForThisTopic[videoId] ||
                    videoDetailsForThisTopic[String(videoId)] ||
                    videoDetailsForThisTopic[Number(videoId)]
                );

                // Update status display
                if (isCompleted) {
                    if (statusEl) {
                        statusEl.textContent = 'Completed';
                        statusEl.classList.remove('text-muted');
                        statusEl.classList.add('text-success');
                    }
                    btn.dataset.completed = 'true';

                    // Completed video - always enable for rewatch
                    btn.removeAttribute('disabled');
                    btn.style.pointerEvents = 'auto';
                    btn.style.cursor = 'pointer';
                    btn.classList.remove('btn-secondary');
                    btn.classList.add('btn-primary');
                } else if (!foundFirstUncompleted) {
                    // First uncompleted video - enable it
                    btn.removeAttribute('disabled');
                    btn.classList.remove('btn-secondary');
                    btn.classList.add('btn-primary');
                    foundFirstUncompleted = true;
                } else {
                    // Other uncompleted videos - disable them
                    btn.setAttribute('disabled', true);
                    btn.classList.remove('btn-primary');
                    btn.classList.add('btn-secondary');
                }
            });

            // If all completed -> mark step-2 complete UI for this topic
            if (totalVideos > 0 && completedCount === totalVideos) {
                const completeBtn = form.querySelector('.step-action[data-step="2"]');
                if (completeBtn) {
                    completeBtn.classList.remove('d-none');
                    completeBtn.textContent = 'Complete';
                    completeBtn.classList.remove('btn-primary');
                    completeBtn.classList.add('btn-success');
                    completeBtn.dataset.status = 'inprogress';
                }

                const statusCell = form.querySelector('.status-2');
                if (statusCell) statusCell.textContent = 'Complete';
            }
        }
    </script>
@endsection