@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" href="{{img_url('w1280', $movie['backdrop_path'], true, 400, 225 )}}" type="image/webp" media="(max-width: 575px)"> --}}
{{-- <link rel="preload" as="image" href="{{img_url('w1280', $movie['backdrop_path'], true, 400, 225 )}}" type="image/webp" media="(max-width: 575px)"> --}}
{{-- <link rel="preload" as="image" href="{{img_url('w1280', $movie['backdrop_path'], true, 400, 225 )}}" type="image/webp" media="(max-width: 575px)"> --}}
<link rel="preload" as="image" type="image/webp" href="{{img_url('w1280', $movie['backdrop_path'], true, 360, 200 )}}" imagesrcset="{{img_url('w1280', $movie['backdrop_path'], true, 360, 200 )}} 360w, {{img_url('w1280', $movie['backdrop_path'], true, 1280, 720 )}} 1280w" imagesizes="70vw, 100vw" fetchpriority="high" />
<style>
    {!! Vite::content('resources/scss/watch.scss') !!}
</style>
@endsection

{{-- @section('head') --}}
{{-- {!! getMovieMarkupData($movie) !!} --}}
{{-- @endsection --}}
@section('app')
<section class="inner-hero bg_img dark--overlay lazy main-watch" data-id="{{ $movie['id'] }}" data-type="movie">
    <figure>
        {{-- @if(isset($movie['backdrop']) && $movie['backdrop'] !== '')
        <source type="image/webp" media="(max-width:767px)" data-src="{{img_url('w1280', $movie['backdrop_path'], true, 400, 225 )}}">
        <source type="image/webp" media="(min-width:768px)" data-src="{{img_url('w1280', $movie['backdrop_path'], true, 1280, 720 )}}">
        @endif --}}
        <img  @if(isset($movie['backdrop']) && $movie['backdrop'] !== '') {{-- src="{{img_url('w1280', $movie['backdrop_path'], true, 360, 200 )}}" --}}  data-srcset="{{img_url('w1280', $movie['backdrop_path'], true, 360, 200 )}} 360w, {{img_url('w1280', $movie['backdrop_path'], true, 1280, 720 )}} 1280w"  class="lazy" @endif width="100%" height="720" alt="{{ str($movie['title'])->apa() }} ({{ $movie['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">{{ str($movie['title'])->apa() }}</h1>
                @if($movie['tagline'])
                <p class="text-center fst-italic fs-5">"{{ $movie['tagline'] }}"</p>
                @endif
                <ul class="page-breadcrumb d-flex justify-content-center">
                    <li><a href="{{route('home')}}" class="">Home</a></li>
                    <li><a href="{{route('movies')}}" class="">Movies</a></li>
                    <li>{{$movie['title']}}</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($movie['title'])->apa() }}</h2>

                                    <span class="sub-title">Type : <span class="cat"><a href="{{route('movies',['page' => null])}}">Movie</a></span>
                                    Category: <a href="{{route('movies.genre',['page' => null, 'genre' => $movie['genres'][0]['slug']])}}">{{ $movie['genres'][0]['name'] }}</a>
                                </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="lar la-star base--color"></i>
                                        <span>{{$movie['vote_average']}}</span>
                                    </span>

                                    <span class="movie-widget">
                                        <i class="lar la-eye color--danger"></i>
                                        <span>{{$movie['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($movie['share']) && is_array($movie['share']))
                                    @foreach ($movie['share'] as $share)

                                    <li data-bs-toggle="tooltip" data-bs-placement="top" title="{{ $share['name'] }}">
                                        <a href="{{ $share['url'] }}" target="_blank"><i class="lab {{ $share['icon'] }}"></i></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>{{ $movie['overview'] }}</p>
                                                <ul class="movie-details-list mt-3">

                                                    <li>
                                                        <span class="caption">Genres:&nbsp</span>
                                                        <span class="value">
                                                            @foreach($movie['genres'] as $genre)
                                                            <a href="{{route('movies.genre', $genre['slug'])}}">{{ $genre['name'] }}</a>@if(!$loop->last), @endif
                                                            @endforeach
                                                        </span>
                                                    </li>
                                                    <li>
                                                        <span class="caption">Language:&nbsp</span>
                                                        <span class="value">
                                                            @foreach($movie['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">
                                                            @foreach($movie['cast'] as $actor)
                                                            {{ $actor['name'] }}@if(!$loop->last), @endif
                                                            @endforeach</span>
                                                        </li>
                                                        <li>
                                                            <span class="caption">Director:</span>
                                                            <span class="value">
                                                                @foreach($movie['crew']['directors'] as $actor)
                                                                {{ $actor['name'] }}@if(!$loop->last), @endif
                                                                @endforeach
                                                            </span>
                                                        </li>
                                                        @unless (empty($movie['crew']['producers']))

                                                        <li>
                                                            <span class="caption">Producer:</span>
                                                            <span class="value">
                                                                @foreach($movie['crew']['producers'] as $actor)
                                                                {{ $actor['name'] }}@if(!$loop->last), @endif
                                                                @endforeach</span>
                                                            </li>
                                                            @endunless


                                                        </ul>
                                                    </div>
                                                </div>
                                            </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 ($movie['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