<x-layouts.app>
    @include('theme::partials.inner_navigation')
    <div x-data="{preview:false}">
        @include('theme::partials.video_top_banner')
        <div class="relative" id="episodes" style="z-index: 2">
            <livewire:modules.serial.livewire.episodes :video="$video" />
            @if(count($this->video->slides))
                <div style="z-index: 2">
                    @include('theme::partials.gallery')
                </div>
            @endif
        </div>
        @include('theme::partials.about')
        @include('theme::partials.swipper.actors')
        @include('theme::partials.swipper.team')
        @include('theme::partials.swipper.vod')
        @sortableWidgets($footerInstance, 'footer')
        @if($video->teaserVideo)
            <div x-cloak x-show="preview" class="fixed z-[80] top-0 right-0 w-full h-full p-4 flex items-center justify-center">
                <div class="lg:w-[63%] w-[80%] z-[80] flex flex-col items-end">
                    <div class="w-16 p-4 text-white cursor-pointer" x-on:click="preview=false;$refs.video.pause()">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" class="fill-current">
                            <path class="svg-c1"
                                  d="M16.4 14.85l-4.488-4.488L16.4 5.874a1.1 1.1 0 0 0 0-1.552 1.1 1.1 0 0 0-1.552 0L10.36 8.8 5.873 4.322a1.1 1.1 0 0 0-1.552 0 1.1 1.1 0 0 0 0 1.552l4.488 4.488L4.32 14.85a1.1 1.1 0 0 0 0 1.552 1.1 1.1 0 0 0 1.552 0l4.488-4.488 4.488 4.488a1.1 1.1 0 0 0 1.552 0 1.1 1.1 0 0 0 0-1.552z">
                            </path>
                        </svg>
                    </div>
                    <video x-ref="video" src="{{$video->teaserVideo}}" controls="" disablepictureinpicture="" controlslist=""></video>
                </div>
                <div x-on:click="preview=false;$refs.video.pause()" x-bind:class="preview ? '':'hidden'"
                     class="fixed z-[70] top-0 right-0 w-full h-full bg-black/50"></div>
            </div>
        @endif
    </div>
</x-layouts.app>

{{-- Seo --}}
@section('meta_title')
    @php
        $title = __("serial::lang.vod_types.$video->vod_type");
        $title .= ' '.$video->title;
        if($video->latin_title) $title .= ' '.$video->latin_title;
        $title .= ' | '. theme_option('meta_title');
        //$title .= ' ویژه ناشنوایان | '. theme_option('meta_title');
    @endphp
    {{$title}}
@endsection
@section('meta_description')
    @php
        $description = $video->meta_description ?? $video->description;
    @endphp
    {{$description}}
@endsection
@section('header.custom_meta')
    @php
        $genre_string = implode(',', $genre->pluck('latin_title')->toArray());
        // duration
        $init = $video->duration;
        $hours = floor($init / 3600);
        $minutes = floor(($init / 60) % 60);
        $seconds = $init % 60;
        $time = "$hours:$minutes:$seconds";
    @endphp
    <meta property="og:type" content="video.tv_show">
    <meta property="og:url" content="{{$video->path()}}">
    <meta property="og:image" content="{{$video->coverLandscape}}?position=middlecenter&type=crop&&w=1280&h=600">
    <meta name="twitter:image" content="{{$video->imagePoster}}?position=middlecenter&type=crop&w=200&h=294">
    <meta property="og:release_date" content="{{$video->yearValue()}}">
    <script type="application/ld+json">
        {
            "@context": "http://schema.org",
            "@type": "Movie",
            "name": "{{$video->title}}",
            "description": "{{$video->story}}",
            "image": "{{$url}}{{$video->imagePoster}}?type=crop&w=292&h=430",
            "genre": "{{$genre_string}}",
            "duration": "{{$time}}",
            "sdDatePublished": "{{$video->published_at}}",
            "dateCreated": "{{$video->created_at}}",
            "keywords": "{{$video->meta_keywords}}",
        @if(count($actors))
            "actor": [
            @foreach($actors as $actor)
                {
                    "@type": "Person",
                    "name": "{{$actor->name}}"
                }@if(!$loop->last),@endif
            @endforeach
            ],
        @endif
        @if(count($video->getCrewPeopleByRole('director')))
            "director": [
            @foreach($video->getCrewPeopleByRole('director') as $director)
                {
                    "@type": "Person",
                    "name": "{{$director->name}}"
                }@if(!$loop->last),@endif
            @endforeach
            ],
        @endif
        "potentialAction": {
            "@type": "WatchAction",
            "target": "{{$video->player()}}"
            },
        @if($video->teaserVideo)
            "trailer": {
                "@type": "VideoObject",
                    "name": "پیش نمایش {{$video->title}}",
                    "description": "{{$video->about}}",
                    "thumbnailUrl": "{{$video->coverLandscape}}?position=middlecenter&type=crop&w=200&h=150",
                    "contentUrl": "{{$video->teaserVideo}}",
                    "uploadDate": "{{$video->created_at}}"
            },
        @endif
        "url": {{$video->path()}}
        }
    </script>
@endsection
