@extends('layouts.app')

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

html {
		height: 100%;
}

.movie-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	margin-top: 20px;
}

.movie-card {
	flex: 0 0 calc(33.333% - 14px);
	min-width: 250px;
}

@media (max-width: 991.98px) {
	.movie-card {
		flex: 0 0 calc(50% - 10px);
	}
}

@media (max-width: 575.98px) {
	.movie-card {
		flex: 0 0 100%;
	}
}

.movie-card .poster {
	width: 100%;
	aspect-ratio: 2 / 3;
	object-fit: cover;
	background-color: #333;
	border-radius: 4px 4px 0 0;
}

.movie-card .year {
	color: #868e96;
	font-size: 0.85rem;
}

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

.movie-card .synopsis {
	font-size: 0.875rem;
	color: #6c757d;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.movie-card h1 {
	font-size: 1rem;
	padding: 10px 12px 4px;
	margin: 0;
}

.movie-card h1 a {
	color: inherit;
	text-decoration: none;
}

.movie-card h1 a:hover {
	text-decoration: underline;
}

.movie-card .card-body {
	padding: 0 12px 12px;
}

.no-poster {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 2 / 3;
	background-color: #495057;
	color: #adb5bd;
	font-size: 3rem;
	border-radius: 4px 4px 0 0;
}

.permalink:hover {
	text-decoration: none;
}

@endsection

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

	<div class="card">
		<h1 class="card-header">
			@if ( isset($search_query) && $search_query != '' )
				Movies matching <strong>"{{ $search_query }}"</strong>
				@if ( "1" != $movies->currentPage() )
					(Page {{ $movies->currentPage() }})
				@endif
			@else
				Movies
				@if ( "1" != $movies->currentPage() )
					(Page {{ $movies->currentPage() }})
				@endif
			@endif
		</h1>
		<div class="card-body">
			<p class="card-text">
				@if ( isset($search_query) && $search_query != '' )
					Found {{ $count }} movies matching <strong>"{{ $search_query }}"</strong>.
				@else
					Browse {{ number_format($count) }} movies from the database, mentioned on Hacker News, ranked by rating or popularity.
				@endif
			</p>
			<form class="form-inline" action="{{ route('cinema.search') }}" method="GET">
				<input name="q" class="form-control mr-sm-2" type="text" placeholder="Search movies..." aria-label="Search" value="{{ isset($search_query) ? $search_query : '' }}">
				<button class="btn btn-outline-primary my-2 my-sm-0" type="submit">Search</button>
			</form>
			<div class="mt-2">
				<span class="text-muted">Sort by:</span>
				@foreach ([
					['ref_count', 'Hacker News Mentions'],
					['score', 'Rating'],
					['num_votes', 'Number of Votes'],
					['num_accolades', 'Accolades'],
					['start_year', 'Release Date'],
				] as [$key, $label])
					@if ( (isset($order) ? $order : 'ref_count') == $key )
						@if ( (isset($direction) ? $direction : 'desc') == 'desc' )
							<a class="btn btn-sm btn-primary my-1" href="{{ url()->current() }}?order={{ $key }}&amp;direction=asc">{{ $label }} &#x25B2;</a>
						@else
							<a class="btn btn-sm btn-primary my-1" href="{{ url()->current() }}?order={{ $key }}&amp;direction=desc">{{ $label }} &#x25BC;</a>
						@endif
					@else
						<a class="btn btn-sm btn-outline-secondary my-1" href="{{ url()->current() }}?order={{ $key }}&amp;direction=desc">{{ $label }}</a>
					@endif
				@endforeach
			</div>
		</div>
	</div>

	@if ( 0 != $movies->count() )
		<div class="movie-grid">
			@foreach( $movies as $movie)
				<div class="card movie-card">
					<a href="{{ route('cinema.show', $movie->imdb_id) }}">
						@if ( ! empty($movie->poster_url) )
							<img class="poster" src="{{ $movie->poster_url }}" alt="{{ $movie->primary_title }} poster" loading="lazy">
						@else
							<div class="no-poster">🎬</div>
						@endif
					</a>
					<h1>
						<a href="{{ route('cinema.show', $movie->imdb_id) }}">
							{{ $movie->primary_title }}
						</a>
					</h1>
					<div class="card-body">
						<div>
							@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
						</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($movie->synopsis) )
							<p class="card-text synopsis mt-2">
								{{ strip_tags($movie->synopsis) }}
							</p>
						@endif
					</div>
				</div>
			@endforeach
		</div>

		<div style="margin-bottom: 20px"></div>
		{{ $movies->appends(Request::input())->links() }}
	@endif
</div>
@endsection

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