some progress
This commit is contained in:
@@ -1,122 +1,183 @@
|
||||
@extends('layouts.app')
|
||||
|
||||
@section('content')
|
||||
<div class="container-fluid celebrity-page">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-10">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h1 class="celebrity-title">{{ $celebrity->name }}</h1>
|
||||
</div>
|
||||
<div class="container-fluid celebrity-page py-4">
|
||||
<div class="row">
|
||||
<!-- Main Content -->
|
||||
<div class="col-lg-9">
|
||||
<!-- Celebrity 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/{{ $celebrity->profile_path }}" alt="">
|
||||
<a href="https://www.themoviedb.org/person/{{ $celebrity->tmdb_id }}" target="_blank">TMDB</a>
|
||||
<!-- Profile and Actions -->
|
||||
<div class="col-md-3">
|
||||
<div class="celebrity-poster mb-3">
|
||||
@if($celebrity->profile_path)
|
||||
<img src="http://image.tmdb.org/t/p/w342/{{ $celebrity->profile_path }}"
|
||||
alt="{{ $celebrity->name }}"
|
||||
class="img-fluid rounded shadow-sm">
|
||||
@else
|
||||
<div class="no-profile rounded shadow-sm d-flex align-items-center justify-content-center p-2" style="height: 300px; background-color: #f8f9fa;">
|
||||
<span class="text-muted">No Image</span>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<!-- External Links -->
|
||||
<div class="external-links mb-3">
|
||||
<div class="d-flex gap-2">
|
||||
<a href="https://www.themoviedb.org/person/{{ $celebrity->tmdb_id }}" class="btn btn-sm btn-outline-secondary" target="_blank">
|
||||
<img src="{{ asset('/img/tmdb.webp') }}" alt="TMDB" height="20">
|
||||
</a>
|
||||
@if($celebrity->imdb_id)
|
||||
<a href="https://www.imdb.com/name/{{ $celebrity->imdb_id }}" class="btn btn-sm btn-outline-secondary" target="_blank">
|
||||
<img src="{{ asset('/img/imdb.png') }}" alt="IMDB" height="20">
|
||||
</a>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if($celebrity->homepage)
|
||||
| <a href="{{ $celebrity->homepage }}" target="_blank">TMDB</a>
|
||||
@endif
|
||||
@if($celebrity->imdb_id)
|
||||
| <a href="https://www.imdb.com/name/{{ $celebrity->imdb_id }}" target="_blank">IMDB</a>
|
||||
<a href="{{ $celebrity->homepage }}" target="_blank" class="btn btn-outline-secondary w-100 mb-3">
|
||||
<span class="iconify me-1" data-icon="mdi-home"></span>
|
||||
Homepage
|
||||
</a>
|
||||
@endif
|
||||
</div>
|
||||
<div class="col-md-10">
|
||||
@if($celebrity->birtday)
|
||||
<strong>Birthday</strong> {{ $celebrity->birtday }} @if($celebrity->palce_of_birth) ({{ $celebrity->palce_of_birth }}) @endif
|
||||
@endif
|
||||
@if($celebrity->deathday)
|
||||
<strong>Deathday</strong> {{ $celebrity->deathday }}
|
||||
@endif
|
||||
<p>
|
||||
{{ $celebrity->biography }}
|
||||
</p>
|
||||
|
||||
<!-- Celebrity Info -->
|
||||
<div class="col-md-9">
|
||||
<h1 class="celebrity-title mb-2">{{ $celebrity->name }}</h1>
|
||||
|
||||
<div class="personal-info mb-3">
|
||||
@if($celebrity->birtday)
|
||||
<p class="mb-1">
|
||||
<strong class="text-muted">Birthday:</strong> {{ $celebrity->birtday }}
|
||||
@if($celebrity->palce_of_birth) ({{ $celebrity->palce_of_birth }}) @endif
|
||||
</p>
|
||||
@endif
|
||||
@if($celebrity->deathday)
|
||||
<p class="mb-1">
|
||||
<strong class="text-muted">Deathday:</strong> {{ $celebrity->deathday }}
|
||||
</p>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<div class="biography mb-4">
|
||||
<h5 class="mb-2">Biography</h5>
|
||||
<p class="text-muted">{{ $celebrity->biography }}</p>
|
||||
</div>
|
||||
|
||||
@if($celebrity->also_known_as)
|
||||
<p>
|
||||
<strong>Also known as:</strong>
|
||||
@foreach(json_decode($celebrity->also_known_as ?? "{}", true) as $alsoKnown)
|
||||
{{ $alsoKnown }}
|
||||
@if(!$loop->last), @endif
|
||||
@endforeach
|
||||
</p>
|
||||
<div class="also-known mb-4">
|
||||
<h5 class="mb-2">Also Known As</h5>
|
||||
<p class="text-muted">
|
||||
@foreach(json_decode($celebrity->also_known_as ?? "{}", true) as $alsoKnown)
|
||||
{{ $alsoKnown }}@if(!$loop->last), @endif
|
||||
@endforeach
|
||||
</p>
|
||||
</div>
|
||||
@endif
|
||||
<ul class="nav nav-tabs" id="myTab" role="tablist">
|
||||
|
||||
<!-- Tabs -->
|
||||
<div class="celebrity-tabs">
|
||||
<ul class="nav nav-tabs" id="celebrityTabs" role="tablist">
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link active" id="movies-tab" data-bs-toggle="tab" data-bs-target="#movies-tab-pane" type="button" role="tab" aria-controls="movies-tab-pane" aria-selected="true">Movies</button>
|
||||
<button class="nav-link active" id="movies-tab" data-bs-toggle="tab" data-bs-target="#movies" type="button" role="tab">Movies</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link" id="shows-tab" data-bs-toggle="tab" data-bs-target="#shows-tab-pane" type="button" role="tab" aria-controls="shows-tab-pane" aria-selected="false">Shows</button>
|
||||
<button class="nav-link" id="shows-tab" data-bs-toggle="tab" data-bs-target="#shows" type="button" role="tab">Shows</button>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="tab-content" id="myTabContent">
|
||||
<div class="tab-pane fade show active" id="movies-tab-pane" role="tabpanel" aria-labelledby="movies-tab" tabindex="0">
|
||||
<div class="row">
|
||||
@foreach($moviesByDepartments as $department => $movies)
|
||||
<div class="celebrity-department">
|
||||
<h3>{{ $department }}</h3>
|
||||
</div>
|
||||
<div class="tab-content p-3 border border-top-0 rounded-bottom" id="celebrityTabsContent">
|
||||
<div class="tab-pane fade show active" id="movies" role="tabpanel">
|
||||
@foreach($moviesByDepartments as $department => $movies)
|
||||
<h5 class="mt-3 mb-3">{{ $department }}</h5>
|
||||
<div class="row">
|
||||
@foreach($movies as $movie)
|
||||
<div class="col-md-2">
|
||||
<div class="celebrity-movie-small">
|
||||
<a href="{{ route('movie.show', $movie->slug) }}">
|
||||
<img
|
||||
src="http://image.tmdb.org/t/p/w185/{{ $movie->poster_path }}"
|
||||
alt="{{ $movie->title }}"
|
||||
title="{{ $movie->title }}"
|
||||
class="img img-fluid"
|
||||
>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-md-2 mb-3">
|
||||
<a href="{{ route('movie.show', $movie->slug) }}" class="text-decoration-none">
|
||||
@if($movie->poster_path)
|
||||
<div class="movie-poster">
|
||||
<img
|
||||
src="http://image.tmdb.org/t/p/w185/{{ $movie->poster_path }}"
|
||||
alt="{{ $movie->title }}"
|
||||
title="{{ $movie->title }}"
|
||||
class="img-fluid rounded shadow-sm"
|
||||
>
|
||||
<div class="movie-title text-center mt-2">
|
||||
<small>{{ $movie->title }}</small>
|
||||
</div>
|
||||
</div>
|
||||
@else
|
||||
<div class="no-poster rounded shadow-sm d-flex align-items-center justify-content-center p-2" style="height: 150px; background-color: #f8f9fa;">
|
||||
<small class="text-center">{{ $movie->title }}</small>
|
||||
</div>
|
||||
@endif
|
||||
</a>
|
||||
</div>
|
||||
@endforeach
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
<div class="tab-pane fade" id="shows-tab-pane" role="tabpanel" aria-labelledby="shows-tab" tabindex="0">
|
||||
<div class="row">
|
||||
@foreach($showsByDepartment as $department => $shows)
|
||||
<div class="celebrity-department">
|
||||
<h3>{{ $department }}</h3>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="shows" role="tabpanel">
|
||||
@foreach($showsByDepartment as $department => $shows)
|
||||
<h5 class="mt-3 mb-3">{{ $department }}</h5>
|
||||
<div class="row">
|
||||
@foreach($shows as $show)
|
||||
<div class="col-md-2">
|
||||
<div class="celebrity-movie-small">
|
||||
<a href="{{ route('show.show', $show->slug) }}">
|
||||
<img
|
||||
src="http://image.tmdb.org/t/p/w185/{{ $show->poster_path }}"
|
||||
alt="{{ $show->name }}"
|
||||
title="{{ $show->name }}"
|
||||
class="img img-fluid"
|
||||
>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-md-2 mb-3">
|
||||
<a href="{{ route('show.show', $show->slug) }}" class="text-decoration-none">
|
||||
@if($show->poster_path)
|
||||
<div class="movie-poster">
|
||||
<img
|
||||
src="http://image.tmdb.org/t/p/w185/{{ $show->poster_path }}"
|
||||
alt="{{ $show->name }}"
|
||||
title="{{ $show->name }}"
|
||||
class="img-fluid rounded shadow-sm"
|
||||
>
|
||||
<div class="movie-title text-center mt-2">
|
||||
<small>{{ $show->name }}</small>
|
||||
</div>
|
||||
</div>
|
||||
@else
|
||||
<div class="no-poster rounded shadow-sm d-flex align-items-center justify-content-center p-2" style="height: 150px; background-color: #f8f9fa;">
|
||||
<small class="text-center">{{ $show->name }}</small>
|
||||
</div>
|
||||
@endif
|
||||
</a>
|
||||
</div>
|
||||
@endforeach
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
|
||||
<!-- Sidebar -->
|
||||
<div class="col-lg-3">
|
||||
<div class="card">
|
||||
<div class="user-actions">
|
||||
<ul>
|
||||
<li>
|
||||
<a href=""><span class="iconify" data-icon="mdi-eye-check-outline"></span> Mark as seen</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""><span class="iconify" data-icon="mdi-thumb-up-outline"></span> Like</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""><span class="iconify" data-icon="mdi-playlist-check"></span> add to list</a>
|
||||
</li>
|
||||
</ul>
|
||||
<hr>
|
||||
rate
|
||||
<hr>
|
||||
<div class="card-body">
|
||||
<div class="user-actions">
|
||||
<a href="#" class="d-block mb-3 text-decoration-none">
|
||||
<span class="iconify me-1" data-icon="mdi-eye-check-outline"></span> Mark as seen
|
||||
</a>
|
||||
<a href="#" class="d-block mb-3 text-decoration-none">
|
||||
<span class="iconify me-1" data-icon="mdi-thumb-up-outline"></span> Like
|
||||
</a>
|
||||
<a href="#" class="d-block mb-3 text-decoration-none">
|
||||
<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>
|
||||
@include('layouts.rating')
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user