@extends('layouts.app')

@section('content')
    <div class="container-fluid movie-page">
        <div class="row justify-content-center">
            <div class="col-md-10">
                <div class="card">
                    <div class="card-header">
                        <h1 class="movie-title">{{ $show->name }}</h1> (<a href="">{{ $show->first_air_date->format('Y') }}</a>)
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-2">
                                <a href="http://image.tmdb.org/t/p/w780/{{ $show->poster_path }}" data-toggle="lightbox">
                                    <img
                                        src="http://image.tmdb.org/t/p/w185/{{ $show->poster_path }}"
                                        alt="{{ $show->name }}"
                                        title="{{ $show->name }} ({{ $show->first_air_date->format('Y') }})"
                                        class="img img-fluid"
                                    >
                                </a>

                                <div class="watch-provider">
                                    @foreach($show->watchProviders as $watchProvider)
                                        <img src="http://image.tmdb.org/t/p/w45/{{ $watchProvider->logo_path }}" alt="{{ $watchProvider->provider_name }}" title="{{ $watchProvider->provider_name }}">
                                    @endforeach
                                </div>

                                view trailer
                                <div class="external-ids">
                                    @if($show->externalIds && $show->externalIds->tmdb_id)
                                        <a href="https://www.themoviedb.org/tv/{{ $show->externalIds->tmdb_id }}" target="_blank">
                                            <img src="{{ asset('/img/tmdb.webp') }}" alt="" width="45">
                                        </a>
                                    @endif
                                    @if($show->externalIds && $show->externalIds->imdb_id)
                                        <a href="https://www.imdb.com/title/{{ $show->externalIds->imdb_id }}" target="_blank">
                                            <img src="{{ asset('/img/imdb.png') }}" alt="" width="45">
                                        </a>
                                    @endif
                                    @if($show->externalIds && $show->externalIds->wikidata_id)
                                        <a href="https://www.wikidata.org/wiki/{{ $show->externalIds->wikidata_id }}" target="_blank">
                                            <img src="{{ asset('/img/wikidata.png') }}" alt="" width="45">
                                        </a>
                                    @endif
                                    @if($show->externalIds && $show->externalIds->tvdb_id)
                                        <a href="https://thetvdb.com/dereferrer/series/{{ $show->externalIds->tvdb_id }}" target="_blank">
                                            <img src="{{ asset('/img/tvdb.png') }}" alt="" width="45">
                                        </a>
                                    @endif
                                </div>

                                @if($show->homepage)
                                    <div>
                                        <a href="{{ $show->homepage }}" target="_blank">Homepage</a>
                                    </div>
                                @endif
                            </div>
                            <div class="col-md-10">
                                <span>
                                    Directed by
                                </span>
                                <span>
                                    <div class="tagline">{{ $show->tagline }}</div>
                                    <div class="overview">{{ $show->overview }}</div>
                                </span>
                                <span>
                                    <ul class="nav nav-tabs" id="myTab" role="tablist">
                                        <li class="nav-item" role="presentation">
                                            <button class="nav-link active" id="details-tab" data-bs-toggle="tab" data-bs-target="#details-tab-pane" type="button" role="tab" aria-controls="details-tab-pane" aria-selected="true">Details</button>
                                        </li>
                                        <li class="nav-item" role="presentation">
                                            <button class="nav-link" id="cast-tab" data-bs-toggle="tab" data-bs-target="#cast-tab-pane" type="button" role="tab" aria-controls="cast-tab-pane" aria-selected="false">Cast</button>
                                        </li>
                                        <li class="nav-item" role="presentation">
                                            <button class="nav-link" id="crew-tab" data-bs-toggle="tab" data-bs-target="#crew-tab-pane" type="button" role="tab" aria-controls="crew-tab-pane" aria-selected="false">Crew</button>
                                        </li>
                                        <li class="nav-item" role="presentation">
                                            <button class="nav-link" id="releases-tab" data-bs-toggle="tab" data-bs-target="#releases-tab-pane" type="button" role="tab" aria-controls="releases-tab-pane" aria-selected="false">Releases</button>
                                        </li>
                                    </ul>
                                    <div class="tab-content" id="myTabContent">
                                        <div class="tab-pane fade show active" id="details-tab-pane" role="tabpanel" aria-labelledby="details-tab" tabindex="0">
                                            @livewire(App\Livewire\ShowPage\Tabs\Details::class, ['show' => $show])
                                        </div>
                                        <div class="tab-pane fade" id="cast-tab-pane" role="tabpanel" aria-labelledby="cast-tab" tabindex="0">
                                            @livewire(App\Livewire\ShowPage\Tabs\Cast::class, ['show' => $show])
                                        </div>
                                        <div class="tab-pane fade" id="crew-tab-pane" role="tabpanel" aria-labelledby="crew-tab" tabindex="0">
                                            @livewire(App\Livewire\ShowPage\Tabs\Crew::class, ['show' => $show])
                                        </div>
                                        <div class="tab-pane fade" id="releases-tab-pane" role="tabpanel" aria-labelledby="releases-tab" tabindex="0">
                                            @livewire(App\Livewire\ShowPage\Tabs\Releases::class, ['show' => $show])
                                        </div>
                                    </div>
                                </span>
                            </div>
                        </div>
                        @if($show->images)
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="owl-carousel owl-theme show-slider">
                                        @foreach($show->backdrops as $image)
                                            <div class="item">
                                                <a href="http://image.tmdb.org/t/p/w1280/{{ $image->file_path }}" data-toggle="lightbox" data-gallery="{{ $show->slug }}_gallery">
                                                    <img src="http://image.tmdb.org/t/p/w154/{{ $image->file_path }}" alt="">
                                                </a>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        @endif
                    </div>
                </div>
                <div class="card">
                    <div class="card-header">
                        Seasons
                        <div class="float-end">
                            <div class="slider-controls">

                            </div>
                        </div>
                    </div>
                    <div class="card-body similar-show">
                        <div class="row">
                            @foreach($seasons as $season)
                                <div class="col-md-2">
                                    <a href="">
                                        <img src="http://image.tmdb.org/t/p/w1280/{{ $season->poster_path }}" alt="" class="img img-fluid">
                                        {{ $season->name }} <br>
                                        <small>{{ $season->episode_count  }} episodes</small>
                                    </a>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-header">
                        Similar
                        <div class="float-end">
                            <div class="slider-controls">

                            </div>
                        </div>
                    </div>
                    <div class="card-body similar-show">
                        @livewire(App\Livewire\ShowPage\Similar::class, ['show' => $show])
                    </div>
                </div>
                <div class="card">
                    <div class="card-header">Recommended</div>
                    <div class="card-body">
                        @livewire(App\Livewire\ShowPage\Recommended::class, ['show' => $show])
                    </div>
                </div>
                <div class="card">
                    <div class="card-header">Write review</div>
                    <div class="card-body"></div>
                </div>
                @foreach($comments as $comment)
                    <div class="card">
                        <div class="card-header">
                            @if($comment->author_avatar)
                                <img src="http://image.tmdb.org/t/p/w45/{{ $comment->author_avatar }}" alt="" width="25">
                            @endif
                            {{ $comment->author_name }}
                            <span class="rating">
                                {{ $comment->author_rating }}
                            </span>
                            <span class="text-muted float-end">
                                <small>
                                    {{ $comment->published_at }}
                                </small>
                            </span>
                        </div>
                        <div class="card-body">
                            {!! $comment->content !!}
                        </div>
                    </div>
                @endforeach
            </div>
            <div class="col-md-2">
                <div class="card">
                    @include('layouts.user_actions')
                </div>
            </div>
        </div>
    </div>
@endsection