@extends('includes.layouts')

@section('content')
    <div class="iq-breadcrumb-one  iq-bg-over" style="background-image: url({{ asset('images/banner/movies.jpg') }});">
        <div class="container-fluid">
            <div class="row align-items-center">
                <div class="col-sm-12">
                    <nav aria-label="breadcrumb" class="text-center iq-breadcrumb-two">
                        <h2 class="title">Voir Tout</h2>
                        <ol class="breadcrumb main-bg">
                            <li class="breadcrumb-item"><a href="{{ route('home') }}">Accueil</a></li>
                            <li class="breadcrumb-item active">Films</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
    </div>
    <main id="main" class="site-main watchlist-contens">
        <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>
            @if($movies->count())
                <ul class=" row list-inline  mb-0 iq-rtl-direction ">
                    @foreach($movies as $movie)
                        @if($movie->image)
                            <li class="slide-item col-lg-3 col-md-4 col-6 mb-4">
                                <div class="block-images position-relative  watchlist-first">
                                    <div class="img-box">
                                        <img src="@if($movie->image) {{ $movie->image }} @else {{ asset('images/01.jpg') }} @endif" class="img-fluid" alt="" loading="lazy">
                                    </div>
                                    <div class="block-description">
                                        <h6 class="iq-title text-left"><a href="{{ route('moviedetails', ['movie' => $movie->id]) }}">{{ $movie->title }}</a></h6>
                                        <div class="movie-time d-flex align-items-center my-2">
                                            <span class="text-white">{{ $movie->duration }}</span>
                                        </div>
                                        <div class="hover-buttons text-left">
                                            <a href="{{ route('moviedetails', ['movie' => $movie->id]) }}" role="button" class="btn btn-hover">
                                                <i class="fa fa-play mr-1" aria-hidden="true"></i>Jouer
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </li>
                        @endif
                    @endforeach
                </ul>
            @else
                <p>Pas de films</p>
            @endif
            {!! $movies->links() !!}
        </div>
    </main>
@endsection