@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 swiper-wrapper">
                        <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>
                    @if($prev_music)
                        <a href="{{ $prev_music }}" class="swiper-button-prev" style="top: 50% !important; width: 1.80em !important; left: 16px;"></a>
                    @endif
                    @if($next_music)
                        <a href="{{ $next_music }}" class="swiper-button-next" style="top: 50% !important; width: 1.80em !important; right: 16px"></a>
                    @endif
                </div>
            </div>
        </div>
    </section>
    @if($similar_musics)
        <div class="main-content movi" style="padding-top: 0.5em;">
            <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">{{ $music->title }}
                                        </h3>
                                    </div>
                                    <ul class="p-0 mt-2 list-inline d-flex flex-wrap movie-content">
                                        <li class="trending-list">{{ $music->category->name }}</li>
                                    </ul>
                                    <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">{{ $music->duration }}</span>
                                        <span class="trending-year trending-year-list font-Weight-500 genres-info">{{ $music->release_date->format('Y') }}</span>
                                    </div>
                                    @if($music->artists)
                                        <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>Artiste(s):</li>
                                            <li class="trending-list mr-3">{{ $music->artists }}</li>
                                        </ul>
                                    @endif
                                </div>
                            </div>
                        </div>
                        <div class="streamit-content-details trending-info g-border" style="margin-top: unset"></div>
                    </div>
                </div>
            </div>
            <section class="main-content movi">
                <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">Musiques 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_musics as $similar_music)
                                    @if($similar_music->image)
                                        <li class="swiper-slide slide-item">
                                            <div class="block-images position-relative ">
                                                <div class="img-box">
                                                    <img src="@if($similar_music->image) {{ $similar_music->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('play.music', ['music' => $similar_music->id]) }}">{{ $similar_music->title }}</a></h6>
                                                    <div class="movie-time d-flex align-items-center my-2">
                                                        <span class="text-white">{{ $music->duration }}</span>
                                                    </div>
                                                    <div class="hover-buttons">
                                                        <a href="{{ route('play.music', ['music' => $similar_music->id]) }}" role="button" class="btn btn-hover"><i class="fa fa-play mr-1" aria-hidden="true"></i>Jouer
                                                        </a>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                    @endif
                                @endforeach
                            </ul>
                            <div class="swiper-button-next"></div>
                            <div class="swiper-button-prev"></div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    @endif
@endsection
@section('js')
<script>
    $(document).ready(function () {
        var streamingVideo = document.getElementById('streamingVideo');
        var next_music = '{{ $next_music }}';
        if (next_music) {
            streamingVideo.addEventListener('ended', function() {
                window.location = next_music;
            });
        }

        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 : '{{ $music->id }}&&{{ Auth::id() }}', entity : 'music'},
            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