@extends('layouts.app')

@push('css')
    <link rel="stylesheet" href="https://cdn.plyr.io/3.7.8/plyr.css" />
    <link rel="stylesheet" href="{{ asset('assets/css/sweetalert2.min.css') }}">

    <style>
        :root {
            --plyr-color-main: #6d32dc;
            --plyr-video-control-color: white;
            --plyr-control-radius: 8px;
        }

        .plyr__progress input[type=range] {
            cursor: pointer;
        }

        .ytp-impression-link {
            display: none;
        }

        .plyr__video-embed iframe {
            pointer-events: none;
        }

        .plyr__control--overlaid {
            box-shadow: 0 0 0 15px rgba(67, 97, 238, 0.4);
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0% {
                box-shadow: 0 0 0 0 rgba(67, 97, 238, 0.7);
            }

            70% {
                box-shadow: 0 0 0 15px rgba(67, 97, 238, 0);
            }

            100% {
                box-shadow: 0 0 0 0 rgba(67, 97, 238, 0);
            }
        }
    </style>
    <script src="{{ asset('assets/js/sweetalert2.min.js') }}"></script>
@endpush

@section('content')
    <div class="container mx-auto px-3 py-6 max-w-7xl">

        <!-- Main Content -->
        <div class="flex flex-col lg:flex-row gap-6">
            <!-- Video Section -->
            <div class="lg:w-2/3 ">
                @php
                    $moduleId = request()->query('module_id');
                    $contentId = request()->query('content_id');

                    $firstVideo = null;
                    $class_note = null;
                    $class_title = null;
                    $class_des = null;

                    // Try to get video from URL parameters first
                    if ($moduleId && $contentId) {
                        $module = $course->module->where('id', $moduleId)->where('status', 1)->first();
                        if ($module) {
                            $content = $module->moduleContent->where('id', $contentId)->where('status', 1)->first();
                            if ($content && $content->content_type == 'video') {
                                $firstVideo = $content->content_url;
                                $class_note = $content->class_note ?? null;
                                $class_title = $content->title ?? null;
                                $class_des = $content->description ?? null;
                            }
                        }
                    }

                    // If no URL video found, fallback to first available video
                    if (!$firstVideo) {
                        foreach ($course->module->where('status', 1) as $module) {
                            foreach ($module->moduleContent->where('status', 1) as $content) {
                                if ($content->content_type == 'video') {
                                    $firstVideo = $content->content_url;
                                    $class_note = $content->class_note ?? null;
                                    $class_title = $content->title ?? null;
                                    $class_des = $content->description ?? null;
                                    $moduleId = $module->id;
                                    $contentId = $content->id;
                                    break 2; // stop after first video
                                }
                            }
                        }
                    }
                @endphp
                <input type="hidden" id="url_save_video"
                   
                value="{{ isset($archiveId) 
        ? route('dashboard.course.archive.content', [$course->id, $archiveId]) . '?module_id=' . $moduleId . '&content_id=' . $contentId
        : route('dashboard.course.content', $course->id) . '?module_id=' . $moduleId . '&content_id=' . $contentId }}"
                >

                @if (!$firstVideo)
                    <script>
                        Swal.fire({
                            title: "{{ __('dashboard.sorry') }}!",
                            text: "{{ __('dashboard.1st_video_not_found_des') }}",
                            icon: "warning",
                            confirmButtonText: "Ok"
                        });
                    </script>
                @endif

                <div id="player" class=" w-full flex items-center justify-center text-white bg-gray-800 rounded">
                    <iframe class="w-full aspect-video rounded"
                        src="https://www.youtube.com/embed/{{ $firstVideo }}?autoplay=1&rel=1"
                        title="YouTube video player" frameborder="0"
                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                        allowfullscreen id="video_iframe">
                    </iframe>

                </div>

                <!-- Video Info -->
                <div class="bg-white rounded-b-xl  p-4 shadow mb-6 ">
                    <div class="flex items-center justify-end">
                        <button
                            class="flex items-center gap-2 px-5 py-2 text-sm font-medium text-gray-700 bg-white rounded-lg border border-gray-200 
                   hover:text-emerald-700 hover:border-emerald-300 hover:bg-emerald-50 
                   transition-colors shadow-sm focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-opacity-50
                   cursor-pointer flex-shrink-0"
                            id="saveVideo">
                            <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
                                <path d="M18 4v15.06l-5.42-3.87-.58-.42-.58.42L6 19.06V4h12m1-1H5v18l7-5 7 5V3z"></path>
                            </svg>
                            <span>{{ __('dashboard.save_video') }}</span>
                        </button>
                    </div>
                    <div class="flex justify-between pt-1 items-start">
                        <div class="flex-1 min-w-0">
                            <h2 class="text-xl font-semibold mb-2 text-gray-900" id="content_title">{{ $class_title }}</h2>
                            <p class="text-gray-600 mb-4 text-sm md:text-base" id="content_des">{{ $class_des }}</p>
                        </div>

                    </div>

                </div>

                <div class="overflow-x-auto mt-5">
                    <table class="min-w-full bg-white border border-gray-300">
                        <thead class="bg-primary-light text-black">
                            <tr>


                                <th class="py-3 px-6 text-left border border-slate-200">
                                    <div class="flex items-center gap-2">
                                       <p class="capitalize">{{ __('dashboard.class_note') }}</p>

                                    </div>
                                </th>

                            </tr>
                        </thead>
                        <tbody>

                            <tr class="js-pdf-rows ">

                                <td class="border border-gray-200 p-4 align-top cursor-pointer">


                                    <a href="{{ $class_note }}"
                                        class="flex items-center gap-3 p-3 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors class_note"
                                        target="_blank">
                                        <img src="{{ asset('assets/icons/pdf.png') }}" class="w-6 h-6" alt="PDF Icon" />
                                        <div class="flex items-center justify-between w-full">
                                            <span class="font-medium text-gray-800"
                                                id="class_note_title">{{ $class_title }}</span>

                                            <img src="{{ asset('assets/icons/dowload.png') }}" class="w-6 h-6"
                                                alt="Download Icon" />
                                        </div>
                                    </a>





                                </td>

                            </tr>

                        </tbody>
                    </table>
                </div>
                <div class="flex flex-col sm:flex-row mt-7 p-4 items-center gap-4 bg-[#e8f4ec] bg-opacity-10 border border-green-600 rounded-xl relative w-10/12 mx-auto "
                    id="notePlayer">
                    <img src="{{ asset('assets/icons/announceIcon.svg') }}" alt=""
                        class="p-1 rounded-lg bg-white w-12">
                    <p class="leading-snug font-light">কোর্স ফি কোনোভাবেই রিফান্ড করা হবেনা এবং ফেইসবুক আইডি চেইঞ্জ করা
                        যাবেনা।
                        কোর্সটির যেকোনো ফিচার,বৈশিষ্ট্য পরিবর্তন ও পরিমার্জিত করার অধিকার শিক্ষা পয়েন্ট কতৃপক্ষের থাকবে।</p>
                    <p class="bg-green-600  px-2 py-.5 rounded absolute -left-4 -top-4 text-white">নোটঃ</p>

                </div>

            </div>

            <!-- Sidebar -->
            <div class="lg:w-1/3 bg-white h-fit">
                <div class="rounded-lg md:border border-slate-200">
                    <div class="flex justify-between p-4 pb-0">
                        <div class="flex">
                            <h3 class="font-semibold tex-base md:text-xl">কোর্স সিলেবাস</h3>
                        </div>
                    </div>
                    <nav class="border-b border-slate-200 pb-4"></nav>
                    <div class="p-4 md:max-h-[calc(100vh_-_300px)] overflow-auto">
                        @include('page.user-dashboard.learn.syllabus')
                    </div>
                </div>
            </div>
        </div>
    </div>

    <button id="menuToggleSyllabus"
        class="fixed bottom-[20px] right-5 bg-secondary flex lg:hidden items-center gap-1 text-white py-2 px-3 rounded-md font-bold shadow-lg ">
        <svg id="menuIcon" xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="none"
            viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16"></path>
        </svg>
    </button>

    <div
        class="mobile-modal lg:hidden fixed top-full z-50 flex h-full w-full items-center justify-center bg-black/25 xs:items-end duration-500">
        <div class="absolute w-full rounded-xl rounded-b-none bg-white lg:relative bottom-0 lg:rounded-xl lg:w-[60%]">
            <div class="h-[80vh] overflow-y-auto">
                <div class="rounded-lg md:border border-slate-200">
                    <!-- Modal Header -->
                    <div class="flex justify-between p-4 pb-0 sticky top-0 bg-white rounded-t-xl z-2">

                        <h3 class="ml-2  font-semibold text-xl">কোর্স সিলেবাস</h3>
                        <button class="p-1 text-gray-400 hover:text-gray-600" id="removesyllabusModal">
                            <svg class="h-5 w-5 text-black" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M6 18L18 6M6 6l12 12" />
                            </svg>
                        </button>

                    </div>


                    <!-- Content Area -->
                    <div class="p-4 lg:max-h-[calc(100vh_-_300px)] overflow-auto">
                        <!-- Accordion Items -->
                        @include('page.user-dashboard.learn.syllabus')
                    </div>
                </div>
            </div>
        </div>
    </div>

    @push('js')
        <script>
            $(document).ready(function() {

                $('#menuToggleSyllabus').on('click', function() {
                    $('.mobile-modal').toggleClass('top-0 top-full');

                    // Disable or enable scrolling
                    if ($('.mobile-modal').hasClass('top-0')) {
                        $('body').css('overflow', 'hidden'); // Prevent scroll
                    } else {
                        $('body').css('overflow', 'auto'); // Enable scroll
                    }
                });


                $('#removesyllabusModal').on('click', function() {
                    $('.mobile-modal').toggleClass('top-0 top-full');
                    $('body').css('overflow', 'auto');

                })

                // Initially open only the first one
                $(".content_wrapper").hide();
                let moduleId = "{{ $moduleId }}";

                if (moduleId) {
                    $(".module_" + moduleId).show();
                } else {
                    $(".content_wrapper").first().show();
                }

                let contentId = "{{ $contentId }}";

                if (contentId) {
                    $(".content_" + contentId).addClass('bg-gray-200');
                } else {
                    $(".module_content").first().addClass('bg-gray-200');
                }

                $(".module_title").on("click", function() {
                    let content = $(this).next(".content_wrapper");

                    // If already visible, just toggle it
                    if (content.is(":visible")) {
                        content.slideUp();
                    } else {
                        // Hide all others, then show this one
                        $(".content_wrapper").slideUp();
                        content.slideDown();
                    }
                });
            });
        </script>

        <script src="https://cdn.plyr.io/3.7.8/plyr.polyfilled.js"></script>
        <script>

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

            
            let player = new Plyr('#player', {
                controls: [
                    'play-large', 'play', 'progress', 'current-time',
                    'mute', 'volume', 'captions', 'settings', 'pip',
                    'airplay', 'fullscreen'
                ],
                settings: ['captions', 'quality', 'speed', 'loop'],
                speed: {
                    selected: 1,
                    options: [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2]
                },
                tooltips: {
                    controls: true,
                    seek: true
                },
                keyboard: {
                    focused: true,
                    global: true
                },
                fullscreen: {
                    iosNative: true
                },
                youtube: {
                    noCookie: true,
                    modestbranding: 1, // ✅ হেডার ব্র্যান্ডিং কমাবে
                    rel: 0, // related ভিডিও বন্ধ করবে
                    showinfo: 0 // পুরানো YouTube API, অনেক সময় আর কাজ করে না
                }
            });

            $('.module_content').on('click', function() {
                const id = $(this).data('video');


                if (!id) {
                    Swal.fire({
                        title: "{{ __('dashboard.sorry') }}!",
                        text: "{{ __('dashboard.video_not_found_des') }}",
                        icon: "warning",
                        confirmButtonText: "Ok"
                    });
                    return;
                }
                $('.module_content').removeClass('bg-gray-200');
                $(this).addClass('bg-gray-200');



                // When a video module is clicked
                $(document).on('click', '.module_content', function() {
                    const id = $(this).data('video'); // YouTube video ID
                    if (!id) return;

                    // Update Plyr video source
                    player.source = {
                        type: 'video',
                        sources: [{
                            src: id,
                            provider: 'youtube'
                        }]
                    };


                });

                $('.class_note').attr('href', $(this).data('file'))

                $('#content_title').html($(this).data('title'))
                $('#class_note_title').html($(this).data('title'))
                $('#content_des').html($(this).data('des'))
                $('#url_save_video').val($(this).data('savevideo'))


            })

            $('.class_note').on('click', function(e) {
                const href = $(this).attr('href');

                if (!href || href === '') {
                    e.preventDefault(); // prevent navigation
                    Swal.fire({
                        title: "{{ __('dashboard.sorry') }}!",
                        text: "{{ __('dashboard.class_note_not_upload') }}",
                        icon: "warning",
                        confirmButtonText: "OK"
                    });
                }
            });

            $('.file_not_upload').on('click', function(e) {


                let href = $(this).attr('href');
                if (!href) {
                    e.preventDefault();
                    Swal.fire({
                        title: "{{ __('dashboard.sorry') }}!",
                        text: "{{ __('dashboard.file_not_upload') }}",
                        icon: "warning",
                        confirmButtonText: "OK"
                    });
                }
            })

            $('#saveVideo').on('click', function() {
                let url = $('#url_save_video').val();
                let content_title = $('#content_title').text();

                // Get existing saved URLs from localStorage
                let savedVideos = JSON.parse(localStorage.getItem('savedVideos')) || [];

                // Check if this URL already exists to avoid duplicates
                let exists = savedVideos.find(video => video.url === url);

                if (!exists) {
                    // Add new video as an object
                    savedVideos.push({
                        url: url,
                        title: content_title
                    });
                }
                // Save updated array back to localStorage
                localStorage.setItem('savedVideos', JSON.stringify(savedVideos));

                Swal.fire({
                    title: "Success",
                    text: "{{ __('dashboard.video_url_save') }}",
                    icon: "success",
                    confirmButtonText: "OK",
                    footer: `
        <a href="{{ route('dashboard.save-videos') }}" class="btn btn-outline-primary">
           {{ __('dashboard.view_where_saved') }}
        </a>`
                });
            });
        </script>
    @endpush
@endsection