<div>
    <!-- Header -->
    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-4 sm:mb-6">
        <div>
            <h1 class="text-xl sm:text-2xl font-bold text-gray-900">{{ $evaluation ? __('تعديل التقييم') : __('تقييم جديد') }}</h1>
            <p class="mt-1 text-sm text-gray-500">{{ __('تقييم أداء المشترك في المجموعة التدريبية') }}</p>
        </div>
    </div>

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

    <div class="space-y-6">
        <!-- Basic Info -->
        <div class="bg-white border border-gray-200 rounded-lg p-4 sm:p-6">
            <h2 class="text-base sm:text-lg font-semibold text-gray-900 mb-4">{{ __('المعلومات الأساسية') }}</h2>
            <div class="grid grid-cols-1 gap-3 sm:gap-4 sm:grid-cols-2 lg:grid-cols-3">
                <!-- Participant -->
                <div>
                    <label for="participant_id" class="block text-sm font-medium text-gray-700 mb-1">{{ __('المشترك') }} *</label>
                    <select
                        id="participant_id"
                        wire:model="participant_id"
                        class="w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm py-2.5 @error('participant_id') border-red-500 @enderror">
                        <option value="">{{ __('اختر المشترك') }}</option>
                        @foreach($participants as $participant)
                            <option value="{{ $participant->id }}">{{ $participant->person?->name_ar ?? $participant->person?->name }}</option>
                        @endforeach
                    </select>
                    @error('participant_id') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                </div>

                <!-- Group -->
                <div>
                    <label for="training_group_id" class="block text-sm font-medium text-gray-700 mb-1">{{ __('المجموعة') }} *</label>
                    <select
                        id="training_group_id"
                        wire:model="training_group_id"
                        class="w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm py-2.5 @error('training_group_id') border-red-500 @enderror">
                        <option value="">{{ __('اختر المجموعة') }}</option>
                        @foreach($groups as $group)
                            <option value="{{ $group->id }}">{{ $group->name_ar }}</option>
                        @endforeach
                    </select>
                    @error('training_group_id') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                </div>

                <!-- Evaluation Date -->
                <div>
                    <label for="evaluation_date" class="block text-sm font-medium text-gray-700 mb-1">{{ __('تاريخ التقييم') }} *</label>
                    <input
                        type="date"
                        id="evaluation_date"
                        wire:model="evaluation_date"
                        dir="ltr"
                        class="w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm py-2.5 @error('evaluation_date') border-red-500 @enderror">
                    @error('evaluation_date') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                </div>

                <!-- Period From -->
                <div>
                    <label for="period_from" class="block text-sm font-medium text-gray-700 mb-1">{{ __('فترة التقييم من') }}</label>
                    <input
                        type="date"
                        id="period_from"
                        wire:model="period_from"
                        dir="ltr"
                        class="w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm py-2.5">
                </div>

                <!-- Period To -->
                <div>
                    <label for="period_to" class="block text-sm font-medium text-gray-700 mb-1">{{ __('فترة التقييم إلى') }}</label>
                    <input
                        type="date"
                        id="period_to"
                        wire:model="period_to"
                        dir="ltr"
                        class="w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm py-2.5 @error('period_to') border-red-500 @enderror">
                    @error('period_to') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                </div>
            </div>
        </div>

        <!-- Criteria Scores -->
        <div class="bg-white border border-gray-200 rounded-lg p-4 sm:p-6">
            <h2 class="text-base sm:text-lg font-semibold text-gray-900 mb-4">{{ __('الدرجات') }}</h2>

            @if($criteria->isEmpty())
                <div class="p-6 text-center text-sm text-gray-500">
                    {{ __('لا توجد معايير تقييم نشطة') }}
                </div>
            @else
                <div class="space-y-4">
                    @php $currentCategory = ''; @endphp
                    @foreach($criteria as $criterion)
                        @if($criterion->category && $criterion->category !== $currentCategory)
                            @php $currentCategory = $criterion->category; @endphp
                            <div class="pt-4 first:pt-0">
                                <h3 class="text-sm font-semibold text-gray-600 mb-3 border-b border-gray-100 pb-2">{{ $currentCategory }}</h3>
                            </div>
                        @endif

                        <div class="flex flex-col sm:flex-row sm:items-start gap-3 p-3 bg-gray-50 rounded-lg">
                            <div class="flex-1 min-w-0">
                                <label class="block text-sm font-medium text-gray-900">
                                    {{ $criterion->name_ar }}
                                </label>
                                @if($criterion->description_ar)
                                    <p class="text-xs text-gray-500 mt-0.5">{{ $criterion->description_ar }}</p>
                                @endif
                            </div>

                            <div class="flex items-center gap-3 sm:shrink-0">
                                <div class="w-24">
                                    <input
                                        type="number"
                                        wire:model="scores.{{ $criterion->id }}.score"
                                        min="0"
                                        max="{{ $criterion->max_score }}"
                                        step="0.5"
                                        dir="ltr"
                                        placeholder="0"
                                        class="w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm py-2.5 text-center">
                                </div>
                                <span class="text-xs text-gray-500 whitespace-nowrap" dir="ltr">/ {{ $criterion->max_score }}</span>
                            </div>

                            <div class="flex-1 min-w-0 sm:max-w-xs">
                                <input
                                    type="text"
                                    wire:model="scores.{{ $criterion->id }}.notes"
                                    placeholder="{{ __('ملاحظات...') }}"
                                    class="w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-xs">
                            </div>
                        </div>
                    @endforeach
                </div>
            @endif
        </div>

        <!-- Overall Notes -->
        <div class="bg-white border border-gray-200 rounded-lg p-4 sm:p-6">
            <h2 class="text-base sm:text-lg font-semibold text-gray-900 mb-4">{{ __('ملاحظات عامة') }}</h2>
            <textarea
                wire:model="overall_notes"
                rows="4"
                placeholder="{{ __('ملاحظات عامة حول أداء المشترك...') }}"
                class="w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm"></textarea>
            @error('overall_notes') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
        </div>

        <!-- Actions -->
        <div class="flex flex-col-reverse sm:flex-row items-stretch sm:items-center justify-end gap-3">
            <a href="{{ route('evaluations.list') }}"
               class="text-center px-4 sm:px-6 py-2.5 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">
                {{ __('إلغاء') }}
            </a>

            <button
                type="button"
                wire:click="saveDraft"
                wire:loading.attr="disabled"
                wire:target="saveDraft"
                class="text-center px-4 sm:px-6 py-2.5 bg-gray-600 text-white text-sm font-medium rounded-lg hover:bg-gray-700 disabled:bg-gray-400 transition-colors">
                <span wire:loading.remove wire:target="saveDraft">{{ __('حفظ كمسودة') }}</span>
                <span wire:loading wire:target="saveDraft">{{ __('جارٍ الحفظ...') }}</span>
            </button>

            <button
                type="button"
                wire:click="submit"
                wire:loading.attr="disabled"
                wire:target="submit"
                class="text-center px-4 sm:px-6 py-2.5 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700 disabled:bg-blue-400 transition-colors">
                <span wire:loading.remove wire:target="submit">{{ __('تقديم') }}</span>
                <span wire:loading wire:target="submit">{{ __('جارٍ التقديم...') }}</span>
            </button>
        </div>
    </div>
</div>
