@extends(get_theme().'.components.layouts')

@section('footer')
    <script src="{{ asset_theme('assets/s.js') }}"></script>
@endsection

@section('content')
    <section class="px-4r">
        <div class="backdrop" style="background-image: url({{ img_backdrop($backdrop) }})"></div>
        <div class="container">
            @include(get_theme().'.components.player', ['backdrop' => $backdrop, 'video' => asset_theme('/assets/movie.mp4')])
            <script>var playDuration = 129*60;</script>
        </div>
        <div class="container py-4">
            <div class="row">
                <div class="col d-flex justify-content-center">
                    <a href="{{ mopie_route('loading', ['id' => $movie->id ,'title' => $movie->original_title, 'action' => 'play']) }}" class="btn btn-outline-theme mx-1">{{ __('utilities.watch_now') }} <i class="fa fa-film" aria-hidden="true"></i></a>
                    <a href="{{ mopie_route('loading', ['id' => $movie->id ,'title' => $movie->original_title, 'action' => 'register']) }}" class="btn btn-outline-theme mx-1">{{ __('utilities.download') }} <i class="fa fa-cloud-download" aria-hidden="true"></i></a>
                </div>
            </div>
        </div>
    </section>

    <section class="container p-3 p-md-4 rounded-lg mb-5" style="background-color: #0e1117">
        <div class="row">
            <div class="col-12">
                <div class="row">
                    <div class="col-md-2 col-sm-4 col-3">
                        <img class="img-fluid" src="{{ img_poster($movie->poster_path) }}" alt="Poster {{ $movie->title }} {{ to_year($movie->release_date) }}" title="Poster {{ $movie->title }} {{ to_year($movie->release_date) }}">
                    </div>
                    <div class="col-md-10 col-sm-8 col-9">
                        <div class="entry-title d-flex flex-column-reverse flex-md-row justify-content-between">
                            <h1 class="h2">{{ $movie->title }} <span class="tiny text-muted">{{ to_year($movie->release_date) }}</span></h1>
                            <div class="sub-r">
                                <a href="{{ mopie_route('loading', ['id' => $movie->id ,'title' => $movie->original_title]) }}" class="btn subs">{{ __('utilities.subscribe_watch') }}</a>
                            </div>
                        </div>
                        <div class="entry-info mb-3">
                            <div class="__rate">
                                @for ($i = 0; $i < 10; $i++)
                                    @if ($i < round($movie->vote_average))
                                        <i class="fa fa-star text-warning"></i>
                                    @else
                                        <i class="fa fa-star-o text-muted"></i>
                                    @endif
                                @endfor
                            </div>
                            <div class="__info">
                                <span class="text-muted small">{{ $movie->vote_average }}/10</span> <span class="text-muted small">{{ __('utilities.by') }} {{ $movie->vote_count }} {{ __('utilities.users') }}</span>
                            </div>
                        </div>
                        <div class="entry-desciption text-muted">
                            <p>{{ $movie->overview }}</p>
                        </div>
                        <div class="entry-table">
                            <ul>
                                <li>{{ __('utilities.released') }}: <span>{{ $movie->release_date }}</span></li>
                                <li>{{ __('utilities.runtime') }}: <span>{{ $movie->runtime }} {{ __('utilities.minutes') }}</span></li>
                                <li>{{ __('utilities.genre') }}: <span>{!! genre_comma($movie->genres) !!}</span></li>
                                <li>{{ __('utilities.stars') }}: <span>{!! star_comma($movie->credits->cast, 5) !!}</span></li>
                                <li>{{ __('utilities.director') }}: <span>{!! director_comma($movie->credits->crew, 5) !!}</span></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="container p-3 p-md-4 rounded-lg mb-5" style="background-color: #0e1117">
        <div class="h6">{{ __('utilities.download') }} : <strong class="text-color-theme">MKV</strong></div>
        <ul class="down-list mb-4">
            <li>
                <div class="dt"><strong>360p</strong></div>
                <span>GD2</span> | <span>CU</span> | <span>GD1</span> | <span>ZS</span> | <span>RC</span>
            </li>
            <li>
                <div class="dt"><strong>480p</strong></div>
                <span>GD2</span> | <span>CU</span> | <span>GD1</span> | <span>ZS</span> | <span>RC</span>
            </li>
            <li>
                <div class="dt"><strong>720p</strong></div>
                <span>GD2</span> | <span>CU</span> | <span>GD1</span> | <span>ZS</span> | <span>RC</span>
            </li>
            <li>
                <div class="dt"><strong>1080p</strong></div>
                <span>GD2</span> | <span>CU</span> | <span>GD1</span> | <span>ZS</span> | <span>RC</span>
            </li>
        </ul>
        <div class="h6">{{ __('utilities.download') }} : <strong class="text-color-theme">MP4</strong></div>
        <ul class="down-list">
            <li>
                <div class="dt"><strong>360p</strong></div>
                <span>GD2</span> | <span>CU</span> | <span>GD1</span> | <span>ZS</span> | <span>RC</span>
            </li>
            <li>
                <div class="dt"><strong>480p</strong></div>
                <span>GD2</span> | <span>CU</span> | <span>GD1</span> | <span>ZS</span> | <span>RC</span>
            </li>
            <li>
                <div class="dt"><strong>MP4HD</strong></div>
                <span>GD2</span> | <span>CU</span> | <span>GD1</span> | <span>ZS</span> | <span>RC</span>
            </li>
            <li>
                <div class="dt"><strong>FULLHD</strong></div>
                <span>GD2</span> | <span>CU</span> | <span>GD1</span> | <span>ZS</span> | <span>RC</span>
            </li>
        </ul>
    </section>

    <section class="container">
        @isset($movie->similar)
            <div class="row">
                <div class="col-12 mb-4">
                    <h3 class="h4">{{ __('section.title.movie_similar') }}</h3>
                </div>
            </div>
            <div class="owl-carousel">
                @foreach (block_id_lists($movie->similar->results) as $item)
                    @include(get_theme().'.components.item_movie', ['class' => ''])
                @endforeach
            </div>
        @endisset

        @isset($movie->recommendations)
            <div class="divider"></div>
            <div class="row">
                <div class="col-12 mb-4">
                    <h3 class="h4">{{ __('section.title.movie_recommendation') }}</h3>
                </div>
            </div>
            <div class="owl-carousel">
                @foreach (block_id_lists($movie->recommendations->results) as $item)
                    @include(get_theme().'.components.item_movie', ['class' => ''])
                @endforeach
            </div>
        @endisset
    </section>

    @include(get_theme().'.components.modal_watch', ['backdrop' => $backdrop, 'id' => $movie->id, 'title' => $movie->original_title])
@endsection