@extends('layouts.layout')

@push('head')
<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)
            <div class="movie-slide lazy bg_img" data-bg="{{ $slider['backdrop'] }}" >
                <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">
                        {{-- @if ($slider->item->item_type == 3) --}}
                            <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>
@vite(['resources/js/home.js'])
@endsection