@extends('frontend.layout.layout')
@section('content')
    @include('frontend.toslider.toslider')
    <div class="main-content">
        <section class="mb-5 popular-seasons">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-3 col-lg-3  d-flex flex-column  justify-content-center align-items-center">
                        <h3 class="text-center">Popular Seasons </h3>
                        <p class="border border-top-0 border-left-0 border-right-0 border-bottom-secondary mt-3">Most
                            Watched Seasons By Day</p>
                        <span class="text-secondary mt-3">View All <i class="fas fa-chevron-right"></i> </span>
                    </div>
                    @if(isset($popular_show))
                        @foreach($popular_show as $show)
                            <div class="col-md-3 col-lg-3">
                                <li class="slide-item" style="list-style-type:none;">
                                    <div class="block-images position-relative">
                                        <div class="img-box">
                                            <img src="{{Storage::disk('Wasabi')->exists('lg/'.$show->portrait_image) ? Storage::disk('Wasabi')->url('lg/'.$show->portrait_image) : asset('frontend/images/favorite/poster1.jpg')}}"
                                                 class="img-fluid" alt="">
                                        </div>
                                        <div class="block-description">

                                            <h6 class="iq-title"><a href="{{route('showdetails',['slug'=>$show->id])}}">{{$show->title}}</a></h6>
                                            <div class="movie-time d-flex align-items-center my-2">
                                                <div class="badge badge-secondary p-1 mr-2">{{$show->title}}+</div>
                                                <span class="text-white">2h 30m</span>
                                            </div>
                                            <div class="hover-buttons">
                                                <a href="{{route('showdetails',['slug'=>$show->id])}}">
                                        <span class="btn btn-hover iq-button"><i class="fa fa-play mr-1"
                                                                                 aria-hidden="true"></i>
                                            Play Now</span>

                                                </a>
                                            </div>
                                        </div>
                                        <div class="block-social-info">
                                            <ul class="list-inline p-0 m-0 music-play-lists">
                                                <a data-toggle="ViewSHowDetail" href="{{route('showInfo',$show->id)}}">
                                                    <li role="button">
                                                        <span><i class="fas fa-info-circle"></i></span>
                                                        <!-- <span class="count-box">19+</span> -->
                                                    </li>
                                                </a>
                                                <li><span><i class="fas fa-thumbs-up"></i></span>
                                                    <span class="count-box">{{$show->maturity_level}}+</span>
                                                </li>
                                                <li><span><i class="ri-add-line"></i></span></li>
                                            </ul>
                                        </div>
                                    </div>
                                </li>
                            </div>
                        @endforeach
                    @else
                        <div class="col-md-3 col-lg-3">
                            <li class="slide-item" style="list-style-type:none;">
                                <div class="block-images position-relative">
                                    <div class="img-box">
                                        <img src="{{asset('frontend/images/favorite/poster1.jpg')}}" class="img-fluid" alt="">
                                    </div>
                                    <div class="block-description">
                                        <h6 class="iq-title"><a href="{{route('showdetails')}}">Inside the Sea</a></h6>
                                        <div class="movie-time d-flex align-items-center my-2">
                                            <div class="badge badge-secondary p-1 mr-2">11+</div>
                                            <span class="text-white">2h 30m</span>
                                        </div>
                                        <div class="hover-buttons">
                                            <a href="{{route('showdetails')}}">
                                        <span class="btn btn-hover iq-button"><i class="fa fa-play mr-1"
                                                                                 aria-hidden="true"></i>
                                            Play Now</span>

                                            </a>
                                        </div>
                                    </div>
                                    <div class="block-social-info">
                                        <ul class="list-inline p-0 m-0 music-play-lists">
                                            <li data-toggle="modal" data-target="#exampleModalCenter" role="button">
                                                <span><i class="fas fa-info-circle"></i></span>
                                                <!-- <span class="count-box">19+</span> -->
                                            </li>
                                            <li><span><i class="fas fa-thumbs-up"></i></span>
                                                <span class="count-box">19+</span>
                                            </li>
                                            <li><span><i class="ri-add-line"></i></span></li>
                                        </ul>
                                    </div>
                                </div>
                            </li>
                        </div>
                    @endif
                </div>
            </div>
        </section>

        <section id="iq-upcoming-movie">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-sm-12 overflow-hidden">
                        <div class="iq-main-header d-flex align-items-center justify-content-between">
                            <h4 class="main-title">Tailored Recommendations</h4>
                        </div>
                        <div class="suggestede-contens">
                            <ul class="list-inline favorites-slider row p-0 mb-0">
                                <li class="slide-item">

                                    <div class="block-images position-relative">
                                        <div class="img-box">
                                            <img src="{{asset('frontend/images/suggested/01.jpg')}}" class="img-fluid"
                                                 alt="">
                                        </div>
                                        <div class="block-description">
                                            <h6 class="iq-title"><a href="show-details.php">Inside the Sea</a></h6>
                                            <div class="movie-time d-flex align-items-center my-2">
                                                <div class="badge badge-secondary p-1 mr-2">11+</div>
                                                <span class="text-white">2h 30m</span>
                                            </div>
                                            <div class="hover-buttons">
                                                <a href="show-details.php">
                                                <span class="btn btn-hover iq-button"><i class="fa fa-play mr-1"
                                                                                         aria-hidden="true"></i>
                                                    Play Now</span>

                                                </a>
                                            </div>
                                        </div>
                                        <div class="block-social-info">
                                            <ul class="list-inline p-0 m-0 music-play-lists">
                                                <li data-toggle="modal" data-target="#exampleModalCenter" role="button">
                                                    <span><i class="fas fa-info-circle"></i></span>
                                                    <!-- <span class="count-box">19+</span> -->
                                                </li>
                                                <li><span><i class="fas fa-thumbs-up"></i></span>
                                                    <span class="count-box">19+</span>
                                                </li>
                                                <li><span><i class="ri-add-line"></i></span></li>
                                            </ul>
                                        </div>
                                    </div>

                                </li>
                                <li class="slide-item">

                                    <div class="block-images position-relative">
                                        <div class="img-box">
                                            <img src="{{asset('frontend/images/suggested/02.jpg')}}" class="img-fluid"
                                                 alt="">
                                        </div>
                                        <div class="block-description">
                                            <h6 class="iq-title"><a href="show-details.php">Jumbo Queen</a></h6>
                                            <div class="movie-time d-flex align-items-center my-2">
                                                <div class="badge badge-secondary p-1 mr-2">9+</div>
                                                <span class="text-white">2 Seasons</span>
                                            </div>
                                            <div class="hover-buttons">
                                                <a href="show-details.php">
                                                <span class="btn btn-hover iq-button "><i class="fa fa-play mr-1"
                                                                                          aria-hidden="true"></i>
                                                    Play Now</span>

                                                </a>
                                            </div>
                                        </div>
                                        <div class="block-social-info">
                                            <ul class="list-inline p-0 m-0 music-play-lists">

                                                <li data-toggle="modal" data-target="#exampleModalCenter" role="button">
                                                    <span><i class="fas fa-info-circle"></i></span>
                                                    <!-- <span class="count-box">19+</span> -->
                                                </li>
                                                <li><span><i class="fas fa-thumbs-up"></i></span>
                                                    <span class="count-box">19+</span>
                                                </li>
                                                <li><span><i class="ri-add-line"></i></span></li>
                                            </ul>
                                        </div>
                                    </div>

                                </li>
                                <li class="slide-item">

                                    <div class="block-images position-relative">
                                        <div class="img-box">
                                            <img src="{{asset('frontend/images/suggested/03.jpg')}}" class="img-fluid"
                                                 alt="">
                                        </div>
                                        <div class="block-description">
                                            <h6 class="iq-title"><a href="show-details.php">Unknown Land</a></h6>
                                            <div class="movie-time d-flex align-items-center my-2">
                                                <div class="badge badge-secondary p-1 mr-2">17+</div>
                                                <span class="text-white">2h 30m</span>
                                            </div>
                                            <div class="hover-buttons">
                                                <a href="show-details.php">
                                                <span class="btn btn-hover iq-button"><i class="fa fa-play mr-1"
                                                                                         aria-hidden="true"></i>
                                                    Play Now</span>

                                                </a>
                                            </div>
                                        </div>
                                        <div class="block-social-info">
                                            <ul class="list-inline p-0 m-0 music-play-lists">
                                                <li data-toggle="modal" data-target="#exampleModalCenter" role="button">
                                                    <span><i class="fas fa-info-circle"></i></span>
                                                    <!-- <span class="count-box">19+</span> -->
                                                </li>
                                                <li><span><i class="fas fa-thumbs-up"></i></span>
                                                    <span class="count-box">19+</span>
                                                </li>
                                                <li><span><i class="ri-add-line"></i></span></li>
                                            </ul>
                                        </div>
                                    </div>

                                </li>
                                <li class="slide-item">
                                    <div class="block-images position-relative">
                                        <div class="img-box">
                                            <img src="{{asset('frontend/images/suggested/04.jpg')}}" class="img-fluid"
                                                 alt="">
                                        </div>
                                        <div class="block-description">
                                            <h6 class="iq-title"><a href="show-details.php">Friends</a></h6>
                                            <div class="movie-time d-flex align-items-center my-2">
                                                <div class="badge badge-secondary p-1 mr-2">14+</div>
                                                <span class="text-white">10 Seasons</span>
                                            </div>
                                            <div class="hover-buttons">
                                                <a href="show-details.php">
                                                <span class="btn btn-hover iq-button"><i class="fa fa-play mr-1"
                                                                                         aria-hidden="true"></i>
                                                    Play Now</span>

                                                </a>
                                            </div>
                                        </div>
                                        <div class="block-social-info">
                                            <ul class="list-inline p-0 m-0 music-play-lists">
                                                <li data-toggle="modal" data-target="#exampleModalCenter" role="button">
                                                    <span><i class="fas fa-info-circle"></i></span>
                                                    <!-- <span class="count-box">19+</span> -->
                                                </li>
                                                <li><span><i class="fas fa-thumbs-up"></i></span>
                                                    <span class="count-box">19+</span>
                                                </li>
                                                <li><span><i class="ri-add-line"></i></span></li>
                                            </ul>
                                        </div>
                                    </div>
                                </li>
                                <li class="slide-item">

                                    <div class="block-images position-relative">
                                        <div class="img-box">
                                            <img src="{{asset('frontend/images/suggested/05.jpg')}}" class="img-fluid"
                                                 alt="">
                                        </div>
                                        <div class="block-description">
                                            <h6 class="iq-title"><a href="show-details.php">Blood Block</a></h6>
                                            <div class="movie-time d-flex align-items-center my-2">
                                                <div class="badge badge-secondary p-1 mr-2">13+</div>
                                                <span class="text-white">2h 40m</span>
                                            </div>
                                            <div class="hover-buttons">
                                                <a href="show-details.php">
                                                <span class="btn btn-hover iq-button"><i class="fa fa-play mr-1"
                                                                                         aria-hidden="true"></i>
                                                    Play Now</span>

                                                </a>
                                            </div>
                                        </div>
                                        <div class="block-social-info">
                                            <ul class="list-inline p-0 m-0 music-play-lists">
                                                <li data-toggle="modal" data-target="#exampleModalCenter" role="button">
                                                    <span><i class="fas fa-info-circle"></i></span>
                                                    <!-- <span class="count-box">19+</span> -->
                                                </li>
                                                <li><span><i class="fas fa-thumbs-up"></i></span>
                                                    <span class="count-box">19+</span>
                                                </li>
                                                <li><span><i class="ri-add-line"></i></span></li>
                                            </ul>
                                        </div>
                                    </div>

                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section class="mb-5 big-section">
            <div class="container-fluid">


                <div class="row  h-100 content-section  ">
                    <div class="col-xl-8 col-lg-12 col-md-12 a">
                        <a href="javascript:void(0);">
                            <div class="channel-logo" data-animation-in="fadeInLeft" data-delay-in="0.5">
                                <img src="{{asset('frontend/images/logo.png')}}" class="c-logo" alt="streamit">
                            </div>
                        </a>
                        <h1 class="slider-text big-title title text-uppercase" data-animation-in="fadeInLeft"
                            data-delay-in="0.6">Johnny English</h1>

                        <div class="d-flex flex-wrap align-items-center fadeInLeft animated" data-animation-in="fadeInLeft"
                             style="opacity: 1;">

                            <div class="d-flex align-items-center mt-2 mt-md-3">
                                <span class="badge badge-secondary p-2">18+</span>
                                <span class="ml-3">2 Seasons</span>
                            </div>
                        </div>

                        <p data-animation-in="fadeInUp" data-delay-in="1.2">Lorem Ipsum is simply dummy text of the printing
                            and typesetting industry. Lorem Ipsum has been the industry's standard
                            dummy text ever since the 1500s.
                        </p>
                        <div class="trending-list" data-wp_object-in="fadeInUp" data-delay-in="1.2">
                            <div class="text-primary title starring">
                                Starring: <span class="text-body">Karen Gilchrist, James Earl Jones</span>
                            </div>
                            <div class="text-primary title genres">
                                Genres: <span class="text-body">Action</span>
                            </div>
                            <div class="text-primary title tag">
                                Tags: <span class="text-body">Action, Adventure, Horror</span>
                            </div>
                        </div>
                        <div class="d-flex align-items-center r-mb-23" data-animation-in="fadeInUp" data-delay-in="1.2">
                            <a href="show-details.php" class="btn btn-hover btn-sm iq-button top-slider-btn"><i
                                    class="fa fa-play mr-2" aria-hidden="true"></i>Play Now</a>
                            <a href="javascript:void(0)" class="btn btn-link">More details</a>
                        </div>


                    </div>


                </div>
            </div>
            <div class=" watch-trailer-btn">
                <div id="fade" onClick="lightbox_close();"></div>

                <a class="video-open playbtn" onclick="lightbox_open();" type="button">
                    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
                         y="0px" width="80px" height="80px" viewBox="0 0 213.7 213.7" enable-background="new 0 0 213.7 213.7"
                         xml:space="preserve">
                    <polygon class='triangle' fill="none" stroke-width="7" stroke-linecap="round"
                             stroke-linejoin="round" stroke-miterlimit="10" points="73.5,62.5 148.5,105.8 73.5,149.1 " />
                        <circle class='circle' fill="none" stroke-width="7" stroke-linecap="round" stroke-linejoin="round"
                                stroke-miterlimit="10" cx="106.8" cy="106.8" r="103.3" />
                </svg>
                    <span class="w-trailor">Watch Trailer</span>
                </a>
                <div id="fade" onClick="lightbox_close();"></div>


            </div>

        </section>

        <section id="iq-trending1" class="h-100 mt-5 mb-5 w-100">
            <!-- <div class="iq-main-header d-flex align-items-center justify-content-between">
                   <h4 class="main-title">Trending</h4>
                </div> -->
            <div class="trending-contens" style="min-width:100%">

                <ul id="trending-slider1" class="list-inline p-0 m-0  ">
                    <li>
                        <div class="tranding-block position-relative">
                            <div class="trending-custom-tab">
                                <div class="tab-title-info position-relative invisible">
                                    <ul class="trending-pills d-flex nav nav-pills justify-content-center align-items-center text-center"
                                        role="tablist">

                                        <li class="nav-item">
                                            <a class="nav-link active show" data-toggle="pill" href="#trending-data99"
                                               role="tab" aria-selected="true">Episodes</a>
                                        </li>


                                    </ul>
                                </div>
                                <div class="trending-content">

                                    <div id="trending-data99" class="overlay-tab tab-pane active show fade">
                                        <div class="trending-info align-items-center w-100 animated fadeInUp">
                                            <a href="show-details.php" tabindex="90">
                                                <div class="channel-logo">
                                                    <img src="{{asset('frontend/images/logo.png')}}" class="c-logo"
                                                         alt="streamit">
                                                </div>
                                            </a>
                                            <h1 class="trending-text big-title text-uppercase">the hero camp</h1>
                                            <div class="d-flex align-items-center text-white text-detail mb-4">
                                            <span class="season_date">
                                                2 Seasons
                                            </span>
                                                <span class="trending-year">Feb 2019</span>
                                            </div>
                                            <div class="episodes-contens mt-4">
                                                <div class="owl-carousel owl-theme episodes-slider1 list-inline p-0 mb-0">
                                                    @if(isset($hero_camp) && !empty($hero_camp))
                                                        @foreach($hero_camp->seasons as $camp)
                                                            <div class="e-item">
                                                                <div class="block-image position-relative">
                                                                    <a href="{{route('showdetails',['slug'=>$camp->id])}}">
                                                                        <img src="{{Storage::disk('Wasabi')->exists('lg/'.$show->landscape_image) ? Storage::disk('Wasabi')->url('lg/'.$show->landscape_image) : asset('frontend/images/episodes/poster1.jpg')}}"
                                                                             class="img-fluid" alt="">
                                                                    </a>
                                                                    <div class="episode-play-info">
                                                                        <div class="episode-play">
                                                                            <a href="{{route('showdetails',['slug'=>$camp->id])}}" tabindex="0"><i
                                                                                    class="ri-play-fill"></i></a>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div class="episodes-description text-body">
                                                                    <div class="d-flex align-items-center justify-content-between">
                                                                        <a href="{{route('showdetails',['slug'=>$camp->id])}}">Wolves</a>
                                                                        <span class="text-primary">{{$hero_camp->showViews_count}} + Views</span>
                                                                    </div>
                                                                    <!-- <p class="mb-0">1 Year Ago
                                                                        </p> -->
                                                                </div>
                                                            </div>
                                                        @endforeach
                                                    @else
                                                        <div class="e-item">
                                                            <div class="block-image position-relative">
                                                                <a href="show-details.php">
                                                                    <img src="{{asset('frontend/images/episodes/poster1.jpg')}}"
                                                                         class="img-fluid" alt="">
                                                                </a>
                                                                <div class="episode-play-info">
                                                                    <div class="episode-play">
                                                                        <a href="show-details.php" tabindex="0"><i
                                                                                class="ri-play-fill"></i></a>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="episodes-description text-body">
                                                                <div class="d-flex align-items-center justify-content-between">
                                                                    <a href="show-details.php">Wolves</a>
                                                                    <span class="text-primary">2M + Views</span>
                                                                </div>
                                                                <!-- <p class="mb-0">1 Year Ago
                                                                    </p> -->
                                                            </div>
                                                        </div>
                                                        <div class="e-item">
                                                            <div class="block-image position-relative">
                                                                <a href="show-details.php">
                                                                    <img src="{{asset('frontend/images/episodes/poster2.jpg')}}"
                                                                         class="img-fluid" alt="">
                                                                </a>
                                                                <div class="episode-play-info">
                                                                    <div class="episode-play">
                                                                        <a href="show-details.php" tabindex="0"><i
                                                                                class="ri-play-fill"></i></a>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="episodes-description text-body">
                                                                <div class="d-flex align-items-center justify-content-between">
                                                                    <a href="show-details.php">Oblivion</a>
                                                                    <span class="text-primary">2M + Views</span>
                                                                </div>
                                                                <!-- <p class="mb-0">1 Year Ago
                                                                    </p> -->
                                                            </div>
                                                        </div>
                                                        <div class="e-item">
                                                            <div class="block-image position-relative">
                                                                <a href="show-details.php">
                                                                    <img src="{{asset('frontend/images/episodes/poster3.jpg')}}"
                                                                         class="img-fluid" alt="">
                                                                </a>
                                                                <div class="episode-play-info">
                                                                    <div class="episode-play">
                                                                        <a href="show-details.php" tabindex="0"><i
                                                                                class="ri-play-fill"></i></a>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="episodes-description text-body">
                                                                <div class="d-flex align-items-center justify-content-between">
                                                                    <a href="show-details.php">Carrie</a>
                                                                    <span class="text-primary">2M + Views</span>
                                                                </div>
                                                                <!-- <p class="mb-0">1 Year Ago
                                                                    </p> -->
                                                            </div>
                                                        </div>
                                                        <div class="e-item">
                                                            <div class="block-image position-relative">
                                                                <a href="show-details.php">
                                                                    <img src="{{asset('frontend/images/episodes/poster4.jpg')}}"
                                                                         class="img-fluid" alt="">
                                                                </a>
                                                                <div class="episode-play-info">
                                                                    <div class="episode-play">
                                                                        <a href="show-details.php" tabindex="0"><i
                                                                                class="ri-play-fill"></i></a>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="episodes-description text-body">
                                                                <div class="d-flex align-items-center justify-content-between">
                                                                    <a href="show-details.php">Stephen King</a>
                                                                    <span class="text-primary">2M + Views</span>
                                                                </div>
                                                                <!-- <p class="mb-0">1 Year Ago
                                                                    </p> -->
                                                            </div>
                                                        </div>
                                                        <div class="e-item">
                                                            <div class="block-image position-relative">
                                                                <a href="show-details.php">
                                                                    <img src="{{asset('frontend/images/episodes/poster5.jpg')}}"
                                                                         class="img-fluid" alt="">
                                                                </a>
                                                                <div class="episode-play-info">
                                                                    <div class="episode-play">
                                                                        <a href="show-details.php" tabindex="0"><i
                                                                                class="ri-play-fill"></i></a>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="episodes-description text-body">
                                                                <div class="d-flex align-items-center justify-content-between">
                                                                    <a href="show-details.php">Insidious</a>
                                                                    <span class="text-primary">2M + Views</span>
                                                                </div>
                                                                <!-- <p class="mb-0">1 Year Ago
                                                                    </p> -->
                                                            </div>
                                                        </div>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </section>

        <section class="mb-5 horror-seasons">
            <div class="container-fluid">
                <div class="row">

                    <div class="col-md-3 col-lg-3  d-flex flex-column  justify-content-center align-items-center">
                        <h3 class="text-center">Popular Horror Seasons </h3>
                        <p class="border border-top-0 border-left-0 border-right-0 border-bottom-secondary mt-3">Most
                            Watched Horror Seasons</p>
                        <span class="text-secondary mt-3">View All <i class="fas fa-chevron-right"></i> </span>
                    </div>
                    @if(isset($popular_horror))
                        @foreach($popular_horror as $p_horror)
                            <div class="col-md-3 col-lg-3">
                                <li class="slide-item" style="list-style-type:none;">
                                    <div class="block-images position-relative">
                                        <div class="img-box">
                                            <img src="{{Storage::disk('Wasabi')->exists('lg/'.$p_horror->portrait_image) ? Storage::disk('Wasabi')->url('lg/'.$p_horror->portrait_image) : asset('frontend/images/favorite/poster22.jpg')}}" class="img-fluid" alt="">
                                        </div>
                                        <div class="block-description">
                                            <h6 class="iq-title"><a href="{{route('showdetails',['slug'=>$p_horror->id])}}">Inside the Sea</a></h6>
                                            <div class="movie-time d-flex align-items-center my-2">
                                                <div class="badge badge-secondary p-1 mr-2">{{$p_horror->maturity_level}}+</div>
                                                {{--<span class="text-white">2h 30m</span>--}}
                                            </div>
                                            <div class="hover-buttons">
                                                <a href="{{route('showdetails',['slug'=>$p_horror->id])}}">
                                        <span class="btn btn-hover iq-button"><i class="fa fa-play mr-1"
                                                                                 aria-hidden="true"></i>
                                            Play Now</span>

                                                </a>
                                            </div>
                                        </div>
                                        <div class="block-social-info">
                                            <ul class="list-inline p-0 m-0 music-play-lists">
                                                <a data-toggle="ViewSHowDetail" href="{{route('showInfo',$p_horror->id)}}">
                                                    <li role="button">
                                                        <span><i class="fas fa-info-circle"></i></span>
                                                        <!-- <span class="count-box">19+</span> -->
                                                    </li>
                                                </a>
                                                <li><span><i class="fas fa-thumbs-up"></i></span>
                                                    <span class="count-box">{{$p_horror->maturity_level}}+</span>
                                                </li>
                                                <li><span><i class="ri-add-line"></i></span></li>
                                            </ul>
                                        </div>
                                    </div>

                                </li>
                            </div>
                        @endforeach
                    @else
                        <div class="col-md-3 col-lg-3">
                            <li class="slide-item" style="list-style-type:none;">

                                <div class="block-images position-relative">
                                    <div class="img-box">
                                        <img src="{{asset('frontend/images/favorite/poster22.jpg')}}" class="img-fluid" alt="">
                                    </div>
                                    <div class="block-description">
                                        <h6 class="iq-title"><a href="show-details.php">Inside the Sea</a></h6>
                                        <div class="movie-time d-flex align-items-center my-2">
                                            <div class="badge badge-secondary p-1 mr-2">11+</div>
                                            <span class="text-white">2h 30m</span>
                                        </div>
                                        <div class="hover-buttons">
                                            <a href="show-details.php">
                                        <span class="btn btn-hover iq-button"><i class="fa fa-play mr-1"
                                                                                 aria-hidden="true"></i>
                                            Play Now</span>

                                            </a>
                                        </div>
                                    </div>
                                    <div class="block-social-info">
                                        <ul class="list-inline p-0 m-0 music-play-lists">

                                            <li data-toggle="modal" data-target="#exampleModalCenter" role="button">
                                                <span><i class="fas fa-info-circle"></i></span>
                                                <!-- <span class="count-box">19+</span> -->
                                            </li>
                                            <li><span><i class="fas fa-thumbs-up"></i></span>
                                                <span class="count-box">19+</span>
                                            </li>
                                            <li><span><i class="ri-add-line"></i></span></li>
                                        </ul>
                                    </div>
                                </div>

                            </li>
                        </div>
                        <div class="col-md-3 col-lg-3">
                            <li class="slide-item" style="list-style-type:none;">

                                <div class="block-images position-relative">
                                    <div class="img-box">
                                        <img src="{{asset('frontend/images/favorite/poster33.jpg')}}" class="img-fluid" alt="">
                                    </div>
                                    <div class="block-description">
                                        <h6 class="iq-title"><a href="show-details.php">Inside the Sea</a></h6>
                                        <div class="movie-time d-flex align-items-center my-2">
                                            <div class="badge badge-secondary p-1 mr-2">11+</div>
                                            <span class="text-white">2h 30m</span>
                                        </div>
                                        <div class="hover-buttons">
                                            <a href="show-details.php">
                                        <span class="btn btn-hover iq-button"><i class="fa fa-play mr-1"
                                                                                 aria-hidden="true"></i>
                                            Play Now</span>

                                            </a>
                                        </div>
                                    </div>
                                    <div class="block-social-info">
                                        <ul class="list-inline p-0 m-0 music-play-lists">

                                            <li data-toggle="modal" data-target="#exampleModalCenter" role="button">
                                                <span><i class="fas fa-info-circle"></i></span>
                                                <!-- <span class="count-box">19+</span> -->
                                            </li>
                                            <li><span><i class="fas fa-thumbs-up"></i></span>
                                                <span class="count-box">19+</span>
                                            </li>
                                            <li><span><i class="ri-add-line"></i></span></li>
                                        </ul>
                                    </div>
                                </div>

                            </li>
                        </div>
                        <br>
                        <div class="col-md-3 col-lg-3 ">
                            <li class="slide-item" style="list-style-type:none;">

                                <div class="block-images position-relative">
                                    <div class="img-box">
                                        <img src="{{asset('frontend/images/favorite/poster44.jpg')}}" class="img-fluid" alt="">

                                    </div>
                                    <div class="block-description">
                                        <h6 class="iq-title"><a href="show-details.php">Inside the Sea</a></h6>
                                        <div class="movie-time d-flex align-items-center my-2">
                                            <div class="badge badge-secondary p-1 mr-2">11+</div>
                                            <span class="text-white">2h 30m</span>
                                        </div>
                                        <div class="hover-buttons">
                                            <a href="show-details.php">
                                        <span class="btn btn-hover iq-button"><i class="fa fa-play mr-1"
                                                                                 aria-hidden="true"></i>
                                            Play Now</span>

                                            </a>
                                        </div>
                                    </div>
                                    <div class="block-social-info">
                                        <ul class="list-inline p-0 m-0 music-play-lists">

                                            <li data-toggle="modal" data-target="#exampleModalCenter" role="button">
                                                <span><i class="fas fa-info-circle"></i></span>
                                                <!-- <span class="count-box">19+</span> -->
                                            </li>
                                            <li><span><i class="fas fa-thumbs-up"></i></span>
                                                <span class="count-box">19+</span>
                                            </li>
                                            <li><span><i class="ri-add-line"></i></span></li>
                                        </ul>
                                    </div>
                                </div>

                            </li>
                        </div>
                    @endif
                </div>


            </div>
        </section>

        {{--<section class="s-margin  horror-seasons-slider">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-sm-12 overflow-hidden">
                        <div class="iq-main-header d-flex align-items-center justify-content-between">
                            <h4 class="main-title">Popular Horror Drama</h4>
                            <a class="iq-view-all" href="movie-category.php">View All</a>
                        </div>
                        <div class="suggestede-contens">
                            <ul class="list-inline favorites-slider row p-0 mb-0">
                                <li class="slide-item">

                                    <div class="block-images position-relative">
                                        <div class="img-box">
                                            <img src="{{asset('frontend/images/favorite/poster1.jpg')}}" class="img-fluid"
                                                alt="">
                                        </div>
                                        <div class="block-description">
                                            <h6 class="iq-title"><a href="show-details.php">Inside the Sea</a></h6>
                                            <div class="movie-time d-flex align-items-center my-2">
                                                <div class="badge badge-secondary p-1 mr-2">11+</div>
                                                <span class="text-white">2h 30m</span>
                                            </div>
                                            <div class="hover-buttons">
                                                <a href="show-details.php">
                                                    <span class="btn btn-hover iq-button"><i class="fa fa-play mr-1"
                                                            aria-hidden="true"></i>
                                                        Play Now</span>

                                                </a>
                                            </div>
                                        </div>
                                        <div class="block-social-info">
                                            <ul class="list-inline p-0 m-0 music-play-lists">

                                                <li data-toggle="modal" data-target="#exampleModalCenter" role="button">
                                                    <span><i class="fas fa-info-circle"></i></span>
                                                    <!-- <span class="count-box">19+</span> -->
                                                </li>
                                                <li><span><i class="fas fa-thumbs-up"></i></span>
                                                    <span class="count-box">19+</span>
                                                </li>
                                                <li><span><i class="ri-add-line"></i></span></li>
                                            </ul>
                                        </div>
                                    </div>

                                </li>
                                <li class="slide-item">

                                    <div class="block-images position-relative">
                                        <div class="img-box">
                                            <img src="{{asset('frontend/images/favorite/poster2.jpg')}}" class="img-fluid"
                                                alt="">
                                        </div>
                                        <div class="block-description">
                                            <h6 class="iq-title"><a href="show-details.php">Jumbo Queen</a></h6>
                                            <div class="movie-time d-flex align-items-center my-2">
                                                <div class="badge badge-secondary p-1 mr-2">9+</div>
                                                <span class="text-white">2 Seasons</span>
                                            </div>
                                            <div class="hover-buttons">
                                                <a href="show-details.php">
                                                    <span class="btn btn-hover iq-button"><i class="fa fa-play mr-1"
                                                            aria-hidden="true"></i>
                                                        Play Now</span>

                                                </a>
                                            </div>
                                        </div>
                                        <div class="block-social-info">
                                            <ul class="list-inline p-0 m-0 music-play-lists">
                                                <li data-toggle="modal" data-target="#exampleModalCenter" role="button">
                                                    <span><i class="fas fa-info-circle"></i></span>
                                                    <!-- <span class="count-box">19+</span> -->
                                                </li>
                                                <li><span><i class="fas fa-thumbs-up"></i></span>
                                                    <span class="count-box">19+</span>
                                                </li>
                                                <li><span><i class="ri-add-line"></i></span></li>
                                            </ul>
                                        </div>
                                    </div>

                                </li>
                                <li class="slide-item">

                                    <div class="block-images position-relative">
                                        <div class="img-box">
                                            <img src="{{asset('frontend/images/favorite/poster3.jpg')}}" class="img-fluid"
                                                alt="">
                                        </div>
                                        <div class="block-description">
                                            <h6 class="iq-title"><a href="show-details.php">Unknown Land</a></h6>
                                            <div class="movie-time d-flex align-items-center my-2">
                                                <div class="badge badge-secondary p-1 mr-2">17+</div>
                                                <span class="text-white">2h 30m</span>
                                            </div>
                                            <div class="hover-buttons">
                                                <a href="show-details.php">
                                                    <span class="btn btn-hover iq-button"><i class="fa fa-play mr-1"
                                                            aria-hidden="true"></i>
                                                        Play Now</span>

                                                </a>
                                            </div>
                                        </div>
                                        <div class="block-social-info">
                                            <ul class="list-inline p-0 m-0 music-play-lists">

                                                <li data-toggle="modal" data-target="#exampleModalCenter" role="button">
                                                    <span><i class="fas fa-info-circle"></i></span>
                                                    <!-- <span class="count-box">19+</span> -->
                                                </li>
                                                <li><span><i class="fas fa-thumbs-up"></i></span>
                                                    <span class="count-box">19+</span>
                                                </li>
                                                <li><span><i class="ri-add-line"></i></span></li>
                                            </ul>
                                        </div>
                                    </div>

                                </li>
                                <li class="slide-item">
                                    <div class="block-images position-relative">
                                        <div class="img-box">
                                            <img src="{{asset('frontend/images/favorite/poster4.jpg')}}" class="img-fluid"
                                                alt="">
                                        </div>
                                        <div class="block-description">
                                            <h6 class="iq-title"><a href="show-details.php">Friends</a></h6>
                                            <div class="movie-time d-flex align-items-center my-2">
                                                <div class="badge badge-secondary p-1 mr-2">14+</div>
                                                <span class="text-white">10 Seasons</span>
                                            </div>
                                            <div class="hover-buttons">
                                                <a href="show-details.php">
                                                    <span class="btn btn-hover iq-button"><i class="fa fa-play mr-1"
                                                            aria-hidden="true"></i>
                                                        Play Now</span>

                                                </a>
                                            </div>
                                        </div>
                                        <div class="block-social-info">
                                            <ul class="list-inline p-0 m-0 music-play-lists">

                                                <li data-toggle="modal" data-target="#exampleModalCenter" role="button">
                                                    <span><i class="fas fa-info-circle"></i></span>
                                                    <!-- <span class="count-box">19+</span> -->
                                                </li>
                                                <li><span><i class="fas fa-thumbs-up"></i></span>
                                                    <span class="count-box">19+</span>
                                                </li>
                                                <li><span><i class="ri-add-line"></i></span></li>
                                            </ul>
                                        </div>
                                    </div>
                                </li>
                                <li class="slide-item">

                                    <div class="block-images position-relative">
                                        <div class="img-box">
                                            <img src="{{asset('frontend/images/favorite/poster5.jpg')}}" class="img-fluid"
                                                alt="">
                                        </div>
                                        <div class="block-description">
                                            <h6 class="iq-title"><a href="show-details.php">Blood Block</a></h6>
                                            <div class="movie-time d-flex align-items-center my-2">
                                                <div class="badge badge-secondary p-1 mr-2">13+</div>
                                                <span class="text-white">2h 40m</span>
                                            </div>
                                            <div class="hover-buttons">
                                                <a href="show-details.php">
                                                    <span class="btn btn-hover iq-button"><i class="fa fa-play mr-1"
                                                            aria-hidden="true"></i>
                                                        Play Now</span>

                                                </a>
                                            </div>
                                        </div>
                                        <div class="block-social-info">
                                            <ul class="list-inline p-0 m-0 music-play-lists">

                                                <li data-toggle="modal" data-target="#exampleModalCenter" role="button">
                                                    <span><i class="fas fa-info-circle"></i></span>
                                                    <!-- <span class="count-box">19+</span> -->
                                                </li>
                                                <li><span><i class="fas fa-thumbs-up"></i></span>
                                                    <span class="count-box">19+</span>
                                                </li>
                                                <li><span><i class="ri-add-line"></i></span></li>
                                            </ul>
                                        </div>
                                    </div>

                                </li>

                                <li class="slide-item">

                                    <div class="block-images position-relative">
                                        <div class="img-box">
                                            <img src="{{asset('frontend/images/favorite/poster6.jpg')}}" class="img-fluid"
                                                alt="">
                                        </div>
                                        <div class="block-description">
                                            <h6 class="iq-title"><a href="show-details.php">Blood Block</a></h6>
                                            <div class="movie-time d-flex align-items-center my-2">
                                                <div class="badge badge-secondary p-1 mr-2">13+</div>
                                                <span class="text-white">2h 40m</span>
                                            </div>
                                            <div class="hover-buttons">
                                                <a href="show-details.php">
                                                    <span class="btn btn-hover iq-button"><i class="fa fa-play mr-1"
                                                            aria-hidden="true"></i>
                                                        Play Now</span>

                                                </a>
                                            </div>
                                        </div>
                                        <div class="block-social-info">
                                            <ul class="list-inline p-0 m-0 music-play-lists">

                                                <li data-toggle="modal" data-target="#exampleModalCenter" role="button">
                                                    <span><i class="fas fa-info-circle"></i></span>
                                                    <!-- <span class="count-box">19+</span> -->
                                                </li>
                                                <li><span><i class="fas fa-thumbs-up"></i></span>
                                                    <span class="count-box">19+</span>
                                                </li>
                                                <li><span><i class="ri-add-line"></i></span></li>
                                            </ul>
                                        </div>
                                    </div>

                                </li>
                                <li class="slide-item">

                                    <div class="block-images position-relative">
                                        <div class="img-box">
                                            <img src="{{asset('frontend/images/favorite/poster7.jpg')}}" class="img-fluid"
                                                alt="">
                                        </div>
                                        <div class="block-description">
                                            <h6 class="iq-title"><a href="show-details.php">Blood Block</a></h6>
                                            <div class="movie-time d-flex align-items-center my-2">
                                                <div class="badge badge-secondary p-1 mr-2">13+</div>
                                                <span class="text-white">2h 40m</span>
                                            </div>
                                            <div class="hover-buttons">
                                                <a href="show-details.php">
                                                    <span class="btn btn-hover iq-button"><i class="fa fa-play mr-1"
                                                            aria-hidden="true"></i>
                                                        Play Now</span>

                                                </a>
                                            </div>
                                        </div>
                                        <div class="block-social-info">
                                            <ul class="list-inline p-0 m-0 music-play-lists">

                                                <li data-toggle="modal" data-target="#exampleModalCenter" role="button">
                                                    <span><i class="fas fa-info-circle"></i></span>
                                                    <!-- <span class="count-box">19+</span> -->
                                                </li>
                                                <li><span><i class="fas fa-thumbs-up"></i></span>
                                                    <span class="count-box">19+</span>
                                                </li>
                                                <li><span><i class="ri-add-line"></i></span></li>
                                            </ul>
                                        </div>
                                    </div>

                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </section>--}}

        <section id="parallex" class="parallax-window">
            <div class="container-fluid h-100">
                <div class="row align-items-center justify-content-center h-100 parallaxt-details">
                    <div class="col-lg-4 r-mb-23">
                        <div class="text-left">
                            <a href="javascript:void(0);">
                                <img src="{{asset('frontend/images/parallax/parallax-logo.png')}}" class="img-fluid"
                                     alt="bailey">
                            </a>
                            <div class="movie-time d-flex align-items-center mb-3 mt-3">
                                <div class="badge badge-secondary mr-3">13+</div>
                                <h6 class="text-white">2h 30m</h6>
                            </div>
                            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry...</p>
                            <div class="parallax-buttons">
                                <a href="show-details.php" class="btn btn-hover btn-sm iq-button top-slider-btn">Play
                                    Now</a>
                                <!-- <a href="show-details.php" class="btn btn-link">More details</a> -->
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-8">
                        <div class="parallax-img">
                            <a href="show-details.php">
                                <video controls muted loop src="{{asset('frontend/video/trailer3.mp4')}}" alt="video"
                                       volume="0.2"></video>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section class="mb-5 mt-5 big-section1">
            <div class="container-fluid">


                <div class="row  h-100 content-section ">
                    <div class="col-xl-8 col-lg-12 col-md-12  a">
                        <a href="javascript:void(0);">
                            <div class="channel-logo" data-animation-in="fadeInLeft" data-delay-in="0.5">
                                <img src="{{asset('frontend/images/logo.png')}}" class="c-logo" alt="streamit">
                            </div>
                        </a>
                        <h1 class="slider-text big-title title text-uppercase" data-animation-in="fadeInLeft"
                            data-delay-in="0.6">Inception</h1>

                        <div class="d-flex flex-wrap align-items-center fadeInLeft animated" data-animation-in="fadeInLeft"
                             style="opacity: 1;">

                            <div class="d-flex align-items-center mt-2 mt-md-3">
                                <span class="badge badge-secondary p-2">18+</span>
                                <span class="ml-3">2 Seasons</span>
                            </div>
                        </div>

                        <p data-animation-in="fadeInUp" data-delay-in="1.2">Lorem Ipsum is simply dummy text of the printing
                            and typesetting industry. Lorem Ipsum has been the industry's standard
                            dummy text ever since the 1500s.
                        </p>
                        <div class="trending-list" data-wp_object-in="fadeInUp" data-delay-in="1.2">
                            <div class="text-primary title starring">
                                Starring: <span class="text-body">Karen Gilchrist, James Earl Jones</span>
                            </div>
                            <div class="text-primary title genres">
                                Genres: <span class="text-body">Action</span>
                            </div>
                            <div class="text-primary title tag">
                                Tags: <span class="text-body">Action, Adventure, Horror</span>
                            </div>
                        </div>
                        <div class="d-flex align-items-center r-mb-23" data-animation-in="fadeInUp" data-delay-in="1.2">
                            <a href="show-details.php" class="btn btn-hover btn-sm iq-button top-slider-btn"><i
                                    class="fa fa-play mr-2" aria-hidden="true"></i>Play Now</a>
                            <a href="javascript:void(0)" class="btn btn-link">More details</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="text-right p-5 mr-5">
                <a class="video-open playbtn" type="button">
                    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
                         y="0px" width="80px" height="80px" viewBox="0 0 213.7 213.7" enable-background="new 0 0 213.7 213.7"
                         xml:space="preserve">
                    <polygon class='triangle' fill="none" stroke-width="7" stroke-linecap="round"
                             stroke-linejoin="round" stroke-miterlimit="10" points="73.5,62.5 148.5,105.8 73.5,149.1 " />
                        <circle class='circle' fill="none" stroke-width="7" stroke-linecap="round" stroke-linejoin="round"
                                stroke-miterlimit="10" cx="106.8" cy="106.8" r="103.3" />
                </svg>
                    <span class="w-trailor">Watch Trailer</span>
                </a>
            </div>

        </section>

        <section id="iq-suggestede" class="s-margin">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-sm-12 overflow-hidden">
                        <div class="iq-main-header d-flex align-items-center justify-content-between">
                            <h4 class="main-title">Upcoming Shows</h4>
                            <a class="iq-view-all" href="movie-category.php">View All</a>
                        </div>
                        <div class="suggestede-contens">
                            <ul class="list-inline favorites-slider row p-0 mb-0">
                                <li class="slide-item">

                                    <div class="block-images position-relative">
                                        <div class="img-box">
                                            <img src="{{asset('frontend/images/suggested/01.jpg')}}" class="img-fluid"
                                                 alt="">
                                        </div>
                                        <div class="block-description">
                                            <h6 class="iq-title"><a href="show-details.php">Inside the Sea</a></h6>
                                            <div class="movie-time d-flex align-items-center my-2">
                                                <div class="badge badge-secondary p-1 mr-2">11+</div>
                                                <span class="text-white">2h 30m</span>
                                            </div>
                                            <div class="hover-buttons">
                                                <a href="show-details.php">
                                                <span class="btn btn-hover iq-button"><i class="fa fa-play mr-1"
                                                                                         aria-hidden="true"></i>
                                                    Play Now</span>

                                                </a>
                                            </div>
                                        </div>
                                        <div class="block-social-info">
                                            <ul class="list-inline p-0 m-0 music-play-lists">
                                                <li data-toggle="modal" data-target="#exampleModalCenter" role="button">
                                                    <span><i class="fas fa-info-circle"></i></span>
                                                    <!-- <span class="count-box">19+</span> -->
                                                </li>
                                                <li><span><i class="fas fa-thumbs-up"></i></span>
                                                    <span class="count-box">19+</span>
                                                </li>
                                                <li><span><i class="ri-add-line"></i></span></li>
                                            </ul>
                                        </div>
                                    </div>

                                </li>
                                <li class="slide-item">

                                    <div class="block-images position-relative">
                                        <div class="img-box">
                                            <img src="{{asset('frontend/images/suggested/02.jpg')}}" class="img-fluid"
                                                 alt="">
                                        </div>
                                        <div class="block-description">
                                            <h6 class="iq-title"><a href="show-details.php">Jumbo Queen</a></h6>
                                            <div class="movie-time d-flex align-items-center my-2">
                                                <div class="badge badge-secondary p-1 mr-2">9+</div>
                                                <span class="text-white">2 Seasons</span>
                                            </div>
                                            <div class="hover-buttons">
                                                <a href="show-details.php">
                                                <span class="btn btn-hover iq-button "><i class="fa fa-play mr-1"
                                                                                          aria-hidden="true"></i>
                                                    Play Now</span>

                                                </a>
                                            </div>
                                        </div>
                                        <div class="block-social-info">
                                            <ul class="list-inline p-0 m-0 music-play-lists">
                                                <li data-toggle="modal" data-target="#exampleModalCenter" role="button">
                                                    <span><i class="fas fa-info-circle"></i></span>
                                                    <!-- <span class="count-box">19+</span> -->
                                                </li>
                                                <li><span><i class="fas fa-thumbs-up"></i></span>
                                                    <span class="count-box">19+</span>
                                                </li>
                                                <li><span><i class="ri-add-line"></i></span></li>
                                            </ul>
                                        </div>
                                    </div>

                                </li>
                                <li class="slide-item">

                                    <div class="block-images position-relative">
                                        <div class="img-box">
                                            <img src="{{asset('frontend/images/suggested/03.jpg')}}" class="img-fluid"
                                                 alt="">
                                        </div>
                                        <div class="block-description">
                                            <h6 class="iq-title"><a href="show-details.php">Unknown Land</a></h6>
                                            <div class="movie-time d-flex align-items-center my-2">
                                                <div class="badge badge-secondary p-1 mr-2">17+</div>
                                                <span class="text-white">2h 30m</span>
                                            </div>
                                            <div class="hover-buttons">
                                                <a href="show-details.php">
                                                <span class="btn btn-hover iq-button"><i class="fa fa-play mr-1"
                                                                                         aria-hidden="true"></i>
                                                    Play Now</span>

                                                </a>
                                            </div>
                                        </div>
                                        <div class="block-social-info">
                                            <ul class="list-inline p-0 m-0 music-play-lists">
                                                <li data-toggle="modal" data-target="#exampleModalCenter" role="button">
                                                    <span><i class="fas fa-info-circle"></i></span>
                                                    <!-- <span class="count-box">19+</span> -->
                                                </li>
                                                <li><span><i class="fas fa-thumbs-up"></i></span>
                                                    <span class="count-box">19+</span>
                                                </li>
                                                <li><span><i class="ri-add-line"></i></span></li>
                                            </ul>
                                        </div>
                                    </div>

                                </li>
                                <li class="slide-item">
                                    <div class="block-images position-relative">
                                        <div class="img-box">
                                            <img src="{{asset('frontend/images/suggested/04.jpg')}}" class="img-fluid"
                                                 alt="">
                                        </div>
                                        <div class="block-description">
                                            <h6 class="iq-title"><a href="show-details.php">Friends</a></h6>
                                            <div class="movie-time d-flex align-items-center my-2">
                                                <div class="badge badge-secondary p-1 mr-2">14+</div>
                                                <span class="text-white">10 Seasons</span>
                                            </div>
                                            <div class="hover-buttons">
                                                <a href="show-details.php">
                                                <span class="btn btn-hover iq-button"><i class="fa fa-play mr-1"
                                                                                         aria-hidden="true"></i>
                                                    Play Now</span>

                                                </a>
                                            </div>
                                        </div>
                                        <div class="block-social-info">
                                            <ul class="list-inline p-0 m-0 music-play-lists">
                                                <li data-toggle="modal" data-target="#exampleModalCenter" role="button">
                                                    <span><i class="fas fa-info-circle"></i></span>
                                                    <!-- <span class="count-box">19+</span> -->
                                                </li>
                                                <li><span><i class="fas fa-thumbs-up"></i></span>
                                                    <span class="count-box">19+</span>
                                                </li>
                                                <li><span><i class="ri-add-line"></i></span></li>
                                            </ul>
                                        </div>
                                    </div>
                                </li>
                                <li class="slide-item">

                                    <div class="block-images position-relative">
                                        <div class="img-box">
                                            <img src="{{asset('frontend/images/suggested/05.jpg')}}" class="img-fluid"
                                                 alt="">
                                        </div>
                                        <div class="block-description">
                                            <h6 class="iq-title"><a href="show-details.php">Blood Block</a></h6>
                                            <div class="movie-time d-flex align-items-center my-2">
                                                <div class="badge badge-secondary p-1 mr-2">13+</div>
                                                <span class="text-white">2h 40m</span>
                                            </div>
                                            <div class="hover-buttons">
                                                <a href="show-details.php">
                                                <span class="btn btn-hover iq-button"><i class="fa fa-play mr-1"
                                                                                         aria-hidden="true"></i>
                                                    Play Now</span>

                                                </a>
                                            </div>
                                        </div>
                                        <div class="block-social-info">
                                            <ul class="list-inline p-0 m-0 music-play-lists">

                                                <li data-toggle="modal" data-target="#exampleModalCenter" role="button">
                                                    <span><i class="fas fa-info-circle"></i></span>
                                                    <!-- <span class="count-box">19+</span> -->
                                                </li>
                                                <li><span><i class="fas fa-thumbs-up"></i></span>
                                                    <span class="count-box">19+</span>
                                                </li>
                                                <li><span><i class="ri-add-line"></i></span></li>
                                            </ul>
                                        </div>
                                    </div>

                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section id="iq-suggestede" class="s-margin">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-sm-12 overflow-hidden">
                        <div class="iq-main-header d-flex align-items-center justify-content-between">
                            <h4 class="main-title">Suggested For You</h4>
                            <a class="iq-view-all" href="movie-category.php">View All</a>
                        </div>
                        <div class="suggestede-contens">
                            <ul class="list-inline favorites-slider row p-0 mb-0">
                                <li class="slide-item">

                                    <div class="block-images position-relative">
                                        <div class="img-box">
                                            <img src="{{asset('frontend/images/suggested/01.jpg')}}" class="img-fluid"
                                                 alt="">
                                        </div>
                                        <div class="block-description">
                                            <h6 class="iq-title"><a href="show-details.php">Inside the Sea</a></h6>
                                            <div class="movie-time d-flex align-items-center my-2">
                                                <div class="badge badge-secondary p-1 mr-2">11+</div>
                                                <span class="text-white">2h 30m</span>
                                            </div>
                                            <div class="hover-buttons">
                                                <a href="show-details.php">
                                                <span class="btn btn-hover iq-button"><i class="fa fa-play mr-1"
                                                                                         aria-hidden="true"></i>
                                                    Play Now</span>

                                                </a>
                                            </div>
                                        </div>
                                        <div class="block-social-info">
                                            <ul class="list-inline p-0 m-0 music-play-lists">

                                                <li data-toggle="modal" data-target="#exampleModalCenter" role="button">
                                                    <span><i class="fas fa-info-circle"></i></span>
                                                    <!-- <span class="count-box">19+</span> -->
                                                </li>
                                                <li><span><i class="fas fa-thumbs-up"></i></span>
                                                    <span class="count-box">19+</span>
                                                </li>
                                                <li><span><i class="ri-add-line"></i></span></li>
                                            </ul>
                                        </div>
                                    </div>

                                </li>
                                <li class="slide-item">

                                    <div class="block-images position-relative">
                                        <div class="img-box">
                                            <img src="{{asset('frontend/images/suggested/02.jpg')}}" class="img-fluid"
                                                 alt="">
                                        </div>
                                        <div class="block-description">
                                            <h6 class="iq-title"><a href="show-details.php">Jumbo Queen</a></h6>
                                            <div class="movie-time d-flex align-items-center my-2">
                                                <div class="badge badge-secondary p-1 mr-2">9+</div>
                                                <span class="text-white">2 Seasons</span>
                                            </div>
                                            <div class="hover-buttons">
                                                <a href="show-details.php">
                                                <span class="btn btn-hover iq-button "><i class="fa fa-play mr-1"
                                                                                          aria-hidden="true"></i>
                                                    Play Now</span>

                                                </a>
                                            </div>
                                        </div>
                                        <div class="block-social-info">
                                            <ul class="list-inline p-0 m-0 music-play-lists">

                                                <li data-toggle="modal" data-target="#exampleModalCenter" role="button">
                                                    <span><i class="fas fa-info-circle"></i></span>
                                                    <!-- <span class="count-box">19+</span> -->
                                                </li>
                                                <li><span><i class="fas fa-thumbs-up"></i></span>
                                                    <span class="count-box">19+</span>
                                                </li>
                                                <li><span><i class="ri-add-line"></i></span></li>
                                            </ul>
                                        </div>
                                    </div>

                                </li>
                                <li class="slide-item">

                                    <div class="block-images position-relative">
                                        <div class="img-box">
                                            <img src="{{asset('frontend/images/suggested/03.jpg')}}" class="img-fluid"
                                                 alt="">
                                        </div>
                                        <div class="block-description">
                                            <h6 class="iq-title"><a href="show-details.php">Unknown Land</a></h6>
                                            <div class="movie-time d-flex align-items-center my-2">
                                                <div class="badge badge-secondary p-1 mr-2">17+</div>
                                                <span class="text-white">2h 30m</span>
                                            </div>
                                            <div class="hover-buttons">
                                                <a href="show-details.php">
                                                <span class="btn btn-hover iq-button"><i class="fa fa-play mr-1"
                                                                                         aria-hidden="true"></i>
                                                    Play Now</span>

                                                </a>
                                            </div>
                                        </div>
                                        <div class="block-social-info">
                                            <ul class="list-inline p-0 m-0 music-play-lists">

                                                <li data-toggle="modal" data-target="#exampleModalCenter" role="button">
                                                    <span><i class="fas fa-info-circle"></i></span>
                                                    <!-- <span class="count-box">19+</span> -->
                                                </li>
                                                <li><span><i class="fas fa-thumbs-up"></i></span>
                                                    <span class="count-box">19+</span>
                                                </li>
                                                <li><span><i class="ri-add-line"></i></span></li>
                                            </ul>
                                        </div>
                                    </div>

                                </li>
                                <li class="slide-item">
                                    <div class="block-images position-relative">
                                        <div class="img-box">
                                            <img src="{{asset('frontend/images/suggested/04.jpg')}}" class="img-fluid"
                                                 alt="">
                                        </div>
                                        <div class="block-description">
                                            <h6 class="iq-title"><a href="show-details.php">Friends</a></h6>
                                            <div class="movie-time d-flex align-items-center my-2">
                                                <div class="badge badge-secondary p-1 mr-2">14+</div>
                                                <span class="text-white">10 Seasons</span>
                                            </div>
                                            <div class="hover-buttons">
                                                <a href="show-details.php">
                                                <span class="btn btn-hover iq-button"><i class="fa fa-play mr-1"
                                                                                         aria-hidden="true"></i>
                                                    Play Now</span>

                                                </a>
                                            </div>
                                        </div>
                                        <div class="block-social-info">
                                            <ul class="list-inline p-0 m-0 music-play-lists">

                                                <li data-toggle="modal" data-target="#exampleModalCenter" role="button">
                                                    <span><i class="fas fa-info-circle"></i></span>
                                                    <!-- <span class="count-box">19+</span> -->
                                                </li>
                                                <li><span><i class="fas fa-thumbs-up"></i></span>
                                                    <span class="count-box">19+</span>
                                                </li>
                                                <li><span><i class="ri-add-line"></i></span></li>
                                            </ul>
                                        </div>
                                    </div>
                                </li>
                                <li class="slide-item">

                                    <div class="block-images position-relative">
                                        <div class="img-box">
                                            <img src="{{asset('frontend/images/suggested/05.jpg')}}" class="img-fluid"
                                                 alt="">
                                        </div>
                                        <div class="block-description">
                                            <h6 class="iq-title"><a href="show-details.php">Blood Block</a></h6>
                                            <div class="movie-time d-flex align-items-center my-2">
                                                <div class="badge badge-secondary p-1 mr-2">13+</div>
                                                <span class="text-white">2h 40m</span>
                                            </div>
                                            <div class="hover-buttons">
                                                <a href="show-details.php">
                                                <span class="btn btn-hover iq-button"><i class="fa fa-play mr-1"
                                                                                         aria-hidden="true"></i>
                                                    Play Now</span>

                                                </a>
                                            </div>
                                        </div>
                                        <div class="block-social-info">
                                            <ul class="list-inline p-0 m-0 music-play-lists">

                                                <li data-toggle="modal" data-target="#exampleModalCenter" role="button">
                                                    <span><i class="fas fa-info-circle"></i></span>
                                                    <!-- <span class="count-box">19+</span> -->
                                                </li>
                                                <li><span><i class="fas fa-thumbs-up"></i></span>
                                                    <span class="count-box">19+</span>
                                                </li>
                                                <li><span><i class="ri-add-line"></i></span></li>
                                            </ul>
                                        </div>
                                    </div>

                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section id="iq-suggestede" class="s-margin">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-sm-12 overflow-hidden">
                        <div class="iq-main-header d-flex align-items-center justify-content-between">
                            <h4 class="main-title">Comedy Thrillers</h4>
                            <a class="iq-view-all" href="movie-category.php">View All</a>
                        </div>
                        <div class="suggestede-contens">
                            <ul class="list-inline favorites-slider row p-0 mb-0">
                                @if(isset($Thriller) && !empty($Thriller))
                                    @foreach($Thriller as $thrill)
                                        <li class="slide-item">

                                            <div class="block-images position-relative">
                                                <div class="img-box">
                                                    <img src="{{Storage::disk('Wasabi')->exists('lg/'.$thrill->landscape_image) ? Storage::disk('Wasabi')->url('lg/'.$thrill->landscape_image) : asset('frontend/images/suggested/01.jpg')}}" class="img-fluid"
                                                         alt="">
                                                </div>
                                                <div class="block-description">
                                                    <h6 class="iq-title"><a href="{{route('showdetails',['slug'=>$thrill->id])}}">{{$thrill->title}}</a></h6>
                                                    <div class="movie-time d-flex align-items-center my-2">
                                                        <div class="badge badge-secondary p-1 mr-2">{{$thrill->maturity_level}}+</div>
                                                        <span class="text-white">2h 30m</span>
                                                    </div>
                                                    <div class="hover-buttons">
                                                        <a href="{{route('showdetails',['slug'=>$thrill->id])}}">
                                                <span class="btn btn-hover iq-button"><i class="fa fa-play mr-1"
                                                                                         aria-hidden="true"></i>
                                                    Play Now</span>

                                                        </a>
                                                    </div>
                                                </div>
                                                <div class="block-social-info">
                                                    <ul class="list-inline p-0 m-0 music-play-lists">

                                                        <a data-toggle="ViewSHowDetail" href="{{route('showInfo',$thrill->id)}}">
                                                            <li role="button">
                                                                <span><i class="fas fa-info-circle"></i></span>
                                                                <!-- <span class="count-box">19+</span> -->
                                                            </li>
                                                        </a>
                                                        <li><span><i class="ri-heart-fill"></i></span>
                                                            <span class="count-box">{{$thrill->maturity_level}}+</span>
                                                        </li>
                                                        <li><span><i class="ri-add-line"></i></span></li>
                                                    </ul>
                                                </div>
                                            </div>

                                        </li>
                                    @endforeach
                                @else
                                    <li class="slide-item">

                                        <div class="block-images position-relative">
                                            <div class="img-box">
                                                <img src="{{asset('frontend/images/suggested/02.jpg')}}" class="img-fluid"
                                                     alt="">
                                            </div>
                                            <div class="block-description">
                                                <h6 class="iq-title"><a href="show-details.php">Jumbo Queen</a></h6>
                                                <div class="movie-time d-flex align-items-center my-2">
                                                    <div class="badge badge-secondary p-1 mr-2">9+</div>
                                                    <span class="text-white">2 Seasons</span>
                                                </div>
                                                <div class="hover-buttons">
                                                    <a href="show-details.php">
                                                <span class="btn btn-hover iq-button "><i class="fa fa-play mr-1"
                                                                                          aria-hidden="true"></i>
                                                    Play Now</span>

                                                    </a>
                                                </div>
                                            </div>
                                            <div class="block-social-info">
                                                <ul class="list-inline p-0 m-0 music-play-lists">

                                                    <li data-toggle="modal" data-target="#exampleModalCenter" role="button">
                                                        <span><i class="fas fa-info-circle"></i></span>
                                                        <!-- <span class="count-box">19+</span> -->
                                                    </li>
                                                    <li><span><i class="ri-heart-fill"></i></span>
                                                        <span class="count-box">19+</span>
                                                    </li>
                                                    <li><span><i class="ri-add-line"></i></span></li>
                                                </ul>
                                            </div>
                                        </div>

                                    </li>
                                    <li class="slide-item">

                                        <div class="block-images position-relative">
                                            <div class="img-box">
                                                <img src="{{asset('frontend/images/suggested/03.jpg')}}" class="img-fluid"
                                                     alt="">
                                            </div>
                                            <div class="block-description">
                                                <h6 class="iq-title"><a href="show-details.php">Unknown Land</a></h6>
                                                <div class="movie-time d-flex align-items-center my-2">
                                                    <div class="badge badge-secondary p-1 mr-2">17+</div>
                                                    <span class="text-white">2h 30m</span>
                                                </div>
                                                <div class="hover-buttons">
                                                    <a href="show-details.php">
                                                <span class="btn btn-hover iq-button"><i class="fa fa-play mr-1"
                                                                                         aria-hidden="true"></i>
                                                    Play Now</span>

                                                    </a>
                                                </div>
                                            </div>
                                            <div class="block-social-info">
                                                <ul class="list-inline p-0 m-0 music-play-lists">

                                                    <li data-toggle="modal" data-target="#exampleModalCenter" role="button">
                                                        <span><i class="fas fa-info-circle"></i></span>
                                                        <!-- <span class="count-box">19+</span> -->
                                                    </li>
                                                    <li><span><i class="ri-heart-fill"></i></span>
                                                        <span class="count-box">19+</span>
                                                    </li>
                                                    <li><span><i class="ri-add-line"></i></span></li>
                                                </ul>
                                            </div>
                                        </div>

                                    </li>
                                    <li class="slide-item">
                                        <div class="block-images position-relative">
                                            <div class="img-box">
                                                <img src="{{asset('frontend/images/suggested/04.jpg')}}" class="img-fluid"
                                                     alt="">
                                            </div>
                                            <div class="block-description">
                                                <h6 class="iq-title"><a href="show-details.php">Friends</a></h6>
                                                <div class="movie-time d-flex align-items-center my-2">
                                                    <div class="badge badge-secondary p-1 mr-2">14+</div>
                                                    <span class="text-white">10 Seasons</span>
                                                </div>
                                                <div class="hover-buttons">
                                                    <a href="show-details.php">
                                                <span class="btn btn-hover iq-button"><i class="fa fa-play mr-1"
                                                                                         aria-hidden="true"></i>
                                                    Play Now</span>

                                                    </a>
                                                </div>
                                            </div>
                                            <div class="block-social-info">
                                                <ul class="list-inline p-0 m-0 music-play-lists">

                                                    <li data-toggle="modal" data-target="#exampleModalCenter" role="button">
                                                        <span><i class="fas fa-info-circle"></i></span>
                                                        <!-- <span class="count-box">19+</span> -->
                                                    </li>
                                                    <li><span><i class="ri-heart-fill"></i></span>
                                                        <span class="count-box">19+</span>
                                                    </li>
                                                    <li><span><i class="ri-add-line"></i></span></li>
                                                </ul>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="slide-item">

                                        <div class="block-images position-relative">
                                            <div class="img-box">
                                                <img src="{{asset('frontend/images/suggested/05.jpg')}}" class="img-fluid"
                                                     alt="">
                                            </div>
                                            <div class="block-description">
                                                <h6 class="iq-title"><a href="show-details.php">Blood Block</a></h6>
                                                <div class="movie-time d-flex align-items-center my-2">
                                                    <div class="badge badge-secondary p-1 mr-2">13+</div>
                                                    <span class="text-white">2h 40m</span>
                                                </div>
                                                <div class="hover-buttons">
                                                    <a href="show-details.php">
                                                <span class="btn btn-hover iq-button"><i class="fa fa-play mr-1"
                                                                                         aria-hidden="true"></i>
                                                    Play Now</span>

                                                    </a>
                                                </div>
                                            </div>
                                            <div class="block-social-info">
                                                <ul class="list-inline p-0 m-0 music-play-lists">

                                                    <li data-toggle="modal" data-target="#exampleModalCenter" role="button">
                                                        <span><i class="fas fa-info-circle"></i></span>
                                                        <!-- <span class="count-box">19+</span> -->
                                                    </li>
                                                    <li><span><i class="ri-heart-fill"></i></span>
                                                        <span class="count-box">19+</span>
                                                    </li>
                                                    <li><span><i class="ri-add-line"></i></span></li>
                                                </ul>
                                            </div>
                                        </div>

                                    </li>
                                @endif
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section id="iq-suggestede" class="s-margin">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-sm-12 overflow-hidden">
                        <div class="iq-main-header d-flex align-items-center justify-content-between">
                            <h4 class="main-title">Romance</h4>
                            <a class="iq-view-all" href="movie-category.php">View All</a>
                        </div>
                        <div class="suggestede-contens">
                            <ul class="list-inline favorites-slider row p-0 mb-0">
                                <li class="slide-item">

                                    <div class="block-images position-relative">
                                        <div class="img-box">
                                            <img src="{{asset('frontend/images/suggested/01.jpg')}}" class="img-fluid"
                                                 alt="">
                                        </div>
                                        <div class="block-description">
                                            <h6 class="iq-title"><a href="show-details.php">Inside the Sea</a></h6>
                                            <div class="movie-time d-flex align-items-center my-2">
                                                <div class="badge badge-secondary p-1 mr-2">11+</div>
                                                <span class="text-white">2h 30m</span>
                                            </div>
                                            <div class="hover-buttons">
                                                <a href="show-details.php">
                                                <span class="btn btn-hover iq-button"><i class="fa fa-play mr-1"
                                                                                         aria-hidden="true"></i>
                                                    Play Now</span>

                                                </a>
                                            </div>
                                        </div>
                                        <div class="block-social-info">
                                            <ul class="list-inline p-0 m-0 music-play-lists">

                                                <li data-toggle="modal" data-target="#exampleModalCenter" role="button">
                                                    <span><i class="fas fa-info-circle"></i></span>
                                                    <!-- <span class="count-box">19+</span> -->
                                                </li>
                                                <li><span><i class="ri-heart-fill"></i></span>
                                                    <span class="count-box">19+</span>
                                                </li>
                                                <li><span><i class="ri-add-line"></i></span></li>
                                            </ul>
                                        </div>
                                    </div>

                                </li>
                                <li class="slide-item">

                                    <div class="block-images position-relative">
                                        <div class="img-box">
                                            <img src="{{asset('frontend/images/suggested/02.jpg')}}" class="img-fluid"
                                                 alt="">
                                        </div>
                                        <div class="block-description">
                                            <h6 class="iq-title"><a href="show-details.php">Jumbo Queen</a></h6>
                                            <div class="movie-time d-flex align-items-center my-2">
                                                <div class="badge badge-secondary p-1 mr-2">9+</div>
                                                <span class="text-white">2 Seasons</span>
                                            </div>
                                            <div class="hover-buttons">
                                                <a href="show-details.php">
                                                <span class="btn btn-hover iq-button "><i class="fa fa-play mr-1"
                                                                                          aria-hidden="true"></i>
                                                    Play Now</span>

                                                </a>
                                            </div>
                                        </div>
                                        <div class="block-social-info">
                                            <ul class="list-inline p-0 m-0 music-play-lists">

                                                <li data-toggle="modal" data-target="#exampleModalCenter" role="button">
                                                    <span><i class="fas fa-info-circle"></i></span>
                                                    <!-- <span class="count-box">19+</span> -->
                                                </li>
                                                <li><span><i class="ri-heart-fill"></i></span>
                                                    <span class="count-box">19+</span>
                                                </li>
                                                <li><span><i class="ri-add-line"></i></span></li>
                                            </ul>
                                        </div>
                                    </div>

                                </li>
                                <li class="slide-item">

                                    <div class="block-images position-relative">
                                        <div class="img-box">
                                            <img src="{{asset('frontend/images/suggested/03.jpg')}}" class="img-fluid"
                                                 alt="">
                                        </div>
                                        <div class="block-description">
                                            <h6 class="iq-title"><a href="show-details.php">Unknown Land</a></h6>
                                            <div class="movie-time d-flex align-items-center my-2">
                                                <div class="badge badge-secondary p-1 mr-2">17+</div>
                                                <span class="text-white">2h 30m</span>
                                            </div>
                                            <div class="hover-buttons">
                                                <a href="show-details.php">
                                                <span class="btn btn-hover iq-button"><i class="fa fa-play mr-1"
                                                                                         aria-hidden="true"></i>
                                                    Play Now</span>

                                                </a>
                                            </div>
                                        </div>
                                        <div class="block-social-info">
                                            <ul class="list-inline p-0 m-0 music-play-lists">

                                                <li data-toggle="modal" data-target="#exampleModalCenter" role="button">
                                                    <span><i class="fas fa-info-circle"></i></span>
                                                    <!-- <span class="count-box">19+</span> -->
                                                </li>
                                                <li><span><i class="ri-heart-fill"></i></span>
                                                    <span class="count-box">19+</span>
                                                </li>
                                                <li><span><i class="ri-add-line"></i></span></li>
                                            </ul>
                                        </div>
                                    </div>

                                </li>
                                <li class="slide-item">
                                    <div class="block-images position-relative">
                                        <div class="img-box">
                                            <img src="{{asset('frontend/images/suggested/04.jpg')}}" class="img-fluid"
                                                 alt="">
                                        </div>
                                        <div class="block-description">
                                            <h6 class="iq-title"><a href="show-details.php">Friends</a></h6>
                                            <div class="movie-time d-flex align-items-center my-2">
                                                <div class="badge badge-secondary p-1 mr-2">14+</div>
                                                <span class="text-white">10 Seasons</span>
                                            </div>
                                            <div class="hover-buttons">
                                                <a href="show-details.php">
                                                <span class="btn btn-hover iq-button"><i class="fa fa-play mr-1"
                                                                                         aria-hidden="true"></i>
                                                    Play Now</span>

                                                </a>
                                            </div>
                                        </div>
                                        <div class="block-social-info">
                                            <ul class="list-inline p-0 m-0 music-play-lists">

                                                <li data-toggle="modal" data-target="#exampleModalCenter" role="button">
                                                    <span><i class="fas fa-info-circle"></i></span>
                                                    <!-- <span class="count-box">19+</span> -->
                                                </li>
                                                <li><span><i class="ri-heart-fill"></i></span>
                                                    <span class="count-box">19+</span>
                                                </li>
                                                <li><span><i class="ri-add-line"></i></span></li>
                                            </ul>
                                        </div>
                                    </div>
                                </li>
                                <li class="slide-item">

                                    <div class="block-images position-relative">
                                        <div class="img-box">
                                            <img src="{{asset('frontend/images/suggested/05.jpg')}}" class="img-fluid"
                                                 alt="">
                                        </div>
                                        <div class="block-description">
                                            <h6 class="iq-title"><a href="show-details.php">Blood Block</a></h6>
                                            <div class="movie-time d-flex align-items-center my-2">
                                                <div class="badge badge-secondary p-1 mr-2">13+</div>
                                                <span class="text-white">2h 40m</span>
                                            </div>
                                            <div class="hover-buttons">
                                                <a href="show-details.php">
                                                <span class="btn btn-hover iq-button"><i class="fa fa-play mr-1"
                                                                                         aria-hidden="true"></i>
                                                    Play Now</span>

                                                </a>
                                            </div>
                                        </div>
                                        <div class="block-social-info">
                                            <ul class="list-inline p-0 m-0 music-play-lists">

                                                <li data-toggle="modal" data-target="#exampleModalCenter" role="button">
                                                    <span><i class="fas fa-info-circle"></i></span>
                                                    <!-- <span class="count-box">19+</span> -->
                                                </li>
                                                <li><span><i class="ri-heart-fill"></i></span>
                                                    <span class="count-box">19+</span>
                                                </li>
                                                <li><span><i class="ri-add-line"></i></span></li>
                                            </ul>
                                        </div>
                                    </div>

                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section id="iq-suggestede" class="s-margin">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-sm-12 overflow-hidden">
                        <div class="iq-main-header d-flex align-items-center justify-content-between">
                            <h4 class="main-title">Suspense / Horror</h4>
                            <a class="iq-view-all" href="movie-category.php">View All</a>
                        </div>
                        <div class="suggestede-contens">
                            <ul class="list-inline favorites-slider row p-0 mb-0">
                                <li class="slide-item">

                                    <div class="block-images position-relative">
                                        <div class="img-box">
                                            <img src="{{asset('frontend/images/suggested/01.jpg')}}" class="img-fluid"
                                                 alt="">
                                        </div>
                                        <div class="block-description">
                                            <h6 class="iq-title"><a href="show-details.php">Inside the Sea</a></h6>
                                            <div class="movie-time d-flex align-items-center my-2">
                                                <div class="badge badge-secondary p-1 mr-2">11+</div>
                                                <span class="text-white">2h 30m</span>
                                            </div>
                                            <div class="hover-buttons">
                                                <a href="show-details.php">
                                                <span class="btn btn-hover iq-button"><i class="fa fa-play mr-1"
                                                                                         aria-hidden="true"></i>
                                                    Play Now</span>

                                                </a>
                                            </div>
                                        </div>
                                        <div class="block-social-info">
                                            <ul class="list-inline p-0 m-0 music-play-lists">

                                                <li data-toggle="modal" data-target="#exampleModalCenter" role="button">
                                                    <span><i class="fas fa-info-circle"></i></span>
                                                    <!-- <span class="count-box">19+</span> -->
                                                </li>
                                                <li><span><i class="ri-heart-fill"></i></span>
                                                    <span class="count-box">19+</span>
                                                </li>
                                                <li><span><i class="ri-add-line"></i></span></li>
                                            </ul>
                                        </div>
                                    </div>

                                </li>
                                <li class="slide-item">

                                    <div class="block-images position-relative">
                                        <div class="img-box">
                                            <img src="{{asset('frontend/images/suggested/02.jpg')}}" class="img-fluid"
                                                 alt="">
                                        </div>
                                        <div class="block-description">
                                            <h6 class="iq-title"><a href="show-details.php">Jumbo Queen</a></h6>
                                            <div class="movie-time d-flex align-items-center my-2">
                                                <div class="badge badge-secondary p-1 mr-2">9+</div>
                                                <span class="text-white">2 Seasons</span>
                                            </div>
                                            <div class="hover-buttons">
                                                <a href="show-details.php">
                                                <span class="btn btn-hover iq-button "><i class="fa fa-play mr-1"
                                                                                          aria-hidden="true"></i>
                                                    Play Now</span>

                                                </a>
                                            </div>
                                        </div>
                                        <div class="block-social-info">
                                            <ul class="list-inline p-0 m-0 music-play-lists">

                                                <li data-toggle="modal" data-target="#exampleModalCenter" role="button">
                                                    <span><i class="fas fa-info-circle"></i></span>
                                                    <!-- <span class="count-box">19+</span> -->
                                                </li>
                                                <li><span><i class="ri-heart-fill"></i></span>
                                                    <span class="count-box">19+</span>
                                                </li>
                                                <li><span><i class="ri-add-line"></i></span></li>
                                            </ul>
                                        </div>
                                    </div>

                                </li>
                                <li class="slide-item">

                                    <div class="block-images position-relative">
                                        <div class="img-box">
                                            <img src="{{asset('frontend/images/suggested/03.jpg')}}" class="img-fluid"
                                                 alt="">
                                        </div>
                                        <div class="block-description">
                                            <h6 class="iq-title"><a href="show-details.php">Unknown Land</a></h6>
                                            <div class="movie-time d-flex align-items-center my-2">
                                                <div class="badge badge-secondary p-1 mr-2">17+</div>
                                                <span class="text-white">2h 30m</span>
                                            </div>
                                            <div class="hover-buttons">
                                                <a href="show-details.php">
                                                <span class="btn btn-hover iq-button"><i class="fa fa-play mr-1"
                                                                                         aria-hidden="true"></i>
                                                    Play Now</span>

                                                </a>
                                            </div>
                                        </div>
                                        <div class="block-social-info">
                                            <ul class="list-inline p-0 m-0 music-play-lists">

                                                <li data-toggle="modal" data-target="#exampleModalCenter" role="button">
                                                    <span><i class="fas fa-info-circle"></i></span>
                                                    <!-- <span class="count-box">19+</span> -->
                                                </li>
                                                <li><span><i class="ri-heart-fill"></i></span>
                                                    <span class="count-box">19+</span>
                                                </li>
                                                <li><span><i class="ri-add-line"></i></span></li>
                                            </ul>
                                        </div>
                                    </div>

                                </li>
                                <li class="slide-item">
                                    <div class="block-images position-relative">
                                        <div class="img-box">
                                            <img src="{{asset('frontend/images/suggested/04.jpg')}}" class="img-fluid"
                                                 alt="">
                                        </div>
                                        <div class="block-description">
                                            <h6 class="iq-title"><a href="show-details.php">Friends</a></h6>
                                            <div class="movie-time d-flex align-items-center my-2">
                                                <div class="badge badge-secondary p-1 mr-2">14+</div>
                                                <span class="text-white">10 Seasons</span>
                                            </div>
                                            <div class="hover-buttons">
                                                <a href="show-details.php">
                                                <span class="btn btn-hover iq-button"><i class="fa fa-play mr-1"
                                                                                         aria-hidden="true"></i>
                                                    Play Now</span>

                                                </a>
                                            </div>
                                        </div>
                                        <div class="block-social-info">
                                            <ul class="list-inline p-0 m-0 music-play-lists">

                                                <li data-toggle="modal" data-target="#exampleModalCenter" role="button">
                                                    <span><i class="fas fa-info-circle"></i></span>
                                                    <!-- <span class="count-box">19+</span> -->
                                                </li>
                                                <li><span><i class="ri-heart-fill"></i></span>
                                                    <span class="count-box">19+</span>
                                                </li>
                                                <li><span><i class="ri-add-line"></i></span></li>
                                            </ul>
                                        </div>
                                    </div>
                                </li>
                                <li class="slide-item">

                                    <div class="block-images position-relative">
                                        <div class="img-box">
                                            <img src="{{asset('frontend/images/suggested/05.jpg')}}" class="img-fluid"
                                                 alt="">
                                        </div>
                                        <div class="block-description">
                                            <h6 class="iq-title"><a href="show-details.php">Blood Block</a></h6>
                                            <div class="movie-time d-flex align-items-center my-2">
                                                <div class="badge badge-secondary p-1 mr-2">13+</div>
                                                <span class="text-white">2h 40m</span>
                                            </div>
                                            <div class="hover-buttons">
                                                <a href="show-details.php">
                                                <span class="btn btn-hover iq-button"><i class="fa fa-play mr-1"
                                                                                         aria-hidden="true"></i>
                                                    Play Now</span>

                                                </a>
                                            </div>
                                        </div>
                                        <div class="block-social-info">
                                            <ul class="list-inline p-0 m-0 music-play-lists">

                                                <li data-toggle="modal" data-target="#exampleModalCenter" role="button">
                                                    <span><i class="fas fa-info-circle"></i></span>
                                                    <!-- <span class="count-box">19+</span> -->
                                                </li>
                                                <li><span><i class="ri-heart-fill"></i></span>
                                                    <span class="count-box">19+</span>
                                                </li>
                                                <li><span><i class="ri-add-line"></i></span></li>
                                            </ul>
                                        </div>
                                    </div>

                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section id="iq-suggestede" class="s-margin">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-sm-12 overflow-hidden">
                        <div class="iq-main-header d-flex align-items-center justify-content-between">
                            <h4 class="main-title">Action & Adventure</h4>
                            <a class="iq-view-all" href="movie-category.php">View All</a>
                        </div>
                        <div class="suggestede-contens">
                            <ul class="list-inline favorites-slider row p-0 mb-0">
                                <li class="slide-item">

                                    <div class="block-images position-relative">
                                        <div class="img-box">
                                            <img src="{{asset('frontend/images/suggested/01.jpg')}}" class="img-fluid"
                                                 alt="">
                                        </div>
                                        <div class="block-description">
                                            <h6 class="iq-title"><a href="show-details.php">Inside the Sea</a></h6>
                                            <div class="movie-time d-flex align-items-center my-2">
                                                <div class="badge badge-secondary p-1 mr-2">11+</div>
                                                <span class="text-white">2h 30m</span>
                                            </div>
                                            <div class="hover-buttons">
                                                <a href="show-details.php">
                                                <span class="btn btn-hover iq-button"><i class="fa fa-play mr-1"
                                                                                         aria-hidden="true"></i>
                                                    Play Now</span>

                                                </a>
                                            </div>
                                        </div>
                                        <div class="block-social-info">
                                            <ul class="list-inline p-0 m-0 music-play-lists">
                                                <!-- <li class="share">
                                                        <span><i class="ri-share-fill"></i></span>
                                                        <div class="share-box">
                                                           <div class="d-flex align-items-center">
                                                              <a href="https://www.facebook.com/sharer?u=https://iqonic.design/wp-themes/streamit_wp/movie/shadow/" target="_blank" rel="noopener noreferrer" class="share-ico" tabindex="0"><i class="ri-facebook-fill"></i></a>
                                                              <a href="https://twitter.com/intent/tweet?text=Currentlyreading" target="_blank" rel="noopener noreferrer" class="share-ico" tabindex="0"><i class="ri-twitter-fill"></i></a>
                                                              <a href="#" data-link="https://iqonic.design/wp-themes/streamit_wp/movie/shadow/" class="share-ico iq-copy-link" tabindex="0"><i class="ri-links-fill"></i></a>
                                                           </div>
                                                        </div>
                                                     </li> -->
                                                <li data-toggle="modal" data-target="#exampleModalCenter" role="button">
                                                    <span><i class="fas fa-info-circle"></i></span>
                                                    <!-- <span class="count-box">19+</span> -->
                                                </li>
                                                <li><span><i class="ri-heart-fill"></i></span>
                                                    <span class="count-box">19+</span>
                                                </li>
                                                <li><span><i class="ri-add-line"></i></span></li>
                                            </ul>
                                        </div>
                                    </div>

                                </li>
                                <li class="slide-item">

                                    <div class="block-images position-relative">
                                        <div class="img-box">
                                            <img src="{{asset('frontend/images/suggested/02.jpg')}}" class="img-fluid"
                                                 alt="">
                                        </div>
                                        <div class="block-description">
                                            <h6 class="iq-title"><a href="show-details.php">Jumbo Queen</a></h6>
                                            <div class="movie-time d-flex align-items-center my-2">
                                                <div class="badge badge-secondary p-1 mr-2">9+</div>
                                                <span class="text-white">2 Seasons</span>
                                            </div>
                                            <div class="hover-buttons">
                                                <a href="show-details.php">
                                                <span class="btn btn-hover iq-button "><i class="fa fa-play mr-1"
                                                                                          aria-hidden="true"></i>
                                                    Play Now</span>

                                                </a>
                                            </div>
                                        </div>
                                        <div class="block-social-info">
                                            <ul class="list-inline p-0 m-0 music-play-lists">

                                                <li data-toggle="modal" data-target="#exampleModalCenter" role="button">
                                                    <span><i class="fas fa-info-circle"></i></span>
                                                    <!-- <span class="count-box">19+</span> -->
                                                </li>
                                                <li><span><i class="ri-heart-fill"></i></span>
                                                    <span class="count-box">19+</span>
                                                </li>
                                                <li><span><i class="ri-add-line"></i></span></li>
                                            </ul>
                                        </div>
                                    </div>

                                </li>
                                <li class="slide-item">

                                    <div class="block-images position-relative">
                                        <div class="img-box">
                                            <img src="{{asset('frontend/images/suggested/03.jpg')}}" class="img-fluid"
                                                 alt="">
                                        </div>
                                        <div class="block-description">
                                            <h6 class="iq-title"><a href="show-details.php">Unknown Land</a></h6>
                                            <div class="movie-time d-flex align-items-center my-2">
                                                <div class="badge badge-secondary p-1 mr-2">17+</div>
                                                <span class="text-white">2h 30m</span>
                                            </div>
                                            <div class="hover-buttons">
                                                <a href="show-details.php">
                                                <span class="btn btn-hover iq-button"><i class="fa fa-play mr-1"
                                                                                         aria-hidden="true"></i>
                                                    Play Now</span>

                                                </a>
                                            </div>
                                        </div>
                                        <div class="block-social-info">
                                            <ul class="list-inline p-0 m-0 music-play-lists">
                                                <!-- <li class="share">
                                                        <span><i class="ri-share-fill"></i></span>
                                                        <div class="share-box">
                                                           <div class="d-flex align-items-center">
                                                              <a href="https://www.facebook.com/sharer?u=https://iqonic.design/wp-themes/streamit_wp/movie/shadow/" target="_blank" rel="noopener noreferrer" class="share-ico" tabindex="0"><i class="ri-facebook-fill"></i></a>
                                                              <a href="https://twitter.com/intent/tweet?text=Currentlyreading" target="_blank" rel="noopener noreferrer" class="share-ico" tabindex="0"><i class="ri-twitter-fill"></i></a>
                                                              <a href="#" data-link="https://iqonic.design/wp-themes/streamit_wp/movie/shadow/" class="share-ico iq-copy-link" tabindex="0"><i class="ri-links-fill"></i></a>
                                                           </div>
                                                        </div>
                                                     </li> -->
                                                <li data-toggle="modal" data-target="#exampleModalCenter" role="button">
                                                    <span><i class="fas fa-info-circle"></i></span>
                                                    <!-- <span class="count-box">19+</span> -->
                                                </li>
                                                <li><span><i class="ri-heart-fill"></i></span>
                                                    <span class="count-box">19+</span>
                                                </li>
                                                <li><span><i class="ri-add-line"></i></span></li>
                                            </ul>
                                        </div>
                                    </div>

                                </li>
                                <li class="slide-item">
                                    <div class="block-images position-relative">
                                        <div class="img-box">
                                            <img src="{{asset('frontend/images/suggested/04.jpg')}}" class="img-fluid"
                                                 alt="">
                                        </div>
                                        <div class="block-description">
                                            <h6 class="iq-title"><a href="show-details.php">Friends</a></h6>
                                            <div class="movie-time d-flex align-items-center my-2">
                                                <div class="badge badge-secondary p-1 mr-2">14+</div>
                                                <span class="text-white">10 Seasons</span>
                                            </div>
                                            <div class="hover-buttons">
                                                <a href="show-details.php">
                                                <span class="btn btn-hover iq-button"><i class="fa fa-play mr-1"
                                                                                         aria-hidden="true"></i>
                                                    Play Now</span>

                                                </a>
                                            </div>
                                        </div>
                                        <div class="block-social-info">
                                            <ul class="list-inline p-0 m-0 music-play-lists">
                                                <!-- <li class="share">
                                                        <span><i class="ri-share-fill"></i></span>
                                                        <div class="share-box">
                                                           <div class="d-flex align-items-center">
                                                              <a href="https://www.facebook.com/sharer?u=https://iqonic.design/wp-themes/streamit_wp/movie/shadow/" target="_blank" rel="noopener noreferrer" class="share-ico" tabindex="0"><i class="ri-facebook-fill"></i></a>
                                                              <a href="https://twitter.com/intent/tweet?text=Currentlyreading" target="_blank" rel="noopener noreferrer" class="share-ico" tabindex="0"><i class="ri-twitter-fill"></i></a>
                                                              <a href="#" data-link="https://iqonic.design/wp-themes/streamit_wp/movie/shadow/" class="share-ico iq-copy-link" tabindex="0"><i class="ri-links-fill"></i></a>
                                                           </div>
                                                        </div>
                                                     </li> -->
                                                <li data-toggle="modal" data-target="#exampleModalCenter" role="button">
                                                    <span><i class="fas fa-info-circle"></i></span>
                                                    <!-- <span class="count-box">19+</span> -->
                                                </li>
                                                <li><span><i class="ri-heart-fill"></i></span>
                                                    <span class="count-box">19+</span>
                                                </li>
                                                <li><span><i class="ri-add-line"></i></span></li>
                                            </ul>
                                        </div>
                                    </div>
                                </li>
                                <li class="slide-item">

                                    <div class="block-images position-relative">
                                        <div class="img-box">
                                            <img src="{{asset('frontend/images/suggested/05.jpg')}}" class="img-fluid"
                                                 alt="">
                                        </div>
                                        <div class="block-description">
                                            <h6 class="iq-title"><a href="show-details.php">Blood Block</a></h6>
                                            <div class="movie-time d-flex align-items-center my-2">
                                                <div class="badge badge-secondary p-1 mr-2">13+</div>
                                                <span class="text-white">2h 40m</span>
                                            </div>
                                            <div class="hover-buttons">
                                                <a href="show-details.php">
                                                <span class="btn btn-hover iq-button"><i class="fa fa-play mr-1"
                                                                                         aria-hidden="true"></i>
                                                    Play Now</span>

                                                </a>
                                            </div>
                                        </div>
                                        <div class="block-social-info">
                                            <ul class="list-inline p-0 m-0 music-play-lists">
                                                <!-- <li class="share">
                                                        <span><i class="ri-share-fill"></i></span>
                                                        <div class="share-box">
                                                           <div class="d-flex align-items-center">
                                                              <a href="https://www.facebook.com/sharer?u=https://iqonic.design/wp-themes/streamit_wp/movie/shadow/" target="_blank" rel="noopener noreferrer" class="share-ico" tabindex="0"><i class="ri-facebook-fill"></i></a>
                                                              <a href="https://twitter.com/intent/tweet?text=Currentlyreading" target="_blank" rel="noopener noreferrer" class="share-ico" tabindex="0"><i class="ri-twitter-fill"></i></a>
                                                              <a href="#" data-link="https://iqonic.design/wp-themes/streamit_wp/movie/shadow/" class="share-ico iq-copy-link" tabindex="0"><i class="ri-links-fill"></i></a>
                                                           </div>
                                                        </div>
                                                     </li> -->
                                                <li data-toggle="modal" data-target="#exampleModalCenter" role="button">
                                                    <span><i class="fas fa-info-circle"></i></span>
                                                    <!-- <span class="count-box">19+</span> -->
                                                </li>
                                                <li><span><i class="ri-heart-fill"></i></span>
                                                    <span class="count-box">19+</span>
                                                </li>
                                                <li><span><i class="ri-add-line"></i></span></li>
                                            </ul>
                                        </div>
                                    </div>

                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <div class="modal fade" id="ViewModalData" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
             aria-hidden="true">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content" style="background:#191919">

                </div>
            </div>
        </div>
    </div>
@endsection
<script src="{{asset('frontend/js/jquery-3.4.1.min.js')}}"></script>
<script>
    $(document).on('click','a[data-toggle=ViewSHowDetail]',function(e){
        e.preventDefault();
        //$('#ViewModalData').load($(this).attr("href"));
        $('#ViewModalData').find('.modal-content').load($(this).attr("href"));
        $('#ViewModalData').modal('show');
    });
</script>