some progress
This commit is contained in:
@@ -1,179 +1,255 @@
|
||||
@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">{{ $movie->title }}</h1> @if($movie->release_date)(<a href="">{{ $movie->release_date->format('Y') }}</a>)@endif
|
||||
</div>
|
||||
<div class="container-fluid movie-page py-4">
|
||||
<div class="row">
|
||||
<!-- Main Content -->
|
||||
<div class="col-lg-9">
|
||||
<!-- Movie Header -->
|
||||
<div class="card mb-4">
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-2">
|
||||
<img
|
||||
src="http://image.tmdb.org/t/p/w185/{{ $movie->poster_path }}"
|
||||
alt="{{ $movie->title }}"
|
||||
title="{{ $movie->title }} @if($movie->release_date)({{ $movie->release_date->format('Y') }})@endif"
|
||||
class="img img-fluid"
|
||||
>
|
||||
<!-- Poster and Actions -->
|
||||
<div class="col-md-3">
|
||||
<div class="movie-poster mb-3">
|
||||
<img src="http://image.tmdb.org/t/p/w342/{{ $movie->poster_path }}"
|
||||
alt="{{ $movie->title }}"
|
||||
class="img-fluid rounded shadow-sm"
|
||||
title="{{ $movie->title }} @if($movie->release_date)({{ $movie->release_date->format('Y') }})@endif">
|
||||
</div>
|
||||
|
||||
<div class="watch-provider">
|
||||
@foreach($movie->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>
|
||||
<div class="external-ids">
|
||||
@if($movie->externalIds && $movie->externalIds->tmdb_id)
|
||||
<a href="{{ $movie->externalIds->tmdb_id }}"><img src="{{ asset('/img/tmdb.webp') }}" alt="" width="85"></a>
|
||||
@endif
|
||||
@if($movie->externalIds && $movie->externalIds->imdb_id)
|
||||
<a href="{{ $movie->externalIds->imdb_id }}"><img src="{{ asset('/img/imdb.png') }}" alt="" width="85"></a>
|
||||
@endif
|
||||
<!-- Watch Providers -->
|
||||
@if($movie->watchProviders->isNotEmpty())
|
||||
<div class="watch-providers mb-3">
|
||||
<h6 class="text-muted mb-2">Available on:</h6>
|
||||
<div class="d-flex flex-wrap gap-2">
|
||||
@foreach($movie->watchProviders as $watchProvider)
|
||||
<img src="http://image.tmdb.org/t/p/w45/{{ $watchProvider->logo_path }}"
|
||||
alt="{{ $watchProvider->provider_name }}"
|
||||
title="{{ $watchProvider->provider_name }}"
|
||||
class="rounded">
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<!-- External Links -->
|
||||
<div class="external-links mb-3">
|
||||
<div class="d-flex gap-2">
|
||||
@if($movie->externalIds && $movie->externalIds->tmdb_id)
|
||||
<a href="{{ $movie->externalIds->tmdb_id }}" class="btn btn-sm btn-outline-secondary">
|
||||
<img src="{{ asset('/img/tmdb.webp') }}" alt="TMDB" height="20">
|
||||
</a>
|
||||
@endif
|
||||
@if($movie->externalIds && $movie->externalIds->imdb_id)
|
||||
<a href="{{ $movie->externalIds->imdb_id }}" class="btn btn-sm btn-outline-secondary">
|
||||
<img src="{{ asset('/img/imdb.png') }}" alt="IMDB" height="20">
|
||||
</a>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Trailer Button -->
|
||||
@if($movie->trailer->first())
|
||||
<a href="https://www.youtube.com/watch?v={{ $movie->trailer->first()->key }}" data-toggle="lightbox" class="btn btn-sm btn-block btn-secondary">View trailer</a>
|
||||
<a href="https://www.youtube.com/watch?v={{ $movie->trailer->first()->key }}"
|
||||
data-toggle="lightbox"
|
||||
class="btn btn-primary w-100 mb-3">
|
||||
<span class="iconify me-1" data-icon="mdi-play"></span>
|
||||
Watch Trailer
|
||||
</a>
|
||||
@endif
|
||||
</div>
|
||||
<div class="col-md-10">
|
||||
<span>
|
||||
Directed by
|
||||
|
||||
<!-- Movie Info -->
|
||||
<div class="col-md-9">
|
||||
<h1 class="movie-title mb-2">
|
||||
{{ $movie->title }}
|
||||
@if($movie->release_date)
|
||||
<span class="text-muted">({{ $movie->release_date->format('Y') }})</span>
|
||||
@endif
|
||||
</h1>
|
||||
|
||||
@if($movie->tagline)
|
||||
<p class="tagline text-muted mb-3">{{ $movie->tagline }}</p>
|
||||
@endif
|
||||
|
||||
<div class="directors mb-3">
|
||||
<span class="text-muted">Directed by</span>
|
||||
@foreach($movie->director as $director)
|
||||
<a href="">{{ $director->name }}</a>@if(!$loop->last), @endif
|
||||
<a href="#" class="text-decoration-none">{{ $director->name }}</a>@if(!$loop->last), @endif
|
||||
@endforeach
|
||||
</span>
|
||||
<span>
|
||||
<div class="tagline">{{ $movie->tagline }}</div>
|
||||
<div class="overview">{{ $movie->overview }}</div>
|
||||
</span>
|
||||
<span>
|
||||
<ul class="nav nav-tabs" id="myTab" role="tablist">
|
||||
</div>
|
||||
|
||||
<div class="overview mb-4">
|
||||
<h5 class="mb-2">Overview</h5>
|
||||
<p class="text-muted">{{ $movie->overview }}</p>
|
||||
</div>
|
||||
|
||||
<!-- Tabs -->
|
||||
<div class="movie-tabs">
|
||||
<ul class="nav nav-tabs" id="movieTabs" 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>
|
||||
<button class="nav-link active" id="details-tab" data-bs-toggle="tab" data-bs-target="#details" type="button" role="tab">Details</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link" id="videos-tab" data-bs-toggle="tab" data-bs-target="#videos-tab-pane" type="button" role="tab" aria-controls="videos-tab-pane" aria-selected="false">Videos</button>
|
||||
<button class="nav-link" id="videos-tab" data-bs-toggle="tab" data-bs-target="#videos" type="button" role="tab">Videos</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>
|
||||
<button class="nav-link" id="cast-tab" data-bs-toggle="tab" data-bs-target="#cast" type="button" role="tab">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>
|
||||
<button class="nav-link" id="crew-tab" data-bs-toggle="tab" data-bs-target="#crew" type="button" role="tab">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>
|
||||
<button class="nav-link" id="releases-tab" data-bs-toggle="tab" data-bs-target="#releases" type="button" role="tab">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">
|
||||
<div class="tab-content p-3 border border-top-0 rounded-bottom" id="movieTabsContent">
|
||||
<div class="tab-pane fade show active" id="details" role="tabpanel">
|
||||
@livewire(App\Livewire\MoviePage\Tabs\Details::class, ['movie' => $movie])
|
||||
</div>
|
||||
<div class="tab-pane fade show" id="videos-tab-pane" role="tabpanel" aria-labelledby="videos-tab" tabindex="0">
|
||||
<div class="tab-pane fade" id="videos" role="tabpanel">
|
||||
@livewire(App\Livewire\MoviePage\Tabs\Videos::class, ['movie' => $movie])
|
||||
</div>
|
||||
<div class="tab-pane fade" id="cast-tab-pane" role="tabpanel" aria-labelledby="cast-tab" tabindex="0">
|
||||
<div class="tab-pane fade" id="cast" role="tabpanel">
|
||||
@livewire(App\Livewire\MoviePage\Tabs\Cast::class, ['movie' => $movie])
|
||||
</div>
|
||||
<div class="tab-pane fade" id="crew-tab-pane" role="tabpanel" aria-labelledby="crew-tab" tabindex="0">
|
||||
<div class="tab-pane fade" id="crew" role="tabpanel">
|
||||
@livewire(App\Livewire\MoviePage\Tabs\Crew::class, ['movie' => $movie])
|
||||
</div>
|
||||
<div class="tab-pane fade" id="releases-tab-pane" role="tabpanel" aria-labelledby="releases-tab" tabindex="0">
|
||||
<div class="tab-pane fade" id="releases" role="tabpanel">
|
||||
@livewire(App\Livewire\MoviePage\Tabs\Releases::class, ['movie' => $movie])
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">Similar</div>
|
||||
|
||||
<!-- Similar Movies -->
|
||||
<div class="card mb-4">
|
||||
<div class="card-header bg-white">
|
||||
<h5 class="mb-0">Similar Movies</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
@livewire(App\Livewire\MoviePage\Similar::class, ['movie' => $movie])
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">Recommended</div>
|
||||
|
||||
<!-- Recommendations -->
|
||||
<div class="card mb-4">
|
||||
<div class="card-header bg-white">
|
||||
<h5 class="mb-0">Recommended</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
@livewire(App\Livewire\MoviePage\Recommendations::class, ['movie' => $movie])
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">Write review</div>
|
||||
|
||||
<!-- Reviews Section -->
|
||||
<div class="card mb-4">
|
||||
<div class="card-header bg-white">
|
||||
<h5 class="mb-0">Reviews</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
@if(Auth::check())
|
||||
<form action="{{ route('movie.comment.store', $movie->slug) }}" method="POST">
|
||||
<form action="{{ route('movie.comment.store', $movie->slug) }}" method="POST" class="mb-4">
|
||||
@csrf
|
||||
<div class="form-group">
|
||||
<label for="">Comment</label>
|
||||
<textarea name="content" id="" cols="30" rows="3" class="form-control"></textarea>
|
||||
<label for="content" class="form-label">Write a Review</label>
|
||||
<textarea name="content" id="content" rows="3" class="form-control" placeholder="Share your thoughts about this movie..."></textarea>
|
||||
@error('content')
|
||||
<div class="alert alert-danger">{{ $message }}</div>
|
||||
<div class="text-danger mt-1">{{ $message }}</div>
|
||||
@enderror
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<br>
|
||||
<div class="float-end">
|
||||
<input type="submit" class="btn btn-sm btn-success" value="Post">
|
||||
</div>
|
||||
<div class="mt-2">
|
||||
<button type="submit" class="btn btn-primary">
|
||||
<span class="iconify me-1" data-icon="mdi-send"></span>
|
||||
Post Review
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
@else
|
||||
<div class="alert alert-info">
|
||||
You must be authenticated to comment! Please <a href="{{ route('login') }}">login</a> or <a href="{{ route('register') }}">register</a>.
|
||||
<span class="iconify me-1" data-icon="mdi-information"></span>
|
||||
You must be <a href="{{ route('login') }}" class="alert-link">logged in</a> to write a review.
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<!-- Reviews List -->
|
||||
<div class="reviews-list mt-4">
|
||||
@foreach($comments as $comment)
|
||||
<div class="review-item card mb-3">
|
||||
<div class="card-body">
|
||||
<div class="d-flex align-items-center mb-2">
|
||||
@if($comment->author_avatar)
|
||||
<img src="http://image.tmdb.org/t/p/w45/{{ $comment->author_avatar }}"
|
||||
alt="{{ $comment->author_name }}"
|
||||
class="rounded-circle me-2"
|
||||
width="40"
|
||||
height="40">
|
||||
@else
|
||||
<div class="rounded-circle bg-secondary me-2" style="width: 40px; height: 40px;"></div>
|
||||
@endif
|
||||
<div>
|
||||
<h6 class="mb-0">
|
||||
@if($comment->author_name)
|
||||
{{ $comment->author_name }}
|
||||
@else
|
||||
<a href="#" class="text-decoration-none">{{ $comment->author->name }}</a>
|
||||
@endif
|
||||
</h6>
|
||||
<small class="text-muted">
|
||||
{{ \Carbon\Carbon::createFromTimeString($comment->published_at)->diffForHumans() }}
|
||||
</small>
|
||||
</div>
|
||||
@if($comment->tmdb_id)
|
||||
<span class="badge bg-success ms-2">
|
||||
<a href="https://www.themoviedb.org/review/{{ $comment->tmdb_id }}" class="text-white text-decoration-none">TMDB</a>
|
||||
</span>
|
||||
@endif
|
||||
</div>
|
||||
<div class="review-content">
|
||||
{!! $comment->content !!}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</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">
|
||||
@else
|
||||
// user avatar
|
||||
@endif
|
||||
@if($comment->author_name)
|
||||
{{ $comment->author_name }}
|
||||
@else
|
||||
<a href="">{{ $comment->author->name }}</a>
|
||||
@endif
|
||||
|
||||
@if($comment->tmdb_id)
|
||||
<span class="badge text-bg-success btn-tmdb"><a href="https://www.themoviedb.org/review/{{ $comment->tmdb_id }}">TMDB</a></span>
|
||||
@endif
|
||||
<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">
|
||||
|
||||
<!-- Sidebar -->
|
||||
<div class="col-lg-3">
|
||||
<div class="card">
|
||||
<div class="user-actions">
|
||||
<a href="" class="mark-as-seen-btn {{ auth()->check() ? ($movie->wasListedBy('watched', auth()->user()) ? 'seen' : '') : '' }}" data-id="{{ $movie->id }}" data-type="movie" data-list="watched">
|
||||
<span class="iconify" data-icon="mdi-eye-check-outline"></span> Mark as seen
|
||||
<div class="card-body">
|
||||
<div class="user-actions">
|
||||
<a href="#" class="d-block mb-3 text-decoration-none mark-as-seen-btn {{ auth()->check() ? ($movie->wasListedBy('watched', auth()->user()) ? 'seen' : '') : '' }}"
|
||||
data-id="{{ $movie->id }}"
|
||||
data-type="movie"
|
||||
data-list="watched">
|
||||
<span class="iconify me-1" data-icon="mdi-eye-check-outline"></span>
|
||||
Mark as seen
|
||||
</a>
|
||||
<a href="" class="like-btn {{ auth()->check() ? ($movie->wasListedBy('liked', auth()->user()) ? 'liked' : '') : '' }}" data-id="{{ $movie->id }}" data-type="movie" data-list="liked">
|
||||
<span class="iconify" data-icon="mdi-thumb-up-outline"></span> Like
|
||||
<a href="#" class="d-block mb-3 text-decoration-none like-btn {{ auth()->check() ? ($movie->wasListedBy('liked', auth()->user()) ? 'liked' : '') : '' }}"
|
||||
data-id="{{ $movie->id }}"
|
||||
data-type="movie"
|
||||
data-list="liked">
|
||||
<span class="iconify me-1" data-icon="mdi-thumb-up-outline"></span>
|
||||
Like
|
||||
</a>
|
||||
<a href="" class="add-to-list-btn">
|
||||
<span class="iconify" data-icon="mdi-playlist-check"></span> add to list
|
||||
<span class="arrow float-end">
|
||||
↓
|
||||
<a href="#" class="d-block mb-3 text-decoration-none add-to-list-btn">
|
||||
<span class="iconify me-1" data-icon="mdi-playlist-check"></span>
|
||||
Add to list
|
||||
<span class="float-end">
|
||||
<span class="iconify" data-icon="mdi-chevron-down"></span>
|
||||
</span>
|
||||
</a>
|
||||
<hr>
|
||||
<hr>
|
||||
@include('layouts.rating')
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user