@extends('layouts.main')

@section('title', 'Personel 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-blue-100 mx-auto">
                <img src="{{ asset('images/staff-evaluation.png') }}"
                    alt="Personel Değerlendirmesi"
                    class="w-full h-full object-cover">
            </div>
            <h1 class="text-3xl font-bold text-gray-900 mb-2">
                Personel Değerlendirmesi
            </h1>
            <p class="text-gray-600">
                Hizmet aldığınız personelimizi 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.staff-store') }}" method="POST" id="staffEvaluationForm">
                @csrf

                <!-- Staff Selection -->
                <div class="mb-8">
                    <label for="staff_name" class="block text-sm font-semibold text-gray-700 mb-2">
                        Personel Seçimi <span class="text-red-500">*</span>
                    </label>
                    <select name="staff_name" id="staff_name"
                            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('staff_name') border-red-500 @enderror"
                            required>
                        <option value="">Lütfen seçiniz...</option>
                        @foreach($staffList as $staff)
                            <option value="{{ $staff['name'] }}" {{ old('staff_name') == $staff['name'] ? 'selected' : '' }}>
                                {{ $staff['name'] }}
                            </option>
                        @endforeach
                    </select>
                    @error('staff_name')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Behavior Rating -->
                <div class="mb-8">
                    <label class="block text-sm font-semibold text-gray-700 mb-2">
                        Personelin Davranışı <span class="text-red-500">*</span>
                    </label>
                    <div x-data="{ rating: {{ old('behavior', 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="behavior" :value="rating" required>
                        <span x-text="rating > 0 ? rating + '/5' : ''" class="ml-2 text-sm font-medium text-gray-600"></span>
                    </div>
                    @error('behavior')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                    <p class="text-sm text-gray-500">Güler yüz, kibarlık, iletişim becerisi</p>
                </div>

                <!-- Service Speed Rating -->
                <div class="mb-8">
                    <label class="block text-sm font-semibold text-gray-700 mb-2">
                        Servis 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
                    <p class="text-sm text-gray-500">Siparişin doğru ve hızlı paketlenmesi</p>
                </div>

                <!-- Customer Care Rating -->
                <div class="mb-8">
                    <label class="block text-sm font-semibold text-gray-700 mb-2">
                        Müşteri İlgisi <span class="text-red-500">*</span>
                    </label>
                    <div x-data="{ rating: {{ old('customer_care', 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="customer_care" :value="rating" required>
                        <span x-text="rating > 0 ? rating + '/5' : ''" class="ml-2 text-sm font-medium text-gray-600"></span>
                    </div>
                    @error('customer_care')
                        <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">
                        Memnuniyet / Şikayet Detayı
                    </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="Deneyiminizle ilgili yorumunuz..." 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('staffEvaluationForm').addEventListener('submit', function(e) {
    const ratings = ['behavior', 'service_speed', 'customer_care'];
    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