130 lines
3.7 KiB
PHP
130 lines
3.7 KiB
PHP
@csrf
|
|
@if(isset($review))
|
|
@method('PUT')
|
|
@endif
|
|
|
|
<div class="mb-4">
|
|
<label for="rating" class="form-label">Rating (1-20)</label>
|
|
<div class="interactive-stars mb-2">
|
|
<div class="stars-container" id="starsContainer">
|
|
@for ($i = 1; $i <= 10; $i++)
|
|
<i class="fas fa-star star-icon" data-value="{{ $i }}"></i>
|
|
@endfor
|
|
</div>
|
|
<div class="rating-value-display mt-2">
|
|
<span id="ratingValue">{{ isset($review) ? $review->rating : 0 }}</span>/10
|
|
</div>
|
|
</div>
|
|
<input type="hidden" name="rating" id="ratingInput" value="{{ isset($review) ? $review->rating : '' }}" required>
|
|
@error('rating')
|
|
<div class="text-danger mt-1">{{ $message }}</div>
|
|
@enderror
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<label for="content" class="form-label">Review</label>
|
|
<textarea name="content" id="content" class="form-control bg-dark text-white @error('content') is-invalid @enderror" rows="10" required>{{ old('content', $review->content ?? '') }}</textarea>
|
|
@error('content')
|
|
<div class="text-danger mt-1">{{ $message }}</div>
|
|
@enderror
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<div class="form-check">
|
|
<input type="checkbox" name="recommended" id="recommended" class="form-check-input" value="1" {{ isset($review) && $review->recommended ? 'checked' : '' }}>
|
|
<label for="recommended" class="form-check-label">I recommend this game</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="d-grid">
|
|
<button type="submit" class="btn btn-gradient">
|
|
{{ isset($review) ? 'Update Review' : 'Submit Review' }}
|
|
</button>
|
|
</div>
|
|
|
|
@push('styles')
|
|
<style>
|
|
.interactive-stars {
|
|
text-align: center;
|
|
}
|
|
|
|
.stars-container {
|
|
display: inline-flex;
|
|
gap: 5px;
|
|
}
|
|
|
|
.star-icon {
|
|
font-size: 32px;
|
|
color: #dcdce6;
|
|
cursor: pointer;
|
|
transition: color 0.2s ease;
|
|
}
|
|
|
|
.star-icon.active {
|
|
color: #fdd835;
|
|
}
|
|
|
|
.star-icon:hover {
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
.rating-value-display {
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
color: #fdd835;
|
|
}
|
|
</style>
|
|
@endpush
|
|
|
|
@push('scripts')
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const stars = document.querySelectorAll('.star-icon');
|
|
const ratingInput = document.getElementById('ratingInput');
|
|
const ratingValue = document.getElementById('ratingValue');
|
|
|
|
// Initialize stars based on existing rating
|
|
const initialRating = parseInt(ratingInput.value) || 0;
|
|
updateStars(initialRating);
|
|
|
|
stars.forEach(star => {
|
|
// Hover effect
|
|
star.addEventListener('mouseenter', function() {
|
|
const value = parseInt(this.dataset.value);
|
|
highlightStars(value);
|
|
});
|
|
|
|
// Click to set rating
|
|
star.addEventListener('click', function() {
|
|
const value = parseInt(this.dataset.value);
|
|
ratingInput.value = value;
|
|
ratingValue.textContent = value;
|
|
updateStars(value);
|
|
});
|
|
});
|
|
|
|
// Reset to selected rating when mouse leaves the container
|
|
document.getElementById('starsContainer').addEventListener('mouseleave', function() {
|
|
const selectedRating = parseInt(ratingInput.value) || 0;
|
|
updateStars(selectedRating);
|
|
});
|
|
|
|
function highlightStars(value) {
|
|
stars.forEach(s => {
|
|
const starValue = parseInt(s.dataset.value);
|
|
s.classList.toggle('active', starValue <= value);
|
|
});
|
|
ratingValue.textContent = value;
|
|
}
|
|
|
|
function updateStars(value) {
|
|
stars.forEach(s => {
|
|
const starValue = parseInt(s.dataset.value);
|
|
s.classList.toggle('active', starValue <= value);
|
|
});
|
|
ratingValue.textContent = value;
|
|
}
|
|
});
|
|
</script>
|
|
@endpush
|