@extends('layouts.layout')
@section('schema')
@foreach($meta['schema'] as $value)
<script type="application/ld+json">{!!$value!!}</script>
@endforeach
@endsection
@section('head')

<link rel="preload" as="image" type="image/webp" href="{{img_url('w1280', $show['backdrop_path'], true, 360, 200 )}}" imagesrcset="{{img_url('w1280', $show['backdrop_path'], true, 360, 200 )}} 360w, {{img_url('w1280', $show['backdrop_path'], true, 1280, 720 )}} 1280w" imagesizes="70vw, 100vw" fetchpriority="high" />
<style>
    {!! Vite::content('resources/scss/watch.scss') !!}
</style>
@endsection

{{-- @section('head') --}}
{{-- {!! getMovieMarkupData($show) !!} --}}
{{-- @endsection --}}
@section('app')
<section class="inner-hero bg_img dark--overlay lazy main-watch" data-id="{{ $show['id'] }}" data-type="show">
    <figure>
        <img  @if(isset($show['backdrop_path']) && $show['backdrop_path'] !== '') {{-- src="{{img_url('w1280', $show['backdrop_path'], true, 360, 200 )}}" --}}  data-srcset="{{img_url('w1280', $show['backdrop_path'], true, 360, 200 )}} 360w, {{img_url('w1280', $show['backdrop_path'], true, 1280, 720 )}} 1280w"  class="lazy" @endif width="100%" height="720" alt="{{ str($show['title'])->apa() }} ({{ $show['year'] }})" src="data:image/svg+xml,%3Csvg width='1280' height='720' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='1280' height='720' x='0' y='0' fill='%231B1B3F' /%3E%3C/svg%3E" data-sizes="70vw, 100vw">
    </figure>
    <div class="container position-relative">
        <div class="row">
            <div class="col-lg-12">
                <h1 class="text-center">{{ $show['title'] }}</h1>
                @if($show['tagline'])
                <p class="text-center fst-italic fs-5">"{{ $show['tagline'] }}"</p>
                @endif
                <ul class="page-breadcrumb d-flex justify-content-center">
                    <li>
                        <svg class="si base--color me-2">
                            <use href="#si-home"></use>
                        </svg>
                        <a href="{{route('home')}}" class="">Home</a></li>
                    <li><a href="{{route('shows')}}" class="">Series</a></li>
                    <li><a href="{{ url()->current() }}">{{$show['title']}}</a></li>
                </ul>
            </div>
        </div>
    </div>
</section>

