@extends('layouts.app')

@push('meta')

    <title>{{env('APP_NAME')}} : {{$story->title}}</title>
    <meta property="og:image" content="{{ asset('storage/repository/index/'.$story->thumbnail) }}"/>
    <meta property="og:image:type" content="image/jpg">
    <meta property="og:site_name" content="{{env('APP_NAME')}}"/>
    <meta property="og:type" content="article"/>
    <meta property="og:url" content="{{Request::url()}}"/>
    <meta property="og:title" content="{{$translation->title}}"/>
    <meta property="og:description"
          content="@if ($translation->intro) {{strip_tags($translation->intro)}} @else {{ Str::limit(strip_tags($translation->content), $limit = 200, $end = '...') }} @endif"/>
    <meta property="og:updated_time" content="{{$story->publish_at}}"/>
    <meta name="keywords" content=""/>
    <meta name="description"
          content="@if ($translation->intro) {{strip_tags($translation->intro)}} @else {{ Str::limit(strip_tags($translation->content), $limit = 200, $end = '...') }} @endif"/>
    <meta name="abstract" content=""/>
    <meta name="twitter:card" content="summary"/>
    <meta name="twitter:url" content="{{Request::url()}}"/>
    <meta name="twitter:title" content="{{$translation->title}} "/>
    <meta name="twitter:description"
          content="@if ($translation->intro) {{strip_tags($translation->intro)}} @else {{ Str::limit(strip_tags($translation->content), $limit = 200, $end = '...') }} @endif"/>
    <meta property="article:published_time" content="{{$story->publish_at}}"/>
    <meta property="article:modified_time" content="{{$story->publish_at}}"/>


    <script>

        var ext = "webp";
    </script>

    <link href="/front/nuevo10/skins/treso/videojs.min.css" rel="stylesheet" type="text/css"/>

    <style>
        .subtitle:hover {
            cursor: pointer; /* Changes the cursor to a pointer when hovering over a subtitle */
        }
    </style>

    {!! \App\Helper::seoJsonLd($translation->language->name) !!}

@endpush

@section('content')
    <section class="xl:h-8"></section>
    <section class="bg-brand-dark">
        <div class="container mx-auto lg:px-4 px-2 lg:py-12 sm:py-8 py-2">
            <div class="flex lg:flex-row flex-col">
                <div class="w-full bg-white lg:border-r-4 border-brand-dark">

                    @include('layouts.partials.media')


                    <div class="mt-3 px-3 lg:px-6 py-2 lg:py-4">
                        <div class="space-y-1.5">
                            <div class="flex items-center gap-2 text-sm">
                                <time>{{\Carbon\Carbon::parse($story->publish_at)->isoFormat("DD-MM-YYYY")}}</time>
                                <div class="h-2.5 w-[1px] bg-brand-dark"></div>
                                <p> @foreach ($story->categories as $category)
                                        {{$category->category->name}}

                                        @if (!$loop->last)
                                            ,
                                        @endif

                                    @endforeach

                                    @if ($story->tags->count()>0)
                                        |
                                        @foreach ($story->tags as $tag)
                                            {{$tag->tag->name}}

                                            @if (!$loop->last)
                                                ,
                                            @endif

                                        @endforeach
                                    @endif</p>
                            </div>
                            <h3 class="text-xl font-bold">{{$translation->title}}</h3>
                            <div class="pt-1">
                                @foreach ($story->translations->where('is_active',1) as $language)
                                    <a href="/teleprompter/{{$language->locale}}/{{$story->id}}/{{$language->slug}}">
                                    <span
                                        class="text-white text-sm uppercase tracking-wide font-bold  @if ($language->language->code==$locale) bg-brand-dark @else bg-brand-grey @endif  rounded px-2 py-0.5 inline-block">
                        {{$language->language->shortname}}
                    </span></a>

                                @endforeach


                            </div>
                        </div>
                        <div class="mt-5 pb-10">


                            <div class="tab-wrapper" x-data="{ activeTab:  0 }">

                                @if ($translation->shotlist && $translation->content)
                                    <div class="nav">
                                        <label
                                            @click="activeTab = 0"
                                            class="tab-control"
                                            :class="{ 'active': activeTab === 0 }"
                                        >Shotlist</label>
                                        <label
                                            @click="activeTab = 1"
                                            class="tab-control"
                                            :class="{ 'active': activeTab === 1 }"
                                        >Story</label>
                                    </div>

                                @endif


                                @if ($translation->shotlist && $translation->content)
                                    <div class="tab-panel" :class="{ 'active': activeTab === 0 }"
                                         x-show.transition.in.opacity.duration.600="activeTab === 0">
                                        <div class="content text-base font-normal">
                                            {!!  $translation->shotlist!!}

                                            @if ($translation->is_ai_generated)
                                                <br>
                                                 {!! \App\Helper::getTranslationNotice($locale) !!}

                                            @endif

                                        </div>
                                    </div>

                                    <div class="tab-panel" :class="{ 'active': activeTab === 1 }"
                                         x-show.transition.in.opacity.duration.600="activeTab === 1">
                                        <div class="content text-base font-normal">
                                            {!!  $translation->content!!}

                                            @if ($translation->is_ai_generated)
                                                <br>
                                                {!! \App\Helper::getTranslationNotice($locale) !!}

                                            @endif

                                        </div>
                                    </div>

                                @else

                                    <div class="content text-base font-normal">
                                        {!!  $translation->content!!}

                                        @if ($translation->is_ai_generated)
                                            <br>
                                            {!! \App\Helper::getTranslationNotice($locale) !!}

                                        @endif

                                    </div>
                                @endif
                            </div>


                        </div>
                    </div>
                </div>
                <div class="relative lg:max-w-sm w-full shrink-0 bg-white overflow-hidden py-2 lg:py-4">
                <a href="/story/{{$locale}}/{{$story->id}}/{{$translation->slug}}" class="absolute top-0 right-0 z-10 btn btn-brand-blue">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
                </svg>
                </a>

                <div class="flex items-center gap-1 px-3 lg:px-6 pb-2">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-5 shrink-0">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M6 20.25h12m-7.5-3v3m3-3v3m-10.125-3h17.25c.621 0 1.125-.504 1.125-1.125V4.875c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125z"></path>
                            </svg>
                    <div>Teleprompter
                    </div>
                </div>

                    <div id="container" class="h-[28rem] overflow-auto px-3">
                        @foreach ($subtitle as $key => $sub)
                            @if ($sub['lines'][0])
                                <div class="mt-2">
                                    <div class="subtitle line relative font-normal px-3" id="sub-{{$key+1}}"
                                         data-start="{{$sub['start']}}"
                                         data-end="{{$sub['end']}}"
                                         data-id="{{$key+1}}"
                                         >{{$sub['lines'][0]}}</div>
                                </div>

                            @endif

                        @endforeach

                    </div>


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

