@extends('front.layouts.front')
@section('css')
<link rel="stylesheet" href="https://vjs.zencdn.net/5.4.6/video-js.min.css" rel="stylesheet">
{{-- <link href="https://vjs.zencdn.net/7.8.4/video-js.css" rel="stylesheet" />
<link href="{{ asset('assets/videojs/dist/videojs-seek-buttons.css') }}" rel="stylesheet"> --}}
<style>
    /* .hidden-wrapper{
        display:none;
    } */
    /* #hiddem-video{
        width:200px;
        height:200px;
    }
    .container {
        display: -webkit-box;
        display: flex;
        -webkit-box-pack: center;
                justify-content: center;
        -webkit-box-align: center;
                align-items: center;
        height: 100%;
        position: relative;
    } */

    /* #my-video {
        box-shadow: 0 0 20px 0px black;
        min-width: 80%;
        min-height: 80%;
    } */

    .contentMenu {
        position: relative;
        width: 4em;
    }
    .video-js{
        width: 100%;
        height: 100%;
    }
    .contentMenu .icon {
        width: 100%;
        bottom: 0;
        position: absolute;
        padding: 10px;
        text-align: center;
        color: white;
    }
    .contentMenu .icon{
        bottom:-3px;
        font-size:20px;
    }
    .contentMenu .icon:hover {
        cursor: pointer;
        color: gray;
    }
    .contentMenu .icon:hover + .menu {
        -webkit-transform: translate(-50%, -30px);
                transform: translate(-50%, -30px);
        visibility: visible;
        opacity: 1;
    }
    .contentMenu .menu {
        position: absolute;
        bottom: 20px;
        left: 50%;
        -webkit-transition: all 200ms;
        transition: all 200ms;
        display: -webkit-box;
        display: flex;
        -webkit-box-pack: center;
                justify-content: center;
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
                flex-direction: column-reverse;
        width: 100px;
        -webkit-transform: translate(-50%, -20px);
                transform: translate(-50%, -20px);
        visibility: hidden;
        opacity: 0;
    }
    .contentMenu .menu:hover {
        -webkit-transform: translate(-50%, -30px);
                transform: translate(-50%, -30px);
        visibility: visible;
        opacity: 1;
    }
    .contentMenu .menu:after {
        content: "";
        position: absolute;
        width: 0;
        height: 0;
        bottom: -15px;
        left: calc(50% - 15px);
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-top: 15px solid #333;
    }

    #auto {
        background: #333;
    }
    #auto .current {
        font-size: 10px;
        margin-left: 3px;
    }
    #auto .current:before {
        margin-left: -3px;
        content: "(";
        position: absolute;
    }
    #auto .current:after {
        content: ")";
        position: absolute;
    }

    .item {
        position: relative;
        text-align: center;
        border: 0;
        padding: 10px;
        background: #444;
    }
    .item.selected {
        background: #333;
        font-weight: bold;
    }
    .item.selected:before {
        content: "";
        position: absolute;
        width: 10px;
        height: 10px;
        top: 50%;
        border-radius: 50%;
        background: #4caf50;
        left: 10px;
        -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    }
    .item:hover {
        background: #333;
        cursor: pointer;
    }

