@extends('front.layouts.front')
@section('content')
    <!-- page title -->
    <section class="section heroSec-banner" data-bg="{{ url('assets/img/bg.jpg') }}">

        {{-- <div class="section__wrap">
            <!-- section title -->
            <h2 class="section__title">Catalog <span>(35430 products)</span></h2>
            <!-- end section title -->

            <!-- breadcrumb -->
            <ul class="breadcrumb">
                <li class="breadcrumb__item"><a href="{{ route('front.index') }}">Home</a></li>
                <li class="breadcrumb__item breadcrumb__item--active">Catalog</li>
            </ul>
            <!-- end breadcrumb -->
        </div> --}}
        <!-- Begin:: Movie banner -->
        <div class="container-fluid detail-banner page-container">
            <div class="owl-carousel owl-theme movie-slider">
                @foreach ($Featureds as $featured)
                    <div class="item">
                        <div class="img-poster">
                            <div @if($featured->title->featuredimage == null) style="background-image: url({{ $featured->title->poster }});" @else  style="background-image: url({{ $featured->title->featuredimage }});" @endif class="detail-img"></div>
                            <div class="about-movie">
                                <h1>{{ $featured->title->title }}</h1>
                                <div class="content-meta mt-lg-3 mt-xl-4 mt-3">
                                    <span class="m_duration">{{ floor($featured->title->running_time / 60) . ' Hr ' . ($featured->title->running_time - floor($featured->title->running_time / 60) * 60) . ' min' }}</span>
                                    <span class="m_year">{{ $featured->title->year }}</span>
                                    <span class="m_type">
                                        {{-- @foreach ($featured->title->genres as $key => $genres)
                                            {{ $genres->genres->title }},
                                        @endforeach --}}
                                        {{ $featured->title->genre }}
                                    </span>
                                </div>
                                <p class="mt-3 text-white-50">{{ $featured->title->description }}</p>

                                <p class="mt-3 text-white-50">Created By :
                                    {{-- @foreach ($featured->title->casts as $key => $casts) --}}
                                        @if ($featured->title->type == '1')
                                            {{ $featured->title->directors }}
                                            {{-- @if ($key == 3) @break @endif, --}}
                                        @endif
                                        @if ($featured->title->type == '2')
                                            {{ $featured->title->creaters }}
                                            {{-- @if ($key == 3) @break @endif, --}}
                                        @endif
                                    {{-- @endforeach --}}
                                </p>
                                <p class="mt-3 text-white-50">Starring :
                                    {{-- @foreach ($featured->title->casts as $key => $casts)
                                        @if ($casts->cast_type == 1)
                                            {{ $casts->casts->name }}
                                            @if ($key == 3) @break @endif,
                                        @endif
                                    @endforeach --}}
                                    {{ $featured->title->actors }}
                                </p>

                                <div class="mt-xxl-5 mt-3 form-row">
                                    <div class="col-md-4 col-5">
                                        <a href="{{ route('moviedetail',[$featured->title->ttid]) }}" class="btn card__buy w-100 px-4 me-2 px-4 me-2"><i class="fas fa-play small mr-2"></i>Play</a>
                                    </div>
                                    {{-- <div class="col-md-4 col-5">
                                        <a href="javascript:void(0)" class="btn card__buy w-100 card__buy--subscribe">Watch list</a>
                                    </div> --}}
                                    <div>
                                        <button class="card__favorite favorite_{{ $featured->title->id }}" type="button" data-id="{{ $featured->title->id }}">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512">
                                                <path d="M352.92,80C288,80,256,144,256,144s-32-64-96.92-64C106.32,80,64.54,124.14,64,176.81c-1.1,109.33,86.73,187.08,183,252.42a16,16,0,0,0,18,0c96.26-65.34,184.09-143.09,183-252.42C447.46,124.14,405.68,80,352.92,80Z"
                                                style="@if($featured->title->favorite) fill:#a782e9; @else fill:none; @endif stroke-linecap: round; stroke-linejoin: round; stroke-width: 32px;"></path>
                                            </svg>
                                        </button>
                                    </div>
                                    <div class="dropdown d-inline-block share-drp col-2">
                                        <a href="javascript:void(0)" id="share-drp" class="btn btn-share" data-toggle="dropdown" aria-expanded="false">
                                            <svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="share-alt" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"
                                                class="svg-inline--fa fa-share-alt fa-w-14 fa-7x">
                                                <path fill="currentColor" d="M352 320c-25.6 0-48.9 10-66.1 26.4l-98.3-61.5c5.9-18.8 5.9-39.1 0-57.8l98.3-61.5C303.1 182 326.4 192 352 192c53 0 96-43 96-96S405 0 352 0s-96 43-96 96c0 9.8 1.5 19.6 4.4 28.9l-98.3 61.5C144.9 170 121.6 160 96 160c-53 0-96 43-96 96s43 96 96 96c25.6 0 48.9-10 66.1-26.4l98.3 61.5c-2.9 9.4-4.4 19.1-4.4 28.9 0 53 43 96 96 96s96-43 96-96-43-96-96-96zm0-272c26.5 0 48 21.5 48 48s-21.5 48-48 48-48-21.5-48-48 21.5-48 48-48zM96 304c-26.5 0-48-21.5-48-48s21.5-48 48-48 48 21.5 48 48-21.5 48-48 48zm256 160c-26.5 0-48-21.5-48-48s21.5-48 48-48 48 21.5 48 48-21.5 48-48 48z"></path>
                                            </svg>
                                        </a>
                                        <ul class="dropdown-menu detail-share memes-share" aria-labelledby="share-drp">
                                            <li class="d-inline-flex"><a class="dropdown-item" href="https://www.facebook.com/sharer/sharer.php?u={{ route('moviedetail',[$featured->title->ttid]) }}"><i class="fab fa-facebook-f"></i></a></li>
                                            <li class="d-inline-flex"><a class="dropdown-item" href="https://twitter.com/intent/tweet?text={{ route('moviedetail',[$featured->title->ttid]) }}"><i class="fab fa-twitter"></i></a></li>
                                            <li class="d-inline-flex"><a class="dropdown-item copy_text" href="{{ route('moviedetail',[$featured->title->ttid]) }}"><i class="fas fa-link"></i></a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach

                {{-- <div class="item">
                    <div class="img-poster">
                        <div style="background-image: url({{ url('assets/img/strip2.png') }});" class="detail-img"></div>
                        <div class="about-movie">
                            <h1>The Strip</h1>
                            <div class="content-meta mt-lg-3 mt-xl-4 mt-3">
                                <span class="m_duration">1 hr 59 min</span>
                                <span class="m_year">2019</span>
                                <span class="m_type">Family</span>
                            </div>
                            <p class="mt-3 text-white-50">A successful lawyer opens up a male strip club after she is deserted by her husband.</p>

                            <p class="mt-3 text-white-50">Created By : John Doe</p>
                            <p class="mt-3 text-white-50">Starring : John Doe, Jeny Doe</p>

                            <div class="mt-xxl-5 mt-3 form-row">
                                <div class="col-md-4 col-5">
                                    <a href="javascript:void(0)" class="btn card__buy w-100 px-4 me-2 px-4 me-2"><i class="fas fa-play small mr-2"></i> Play</a>
                                </div>
                                <div class="col-md-4 col-5">
                                    <a href="javascript:void(0)" class="btn card__buy w-100 card__buy--subscribe">Watch list</a>
                                </div>
                                <div class="dropdown d-inline-block share-drp col-2">
                                    <a href="javascript:void(0)" id="share-drp" class="btn btn-share card__favorite" data-bs-toggle="dropdown" aria-expanded="false">
                                        <svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="share-alt" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="svg-inline--fa fa-share-alt fa-w-14 fa-7x">
                                            <path fill="currentColor" d="M352 320c-25.6 0-48.9 10-66.1 26.4l-98.3-61.5c5.9-18.8 5.9-39.1 0-57.8l98.3-61.5C303.1 182 326.4 192 352 192c53 0 96-43 96-96S405 0 352 0s-96 43-96 96c0 9.8 1.5 19.6 4.4 28.9l-98.3 61.5C144.9 170 121.6 160 96 160c-53 0-96 43-96 96s43 96 96 96c25.6 0 48.9-10 66.1-26.4l98.3 61.5c-2.9 9.4-4.4 19.1-4.4 28.9 0 53 43 96 96 96s96-43 96-96-43-96-96-96zm0-272c26.5 0 48 21.5 48 48s-21.5 48-48 48-48-21.5-48-48 21.5-48 48-48zM96 304c-26.5 0-48-21.5-48-48s21.5-48 48-48 48 21.5 48 48-21.5 48-48 48zm256 160c-26.5 0-48-21.5-48-48s21.5-48 48-48 48 21.5 48 48-21.5 48-48 48z"></path>
                                        </svg>
                                    </a>
                                    <ul class="dropdown-menu detail-share" aria-labelledby="share-drp">
                                        <li class="d-inline-flex"><a class="dropdown-item" href="#"><i class="fab fa-facebook-f"></i></a></li>
                                        <li class="d-inline-flex"><a class="dropdown-item" href="#"><i class="fab fa-twitter"></i></a></li>
                                        <li class="d-inline-flex"><a class="dropdown-item" href="#"><i class="fas fa-link"></i></a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div> --}}
            </div>
        </div>
        <!-- End:: Movie banner -->
    </section>
    <!-- end page title -->

    <!-- section -->
    <section class="section section--last section--catalog pt-0">
        <div class="container">
            <!-- catalog -->
            <div class="row catalog">
                <!-- filter wrap -->
                <div class="col-12 col-lg-20">
                    <div class="row">
                        <div class="col-12">
                            <div class="filter-wrap">
                                <button class="filter-wrap__btn" type="button" data-toggle="collapse" data-target="#collapseFilter" aria-expanded="false" aria-controls="collapseFilter">Open filter</button>
                                <form action="{{ route('browse') }}" method="get">
                                    <div class="collapse filter-wrap__content" id="collapseFilter">
                                        <!-- filter -->
                                        <div class="filter">
                                            <h4 class="filter__title">Filters <a href="{{ route('browse') }}">Clear all</a></h4>

                                            <div class="filter__group">
                                                <label class="filter__label">Keyword:</label>
                                                <input type="text" class="filter__input" name="key" @if ($send['key'] != null) value="{{ $send['key'] }}" @endif placeholder="Keyword">
                                            </div>

                                            <div class="filter__group">
                                                <label for="sort" class="filter__label">Sort by:</label>

                                                <div class="filter__select-wrap">
                                                    <select name="sort" id="sort" class="filter__select" >
                                                        <option value="1" @if ($send['sort'] == 1) selected @endif>Relevance</option>
                                                        <option value="2" @if ($send['sort'] == 2) selected @endif>Watchest</option>
                                                        <option value="3" @if ($send['sort'] == 3) selected @endif>Oldest</option>
                                                    </select>
                                                </div>
                                            </div>

                                            <div class="filter__group">
                                                <label class="filter__label">Platforms:</label>
                                                <ul class="filter__checkboxes">
                                                    <li>
                                                        <input id="type1" type="checkbox" name="t[]" value="1" @if (in_array('1', $send['t'])) checked @endif>
                                                        <label for="type1">Movies</label>
                                                    </li>
                                                    <li>
                                                        <input id="type2" type="checkbox" name="t[]" value="2" @if (in_array('2', $send['t'])) checked @endif>
                                                        <label for="type2">Series</label>
                                                    </li>
                                                    <li>
                                                        <input id="type3" type="checkbox" name="t[]" value="3" @if (in_array('3', $send['t'])) checked @endif>
                                                        <label for="type3">Film Festival</label>
                                                    </li>
                                                    <li>
                                                        <input id="type4" type="checkbox" name="t[]" value="4" @if (in_array('4', $send['t'])) checked @endif>
                                                        <label for="type4">Music</label>
                                                    </li>
                                                </ul>
                                            </div>

                                            <div class="filter__group">
                                                <label class="filter__label">Genres:</label>
                                                <ul class="filter__checkboxes">
                                                    @foreach (Genres() as $genre)
                                                        <li>
                                                            <input id="genre{{ $genre->id }}" type="checkbox" name="g[]" value="{{ $genre->id }}" @if (in_array($genre->id, $send['g'])) checked @endif>
                                                            <label for="genre{{ $genre->id }}">{{ $genre->title }}</label>
                                                        </li>
                                                    @endforeach
                                                </ul>
                                            </div>

                                            <div class="filter__group">
                                                <button class="filter__btn" type="submit">APPLY FILTER</button>
                                            </div>
                                        </div>
                                        <!-- end filter -->
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- end filter wrap -->

                <!-- content wrap -->
                <div class="col-12 col-lg-80">
                    <h5 class="text-white"></h5>
                    <div class="section__title-wrap mb-4">
                        <h2 class="section__title section__title--title"><b>Featured</b> & Recommended</h2>
                        <div class="section__nav-wrap">
                            <button class="section__nav section__nav--bg section__nav--prev" type="button"
                                data-nav=".feature-slider">
                                <svg xmlns='http://www.w3.org/2000/svg' width='512' height='512' viewBox='0 0 512 512'>
                                    <polyline points='328 112 184 256 328 400' style='fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:48px' />
                                </svg>
                            </button>

                            <button class="section__nav section__nav--bg section__nav--next" type="button" data-nav=".feature-slider">
                                <svg xmlns='http://www.w3.org/2000/svg' width='512' height='512' viewBox='0 0 512 512'>
                                    <polyline points='184 112 328 256 184 400' style='fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:48px' />
                                </svg>
                            </button>
                        </div>
                    </div>
                    <div class="feature-slider owl-carousel owl-them">
                        @foreach ($Featureds as $featured)
                            <div class="item">
                                <div class="form-row featured-sec">
                                    <div class="col-md-8">
                                        <div class="featured-banner">
                                            {{-- {{dump($featured->title->poster)}} --}}
                                            <img src="{{ $featured->title->poster }}" class="img-fluid" alt="{{ $featured->title->title }}" />
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <h4 class="text-white mb-3">{{ $featured->title->title }}</h4>
                                        <div class="form-row movie-thumb-container">
                                            @foreach ($featured->title->posters as $posters)
                                                <div class="col-md-4 col-3  my-1">
                                                    <img src="{{ url($posters->path) }}" class="img-fluid movie-thumb" alt="{{ url($posters->path) }}" />
                                                </div>
                                            @endforeach
                                            {{-- <div class="col-6 pl-2 my-2">
                                                <img src="{{ url('assets/img/strip2.png') }}" class="img-fluid movie-thumb" alt="movie banner" />
                                            </div>
                                            <div class="col-6 pr-2 my-2">
                                                <img src="{{ url('assets/img/strip2.png') }}" class="img-fluid movie-thumb" alt="movie banner" />
                                            </div>
                                            <div class="col-6 pl-2 my-2">
                                                <img src="{{ url('assets/img/strip2.png') }}" class="img-fluid movie-thumb" alt="movie banner" />
                                            </div>
                                            <div class="col-6 pr-2 my-2 d-none d-md-block">
                                                <img src="{{ url('assets/img/strip2.png') }}" class="img-fluid movie-thumb" alt="movie banner" />
                                            </div>
                                            <div class="col-6 pl-2 my-2 d-none d-md-block">
                                                <img src="{{ url('assets/img/strip2.png') }}" class="img-fluid movie-thumb" alt="movie banner" />
                                            </div> --}}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                            {{-- <div class="item">
                                <div class="form-row">
                                    <div class="col-md-8">
                                        <div class="featured-banner">
                                            <img src="{{ url('assets/img/thestrip.png') }}" class="img-fluid" alt="movie banner" />
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <h4 class="text-white mb-3">The Strip</h4>
                                        <div class="row">
                                            <div class="col-6 pr-2 my-2">
                                                <img src="{{ url('assets/img/strip2.png') }}" class="img-fluid movie-thumb" alt="movie banner" />
                                            </div>
                                            <div class="col-6 pl-2 my-2">
                                                <img src="{{ url('assets/img/strip2.png') }}" class="img-fluid movie-thumb" alt="movie banner" />
                                            </div>
                                            <div class="col-6 pr-2 my-2">
                                                <img src="{{ url('assets/img/strip2.png') }}" class="img-fluid movie-thumb" alt="movie banner" />
                                            </div>
                                            <div class="col-6 pl-2 my-2">
                                                <img src="{{ url('assets/img/strip2.png') }}" class="img-fluid movie-thumb" alt="movie banner" />
                                            </div>
                                            <div class="col-6 pr-2 my-2 d-none d-md-block">
                                                <img src="{{ url('assets/img/strip2.png') }}" class="img-fluid movie-thumb" alt="movie banner" />
                                            </div>
                                            <div class="col-6 pl-2 my-2 d-none d-md-block">
                                                <img src="{{ url('assets/img/strip2.png') }}" class="img-fluid movie-thumb" alt="movie banner" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div> --}}
                    </div>
                    <div class="form-row">
                        <!-- card -->
                        @foreach ($Titles as $key => $Title )
                        <div class="col-6 col-sm-6 col-md-4 col-xl-3">
                            <div class="card card--catalog">
                                <a href="{{ route('moviedetail',[$Title->ttid]) }}" class="card__cover">
                                    <img src="{{ $Title->poster }}" alt="{{ $Title->title }}">
                                    {{-- <span class="card__new">Watch</span> --}}
                                </a>

                                <div class="social-share card__platforms">
                                    <a href="https://www.facebook.com/sharer/sharer.php?u={{ route('moviedetail',[$Title->ttid]) }}" class="fb"><i class="fa-brands fa-facebook-f"></i></a>
                                    <a href="https://twitter.com/intent/tweet?text={{ route('moviedetail',[$Title->ttid]) }}" class="tw"><i class="fa-brands fa-twitter"></i></a>
                                </div>

                                <div class="movie-desc">
                                    <div class="card__title">
                                        <h3><a href="{{ route('moviedetail',[$Title->ttid]) }}">{{ $Title->title }}</a></h3>
                                    </div>
                                </div>
                                <button class="card__favorite favorite_{{ $featured->title->id }}" type="button" data-id="{{ $Title->id }}">
                                    <svg xmlns='http://www.w3.org/2000/svg' width='512' height='512' viewBox='0 0 512 512'>
                                        <path d='M352.92,80C288,80,256,144,256,144s-32-64-96.92-64C106.32,80,64.54,124.14,64,176.81c-1.1,109.33,86.73,187.08,183,252.42a16,16,0,0,0,18,0c96.26-65.34,184.09-143.09,183-252.42C447.46,124.14,405.68,80,352.92,80Z' style='@if($Title->favorite) fill:#a782e9; @else fill:none; @endif stroke-linecap:round;stroke-linejoin:round;stroke-width:32px' />
                                    </svg>
                                </button>
                            </div>
                        </div>
                        @endforeach
                        <!-- end card -->
                        <!-- paginator -->
                        {{-- <div class="col-12">
                            <div class="paginator">
                                <div class="paginator__counter">
                                    12 from {{ $Titles->total() }}
                                </div>

                                <ul class="paginator__wrap">
                                    <li class="paginator__item paginator__item--prev">
                                        <a href="#">
                                            <svg xmlns='http://www.w3.org/2000/svg' width='512' height='512'
                                                viewBox='0 0 512 512'>
                                                <polyline points='244 400 100 256 244 112'
                                                    style='fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:48px' />
                                                <line x1='120' y1='256' x2='412' y2='256'
                                                    style='fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:48px' />
                                            </svg>
                                        </a>
                                    </li>
                                    <li class="paginator__item paginator__item--active"><a href="#">1</a></li>
                                    <li class="paginator__item"><a href="#">2</a></li>
                                    <li class="paginator__item"><a href="#">3</a></li>
                                    <li class="paginator__item paginator__item--next">
                                        <a href="#">
                                            <svg xmlns='http://www.w3.org/2000/svg' width='512' height='512'
                                                viewBox='0 0 512 512'>
                                                <polyline points='268 112 412 256 268 400'
                                                    style='fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:48px' />
                                                <line x1='392' y1='256' x2='100' y2='256'
                                                    style='fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:48px' />
                                            </svg>
                                        </a>
                                    </li>
                                </ul>
                            </div>

                        </div> --}}
                        <!-- end paginator -->
                        <div class="col-12">
                            {{ $Titles->appends(request()->input())->links() }}
                        </div>
                    </div>
                </div>
                <!-- end content wrap -->
            </div>
            <!-- end catalog -->
        </div>
    </section>
    <!-- end section -->

    @include('front.layouts.latest-news')
@endsection

@section('script')
    <script>
        $('.movie-slider').owlCarousel({
            loop: true,
            margin: 10,
            // nav: true,
            items: 1,
            autoplay: true,
            autoplayTimeout: 3000,
            autoplayHoverPause: true
        })
    </script>
    <script>
        $('.feature-slider').owlCarousel({
            loop: true,
            margin: 10,
            dots: false,
            items: 1,
            autoplay: true,
            autoplayTimeout: 4000,
            autoplayHoverPause: true
        })
    </script>
@endsection