@extends('main-site.partials.app', [
    'whiteHeader' => true,
])
@section('styles')
    <style>
        video::poster {
            opacity: 0.5;
            /* ضبط الشفافية */
        }
    </style>

@endsection

@section('title', __('Course'))

@section('content')

    <!-- Page Banner -->
    <section class="playlist-section sec-padding bg-grey wow fadeInUp">
        <div class="container">
            <div class="row gx-xl-5">
                <div class="col-xxxl-3 col-lg-4 mb-5 mb-lg-0">
                    <div class="videos-list">
                        @foreach ($units as $unit)
                            <div class="accordion">
                                <button
                                    class="btn-toggle {{ !in_array($lesson->id, $unit->lessons->pluck('id')->toArray()) ? 'collapsed' : '' }}  d-flex align-items-center justify-content-between flex-wrap gap-3 w-100"
                                    data-bs-toggle="collapse" data-bs-target="#playlist{{ $unit->id }}"
                                    aria-expanded="{{ !in_array($lesson->id, $unit->lessons->pluck('id')->toArray()) ? 'false' : 'true' }}"
                                    aria-controls="playlist{{ $unit->id }}">
                                    {{ $unit->title }}<i class="icon-arrow-down align-middle"></i>
                                </button>
                                <div id="playlist{{ $unit->id }}"
                                    class="collapse {{ !in_array($lesson->id, $unit->lessons->pluck('id')->toArray()) ? ' ' : 'show' }}">
                                    <ul class="playlist">
                                        @foreach ($unit->lessons as $item)
                                            @if ((auth()->user() && $unit->course->is_auth_user_subscribe) || $item->is_free)
                                                @include(
                                                    'main-site.course-details.playlist_inc.item_open',
                                                    ['lesson_playlist' => $item]
                                                )
                                            @else
                                                @include('main-site.course-details.playlist_inc.item_lock')
                                            @endif
                                        @endforeach


                                    </ul>
                                </div>
                            </div>
                        @endforeach

                    </div>
                </div>
                <div class="col-xxxl-9 col-lg-8">

                    <ol class="breadcrumb mb-4">
                        <li class="breadcrumb-item">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                xmlns="http://www.w3.org/2000/svg">
                                <path opacity="0.4"
                                    d="M3 9.84694C3 8.99003 3.36644 8.17402 4.00691 7.60471L9.34255 2.86193C10.8581 1.51477 13.1419 1.51478 14.6575 2.86193L19.9931 7.60471C20.6336 8.17402 21 8.99003 21 9.84694V17.9997C21 20.2089 19.2091 21.9997 17 21.9997H7C4.79086 21.9997 3 20.2089 3 17.9997V9.84694Z"
                                    fill="#120404" />
                                <path d="M10 18H14" stroke="#120404" stroke-width="1.5" stroke-linecap="round" />
                            </svg>
                        </li>
                        <li class="breadcrumb-item">
                            <a href="{{ route('courses') }}">{{ __('messages_301.Courses') }}</a>
                        </li>
                        <li class="breadcrumb-item active">

                            {{ $lesson->unit->course->title }}
                        </li>
                    </ol>
                    <div class="video-container mb-4 ">
                        @if ($lesson->video_url)
                            <div style="height: 30rem" id="my_player"></div>
                            {{-- <div style="height: 28rem" id="my_iframe"></div> --}}




                            {{-- <video id="myVideo" controls>
                                <source src="{{ $lesson->video_url }}" type="video/mp4">
                            </video> --}}
                        @elseif($lesson->type == 'online')
                            <div class="row justify-content-center mt-5">
                                <div class="col-6">
                                    <div class="text-center mt-5">
                                        <span>{{ __('website_301.playlist.LectureStart') }}</span>
                                    </div>
                                    <div class="text-center mt-5">
                                        <span> {{ $lesson->zoom->start_time }}</span>
                                    </div>
                                    <div class="d-flex align-items-center justify-content-center pt-5">
                                        <a href="{{ $lesson->zoom->join_url }}" target="_blank"
                                            class="main-btn outline text-nowrap d-inline-flex align-items-center gap-2">{{ __('website_301.playlist.JoinLecture') }}
                                        </a>

                                    </div>
                                </div>
                            </div>
                        @else
                            @include('main-site.partials.empty_data', [
                                'message' => __('website_301.playlist.LectureWaiting'),
                            ])
                        @endif
                    </div>
                    <h4 class="fw-600 dark-color mb-45">{{ $lesson->title }}</h4>
                    <div class="d-flex align-items-center flex-wrap gap-45 mb-45">
                        <div class="teacher d-flex align-items-center gap-2">
                            <div class="teacher-img">
                                <img src="{{ $lesson->unit->course->user->image ? asset($lesson->unit->course->user->image) : asset('assets/img/avatars/1.png') }}"
                                    alt="">
                            </div>
                            <p class="mb-0 dark-color">
                                {{ $lesson->unit->course->user->name }}
                                <span class="d-block small-text grey-text">
                                    {{ $lesson->unit->course->user->short_description }}
                                </span>
                            </p>
                        </div>
                        {{-- <button
                            data-url="{{ route('course-details.follow_unfollow_teacher', $lesson->unit->course->user_id) }}"
                            class="btn follow_teacher main-btn {{ auth()->user()->isFollowing($lesson->unit->course->user)? 'outline': ' ' }} text-nowrap d-inline-flex align-items-center gap-2">
                            {{ auth()->user()->isFollowing($lesson->unit->course->user)? 'الغاء المتابعة': 'متابعة' }}
                            <i
                                class="icon-user-{{ auth()->user()->isFollowing($lesson->unit->course->user)? 'remove': 'add' }}"><span
                                    class="path1"></span><span class="path2"></span><span class="path3"></span></i>
                        </button> --}}
                        @include('main-site.partials.follow_unfollow_teacher', [
                            'teacher' => $lesson->unit->course->user,
                        ])

                    </div>

                    <ul class="nav nav-tabs def-tabs mb-45" id="myTab" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="breif-tab" data-bs-toggle="tab" data-bs-target="#breif"
                                type="button" role="tab" aria-selected="true">
                                <i class="icon-book"><span class="path1"></span><span class="path2"></span></i>
                                {{ __('website_301.playlist.Brief') }}
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="attachment-tab" data-bs-toggle="tab" data-bs-target="#attachment"
                                type="button" role="tab" aria-selected="false">
                                <i class="icon-book-check"><span class="path1"></span><span class="path2"></span><span
                                        class="path3"></span></i> {{ __('website_301.course.Attachments') }}
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="faq-tab" data-bs-toggle="tab" data-bs-target="#faq"
                                type="button" role="tab" aria-selected="false">
                                <i class="icon-pencil-book"><span class="path1"></span><span class="path2"></span><span
                                        class="path3"></span><span class="path4"></span><span class="path5"></span></i>
                                {{ __('website_301.playlist.LessonQuestion') }}
                            </button>
                        </li>
                    </ul>
                    <div class="tab-content" id="myTabContent">
                        <div class="tab-pane fade show active" id="breif" role="tabpanel">
                            {{-- <h4 class="fw-600 dark-color mb-4">تعليم القرن الحادي والعشرين: مشاركات وتجارب من أصحاب الخبرة
                            </h4> --}}
                            <p class="dark-color">
                                {!! $lesson->description !!}
                            </p>
                            {{-- <p class="dark-color">
                                هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص
                                العربى، حيث يمكنك أن تولد مثل هذا
                                النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد هذا النص هو مثال لنص يمكن أن يستبدل في
                                نفس المساحة، لقد تم توليد هذا
                                النص من مولد النص العربى، حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى إضافة
                                إلى زيادة عدد هذا النص هو مثال
                                لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى، هذا النص هو
                                مثال لنص يمكن أن يستبدل في نفس
                                المساحة، لقد تم توليد
                            </p> --}}
                        </div>
                        <div class="tab-pane fade" id="attachment" role="tabpanel">
                            <ul class="attachment-list">
                                @if (isset($lesson->explanation->attachments) && count($lesson->explanation->attachments))
                                    @foreach ($lesson->explanation->attachments as $attachment)
                                        <li class="d-flex align-items-center justify-content-between flex-wrap gap-3">
                                            <div class="file-info d-flex align-items-center gap-2">
                                                <i class="icon-pdf"><span class="path1"></span><span
                                                        class="path2"></span><span class="path3"></span><span
                                                        class="path4"></span><span class="path5"></span></i>
                                                <p class="mb-0 dark-color">
                                                    {{ $lesson->unit->course->title }}
                                                    <span
                                                        class="small-text light-color d-block">{{ __('website_301.playlist.Date') }}
                                                        {{ $attachment->created_at_format }}</span>
                                                </p>
                                            </div>
                                            <div class="d-flex gap-2">
                                                <a href="{{ asset($attachment->path) }}" download type="button"
                                                    class="btn main-btn text-nowrap">{{ __('website_301.playlist.FileDownload') }}</a>
                                                @include('main-site.partials.add_to_favorite', [
                                                    'attachment' => $attachment,
                                                ])
                                            </div>
                                        </li>
                                    @endforeach
                                @else
                                    @include('main-site.partials.empty_data', [
                                        'message' => __('website_301.playlist.NoAttachments'),
                                    ])
                                @endif
                            </ul>
                        </div>
                        <div class="tab-pane fade" id="faq" role="tabpanel">
                            <h4 class="fw-600 dark-color mb-4">{{ __('messages_303.Common questions') }}</h4>
                            {{-- @dd($lesson->questions) --}}
                            @if (count($lesson->questions))
                                @foreach ($lesson->questions as $question)
                                    <h5 class="dark-color">
                                        {{ $question->title }}
                                    </h5 class="dark-color">
                                    <p class="dark-color">
                                        {!! $question->answer !!}
                                    </p>
                                @endforeach
                            @else
                                @include('main-site.partials.empty_data', [
                                    'message' => __('website_301.playlist.NoQuestions'),
                                ])
                            @endif

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <input type="hidden" value="{{ $lesson->id }}" id="input_lesson_id">
    <input type="hidden" value="{{ asset($lesson->unit->course->image) }}" id="input_lesson_course_image">