<div class="pt-80 pb-80 position-relative">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                        <div class="movie-content">
                            <div class="movie-content-inner d-sm-flex justify-content-between align-items-center flex-wrap">
                                <div class="movie-content-left">
                                    <h2 class="title">Watch {{ str($show['title']) }} @unless($is_show_page)
                                        <span class="ps-3"> - {{ str($episode['name'] ?? $season['name']) }}</span>
                                    @endunless() </h2>

                                    <span class="sub-title">Type : <span class="cat">
                                        @if($episode)
                                            Episode
                                            <span class="ps-2">Season: {{ $episode['season_number'] }}</span>
                                            <span class="ps-2">Episode: {{ $episode['episode_number'] }}</span>
                                        @elseif ($season)
                                            Season
                                            <span class="ps-2">Season: {{ $season['season_number'] }}</span>
                                        @else
                                        <a href="{{route('shows',['page' => null])}}">TV Show</a>
                                        Seasons: {{ count($show['seasons']) }}
                                        @endif
                                    </span>
                                </span>
                            </div>
                            <div class="movie-content-right mt-sm-0 mt-3">
                                <div class="movie-widget-area align-items-center">

                                    <span class="movie-widget">
                                        <i class="base--color">
                                            <svg class="si">
                                                <use href="#si-star"></use>
                                            </svg>
                                        </i>
                                        <span>{{ $episode['vote_average'] ?? $season['vote_average'] ?? $show['vote_average'] }}</span>
                                    </span>

                                    <span class="movie-widget">
                                        <i class="base--color">
                                            <svg class="si">
                                                <use href="#si-star"></use>
                                            </svg>
                                        </i>
                                        <span>{{$show['vote_count']}} views</span>
                                    </span>


                                    <span class="movie-widget addWishlist " data-id="1207" data-type="item"><i class="las la-plus-circle"></i></span>
                                </div>

                                <ul class="title-share d-flex align-items-center justify-content-sm-end justify-content-start flex-wrap">
                                    <li class="caption">Share : </li>

                                    @if (isset($show['share']) && is_array($show['share']))
                                    @foreach ($show['share'] as $share)

                                    <li data-bs-toggle="tooltip" data-bs-placement="top" title="{{ $share['name'] }}">
                                        <a href="{{ $share['url'] }}" target="_blank">
                                            <svg class="si">
                                                <use href="#si-{{ $share['icon'] }}"></use>
                                            </svg>
                                        </a>
                                    </li>
                                    @endforeach
                                    @endif
                                </ul>
                            </div>
                        </div>

                    </div>
                    <div class="movie-details-content">
                        <div class="tab-content" id="myTabContent">
                            <div class="tab-pane fade show active" id="description" role="tabpanel" aria-labelledby="description-tab">
                                <div class="card mb-sm-3 col-12 order-sm-1 order-2 mt-3 p-0">
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col-lg-6">
                                                <h4 class="mb-3">Details</h4>
                                                <p>{{ $episode['overview'] ?? $season['overview'] ?? $show['overview'] }}</p>
                                                <ul class="movie-details-list mt-3">

                                                    <li>
                                                        <span class="caption">Genres:&nbsp</span>
                                                        <span class="value">
                                                            @foreach($show['genres'] as $genre)
                                                            <span>{{ $genre['name'] }}</span>@if(!$loop->last), @endif
                                                            @endforeach
                                                        </span>
                                                    </li>
                                                    <li>
                                                        <span class="caption">Language:&nbsp</span>
                                                        <span class="value">
                                                            @foreach($show['languages'] as $language)
                                                            {{ $language }}@if(!$loop->last), @endif
                                                            @endforeach
                                                        </span>
                                                    </li>
                                                </ul>
                                            </div>
                                            <div class="col-lg-6 mt-lg-0 mt-4">
                                                <h4 class="mb-3">Cast & Crew</h4>
                                                <ul class="movie-details-list">
                                                    <li>
                                                        <span class="caption">Cast:</span>
                                                        <span class="value">
                                                            @if ($episode && !empty($episode['cast']))
                                                                @foreach($episode['cast'] as $actor)
                                                                <a href="{{ route('person', ['person_id' => $actor['id'], 'slug' => $actor['slug']]) }}">{{ $actor['name'] }}</a> @if(!$loop->last), @endif
                                                                @endforeach
                                                            @elseif ($season && !empty($season['cast']) && !$is_show_page)
                                                                @foreach($season['cast'] as $actor)
                                                                <a href="{{ route('person', ['person_id' => $actor['id'], 'slug' => $actor['slug']]) }}">{{ $actor['name'] }}</a> @if(!$loop->last), @endif
                                                                @endforeach
                                                            @else
                                                                @foreach($show['cast'] as $actor)
                                                                <a href="{{ route('person', ['person_id' => $actor['id'], 'slug' => $actor['slug']]) }}">{{ $actor['name'] }}</a> @if(!$loop->last), @endif
                                                                @endforeach
                                                            @endif
                                                        </span>
                                                        </li>
                                                        <li>
                                                            <span class="caption">Creator:</span>
                                                            <span class="value">
                                                                @foreach($show['crew']['creators'] as $actor)
                                                                {{ $actor['name'] }}@if(!$loop->last), @endif
                                                                @endforeach
                                                            </span>
                                                        </li>
                                                        @if (($episode && !empty($episode['crew']['producers'])) || ($season && !empty($season['crew']['producers'])) || empty($show['crew']['producers']))
                                                        <li>
                                                            <span class="caption">Producer:</span>
                                                            <span class="value">
                                                            @if ($episode && !empty($episode['crew']['producers']))
                                                                @foreach($episode['crew']['producers'] as $actor)
                                                                {{ $actor['name'] }}@if(!$loop->last), @endif
                                                                @endforeach
                                                            @elseif ($season && !empty($season['crew']['producers']) && !$is_show_page)
                                                                @foreach($season['crew']['producers'] as $actor)
                                                                {{ $actor['name'] }}@if(!$loop->last), @endif
                                                                @endforeach
                                                            @else
                                                                @foreach($show['crew']['producers'] as $actor)
                                                                {{ $actor['name'] }}@if(!$loop->last), @endif
                                                                @endforeach
                                                            @endif
                                                            </span>
                                                        </li>
                                                        @endif


                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="card col-12 order-sm-2 order-1 p-0">
                                    <div class="card-body p-0">
                                        <div class="slimScrollDiv" style="position: relative; overflow: hidden; width: auto; height: 420px;">
                                            <ul class="movie-small-list movie-list-scroll" style="overflow: hidden; width: auto; height: 420px;">
                                                @foreach ($show['seasons'] as $currentSeason)

                                                <li class="movie-small d-flex align-items-center justify-content-between movie-item__overlay video-item flex-wrap" data-text="Season">

                                                    <div class="caojtyektj d-flex align-items-center flex-wrap">
                                                        <div class="movie-small__thumb">
                                                            <img class="lazy" src="data:image/svg+xml,%3Csvg width='120' height='180' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='120' height='180' x='0' y='0' fill='%231B1B3F' /%3E%3C/svg%3E" data-src="{{ $currentSeason['poster'] }}" alt="image">
                                                        </div>

                                                        <div class="movie-small__content">
                                                            <h5>{{ $currentSeason['name'] }}</h5>
                                                            <a class="base--color" href="{{ route('show.season', ['id' => $show['id'], 'slug' => $show['slug'], 'season' => $currentSeason['season_number']]) }}">Play Now</a>
                                                        </div>
                                                    </div>
                                                    <div class="movie-small__lock">
                                                        <span class="movie-small__lock-icon" style="font-size: 2rem">
                                                            <svg class="si">
                                                                <use href="#si-caret-down"></use>
                                                            </svg>
                                                        </span>
                                                    </div>
                                                </li>
                                                @endforeach
                                            </ul>
                                            <div class="slimScrollBar" style="background: rgb(0, 0, 0); width: 7px; position: absolute; top: 0px; opacity: 0.4; display: none; border-radius: 7px; z-index: 99; right: 1px; height: 110px;"></div><div class="slimScrollRail" style="width: 7px; height: 100%; position: absolute; top: 0px; display: none; border-radius: 7px; background: rgb(51, 51, 51); opacity: 0.2; z-index: 90; right: 1px;"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>

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

            <section class="movie-section pb-80 position-relative">
                <div class="container">
                    <div class="row">
                        <div class="col-xl-12">
                            <div class="section-header">
                                <h3 class="section-title">Similar Titles</h3>
                            </div>
                        </div>
                    </div>
                    <div class="row justify-content-center mb-30-none">
                        @foreach ($show['similar'] as $item)
                        @include('components.title_card', ['data_text' => ucfirst($item['type'])])
                        @endforeach
                    </div>
                </div>
            </section>


            @endsection
            @section('footer')
            @vite(['resources/js/watch.js'])

            @endsection

