@extends('layouts.layout')

@push('head')
<link href="{{ asset('css/vendor/animate.min.css') }}" rel="stylesheet">
{{-- <link href="{{ asset('css/vendor/nice-select.css') }}" rel="stylesheet"> --}}
<link href="{{ asset('css/vendor/slick.css') }}" rel="stylesheet">
@endpush

@section('app')


    <section class="hero">
    <div class="hero__slider">
        @foreach ($hero as $slider)
        {{-- {{dd($slider)}} --}}
            {{-- @if ($slider->caption_show != 1)
                <div class="single-slide">
                    <a href="{{ route('watch', $slider->item->id) }}">
                        <img src="{{ getImage(getFilePath('slider') . '/' . $slider->image) }}" alt="hero-image">
                    </a>
                </div>
            @else --}}
                <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="fas fa-star color--glod"></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">
                                        <i class="fas fa-play"></i>
                                    </div>
                                    <span>@lang('Watch')</span>
                                </a>
                            {{-- @else
                                <a class="video-btn justify-content-lg-start justify-content-center" href="/">
                                    <div class="icon">
                                        <i class="fas fa-play"></i>
                                    </div>
                                    <span>@lang('Watch Now')</span>
                                </a>
                            @endif --}}
                        </div>
                    </div>
                </div>
            {{-- @endif --}}
        @endforeach
    </div>
</section>
@include('sections.featured', ['items' => $trending_movies, 'title' => 'Featured Items'])

<div class="sections">
    @include('sections.single', ['item' => $trending_movies[2]])
    @include('sections.items', ['items' => $popular_movies, 'title' => 'Popular Movies'])
    @include('sections.single', ['item' => $trending_movies[3]])
    @include('sections.top', ['col1_title' => 'Trending Videos', 'col1_items' => collect($trending_movies)->take(4), 'col2_title' => 'Top Rated', 'col2_items' => collect($trending_shows)->take(4), 'item' => $trending_movies[4]])
    @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 type="module" src="{{ asset('js/vendor/wow.min.js') }}"></script>
@endsection