@extends('includes.layouts')

@section('content')
    <section class="iq-main-slider site-video">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-12">
                    <div class="pt-0">
                        <video class="vjs-big-play-centered w-100" id="streamingVideo" controls autoplay disablePictureInPicture controlsList="nodownload" oncontextmenu="return false;">
                            <source id="update_video_source" src="" type="video/mp4"/>
                        </video>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <div class="main-content movi">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-12">
                    <div class="trending-info mt-4 pt-0 pb-4">
                        <div class="row">
                            <div class="col-md-9 col-12  mb-auto">
                                <div class="d-md-flex">
                                    <h3 class="trending-text big-title text-uppercase mt-0 fadeInLeft animated" data-animation-in="fadeInLeft" data-delay-in="0.6"
                                        style="opacity: 1; animation-delay: 0.6s">{{ $movie->title }}
                                    </h3>
                                    @if($movie->imdb_rating)
                                        <div class="slider-ratting d-flex align-items-center ml-md-3 ml-0">
                                            <ul class="ratting-start p-0 m-0 list-inline text-primary d-flex align-items-center justify-content-left">
                                                <li><i class="fa fa-star" aria-hidden="true"></i></li>{{ $movie->imdb_rating }}/10
                                            </ul>
                                        </div>
                                    @endif
                                </div>
                                @if($movie->categories->count())
                                <ul class="p-0 mt-2 list-inline d-flex flex-wrap movie-content">
                                    <li class="trending-list">@foreach($movie->categories as $movie_category) {{ $movie_category->category->name }} @if(!$loop->last) , @endif @endforeach</li>
                                </ul>
                                @endif
                                <div class="d-flex flex-wrap align-items-center text-white text-detail flex-wrap mb-4">
                                    <span class="badge badge-secondary font-size-16">{{ $movie->rated }}</span>
                                    <span class="ml-3 font-Weight-500 genres-info">{{ $movie->duration }}</span>
                                    <span class="trending-year trending-year-list font-Weight-500 genres-info">{{ $movie->release_year }}</span>
                                </div>
                                @if($movie->actors)
                                    <ul class="p-0 list-inline d-flex flex-wrap align-items-center mb-3 mt-4 iq_tag-list">
                                        <li class="text-primary text-lable mr-3"><i class="fa fa-user" aria-hidden="true"> </i>Distribution:</li>
                                        <li class="trending-list mr-3">{{ $movie->actors }}</li>
                                    </ul>
                                @endif
                            </div>
                        </div>
                    </div>
                    <div class="streamit-content-details trending-info g-border" style="margin-top: unset">
                        {{ $movie->description }}
                    </div>
                </div>
            </div>
        </div>
        @if($similar_movies)
            <section>
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-sm-12 overflow-hidden">
                            <div class="d-flex align-items-center justify-content-between">
                                <h4 class="main-title">Films similaires</h4>
                            </div>
                        </div>
                    </div>
                    <!-- Swiper -->
                    <div class="favourite-slider">
                        <div  class="swiper pt-2 pt-md-4 pt-lg-4 iq-rtl-direction" data-swiper="common-slider">
                            <ul class="swiper-wrapper m-0 p-0">
                                @foreach($similar_movies as $similar_movie)
                                    <li class="swiper-slide slide-item">
                                        <div class="block-images position-relative ">
                                            <div class="img-box">
                                                <img src="@if($similar_movie->image) {{ $similar_movie->image }} @else {{ asset('images/01.jpg') }} @endif" class="img-fluid" alt="" loading="lazy">
                                            </div>
                                            <div class="block-description">
                                                <h6 class="iq-title"><a href="{{ route('moviedetails', ['movie' => $similar_movie->id]) }}">{{ $similar_movie->title }}</a></h6>
                                                <div class="movie-time d-flex align-items-center my-2">
                                                    <span class="text-white">{{ $similar_movie->duration }}</span>
                                                </div>
                                                <div class="hover-buttons">
                                                    <a href="{{ route('moviedetails', ['movie' => $similar_movie->id]) }}" role="button" class="btn btn-hover"><i class="fa fa-play mr-1" aria-hidden="true"></i>Jouer
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                @endforeach
                            </ul>
                            <div class="swiper-button-next"></div>
                            <div class="swiper-button-prev"></div>
                        </div>
                    </div>
                </div>
            </section>
        @endif
    </div>
@endsection
@section('js')
<script>
    $(document).ready(function () {
        const player = document.querySelector("#update_video_source");
        const vid = player.parentElement;

        $.ajax({
           // type: "GET",
            headers: {
                "Content-Type": "application/json",
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            url: '{{ route('find.video') }}',
            data: {secret : '{{ $movie->id }}&&{{ Auth::id() }}', entity : 'movie'},
            success: function(x) {
                let ct = vid.currentTime;
                player.setAttribute("src", x.url);
                vid.load();
                vid.addEventListener(
                    "loadedmetadata",
                    function() {
                        this.currentTime = ct;
                    },
                    false
                );

                const promise = vid.play();
                if(promise !== undefined){
                    promise.then(() => {
                        // Autoplay started
                    }).catch(error => {
                        // Autoplay was prevented.
                    });
                }
            }
        });
    });
</script>
@endsection