</style>
@endsection
@section('content')
    <section class="section section--first section--bg detail-poster">

        {{-- Begin:: Movie Details --}}
        <div class="container text-white">
            <div class="row">
                <div class="col-md-5">
                    <img src="{{ url($Title->poster) }}" class="img-fluid movie-poster" alt="{{ $Title->title }}" />
                </div>
                <div class="col-md-7">
                    <div class="px-xl-5 movie-info">
                        <div class="d-flex justify-content-between align-items-center">
                            <h1>{{ $Title->title }}</h1>
                            <div class="movie-rating">
                                {{ $Title->ratings }} <i class="fa-solid fa-star text-warning"></i>
                            </div>
                        </div>
                        <div class="content-meta mt-lg-3 mt-xl-4 mt-2">
                            <span class="m_duration">{{ $Title->year }} -
                                {{ floor($Title->running_time / 60) . ' Hr ' . ($Title->running_time - floor($Title->running_time / 60) * 60) . ' min' }}</span>
                            <span class="m_year"></span>
                            {{-- <span class="m_type">Family</span> --}}
                        </div>
                        <p class="mt-3 text-white-50 ">{{ $Title->description }}</p>
                        <table class="detail-table">
                            <tr>
                                <td>Created&nbsp;By</td>
                                <td>
                                    @if ($Title->type == '1')
                                        {{ $Title->directors }}
                                    @endif
                                    @if ($Title->type == '2')
                                        {{ $Title->creaters }}
                                    @endif
                                </td>
                            </tr>
                            <tr>
                                <td>Starring </td>
                                <td>
                                    {{-- @foreach ($Title->casts as $key => $casts)
                                        @if ($casts->cast_type == 1)
                                            {{ $casts->casts->name }}
                                            @if ($key == 3) @break @endif,
                                        @endif
                                    @endforeach --}}
                                    {{ $Title->actors }}
                                </td>
                            </tr>
                            <tr>
                                <td>Genre</td>
                                <td>
                                    {{-- @php $Genre=  ''; @endphp
                                    @foreach ($Title->genres as $key => $genres)
                                        @php $Genre .= $genres->genres->title.', '; @endphp
                                    @endforeach
                                    {{ rtrim($Genre,', ') }} --}}
                                    {{ $Title->genre }}
                                </td>
                            </tr>
                            <tr>
                                <td>MPAA Rating</td>
                                <td>{{ __(App\Models\Title::$mpaa[$Title->mpaa_rating]) }}</td>
                            </tr>
                        </table>
                        <div class="form-row movie-options">
                            @if($Title->url != null)
                                <div class="col-md-3 col-3">
                                    {{-- <a href="#popup-info" class="btn card__buy w-100 px-4 me-2 px-4 me-2 movie-trailer"><i class="fas fa-play small mr-2"></i>Trailer</a> --}}
                                    <a href="https://www.youtube.com/watch?v={{ $Title->url }}" class="btn card__buy w-100 px-4 me-2 px-4 me-2 popup-youtube"><i class="fas fa-play small mr-2"></i>Trailer</a>
                                </div>
                            @endif
                            {{-- {{dd($Title->video)}} --}}
                            @if(count($Title->video) > 0)
                            <div class="col-md-3 col-3">
                                <a href="{{ route('videodetails',[$Title->ttid, $Title->video[0]->id]) }}" class="btn card__buy w-100 px-4 me-2 px-4 me-2 movie-video"><i class="fas fa-play small mr-2"></i>Movie</a>
                            </div>
                            @endif
                            <div class="col-md-3 col-3">
                                <a href="{{ route('news') }}?t={{ $Title->id }}" class="btn card__buy w-100 card__buy--subscribe">Movie News</a>
                            </div>
                            <div>
                                <button class="card__favorite favorite_{{ $Title->id }}" type="button" data-id="{{ $Title->id }}">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512">
                                        <path d="M352.92,80C288,80,256,144,256,144s-32-64-96.92-64C106.32,80,64.54,124.14,64,176.81c-1.1,109.33,86.73,187.08,183,252.42a16,16,0,0,0,18,0c96.26-65.34,184.09-143.09,183-252.42C447.46,124.14,405.68,80,352.92,80Z"
                                        style="@if($fav) fill: rgb(167, 130, 233); @else fill:none; @endif stroke-linecap: round; stroke-linejoin: round; stroke-width: 32px;"></path>
                                    </svg>
                                </button>
                            </div>
                            <div class="dropdown d-inline-block share-drp ml-1">
                                <a href="javascript:void(0)" id="share-drp" class="btn btn-share" data-toggle="dropdown" aria-expanded="false">
                                    <svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="share-alt" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="svg-inline--fa fa-share-alt fa-w-14 fa-7x">
                                        <path fill="currentColor" d="M352 320c-25.6 0-48.9 10-66.1 26.4l-98.3-61.5c5.9-18.8 5.9-39.1 0-57.8l98.3-61.5C303.1 182 326.4 192 352 192c53 0 96-43 96-96S405 0 352 0s-96 43-96 96c0 9.8 1.5 19.6 4.4 28.9l-98.3 61.5C144.9 170 121.6 160 96 160c-53 0-96 43-96 96s43 96 96 96c25.6 0 48.9-10 66.1-26.4l98.3 61.5c-2.9 9.4-4.4 19.1-4.4 28.9 0 53 43 96 96 96s96-43 96-96-43-96-96-96zm0-272c26.5 0 48 21.5 48 48s-21.5 48-48 48-48-21.5-48-48 21.5-48 48-48zM96 304c-26.5 0-48-21.5-48-48s21.5-48 48-48 48 21.5 48 48-21.5 48-48 48zm256 160c-26.5 0-48-21.5-48-48s21.5-48 48-48 48 21.5 48 48-21.5 48-48 48z"></path>
                                    </svg>
                                </a>
                                <ul class="dropdown-menu detail-share" aria-labelledby="share-drp">
                                    <li class=""><a class="dropdown-item" href="https://www.facebook.com/sharer/sharer.php?u={{ route('moviedetail',[$Title->ttid]) }}"><i class="fab fa-facebook-f"></i> Facebook</a></li>
                                    <li class=""><a class="dropdown-item" href="https://twitter.com/intent/tweet?text={{ route('moviedetail',[$Title->ttid]) }}"><i class="fab fa-twitter"></i> Twitter</a></li>
                                    <li class=""><a class="dropdown-item copy_text" href="{{ route('moviedetail',[$Title->ttid]) }}"><i class="fas fa-link"></i> Copy Link </a></li>
                                </ul>
                            </div>
                            <div class="dropdown d-inline-block share-drp ml-1">
                                <a href="javascript:void(0)" id="share-drp" class="btn btn-share" data-toggle="dropdown" aria-expanded="false">
                                    <svg viewBox="0 0 57 57" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <rect x="1.5" y="12.5" width="54" height="43" rx="10.5" stroke="#A782E9" stroke-width="3"/>
                                        <line x1="26.8787" y1="11" x2="18" y2="2.12132" stroke="#A782E9" stroke-width="3" stroke-linecap="round"/>
                                        <line x1="28" y1="10.8787" x2="36.8813" y2="1.99742" stroke="#A782E9" stroke-width="3" stroke-linecap="round"/>
                                        <path d="M36.75 36.299L26.25 42.3612C25.25 42.9386 24 42.2169 24 41.0622L24 28.9378C24 27.7831 25.25 27.0614 26.25 27.6388L36.75 33.701C37.75 34.2783 37.75 35.7217 36.75 36.299Z" stroke="#A782E9" stroke-width="3"/>
                                    </svg>
                                </a>
                                <ul class="dropdown-menu detail-share" aria-labelledby="share-drp">
                                    @foreach ($channels as $channel)
                                        <li class=""><a class="dropdown-item customchannel" data-id="{{ $channel->id }}" data-title_id="{{ $Title->id }}" data-type="1">{{ $channel->name }}</a></li>
                                    @endforeach
                                </ul>
                            </div>
                        </div>

                        {{-- Images slider --}}
                        <div class="owl-carousel section__carousel w-100 mt-md-5 mt-3" id="sliderMoview-images">
                            @foreach ($Title->posters as $posters)
                                <div class="item">
                                    <a href="{{ $posters->path }}" class="glightbox">
                                        <img src="{{ url($posters->path) }}" class="img-fluid" alt="{{ $posters->path }}" />
                                    </a>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <div id="popup-info" class="mfp-hide ">
        <div class="trailer-popup">
            <video id="my-player" class="video-js vjs-default-skin"
            {{-- controls --}}
                {{-- poster="//vjs.zencdn.net/v/oceans.png" --}} width="100%" height="100%"
                data-setup='{ "techOrder": ["youtube"], "sources": [{ "type": "video/youtube", "src": "https://www.youtube.com/watch?v={{ $Title->url }}"}]}'>
            </video>
        </div>
    </div>
    {{-- End:: Movie Details --}}

    @if ($Title->season)
        {{-- Begin:: Episode --}}
        <section class="section">
            <div class="container">
                <div class="section__title-wrap section__title-wrap--single">
                    <h2 class="section__title">Episodes</h2>
                    <div class="section__nav-wrap">
                        {{-- <a href="{{ route('browse') }}" class="section__view">View All</a> --}}
                        <button class="section__nav section__nav--prev" type="button" data-nav="#episodeSlider">
                            <svg xmlns='http://www.w3.org/2000/svg' width='512' height='512' viewBox='0 0 512 512'>
                                <polyline points='328 112 184 256 328 400' style='fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:48px' />
                            </svg>
                        </button>

                        <button class="section__nav section__nav--next" type="button" data-nav="#episodeSlider">
                            <svg xmlns='http://www.w3.org/2000/svg' width='512' height='512' viewBox='0 0 512 512'>
                                <polyline points='184 112 328 256 184 400' style='fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:48px' />
                            </svg>
                        </button>
                    </div>
                </div>
                <div class="owl-carousel section__carousel section__carousel--catalog" id="episodeSlider">
                    <!-- card -->
                    @foreach ($Title->seasons as $season)
                        @if ($season->seasonNumber == $seasonNumber)
                            <div class="card">
                                <a href="javascript:void(0)" class="card__cover episode-img">
                                    <img src="{{ $season->image }}" alt="">
                                </a>
                                <div class="movie-desc">
                                    <div class="card__title">
                                        <h3>
                                            <a href="#">S{{ $seasonNumber }} episode {{ $season->episodeNumber }}</a>
                                        </h3>
                                    </div>
                                </div>
                            </div>
                        @endif
                    @endforeach
                    <!-- end card -->
                </div>
            </div>
        </section>
        {{-- End:: Episode --}}


        {{-- Begin:: Seasons --}}
        <section class="section">
            <div class="container">
                <div class="section__title-wrap section__title-wrap--single">
                    <h2 class="section__title">Seasons</h2>
                    <div class="section__nav-wrap">
                        {{-- <a href="{{ route('browse') }}" class="section__view">View All</a> --}}

                        <button class="section__nav section__nav--prev" type="button" data-nav="#seasonSlider">
                            <svg xmlns='http://www.w3.org/2000/svg' width='512' height='512' viewBox='0 0 512 512'>
                                <polyline points='328 112 184 256 328 400' style='fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:48px' />
                            </svg>
                        </button>

                        <button class="section__nav section__nav--next" type="button" data-nav="#seasonSlider">
                            <svg xmlns='http://www.w3.org/2000/svg' width='512' height='512' viewBox='0 0 512 512'>
                                <polyline points='184 112 328 256 184 400' style='fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:48px' />
                            </svg>
                        </button>
                    </div>
                </div>

                <div class="owl-carousel section__carousel section__carousel--catalog" id="seasonSlider">
                    <!-- card -->
                    @foreach (json_decode($Title->season) as $key => $val)
                        <div class="card">
                            <a href="{{ route('moviedetail', [$Title->ttid]) }}?s={{ $val }}"
                                class="card__cover episode-img">
                                <img src="{{ url($Title->poster) }}" alt="">
                            </a>
                            <div class="movie-desc"> <div class="card__title">
                                    <h3><a href="{{ route('moviedetail', [$Title->ttid]) }}?s={{ $val }}">Season {{ $val }}</a></h3>
                                </div>
                            </div>
                        </div>
                    @endforeach
                    <!-- end card -->
                </div>
            </div>
        </section>
        {{-- End:: Seasons --}}
    @endif

    <section class="section">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="details">
                        <div class="details__content">
                            <div class="row">
                                <div class="col-12 col-xl-4 order-xl-2">
                                    <!-- requirements -->
                                    <div class="requirements">
                                        <span class="requirements__title">Details:</span>
                                        <ul class="requirements__list">
                                            @if ($Title->type == '1')
                                                <li><span>Director:</span>
                                                    {{-- @foreach ($Title->casts as $key => $casts)
                                                        @if ($casts->cast_type == 2)
                                                            {{ $casts->casts->name }} @if ($key == 3) @break @endif,
                                                        @endif
                                                    @endforeach --}}
                                                    {{ $Title->directors }}
                                                </li>
                                                <li><span>Producer:</span>
                                                    {{-- @foreach ($Title->casts as $key => $casts)
                                                        @if ($casts->cast_type == 3)
                                                            {{ $casts->casts->name }} @if ($key == 1) @break @endif,
                                                        @endif
                                                    @endforeach --}}
                                                    {{ $Title->producers }}
                                                </li>
                                            @endif
                                            <li><span>Actors:</span>
                                                {{-- @foreach ($Title->casts as $key => $casts)
                                                    @if ($casts->cast_type == 1)
                                                        {{ $casts->casts->name }} @if ($key == 3) @break @endif,
                                                    @endif
                                                @endforeach --}}
                                                {{ $Title->actors }}
                                            </li>
                                            @if ($Title->type == '1')
                                                <li><span>Writers:</span>
                                                    {{-- @foreach ($Title->casts as $key => $casts)
                                                        @if ($casts->cast_type == 4)
                                                            {{ $casts->casts->name }} @if ($key == 3) @break @endif,
                                                        @endif
                                                    @endforeach --}}
                                                    {{ $Title->writers }}
                                                </li>
                                                <li><span>Release Date:</span>
                                                    {{ date('d.m.Y', strtotime($Title->release_date)) }}
                                                </li>
                                            @endif
                                            <li><span>Runtime: </span>
                                                {{ floor($Title->running_time / 60) . ' H : ' . ($Title->running_time - floor($Title->running_time / 60) * 60) . ' min' }}
                                            </li>
                                            <li>
                                                <span>Genre:</span>
                                                {{-- @php $Genre = ''; @endphp
                                                @foreach ($Title->genres as $key => $genres)
                                                    @php $Genre .= $genres->genres->title."," @endphp
                                                @endforeach
                                                {{ rtrim($Genre,', ') }} --}}
                                                {{ $Title->genre }}
                                            </li>
                                            @if ($Title->type == '2')
                                                <li><span>Creators:</span>
                                                    {{-- @foreach ($Title->casts as $key => $casts)
                                                        @if ($casts->cast_type == 5)
                                                            {{ $casts->casts->name }},
                                                        @endif
                                                    @endforeach --}}
                                                    {{ $Title->creaters }}
                                                </li>
                                            @endif
                                            <li><span>Country: </span>
                                                {{ $Title->country }}
                                            </li>
                                        </ul>
                                    </div>
                                    <!-- end requirements -->
                                </div>

                                <div class="col-12 col-xl-8 order-xl-1">
                                    <!-- comments -->
                                    <div class="comments comments--details">
                                        <div class="comments__title">
                                            <h4>Reviews</h4>
                                        </div>

                                        <ul class="comments__list">
                                            @foreach ($Review as $rating)
                                                <li class="comments__item">
                                                    <div class="comments__autor d-flex">
                                                        <div>
                                                            <img class="comments__avatar" @if ($rating->user->profile_photo_path == null) src="{{ url('assets/img/user.svg') }}" @else src="{{ $rating->user->profile_photo_path }}" @endif alt="">
                                                            <span class="comments__name">{{ $rating->user->first_name . ' ' . $rating->user->last_name }}</span>
                                                            <span class="comments__time">{{ date('d.m.Y, H:i', strtotime($rating->created_at)) }}</span>
                                                        </div>
                                                        <div class="view-rate text-white">
                                                            <i class="fa-solid fa-star @if ($rating->rating >= 1) text-yellow @endif"></i>
                                                            <i class="fa-solid fa-star @if ($rating->rating >= 2) text-yellow @endif"></i>
                                                            <i class="fa-solid fa-star @if ($rating->rating >= 3) text-yellow @endif"></i>
                                                            <i class="fa-solid fa-star @if ($rating->rating >= 4) text-yellow @endif"></i>
                                                            <i class="fa-solid fa-star @if ($rating->rating >= 5) text-yellow @endif"></i>
                                                        </div>
                                                    </div>

                                                    <p class="comments__text">{{ $rating->comment }}</p>
                                                    <div class="comments__actions d-flex justify-content-between">
                                                        <div class="card_reviewset" data-rating="{{ $rating->id }}">
                                                            <i class="fas fa-heart mr-2 {{ array_search($rating->user_id, array_column($rating->ratinglike->toArray(), 'user_id')) == '' ? '' : 'movie-liked' }}"></i><span data-count="{{ $rating->ratinglike->count() }}">({{ $rating->ratinglike->count() }})</span>
                                                        </div>
                                                        <div class="comments__rate">
                                                            <ul class="details__platforms">
                                                                <li class="fb"><a href="https://www.facebook.com/sharer/sharer.php?u={{ route('moviedetail',[$Title->ttid]) }}" class="text-white"><i class="fa-brands fa-facebook-f"></i></a></li>
                                                                <li class="tw"><a href="https://twitter.com/intent/tweet?text={{ route('moviedetail',[$Title->ttid]) }}" class="text-white"><i class="fa-brands fa-twitter"></i></a></li>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                </li>
                                            @endforeach
                                        </ul>
                                        <form action="{{ route('front.review.store') }}" method="POST" class="form" id="reviewForm">
                                            @csrf
                                            <div class="rate">
                                                <input type="radio" id="star5" name="rating" value="5" />
                                                <label for="star5" title="text">5 stars</label>
                                                <input type="radio" id="star4" name="rating" value="4" />
                                                <label for="star4" title="text">4 stars</label>
                                                <input type="radio" id="star3" name="rating" value="3" />
                                                <label for="star3" title="text">3 stars</label>
                                                <input type="radio" id="star2" name="rating" value="2" />
                                                <label for="star2" title="text">2 stars</label>
                                                <input type="radio" id="star1" name="rating" value="1" checked />
                                                <label for="star1" title="text">1 star</label>
                                            </div>
                                            <textarea id="review" name="review" class="form__textarea" placeholder="Add Review"></textarea>
                                            <span class="error" id="review_er"></span>
                                            <input type="hidden" name="title_id" value="{{ $Title->id }}">
                                            <input type="hidden" name="news_id" value="">
                                            <input type="hidden" name="rating_type" value="1">
                                            <button type="submit" class="form__btn">Send</button>
                                        </form>
                                    </div>
                                </div>
                                <!-- end comments -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection
@section('end-content')
    @include('front.layouts.latest-release')
@endsection

@section('script')
{{-- <script src="https://vjs.zencdn.net/7.8.4/video.js"></script> --}}
{{-- <script src="https://vjs.zencdn.net/5.4.6/video.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-youtube/2.6.0/Youtube.min.js"></script> --}}
{{-- <script src="{{ asset('assets/videojs/dist/videojs-seek-buttons.min.js') }}"></script> --}}
{{-- <script>
    var options = {};
    var myPlayer = videojs('my-player');
    var myPlayer = videojs('my-player', options, function onPlayerReady() {
        videojs.log('Your player is ready!');
        this.play();
        this.on('ended', function() {
            videojs.log('Awww...over so soon?!');
        });
    });
</script> --}}
<script>
    // var myPlayer = videojs('my-player');
    // myPlayer.ready(function () {
    //     // myPlayer.pause()
    //     setTimeout(function(){
    //         myPlayer.pause();
    //     }, 10000)
    // });

    $('.popup-youtube').magnificPopup({
    type: 'iframe'
  });
</script>
@endsection