@extends('layouts.app')

@section('title', isset($review) ? 'Edit Review' : 'Write a Review')

@section('content')
<div class="container py-4">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card bg-dark text-white">
                <div class="card-header">
                    <h4 class="mb-0">{{ isset($review) ? 'Edit Review' : 'Write a Review' }}</h4>
                </div>
                <div class="card-body">
                    <form action="{{ isset($review) ? route('reviews.update', $review) : route('games.reviews.store', $game) }}" method="POST">
                        @csrf
                        @if(isset($review))
                            @method('PUT')
                        @endif

                        <div class="mb-4">
                            <label for="rating" class="form-label">Rating</label>
                            <select name="rating" id="rating" class="star-rating" required>
                                <option value="">Select a rating</option>
                                <option value="10" {{ isset($review) && $review->rating == 10 ? 'selected' : '' }}>10 - Masterpiece</option>
                                <option value="9" {{ isset($review) && $review->rating == 9 ? 'selected' : '' }}>9 - Amazing</option>
                                <option value="8" {{ isset($review) && $review->rating == 8 ? 'selected' : '' }}>8 - Great</option>
                                <option value="7" {{ isset($review) && $review->rating == 7 ? 'selected' : '' }}>7 - Good</option>
                                <option value="6" {{ isset($review) && $review->rating == 6 ? 'selected' : '' }}>6 - Fair</option>
                                <option value="5" {{ isset($review) && $review->rating == 5 ? 'selected' : '' }}>5 - Average</option>
                                <option value="4" {{ isset($review) && $review->rating == 4 ? 'selected' : '' }}>4 - Below Average</option>
                                <option value="3" {{ isset($review) && $review->rating == 3 ? 'selected' : '' }}>3 - Poor</option>
                                <option value="2" {{ isset($review) && $review->rating == 2 ? 'selected' : '' }}>2 - Bad</option>
                                <option value="1" {{ isset($review) && $review->rating == 1 ? 'selected' : '' }}>1 - Terrible</option>
                            </select>
                            @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>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

@push('styles')
<link href="{{ asset('css/star-rating.css') }}" rel="stylesheet">
<style>
.star-rating {
    --gl-star-color: #fdd835;
    --gl-star-color-inactive: #dcdce6;
    --gl-star-size: 32px;
    --gl-tooltip-border-radius: 4px;
    --gl-tooltip-font-size: 1rem;
    --gl-tooltip-font-weight: 400;
    --gl-tooltip-line-height: 1;
    --gl-tooltip-margin: 12px;
    --gl-tooltip-padding: .5em 1em;
    --gl-tooltip-background: rgba(17,17,17, .9);
    --gl-tooltip-color: #fff;
}
</style>
@endpush

@push('scripts')
<script src="{{ asset('js/star-rating.js') }}"></script>
<script>
    var stars = new StarRating('.star-rating', {
        classNames: {
            active: "gl-active",
            base: "gl-star-rating",
            selected: "gl-selected",
        },
        clearable: true,
        maxStars: 10,
        tooltip: 'Select a Rating'
    });
</script>
@endpush
@endsection