@extends('frontend.maintemplate.maintemplate')

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

@section('content')
    <!-- 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/' . $course->thumbnail_image) }}" alt="{{ $course->name }}">
                    </div>
                    <div class="right-details-section">
                        <h6>Course Program</h6>
                        <h4>{{ $course->subcategory->name ?? '' }}</h4>
                        <div class="progress-completed-wrapepr">
                            <div class="progress-wrapper">
                                <p class="complete-progress">65% Complete</p>
                                <div class="progress">
                                    <div class="progress-bar" role="progressbar" aria-label="Example with label"
                                        style="width: 65%;" aria-valuenow="65" 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>
                                    Course Material
                                </div>
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" 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>
                                    Practical Sessions
                                </div>
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-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>
                    </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 show active" 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 ?? '' }}">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="#">Complete Theory</a>
                                </div>
                            </div>
                        </div>

                        <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab"
                            tabindex="0">
                            <div class="tab-content-wrapepr">
                                <div class="course-title-wrapper">
                                    <h5>{{ $course->name ?? '' }} Course</h5>
                                </div>
                                <div class="table-data-wrapper">
                                    @foreach ($course->courseTopics as $courseTopic)
                                        @php
                                            $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';
                                        @endphp

                                        <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="{{ $course->id }}">
                                            <input type="hidden" name="topic_id" value="{{ $courseTopic->topic->id }}">
                                            <input type="hidden" name="course_purchase_id"
                                                value="{{ $checkCoursePurchase->id }}">

                                            <div class="table-details-section">
                                                <div class="top-title-wrapper">
                                                    <h6>{{ $loop->iteration }}. {{ $courseTopic->topic->title }}</h6>
                                                    <p>Module
                                                        {{ in_array('pending', [$status1, $status2, $status3]) ? 'In Progress' : 'Completed' }}
                                                    </p>
                                                </div>
                                                <div class="table-responsive">
                                                    <table class="table">
                                                        <tr>
                                                            <td scope="row"><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 ($status1 == 'complete')
                                                                    <a href="javascript:void(0);"
                                                                        class="link-wrapper completed-link">Completed</a>
                                                                @else
                                                                    <a href="#" class="link-wrapper">Start</a>
                                                                @endif
                                                            </td>
                                                            <td>
                                                                @if ($status1 == 'complete')
                                                                    <div class="icon-wrapper"><span
                                                                            class="material-icons">done</span>Completed
                                                                    </div>
                                                                @else
                                                                    <div class="icon-wrapper pending-icon-wrapper">Pending
                                                                    </div>
                                                                @endif
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td scope="row"><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>
                                                                @php
                                                                    if (!empty($courseTopic->topic->video)) {
                                                                        $filename =
                                                                            $courseTopic->topic->video->video_upload;

                                                                        // Generate a UUID token for one-time access
                                                                        $token = \Illuminate\Support\Str::uuid()->toString();

                                                                        // Define route and query params
                                                                        $routeParams = ['filename' => $filename];
                                                                        $queryParams = ['token' => $token];

                                                                        // Generate a signed route with both route and query params
                                                                        $secureUrl = \URL::temporarySignedRoute(
                                                                            'secure.video',
                                                                            now()->addMinutes(120),
                                                                            $routeParams + $queryParams,
                                                                        );
                                                                    } else {
                                                                        $filename = '';
                                                                        $secureUrl = '';
                                                                    }
                                                                @endphp
                                                                @if (!empty($filename))
                                                                    {{-- <a class="play-btn" data-video="{{ route('video.stream', ['filename' => $filename]) }}">Play Video</a> --}}
                                                                    <a class="play-btn" data-video="{{ $secureUrl }}"
                                                                        data-topic-id="{{ $courseTopic->topic->id }}">Play
                                                                        Video</a>
                                                                @endif
                                                                <a href="#" class="link-wrapper">View</a>
                                                            </td>
                                                            <td>
                                                                @if ($status2 == 'complete')
                                                                    <div class="icon-wrapper"><span
                                                                            class="material-icons">done</span>Completed
                                                                    </div>
                                                                @else
                                                                    <div class="icon-wrapper pending-icon-wrapper">Pending
                                                                    </div>
                                                                @endif
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td scope="row"><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><a href="#" class="link-wrapper">Solve</a></td>
                                                            <td>
                                                                @if ($status3 == 'complete')
                                                                    <div class="icon-wrapper"><span
                                                                            class="material-icons">done</span>Completed
                                                                    </div>
                                                                @else
                                                                    <div class="icon-wrapper lock-icon-wrapper">
                                                                        <i class="fa fa-lock" aria-hidden="true"></i>
                                                                    </div>
                                                                @endif
                                                            </td>
                                                        </tr>
                                                    </table>
                                                </div>
                                            </div>
                                        </form>
                                    @endforeach




                                </div>
                                <div class="bottom-link-wrapper">
                                    <a href="#">Examination</a>
                                </div>
                            </div>

                        </div>
                        <div class="tab-pane fade" id="pills-contact" role="tabpanel"
                            aria-labelledby="pills-contact-tab" tabindex="0">...</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"
                    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>




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

        let lastTime = 0;
        let overlayTimer;

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

        // === Handle Play Button ===
        document.querySelectorAll('.play-btn').forEach(btn => {
            btn.addEventListener('click', async function() {
                video.src = this.getAttribute('data-video');
                video.setAttribute('data-topic-id', this.getAttribute('data-topic-id'));
                lastTime = 0;
                modal.style.display = 'flex';
                moveOverlayRandomly();

                // Try to enter fullscreen if not already
                if (!isFullscreen()) {
                    try {
                        await enterFullscreen();
                    } catch (err) {
                        console.warn('Fullscreen request failed:', err);
                    }
                }
            });
        });

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

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

        // === Prevent Forward Seeking ===
        video.addEventListener('timeupdate', function() {
            if (video.currentTime > lastTime + 1) {
                video.currentTime = lastTime;
            } else {
                lastTime = video.currentTime;
            }
        });

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

        // === Fullscreen State Watcher ===
        document.addEventListener('fullscreenchange', function() {
            overlay.style.display = 'block';

            // Auto-close modal if user exits fullscreen manually
            if (!isFullscreen() && modal.style.display === 'flex') {
                video.pause();
                modal.style.display = 'none';
                clearTimeout(overlayTimer);
            }
        });

        video.addEventListener('ended', function() {
            const topicId = video.getAttribute('data-topic-id');

            fetch('/api/video-finished', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    body: JSON.stringify({
                        user_id: {{ Auth::id() }},
                        topic_id: topicId,
                        video_url: video.src
                    })
                })
                .then(response => response.json())
                .then(data => {
                    console.log('Video completion reported:', data);
                    // You can show a success toast or unlock next step here
                })
                .catch(error => {
                    console.error('Error sending completion:', error);
                });
        });

        // === 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);
        }
    </script>
@endsection