@section('content')
<nav aria-label="breadcrumb">
    <ol class="breadcrumb mt-3">
        <li class="breadcrumb-item">
            <a href="{{route('home')}}">Home</a>
        </li>
        <li class="breadcrumb-item">
            <a href="{{route('shows')}}">TV Series</a>
        </li>
        @if($season)
        <li class="breadcrumb-item">
            <a href="{{route('show', ['slug' => $show['slug'], 'id' => $show['id']])}}">{{$show['title']}}</a>
        </li>
        <li class="breadcrumb-item active" aria-current="page">
            <a href="{{route('show.season', ['slug' => $show['slug'], 'id' => $show['id'], 'season' => $season['season_number']])}}">{{$season['name']}}</a>
        </li>
        @else
        <li class="breadcrumb-item active" aria-current="page">
            <a href="{{route('movie', ['slug' => $show['slug'], 'id' => $show['id']])}}">{{$show['title']}}</a>
        </li>
        @endif
    </ol>
</nav>
<div class="card my-2 border-0 shadow">
    <div class="card-header bg-primary">
        <h1 class="fs-5 fw-bold text-white text-center mb-0">{{$show['title']}}@if($season) - {{$season['label']}}@endif</h1>
    </div>
    <div class="card-body">
        <div class="row">
            <div class="col-12 col-lg-4 text-center">
                <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMzAgMzQ1Ij48cGF0aCBmaWxsPSIjMzczNDM1IiBkPSJNMCAwaDIzMHYzNDVIMFYwWiIvPjwvc3ZnPg==" data-src="{{ $season['poster'] ?? $show['poster'] }}" alt="{{ $show['title'] ?? ''}}" width="220" height="330" class="lazy img-fluid rounded"/>
            </div>
            <div class="col-12 col-lg-8">
                <div class="row">
                    <p class="text mt-2">{{ $season['overview'] ?? $show['overview']}}</p>
                    <p class="mb-1"><span class="fw-bold">Aired:</span>
                        <span class="ml-2"> {{ $season['air_date'] ?? $show['first_air_date']}}</span>
                    </p>

                    <p class="mb-1"><span class="fw-bold">Rating:</span>
                        <span class="ml-2"> {{$season['vote_average'] ?? $show['vote_average']}}</span>
                    </p>
                    @if($show['runtime'] )
                    <p class="mb-1"><span class="fw-bold">Duration:</span>
                        <span class="ml-2"> {{$show['runtime']}}</span>
                    </p>
                    @endif
                    <p class="mb-1"><span class="fw-bold">Actors:</span>
                        @foreach($show['cast'] as $actor)
                        {{ $actor['name'] }}@if(!$loop->last), @endif
                        @endforeach
                    </p>
                    {{-- <p class="mb-1"><span class="fw-bold">Creators:</span>
                        @foreach($show['crew'] as $actor)
                        {{ $actor['name'] }}@if(!$loop->last), @endif
                        @endforeach
                    </p> --}}
                    @isset($show['genres'])
                    <p class="mb-1"><span class="fw-bold pe-2">Genres:</span>
                        @foreach($show['genres'] as $genre)
                        <span>{{ $genre['name'] }}</span>@if(!$loop->last), @endif
                        @endforeach
                    </p>
                    @endisset
                    @isset($show['keywords'])
                    <p class="mb-1"><span class="fw-bold">Tags:</span>

                        @foreach($show['keywords'] as $keyword)
                        {{ $keyword['name'] }}@if(!$loop->last), @endif
                        @endforeach
                    </p>
                    @endisset
                </div>
            </div>
        </div>
    </div>

