@extends('layouts.layout')

@push('head')
<link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin>
@if(!empty($hero))
{{-- <link rel="preload" as="image" type="image/webp" href="{{ $hero[0]['backdrop'] }}" fetchpriority="high" /> --}}
<link rel="preload" as="image" type="image/webp" href="{{img_url('w1280', $hero[0]['backdrop_path'], true, 360, 200 )}}" imagesrcset="{{img_url('w1280', $hero[0]['backdrop_path'], true, 360, 200 )}} 360w, {{img_url('w1280', $hero[0]['backdrop_path'], true, 1280, 720 )}} 1280w" imagesizes="70vw, 100vw" fetchpriority="high" />
{{-- <link rel="preload" as="image" type="image/webp" href="{{img_url('w1280', $hero[1]['backdrop_path'], true, 360, 200 )}}" imagesrcset="{{img_url('w1280', $hero[1]['backdrop_path'], true, 360, 200 )}} 360w, {{img_url('w1280', $hero[1]['backdrop_path'], true, 1280, 720 )}} 1280w" imagesizes="70vw, 100vw" fetchpriority="high" /> --}}
@endif
<style>
    {!! Vite::content('resources/scss/home.scss') !!}
    {!! Vite::content('resources/scss/animate.scss') !!}
</style>
{{-- @vite(['resources/scss/animate.scss']) --}}

@endpush

@section('app')


    <section class="hero">
    <div class="hero__slider">
        @foreach ($hero as $slider)
            {{-- @dd($slider) --}}
            <div class="movie-slide"{{--  data-bg="{{ $slider['backdrop'] }}" --}} >
                <img style="object-fit: cover; object-position: center; z-index:-1;position:absolute; width: 100%; height:100%; pointer-events: none;"  @if(isset($slider['backdrop']) && $slider['backdrop'] !== '') {{-- src="{{img_url('w1280', $hero[0]['backdrop_path'], true, 360, 200 )}}" --}}  data-srcset="{{img_url('w1280', $slider['backdrop_path'], true, 360, 200 )}} 360w, {{img_url('w1280', $slider['backdrop_path'], true, 1280, 720 )}} 1280w"  class="lazy" @endif width="100%" height="720" alt="{{ str($slider['title'])->apa() }} ({{ $slider['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">
                {{-- <img style="object-fit: cover; object-position: center; z-index:-1;position:absolute; width: 100%; height:100%; pointer-events: none;" alt="{{ __($slider['title']) }} image" class="lazy" data-lazy="{{ $slider['backdrop'] }}" width="780" height="439" src="data:image/svg+xml,%3Csvg width='780' height='439' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='780' height='439' x='0' y='0' fill='%231B1B3F' /%3E%3C/svg%3E"> --}}
                <div class="movie-slide__content">
                    <h2 class="movie-name" data-animation="fadeInUp" data-delay=".2s">{{ __($slider['title']) }}</h2>
                    <ul class="movie-meta justify-content-lg-start justify-content-center" data-animation="fadeInUp" data-delay=".4s">
                        @if($slider['vote_average'] && $slider['vote_average'] != 0)
                        <li><i class="color--glod">
                            <svg class="si">
                                <use href="#si-star-fill"></use>
                            </svg>
                        </i> <span>({{$slider['vote_average'] ?? 'NA'}})</span></li>
                        @endif
                        @foreach($slider['genres'] as $genre)
                        <li><span>{{ $genre['name'] }}</span></li>
                        @endforeach
                    </ul>
                    <p data-animation="fadeInUp" data-delay=".7s">{{ __($slider['overview']) }}</p>
                    <div class="btn-area justify-content-lg-start justify-content-center align-items-center mt-lg-5 mt-sm-3 mt-2" data-animation="fadeInLeft" data-delay="1s">
                        <a class="video-btn justify-content-lg-start justify-content-center" href="{{ route('movie', ['slug' => $slider['slug'], 'id' => $slider['id']]) }}">
                            <div class="icon">
                                <svg class="si">
                                    <use href="#si-play"></use>
                                </svg>
                            </div>
                            <span>@lang('Watch')</span>
                        </a>
                    </div>
                </div>
            </div>
        @endforeach
    </div>
</section>
@include('sections.featured', ['items' => $trending_movies, 'title' => 'Featured'])

<div class="sections">
    @include('sections.single', ['item' => $trending_movies[6]])
    @include('sections.items', ['items' => $popular_movies, 'title' => 'Popular Movies'])
    @include('sections.single', ['item' => $trending_movies[3]])
    @include('sections.top', ['col1_title' => 'Top Movies', 'col1_items' => collect($trending_movies)->take(4), 'col2_title' => 'Top Series', 'col2_items' => collect($trending_shows)->take(4), 'item' => $trending_movies[2]])
    @include('sections.trailers')
    @include('sections.single', ['item' => $trending_movies[5]])

</div>


@endsection


@section('footer')
{{-- <script type="module" src="{{ asset('js/vendor/slick.min.js') }}"></script> --}}
<script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
@vite(['resources/js/home.js'])
@endsection