178 lines
8.7 KiB
PHP
178 lines
8.7 KiB
PHP
|
@extends('layouts.app')
|
||
|
|
|
||
|
|
@section('title', $game->name)
|
||
|
|
|
||
|
|
@section('content')
|
||
|
|
<div class="container py-4">
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-md-4">
|
||
|
|
<div class="card bg-dark text-white mb-4">
|
||
|
|
<img src="{{ $game->cover_url }}" class="card-img-top" alt="{{ $game->name }}">
|
||
|
|
<div class="card-body">
|
||
|
|
<div class="d-flex justify-content-between align-items-center">
|
||
|
|
<div>
|
||
|
|
<h5 class="card-title mb-0">{{ $game->name }}</h5>
|
||
|
|
<p class="text-muted mb-0">{{ $game->first_release_date->format('Y') }}</p>
|
||
|
|
</div>
|
||
|
|
@auth
|
||
|
|
<div class="dropdown">
|
||
|
|
<button class="btn btn-outline-primary dropdown-toggle" type="button" id="addToListDropdown"
|
||
|
|
data-bs-toggle="dropdown" aria-expanded="false">
|
||
|
|
<i class="fas fa-plus me-2"></i>Add to List
|
||
|
|
</button>
|
||
|
|
<ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="addToListDropdown">
|
||
|
|
@foreach(Auth::user()->lists as $list)
|
||
|
|
<li>
|
||
|
|
<form action="{{ route('lists.addGame', $list) }}" method="POST" class="d-inline">
|
||
|
|
@csrf
|
||
|
|
<input type="hidden" name="game_id" value="{{ $game->id }}">
|
||
|
|
<button type="submit" class="dropdown-item">
|
||
|
|
<i class="fas fa-list me-2"></i>{{ $list->name }}
|
||
|
|
</button>
|
||
|
|
</form>
|
||
|
|
</li>
|
||
|
|
@endforeach
|
||
|
|
<li><hr class="dropdown-divider"></li>
|
||
|
|
<li>
|
||
|
|
<a class="dropdown-item" href="{{ route('lists.create') }}">
|
||
|
|
<i class="fas fa-plus me-2"></i>Create New List
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
@endauth
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="card bg-dark text-white mb-4">
|
||
|
|
<div class="card-header">
|
||
|
|
<h5 class="mb-0">Details</h5>
|
||
|
|
</div>
|
||
|
|
<div class="card-body">
|
||
|
|
<div class="mb-3">
|
||
|
|
<h6 class="text-muted">Platforms</h6>
|
||
|
|
<div class="d-flex flex-wrap gap-2">
|
||
|
|
@foreach($game->platforms()->get() as $platform)
|
||
|
|
<span class="badge bg-secondary">{{ $platform->name }}</span>
|
||
|
|
@endforeach
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="mb-3">
|
||
|
|
<h6 class="text-muted">Genres</h6>
|
||
|
|
<div class="d-flex flex-wrap gap-2">
|
||
|
|
@foreach($game->genres()->get() as $genre)
|
||
|
|
<span class="badge bg-primary">{{ $genre->name }}</span>
|
||
|
|
@endforeach
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
@if($game->rating)
|
||
|
|
<div class="mb-3">
|
||
|
|
<h6 class="text-muted">Rating</h6>
|
||
|
|
<div class="d-flex align-items-center">
|
||
|
|
<div class="rating-stars d-flex gap-1">
|
||
|
|
@for($i = 1; $i <= 10; $i++)
|
||
|
|
<i class="fas fa-star {{ $i <= $game->rating ? 'text-warning' : 'text-secondary' }}"></i>
|
||
|
|
@endfor
|
||
|
|
</div>
|
||
|
|
<span class="ms-2">({{ $game->rating_count }} ratings)</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
@endif
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="col-md-8">
|
||
|
|
<div class="card bg-dark text-white mb-4">
|
||
|
|
<div class="card-header">
|
||
|
|
<h5 class="mb-0">About</h5>
|
||
|
|
</div>
|
||
|
|
<div class="card-body">
|
||
|
|
<p class="card-text">{{ $game->summary }}</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
@if($game->screenshots()->count())
|
||
|
|
<div class="card bg-dark text-white mb-4">
|
||
|
|
<div class="card-header">
|
||
|
|
<h5 class="mb-0">Screenshots</h5>
|
||
|
|
</div>
|
||
|
|
<div class="card-body">
|
||
|
|
<div class="row g-3">
|
||
|
|
@foreach($game->screenshots()->get() as $screenshot)
|
||
|
|
<div class="col-md-6">
|
||
|
|
<img src="{{ $screenshot->url }}" class="img-fluid rounded" alt="Game Screenshot">
|
||
|
|
</div>
|
||
|
|
@endforeach
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
@endif
|
||
|
|
|
||
|
|
@if($game->videos()->count())
|
||
|
|
<div class="card bg-dark text-white mb-4">
|
||
|
|
<div class="card-header">
|
||
|
|
<h5 class="mb-0">Videos</h5>
|
||
|
|
</div>
|
||
|
|
<div class="card-body">
|
||
|
|
<div class="row g-3">
|
||
|
|
@foreach($game->videos()->get() as $video)
|
||
|
|
<div class="col-12">
|
||
|
|
<div class="ratio ratio-16x9">
|
||
|
|
<iframe src="https://www.youtube.com/embed/{{ $video->video_id }}"
|
||
|
|
title="{{ $video->name }}" allowfullscreen></iframe>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
@endforeach
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
@endif
|
||
|
|
|
||
|
|
<div class="card bg-dark text-white">
|
||
|
|
<div class="card-header d-flex justify-content-between align-items-center">
|
||
|
|
<h5 class="mb-0">Reviews</h5>
|
||
|
|
@auth
|
||
|
|
<a href="{{ route('games.reviews.create', $game) }}" class="btn btn-gradient btn-sm">
|
||
|
|
<i class="fas fa-plus me-2"></i>Write a Review
|
||
|
|
</a>
|
||
|
|
@endauth
|
||
|
|
</div>
|
||
|
|
<div class="card-body">
|
||
|
|
@if($game->reviews->isEmpty())
|
||
|
|
<p class="text-muted mb-0">No reviews yet. Be the first to review this game!</p>
|
||
|
|
@else
|
||
|
|
@foreach($game->reviews as $review)
|
||
|
|
<div class="mb-4 pb-4 border-bottom border-secondary">
|
||
|
|
<div class="d-flex justify-content-between align-items-center mb-2">
|
||
|
|
<div>
|
||
|
|
<h6 class="mb-0">{{ $review->user->name }}</h6>
|
||
|
|
<small class="text-muted">{{ $review->created_at->diffForHumans() }}</small>
|
||
|
|
</div>
|
||
|
|
<div class="d-flex align-items-center">
|
||
|
|
<div class="rating-stars d-flex gap-1 me-2">
|
||
|
|
@for($i = 1; $i <= 10; $i++)
|
||
|
|
<i class="fas fa-star {{ $i <= $review->rating ? 'text-warning' : 'text-secondary' }}"></i>
|
||
|
|
@endfor
|
||
|
|
</div>
|
||
|
|
@if($review->recommended)
|
||
|
|
<span class="badge bg-success">Recommended</span>
|
||
|
|
@else
|
||
|
|
<span class="badge bg-danger">Not Recommended</span>
|
||
|
|
@endif
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<p class="mb-0">{{ $review->content }}</p>
|
||
|
|
</div>
|
||
|
|
@endforeach
|
||
|
|
@endif
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
@endsection
|