<div>
    @php
        $video->play_link = $video->playerLink();
        $video->tooltip_url = false;
        $player_settings = [
            'theme_color' => '#088ff5'
        ];
        $player_settings = TorMorten\Eventy\Facades\Events::filter('vod::video-column-player-setting', $player_settings, $video);
    @endphp

        <!-- modules hook -->
    @action('vod::video-column-player', $video)


    <main>
        <div>
            <style>
                :where(.vds-menu-items) {
                    --root-bg: #0a0a0af2 !important;
                }
                a {
                    display: contents;
                }
                body {
                    padding: 0;
                    margin: 0;
                    background-color: black;
                    border:0;
                    overflow-y: scroll !important;
                }
                .vds-next-on-tooltip-text {
                    color: white;
                    font-weight: bold;
                    background: #313131;
                    padding: 10px;
                    border-radius: 5px;
                }
                .w-full {
                    width: 100%;
                }
                .h-auto {
                    height: auto;
                }


                media-controls-group {
                    padding-inline: 40px !important;
                }

                media-controls-group:last-child {
                    padding-bottom: 20px !important;
                }

                .vds-chapter-title::before {
                    content: none;
                }

                .plyr__poster {
                    background-repeat: no-repeat;
                    background-position: center;
                    background-size: cover;
                    width: 100%;
                    height: auto !important;
                    bottom: 0;
                    right: 0;
                }

                .mediacast_player_controllers {
                    background: -webkit-linear-gradient(#ffffff00,#0000008c);
                    background: -moz-linear-gradient(#ffffff00,#0000008c);
                    background: -o-linear-gradient(#ffffff00,#0000008c);

                    -webkit-transition: background 1s ease-out;
                    -moz-transition: background 1s ease-out;
                    -o-transition: background 1s ease-out;
                    transition: background 1s ease-out;
                }

                media-player[data-view-type=video] {
                    --media-font-family : Yekan Bakh !important;
                    --media-brand: {{$player_settings['theme_color']}};
                    --media-button-icon-size: 65%;
                    --media-buffering-size: 70px;
                    width: 100% !important;
                }

                media-provider video {
                    width:100%;
                }

                .vds-buffering-spinner {
                    width: 70px;
                    height: 70px;
                }

                .lead {
                    padding-bottom: 20px;
                    padding-top:20px;
                }
                @media (min-width: 769px) {
                    .lead {
                        display: none;
                    }
                    body {
                        min-height: auto;
                    }
                }

                .hidden {
                    display: none !important;
                }

                .lead svg {
                    width: 64px !important;
                    height: 64px !important;
                }
            </style>
            
            @if($video->type === \Modules\Vod\Enums\LinkType::IFRAME->value)
                {!! $video->iframe !!}
            @elseif(in_array($video->type, [\Modules\Vod\Enums\LinkType::HLS->value, \Modules\Vod\Enums\LinkType::LINK->value, \Modules\Vod\Enums\LinkType::UPLOUD->value]))
                <media-player
                    keep-alive
                    playsinline
                    title="{{$video->title}}"
                    src="{{$video->play_link}}"
                    dir="ltr"
                    autoplay
                    load="eager"
                    poster-load="eager"
                >
                    <media-provider style="position: absolute;top:0;background-color: black;">
                        @if($video->coverLandscape)
                            <media-poster
                                class="vds-poster plyr__poster video-player w-full h-auto"
                                src="{{$url.$video->coverLandscape}}?position=middlecenter&type=crop&&w=1920&h=1080"
                                alt="{{$video->title}}"
                                style="display:inline-table"
                            ></media-poster>
                        @endif
                        @if($video->subtitles)
                            @foreach($video->subtitles as $subtitle)
                                <track label="{{$subtitle->label}}" src="{{url('/storage/',$subtitle->file_path)}}" kind="subtitles" />
                            @endforeach
                        @endif
                    </media-provider>

                    <div class="vds-buffering-indicator">
                        <media-spinner class="vds-buffering-spinner"></media-spinner>
                    </div>

                    <!-- Gestures -->
                    <media-gesture event="pointerup" action="toggle:paused"></media-gesture>
                    <media-gesture event="dblpointerup" action="toggle:fullscreen"></media-gesture>
                    <media-gesture event="pointerup" action="toggle:controls"></media-gesture>
                    <media-gesture event="dblpointerup" action="seek:-10"></media-gesture>
                    <media-gesture event="dblpointerup" action="seek:10"></media-gesture>

                    <!-- Captions -->
                    <media-captions class="vds-captions"></media-captions>

                    <!-- Controls -->
                    <media-controls class="vds-controls ">
                        
                        <div class="vds-controls-spacer"></div>
                        <div class="mediacast_player_controllers">
                            <media-controls-group class="vds-controls-group ads-holder"></media-controls-group>
                            <media-controls-group class="vds-controls-group">
                                <!-- Time Slider -->
                                <div class="vds-time-group" style="padding-right: 8px;">
                                    <media-time class="vds-time" type="current"></media-time>
                                </div>
                                <div style="width: 100%;"></div>
                                <!-- Time Slider -->
                                <div class="vds-time-group" style="padding-right: 8px;">
                                    <media-time class="vds-time" type="duration" ></media-time>
                                </div>
                            </media-controls-group>
                            <!-- Time Slider Controls Group -->
                            <media-controls-group class="vds-controls-group">
                                <!-- Time Slider -->
                                <media-time-slider class="vds-time-slider vds-slider">
                                    <media-slider-chapters class="vds-slider-chapters">
                                        <template>
                                            <div class="vds-slider-chapter">
                                                <div class="vds-slider-track"></div>
                                                <div class="vds-slider-track-fill vds-slider-track"></div>
                                                <div class="vds-slider-progress vds-slider-track"></div>
                                            </div>
                                        </template>
                                    </media-slider-chapters>

                                    <div class="vds-slider-thumb"></div>

                                    <!-- Slider Preview -->
                                    <media-slider-preview class="vds-slider-preview">
                                        @if($video->tooltip_url)
                                            <media-slider-thumbnail
                                                class="vds-slider-thumbnail vds-thumbnail"
                                                src="{{$video->tooltip_url}}"
                                            ></media-slider-thumbnail>
                                        @endif
                                        <div class="vds-slider-chapter-title" data-part="chapter-title"></div>
                                        <media-slider-value class="vds-slider-value"></media-slider-value>
                                    </media-slider-preview>
                                </media-time-slider>
                            </media-controls-group>
                            <!-- Lower Controls Group -->
                            <media-controls-group class="vds-controls-group">
                                <!-- Backward -30s on each press. -->
                                <media-tooltip class="seek-btn1">
                                    <media-tooltip-trigger>
                                        <media-seek-button class="vds-button" seconds="-10">
                                            <media-icon class="h-8 w-8" type="seek-backward-10"></media-icon>
                                        </media-seek-button>
                                    </media-tooltip-trigger>
                                </media-tooltip>
                                <!-- Play Button -->
                                <media-tooltip>
                                    <media-tooltip-trigger>
                                        <media-play-button class="vds-button">
                                            <media-icon class="vds-play-icon" type="play"></media-icon>
                                            <media-icon class="vds-pause-icon" type="pause"></media-icon>
                                        </media-play-button>
                                    </media-tooltip-trigger>
                                    <media-tooltip-content class="vds-tooltip-content" placement="top">
                                        <span class="vds-play-tooltip-text">پخش</span>
                                        <span class="vds-pause-tooltip-text">توقف</span>
                                    </media-tooltip-content>
                                </media-tooltip>
                                <!-- Forward +30s on each press. -->
                                <media-tooltip class="seek-btn2">
                                    <media-tooltip-trigger>
                                        <media-seek-button class="vds-button" seconds="+10">
                                            <media-icon class="h-8 w-8" type="seek-forward-10"></media-icon>
                                        </media-seek-button>
                                    </media-tooltip-trigger>
                                </media-tooltip>

                                <!-- Mute Button -->
                                <media-tooltip>
                                    <media-tooltip-trigger>
                                        <media-mute-button class="vds-button">
                                            <media-icon class="vds-mute-icon" type="mute"></media-icon>
                                            <media-icon class="vds-volume-low-icon" type="volume-low"></media-icon>
                                            <media-icon class="vds-volume-high-icon" type="volume-high"></media-icon>
                                        </media-mute-button>
                                    </media-tooltip-trigger>
                                    <media-tooltip-content class="vds-tooltip-content" placement="top">
                                        <span class="vds-mute-tooltip-text">صدا روشن</span>
                                        <span class="vds-unmute-tooltip-text">بی صدا</span>
                                    </media-tooltip-content>
                                </media-tooltip>

                                <!-- Volume Slider -->
                                <media-volume-slider class="vds-slider">
                                    <div class="vds-slider-track"></div>
                                    <div class="vds-slider-track-fill vds-slider-track"></div>
                                    <media-slider-preview class="vds-slider-preview" no-clamp>
                                        <media-slider-value class="vds-slider-value"></media-slider-value>
                                    </media-slider-preview>
                                    <div class="vds-slider-thumb"></div>
                                </media-volume-slider>


                                <div class="vds-controls-spacer"></div>

                                <!-- Caption Button -->
                                <media-tooltip>
                                    <media-tooltip-trigger>
                                        <media-caption-button class="vds-button">
                                            <media-icon class="vds-cc-on-icon" type="closed-captions-on"></media-icon>
                                            <media-icon class="vds-cc-off-icon" type="closed-captions"></media-icon>
                                        </media-caption-button>
                                    </media-tooltip-trigger>
                                    <media-tooltip-content class="vds-tooltip-content" placement="top">
                                        <span class="vds-cc-on-tooltip-text">زیرنویس غیرفعال</span>
                                        <span class="vds-cc-off-tooltip-text">زیرنویس فعال</span>
                                    </media-tooltip-content>
                                </media-tooltip>

                                @if($video->nextEpisode)
                                    <a href="{{$video?->nextEpisode->player()}}">
                                        <media-tooltip>
                                            <media-tooltip-trigger>
                                                <media-play-button class="vds-button setting-btn">
                                                    <media-icon type="next" class="play-icon vds-icon"></media-icon>
                                                </media-play-button>
                                            </media-tooltip-trigger>
                                            <media-tooltip-content placement="top center">
                                                <!-- Content -->
                                                <span class="vds-next-on-tooltip-text">قسمت بعد</span>
                                            </media-tooltip-content>
                                        </media-tooltip>
                                    </a>
                                @endif

                                <!-- Settings Menu -->
                                <media-menu class="vds-menu setting-btn">
                                    <media-tooltip>
                                        <media-tooltip-trigger>
                                            <media-menu-button class="vds-menu-button vds-button" aria-label="تنظیمات">
                                                <media-icon type="settings" class="vds-rotate-icon vds-icon"></media-icon>
                                            </media-menu-button>
                                        </media-tooltip-trigger>
                                        <media-tooltip-content class="vds-tooltip-content" placement="top">
                                            تنظیمات
                                        </media-tooltip-content>
                                    </media-tooltip>

                                    <media-menu-items class="vds-menu-items" placement="top" offset="0">
                                        <!-- Menu Items + Submenus -->

                                        <!-- Quality submenu -->
                                        <media-menu>
                                            <!-- Button -->
                                            <media-menu-button class="vds-menu-item">
                                                <media-icon type="chevron-left" class="vds-menu-close-icon"></media-icon>
                                                <media-icon type="settings-menu" class="vds-icon"></media-icon>
                                                <span class="vds-menu-item-label">کیفیت</span>
                                                <span class="vds-menu-item-hint" data-part="hint"></span>
                                                <media-icon type="chevron-right" class="vds-menu-open-icon"></media-icon>
                                            </media-menu-button>
                                            <!-- Items -->
                                            <media-menu-items class="vds-menu-items">
                                                <media-quality-radio-group class="vds-radio-group" auto-label="خودکار">
                                                    <template>
                                                        <media-radio class="vds-radio">
                                                            <media-icon class="vds-icon" type="check"></media-icon>
                                                            <span class="vds-radio-label" data-part="label"></span>
                                                            <span class="vds-radio-hint" data-part="bitrate"></span>
                                                        </media-radio>
                                                    </template>
                                                </media-quality-radio-group>
                                            </media-menu-items>
                                        </media-menu>

                                        <!-- Speed submenu -->
                                        <media-menu>
                                            <!-- Button -->
                                            <media-menu-button class="vds-menu-item">
                                                <media-icon type="chevron-left" class="vds-menu-close-icon"></media-icon>
                                                <media-icon type="odometer" class="vds-icon"></media-icon>
                                                <span class="vds-menu-item-label">سرعت</span>
                                                <span class="vds-menu-item-hint" data-part="hint"></span>
                                                <media-icon type="chevron-right" class="vds-menu-open-icon"></media-icon>
                                            </media-menu-button>
                                            <!-- Items -->
                                            <media-menu-items class="vds-menu-items">
                                                <media-speed-radio-group class="vds-radio-group" normal-label="معمولی">
                                                    <template>
                                                        <media-radio class="vds-radio">
                                                            <media-icon class="vds-icon" type="check"></media-icon>
                                                            <span class="vds-radio-label" data-part="label"></span>
                                                        </media-radio>
                                                    </template>
                                                </media-speed-radio-group>
                                            </media-menu-items>
                                        </media-menu>

                                        <!-- Caption Menu -->
                                        <media-menu>
                                            <!-- Button -->
                                            <media-menu-button class="vds-menu-item">
                                                <media-icon type="chevron-left" class="vds-menu-close-icon"></media-icon>
                                                <media-icon type="closed-captions" class="vds-icon"></media-icon>
                                                <span class="vds-menu-item-label">زیرنویس</span>
                                                <span class="vds-menu-item-hint" data-part="hint"></span>
                                                <media-icon type="chevron-right" class="vds-menu-open-icon"></media-icon>
                                            </media-menu-button>
                                            <!-- Items -->
                                            <media-menu-items class="vds-menu-items">
                                                <media-captions-radio-group class="vds-radio-group" off-label="خاموش">
                                                    <template>
                                                        <media-radio class="vds-radio">
                                                            <media-icon class="vds-icon" type="check"></media-icon>
                                                            <span class="vds-radio-label" data-part="label"></span>
                                                        </media-radio>
                                                    </template>
                                                </media-captions-radio-group>
                                            </media-menu-items>
                                        </media-menu>

                                    </media-menu-items>
                                </media-menu>

                                <!-- Fullscreen Button -->
                                <media-tooltip>
                                    <media-tooltip-trigger>
                                        <media-fullscreen-button class="vds-button">
                                            <media-icon class="vds-fs-enter-icon" type="fullscreen"></media-icon>
                                            <media-icon class="vds-fs-exit-icon" type="fullscreen-exit"></media-icon>
                                        </media-fullscreen-button>
                                    </media-tooltip-trigger>
                                    <media-tooltip-content class="vds-tooltip-content" placement="top end">
                                        <span class="vds-fs-enter-tooltip-text">ورود به تمام صفحه</span>
                                        <span class="vds-fs-exit-tooltip-text">خروج از تمام صفحه</span>
                                    </media-tooltip-content>
                                </media-tooltip>
                            </media-controls-group>
                        </div>
                    </media-controls>
                </media-player>
                @action('vod::video-column-player-script', $video)
            @endif
        </div>
    </main>
    

</div>
