@extends('web.layouts.container')
@section('content')
    <section class="page_header">
        <div class="container">
            <div class="content">
                <ul class="links">
                    <li class="li_link">
                        <a href="#">الرئيسية</a>
                    </li>
                    <li class="li_link">
                        <span>
                           المحاضرات
                        </span>
                    </li>
                </ul>
            </div>
            <div class="section_head text-center">
                <h2> تفاصيل الدرس </h2>
            </div>
        </div>
        <img src="{{asset('assets/web/images/heading-pattern-l.png')}}" class="pattern-l">
        <img src="{{asset('assets/web/images/heading-pattern-r.png')}}" class="pattern-r">

    </section>

    <!-- -------------- lesson --------------- -->

    <section class="lesson_vid_view section-padding">
        <div class="container lecture_container">
            @foreach($lectures as $lecture)
                <div class="section_head">
                    <h2>{{$lecture->name}}</h2>
                    <div class="progress mt-4">
                        <div class="progress-done lectures_progress" data-done="{{(($lectures->currentPage()/$lectureCount)*100)}}">
                            {{round((($lectures->currentPage()/$lectureCount)*100)).'%'}}
                        </div>
                    </div>
                </div>
                <div class="content">
                    <div class="vid">
                        <div class="iframe-container">
                          <iframe width="560" height="315" src="{{$lecture->url}}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" loading="lazy" allowfullscreen></iframe>
                        </div>
                        <!--<iframe width="100%" height="100%" src="{{$lecture->url}}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>-->
                    </div>
                </div>
            @endforeach

            {{$lectures->links('web.courses.pagination.paginate', ['paginator' => $lectures])}}

        </div>
    </section>
@endsection

@section('inner_js')

    <script>


        let lectures_progress = $('.progress .lectures_progress:first-child').data('done');
        localStorage.setItem('currentProgress', lectures_progress);
        $(document).on('click', '.previous_lecture_link, .next_lecture_link', async function (e) {
            e.preventDefault();
            let url = $(this).attr('href');
            const response= await ajax({
                url,
                method: 'get'
            });

            if (response){
                $('.lecture_container').html(response);
                let lectureProgress = $('.lectures_progress');

                if ($(this).hasClass('next_lecture_link')){
                    localStorage.setItem('currentProgress', lectureProgress.data('done'));
                }
                lectureProgress.html(localStorage.getItem('currentProgress')+'%');

                const progress = document.querySelector('.progress-done');
                setTimeout(() => {
                    progress.style.opacity = 1;
                    progress.style.width = localStorage.getItem('currentProgress') + '%';
                }, 500);
            }

        });

        $(document).ready(function () {
            $('.next_lecture_link').click(function () {
                let currentProgress = localStorage.getItem('currentProgress');
                $('.lectures_progress').html(currentProgress+'%');
            });

            const progress = document.querySelector('.progress-done');

            setTimeout(() => {
                progress.style.opacity = 1;
                progress.style.width = localStorage.getItem('currentProgress') + '%';
            }, 500);

        });



    </script>

@endsection