@stop

@push('modals')
@endpush

@push('scripts')
    <script src="{{asset('backend/libs/jquery/jquery.min.js')}}"></script>
    <script src="https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1"></script>
    <script src="/front/nuevo10/video.js"></script>

    <script src="/front/nuevo10/nuevo.min.js"></script>
    <script src="/front/nuevo10/plugins/videojs-chromecast.min.js"></script>
    <script src="/front/nuevo10/plugins/videojs.airplay.js"></script>

    <script>
        //videojs.options.liveui = true;
        var player = videojs('im8player');
        player.nuevo({
            pipButton: true,
            contextMenu: false,
            zoomMenu: true,
            settingsButton: true,
            shareMenu: false,
            iosFullscreen: 'pseudo',
            mirrorButton: false,

        });
        player.chromecast();
        player.airplay();

        if (player.duration() === Infinity) {
            // Something like this - cant remember exact code.
            player.tech.hls_.playlist().media.seekable.end(0);
        }


    </script>
    <script>

        const video = document.querySelector("video");

        var container = $('#container');

        video.addEventListener("timeupdate", (event) => {

            // $('.line').addClass('past');

            var currentTime = video.currentTime; // Get the current time of the video
            // Perform any actions or checks based on the current time
            console.log("Current Time:", currentTime);

            var matchingDivs = $('div[data-start][data-end]').filter(function () {
                var start = parseInt($(this).attr('data-start'));
                var end = parseInt($(this).attr('data-end'));

                $(this).css('background-color', 'white');
                //$(this).css('font-size', '14px');

                return start <= currentTime && end >= currentTime


            });

            matchingDivs.css('background-color', 'rgb(255,255,0)');


        })

        var previousTargetDivTop = 0;

        $(document).ready(function () {
            setInterval(function () {
                var targetDiv = $('.subtitle').filter(function () {
                    return $(this).css('font-size') === '20px';
                });

                if (targetDiv.length > 0) {

                    var position = targetDiv.position();

                    console.log(position)
                    console.log(previousTargetDivTop)

                    if (previousTargetDivTop < position.top) {
                        container.scrollTop(targetDiv.offset().top - container.offset().top);
                    }


                    previousTargetDivTop = position.top

                    console.log("Position - Top:", position.top, "Left:", position.left);
                } else {
                    console.log("No div with yellow background found.");
                }
            }, 1000); // Repeat the check every second (1000 milliseconds)
        });
    </script>

    <script>
        $(document).ready(function() {
            // Use jQuery to attach a click event to each subtitle div
            $('.subtitle').click(function() {


                var startTime = $(this).data('start'); // Retrieve the start time using jQuery's .data() method

               // var video = $('#im8player')[0]; // Get the video element and access the native DOM element
                video.currentTime = parseFloat(startTime); // Convert start time to float and set as video's current time
                video.play(); // Play the video from the new time
            });
        });
    </script>



@endpush