@extends('includes.layouts')

@section('content')
    <main id="main" class="genres-main">
        @if($movie_genres->count())
            <section class="iq-genres-section">
                <div class="container-fluid">
                    <div class="iq-main-header d-flex align-items-center justify-content-between mt-5 mt-lg-0">
                        <h4 class="main-title">Films</h4>
                    </div>
                    <ul class=" row list-inline  mb-0 iq-rtl-direction iq_genres-contents">
                        @foreach($movie_genres as $movie_genre)
                            <li class="slide-item col-lg-3 col-md-4 col-sm-6">
                                <div class="block-images position-relative  watchlist-first">
                                    <div class="img-box">
                                        <img src="@if($movie_genre->image) {{ $movie_genre->image }} @else {{ asset('images/01.jpg') }} @endif" class="img-fluid" loading="lazy" alt="">
                                    </div>
                                    <div class="block-description d-flex justify-content-center flex-column text-center">
                                        <h6 class="iq-title"><a href="{{ route('movie-category', ['category' => $movie_genre->id]) }}">{{ $movie_genre->name }}</a></h6>
                                    </div>
                                </div>
                            </li>
                        @endforeach
                    </ul>
                    <!--<button class="btn btn-hover hide-me" type="button" data-toggle="collapse" data-target="#collapseExample1"
                            aria-expanded="false" aria-controls="collapseExample1">
                        <span class="genres-btn">LOAD MORE</span>
                    </button>
                    <div class="collapse" id="collapseExample1">
                        <ul class=" row list-inline  mb-0 iq-rtl-direction iq_genres-contents">
                            <li class="slide-item col-lg-3 col-md-4 col-sm-6">
                                <div class="block-images position-relative  watchlist-first">
                                    <div class="img-box">
                                        <img src="images/genre/22.jpg" class="img-fluid" loading="lazy" alt="">
                                    </div>
                                    <div class="block-description d-flex justify-content-center flex-column text-center">
                                        <h6 class="iq-title"><a href="view-all.html">Action</a></h6>
                                    </div>
                            </li>
                            <li class="slide-item col-lg-3 col-md-4 col-sm-6">
                                <div class="block-images position-relative">
                                    <div class="img-box">
                                        <img src="images/genre/29.jpg" class="img-fluid" loading="lazy" alt="">
                                    </div>
                                    <div class="block-description d-flex justify-content-center flex-column text-center">
                                        <h6 class="iq-title"><a href="view-all.html">Adventure</a></h6>
                                    </div>
                            </li>
                            <li class="slide-item col-lg-3 col-md-4 col-sm-6">
                                <div class="block-images position-relative">
                                    <div class="img-box">
                                        <img src="images/genre/44.jpg" class="img-fluid" loading="lazy" alt="">
                                    </div>
                                    <div class="block-description d-flex justify-content-center flex-column text-center">
                                        <h6 class="iq-title"><a href="view-all.html">Comedy</a></h6>
                                    </div>
                            </li>
                            <li class="slide-item col-lg-3 col-md-4 col-sm-6">
                                <div class="block-images position-relative">
                                    <div class="img-box">
                                        <img src="images/genre/32.jpg" class="img-fluid" loading="lazy" alt="">
                                    </div>
                                    <div class="block-description d-flex justify-content-center flex-column text-center">
                                        <h6 class="iq-title"><a href="view-all.html">Crime</a></h6>
                                    </div>
                            </li>
                            <li class="slide-item col-lg-3 col-md-4 col-sm-6">
                                <div class="block-images position-relative  watchlist-first">
                                    <div class="img-box">
                                        <img src="images/genre/45.jpg" class="img-fluid" loading="lazy" alt="">
                                    </div>
                                    <div class="block-description d-flex justify-content-center flex-column text-center">
                                        <h6 class="iq-title"><a href="view-all.html">Drama</a></h6>
                                    </div>
                            </li>
                            <li class="slide-item col-lg-3 col-md-4 col-sm-6">
                                <div class="block-images position-relative">
                                    <div class="img-box">
                                        <img src="images/genre/46.jpg" class="img-fluid" loading="lazy" alt="">
                                    </div>
                                    <div class="block-description d-flex justify-content-center flex-column text-center">
                                        <h6 class="iq-title"><a href="view-all.html">Fantasy</a></h6>
                                    </div>
                            </li>
                            <li class="slide-item col-lg-3 col-md-4 col-sm-6">
                                <div class="block-images position-relative">
                                    <div class="img-box">
                                        <img src="images/genre/47.jpg" class="img-fluid" loading="lazy" alt="">
                                    </div>
                                    <div class="block-description d-flex justify-content-center flex-column text-center">
                                        <h6 class="iq-title"><a href="view-all.html">History</a></h6>
                                    </div>
                            </li>
                            <li class="slide-item col-lg-3 col-md-4 col-sm-6">
                                <div class="block-images position-relative">
                                    <div class="img-box">
                                        <img src="images/genre/29.jpg" class="img-fluid" loading="lazy" alt="">
                                    </div>
                                    <div class="block-description d-flex justify-content-center flex-column text-center">
                                        <h6 class="iq-title"><a href="view-all.html">Mystery</a></h6>
                                    </div>
                            </li>
                        </ul>
                    </div>-->
                </div>
            </section>
        @endif
        @if($show_genres->count())
            <section class="iq-genres-section">
                <div class="container-fluid">
                    <div class="iq-main-header d-flex align-items-center justify-content-between">
                        <h4 class="main-title">Séries TV</h4>
                    </div>
                    <ul class=" row list-inline  mb-0 iq-rtl-direction iq_genres-contents">
                        @foreach($show_genres as $show_genre)
                            <li class="slide-item col-lg-3 col-md-4 col-sm-6">
                                <div class="block-images position-relative  watchlist-first">
                                    <div class="img-box">
                                        <img src="@if($show_genre->image) {{ $show_genre->image }} @else {{ asset('images/01.jpg') }} @endif" class="img-fluid" loading="lazy" alt="">
                                    </div>
                                    <div class="block-description d-flex justify-content-center flex-column text-center">
                                        <h6 class="iq-title"><a href="{{ route('show-category', ['category' => $show_genre->id]) }}">{{ $show_genre->name }}</a></h6>
                                    </div>
                                </div>
                            </li>
                        @endforeach
                    </ul>
                </div>
            </section>
        @endif
        @if($music_genres->count())
            <section class="iq-genres-section">
                <div class="container-fluid">
                    <div class="iq-main-header d-flex align-items-center justify-content-between">
                        <h4 class="main-title">Musiques</h4>
                    </div>
                    <ul class=" row list-inline  mb-0 iq-rtl-direction iq_genres-contents">
                        @foreach($music_genres as $music_genre)
                            <li class="slide-item col-lg-3 col-md-4 col-sm-6">
                                <div class="block-images position-relative  watchlist-first">
                                    <div class="img-box">
                                        <img src="@if($music_genre->image) {{ $music_genre->image }} @else {{ asset('images/01.jpg') }} @endif" class="img-fluid" loading="lazy" alt="">
                                    </div>
                                    <div class="block-description d-flex justify-content-center flex-column text-center">
                                        <h6 class="iq-title"><a href="{{ route('music-category', ['category' => $music_genre->id]) }}">{{ $music_genre->name }}</a></h6>
                                    </div>
                                </div>
                            </li>
                        @endforeach
                    </ul>
                </div>
            </section>
        @endif
        @if($ebook_genres->count())
            <section class="iq-genres-section">
                <div class="container-fluid">
                    <div class="iq-main-header d-flex align-items-center justify-content-between">
                        <h4 class="main-title">E-books</h4>
                    </div>
                    <ul class=" row list-inline  mb-0 iq-rtl-direction iq_genres-contents">
                        @foreach($ebook_genres as $ebook_genre)
                            <li class="slide-item col-lg-3 col-md-4 col-sm-6">
                                <div class="block-images position-relative  watchlist-first">
                                    <div class="img-box">
                                        <img src="@if($ebook_genre->image) {{ $ebook_genre->image }} @else {{ asset('images/01.jpg') }} @endif" class="img-fluid" loading="lazy" alt="">
                                    </div>
                                    <div class="block-description d-flex justify-content-center flex-column text-center">
                                        <h6 class="iq-title"><a href="{{ route('ebook-category', ['category' => $ebook_genre->id]) }}">{{ $ebook_genre->name }}</a></h6>
                                    </div>
                                </div>
                            </li>
                        @endforeach
                    </ul>
                </div>
            </section>
        @endif
    </main>
@endsection