293 lines
14 KiB
PHP
293 lines
14 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('content')
|
|
<div class="container">
|
|
<div class="row justify-content-center">
|
|
<div class="col-md-10">
|
|
@if(session('success'))
|
|
<div class="alert alert-success alert-dismissible fade show" role="alert">
|
|
{{ session('success') }}
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
|
</div>
|
|
@endif
|
|
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<!-- Product Header -->
|
|
<div class="d-flex justify-content-between align-items-start mb-4">
|
|
<div class="flex-grow-1">
|
|
<h1 class="mb-2">{{ $product->title }}</h1>
|
|
<p class="text-muted mb-0">
|
|
<span class="badge bg-secondary">{{ $product->category->name }}</span>
|
|
@if($product->isPending())
|
|
<span class="badge bg-warning text-dark">Pending Review</span>
|
|
@elseif($product->isApproved())
|
|
<span class="badge bg-success">Approved</span>
|
|
@elseif($product->isRejected())
|
|
<span class="badge bg-danger">Rejected</span>
|
|
@endif
|
|
</p>
|
|
</div>
|
|
<div class="d-flex align-items-center gap-2">
|
|
@auth
|
|
<!-- Upvote Button -->
|
|
<button
|
|
class="btn btn-outline-primary upvote-btn {{ $product->isUpvotedBy(auth()->user()) ? 'active' : '' }}"
|
|
data-product-id="{{ $product->id }}"
|
|
data-upvoted="{{ $product->isUpvotedBy(auth()->user()) ? 'true' : 'false' }}">
|
|
<i class="bi bi-arrow-up-circle"></i>
|
|
<span class="upvote-count">{{ $product->upvotes()->count() }}</span>
|
|
</button>
|
|
|
|
<!-- Bookmark Button -->
|
|
<button
|
|
class="btn btn-outline-secondary bookmark-btn {{ $product->isBookmarkedBy(auth()->user()) ? 'active' : '' }}"
|
|
data-product-id="{{ $product->id }}"
|
|
data-bookmarked="{{ $product->isBookmarkedBy(auth()->user()) ? 'true' : 'false' }}">
|
|
<i class="bi {{ $product->isBookmarkedBy(auth()->user()) ? 'bi-bookmark-fill' : 'bi-bookmark' }}"></i>
|
|
</button>
|
|
@else
|
|
<div class="text-muted">
|
|
<i class="bi bi-arrow-up-circle"></i>
|
|
<span>{{ $product->upvotes()->count() }}</span> upvotes
|
|
</div>
|
|
@endauth
|
|
|
|
@can('edit-product', $product)
|
|
<a href="{{ route('products.edit', $product) }}" class="btn btn-sm btn-outline-primary">Edit</a>
|
|
@endcan
|
|
@can('delete-product', $product)
|
|
<form action="{{ route('products.destroy', $product) }}" method="POST" class="d-inline" onsubmit="return confirm('Are you sure you want to delete this product?');">
|
|
@csrf
|
|
@method('DELETE')
|
|
<button type="submit" class="btn btn-sm btn-outline-danger">Delete</button>
|
|
</form>
|
|
@endcan
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Product Thumbnail -->
|
|
@if($product->thumbnail_url)
|
|
<div class="mb-4">
|
|
<img src="{{ $product->thumbnail_url }}" alt="{{ $product->title }}" class="img-fluid rounded" style="max-height: 400px;">
|
|
</div>
|
|
@endif
|
|
|
|
<!-- Product Description -->
|
|
<div class="mb-4">
|
|
<h4>About</h4>
|
|
<p class="lead">{{ $product->description }}</p>
|
|
</div>
|
|
|
|
<!-- Product Links -->
|
|
<div class="mb-4">
|
|
<a href="{{ $product->website_url }}" target="_blank" rel="noopener" class="btn btn-primary btn-lg">
|
|
Visit Website →
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Product Metadata -->
|
|
<hr>
|
|
<div class="row text-muted small">
|
|
<div class="col-md-6">
|
|
<strong>Submitted by:</strong>
|
|
<a href="{{ route('profile.show', $product->user) }}">{{ $product->user->name }}</a>
|
|
</div>
|
|
<div class="col-md-6 text-md-end">
|
|
<strong>Submitted:</strong> {{ $product->created_at->format('F j, Y') }}
|
|
</div>
|
|
</div>
|
|
|
|
@if($product->isApproved() && $product->approved_at)
|
|
<div class="row text-muted small mt-2">
|
|
<div class="col-md-12">
|
|
<strong>Approved:</strong> {{ $product->approved_at->format('F j, Y') }}
|
|
</div>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Comments Section -->
|
|
<div class="card mt-3">
|
|
<div class="card-header">
|
|
<h5 class="mb-0">Comments ({{ $product->comments()->count() }})</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
@auth
|
|
<!-- Comment Form -->
|
|
<form action="{{ route('products.comments.store', $product) }}" method="POST" class="mb-4">
|
|
@csrf
|
|
<div class="mb-3">
|
|
<textarea
|
|
class="form-control @error('body') is-invalid @enderror"
|
|
name="body"
|
|
rows="3"
|
|
placeholder="Share your thoughts about this product..."
|
|
required
|
|
maxlength="1000">{{ old('body') }}</textarea>
|
|
@error('body')
|
|
<span class="invalid-feedback" role="alert">
|
|
<strong>{{ $message }}</strong>
|
|
</span>
|
|
@enderror
|
|
</div>
|
|
<button type="submit" class="btn btn-primary">Post Comment</button>
|
|
</form>
|
|
@else
|
|
<p class="text-muted">
|
|
<a href="{{ route('login') }}">Login</a> to post a comment.
|
|
</p>
|
|
@endauth
|
|
|
|
<!-- Comments List -->
|
|
@forelse($product->comments as $comment)
|
|
<div class="border-top pt-3 mt-3">
|
|
<div class="d-flex">
|
|
<div class="me-3">
|
|
@if($comment->user->avatar_url)
|
|
<img src="{{ $comment->user->avatar_url }}" alt="{{ $comment->user->name }}" class="rounded-circle" style="width: 40px; height: 40px; object-fit: cover;">
|
|
@else
|
|
<div class="bg-secondary text-white rounded-circle d-flex align-items-center justify-content-center" style="width: 40px; height: 40px;">
|
|
{{ strtoupper(substr($comment->user->name, 0, 1)) }}
|
|
</div>
|
|
@endif
|
|
</div>
|
|
<div class="flex-grow-1">
|
|
<div class="d-flex justify-content-between align-items-start">
|
|
<div>
|
|
<strong>{{ $comment->user->name }}</strong>
|
|
<span class="text-muted small">· {{ $comment->created_at->diffForHumans() }}</span>
|
|
</div>
|
|
@can('delete-comment', $comment)
|
|
<form action="{{ route('comments.destroy', $comment) }}" method="POST" class="d-inline">
|
|
@csrf
|
|
@method('DELETE')
|
|
<button type="submit" class="btn btn-sm btn-link text-danger p-0" onclick="return confirm('Are you sure you want to delete this comment?');">
|
|
Delete
|
|
</button>
|
|
</form>
|
|
@endcan
|
|
</div>
|
|
<p class="mb-0 mt-2">{{ $comment->body }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@empty
|
|
<p class="text-muted text-center py-4">No comments yet. Be the first to comment!</p>
|
|
@endforelse
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Moderator Actions -->
|
|
@can('approve-product')
|
|
@if($product->isPending() || $product->isRejected())
|
|
<div class="card mt-3">
|
|
<div class="card-header bg-warning">
|
|
<h5 class="mb-0">Moderator Actions</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<form action="{{ route('products.approve', $product) }}" method="POST" class="d-inline">
|
|
@csrf
|
|
<button type="submit" class="btn btn-success">Approve Product</button>
|
|
</form>
|
|
<form action="{{ route('products.reject', $product) }}" method="POST" class="d-inline">
|
|
@csrf
|
|
<button type="submit" class="btn btn-danger" onclick="return confirm('Are you sure you want to reject this product?');">Reject Product</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
@endcan
|
|
|
|
<div class="mt-3">
|
|
<a href="{{ route('products.index') }}" class="btn btn-secondary">← Back to Products</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@push('styles')
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
|
|
@endpush
|
|
|
|
@push('scripts')
|
|
<script>
|
|
// Upvote functionality
|
|
document.querySelectorAll('.upvote-btn').forEach(button => {
|
|
button.addEventListener('click', async function() {
|
|
const productId = this.getAttribute('data-product-id');
|
|
const isUpvoted = this.getAttribute('data-upvoted') === 'true';
|
|
|
|
try {
|
|
const response = await fetch(`/products/${productId}/upvote`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'X-CSRF-TOKEN': '{{ csrf_token() }}',
|
|
'Content-Type': 'application/json',
|
|
'Accept': 'application/json',
|
|
},
|
|
});
|
|
|
|
const data = await response.json();
|
|
|
|
if (data.success) {
|
|
// Update button state
|
|
this.setAttribute('data-upvoted', data.upvoted ? 'true' : 'false');
|
|
if (data.upvoted) {
|
|
this.classList.add('active');
|
|
} else {
|
|
this.classList.remove('active');
|
|
}
|
|
|
|
// Update count
|
|
this.querySelector('.upvote-count').textContent = data.upvotesCount;
|
|
}
|
|
} catch (error) {
|
|
console.error('Error toggling upvote:', error);
|
|
}
|
|
});
|
|
});
|
|
|
|
// Bookmark functionality
|
|
document.querySelectorAll('.bookmark-btn').forEach(button => {
|
|
button.addEventListener('click', async function() {
|
|
const productId = this.getAttribute('data-product-id');
|
|
const isBookmarked = this.getAttribute('data-bookmarked') === 'true';
|
|
|
|
try {
|
|
const response = await fetch(`/products/${productId}/bookmark`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'X-CSRF-TOKEN': '{{ csrf_token() }}',
|
|
'Content-Type': 'application/json',
|
|
'Accept': 'application/json',
|
|
},
|
|
});
|
|
|
|
const data = await response.json();
|
|
|
|
if (data.success) {
|
|
// Update button state
|
|
this.setAttribute('data-bookmarked', data.bookmarked ? 'true' : 'false');
|
|
const icon = this.querySelector('i');
|
|
|
|
if (data.bookmarked) {
|
|
this.classList.add('active');
|
|
icon.classList.remove('bi-bookmark');
|
|
icon.classList.add('bi-bookmark-fill');
|
|
} else {
|
|
this.classList.remove('active');
|
|
icon.classList.remove('bi-bookmark-fill');
|
|
icon.classList.add('bi-bookmark');
|
|
}
|
|
}
|
|
} catch (error) {
|
|
console.error('Error toggling bookmark:', error);
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
@endpush
|
|
@endsection
|