@extends('includes.layouts')

@section('content')
    <section class="banner-container iq-rtl-direction">
        <div class="movie-banner  tvshows-slider">
            <div  class="swiper-banner-container" data-swiper="banner-detail-slider">
                <div class="swiper-wrapper">
                    @foreach($banner_shows as $banner_show)
                        <div class="swiper-slide show-banner-2 swiper-bg" style="background-image: url({{ $banner_show->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_show->title }}</h1>
                                        <div class="flex-wrap align-items-center fadeInLeft animated" data-animation-in="fadeInLeft" style="opacity: 1;">
                                            @if($banner_show->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_show->imdb_rating }}/10
                                                    </ul>
                                                </div>
                                            @endif
                                            <div class="d-flex align-items-center movie-banner-time">
                                                <span class="trending-year">{{ $banner_show->nb_seasons }} @if($banner_show->nb_seasons <= 1) Saison @else Saisons @endif</span>
                                                <span class="mx-2 mx-md-3"><i class="ri-checkbox-blank-circle-fill"></i></span>
                                                <span class="badge badge-secondary p-2">{{ $banner_show->rated }}</span>
                                            </div>
                                            <p class="movie-banner-text" data-animation-in="fadeInUp" data-delay-in="1.2">{{ $banner_show->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('showdetails', ['show' => $banner_show->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>

    <div class="main-content">
        @if($tendency_shows->count())
            <section id="iq-favorites">
                <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 ">Séries TV Populaires</h4>
                                <a href="{{ route('all.shows') }}" 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_shows as $tendency_show)
                                    <li class="swiper-slide slide-item">
                                        <div class="block-images position-relative ">
                                            <div class="img-box">
                                                <img src="@if($tendency_show->image) {{ $tendency_show->image }} @else {{ asset('images/01.jpg') }} @endif" class="img-fluid" alt="" loading="lazy">
                                            </div>
                                            <div class="block-description">
                                                <h6 class="iq-title"><a href="{{ route('showdetails', ['show' => $tendency_show->id]) }}">{{ $tendency_show->title }}</a></h6>
                                                <div class="movie-time d-flex align-items-center my-2">
                                                    <span class="text-white">{{ $tendency_show->duration }}</span>
                                                </div>
                                                <div class="hover-buttons">
                                                    <a href="{{ route('showdetails', ['show' => $tendency_show->id]) }}" role="button" class="btn btn-hover">
                                                        <i class="fa fa-play mr-1" aria-hidden="true"></i>
                                                        Jouer
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                @endforeach
                            </ul>
                            <div class="swiper-button-prev"></div>
                            <div class="swiper-button-next"></div>
                        </div>
                    </div>
                </div>
            </section>
        @endif
        @if($new_shows->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">Séries TV Récentes</h4>
                                <a href="{{ route('all.shows') }}" 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_shows as $new_show)
                                    <li class="swiper-slide slide-item">
                                        <div class="block-images position-relative ">
                                            <div class="img-box">
                                                <img src="@if($new_show->image) {{ $new_show->image }} @else {{ asset('images/01.jpg') }} @endif" loading="lazy" class="img-fluid" alt="">
                                            </div>
                                            <div class="block-description">
                                                <h6 class="iq-title"><a href="{{ route('showdetails', ['show' => $new_show->id]) }}">{{ $new_show->title }}</a></h6>
                                                <div class="movie-time d-flex align-items-center my-2">
                                                    <span class="text-white">{{ $new_show->duration }}</span>
                                                </div>
                                                <div class="hover-buttons">
                                                    <a href="{{ route('showdetails', ['show' => $new_show->id]) }}" role="button" class="btn btn-hover"><i class="fa fa-play mr-1" aria-hidden="true"></i>
                                                        Jouer
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                @endforeach
                            </ul>
                            <div class="swiper-button-prev"></div>
                            <div class="swiper-button-next"></div>
                        </div>
                    </div>
                </div>
            </section>
        @endif
    </div>
@endsection