@extends('site.layouts.main')
@section('meta_title')
    {{ trans('messages.Adnan Eltaher') . ' | ' . trans('messages.Theory Packages') }}
@stop
@section('content')

    <style>
        .video_header {
            background-color: #1BA9FF1A;
            padding: 2rem 1.5rem;
            margin-block: 2rem 2.5rem;
        }

        .video_header .video iframe {
            border-radius: 10px;
            overflow: hidden;
        }

        .video_header .video_info .video_title {
            font-size: 24px;
            color: #0E5078;
            margin-bottom: 1.3rem;
        }

        .video_header .video_info .video_desc {
            font-size: 20px;
            color: #535353;
            font-weight: 400;
            line-height: 1.1;
        }

        .video_header .video_info .video_data {
            margin-top: 1.5rem
        }

        .video_header .video_info .video_data .data_wrapper {
            margin-bottom: 1rem
        }

        .video_header .video_info .video_data .data_wrapper .text {
            margin-inline-start: 0.5rem
        }

        .video_header .video_info .video_data .data_wrapper .icon {
            color: #1BA9FF;
        }

        /*  list styles */
        .course_details {
            padding-inline: 1.5rem;
        }

        .course_details .tabs_wrapper .nav .nav-item {
            margin-inline-end: 1.2rem;
            box-shadow: 0px 2px 4px -2px #0A0D120F;
        }

        .course_details .tabs_wrapper .nav .nav-item .nav-link {
            color: #A7A7A7;
            border: 0.3px solid #A7A7A7;
            font-weight: 400;
        }

        .course_details .tabs_wrapper .nav .nav-item .nav-link.active {
            background: #1BA9FF;
            color: #fff;
            border: unset;
        }

        .course_details .tab-content {
            margin-block: 2rem 3rem;
        }

        .course_details .course_content_list, .course_details .selected_course {
            height: 500px
        }
        .course_details  .card_and_card{
            overflow: hidden scroll;
            border: 1px solid #E4E4E4;
            border-radius: 7px;
            margin-bottom: 0.6rem;
        }
        .course_details .card_and_card .list_card {
            text-decoration: none;
            padding: 0.5rem 0.8rem;
            border-bottom: 1px solid #E4E4E4;
            cursor: pointer;
            text-decoration: none;
            padding: 0.5rem 0.8rem;
            border-bottom: 1px solid #E4E4E4;
            cursor: pointer;
        }
        .course_details .card_and_card .list_card .card_text .title {
            font-size: 17px;
            color: #0E5078;
            margin-bottom: 0.5rem;
        }

        .course_details .card_and_card .list_card .card_text .desc {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            font-size: 15px;
            color: #888686;
            width: 90%;
        }

        .course_details .card_and_card .list_card .card_img img {
            width: 130px;
            height: 100px;
        }


        .course_details .course_content_list {
            overflow: hidden scroll;
            border: 1px solid #E4E4E4;
            border-radius: 7px
        }

        .course_details .course_content_list .list_card {
            text-decoration: none;
            padding: 0.5rem 0.8rem;
            border-bottom: 1px solid #E4E4E4;
            cursor: pointer;
        }

        .course_details .course_content_list .list_card.active {
            position: relative;
        }

        .course_details .course_content_list .list_card.active::before {
            content: "";
            position: absolute;
            right: 0;
            top: 10%;
            bottom: 10%;
            width: 3px;
            background: #124E72;
            height: 80%;
        }

        .course_details .course_content_list .list_card.active::after {
            content: "";
            position: absolute;
            right: 0px;
            top: 50%;
            transform: translateY(-50%);
            border-width: 6px;
            border-style: solid;
            border-color: transparent #124E72 transparent transparent;
            width: 0;
            height: 0;
        }

        .course_details .course_content_list .list_card .card_text .title {
            font-size: 17px;
            color: #0E5078;
            margin-bottom: 0.5rem;
        }

        .course_details .course_content_list .list_card .card_text .desc {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            font-size: 15px;
            color: #888686;
            width: 90%;
        }

        .course_details .course_content_list .list_card .card_img img {
            width: 130px;
            height: 100px;
        }

        .course_details .selected_course iframe {
            border-radius: 10px;
            overflow: hidden;
        }


    </style>

    <div class="video_details">
        <div class="video_header">
            <div class="row">
                <div class="col-lg-6">
                    @if(!empty($package->photo_desktop) && file_exists(public_path().'/'.$package->photo_desktop) )
                        @if(in_array(pathinfo($package->photo_desktop, PATHINFO_EXTENSION),["jpg","jpeg","gif","png","bmp"]))
                            <img width="90%" height="315"
                                 src="{{ url($package->photo_desktop) }}"
                                 alt="">
                        @else
                            <video width="90%" height="315"
                                   src="{{ url($package->photo_desktop) }}"
                                   controls autoplay>
                            </video>
                        @endif
                    @else
                        <img style="width:100%;aspect-ratio:1/1;"
                             src="{{ url('front_them/assets/imgs/02.png') }}"
                             alt="">
                    @endif
                    <!--div class="video">
                        <iframe width="90%" height="315" src="https://www.youtube.com/embed/1NEMvybTarc?si=8ZyBZzNotxLfKT9C" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
                    </div-->
                </div>
                <div class="col-lg-6">
                    <div class="video_info">
                        <h2 class="video_title">
                            {{ $package->{'name_'. App::getLocale()} }}
                        </h2>
                        <p class="video_desc">
                            {!! $package->{'notes_'. App::getLocale()} !!}
                        </p>
                        <div class="video_data">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="data_wrapper d-flex align-items-center">
                                    <span class="icon">
                                        <i class="fas fa-calendar-alt"></i>
                                    </span>
                                        <span class="text">
                                        {{__('messages.Duration')}}: {{$package->expiration_duration_in_dayes .' '. __('messages.days')}}
                                    </span>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="data_wrapper d-flex align-items-center">
                                    <span class="icon">
                                    <i class="fas fa-hourglass-half"></i>
                                    </span>
                                        <span class="text">
                                        {{__('messages.video_play')}}: {{$package->show_one_video  .' '. __('messages. Times')}}
                                    </span>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="data_wrapper d-flex align-items-center">
                                    <span class="icon">
                                        <i class="fas fa-eye"></i>
                                    </span>
                                        <span class="text">
                                            {{__('messages.all_video_play')}}: {{$package->count_play_video .' '. __('messages. Times')}}
                                    </span>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="data_wrapper d-flex align-items-center">
                                    <span class="icon">
                                        <i class="fas fa-calendar-alt"></i>
                                    </span>
                                        <span class="text">
                                            {{__('messages.End date')}}:  {{date('Y-m-d', strtotime($subscroption->expiration_date))  }}
                                    </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="course_details">
            <nav class="tabs_wrapper">
                <div class="nav nav-bills" id="nav-tab" role="tablist">
                    <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">
                                محتوي الدورة
                            </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">
                                وصف الدورة
                            </button>
                        </li>
                    </ul>
                </div>
            </nav>
            <div class="tab-content" id="pills-tabContent">
                <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
                    <div class="course_content">
                        <div class="row">
                            @if(isset($myVideos) && $myVideos != null)
                                <div class="col-md-6 col-lg-4">
                                    <div class="course_content_list">
                                        @if($package->video != null)
                                            @foreach($package->video as $video)
                                                <a href="{{route('getOneVideo',[$video->id,$package->id])}}"
                                                   class="list_card  {{$myVideos != null && $myVideos->id == $video->id ?'active':''}} d-flex align-items-center justify-content-between">
                                                    <div class="card_text">
                                                        <h4 class="title">
                                                            {{$video->{'name_'.App::getLocale()} }}
                                                        </h4>
                                                        <span class="desc">
                                                       {!! \Illuminate\Support\Str::words($video->{'desc_'.App::getLocale()}, 15)!!}
                                                 </span>
                                                    </div>
                                                    <div class="card_img">
                                                        @if(!empty($video->image) && file_exists(public_path().'/'.$video->image) )
                                                            <img
                                                                src="{{url('/'.$video->image)}}"
                                                                alt="">
                                                        @else
                                                            <img
                                                                src="{{url('public/front_them/assets/imgs/reserve-img.png')}}"
                                                                alt="">
                                                        @endif
                                                    </div>
                                                </a>
                                            @endforeach
                                        @endif
                                    </div>
                                </div>
                                <div class="col-md-6 col-lg-8">
                                    <div class="selected_course">
                                        <iframe id="videoFrame" width="100%" height="500"
                                                src=https://player.vimeo.com/video/{{$myVideos->{'url_'.App::getLocale()} }}?autoplay=1&loop=1"
                                                allow="autoplay; fullscreen"
                                        ></iframe>
                                    </div>
                                </div>
                            @else

                                @if($package->video != null)
                                    @foreach($package->video as $video)
                                        <div class="col-md-6 col-lg-4">
                                            <div class="card_and_card">
                                                <a href="{{route('getOneVideo',[$video->id,$package->id])}}"
                                                   class="list_card  {{$myVideos != null && $myVideos->id == $video->id ?'active':''}} d-flex align-items-center justify-content-between">
                                                    <div class="card_text">
                                                        <h4 class="title">
                                                            {{$video->{'name_'.App::getLocale()} }}
                                                        </h4>
                                                        <span class="desc">
                                                       {!! \Illuminate\Support\Str::words($video->{'desc_'.App::getLocale()}, 15)!!}
                                                 </span>
                                                    </div>
                                                    <div class="card_img">
                                                        @if(!empty($video->image) && file_exists(public_path().'/'.$video->image) )
                                                            <img
                                                                src="{{url('/'.$video->image)}}"
                                                                alt="">
                                                        @else
                                                            <img
                                                                src="{{url('public/front_them/assets/imgs/reserve-img.png')}}"
                                                                alt="">
                                                        @endif
                                                    </div>
                                                </a>
                                            </div>
                                        </div>
                                    @endforeach
                                @endif

                            @endif
                        </div>
                    </div>
                </div>
                <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
                    {!! $package->{'notes_'. App::getLocale()} !!}
                </div>
            </div>
        </div>
    </div>