</div>
<div class="card my-5 border-0 shadow">
    <div class="card-header bg-primary">
        <h3 class="fs-5 fw-bold text-white text-center mb-0">Seasons ({{ count($show['seasons']) }})</h3>
    </div>
    <div class="card-body">
        <div class="flex d-inline-flex gap-2 flex-wrap">

            @foreach($show['seasons'] as $season_item)
            <a href="{{ route('show.season', ['id' => $show['id'], 'slug' => $show['slug'], 'season' => $season_item['season_number']]) }}" class="@if($season && $season_item['season_number'] === $season['season_number']) active @endif btn btn-primary">{{$loop->iteration}}. {{ $season_item['name'] }}</a>
            @endforeach
        </div>
    </div>
</div>
@if($season)
<div class="card my-5 border-0 shadow">
    <div class="card-header bg-primary">
        <h3 class="fs-5 fw-bold text-white text-center mb-0">Episodes ({{ count($season['episodes']) }})</h3>
    </div>
    <div class="card-body">
        <div class="flex d-inline-flex gap-2 flex-wrap">

            @foreach($season['episodes'] as $season_item)
            <span class="btn btn-primary">{{$loop->iteration}}. {{ $season_item['name'] }}</span>
            @endforeach
        </div>
    </div>
</div>
@endif

<div class="card my-4 border-0 shadow">
    <div class="card-header bg-primary">
        <h2 class="fs-5 fw-bold text-white text-uppercase mb-0">You may also like</h2>
    </div>
    <div class="card-body">
        <div class="row row-cols-2 row-cols-sm-4 row-cols-lg-6 row-cols-xl-8 g-4">
            @foreach ($show['similar'] as $item)
            {{-- @include('components.show_card') --}}
            @endforeach

        </div>
    </div>
</div>
<div class="card my-4 border-0 shadow">
    <div class="card-header bg-primary">
        <h2 class="fs-5 fw-bold text-white text-uppercase mb-0">Latest Series Updates</h2>
    </div>
    <div class="card-body">
        <div class="row row-cols-2 row-cols-sm-4 row-cols-lg-6 row-cols-xl-8 g-4">
            {{-- @foreach ($airing as $item)
            @include('components.show_card')
            @endforeach --}}

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





{{-- @include('components.modal', ['backdrop' => $backdrop, 'url_redirect_loading' => $url_redirect_loading, 'title' => $show->title, 'poster_path' => $show->poster_path]) --}}
@endsection @section('footer')


@endsection