187 lines
12 KiB
PHP
187 lines
12 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('content')
|
|
<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">
|
|
<!-- 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" class="btn btn-outline-secondary w-100 mb-3">
|
|
<span class="iconify me-1" data-icon="mdi-home"></span>
|
|
Homepage
|
|
</a>
|
|
@endif
|
|
</div>
|
|
|
|
<!-- 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)
|
|
<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
|
|
|
|
<!-- 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" 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" type="button" role="tab">Shows</button>
|
|
</li>
|
|
</ul>
|
|
<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 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
|
|
</div>
|
|
@endforeach
|
|
</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 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
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Sidebar -->
|
|
<div class="col-lg-3">
|
|
<div class="card">
|
|
<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>
|
|
</div>
|
|
</div>
|
|
@endsection
|