@extends('frontend.maintemplate.maintemplate')

@section('title', 'Workshop 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;
        }

        .my-courses-details-top-section .my-courses-details-top-inner .image-title-progress-wrapper .right-details-section h4 {
            margin-bottom: 10px !important;
        }

        .my-courses-details-top-section .my-courses-details-top-inner .image-title-progress-wrapper .right-details-section h6 {
            font-size: 18px;
            font-weight: 400;
            color: #8E8E8E;
        }

        .my-courses-details-top-section .my-courses-details-top-inner .image-title-progress-wrapper .right-details-section p {
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 15px;
            font-size: 16px;
            color: black;
            margin-bottom: 20px;
            font-weight: bold;
        }
        .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;
        }

        .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% !important;
        }

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

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

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

        .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 .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>

    <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('frontend/assets/images/others/mycoursesdetails-image.jpg') }}" alt="">
                    </div>
                    <div class="right-details-section">
                        <h4>{{ $workshop->title }}</h4>
                        <h6>THEORY MATERIAL</h6>
                        <p>
                            <img src="{{ asset('frontend/assets/images/home/calendar.png') }}" alt="">
                            <span>Workshop Date - {{ \Carbon\Carbon::parse($workshop->date)->format('d M Y') }}</span>
                        </p>
                        <div class="progress-completed-wrapepr">
                            <div class="progress-wrapper">
                                <p class="complete-progress" id="workshop-progress-text">0% Complete</p>
                                <div class="progress">
                                    <div class="progress-bar" id="workshop-progress-bar" role="progressbar" aria-label="Example with label"
                                        style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
                                    </div>
                                </div>
                            </div>
                            <div class="completed-wrapper">
                                <div class="icon-wrapper">
                                    <span class="material-icons">
                                        done
                                    </span>
                                </div>
                                <p>Completed</p>
                            </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>
                                    Workshop 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="false">
                                <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>
                    </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="{{ $registerWorkshop->tracking_url ?? '#' }}" target="{{ $workshop->registerWorkshop->tracking_url ? '_blank' : '_self' }}">Click Here Track Your Reading Material </a>
                                    </div>
                                    <div class="track-id-wrapper">
                                        <p>Track ID: <span>{{ $registerWorkshop->tracking_id ?? '' }}</span></p>
                                    </div>
                                </div>
                                <div class="link-wrapper">
                                    <!-- <a href="#">Complete Theory</a> -->
                                    <button>Complete Theory</button>
                                </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>Foundation Course</h5> --}}
                                </div>
                                <div class="table-data-wrapper">

                                    <form action="{{ route('student.exam.store') }}" method="POST" class="workshop-progress-form" data-workshop-id="{{ $workshop->id }}">
                                        @csrf
                                        <input type="hidden" name="student_id" value="{{ Auth::id() }}">
                                        <input type="hidden" name="workshop_id" value="{{ $workshop->id }}">

                                        @php
                                            $progress = $progressData ?? [];

                                            // Pull current progress for this user/workshop
                                            $statusReadBook = $progress['read_book']->status ?? 'pending';
                                            $statusWatchVideo = $progress['watch_video']->status ?? 'pending';
                                            $statusMcq = $progress['mcq']->status ?? 'pending';

                                            $jsProgressData = [
                                                'read_book' => $statusReadBook,
                                                'watch_video' => $statusWatchVideo,
                                                'mcq' => $statusMcq
                                            ];

                                            // Map button text/classes dynamically
                                            $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($statusReadBook);
                                            $b2 = $btnMap($statusWatchVideo);
                                            $b3 = $btnMap($statusMcq);

                                            $hasPassingScore = isset($examAttempts[$workshop->id]) && $examAttempts[$workshop->id]->firstWhere('status', 'pass') !== null;

                                            $passScore = env('WORKSHOP_EXAM_PASS_SCORE', 85);
                                            $hasPassingScore = isset($examAttempts[$workshop->id]) &&
                                                $examAttempts[$workshop->id]->first(function ($attempt) use ($passScore) {
                                                    return $attempt->score >= $passScore;
                                                }) !== null;

                                            $latestScore = 0;
                                            if (isset($examAttempts[$workshop->id]) && $examAttempts[$workshop->id]->isNotEmpty()) {
                                                $latestScore = $examAttempts[$workshop->id]->first()['score'];
                                            }


                                            $workshopPdfs = $workshop->pdfs->sortBy(fn($p) => $p->sequence_number ?? 0)->values();
                                            $totalPdfs = $workshopPdfs->count();

                                            $hasPdfs = $totalPdfs > 0;

                                            $statusRow = \App\Models\WorkshopPurchasedStatus::where('workshop_id', $workshop->id)
                                            ->where('type', 'read_book')
                                            ->first();

                                            $pdfDetails = $statusRow && $statusRow->workshop_pdfs_details ? json_decode($statusRow->workshop_pdfs_details, true) : [];

                                            $completedCount = collect($pdfDetails)
                                                ->filter(function ($status) {
                                                    return $status === 'completed';
                                                })
                                                ->count();

                                            $allPdfsRead = $completedCount >= $totalPdfs;
                                        @endphp

                                        <div class="table-details-section">
                                            <div class="top-title-wrapper">
                                                <h6>{{ $workshop->title ?? 'Workshop Title' }}</h6>
                                                <p>
                                                    Module
                                                    {{ in_array('pending', [$statusReadBook, $statusWatchVideo, $statusMcq]) ? 'In Progress' : 'Completed' }}
                                                </p>
                                            </div>

                                            <div class="table-responsive">
                                                <table class="table custom-table">
                                                    {{-- STEP 1: READ BOOK --}}
                                                    <tr>
                                                        <td><span class="steps">Step 1</span></td>
                                                        <td><span class="icon-text"><img src="{{ asset('frontend/assets/images/others/read-book.png') }}"alt="">Read Book</span></td>
                                                        <td>
                                                            @if ($statusReadBook == 'complete')
                                                                <button type="button" class="btn link-wrapper completed-link" disabled>Completed</button>
                                                            @elseif($statusReadBook == 'inprogress')
                                                                @if($allPdfsRead)
                                                                    <button type="button"
                                                                    class="link-wrapper btn {{ $b1['class'] }} step-action {{ $statusReadBook === 'complete' ? 'completed-link' : '' }} read-book-btn"
                                                                    data-step="1" data-type="read_book"
                                                                    data-status="{{ $statusReadBook }}"
                                                                    @if ($statusReadBook === 'complete') disabled @endif>
                                                                    {{ $b1['text'] }}
                                                                </button>
                                                                @else
                                                                    <button type="button" class="link-wrapper btn {{ $b1['class'] }} step-action read-book-btn d-none" data-step="1" data-type="read_book" data-status="{{ $statusReadBook }}">
                                                                        {{ $b1['text'] }}
                                                                    </button>
                                                                @endif
                                                            @else
                                                                <button type="button"
                                                                    class="link-wrapper btn {{ $b1['class'] }} step-action read-book-btn"
                                                                    data-step="1" data-type="read_book"
                                                                    data-status="{{ $statusReadBook }}"
                                                                    @if ($statusReadBook === 'complete') disabled @endif>
                                                                    {{ $b1['text'] }}
                                                                </button>
                                                            @endif
                                                        </td>
                                                        <td>
                                                            @if ($statusReadBook === 'complete')
                                                                <div class="icon-wrapper"><span
                                                                        class="material-icons">done</span>Completed</div>
                                                            @else
                                                                <div
                                                                    class="icon-wrapper pending-icon-wrapper status status-1">
                                                                    {{ ucfirst($statusReadBook) }}</div>
                                                            @endif
                                                        </td>
                                                    </tr>

                                                    @foreach($workshopPdfs as $index => $workshopPdf)
                                                        @php
                                                            $pdfState = $pdfDetails[$workshopPdf->id] ?? null;
                                                            $isReading = $pdfState === 'reading';
                                                            $isCompleted = $pdfState === 'completed';

                                                            $prevCompleted = true;
                                                            // if ($index > 0) {
                                                            //     $prevPdfId = $workshopPdf[$index - 1]->id;
                                                            //     $prevCompleted = isset($pdfDetails[$prevPdfId])
                                                            //         && $pdfDetails[$prevPdfId] === 'completed';
                                                            // }
                                                            if ($index > 0) {
                                                                $prevPdfId = $workshopPdfs[$index - 1]->id;

                                                                $prevCompleted = isset($pdfDetails[$prevPdfId]) &&
                                                                    $pdfDetails[$prevPdfId] === 'completed';
                                                            }
                                                        @endphp

                                                        <tr class="pdf-row {{ $statusReadBook == 'pending' ? 'd-none' : '' }}" data-index="{{ $index }}">

                                                            <td></td>
                                                            <td>Read PDF {{ $index + 1 }}</td>

                                                            <td>
                                                                {{-- COMPLETED --}}
                                                                @if($isCompleted)

                                                                <a href="javascript:void(0)" data-pdf-id="{{ $workshopPdf->id }}" data-pdf-type="workshop" data-workshop-id="{{ $workshop->id }}" data-read-book-status="complete" class="link-wrapper btn btn-primary view-pdf-btn">
                                                                    Read
                                                                </a>
                                                                    <button class="completed-link link-wrapper btn btn-primary" disabled>
                                                                        Completed
                                                                    </button>

                                                                {{-- READING (PAGE REFRESH SAFE) --}}
                                                                @elseif($isReading)
                                                                    <a href="javascript:void(0)" data-pdf-id="{{ $workshopPdf->id }}" data-pdf-type="workshop" data-workshop-id="{{ $workshop->id }}" data-read-book-status="inprogress" class="link-wrapper btn btn-primary view-pdf-btn" @if(!$prevCompleted) disabled @endif>
                                                                        Read
                                                                    </a>

                                                                    <button type="button" class="link-wrapper btn btn-primary read-pdf-btn" data-pdf-id="{{ $workshopPdf->id }}" data-workshop-id="{{ $workshop->id }}" data-index="{{ $index }}">
                                                                        Complete Read
                                                                    </button>

                                                                {{-- NOT STARTED --}}
                                                                @else
                                                                    <a href="javascript:void(0)" data-pdf-id="{{ $workshopPdf->id }}" data-pdf-type="workshop" data-workshop-id="{{ $workshop->id }}" data-read-book-status="inprogress" class="link-wrapper btn btn-primary view-pdf-btn" @if(!$prevCompleted) disabled @endif>
                                                                        Read
                                                                    </a>

                                                                    <button type="button"
                                                                        class="link-wrapper btn btn-primary read-pdf-btn d-none"
                                                                        data-pdf-id="{{ $workshopPdf->id }}"
                                                                        data-workshop-id="{{ $workshop->id }}"
                                                                        data-index="{{ $index }}">
                                                                        Complete Read
                                                                    </button>
                                                                @endif
                                                            </td>

                                                            <td>
                                                                @if($isCompleted)
                                                                    <div class="icon-wrapper">
                                                                        <span class="material-icons">done</span>Completed
                                                                    </div>
                                                                @else
                                                                    <div class="icon-wrapper pdf-status text-muted">Pending</div>
                                                                @endif
                                                            </td>
                                                        </tr>
                                                    @endforeach

                                                    {{-- STEP 2: WATCH VIDEO --}}
                                                    @php
                                                        // $videos = $workshop->videos ?? [];
                                                        $videos = $workshop->videos->sortBy(function($vid) {
                                                            return $vid->pivot->sequence_number ?? 0;
                                                        })->values(); // reindex array
                                                    @endphp
                                                    @if($videos->count() > 0)
                                                        <tr class="step2-main-row">
                                                            <td><span class="steps">Step 2</span></td>
                                                            <td><span class="icon-text">
                                                                <img src="{{ asset('frontend/assets/images/others/watch-video.png') }}" alt=""> Watch Video
                                                            </span></td>
                                                            <td>
                                                                @if($statusWatchVideo === 'complete')
                                                                    <button type="button"
                                                                        class="link-wrapper btn completed-link"
                                                                        data-step="2"
                                                                        data-type="watch_video"
                                                                        data-status="{{ $statusWatchVideo }}" disabled>
                                                                        Completed
                                                                    </button>
                                                                @else
                                                                    @if($statusWatchVideo === 'pending')
                                                                        <button type="button"
                                                                            class="link-wrapper btn {{ $b2['class'] }} step-action"
                                                                            data-step="2"
                                                                            data-type="watch_video"
                                                                            data-status="{{ $statusWatchVideo }}"
                                                                            @if($statusReadBook !== 'complete' || $statusWatchVideo === 'complete') disabled @endif>
                                                                            {{ $b2['text'] }}
                                                                        </button>
                                                                    @else
                                                                        <button type="button"
                                                                            class="link-wrapper btn {{ $b2['class'] }} step-action d-none"
                                                                            data-step="2"
                                                                            data-type="watch_video"
                                                                            data-status="{{ $statusWatchVideo }}"
                                                                            @if($statusReadBook !== 'complete' || $statusWatchVideo === 'complete') disabled @endif>
                                                                            {{ $b2['text'] }}
                                                                        </button>
                                                                    @endif
                                                                @endif
                                                            </td>
                                                            <td>
                                                                @if($statusWatchVideo === 'complete')
                                                                    <div class="icon-wrapper"><span class="material-icons">done</span>Completed</div>
                                                                @else
                                                                    <div class="icon-wrapper pending-icon-wrapper status status-2">{{ ucfirst($statusWatchVideo) }}</div>
                                                                @endif
                                                            </td>
                                                        </tr>

                                                        {{-- Hidden video list (will appear after Start) --}}
                                                        @foreach($videos as $index => $vid)
                                                            @php
                                                                $token = \Illuminate\Support\Str::uuid()->toString();
                                                                $secureUrl = \URL::temporarySignedRoute(
                                                                    'secure.video',
                                                                    now()->addMinutes(120),
                                                                    ['filename' => $vid->video_upload, 'token' => $token]
                                                                );

                                                                $watched = \App\Models\WorkshopPurchasedStatus::where('workshop_id', $workshop->id)
                                                                ->where('user_id', auth()->id())
                                                                ->where('type', 'watch_video')
                                                                ->whereRaw("JSON_EXTRACT(video_details, '$.\"{$vid->id}\"') IS NOT NULL")
                                                                ->exists();
                                                            @endphp
                                                            <tr class="video-row {{ $statusWatchVideo=="pending"?"d-none":"" }}" data-index="{{ $index }}">
                                                                <td></td>
                                                                <td>Watch Video {{ $index + 1 }}</td>
                                                                <td>

                                                                    @if ($watched)
                                                                        <button type="button" class="link-wrapper btn completed-link" disabled="">Completed</button>
                                                                    @endif

                                                                    <a type="button"
                                                                        data-video="{{ $secureUrl }}"
                                                                        data-index="{{ $index }}"
                                                                        data-workshop-id="{{ $workshop->id }}"
                                                                        data-video-id="{{ $vid->id }}"
                                                                        class="play-btn link-wrapper btn btn-primary video-play-btn"
                                                                        @if($index > 0) disabled @endif>
                                                                        <span class="icon-text">
                                                                            <img src="{{ asset('frontend/assets/images/others/watch-video.png') }}" class="watch-video-icon" alt=""> {{ $watched ? 'Rewatch' : 'View' }}
                                                                        </span>
                                                                    </a>
                                                                </td>
                                                                <td>
                                                                    @if($watched)
                                                                        <div class="icon-wrapper"><span class="material-icons">done</span>Completed</div>
                                                                    @else
                                                                        <div class="icon-wrapper video-status text-muted" data-index="{{ $index }}">Pending</div>
                                                                    @endif
                                                                </td>
                                                            </tr>
                                                        @endforeach
                                                    @endif


                                                    {{-- STEP 3: MCQ --}}
                                                    <tr>
                                                        <td><span class="steps">Step 3</span></td>
                                                        <td>
                                                            <span class="icon-text">
                                                                <img src="{{ asset('frontend/assets/images/others/mcq.png') }}" alt=""> MCQ
                                                            </span>
                                                        </td>
                                                        <td class="{{ $statusReadBook }} {{ $statusWatchVideo }}">
                                                            @php
                                                            // @dd($statusReadBook,$statusWatchVideo);
                                                                $mcqEnabled = $statusReadBook === 'complete' && ($statusWatchVideo === 'complete');
                                                                $mcqText = $statusMcq === 'pending' ? 'Solve' : $b3['text'];
                                                            @endphp

                                                            @if ($statusMcq === 'complete')
                                                                @if($hasPassingScore)
                                                                    <button type="button" class="btn link-wrapper completed-link" disabled>Completed</button>
                                                                @else
                                                                    <button type="submit"
                                                                        class="link-wrapper btn {{ $b3['class'] }} step-action final-submit"
                                                                        data-step="3"
                                                                        data-type="mcq">
                                                                        ReTest
                                                                    </button>
                                                                @endif
                                                            @else
                                                                <button type="submit"
                                                                    class="link-wrapper btn final-submit {{ $b3['class'] }} step-action {{ $statusMcq === 'complete' ? 'completed-link' : '' }}"
                                                                    data-step="3"
                                                                    data-type="mcq"
                                                                    data-status="{{ $statusMcq }}"
                                                                    @if (!$mcqEnabled || $statusMcq === 'complete') disabled @endif>
                                                                    {{ $mcqText }}
                                                                </button>
                                                            @endif
                                                        </td>
                                                        <td>
                                                            @if ($statusMcq === 'complete')
                                                                {{-- <div class="icon-wrapper"><span class="material-icons">done</span>Completed</div> --}}
                                                                @if($hasPassingScore)
                                                                    <div class="icon-wrapper"><span class="material-icons">done</span>Completed</div>
                                                                @else
                                                                    <div class="icon-wrapper text-danger">
                                                                        <span class="material-icons">warning</span>
                                                                        {{ $examScores[$workshop->id] ?? 0 }}%
                                                                    </div>
                                                                @endif
                                                            @else
                                                                <div class="icon-wrapper lock-icon-wrapper status status-3">
                                                                    <i class="fa fa-lock" aria-hidden="true"></i>
                                                                </div>
                                                            @endif
                                                        </td>
                                                    </tr>
                                                </table>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                                <div class="bottom-link-wrapper">
                                    <a href="#">Download Certificate</a>
                                </div>
                            </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="none" 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="{{ 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>
        function updateProgressBar(progressData) {
            if (!progressData) progressData = {};

            let progress = 0;
            if (progressData['read_book'] === 'complete') progress = 33.33;
            if (progressData['watch_video'] === 'complete') progress = 66.66;
            if (progressData['mcq'] === 'complete') progress = 100;

            $('#workshop-progress-bar').css('width', progress + '%').attr('aria-valuenow', progress);
            $('#workshop-progress-text').text(progress + '% Complete');

            if (progress === 0) {
                $('.completed-wrapper p').text('Pending');
                $('.completed-wrapper .icon-wrapper span').text('lock');
            } else if (progress === 33.33 || progress === 66.66) {
                $('.completed-wrapper p').text('In Progress');
                $('.completed-wrapper .icon-wrapper span').text('done');
            } else if (progress === 100) {
                $('.completed-wrapper p').text('Completed');
                $('.completed-wrapper .icon-wrapper span').text('done');
            }
        }

        $(document).ready(function() {

            const progressData = @json($jsProgressData);
            updateProgressBar(progressData);

            // Function to refresh step buttons dynamically
            function refreshSteps($form) {
                $form.find('.step-action').each(function() {
                    const $btn = $(this);
                    const step = parseInt($btn.data('step'));
                    const status = $btn.data('status');

                    const prevStep = $form.find(`.step-action[data-step="${step - 1}"]`);
                    const prevStatus = prevStep.length ? prevStep.data('status') : 'complete';

                    // Enable if first step or previous step is complete
                    if (step === 1 || prevStatus === 'complete') {
                        $btn.prop('disabled', false);
                    } else {
                        $btn.prop('disabled', true);
                    }

                    // Update appearance and text
                    if (status === 'complete')
                    {
                        $btn.removeClass('btn-primary btn-success').addClass('btn-secondary').text('Completed').prop('disabled', true);
                        $form.find(`.status-${step}`).html(`<div class="icon-wrapper status status-${step}"><span class="material-icons">done</span>Completed</div>`);
                    }
                    // else if (status === 'inprogress')
                    // {
                    //     if ($btn.data('type') === 'watch_video') {
                    //         $form.find('.view_video_button').show();
                    //         $btn.addClass('d-none'); // hide "Complete" by default

                    //         // If user has watched full video earlier (same browser), show "Complete" button too
                    //         const workshopId = $form.data('workshop-id') || $form.find('input[name="workshop_id"]').val();
                    //         const watchedKey = `workshop_${workshopId}_video_watched`;
                    //         if (localStorage.getItem(watchedKey) === 'true') {
                    //             $btn.removeClass('d-none');
                    //             $btn.removeAttr('disabled').data('status', 'inprogress').removeClass('btn-primary btn-secondary').addClass('btn-success').text('Complete');
                    //             $form.find(`.status-${step}`).html(`<div class="icon-wrapper pending-icon-wrapper status status-${step}">Inprogress</div>`);
                    //         } else {
                    //             // still inprogress and not watched fully: keep only View
                    //             $form.find(`.status-${step}`).html(`<div class="icon-wrapper pending-icon-wrapper status status-${step}">Inprogress</div>`);
                    //         }
                    //     } else {
                    //         $btn.removeClass('btn-primary btn-secondary').addClass('btn-success').text('Complete');
                    //     }
                    // } else {
                    //     // $btn.removeClass('btn-success btn-secondary').addClass('btn-primary').text('Start');
                    // }
                });
            }

            // Click handler for steps
            $('.step-action').click(function(e) {
                const $button = $(this);
                const step = parseInt($button.data('step'));
                if (step === 3) return;
                e.preventDefault();

                const $form = $button.closest('form');
                const type = $button.data('type');
                const currentStatus = $button.data('status');
                const workshopId = $form.find('input[name="workshop_id"]').val();


                let addCompletedClass = false;
                let newStatus = '';
                if (currentStatus === 'pending') {
                    newStatus = 'inprogress';
                }
                else if (currentStatus === 'inprogress') {
                    newStatus = 'complete';
                    addCompletedClass = true;
                }
                else {
                    return; // Already complete
                }

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

                $.ajax({
                    url: "{{ route('student.workshop.progress.update') }}",
                    type: "POST",
                    data: {
                        _token: "{{ csrf_token() }}",
                        workshop_id: workshopId,
                        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);

                            // ✅ Update status text/icon in the table cell
                            //const step = $button.data('step');
                            const $statusCell = $form.find(`.status-${step}`);

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

                            if (newStatus === 'complete') {
                                $statusCell
                                    .html('<div class="icon-wrapper"><span class="material-icons">done</span>Completed</div>');

                                    const workshopId = $form.data('workshop-id') || $form.find('input[name="workshop_id"]').val();
                                    const watchedKey = `workshop_${workshopId}_video_watched`;
                                    localStorage.removeItem(watchedKey);
                            } else if (newStatus === 'inprogress') {
                                $statusCell
                                    .html(`<div class="icon-wrapper pending-icon-wrapper status status-${step}">Inprogress</div>`);
                            } else {
                                $statusCell
                                    .html(`<div class="icon-wrapper pending-icon-wrapper status status-${step}">Pending</div>`);
                            }

                            // ✅ Update button appearance
                            if (newStatus === 'inprogress') {
                                $button.removeClass('btn-primary btn-secondary').addClass('btn-success').text('Complete');
                            } else if (newStatus === 'complete') {
                                $button.removeClass('btn-primary btn-success').addClass('btn-secondary').text('Completed').prop('disabled', true);
                            }

                            // ✅ Refresh logic for other steps
                            refreshSteps($form);

                            const progressData = response.progressData || {};
                            updateProgressBar(progressData);
                        } else {
                            alert('Something went wrong. Try again.');
                            $button.text('Retry');
                        }
                    },
                    error: function() {
                        alert('Error updating workshop 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 (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 workshopId = btn.data('workshop-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.workshop.progress.update') }}",
                    type: "POST",
                    data: {
                        _token: "{{ csrf_token() }}",
                        type: 'read_book',
                        workshop_id: workshopId,
                        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);
                    }
                });
            });

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

                const btn = $(this);
                const pdfId = btn.data('pdf-id');
                const workshopId = btn.data('workshop-id');
                const index = btn.data('index');
                const form = btn.closest('form');
                const currentRow = document.querySelector(`form[data-workshop-id="${workshopId}"] .pdf-row[data-index="${index}"]`);
                $.ajax({
                    url: "{{ route('student.workshop.progress.update') }}",
                    type: "POST",
                    data: {
                        _token: "{{ csrf_token() }}",
                        type: 'read_book',
                        workshop_id: workshopId,
                        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-2">
                                    <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) {

                            // 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);
                        }
                    }
                });
            });

            // Initialize on page load
            // $('.workshop-progress-form').each(function() {
            //     refreshSteps($(this));
            // });

        });
    </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>
    const video = document.getElementById('secureVideo');
    const overlay = document.getElementById('emailOverlay');
    const modal = document.getElementById('videoModal');
    const fullscreenWrapper = document.getElementById('fullscreenWrapper');
    const videoDetails = @json($videoDetails ?? []);

    const lastTimes = {};
    let overlayTimer;
    let suppressTimeupdate = false;

    // === Fullscreen helpers ===
    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;
    }

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

    // === Move Watermark Randomly ===
    function moveOverlayRandomly() {
        if (!overlay || !fullscreenWrapper) return;

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

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

        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;
        return videoDetails.hasOwnProperty(String(videoId)) || videoDetails.hasOwnProperty(Number(videoId));
    }

    // Modified timeupdate handler
    video.addEventListener('timeupdate', function () {
        if (suppressTimeupdate) return; // temporary bypass for programmatic seeks

        const videoId = video.dataset.videoId;
        const isCompleted = isVideoCompleted(videoId);

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

        if (!isCompleted) {
            // Prevent forward seek for incomplete videos
            if (video.currentTime > lastTimes[videoId] + 1) {
                // keep user from jumping ahead
                video.currentTime = lastTimes[videoId];
            } else {
                // update lastTime monotonically (avoid going backwards)
                lastTimes[videoId] = Math.max(lastTimes[videoId], video.currentTime);
            }
        } else {
            // Completed video — free seek allowed
            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.workshopId) return;

        const workshopId = video.dataset.workshopId;
        const videoId = video.dataset.videoId;
        const currentTime = video.currentTime;

        try {
            await fetch('{{ route("student.workshop.saveWorkshopVideoWatchProgress") }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                },
                body: JSON.stringify({
                    workshop_id: workshopId,
                    video_id: videoId,
                    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);

    // === Prevent Right Click ===
    video.addEventListener('contextmenu', event => event.preventDefault());

    // === Close Button Handler ===
    document.getElementById('closeModal').addEventListener('click', async function () {
        await saveVideoProgress();
        video.pause();
        video.src = '';
        modal.style.display = 'none';
        clearTimeout(overlayTimer);

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

    // === STEP 2 MULTIPLE VIDEO LOGIC ===

    // When user clicks "Start" on Step 2
    document.querySelectorAll('.step-action[data-step="2"]').forEach(btn => {
        btn.addEventListener('click', function () {
            const form = this.closest('form');
            const workshopId = form.getAttribute('data-workshop-id');

            // Show all video rows
            form.querySelectorAll('.video-row').forEach(row => {
                row.classList.remove('d-none');
            });

            // Hide Start button
            this.classList.add('d-none');

            // Update status text
            const statusCell = form.querySelector('.status-2');
            if (statusCell) {
                statusCell.textContent = 'Inprogress';
            }

            // ✅ Save progress in localStorage
            localStorage.setItem(`workshop_${workshopId}_video_started`, 'true');
        });
    });

    document.querySelectorAll('.video-play-btn').forEach(btn => {
        btn.addEventListener('click', async function () {
            if (btn.hasAttribute('disabled')) return;

            const index = parseInt(btn.dataset.index);
            const form = btn.closest('form');
            const workshopId = form.dataset.workshopId;
            const videoUrl = btn.dataset.video;

            // Prepare video element

            let resumePosition = 0;

            try {
                console.log("workshop_id:", workshopId);
                console.log("video_id:", btn.dataset.videoId);

                // 🔹 Fetch last watch position
                const response = await fetch('{{ route("student.workshop.saveWorkshopVideoWatchProgress") }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    },
                    body: JSON.stringify({
                        workshop_id: workshopId,
                        video_id: btn.dataset.videoId,
                        get_only: true
                    })
                });

                const data = await response.json();
                resumePosition = 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.workshop.verifyVideoAccess") }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    },
                    body: JSON.stringify({
                        video_id: btn.dataset.videoId,
                        workshop_id: workshopId,
                    }),
                });

                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;
            }

            video.src = videoUrl;
            video.dataset.workshopId = workshopId;
            video.dataset.index = index;
            video.dataset.videoId = btn.dataset.videoId;
            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) {
                    // video.currentTime = resumePosition;
                    programmaticSeekAndPlay(resumePosition);
                    console.log('Resuming at:', video.currentTime);
                } else {
                    console.log('Starting from beginning.');
                    video.play();
                }

                // video.play();
            });

            // Show modal and fullscreen
            modal.style.display = 'flex';
            moveOverlayRandomly();

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

    video.addEventListener('ended', async function () {
        const workshopId = video.dataset.workshopId;
        const currentIndex = parseInt(video.dataset.index);
        const currentRow = document.querySelector(`.video-row[data-index="${currentIndex}"]`);
        const playBtn = currentRow.querySelector('.video-play-btn');
        const videoId = playBtn.dataset.videoId;

        // ✅ If already completed, skip AJAX but still allow replay
        if (!playBtn.dataset.completed) {
            try {
                const response = await fetch('{{ route('student.workshop.video.progress') }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    },
                    body: JSON.stringify({
                        workshop_id: workshopId,
                        video_id: videoId
                    })
                });

                const data = await response.json();
                if (data.success) {
                    videoDetails[videoId] = new Date().toISOString();

                    // Update UI
                    const statusEl = currentRow.querySelector('.video-status');
                    if (statusEl) {
                            statusEl.outerHTML = `
                                <div class="icon-wrapper status status-2">
                                    <span class="material-icons">done</span>Completed
                                </div>
                            `;
                        }
                    // if (statusEl) {
                    //     statusEl.textContent = 'Completed';
                    //     statusEl.classList.remove('text-muted');
                    //     statusEl.classList.add('text-success');
                    // }

                    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>');
                        }

                    // Mark as completed to prevent duplicate AJAX
                    playBtn.dataset.completed = 'true';

                }
            } catch (err) {
                console.error('Error saving progress:', err);
            }
        }

        // ✅ Unlock next video if available
        const nextRow = document.querySelector(`.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');
            }
        } else {
            console.log("All videos completed");
            // All videos done — trigger Step 2 complete only once
            const completeBtn = document.querySelector('.step-action[data-step="2"]');
            if (completeBtn) {
                const completeData = {
                    _token: '{{ csrf_token() }}',
                    workshop_id: workshopId,
                    type: 'watch_video',
                    status: 'complete',
                    complete_time: new Date().toISOString()
                };

                $.ajax({
                    url: "{{ route('student.workshop.progress.update') }}",
                    type: "POST",
                    data: completeData,
                    success: function(response) {
                        if (response.success) {
                            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 = document.querySelector('.status-2');
                            if (statusCell) {
                                statusCell.innerHTML = '<div class="icon-wrapper"><span class="material-icons">done</span>Completed</div>';
                            }

                            const progressData = response.progressData || {};
                            updateProgressBar(progressData);

                            const mcqBtn = document.querySelector('.final-submit[data-step="3"]');
                            if (mcqBtn) {
                                mcqBtn.removeAttribute('disabled');
                                mcqBtn.classList.remove('btn-secondary');
                                mcqBtn.classList.add('btn-primary');
                                console.log('Step 3 (MCQ) button enabled');
                            }
                        }
                    },
                    error: function() {
                        console.error('Error updating workshop progress for Step 2');
                    }
                });
            }
        }
    });

    document.addEventListener('DOMContentLoaded', function () {
        document.querySelectorAll('form[data-workshop-id]').forEach(form => {
            const workshopId = form.dataset.workshopId;
            // const videoDetails = @json($videoDetails ?? []); // ← from Laravel controller
            const totalVideos = form.querySelectorAll('.video-row').length;
            const completedCount = Object.keys(videoDetails).length;

            // ✅ Show all video rows if any video started or completed
            if (Object.keys(videoDetails).length > 0) {
                form.querySelectorAll('.video-row').forEach(row => {
                    row.classList.remove('d-none');
                });

                // Hide "Start" button once any video is started
                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 = 'Inprogress';
            }

            // ✅ Restore video states from DB JSON
            const allVideoRows = form.querySelectorAll('.video-row');
            allVideoRows.forEach((row, idx) => {
                const btn = row.querySelector('.video-play-btn');
                const statusEl = row.querySelector('.video-status');
                const videoId = btn.dataset.videoId;

                if (videoDetails[videoId]) {
                    // ✅ Completed video — make rewatchable
                    // statusEl.textContent = 'Completed';
                    // statusEl.classList.remove('text-muted');
                    // statusEl.classList.add('text-success');

                    // ✅ Allow replay (do NOT disable)
                    btn.removeAttribute('disabled');
                    btn.classList.remove('btn-secondary');
                    btn.classList.add('btn-primary');
                    btn.dataset.completed = 'true';
                } else {
                    // ❌ Not completed yet
                    btn.setAttribute('disabled', true);
                    btn.classList.remove('btn-primary');
                    btn.classList.add('btn-secondary');
                }
            });

            // ✅ Enable only the first uncompleted video (sequence rule for first time)
            const firstUncompleted = Array.from(allVideoRows).find(row => {
                const btn = row.querySelector('.video-play-btn');
                const videoId = btn.dataset.videoId;
                return !videoDetails[videoId];
            });

            if (firstUncompleted) {
                const btn = firstUncompleted.querySelector('.video-play-btn');
                btn.removeAttribute('disabled');
                btn.classList.remove('btn-secondary');
                btn.classList.add('btn-primary');
            }

            // ✅ If all completed
            if (completedCount === totalVideos && totalVideos > 0) {
                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>



    <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>
@endsection