@extends('layouts.app')

@section('content')
<div class="min-h-screen bg-slate-50 py-8">
    <div class="max-w-2xl mx-auto px-4 sm:px-6">
        <a href="{{ route('employers.ratings', $employer) }}" class="text-blue-600 hover:text-blue-700 text-sm font-semibold mb-4 inline-block">← Back to Reviews</a>

        <div class="bg-white rounded-2xl shadow-lg p-8">
            <h1 class="text-3xl font-bold text-slate-900">Rate {{ $employer->company_name }}</h1>
            <p class="mt-2 text-slate-600">Share your experience working with this employer</p>

            @if(session('error'))
                <div class="mt-4 rounded-lg bg-red-50 p-4 text-red-700 text-sm">
                    {{ session('error') }}
                </div>
            @endif

            @if($existingRating)
                <div class="mt-4 rounded-lg bg-blue-50 p-4 text-blue-700 text-sm">
                    ℹ️ You have already rated this employer. You can update your review below.
                </div>
            @endif

            <form method="POST" action="{{ route('employers.rate.store', $employer) }}" class="mt-8 space-y-6">
                @csrf

                <!-- Verification Badge -->
                @if($hasVerifiedInteraction)
                    <div class="rounded-lg bg-emerald-50 border border-emerald-200 p-4">
                        <div class="flex gap-3">
                            <svg class="h-5 w-5 text-emerald-600 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
                            </svg>
                            <div>
                                <p class="font-semibold text-emerald-900">Verified Employee</p>
                                <p class="text-sm text-emerald-700">Your review will be marked as verified since we confirmed you worked with this employer</p>
                            </div>
                        </div>
                    </div>
                @else
                    <div class="rounded-lg bg-amber-50 border border-amber-200 p-4">
                        <div class="flex gap-3">
                            <svg class="h-5 w-5 text-amber-600 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
                            </svg>
                            <div>
                                <p class="font-semibold text-amber-900">Unverified Review</p>
                                <p class="text-sm text-amber-700">We couldn't confirm your employment. Your review will be valuable but not marked as verified.</p>
                            </div>
                        </div>
                    </div>
                @endif

                <!-- Overall Score -->
                <div>
                    <label class="block text-sm font-semibold text-slate-900 mb-3">Overall Rating *</label>
                    <div class="flex gap-2">
                        @for($i = 1; $i <= 5; $i++)
                            <input type="radio" id="overall_{{ $i }}" name="overall_score" value="{{ $i }}" class="sr-only peer" required {{ (int)(old('overall_score', $existingRating->overall_score ?? 0)) === $i ? 'checked' : '' }}>
                            <label for="overall_{{ $i }}" class="cursor-pointer flex items-center justify-center w-12 h-12 rounded-lg border-2 border-slate-200 hover:border-blue-400 hover:bg-blue-50 peer-checked:border-blue-500 peer-checked:bg-blue-50 transition text-2xl">
                                ⭐
                            </label>
                        @endfor
                    </div>
                    @error('overall_score')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Detailed Ratings -->
                <div class="border-t border-slate-200 pt-6">
                    <h3 class="text-lg font-semibold text-slate-900 mb-4">Rate these aspects (1-5)</h3>

                    @php
                        $aspects = [
                            'fairness_score' => 'Fairness & Ethics',
                            'communication_score' => 'Communication',
                            'conditions_score' => 'Working Conditions',
                            'support_score' => 'Support & Development',
                        ];
                    @endphp

                    @foreach($aspects as $field => $label)
                        <div class="mb-6">
                            <label class="block text-sm font-semibold text-slate-900 mb-3">{{ $label }} *</label>
                            <div class="flex gap-2">
                                @for($i = 1; $i <= 5; $i++)
                                    <input type="radio" id="{{ $field }}_{{ $i }}" name="{{ $field }}" value="{{ $i }}" class="sr-only peer" required {{ (int)(old($field, $existingRating->{$field} ?? 0)) === $i ? 'checked' : '' }}>
                                    <label for="{{ $field }}_{{ $i }}" class="cursor-pointer flex items-center justify-center w-10 h-10 rounded-lg border-2 border-slate-200 hover:border-blue-400 hover:bg-blue-50 peer-checked:border-blue-500 peer-checked:bg-blue-50 peer-checked:text-blue-600 transition font-semibold text-slate-700">
                                        {{ $i }}
                                    </label>
                                @endfor
                            </div>
                            @error($field)
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>
                    @endforeach
                </div>

                <!-- Would Recommend -->
                <div class="border-t border-slate-200 pt-6">
                    <label class="flex items-center gap-3 cursor-pointer">
                        <input type="checkbox" name="would_recommend" value="1" class="w-5 h-5 rounded-md border-slate-300 text-blue-600" {{ old('would_recommend', $existingRating->would_recommend ?? false) ? 'checked' : '' }}>
                        <span class="text-slate-900 font-semibold">I would recommend this employer to other healthcare workers</span>
                    </label>
                </div>

                <!-- Comment -->
                <div class="border-t border-slate-200 pt-6">
                    <label for="comment" class="block text-sm font-semibold text-slate-900 mb-2">Comments (Optional)</label>
                    <textarea 
                        id="comment" 
                        name="comment" 
                        rows="4"
                        placeholder="Share specific details about your experience..."
                        class="w-full px-4 py-3 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                    >{{ old('comment', $existingRating->comment ?? '') }}</textarea>
                    <p class="mt-1 text-xs text-slate-500">Max 1000 characters</p>
                    @error('comment')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Submit -->
                <div class="flex gap-4 border-t border-slate-200 pt-6">
                    <a href="{{ route('employers.ratings', $employer) }}" class="px-6 py-3 rounded-lg border border-slate-300 text-slate-900 font-semibold hover:bg-slate-50 transition">
                        Cancel
                    </a>
                    <button type="submit" class="px-6 py-3 rounded-lg bg-blue-600 text-white font-semibold hover:bg-blue-700 transition">
                        {{ $existingRating ? 'Update Review' : 'Submit Review' }}
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection