@extends('layouts.app')

@push('meta')

    <title>{{env('APP_NAME')}} : {{$story->title}}</title>
    <meta property="og:image" content="{{ asset('storage/repository/icons/'.$story->thumbnail) }}"/>



    @if ($story->translations->where('is_active',1)->where('locale',$locale)->count()>0)

        <meta property="og:image:type" content="image/jpg">
        <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}}"/>

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

    @if ($video)
        <script>

            var ext = "webp";
        </script>

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

    @endif

@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" @if ($locale=="ar") dir="rtl"
                                 style="text-align: right;" @endif>
                                <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>

                            @if ($story->translations->where('is_active',1)->where('locale',$locale)->count()>0)

                                <h3 class="text-xl font-bold" @if ($locale=="ar") dir="rtl"
                                    style="text-align: right;" @endif>{{$translation->title}}</h3>
                                <div class="pt-1" @if ($locale=="ar") dir="rtl" style="text-align: right;" @endif>
                                    @foreach ($story->translations->where('is_active',1) as $language)
                                        <a href="/story/{{$language->locale}}/{{$story->id}}/{{$story->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>
                            @else
                                <h3 class="text-xl font-bold" @if ($locale=="ar") dir="rtl"
                                    style="text-align: right;" @endif>{{$story->title}}</h3>

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


                            @if ($story->translations->where('is_active',1)->where('locale',$locale)->count()>0)

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

                                    
                                    @if (!$translation->content && ( $translation->shotlist || $translation->more_info))
                                        <div class="nav">


                                            @if ($translation->shotlist && !$translation->more_info)

                                                <label
                                                    @click="activeTab = 0"
                                                    class="tab-control"
                                                    :class="{ 'active': activeTab === 0 }"
                                                >Shotlist</label>

                                                
                                            @endif
                                            @if ($translation->more_info && !$translation->shotlist)
                                                <label
                                                    @click="activeTab = 0"
                                                    class="tab-control"
                                                    :class="{ 'active': activeTab === 0 }"
                                                >More Info</label>
                                            @endif
                                        </div>

                                        @if ($translation->shotlist && !$translation->more_info)

                                            <div class="tab-panel" :class="{ 'active': activeTab === 0 }"
                                                 x-show.transition.in.opacity.duration.600="activeTab === 0">
                                                <div class="content text-base font-normal" @if ($locale=="ar") dir="rtl"
                                                     style="text-align: right;" @endif>
                                                    @if ($translation->is_ai_generated)
                                                        <em>
                                                            ({{\App\Helper::getSetting("AI Generated Notice - ".$locale)}}
                                                            )
                                                        </em>
                                                    @endif

                                                    {!!  \App\Helper::resetStyle($translation->shotlist)!!}


                                                </div>
                                            </div>

                                        @endif

                                        @if ($translation->more_info && !$translation->shotlist)

                                            <div class="tab-panel" :class="{ 'active': activeTab === 0 }"
                                                 x-show.transition.in.opacity.duration.600="activeTab === 0">
                                                <div class="content text-base font-normal" @if ($locale=="ar") dir="rtl"
                                                     style="text-align: right;" @endif>
                                                    @if ($translation->is_ai_generated)
                                                        <em>
                                                            ({{\App\Helper::getSetting("AI Generated Notice - ".$locale)}}
                                                            )
                                                        </em>
                                                    @endif

                                                    {!!  \App\Helper::resetStyle($translation->more_info)!!}


                                                </div>
                                            </div>

                                        @endif

                                    @endif

                                    @if (($translation->shotlist && $translation->content) || ($translation->content && $translation->more_info))
                                        <div class="nav">


                                            <label
                                                @click="activeTab = 0"
                                                class="tab-control"
                                                :class="{ 'active': activeTab === 0 }"
                                            >Story</label>

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

                                            @endif



                                            @if ($translation->more_info)
                                                <label
                                                    @click="activeTab = 2"
                                                    class="tab-control"
                                                    :class="{ 'active': activeTab === 2 }"
                                                >More Info</label>
                                            @endif
                                        </div>

                                    @endif


                                    @if (($translation->shotlist && $translation->content) || ($translation->content && $translation->more_info))

                                        <div class="tab-panel" :class="{ 'active': activeTab === 0 }"
                                             x-show.transition.in.opacity.duration.600="activeTab === 0">
                                            <div class="content text-base font-normal" @if ($locale=="ar") dir="rtl"
                                                 s style="text-align: right;" @endif>
                                                @if ($translation->is_ai_generated)
                                                    <br>
                                                    {!! \App\Helper::getTranslationNotice($locale) !!}

                                                @endif

                                                {!!  \App\Helper::resetStyle($translation->content)!!}


                                            </div>
                                        </div>
                                        @if ($translation->shotlist)
                                            <div class="tab-panel" :class="{ 'active': activeTab === 1 }"
                                                 x-show.transition.in.opacity.duration.600="activeTab === 1">
                                                <div class="content text-base font-normal" @if ($locale=="ar") dir="rtl"
                                                     style="text-align: right;" @endif>
                                                    @if ($translation->is_ai_generated)
                                                        <br>
                                                        {!! \App\Helper::getTranslationNotice($locale) !!}

                                                    @endif


                                                    {!!  \App\Helper::resetStyle($translation->shotlist)!!}


                                                </div>
                                            </div>
                                        @endif


                                        @if ($translation->more_info)
                                            <div class="tab-panel" :class="{ 'active': activeTab === 2 }"
                                                 x-show.transition.in.opacity.duration.600="activeTab === 2">
                                                <div class="content text-base font-normal" @if ($locale=="ar") dir="rtl"
                                                     style="text-align: right;" @endif>


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

                                                    @endif

                                                    {!!  \App\Helper::resetStyle($translation->more_info)!!}


                                                </div>
                                            </div>
                                        @endif

                                    @else

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


                                            <div class="content text-base font-normal" @if ($locale=="ar") dir="rtl"
                                                 style="text-align: right;" @endif>
                                                @if ($translation->is_ai_generated)
                                                    <br>
                                                    {!! \App\Helper::getTranslationNotice($locale) !!}

                                                @endif

                                                {!!  \App\Helper::resetStyle($translation->content)!!}


                                            </div>

                                        @endif

                                        @if ($translation->shotlist && !$displayed_shotlist)

                                            <div class="nav">
                                                <label
                                                    @click="activeTab = 0"
                                                    class="tab-control"
                                                    :class="{ 'active': activeTab === 0 }"
                                                >Shotlist</label>
                                            </div>

                                            <div class="content text-base font-normal" @if ($locale=="ar") dir="rtl"
                                                 style="text-align: right;" @endif>
                                                @if ($translation->is_ai_generated)
                                                    <br>
                                                    {!! \App\Helper::getTranslationNotice($locale) !!}

                                                @endif


                                                {!!  \App\Helper::resetStyle($translation->shotlist)!!}


                                            </div>

                                        @endif
                                    @endif
                                </div>

                            @endif
                        </div>
                    </div>
                </div>
                <div class="lg:max-w-sm w-full shrink-0 bg-white overflow-hidden px-3 lg:px-6 py-2 lg:py-4 space-y-6">


                    @include('layouts.partials.assets')


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

    <section class="bg-white">
        <div class="container mx-auto lg:px-4 px-2 sm:py-16 py-10">
            <div class="flex items-center justify-center gap-2 max-w-sm mx-auto mb-6">
                <div class="w-5 h-5 bg-brand-blue rounded-md"></div>
                <h3 class="text-xl text-center uppercase font-bold tracking-wide">
                    {{ __('Similar Stories') }}
                </h3>
            </div>
            <div class="grid lg:grid-cols-3 md:grid-cols-2 grid-cols-1 md:gap-8 gap-10 sm:mt-16 mt-10">

                @foreach ($similar_stories as $story)

                    <div
                        class="lg:odd:last:col-span-1 md:odd:last:col-span-2">
                        <a href="/story/en/{{$story->id}}/{{$story->slug}}" class="relative inline-block w-full">
                            <div class="aspect-w-5 aspect-h-3">
                                @if ($story->thumbnail)
                                    <img src="{{asset('storage/repository/icons/'.$story->thumbnail)}}"
                                         class="w-full h-full object-cover" alt="{{$story->title}}"/>
                                @else
                                    <img src="{{ asset('front/images/default.png') }}"
                                         class="w-full h-full object-cover" alt="{{$story->title}}"/>

                                @endif
                            </div>
                            <div class="absolute bottom-0 left-0 right-0 p-4">
                                <div class="relative z-10 flex items-center gap-2">

                                    @foreach ($story->categoriesOrder as $category)

                                        @if ($category->category->name=="video" && $story->assets->where('category_id',1)->where('is_active',1)->count()>0)
                                            <div
                                                class="bg-brand-grey w-14 h-8 p-1 flex items-center justify-center gap-2 text-white rounded">
                                                <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"
                                                          d="M15.75 10.5l4.72-4.72a.75.75 0 011.28.53v11.38a.75.75 0 01-1.28.53l-4.72-4.72M4.5 18.75h9a2.25 2.25 0 002.25-2.25v-9a2.25 2.25 0 00-2.25-2.25h-9A2.25 2.25 0 002.25 7.5v9a2.25 2.25 0 002.25 2.25z"/>
                                                </svg>
                                                <p>{{$story->assets->where('category_id',1)->where('is_active',1)->count()}}</p>
                                            </div>
                                        @endif

                                        @if ($category->category->name=="image" && $story->assets->where('category_id',2)->where('is_active',1)->count()>0)
                                            <div
                                                class="bg-brand-grey w-14 h-8 p-1 flex items-center justify-center gap-2 text-white rounded">
                                                <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="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 001.5-1.5V6a1.5 1.5 0 00-1.5-1.5H3.75A1.5 1.5 0 002.25 6v12a1.5 1.5 0 001.5 1.5zm10.5-11.25h.008v.008h-.008V8.25zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z"/>
                                                </svg>
                                                <p>{{$story->assets->where('category_id',2)->where('is_active',1)->count()}}</p>
                                            </div>
                                        @endif

                                        @if ($category->category->name=="document" && $story->assets->where('category_id',3)->count()+1>0)
                                            <div
                                                class="bg-brand-grey w-14 h-8 p-1 flex items-center justify-center gap-2 text-white rounded">
                                                <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="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"/>
                                                </svg>
                                                <p>{{$story->assets->where('category_id',3)->count()+1}}</p>
                                            </div>
                                        @endif


                                        @if ($category->category->name=="audio" && $story->assets->where('category_id',4)->where('is_active',1)->count()>0)
                                            <div
                                                class="bg-brand-grey w-14 h-8 p-1 flex items-center justify-center gap-2 text-white rounded">
                                                <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="M19.114 5.636a9 9 0 010 12.728M16.463 8.288a5.25 5.25 0 010 7.424M6.75 8.25l4.72-4.72a.75.75 0 011.28.53v15.88a.75.75 0 01-1.28.53l-4.72-4.72H4.51c-.88 0-1.704-.507-1.938-1.354A9.01 9.01 0 012.25 12c0-.83.112-1.633.322-2.396C2.806 8.756 3.63 8.25 4.51 8.25H6.75z"/>
                                                </svg>

                                                <p>{{$story->assets->where('category_id',4)->where('is_active',1)->count()}}</p>
                                            </div>
                                        @endif

                                        @if ($category->category->name=="map" && $story->assets->where('category_id',5)->where('is_active',1)->count()>0)
                                            )
                                            <div
                                                class="bg-brand-grey w-14 h-8 p-1 flex items-center justify-center gap-2 text-white rounded">
                                                <svg xmlns="http://www.w3.org/2000/svg" fill="none"
                                                     viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor"
                                                     className="w-6 h-6">
                                                    <path strokeLinecap="round" strokeLinejoin="round"
                                                          d="M9 6.75V15m6-6v8.25m.503 3.498l4.875-2.437c.381-.19.622-.58.622-1.006V4.82c0-.836-.88-1.38-1.628-1.006l-3.869 1.934c-.317.159-.69.159-1.006 0L9.503 3.252a1.125 1.125 0 00-1.006 0L3.622 5.689C3.24 5.88 3 6.27 3 6.695V19.18c0 .836.88 1.38 1.628 1.006l3.869-1.934c.317-.159.69-.159 1.006 0l4.994 2.497c.317.158.69.158 1.006 0z"/>
                                                </svg>

                                                <p>{{$story->assets->where('category_id',5)->where('is_active',1)->count()}}</p>
                                            </div>
                                        @endif

                                    @endforeach


                                </div>
                                <div
                                    class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-75"></div>
                            </div>
                        </a>
                        <div class="space-y-1.5 mt-3">
                            <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>
                            <a href="/story/en/{{$story->id}}/{{$story->slug}}"
                               class="block text-xl font-bold hover:underline transition duration-100 ease-in">
                                {{$story->title}}</a>

                            @foreach ($story->translations->where('is_active',1) as $translation)
                                <a href="/story/{{$translation->locale}}/{{$story->id}}/{{$translation->slug}}">
                                    <span
                                        class="btn btn-brand-blue btn-xs text-xs">
                                        {{$translation->language->shortname}}
                                    </span>
                                </a>
                            @endforeach

                            <p class="text-base font-normal group-hover:underline transition duration-100 ease-in">
                                @if ($story->translations->where('locale', 'en')->first())
                                    {!!  $story->translations->where('locale', 'en')->first()->intro!!}
                                @endif
                            </p>
                        </div>
                    </div>

                @endforeach


            </div>
        </div>
    </section>
@stop

@push('modals')
@endpush

@push('scripts')

    @if ($video)
        <script src="https://code.jquery.com/jquery-3.7.1.min.js"
                integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></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,
                video_id: {{$video->id}},

            });


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

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

            player.on('loadeddata', function () {
                player.loadTracks([
                        @if ($video->subtitle_file && $video->subtitle_published)
                    {
                        kind: "captions",
                        src: "{{asset('storage/repository/subtitles/'.$video->subtitle_file) }}",
                        srclang: "en",
                        label: "English"
                    },
                        @endif

                        @if ($video->subtitle_published)

                        @foreach($video->translations as $caption)
                    {
                        kind: "captions",
                        src: "{{ asset('storage/repository/subtitles/'.$caption->subtitles) }}",
                        srclang: "{{ $caption->language->code }}",
                        label: "{{ $caption->language->name }}"
                    }
                    @if (!$loop->last)
                    ,
                    @endif
                    @endforeach

                    @endif

                ]);
            });


        </script>
        <script>
            $(document).ready(function () {
// Check each span with the class 'vjs-menu-item-text' for the specific text
                $("span.vjs-menu-item-text").each(function () {
                    if ($(this).text().trim() === "Unknown") {
                        $(this).hide(); // Hide the span if it contains 'Unknown'
                    }
                });
            });
        </script>

        <script src="/front/nuevo10/plugins/videojs.events.js"></script>

        <script>
            let videoId = "{{$video->id}}";
        </script>
        <script src="/front/track.js?ts={{time()}}"></script>

    @endif

@endpush