<x-layouts.app>
    @include('theme::partials.navigation')
    <div class="pt-4 m-auto container">
        <div class="grid grid-cols-12">
            <div class="md:p-2 col-span-12 md:col-span-8">
                <div class="rounded-2xl overflow-hidden aspect-video mb-4">
                    @include('theme::partials.player')
                </div>
                <div class="bg-white rounded-2xl overflow-hidden">
                    <div class="" x-data="more_btn">
                        <div class="flex justify-between flex-wrap text-black p-3">
                            <div class="flex items-center">
                                <h1 class="mt-2 font-bold text-xlg text-black">{{$video->title}}</h1>
                            </div>

                            <div class="flex gap-3 items-center">
                                <div class="flex items-center gap-2">
                                    <i class="las la-eye text-xl "></i>
                                    <span class="text-sm">{{$this->seenTotal}}</span>
                                </div>
                                <div class="flex items-center bg-brand-500 text-white px-3 py-1 rounded-xl cursor-pointer" x-on:click="more_text_open()">
                                    <i class="las la-share-alt ml-1 text-xl"></i>
                                    <span class="text-sm">{{ trans('theme-ekmal::lang.share') }}</span>
                                </div>
                            </div>

                        </div>

                        <div class="flex justify-between flex-wrap text-black border-t-2 border-gray-200 p-3">
                            <div class="flex items-center">
                                <div x-cloak class="fixed w-full h-full top-0 right-0 z-50  bg-gray-500 bg-opacity-20" x-show="more_btn" x-transition:enter="transition ease-in-out duration-300 transform" x-transition:enter-start="translate-y-10" x-transition:enter-end="translate-y-0 ">
                                    <div class="sm:w-96 left-0 right-0 mt-32 m-auto bg-white shadow-lg z-50 relative" x-on:click.away="more_btn = false">

                                        <!-- sidebar header -->
                                        <div class="flex flex-wrap justify-between items-right mx-auto max-w-screen-xl">
                                            <div class="flex flex-wrap border-b border-b-slate-200 w-full">
                                                <div class="flex items-center align-middle cursor-pointer" x-on:click="more_btn = false">
                                                    <i class="las la-times mx-3 text-xl"></i>
                                                </div>
                                                <span class="p-3 text-gray-700">{{ trans('theme-ekmal::lang.share') }}</span>
                                            </div>
                                            <div class="flex items-center md:order-2 relative">
                                            </div>
                                        </div>


                                        <div x-data="{
                                                code: false,
                                            }">
                                            <div x-show="!code">

                                                <div class="flex justify-center gap-3 mt-3 p-3">
                                                    <div class="w-9 flex justify-center text-center flex-col cursor-pointer" x-on:click="code=true">
                                                        <div class="bg-gray-700 rounded-full w-full aspect-square flex justify-center items-center">
                                                            <i class="las la-code text-white"></i>
                                                        </div>
                                                        <span class="text-xs pt-2">{{ trans('theme-ekmal::lang.code') }}</span>
                                                    </div>
                                                    <a target="_blank" x-bind:href="'https://t.me/share/url?url='+window.location+'&amp;text={{urlencode($video->description)}}'" class="w-9 flex justify-center  text-center flex-col" href="https://t.me/share/url?url={{$video->path()}}&amp;text={{urlencode($video->description)}}">
                                                        <div class="bg-[#0088cc] rounded-full p-2">
                                                            <img src="https://ghadir.tv/storage/themes//ekmal//img/icons/telegram.svg" alt="">
                                                        </div>
                                                        <span class="text-xs pt-2">{{ trans('theme-ekmal::lang.telegram') }}</span>
                                                    </a>
                                                    <a target="_blank" x-bind:href="'https://www.facebook.com/share.php?u='+window.location+'&amp;t={{urlencode($video->description)}}'" class="w-9 flex justify-center  text-center flex-col" href="https://www.facebook.com/share.php?u={{$video->path()}}&amp;t={{urlencode($video->description)}}">
                                                        <div class="bg-red-300 rounded-full p-2">
                                                            <img src="https://ghadir.tv/storage/themes//ekmal//img/icons/facebook.svg" alt="">
                                                        </div>
                                                        <span class="text-xs pt-2">{{ trans('theme-ekmal::lang.facebook') }}</span>
                                                    </a>
                                                    <a target="_blank" x-bind:href="'https://wa.me/?text='+window.location" class="w-9 flex justify-center  text-center flex-col" href="https://wa.me/?text={{$video->path()}}">
                                                        <div class="bg-[#43d854] rounded-full p-2">
                                                            <img src="https://ghadir.tv/storage/themes//ekmal//img/icons/whatsapp.svg" alt="">
                                                        </div>
                                                        <span class="text-xs pt-2">{{ trans('theme-ekmal::lang.whatsapp') }}</span>
                                                    </a>
                                                    <a target="_blank" x-bind:href="'https://www.twitter.com/intent/tweet?url='+window.location+'&amp;text={{urlencode($video->description)}}'" class="w-9 flex justify-center  text-center flex-col" href="https://www.twitter.com/intent/tweet?url={{$video->path()}}&amp;text={{urlencode($video->description)}}">
                                                        <div class="bg-[#55acee] rounded-full p-2">
                                                            <img src="https://ghadir.tv/storage/themes//ekmal//img/icons/twitterx.svg" alt="">
                                                        </div>
                                                        <span class="text-xs pt-2">{{ trans('theme-ekmal::lang.twitter') }}</span>
                                                    </a>
                                                    <a target="_blank" x-bind:href="'https://www.linkedin.com/shareArticle?mini=true&amp;url='+window.location+'&amp;title={{urlencode($video->description)}}'" class="w-9 flex justify-center text-center flex-col" href="https://www.linkedin.com/shareArticle?mini=true&amp;url={{$video->path()}}&amp;title={{urlencode($video->title)}}">
                                                        <div class="bg-[#0077b5] rounded-full p-2">
                                                            <img src="https://ghadir.tv/storage/themes//ekmal//img/icons/linkedin.svg" alt="">
                                                        </div>
                                                        <span class="text-xs pt-2">{{ trans('theme-ekmal::lang.linkedin') }}</span>
                                                    </a>
                                                    <a target="_blank" x-bind:href="'https://www.eitaa.com/share/url?url='+window.location" class="w-9 flex justify-center  text-center flex-col" href="https://www.eitaa.com/share/url?url={{$video->path()}}">
                                                        <img src="https://ghadir.tv/storage/themes//ekmal//img/icons/eitaa.svg" alt="">
                                                        <span class="text-xs pt-2">{{ trans('theme-ekmal::lang.eitaa') }}</span>
                                                    </a>
                                                </div>

                                                <div x-data="{
                                                        link: '',
                                                        tooltip: false,
                                                        copyLink() {
                                                            var inputc = document.body.appendChild(document.createElement('input'));
                                                            inputc.value = this.link;

                                                            inputc.select();
                                                            document.execCommand('copy');
                                                            inputc.parentNode.removeChild(inputc);
                                                            this.tooltip = true;
                                                            setTimeout(function() {
                                                                this.tooltip = false;
                                                            }, 3000);
                                                        },
                                                        hidenTooltip () {
                                                            this.tooltip = false;
                                                        }
                                                    }" x-init="link = window.location">
                                                    <div class="p-5 relative">
                                                        <input type="text" class=" w-full m-auto p-2 border rounded-sm text-xs text-left" x-bind:value="link" disabled="">
                                                        <div class="absolute top-6 right-6 bg-white" x-on:click="copyLink"><i class="las la-copy text-xl"></i></div>
                                                    </div>
                                                    <div x-show="tooltip" x-on:click="hidenTooltip" class="absolute top-0 bottom-0 right-0 left-0 bg-white bg-opacity-30 bg-transparent" style="display: none;">
                                                        <div class="text-white bg-gray-700 p-3 text-center bottom-0 absolute w-full"><span>{{ trans('theme-ekmal::lang.copy_success') }}</span></div>
                                                    </div>
                                                </div>
                                            </div>

                                            <div x-show="code" x-on:click.away="code=false" style="display: none;">

                                                <div x-data="{
                                            link: '',
                                            tooltip: false,
                                            copyLink() {
                                                var inputc = document.body.appendChild(document.createElement('input'));
                                                inputc.value = (this.$refs.iframe).value;
                                                inputc.focus();
                                                inputc.select();
                                                document.execCommand('copy');
                                                inputc.parentNode.removeChild(inputc);
                                                this.tooltip = true;
                                            },
                                            hidenTooltip () {
                                                this.tooltip = false;
                                            }
                                        }" class="p-3" x-on:click.away="hidenTooltip">
                                                    <div class="flex items-center px-3">
                                                        <!-- <input id="inline-radio" type="radio" value="1" name="inline-radio-group" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 focus:ring-2"> -->
                                                        <label for="inline-radio" class="ms-2 text-sm font-medium text-gray-900 dark:text-gray-300">{{ trans('theme-ekmal::lang.iframe') }}</label>
                                                    </div>

                                                    <div class="flex mt-3 border rounded-sm">
                                                        <textarea x-ref="iframe" class="w-full h-[80px] m-auto p-2 border rounded-sm text-xs text-left scrollbar scrollbar-none overflow-scroll" disabled="">                                                                &lt;style&gt;.h_iframe-mediacast_embed_frame{position:relative;}.h_iframe-mediacast_embed_frame .ratio{display:block;width:100%;height:auto;}.h_iframe-mediacast_embed_frame iframe{position:absolute;top:0;left:0;width:100%;height:100%;}&lt;/style&gt;&lt;div class="h_iframe-mediacast_embed_frame"&gt;&lt;span style="display: block;padding-top: 57%"&gt;&lt;/span&gt;&lt;iframe src="https://ghadir.tv/v/p/%D8%AC%D8%A7%D9%86%D8%A7%D9%86-%D8%AD%D8%B3%DB%8C%D9%86-%D8%AD%D9%82%DB%8C%D9%82%DB%8C-%D9%88%D8%B1%D8%B2%D8%B4%DA%AF%D8%A7%D9%87-%D8%AD%D8%A7%D9%81%D8%B8%DB%8C%D9%87-%D8%B4%DB%8C%D8%B1%D8%A7%D8%B2-%D8%BA%D8%AF%DB%8C%D8%B1-1402" title="جانان - حسین حقیقی - ورزشگاه حافظیه شیراز - غدیر 1402" allowFullScreen="true" webkitallowfullscreen="true" mozallowfullscreen="true"&gt;&lt;/iframe&gt;&lt;/div&gt;
                                                        </textarea>
                                                        <div x-on:click="copyLink" class="bg-gray-700 p-6"><i class="las la-copy text-xl text-white"></i></div>
                                                    </div>
                                                    <div x-show="tooltip" x-on:click="hidenTooltip" class="absolute top-0 bottom-0 right-0 left-0 bg-white bg-opacity-30 bg-transparent" style="display: none;">
                                                        <div class="text-white bg-gray-700 p-3 text-center bottom-0 absolute w-full"><span>{{ trans('theme-ekmal::lang.copy_success') }}</span></div>
                                                    </div>
                                                </div>

                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                        <span class="leading-10 text-gray-500 block mt-3 blog-container">
                            <div class="flex flex-col gap-4 mb-10">
                                <div class="text-[#888888] leading-8 prose p-4">
                                    {!! $video->description !!}
                                </div>
                                <div class="flex flex-col gap-4">
                                    <div class="flex items-center gap-2">
                                        <span class="px-4">{{ trans('theme-ekmal::lang.category') }}:</span>
                                        <div class="flex gap-2 flex-wrap">
                                            @foreach($tags as $item)
                                            <a class="pointer bg-gray-100 rounded-lg px-3">
                                                <span>{{$item->title}}</span>
                                            </a>
                                            @endforeach
                                        </div>
                                    </div>
                                </div>

                            </div>

                        </span>
                    </div>
                </div>
                <livewire:comment.comment-holder :module="$this->video" :view="'theme::partials.comment.comments'" />

            </div>
            <div class="p-2 mb-12 col-span-12 md:col-span-4">

                @if($video->collection)
                <div class="border rounded-xl w-full" x-data="{expanded:true}">
                    <!-- header start -->
                    <div class="flex justify-between w-full items-center p-3">
                        <div class="flex flex-col gap-1">
                            <div class="flex gap-2">
                                <svg width="25px" height="25px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path opacity="0.5" d="M21 6L3 6" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round" />
                                    <path opacity="0.5" d="M21 10L3 10" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round" />
                                    <path opacity="0.5" d="M11 14L3 14" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round" />
                                    <path opacity="0.5" d="M11 18H3" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round" />
                                    <path d="M18.875 14.1183C20.5288 15.0732 21.3558 15.5506 21.4772 16.2394C21.5076 16.4118 21.5076 16.5881 21.4772 16.7604C21.3558 17.4492 20.5288 17.9266 18.875 18.8815C17.2212 19.8363 16.3942 20.3137 15.737 20.0745C15.5725 20.0147 15.4199 19.9265 15.2858 19.814C14.75 19.3644 14.75 18.4096 14.75 16.4999C14.75 14.5902 14.75 13.6354 15.2858 13.1858C15.4199 13.0733 15.5725 12.9852 15.737 12.9253C16.3942 12.6861 17.2212 13.1635 18.875 14.1183Z" stroke="#1C274C" stroke-width="1.5" />
                                </svg>
                                <div>{{$video->collection->name}}</div>
                            </div>
                            <div class="flex gap-1 px-[35px]">
                                <span class="text-xs">{{$video->collection->videos->count()}} {{trans('theme-ekmal::lang.video')}}</span>
                            </div>
                        </div>

                        <div class="flex gap-2">
                            <div class="border p-2 cursor-pointer rounded-xl" x-on:click="expanded = !expanded">
                                <svg width="20px" height="20px" :class="expanded ? '' : 'rotate-180'" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
                                    <defs>
                                        <style>
                                            .cls-1 {
                                                fill: none;
                                                stroke: #000000;
                                                stroke-linecap: round;
                                                stroke-linejoin: round;
                                                stroke-width: 2px;
                                            }
                                        </style>
                                    </defs>
                                    <title />
                                    <g id="chevron-top">
                                        <line class="cls-1" x1="16" x2="25" y1="11.5" y2="20.5" />
                                        <line class="cls-1" x1="7" x2="16" y1="20.5" y2="11.5" />
                                    </g>
                                </svg>
                            </div>
                        </div>

                    </div>
                    <!-- header end -->

                    <!-- body start -->
                    <div class="flex flex-col h-96 overflow-y-scroll  border-t" x-show="expanded" x-transition>
                        @foreach($video->collection->videos()->latest()->get() as $item)
                        <a href="{{route('vod.video.theme.show', $item->slug)}}" class="flex flex-row p-2 hover:bg-gray-100
                                @if(\Request::is('v/'.$item->slug)) bg-gray-100 @endif
                                ">
                            <img src="{{$url.$item->withFakes()->imagePoster}}?type=crop&w=160&h=90" style="width: 10rem" class="aspect-video h-auto rounded-lg " alt="{{$item->title}}">
                            <div class="flex flex-col rtl:mr-3 ltr:ml-3 w-full">
                                <h5 class="text-xs font-bold">{{$item->title}}</h5>
                                <div class="flex justify-between flex-wrap text-gray-400">
                                    <div class="flex items-center">
                                        <span class="text-sm">{{localization_date($item->published_at, 'diff')}}</span>
                                    </div>
                                </div>
                            </div>
                        </a>
                        @endforeach
                    </div>
                    <!-- body end -->
                </div>
                @endif

                @sortableWidgets($widgetInstance, 'single-video-sidebar')

                <div class="flex flex-col gap-y-2">
                    <h3 class="font-bold text-lg py-4">{{ trans('theme-ekmal::lang.similar_videos') }}</h3>
                    @foreach($similarVideos as $item)
                    <a href="{{route('vod.video.theme.show', $item->slug)}}" class="flex flex-row">
                        <img src="{{$url.$item->withFakes()->imagePoster}}?type=crop&w=160&h=90" style="width: 168px" class="aspect-video h-auto rounded-lg" alt="{{$item->title}}">
                        <div class="flex flex-col mx-3 w-full">
                            <h5 class="text-xs font-bold">{{$item->title}}</h5>
                            <span class="text-xs">{{($video->getTagValueFromGroupName('sport')) ? $video->getTagValueFromGroupName('sport')->title : ''}}</span>
                            <div class="flex justify-between flex-wrap text-gray-400">
                                <div class="flex items-center">
                                    <span class="text-sm">{{localization_date($item->published_at, 'diff')}}</span>
                                </div>
                            </div>
                        </div>
                    </a>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
    @sortableWidgets($footerInstance, 'footer')
</x-layouts.app>

{{-- seo --}}
@section('meta_title')
@php
$title = ' '.$video->title;
if($video->latin_title) $title .= ' '.$video->latin_title;
$title .= ' | '. theme_option('meta_title');
@endphp
{{$title}}
@endsection
@section('meta_description')
@php
$description = $video->meta_description ?? $video->description;
@endphp
{{$description}}
@endsection
@section('meta_keywords')
@php
$keywords = $video->meta_keywords ?? theme_option('meta_keywords');
@endphp
{{$keywords}}
@endsection
@section('header.custom_meta')
@php
$genre_string = '';
// 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: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="module" src="{{asset('storage/modules/vod/v2-player/index-BywSKRHc.js')}}"></script>
<link rel="stylesheet" href="{{asset('storage/modules/vod/v2-player/index-DBYI9Ne3.css')}}" />
@endsection