@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'] }}" --}} >
                <figure style=" z-index:-1;position:absolute; top:0; min-width:100vw; height:100%; width:100%">

                    <img style="object-fit: cover; object-position: center; z-index:-1;position:relative; 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">
                </figure>
                {{-- <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>
<div class="sources" style="width:95%;margin:0 auto;margin-bottom:10px">
<h2 style="text-align:center">123movies</h2>
<p>123movies uses a collection of various sources available online to watch legal movies and TV shows online. The sources you'll find on 123movies are for free with ads, subscription, rentals, and purchase. They are all provided by the <a href="https://streamboat.net">Streamboat</a> API, which also provides other info, videos, and images to 123movies.
</b>
Some of the top sources used on 123movies as of 2024 are:

<ul class="link-list">
      <li><a href="https://netflix.com">Netflix</a></li>
	<p>Netflix is the most popular streaming platform in the entire world and offers a massive library of some of the most popular movies and TV series online today. If you don't already have Netflix we definitely recommend you sign up for a subscription!</p>
      <li><a href="https://primevideo.com">Prime Video</a></li>
	<p>Prime Video is not only a top selection for the latest movies & shows online, but also comes with the Amazon Prime benefits like free 2 day shipping on Prime items, and decreased pricing on Prime eligible items. While more streaming may take place on Netflix, far more people have an Amazon Prime account throughout the world, just make sure you make use of Prime Video if you haven't already.</p>
      <li><a href="https://freevee.com">Freevee</a></li>
	<p>Freevee is the free service from Amazon that is ad based. It's titles cannot be watched without ads no matter what but it has an amazing selection of free content, and you can easily find all of it on 123movies.onl.</p>
      <li><a href="https://pluto.tv">Pluto TV</a></li>
	<p>Pluto TV is another free, ad-based, movie and TV service that has a large selection. Offering both an extensive movie collection with a great TV library, it's one of the best free sources to watch online.</p>
     <li><a href="https://disneyplus.com">Disney+</a></li>
        <p>Disney+ is becoming a combination of many of your favorite OTT apps. With Disney's recent purchase of Fox, it now has control of hulu, which makes it easy to combine these services at a discounted price, for a little more you can add on ESPN+, which will give you all the sports, kids content, and adult movies and shows that you'll need.</p>
</ul>

</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