cleargame/resources/views/reviews/_form.blade.php

@csrf

<div class="mb-4">
    <label for="content" class="form-label">Review</label>
    <textarea name="content" id="content" rows="5" 
              class="form-control bg-dark text-white @error('content') is-invalid @enderror"
              required>{{ old('content', $review->content ?? '') }}</textarea>
    @error('content')
        <div class="invalid-feedback">{{ $message }}</div>
    @enderror
</div>

<div class="mb-4">
    <label class="form-label">Rating</label>
    <div class="rating-container">
        <div class="rating-stars d-flex gap-1">
            @for($i = 1; $i <= 10; $i++)
                <div class="rating-item" data-rating="{{ $i }}">
                    <input type="radio" name="rating" id="rating{{ $i }}" value="{{ $i }}"
                           class="rating-input" {{ old('rating', $review->rating ?? '') == $i ? 'checked' : '' }}>
                    <label for="rating{{ $i }}" class="rating-star">
                        <i class="fas fa-star"></i>
                    </label>
                    <span class="rating-number">{{ $i }}</span>
                </div>
            @endfor
        </div>
        <div class="rating-value mt-2 text-muted">
            <span class="current-rating">{{ old('rating', $review->rating ?? '0') }}</span>/10
        </div>
    </div>
    @error('rating')
        <div class="invalid-feedback d-block">{{ $message }}</div>
    @enderror
</div>

<div class="mb-4">
    <label class="form-label">Recommendation</label>
    <div class="recommendation-buttons d-flex gap-3">
        <input type="radio" name="recommended" id="recommended1" value="1" class="recommendation-input"
               {{ old('recommended', $review->recommended ?? '') == 1 ? 'checked' : '' }}>
        <label for="recommended1" class="recommendation-button btn btn-outline-success">
            <i class="fas fa-thumbs-up me-2"></i> Recommended
        </label>

        <input type="radio" name="recommended" id="recommended0" value="0" class="recommendation-input"
               {{ old('recommended', $review->recommended ?? '') == 0 ? 'checked' : '' }}>
        <label for="recommended0" class="recommendation-button btn btn-outline-danger">
            <i class="fas fa-thumbs-down me-2"></i> Not Recommended
        </label>
    </div>
    @error('recommended')
        <div class="invalid-feedback d-block">{{ $message }}</div>
    @enderror
</div>

<button type="submit" class="btn btn-gradient">
    <i class="fas fa-paper-plane me-2"></i> {{ isset($review) ? 'Update Review' : 'Post Review' }}
</button>

@push('styles')
<style>
.rating-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.rating-stars {
    font-size: 1.5rem;
    position: relative;
}

.rating-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.rating-input {
    display: none;
}

.rating-star {
    color: #6c757d;
    cursor: pointer;
    transition: color 0.2s;
}

.rating-number {
    position: absolute;
    top: -20px;
    font-size: 0.8rem;
    color: #6c757d;
    opacity: 0;
    transition: opacity 0.2s;
}

.rating-item:hover .rating-number {
    opacity: 1;
}

.rating-item:hover .rating-star,
.rating-item:hover ~ .rating-item .rating-star,
.rating-input:checked ~ .rating-item .rating-star {
    color: #ffc107;
}

.rating-input:checked + .rating-star {
    color: #ffc107;
}

.rating-value {
    font-size: 1rem;
    font-weight: 500;
}

.recommendation-input {
    display: none;
}

.recommendation-button {
    flex: 1;
    text-align: center;
    transition: all 0.2s;
}

.recommendation-button:hover {
    transform: scale(1.05);
}

.recommendation-input:checked + .recommendation-button {
    background-color: var(--bs-btn-bg);
    color: var(--bs-btn-color);
}

#recommended1:checked + .recommendation-button {
    background-color: var(--bs-success);
    border-color: var(--bs-success);
}

#recommended0:checked + .recommendation-button {
    background-color: var(--bs-danger);
    border-color: var(--bs-danger);
}
</style>
@endpush

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const ratingContainer = document.querySelector('.rating-stars');
    const currentRating = document.querySelector('.current-rating');
    const ratingInputs = document.querySelectorAll('.rating-input');
    
    ratingContainer.addEventListener('mouseover', function(e) {
        const ratingItem = e.target.closest('.rating-item');
        if (!ratingItem) return;
        
        const rating = ratingItem.dataset.rating;
        currentRating.textContent = rating;
        
        // Highlight stars up to the hovered rating
        const stars = document.querySelectorAll('.rating-star');
        stars.forEach((star, index) => {
            if (index < rating) {
                star.style.color = '#ffc107';
            } else {
                star.style.color = '#6c757d';
            }
        });
    });
    
    ratingContainer.addEventListener('mouseout', function() {
        const checkedInput = document.querySelector('.rating-input:checked');
        if (checkedInput) {
            currentRating.textContent = checkedInput.value;
            // Restore the checked state colors
            const stars = document.querySelectorAll('.rating-star');
            stars.forEach((star, index) => {
                if (index < checkedInput.value) {
                    star.style.color = '#ffc107';
                } else {
                    star.style.color = '#6c757d';
                }
            });
        } else {
            currentRating.textContent = '0';
            // Reset all stars to default color
            const stars = document.querySelectorAll('.rating-star');
            stars.forEach(star => {
                star.style.color = '#6c757d';
            });
        }
    });
    
    // Update current rating when a star is clicked
    ratingInputs.forEach(input => {
        input.addEventListener('change', function() {
            currentRating.textContent = this.value;
        });
    });
});
</script>
@endpush