@extends('admin.layout.main')

@section('admin')
<div class="flex flex-col h-full overflow-auto">
    <!-- Header -->
    <div class="flex justify-between items-center mb-6">
        <div>
            <h1 class="text-2xl font-bold text-gray-900 dark:text-white">Add New Review</h1>
            <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">Add a new customer review</p>
        </div>
        <a href="{{ route('admin.reviews.index') }}"
            class="bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 px-4 py-2 rounded hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors flex items-center">
            <i class="fas fa-arrow-left mr-2"></i>
            Back to Reviews
        </a>
    </div>

    <!-- Create Form -->
    <div class="bg-white dark:bg-dark-secondary rounded shadow-sm border border-gray-100 dark:border-gray-700 overflow-hidden">
        <form action="{{ route('admin.reviews.store') }}" method="POST">
            @csrf
            
            <div class="p-6 space-y-6">
                <!-- Review Information -->
                <div>
                    <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-4 flex items-center">
                        <i class="fas fa-star mr-2 text-[#10B981]"></i>
                        Review Information
                    </h3>
                    
                    <div class="space-y-6">
                        <!-- Select User -->
                        <div>
                            <label for="user_id" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                Reviewer *
                            </label>
                            <select name="user_id" id="user_id" required
                                class="w-full px-4 py-2.5 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-[#10B981] focus:border-transparent transition-colors">
                                <option value="">Select Reviewer</option>
                                @foreach($users as $user)
                                    <option value="{{ $user->id }}">
                                        {{ $user->name }} ({{ $user->email }})
                                    </option>
                                @endforeach
                            </select>
                            @error('user_id')
                                <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Rating -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                Rating *
                            </label>
                            <div class="flex items-center space-x-4">
                                <div class="flex space-x-1" id="ratingStars">
                                    @for($i = 1; $i <= 5; $i++)
                                        <button type="button" class="star-rating text-2xl" data-rating="{{ $i }}">
                                            <i class="far fa-star text-gray-300 hover:text-yellow-400 transition-colors"></i>
                                        </button>
                                    @endfor
                                </div>
                                <input type="hidden" name="rating" id="rating" value="5" required>
                                <span id="ratingText" class="text-lg font-medium text-gray-900 dark:text-white">5 Stars</span>
                            </div>
                            @error('rating')
                                <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Comment -->
                        <div>
                            <label for="comment" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                Comment *
                            </label>
                            <textarea name="comment" id="comment" rows="4" required
                                class="w-full px-4 py-2.5 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-[#10B981] focus:border-transparent transition-colors resize-none"
                                placeholder="Enter review comment..."></textarea>
                            <div class="flex justify-between mt-1">
                                <p class="text-xs text-gray-500 dark:text-gray-400">
                                    Maximum 1000 characters
                                </p>
                                <p class="text-xs text-gray-500 dark:text-gray-400">
                                    <span id="charCount">0</span>/1000
                                </p>
                            </div>
                            @error('comment')
                                <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>
                </div>

                <!-- Status Settings -->
                <div>
                    <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-4 flex items-center">
                        <i class="fas fa-cog mr-2 text-[#10B981]"></i>
                        Status Settings
                    </h3>
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <!-- Approval Status -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                Approval Status
                            </label>
                            <div class="space-y-2">
                                <label class="inline-flex items-center">
                                    <input type="radio" name="is_approved" value="1" checked
                                        class="text-[#10B981] focus:ring-[#10B981]">
                                    <span class="ml-2 text-gray-700 dark:text-gray-300">Approved</span>
                                </label>
                                <label class="inline-flex items-center">
                                    <input type="radio" name="is_approved" value="0"
                                        class="text-[#10B981] focus:ring-[#10B981]">
                                    <span class="ml-2 text-gray-700 dark:text-gray-300">Pending</span>
                                </label>
                            </div>
                            @error('is_approved')
                                <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Featured Status -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                Featured Status
                            </label>
                            <div class="space-y-2">
                                <label class="inline-flex items-center">
                                    <input type="radio" name="is_featured" value="1"
                                        class="text-[#10B981] focus:ring-[#10B981]">
                                    <span class="ml-2 text-gray-700 dark:text-gray-300">Featured</span>
                                </label>
                                <label class="inline-flex items-center">
                                    <input type="radio" name="is_featured" value="0" checked
                                        class="text-[#10B981] focus:ring-[#10B981]">
                                    <span class="ml-2 text-gray-700 dark:text-gray-300">Regular</span>
                                </label>
                            </div>
                            @error('is_featured')
                                <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>
                </div>
            </div>

            <!-- Form Actions -->
            <div class="px-6 py-4 bg-gray-50 dark:bg-gray-800 border-t border-gray-100 dark:border-gray-700 flex justify-end space-x-3">
                <a href="{{ route('admin.reviews.index') }}"
                    class="px-4 py-2 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
                    Cancel
                </a>
                <button type="submit"
                    class="px-4 py-2 bg-[#10B981] text-white rounded hover:bg-[#0da271] transition-colors flex items-center">
                    <i class="fas fa-save mr-2"></i>
                    Create Review
                </button>
            </div>
        </form>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Star rating functionality
        const stars = document.querySelectorAll('.star-rating');
        const ratingInput = document.getElementById('rating');
        const ratingText = document.getElementById('ratingText');
        
        stars.forEach(star => {
            star.addEventListener('click', function() {
                const rating = this.getAttribute('data-rating');
                ratingInput.value = rating;
                ratingText.textContent = `${rating} Star${rating > 1 ? 's' : ''}`;
                
                // Update star display
                stars.forEach((s, index) => {
                    const icon = s.querySelector('i');
                    if (index < rating) {
                        icon.classList.remove('far', 'text-gray-300');
                        icon.classList.add('fas', 'text-yellow-400');
                    } else {
                        icon.classList.remove('fas', 'text-yellow-400');
                        icon.classList.add('far', 'text-gray-300');
                    }
                });
            });
            
            // Hover effect
            star.addEventListener('mouseenter', function() {
                const rating = this.getAttribute('data-rating');
                stars.forEach((s, index) => {
                    const icon = s.querySelector('i');
                    if (index < rating) {
                        icon.classList.add('text-yellow-300');
                    }
                });
            });
            
            star.addEventListener('mouseleave', function() {
                const currentRating = ratingInput.value;
                stars.forEach((s, index) => {
                    const icon = s.querySelector('i');
                    icon.classList.remove('text-yellow-300');
                });
            });
        });

        // Character count for comment
        const commentTextarea = document.getElementById('comment');
        const charCount = document.getElementById('charCount');
        
        commentTextarea.addEventListener('input', function() {
            const length = this.value.length;
            charCount.textContent = length;
            
            if (length > 1000) {
                charCount.classList.add('text-red-500');
            } else {
                charCount.classList.remove('text-red-500');
            }
        });
        
        // Initialize character count
        charCount.textContent = commentTextarea.value.length;
    });
</script>
@endsection