@endsection
@if($myVideos !=null)
    @section('script')
        <script src="https://player.vimeo.com/api/player.js"></script>
        <script>
            function updatePlayCount() {
                $.ajax({
                    url: '/update-play-count', // المسار المناسب لتحديث عدد المشاهدات
                    method: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}', // إذا كنت تستخدم Laravel
                        video_id: {{$myVideos->id}}
                    },
                    success: function (response) {
                        console.log('تم تحديث عدد مرات التشغيل في قاعدة البيانات:', response);
                    },
                    error: function (xhr, status, error) {
                        console.error('خطأ أثناء تحديث عدد مرات التشغيل:', error);
                    }
                });
            }

            const iframe = document.getElementById('videoFrame');
            const player = new Vimeo.Player(iframe);

            const maxPlays = {{$subscroption->one_count_play}}; // الحد الأقصى من مرات التشغيل
            let playCount = {{$SubVideos->count_watch -1}}; // عدد مرات التشغيل الحالية
            let lastPlayedTime = 0;
            const replayThreshold = 2;

            player.on('timeupdate', function (event) {
                const currentTime = event.seconds;

                // إذا حاول المستخدم بدء الفيديو من البداية (أو قرب البداية)
                if (currentTime < replayThreshold && lastPlayedTime > replayThreshold) {
                    if (playCount < maxPlays) {
                        playCount++;
                        console.log(`عدد مرات التشغيل: ${playCount}`);
                        updatePlayCount(); // تحديث عدد المشاهدات في قاعدة البيانات
                    } else {
                        player.pause().then(() => {
                            alert('لقد وصلت إلى الحد الأقصى من مرات التشغيل.');
                        }).catch(error => {
                            console.error('خطأ أثناء الإيقاف:', error);
                        });
                    }
                }

                lastPlayedTime = currentTime;
            });

            player.on('ended', function () {
                playCount++;
                console.log(`عدد مرات التشغيل: ${playCount}`);

                if (playCount >= maxPlays) {
                    alert('لقد وصلت إلى الحد الأقصى من مرات التشغيل. لن تتمكن من مشاهدة الفيديو مرة أخرى.');
                    player.unload();
                }
            });

            /*  player.on('play', function() {
                  // تحديث عدد مرات التشغيل عند التشغيل الجديد
                  if (playCount <= maxPlays) {
                      playCount++;
                      alert(`عدد مرات التشغيل: ${playCount}`);
                      updatePlayCount(); // تحديث عدد المشاهدات في قاعدة البيانات
                  } else {
                      player.pause().then(() => {
                          alert('yesesse');
                          alert('لقد وصلت إلى الحد الأقصى من مرات التشغيل.');
                      }).catch(error => {
                          console.error('خطأ أثناء الإيقاف:', error);
                      });
                  }
              }); */


            player.on('play', function () {
                if (playCount >= maxPlays) {
                    player.pause().then(() => {
                        alert('لقد وصلت إلى الحد الأقصى من مرات التشغيل.');
                    }).catch(error => {
                        console.error('خطأ أثناء الإيقاف:', error);
                    });
                }
            });


        </script>
    @endsection
@endif