@extends('layouts.main')

@section('title', 'İşletme Değerlendirmesi')

@section('content')
<div class="min-h-screen bg-gradient-to-b from-gray-50 to-white pt-32 sm:pt-40 pb-12 px-3 sm:px-6 lg:px-8">
    <div class="max-w-2xl mx-auto">
        <!-- Header -->
        <div class="text-center mb-8">
            <div class="w-20 h-20 rounded-full overflow-hidden shadow-lg mb-4 ring-4 ring-green-100 mx-auto">
                <img src="{{ asset('images/business-evaluation.png') }}"
                     alt="İşletme Değerlendirmesi"
                     class="w-full h-full object-cover">
            </div>
            <h1 class="text-3xl font-bold text-gray-900 mb-2">
                İşletme Değerlendirmesi
            </h1>
            <p class="text-gray-600">
                Genel işletme deneyiminizi değerlendirin
            </p>
        </div>

        <!-- Error Message -->
        @if(session('error'))
            <div class="mb-8">
                <div class="bg-red-50 border-l-4 border-red-400 p-4 rounded-lg shadow-sm">
                    <div class="flex">
                        <div class="flex-shrink-0">
                            <svg class="h-5 w-5 text-red-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
                            </svg>
                        </div>
                        <div class="ml-3">
                            <p class="text-sm text-red-700 font-medium">
                                {{ session('error') }}
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        @endif

        <!-- Form -->
        <div class="bg-white rounded-xl sm:rounded-2xl shadow-lg p-6 sm:p-8">
            <form action="{{ route('evaluation.business-store') }}" method="POST" id="businessEvaluationForm">
                @csrf

                <!-- General Satisfaction Rating -->
                <div class="mb-8">
                    <label class="block text-sm font-semibold text-gray-700 mb-2">
                        Genel Memnuniyet <span class="text-red-500">*</span>
                    </label>
                    <div x-data="{ rating: {{ old('general_satisfaction', 0) }}, hover: 0 }" class="flex items-center gap-2 mb-2">
                        <template x-for="star in 5" :key="star">
                            <button type="button"
                                    @click="rating = star"
                                    @mouseenter="hover = star"
                                    @mouseleave="hover = 0"
                                    class="text-3xl transition-all duration-200 transform hover:scale-110">
                                <i :class="(hover || rating) >= star ? 'fas fa-star text-yellow-400' : 'far fa-star text-gray-300'"></i>
                            </button>
                        </template>
                        <input type="hidden" name="general_satisfaction" :value="rating" required>
                        <span x-text="rating > 0 ? rating + '/5' : ''" class="ml-2 text-sm font-medium text-gray-600"></span>
                    </div>
                    @error('general_satisfaction')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Product Quality Rating -->
                <div class="mb-8">
                    <label class="block text-sm font-semibold text-gray-700 mb-2">
                        Ürün Kalitesi <span class="text-red-500">*</span>
                    </label>
                    <div x-data="{ rating: {{ old('product_quality', 0) }}, hover: 0 }" class="flex items-center gap-2 mb-2">
                        <template x-for="star in 5" :key="star">
                            <button type="button"
                                    @click="rating = star"
                                    @mouseenter="hover = star"
                                    @mouseleave="hover = 0"
                                    class="text-3xl transition-all duration-200 transform hover:scale-110">
                                <i :class="(hover || rating) >= star ? 'fas fa-star text-yellow-400' : 'far fa-star text-gray-300'"></i>
                            </button>
                        </template>
                        <input type="hidden" name="product_quality" :value="rating" required>
                        <span x-text="rating > 0 ? rating + '/5' : ''" class="ml-2 text-sm font-medium text-gray-600"></span>
                    </div>
                    @error('product_quality')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Cleanliness Rating -->
                <div class="mb-8">
                    <label class="block text-sm font-semibold text-gray-700 mb-2">
                        Temizlik ve Hijyen <span class="text-red-500">*</span>
                    </label>
                    <div x-data="{ rating: {{ old('cleanliness', 0) }}, hover: 0 }" class="flex items-center gap-2 mb-2">
                        <template x-for="star in 5" :key="star">
                            <button type="button"
                                    @click="rating = star"
                                    @mouseenter="hover = star"
                                    @mouseleave="hover = 0"
                                    class="text-3xl transition-all duration-200 transform hover:scale-110">
                                <i :class="(hover || rating) >= star ? 'fas fa-star text-yellow-400' : 'far fa-star text-gray-300'"></i>
                            </button>
                        </template>
                        <input type="hidden" name="cleanliness" :value="rating" required>
                        <span x-text="rating > 0 ? rating + '/5' : ''" class="ml-2 text-sm font-medium text-gray-600"></span>
                    </div>
                    @error('cleanliness')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Service Speed Rating -->
                <div class="mb-8">
                    <label class="block text-sm font-semibold text-gray-700 mb-2">
                        Hizmet Hızı <span class="text-red-500">*</span>
                    </label>
                    <div x-data="{ rating: {{ old('service_speed', 0) }}, hover: 0 }" class="flex items-center gap-2 mb-2">
                        <template x-for="star in 5" :key="star">
                            <button type="button"
                                    @click="rating = star"
                                    @mouseenter="hover = star"
                                    @mouseleave="hover = 0"
                                    class="text-3xl transition-all duration-200 transform hover:scale-110">
                                <i :class="(hover || rating) >= star ? 'fas fa-star text-yellow-400' : 'far fa-star text-gray-300'"></i>
                            </button>
                        </template>
                        <input type="hidden" name="service_speed" :value="rating" required>
                        <span x-text="rating > 0 ? rating + '/5' : ''" class="ml-2 text-sm font-medium text-gray-600"></span>
                    </div>
                    @error('service_speed')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Price Performance Rating -->
                <div class="mb-8">
                    <label class="block text-sm font-semibold text-gray-700 mb-2">
                        Fiyat/Performans <span class="text-red-500">*</span>
                    </label>
                    <div x-data="{ rating: {{ old('price_performance', 0) }}, hover: 0 }" class="flex items-center gap-2 mb-2">
                        <template x-for="star in 5" :key="star">
                            <button type="button"
                                    @click="rating = star"
                                    @mouseenter="hover = star"
                                    @mouseleave="hover = 0"
                                    class="text-3xl transition-all duration-200 transform hover:scale-110">
                                <i :class="(hover || rating) >= star ? 'fas fa-star text-yellow-400' : 'far fa-star text-gray-300'"></i>
                            </button>
                        </template>
                        <input type="hidden" name="price_performance" :value="rating" required>
                        <span x-text="rating > 0 ? rating + '/5' : ''" class="ml-2 text-sm font-medium text-gray-600"></span>
                    </div>
                    @error('price_performance')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Comment -->
                <div class="mb-8">
                    <label for="comment" class="block text-sm font-semibold text-gray-700 mb-2">
                        Şikayet / Öneri / Yorum
                    </label>
                    <textarea name="comment" id="comment" rows="4"
                              class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#105B2E] focus:border-transparent transition-all duration-200 @error('comment') border-red-500 @enderror"
                              placeholder="Görüşlerinizi bizimle paylaşın..." maxlength="1000">{{ old('comment') }}</textarea>
                    @error('comment')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                    <p class="mt-1 text-sm text-gray-500" id="charCount">0 / 1000 karakter</p>
                </div>

                <!-- Action Buttons -->
                <div class="flex gap-4 justify-end">
                    <a href="{{ route('evaluation.index') }}"
                       class="px-6 py-3 bg-gray-200 text-gray-700 rounded-lg font-medium hover:bg-gray-300 transition-colors duration-200">
                        İptal
                    </a>
                    <button type="submit"
                            class="px-6 py-3 bg-[#105B2E] text-white rounded-lg font-medium hover:bg-[#0d4a25] transition-colors duration-200 flex items-center gap-2">
                        <i class="fas fa-paper-plane"></i>
                        Gönder
                    </button>
                </div>
            </form>
        </div>

        <!-- Info Box -->
        <div class="mt-6 bg-blue-50 border-l-4 border-blue-400 p-4 rounded-lg">
            <div class="flex">
                <div class="flex-shrink-0">
                    <i class="fas fa-info-circle text-blue-400"></i>
                </div>
                <div class="ml-3">
                    <p class="text-sm text-blue-700">
                        Değerlendirmeniz tamamen anonim olup, sadece hizmet kalitemizi artırmak için kullanılacaktır.
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
// Character counter
const textarea = document.getElementById('comment');
const charCount = document.getElementById('charCount');

