@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;
}

.hn-comment {
	font-size: 0.875rem;
	color: var(--cinema-pink);
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}

.hn-heading {
	color: var(--cinema-pink);
}

@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 ( ! empty($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>
							{{ $movie->primary_title }}

							@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 )
									<a href="{{ route('cinema.genre', $genre) }}" class="badge badge-pill badge-primary" style="color: #fff;">{{ $genre }}</a>
								@endforeach
							</div>
						@endif

						@if ( ! empty($movie->synopsis) )
							@php
								$paragraphs = preg_split('/\\n\\s*\\n/', strip_tags($movie->synopsis));
							@endphp
							@foreach($paragraphs as $i => $para)
								@if ( trim($para) !== '' )
									<p class="card-text{{ $i === 0 ? ' mt-3' : '' }}">
										{{ trim($para) }}
									</p>
								@endif
							@endforeach
						@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) || ! is_null($movie->wiki_article) )
							<div class="mt-3">
								@if ( ! is_null($movie->wiki_article) )
									<a class="btn btn-outline-primary btn-sm mr-2" href="https://en.wikipedia.org/wiki/{{ $movie->wiki_article }}" target="_blank">View on Wikipedia</a>
								@endif
								@if ( ! is_null($movie->imdb_id) )
									<a class="btn btn-outline-primary btn-sm" href="https://www.imdb.com/title/{{ $movie->imdb_id }}" target="_blank">View on IMDb</a>
								@endif
							</div>
						@endif

						@if ( ! empty($movie->license_url) )
							<div class="mt-3">
								<small class="text-muted">
									Licensed under <a href="{{ $movie->license_url }}" target="_blank" class="card-links">{{ $movie->license_short ?? $movie->license }}</a>
								</small>
							</div>
						@endif

						@if ( ! empty($hnStories) )
							<div class="mt-3">
								<h4 class="hn-heading">Mentions on Hacker News</h4>
								<ul class="list-unstyled">
								@foreach($hnStories as $story)
									<li>
										<a class="card-links" href="https://news.ycombinator.com/item?id={{ $story->story_id }}" target="_blank">
											@if ($story->type === 'comment' && ! empty($story->text))
												<span class="hn-comment">{{ Str::limit(strip_tags($story->text), 80) }}</span>
											@else
												{{ $story->title ?: 'HN Story' }}
											@endif
										</a>
										<small class="text-muted">
											{{ \Carbon\Carbon::createFromTimestamp($story->time)->format('Y-m-d') }}
											@if ($story->score > 0)
												· <span class="badge badge-pill badge-secondary">{{ $story->score }} Upvotes</span>
											@endif
											@if ($story->descendants > 0)
												· <span class="badge badge-pill badge-secondary">{{ $story->descendants }} Comments</span>
											@endif
										</small>
									</li>
								@endforeach
								</ul>
							</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