engagement system
This commit is contained in:
@@ -28,7 +28,31 @@
|
||||
@endif
|
||||
</p>
|
||||
</div>
|
||||
<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
|
||||
@@ -84,6 +108,77 @@
|
||||
</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())
|
||||
@@ -111,4 +206,87 @@
|
||||
</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
|
||||
|
||||
Reference in New Issue
Block a user