if (textarea && charCount) {
    textarea.addEventListener('input', function() {
        const length = this.value.length;
        charCount.textContent = length + ' / 1000 karakter';

        if (length > 900) {
            charCount.classList.add('text-red-600');
        } else {
            charCount.classList.remove('text-red-600');
        }
    });

    // Initialize counter
    charCount.textContent = textarea.value.length + ' / 1000 karakter';
}

// Form validation
document.getElementById('businessEvaluationForm').addEventListener('submit', function(e) {
    const ratings = ['general_satisfaction', 'product_quality', 'cleanliness', 'service_speed', 'price_performance'];
    const submitButton = this.querySelector('button[type="submit"]');
    let isValid = true;

    ratings.forEach(function(rating) {
        const input = document.querySelector(`input[name="${rating}"]`);
        if (!input || !input.value || input.value == '0') {
            isValid = false;
        }
    });

    if (!isValid) {
        e.preventDefault();
        Swal.fire({
            icon: 'warning',
            title: 'Eksik Bilgi',
            text: 'Lütfen tüm yıldız değerlendirmelerini yapınız.',
            confirmButtonColor: '#105B2E'
        });
    } else {
        // Add loading state to submit button
        submitButton.disabled = true;
        submitButton.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>Gönderiliyor...';
    }
});
</script>
@endpush
@endsection