<div>
    <!-- main menu widget-->
    <livewire:widgets.custom :widget="widget('main_menu')" :view="'theme::widgets.main_menu'" />
    <!--/ main menu widget -->

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

    <style>
        :root {
            --plyr-color-main : #007f3f;
        }

        .plyr:fullscreen video {
            height: 100% !important;
        }
    </style>

    <div class="container mx-auto p-4">
        <div class="flex flex-wrap flex-row">
            <!-- main content -->
            <div class="md:p-2 mb-12 lg:basis-2/3 md:bas w-full">
                <video  data-poster="{{url($channel->poster ?? theme('/img/photos/vod/default-video.jpg'))}}" class="video-player aspect-video w-full" id="player" playsinline crossorigin controls ></video>
                <div class="bg-white shadow-sm overflow-hidden">
                    <div class="p-4">
                        <div class="flex justify-between flex-wrap text-gray-400 p-3">
                            <div class="flex items-center">
                                <h1 class="mt-2 font-bold text-xlg text-gray-600">{{$channel->title}}</h1>
                            </div>
                            <div class="flex items-center">
                                <span class="text-sm">12</span>
                                <i class="las la-eye mr-1 text-xl "></i>
                            </div>
                        </div>

                        <div class="flex justify-between flex-wrap text-gray-400 border-t-2 border-gray-200 p-3">
                            <div class="flex items-center">
                                <h1 class="mt-2 font-bold text-xlg text-gray-600"></h1>
                            </div>
                            <div class="flex items-center">
                                <div class="flex items-center mr-3 hover:bg-gray-100 px-3 py-1 rounded-full cursor-pointer">
                                    <i class="las la-heart ml-1 text-xl "></i>
                                    <span class="text-sm">12</span>
                                </div>
                                <div class="flex items-center mr-3 hover:bg-gray-100 px-3 py-1 rounded-full cursor-pointer" x-data="more_btn" >
                                    <i class="las la-share-alt ml-1 text-xl" x-on:click="more_text_open()"></i>
                                    <span class="text-sm" x-on:click="more_text_open()">اشتراک گزاری</span>

                                    <div class="fixed w-full h-full top-0 right-0 z-50 bg-gray-500 bg-opacity-20" x-cloak 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_text_close()">

                                            <!-- 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_text_close()">
                                                        <i class="las la-times mr-3 text-xl" ></i>
                                                    </div>
                                                    <span class="p-3 text-gray-700">اشتراک گزاری</span>
                                                </div>
                                                <div class="flex items-center md:order-2 relative" >

                                                </div>
                                            </div>


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

                                                    <div class="flex justify-center gap-3 mt-3 p-3">
                                                        <div class="w-9 flex justify-center text-center flex-col" 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">کد</span>
                                                        </div>
                                                        <a target="_blank" x-bind:href="'https://t.me/share/url?url='+window.location+'&text={{urlencode($channel->title)}}'" class="w-9 flex justify-center  text-center flex-col">
                                                            <div class="bg-[#0088cc] rounded-full p-2">
                                                                <img src="{{theme('/img/icons/telegram.svg')}}" alt="">
                                                            </div>
                                                            <span class="text-xs pt-2">تلگرام</span>
                                                        </a>
                                                        <a target="_blank" x-bind:href="'https://www.facebook.com/share.php?u='+window.location+'&t={{urlencode($channel->title)}}'" class="w-9 flex justify-center  text-center flex-col">
                                                            <div class="bg-red-300 rounded-full p-2">
                                                                <img src="{{theme('/img/icons/facebook.svg')}}" alt="">
                                                            </div>
                                                            <span class="text-xs pt-2">فیسبوک</span>
                                                        </a>
                                                        <a target="_blank" x-bind:href="'https://wa.me/?text='+window.location" class="w-9 flex justify-center  text-center flex-col">
                                                            <div class="bg-[#43d854] rounded-full p-2">
                                                                <img src="{{theme('/img/icons/whatsapp.svg')}}" alt="">
                                                            </div>
                                                            <span class="text-xs pt-2">واتساپ</span>
                                                        </a>
                                                        <a target="_blank" x-bind:href="'https://www.twitter.com/intent/tweet?url='+window.location+'&text={{urlencode($channel->title)}}'" class="w-9 flex justify-center  text-center flex-col">
                                                            <div class="bg-[#55acee] rounded-full p-2">
                                                                <img src="{{theme('/img/icons/twitterx.svg')}}" alt="">
                                                            </div>
                                                            <span class="text-xs pt-2">تویتر</span>
                                                        </a>
                                                        <a target="_blank" x-bind:href="'https://www.linkedin.com/shareArticle?mini=true&url='+window.location+'&title={{urlencode($channel->title)}}'" class="w-9 flex justify-center text-center flex-col">
                                                            <div class="bg-[#0077b5] rounded-full p-2">
                                                                <img src="{{theme('/img/icons/linkedin.svg')}}" alt="">
                                                            </div>
                                                            <span class="text-xs pt-2">لینکدین</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">
                                                            <img src="{{theme('/img/icons/eitaa.svg')}}" alt="">
                                                            <span class="text-xs pt-2">ایتا</span>
                                                        </a>
                                                    </div>

                                                    <div x-data="{
                                                link: '',
                                                tooltip: false,
                                                copyLink() {
                                                    var inputc = document.body.appendChild(document.createElement('input'));
                                                    inputc.value = this.link;
                                                    inputc.focus();
                                                    inputc.select();
                                                    document.execCommand('copy');
                                                    inputc.parentNode.removeChild(inputc);
                                                    this.tooltip = true;
                                                    console.log(this.tooltip)
                                                    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-5 right-6" x-on:click="copyLink"><i class="las la-copy text-xl"></i></div>
                                                        </div>
                                                        <div x-show="tooltip" x-cloak x-on:click="hidenTooltip" class="absolute top-0 bottom-0 right-0 left-0 bg-white bg-opacity-30 bg-transparent">
                                                            <div class="text-white bg-gray-700 p-3 text-center bottom-0 absolute w-full"><span>کپی شد</span></div>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div x-show="code" x-cloak x-on:click.away="code=false">

                                                    <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">کد آی فریم</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 >
                                                                <style>.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%;}</style><div class="h_iframe-mediacast_embed_frame"><span style="display: block;padding-top: 57%"></span><iframe src="{{route('vod.video.theme.player', ['video' => $channel->id])}}" title="{{$channel->title}}" allowFullScreen="true" webkitallowfullscreen="true" mozallowfullscreen="true"></iframe></div>
                                                            </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-cloak x-on:click="hidenTooltip" class="absolute top-0 bottom-0 right-0 left-0 bg-white bg-opacity-30 bg-transparent">
                                                            <div class="text-white bg-gray-700 p-3 text-center bottom-0 absolute w-full"><span>کپی شد</span></div>
                                                        </div>
                                                    </div>

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

                                    </div>
                                </div>
                            </div>
                        </div>
                        <span class="leading-10 text-gray-500 block mt-3 blog-container">
                            {!! $channel->description !!}
                        </span>
                    </div>
                </div>
            </div>

            <!-- left sidebar -->
            <div class="p-2 mb-12 lg:basis-1/3 w-full">

            </div>
        </div>

    </div>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const source = '{{$channel->playerLink()}}';
            const video = document.querySelector('video');

            const defaultOptions = {};

            if (!Hls.isSupported()) {
                video.src = source;
                var player = new Plyr(video, defaultOptions);
            } else {
                // For more Hls.js options, see https://github.com/dailymotion/hls.js
                const hls = new Hls();
                hls.loadSource(source);

                // From the m3u8 playlist, hls parses the manifest and returns
                // all available video qualities. This is important, in this approach,
                // we will have one source on the Plyr player.
                hls.on(Hls.Events.MANIFEST_PARSED, function (event, data) {

                    // Transform available levels into an array of integers (height values).
                    // const availableQualities = hls.levels.map((l) => l.bitrate/1000)
                    const availableQualities  = ['720', '480', '360', '240']
                    availableQualities.unshift(0) //prepend 0 to quality array

                    // Add new qualities to option
                    defaultOptions.quality = {
                        default: 0, //Default - AUTO
                        options: availableQualities,
                        forced: true,
                        onChange: (e) => updateQuality(e),
                    }
                    // Add Auto Label
                    defaultOptions.i18n = @json(trans("vod::lang.player"))

                    hls.on(Hls.Events.LEVEL_SWITCHED, function (event, data) {
                        var span = document.querySelector(".plyr__menu__container [data-plyr='quality'][value='0'] span")
                        if (hls.autoLevelEnabled) {
                            span.innerHTML = `{{trans("vod::lang.auto")}} (${extractQuality(hls.levels[data.level].url)}p)`
                        } else {
                            span.innerHTML = `{{trans("vod::lang.auto_with_description")}}`
                        }
                    })

                    // Initialize new Plyr player with quality options
                    var player = new Plyr(video, defaultOptions);
                });

                hls.attachMedia(video);
                window.hls = hls;
            }

            function updateQuality(newQuality) {
                console.log(newQuality);
                if (newQuality === 0) {
                    window.hls.currentLevel = -1; //Enable AUTO quality if option.value = 0
                } else {
                    window.hls.levels.forEach((level, levelIndex) => {
                        console.log(levelIndex)
                        console.log(extractQuality(hls.levels[levelIndex].url), newQuality)
                        if (extractQuality(hls.levels[levelIndex].url) === newQuality) {
                            window.hls.currentLevel = levelIndex;
                        }
                    });
                }
            }

            function extractQuality(inputArray) {
                if (inputArray.length === 1) {
                    const url = inputArray[0];
                    const parts = url.split('_');
                    if(parts.length == 2) {
                        const name = parts[1]
                        return name.replace('.m3u8', '')
                    }
                }
                // invalid input
                return null;
            }

        });
    </script>
</div>
