@extends('layouts.app')

@section('styles')
@include ('layouts.footer-style')

.poster-detail {
	width: 100%;
	max-width: 350px;
	border-radius: 4px;
}

.year {
	color: #868e96;
}

.rating {
	color: #868e96;
	font-size: 0.9rem;
}

.movie-credits {
	columns: 2;
	column-gap: 20px;
}

@media (max-width: 768px) {
	.movie-credits {
		columns: 1;
	}
	.poster-detail {
		max-width: 200px;
		margin: 0 auto;
	}
}

@endsection

@section('content')
<div class="container">
	<div style="margin-top: 20px"></div>

	@if ( ! is_null($movie) )
		<div class="card">
			<h1 class="card-header">
				<a href="{{ route('cinema.index') }}" style="color:inherit;">← All Movies</a>
			</h1>
			<div class="card-body">
				<div class="row">
					<div class="col-md-3">
						@if ( ! is_null($movie->poster_url) )
							<img class="poster-detail" src="{{ $movie->poster_url }}" alt="{{ $movie->primary_title }} poster">
						@else
							<div class="no-poster">🎬</div>
						@endif
					</div>
					<div class="col-md-9">
						<h3>
							@if ( ! is_null($movie->wiki_article) )
								<a href="https://en.wikipedia.org/wiki/{{ $movie->wiki_article }}" target="_blank">
									{{ $movie->primary_title }}
								</a>
							@else
								{{ $movie->primary_title }}
							@endif
							@if ( ! is_null($movie->original_title) && $movie->original_title != $movie->primary_title )
								<small class="text-muted">({{ $movie->original_title }})</small>
							@endif
						</h3>
						<div class="mt-2">
							@if ( ! is_null($movie->start_year) )
								<span class="year">{{ $movie->start_year }}</span>
							@endif
							@if ( ! is_null($movie->runtime_minutes) )
								@if ( ! is_null($movie->start_year) )
									<span class="year"> · </span>
								@endif
								<span class="year">{{ $movie->runtime_minutes }} min</span>
							@endif
							@if ( ! is_null($movie->title_type) )
								@if ( ! is_null($movie->start_year) || ! is_null($movie->runtime_minutes) )
									<span class="year"> · </span>
								@endif
								<span class="badge badge-secondary">{{ $movie->title_type }}</span>
							@endif
						</div>
						<div class="mt-1">
							@if ( ! is_null($movie->average_rating) )
								<span class="rating">⭐ {{ number_format($movie->average_rating, 1) }}</span>
								@if ( ! is_null($movie->num_votes) )
									<span class="year"> ({{ number_format($movie->num_votes) }} votes)</span>
								@endif
							@endif
						</div>

						@if ( ! empty($genres) )
							<div class="mt-2">
								@foreach( $genres as $genre )
									<span class="badge badge-pill badge-primary">{{ $genre }}</span>
								@endforeach
							</div>
						@endif

						@if ( ! empty($movie->synopsis) )
							<p class="card-text mt-3">
								{{ strip_tags($movie->synopsis) }}
							</p>
						@endif

						@if ( ! empty($directors) )
							<div class="mt-3">
								<h4>Directed by</h4>
								<div class="movie-credits">
									@foreach( $directors as $person )
										<div>{{ $person->name }}</div>
									@endforeach
								</div>
							</div>
						@endif

						@if ( ! empty($actors) )
							<div class="mt-3">
								<h4>Starring</h4>
								<div class="movie-credits">
									@foreach( $actors as $person )
										<div>{{ $person->name }}</div>
									@endforeach
								</div>
							</div>
						@endif

						@if ( ! is_null($movie->imdb_id) )
							<div class="mt-3">
								<a class="btn btn-outline-primary btn-sm" href="https://www.imdb.com/title/{{ $movie->imdb_id }}" target="_blank">View on IMDb</a>
							</div>
						@endif
					</div>
				</div>
			</div>
		</div>
	@else
		<div class="card">
			<h1 class="card-header">Movie Not Found</h1>
			<div class="card-body">
				<p class="card-text">The requested movie could not be found.</p>
				<a href="{{ route('cinema.index') }}" class="btn btn-outline-primary">Back to Movies</a>
			</div>
		</div>
	@endif

	<div style="margin-bottom: 20px"></div>
</div>
@endsection

@section('footer')
	@include ('layouts.footer')
@endsection