@csrf
@if(isset($review))
    @method('PUT')
@endif

<div class="mb-4">
    <label for="rating" class="form-label">Rating (1-10)</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="platform_id" class="form-label">Platform</label>
    <select name="platform_id" id="platform_id" class="form-control bg-dark text-white @error('platform_id') is-invalid @enderror" required>
        <option value="">Select a platform</option>
        @foreach($platforms as $platform)
            <option value="{{ $platform->id }}" {{ isset($review) && $review->platform_id == $platform->id ? 'selected' : '' }}>
                {{ $platform->name }}
            </option>
        @endforeach
    </select>
    @error('platform_id')
        <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