This commit is contained in:
2025-10-09 00:22:54 +03:00
parent 7e0e330ef6
commit b8b39c945d
28 changed files with 2186 additions and 452 deletions
+80 -46
View File
@@ -3,100 +3,134 @@
@section('content')
<div class="profile-page pattern{{ rand(1,6) }}">
<div class="container">
<div class="row">
<div class="col-md-2 text-center">
<img src="{{ asset('/img/user_no_avatar.png') }}" alt="" class="user-avatar">
<div class="row align-items-center">
<div class="col-md-3 text-center">
<div class="position-relative">
<img src="{{ asset('/img/user_no_avatar.png') }}" alt="{{ $user->name }}'s avatar" class="user-avatar">
@if(auth()->check() && auth()->user()->id === $user->id)
<div class="avatar-edit-overlay">
<a href="#" class="btn btn-sm btn-light rounded-circle">
<span class="iconify" data-icon="mdi:camera"></span>
</a>
</div>
@endif
</div>
</div>
<div class="col-md-5">
<h1>{{ $user->name }}</h1><span class="register-date">Member since {{ $user->created_at->format('F Y') }}</span>
<br>
2 Followers 3 Following average movie score average tv series score
<div class="col-md-6">
<div class="profile-info">
<h1 class="mb-1">{{ $user->name }}</h1>
<div class="user-meta mb-2">
<span class="register-date"><span class="iconify" data-icon="mdi:calendar-clock"></span> Member since {{ $user->created_at->format('F Y') }}</span>
</div>
<div class="user-stats">
<div class="row">
<div class="col-4 text-center">
<div class="stat-value">2</div>
<div class="stat-label">Followers</div>
</div>
<div class="col-4 text-center">
<div class="stat-value">3</div>
<div class="stat-label">Following</div>
</div>
<div class="col-4 text-center">
<div class="stat-value">7.5</div>
<div class="stat-label">Avg Rating</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-5">
<div class="col-md-3 text-end">
@if(auth()->check() && auth()->user()->id !== $user->id)
<button class="btn btn-primary mb-2"><span class="iconify" data-icon="mdi:account-plus"></span> Follow</button>
@elseif(auth()->check() && auth()->user()->id === $user->id)
<a href="#" class="btn btn-outline-secondary mb-2"><span class="iconify" data-icon="mdi:account-edit"></span> Edit Profile</a>
@endif
</div>
</div>
</div>
</div>
<div class="profile-page-menu">
<div class="row justify-content-center" style="margin-right: 0;">
<div class="col-md-10">
<div class="profile-nav">
<div class="menu-nav">
<ul class="list-inline">
<li class="float-start">
<div class="container">
<div class="row">
<div class="col-12">
<nav class="profile-nav">
<ul class="nav nav-pills">
<li class="nav-item">
<a
class="nav-link {{ \App\Service\ToolService::isCurrentRoute(route('profile.show', $user->slug)) ? 'active' : '' }}"
href="{{ route('profile.show', $user->slug) }}"
class="{{ \App\Service\ToolService::isCurrentRoute(route('profile.show', $user->slug)) ? 'active' : '' }}"
>
Profile
<span class="iconify" data-icon="mdi:account"></span> Profile
</a>
</li>
<li class="float-start">
<li class="nav-item">
<a
class="nav-link {{ \App\Service\ToolService::isCurrentRoute(route('profile.list.index', $user->slug)) ? 'active' : '' }}"
href="{{ route('profile.list.index', $user->slug) }}"
class="{{ \App\Service\ToolService::isCurrentRoute(route('profile.list.index', $user->slug)) ? 'active' : '' }}"
>
Lists
<span class="iconify" data-icon="mdi:format-list-bulleted"></span> Lists
</a>
</li>
<li class="float-start">
<li class="nav-item">
<a
class="nav-link {{ \App\Service\ToolService::isCurrentRoute(route('profile.list.show', [$user->slug, 'watched'])) ? 'active' : '' }}"
href="{{ route('profile.list.show', [$user->slug, 'watched']) }}"
class="{{ \App\Service\ToolService::isCurrentRoute(route('profile.list.show', [$user->slug, 'watched'])) ? 'active' : '' }}"
>
History
<span class="iconify" data-icon="mdi:history"></span> History
</a>
</li>
<li class="float-start">
<li class="nav-item">
<a
class="nav-link {{ \App\Service\ToolService::isCurrentRoute(route('profile.list.show', [$user->slug, 'watchlist'])) ? 'active' : '' }}"
href="{{ route('profile.list.show', [$user->slug, 'watchlist']) }}"
class="{{ \App\Service\ToolService::isCurrentRoute(route('profile.list.show', [$user->slug, 'watchlist'])) ? 'active' : '' }}"
>
Watchlist
<span class="iconify" data-icon="mdi:bookmark-outline"></span> Watchlist
</a>
</li>
<li class="float-start">
<li class="nav-item">
<a
class="nav-link {{ \App\Service\ToolService::isCurrentRoute(route('profile.list.show', [$user->slug, 'collection'])) ? 'active' : '' }}"
href="{{ route('profile.list.show', [$user->slug, 'collection']) }}"
class="{{ \App\Service\ToolService::isCurrentRoute(route('profile.list.show', [$user->slug, 'collection'])) ? 'active' : '' }}"
>
Collection
<span class="iconify" data-icon="mdi:movie-open"></span> Collection
</a>
</li>
<li class="float-start">
<a href="">
Ratings
<li class="nav-item">
<a class="nav-link" href="#">
<span class="iconify" data-icon="mdi:star-outline"></span> Ratings
</a>
</li>
<li class="float-start">
<a href="">
Reviews
<li class="nav-item">
<a class="nav-link" href="#">
<span class="iconify" data-icon="mdi:comment-text-outline"></span> Reviews
</a>
</li>
<li class="float-start">
<li class="nav-item">
<a
class="nav-link {{ \App\Service\ToolService::isCurrentRoute(route('profile.list.show', [$user->slug, 'liked'])) ? 'active' : '' }}"
href="{{ route('profile.list.show', [$user->slug, 'liked']) }}"
class="{{ \App\Service\ToolService::isCurrentRoute(route('profile.list.show', [$user->slug, 'liked'])) ? 'active' : '' }}"
>
Likes
<span class="iconify" data-icon="mdi:heart-outline"></span> Likes
</a>
</li>
<li class="float-start">
<a href="">
Network
<li class="nav-item">
<a class="nav-link" href="#">
<span class="iconify" data-icon="mdi:account-group"></span> Network
</a>
</li>
<li class="float-start">
<a href="">
Stats
<li class="nav-item">
<a class="nav-link" href="#">
<span class="iconify" data-icon="mdi:chart-bar"></span> Stats
</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
</div>
@yield('page_content')
<div class="profile-content py-4">
@yield('page_content')
</div>
@endsection
+256 -48
View File
@@ -1,78 +1,286 @@
@extends('profile.profile')
@section('page_content')
<br>
<div class="container">
<div class="row justify-content-center">
<!-- Top Cards Row -->
<div class="row">
<div class="col-md-4">
<div class="card">
<div class="card-header">Last watched</div>
<div class="card-body">
<div class="card shadow-sm h-100">
<div class="card-header d-flex justify-content-between align-items-center">
<h5 class="mb-0"><span class="iconify" data-icon="mdi:play-circle-outline"></span> Last Watched</h5>
<a href="#" class="text-decoration-none small">View All</a>
</div>
<div class="card-body text-center">
@if($lastWatched)
<a href="">
<img src="http://image.tmdb.org/t/p/w185/{{ $lastWatched->poster_path }}" alt="">
</a>r
<div class="position-relative mb-3">
<a href="#" class="d-block">
<img src="http://image.tmdb.org/t/p/w342/{{ $lastWatched->poster_path }}" alt="{{ $lastWatched->title ?? $lastWatched->name }}" class="img-fluid rounded shadow-sm">
<div class="overlay-play">
<span class="iconify" data-icon="mdi:play-circle" data-width="48"></span>
</div>
</a>
</div>
<h6 class="mb-1">{{ $lastWatched->title ?? $lastWatched->name }}</h6>
<div class="text-muted small">Watched on {{ now()->subDays(rand(1, 5))->format('M d, Y') }}</div>
@else
<div class="alert alert-success text-center">
Nothing to show here! <br> Go watch something!
<div class="alert alert-light text-center p-4 mb-0">
<span class="iconify mb-3" data-icon="mdi:movie-off" data-width="48"></span>
<h6>Nothing watched yet!</h6>
<p class="mb-0 text-muted small">Start watching to track your viewing history.</p>
</div>
@endif
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-header">Stats</div>
<div class="card-body">
Last 30 Days/Watched <br>
Shows — 4d 20h 24m (147 eps) <br>
Movies — 0m<br>
<br>
All Time/Watched<br>
Shows — 297d 17h 23m (12,095 eps)<br>
Movies — 44d 15h 23m (568 movies)
<div class="col-md-4">
<div class="card shadow-sm h-100">
<div class="card-header d-flex justify-content-between align-items-center">
<h5 class="mb-0"><span class="iconify" data-icon="mdi:chart-timeline-variant"></span> Watching Stats</h5>
<a href="#" class="text-decoration-none small">Details</a>
</div>
<div class="card-body">
<h6 class="text-uppercase text-muted small mb-3">Last 30 Days</h6>
<div class="d-flex justify-content-between mb-2">
<span><span class="iconify" data-icon="mdi:television"></span> Shows</span>
<span class="badge bg-primary rounded-pill">147 eps</span>
</div>
<div class="progress mb-3" style="height: 8px;">
<div class="progress-bar bg-primary" role="progressbar" style="width: 75%;" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="d-flex justify-content-between mb-2">
<span><span class="iconify" data-icon="mdi:movie"></span> Movies</span>
<span class="badge bg-success rounded-pill">12 movies</span>
</div>
<div class="progress mb-4" style="height: 8px;">
<div class="progress-bar bg-success" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<h6 class="text-uppercase text-muted small mb-3">All Time</h6>
<div class="row text-center">
<div class="col-6">
<h4 class="mb-0">12,095</h4>
<div class="small text-muted">Episodes</div>
</div>
<div class="col-6">
<h4 class="mb-0">568</h4>
<div class="small text-muted">Movies</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-header">Featured list</div>
<div class="card-body"></div>
<div class="card shadow-sm h-100">
<div class="card-header d-flex justify-content-between align-items-center">
<h5 class="mb-0"><span class="iconify" data-icon="mdi:format-list-bulleted"></span> Featured List</h5>
<a href="{{ route('profile.list.index', $user->slug) }}" class="text-decoration-none small">All Lists</a>
</div>
<div class="card-body">
<div class="featured-list">
<h6 class="mb-3">My Favorite Sci-Fi Movies</h6>
<div class="list-posters d-flex mb-3">
<div class="poster-thumbnail me-2">
<img src="https://image.tmdb.org/t/p/w92/rEm96ib0sPiZBADNKBHKBv5bve9.jpg" class="rounded shadow-sm" alt="Movie poster">
</div>
<div class="poster-thumbnail me-2">
<img src="https://image.tmdb.org/t/p/w92/5KlRFKKSbyCiyYpZSS3A6G5bW0K.jpg" class="rounded shadow-sm" alt="Movie poster">
</div>
<div class="poster-thumbnail me-2">
<img src="https://image.tmdb.org/t/p/w92/wuMc08IPKEatf9rnMNXvIDxqP4W.jpg" class="rounded shadow-sm" alt="Movie poster">
</div>
<div class="poster-thumbnail more-posters d-flex justify-content-center align-items-center rounded">
<span>+12</span>
</div>
</div>
<a href="#" class="btn btn-sm btn-outline-primary w-100">View List</a>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-header">Favourite</div>
<div class="card-body"></div>
<!-- Favorites Section -->
<div class="row mt-4">
<div class="col-12">
<div class="card shadow-sm">
<div class="card-header d-flex justify-content-between align-items-center">
<h5 class="mb-0"><span class="iconify" data-icon="mdi:heart"></span> Favorites</h5>
<a href="#" class="text-decoration-none small">View All</a>
</div>
<div class="card-body">
<div class="row">
@for ($i = 0; $i < 6; $i++)
<div class="col-md-2 col-sm-4 col-6 mb-3">
<div class="favorite-item text-center">
<a href="#" class="d-block mb-2">
<img src="https://picsum.photos/seed/{{ $i }}/185/278" class="img-fluid rounded shadow-sm" alt="Favorite item">
</a>
<h6 class="mb-0 text-truncate">Favorite Title</h6>
<div class="small text-muted">
<span class="iconify" data-icon="mdi:star" data-width="14"></span> 8.5
</div>
</div>
</div>
@endfor
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
recently watched episodes
<!-- Recent Activity Sections -->
<div class="row mt-4">
<div class="col-md-6">
<div class="card shadow-sm">
<div class="card-header d-flex justify-content-between align-items-center">
<h5 class="mb-0"><span class="iconify" data-icon="mdi:television"></span> Recent Episodes</h5>
<a href="#" class="text-decoration-none small">View All</a>
</div>
<div class="card-body p-0">
<ul class="list-group list-group-flush">
@for ($i = 0; $i < 5; $i++)
<li class="list-group-item">
<div class="d-flex">
<div class="flex-shrink-0 me-3">
<img src="https://picsum.photos/seed/ep{{ $i }}/120/68" class="rounded shadow-sm" alt="Episode thumbnail">
</div>
<div>
<h6 class="mb-0">Show Title</h6>
<div class="small text-muted mb-1">S{{ rand(1, 5) }}E{{ rand(1, 20) }} • {{ rand(20, 45) }} min</div>
<div class="small">Watched {{ rand(1, 30) }} days ago</div>
</div>
</div>
</li>
@endfor
</ul>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card shadow-sm">
<div class="card-header d-flex justify-content-between align-items-center">
<h5 class="mb-0"><span class="iconify" data-icon="mdi:movie"></span> Recent Movies</h5>
<a href="#" class="text-decoration-none small">View All</a>
</div>
<div class="card-body p-0">
<ul class="list-group list-group-flush">
@for ($i = 0; $i < 5; $i++)
<li class="list-group-item">
<div class="d-flex">
<div class="flex-shrink-0 me-3">
<img src="https://picsum.photos/seed/mv{{ $i }}/120/68" class="rounded shadow-sm" alt="Movie thumbnail">
</div>
<div>
<h6 class="mb-0">Movie Title</h6>
<div class="small text-muted mb-1">{{ rand(90, 180) }} min • {{ rand(2010, 2023) }}</div>
<div class="small">
<span class="badge bg-light text-dark me-1">Action</span>
<span class="badge bg-light text-dark">Drama</span>
</div>
</div>
</div>
</li>
@endfor
</ul>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
recently watched movies
<!-- Bottom Sections -->
<div class="row mt-4">
<div class="col-md-6">
<div class="card shadow-sm">
<div class="card-header">
<h5 class="mb-0"><span class="iconify" data-icon="mdi:chart-pie"></span> Most Watched Genres</h5>
</div>
<div class="card-body">
<div class="row">
@foreach(['Action', 'Drama', 'Comedy', 'Sci-Fi', 'Thriller', 'Horror'] as $index => $genre)
<div class="col-6 mb-3">
<div class="d-flex justify-content-between align-items-center mb-1">
<span>{{ $genre }}</span>
<span class="small text-muted">{{ rand(10, 150) }}</span>
</div>
<div class="progress" style="height: 6px;">
<div class="progress-bar bg-{{ ['primary', 'success', 'info', 'warning', 'danger', 'secondary'][$index] }}"
role="progressbar"
style="width: {{ rand(20, 95) }}%;"
aria-valuenow="{{ rand(20, 95) }}"
aria-valuemin="0"
aria-valuemax="100"></div>
</div>
</div>
@endforeach
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card shadow-sm">
<div class="card-header">
<h5 class="mb-0"><span class="iconify" data-icon="mdi:star"></span> Ratings Distribution</h5>
</div>
<div class="card-body">
<div class="ratings-chart">
@for ($i = 10; $i >= 1; $i--)
<div class="d-flex align-items-center mb-2">
<div class="rating-label me-2">{{ $i }}</div>
<div class="progress flex-grow-1" style="height: 12px;">
<div class="progress-bar bg-{{ $i >= 8 ? 'success' : ($i >= 5 ? 'warning' : 'danger') }}"
role="progressbar"
style="width: {{ $i == 8 ? 25 : ($i == 7 ? 20 : ($i == 9 ? 15 : rand(5, 10))) }}%;"
aria-valuenow="{{ $i == 8 ? 25 : ($i == 7 ? 20 : ($i == 9 ? 15 : rand(5, 10))) }}"
aria-valuemin="0"
aria-valuemax="100"></div>
</div>
<div class="rating-count ms-2 small">{{ $i == 8 ? 25 : ($i == 7 ? 20 : ($i == 9 ? 15 : rand(5, 10))) }}</div>
</div>
@endfor
<div class="text-center mt-3">
<div class="small text-muted">Average rating: <strong>7.5</strong> from <strong>142</strong> ratings</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
most watched genres
</div>
</div>
<div class="row">
<div class="col-md-12">
ratings graph
</div>
</div>
<div class="row">
<div class="col-md-12">
comments
<!-- Comments Section -->
<div class="row mt-4 mb-3">
<div class="col-12">
<div class="card shadow-sm">
<div class="card-header d-flex justify-content-between align-items-center">
<h5 class="mb-0"><span class="iconify" data-icon="mdi:comment-multiple"></span> Recent Comments</h5>
<a href="#" class="text-decoration-none small">View All</a>
</div>
<div class="card-body p-0">
<ul class="list-group list-group-flush">
@for ($i = 0; $i < 3; $i++)
<li class="list-group-item">
<div class="d-flex">
<div class="flex-shrink-0 me-3">
<img src="https://picsum.photos/seed/user{{ $i }}/50/50" class="rounded-circle" alt="User avatar">
</div>
<div>
<div class="d-flex align-items-center mb-1">
<h6 class="mb-0 me-2">User Name</h6>
<small class="text-muted">on <a href="#" class="text-decoration-none">Movie Title</a></small>
</div>
<p class="mb-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris.</p>
<div class="small text-muted">{{ rand(1, 30) }} days ago</div>
</div>
</div>
</li>
@endfor
</ul>
</div>
</div>
</div>
</div>
</div>