@extends('includes.layouts')

@section('content')
    @if($banner_movies->count())
        <section class="banner-container">
            <div class="movie-banner tvshows-slider">
                <div class="swiper-banner-container iq-rtl-direction" data-swiper="banner-detail-slider">
                    <div class="swiper-wrapper">
                        @foreach($banner_movies as $k => $banner_movie)
                            <div class="swiper-slide movie-banner-{{ $k }} swiper-bg" style="background-image: url({{ $banner_movie->banner }})">
                                <div class="shows-content h-100">
                                    <div class="row align-items-center h-100" >
                                        <div class="col-lg-7 col-md-12">
                                            <h1 class="slider-text big-title title text-uppercase" data-animation-in="fadeInLeft"
                                                data-delay-in="0.6">{{ $banner_movie->title }}</h1>
                                            <div class="flex-wrap align-items-center fadeInLeft animated" data-animation-in="fadeInLeft" style="opacity: 1;">
                                                @if($banner_movie->imdb_rating)
                                                    <div class="slider-ratting d-flex align-items-center">
                                                        <ul class="ratting-start p-0 m-0 list-inline text-primary d-flex align-items-center justify-content-left">
                                                            <li><i class="fa fa-star" aria-hidden="true"></i></li> {{ $banner_movie->imdb_rating }}/10
                                                        </ul>
                                                    </div>
                                                @endif
                                                <div class="d-flex align-items-center movie-banner-time">
                                                    <span class="badge badge-secondary p-2">{{ $banner_movie->rated }}</span>
                                                    @if($banner_movie->duration)
                                                        <span class="mx-3"><i class="ri-checkbox-blank-circle-fill"></i></span>
                                                        <span class="trending-time">{{ $banner_movie->duration }}</span>
                                                    @endif
                                                    <span class="mx-3"><i class="ri-checkbox-blank-circle-fill"></i></span>
                                                    <span class="ml-4 trending-year">{{ $banner_movie->release_year }}</span>
                                                </div>
                                                <p class="movie-banner-text" data-animation-in="fadeInUp" data-delay-in="1.2">{{ $banner_movie->description }}</p>
                                            </div>
                                            <div class="d-flex align-items-center r-mb-23" data-animation-in="fadeInUp" data-delay-in="1.2">
                                                <a href="{{ route('moviedetails', ['movie' => $banner_movie->id]) }}" class="btn btn-hover iq-button"><i class="fa fa-play mr-2" aria-hidden="true"></i>Jouer</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                    <div class="swiper-banner-button-next ">
                        <i class="ri-arrow-left-s-line arrow-icon"></i>
                    </div>
                    <div class="swiper-banner-button-prev">
                        <i class="ri-arrow-right-s-line arrow-icon"></i>
                    </div>
                </div>
            </div>
        </section>
    @endif


    <div class="main-content">
        @if($tendency_movies->count())
            <section id="iq-favorites" class="iq-rtl-direction">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-sm-12 overflow-hidden">
                            <div class="d-flex align-items-center justify-content-between">
                                <h4 class="main-title">Films populaires
                                </h4>
                                <a href="{{ route('all.movies') }}" class="text-primary iq-view-all">Voir Tout</a>
                            </div>
                        </div>
                    </div>
                    <!-- Swiper -->
                    <div class="favourite-slider">
                        <div  class="swiper pt-2 pt-md-4 pt-lg-4 iq-rtl-direction" data-swiper="common-slider">
                            <ul class="swiper-wrapper m-0 p-0">
                                @foreach($tendency_movies as $tendency_movie)
                                    @if($tendency_movie->image)
                                        <li class="swiper-slide slide-item">
                                            <div class="block-images position-relative">
                                                <div class="img-box">
                                                    <img src="@if($tendency_movie->image) {{ $tendency_movie->image }} @else {{ asset('images/01.jpg') }} @endif" class="img-fluid" alt="">
                                                </div>
                                                <div class="block-description">
                                                    <h6 class="iq-title"><a href="{{ route('moviedetails', ['movie' => $tendency_movie->id]) }}">{{ $tendency_movie->title }}</a></h6>
                                                    <div class="movie-time d-flex align-items-center my-2">
                                                        <span class="text-white">{{ $tendency_movie->duration }}</span>
                                                    </div>
                                                    <div class="hover-buttons">
                                                        <a href="{{ route('moviedetails', ['movie' => $tendency_movie->id]) }}" role="button" class="btn btn-hover">
                                                            <i class="fa fa-play mr-1" aria-hidden="true"></i>
                                                            Jouer
                                                        </a>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                    @endif
                                @endforeach
                            </ul>
                            <div class="swiper-button-prev"></div>
                            <div class="swiper-button-next"></div>
                        </div>
                    </div>
                </div>
            </section>
        @endif

        @if($new_movies->count())
            <section id="iq-upcoming-movie" class="iq-rtl-direction">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-sm-12 overflow-hidden">
                            <div class="d-flex align-items-center justify-content-between">
                                <h4 class="main-title">Films spéciaux et récents
                                </h4>
                                <a href="{{ route('all.movies') }}" class="text-primary iq-view-all">Voir Tout</a>
                            </div>
                        </div>
                    </div>
                    <!-- Swiper -->
                    <div class="favourite-slider">
                        <div  class="swiper pt-2 pt-md-4 pt-lg-4 iq-rtl-direction" data-swiper="common-slider">
                            <ul class="swiper-wrapper m-0 p-0">
                                @foreach($new_movies as $new_movie)
                                    @if($new_movie->image)
                                        <li class="swiper-slide slide-item">
                                            <div class="block-images position-relative ">
                                                <div class="img-box">
                                                    <img src="@if($new_movie->image) {{ $new_movie->image }} @else {{ asset('images/01.jpg') }} @endif" class="img-fluid" alt="">
                                                </div>
                                                <div class="block-description">
                                                    <h6 class="iq-title"><a href="{{ route('moviedetails', ['movie' => $new_movie->id]) }}">{{ $new_movie->title }}</a></h6>
                                                    <div class="movie-time d-flex align-items-center my-2">
                                                        <span class="text-white">{{ $new_movie->duration }}</span>
                                                    </div>
                                                    <div class="hover-buttons">
                                                        <a href="{{ route('moviedetails', ['movie' => $new_movie->id]) }}" role="button" class="btn btn-hover">
                                                            <i class="fa fa-play mr-1" aria-hidden="true"></i>
                                                            Jouer
                                                        </a>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                    @endif
                                @endforeach
                            </ul>
                            <div class="swiper-button-prev"></div>
                            <div class="swiper-button-next"></div>
                        </div>
                    </div>
                </div>
            </section>
        @endif
    </div>
@endsection