@endsection
@section('scripts')
    <script src="https://clickandlearn.h5p.com/js/h5p-resizer.js" charset="UTF-8"></script>
    <script src="{{ asset('player.js') }}"></script>
    <script>
        $(function() {
            $('.btn-playlist').on('click', function() {
                window.location.href = $(this).data('url');
            });

        })
    </script>


    <script>
        // let type;


        $("#my_player").empty();
        //
        // إذا لم يكن iframe، استخدام Playerjs
        fetch("/course-details/stream/url/" + document.getElementById('input_lesson_id').value)
            .then(response => response.json())
            .then(data => {
                console.log(data);
                if (data.type == "vimeo") {
                    console.log('1')
                    player = new Playerjs({
                        id: "my_player",
                        // file: url,
                        file: data.url,
                        poster: document.getElementById('input_lesson_course_image').value,
                        autoplay: false,
                        controls: true
                    });
                } else if (data.type == 'iframe') {
                    console.log('2')
                    $('.playlist-section .video-container').css('height', '40rem');
                    let iframeContent = $(data.url); // تحويل النص إلى عنصر jQuery
                    iframeContent.find("script").remove(); // إزالة أي عنصر <script> داخل iframe
                    $("#my_player").html(iframeContent); // إضافة iframe إلى العنصرفة iframe إلى العنصر
                } else {
                    console.log('3')

                    console.error("No data received");
                }
            })
            .catch(error => console.error("Fetch error: ", error));
    </script>


@endsection