<div>
    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-4 sm:mb-6">
        <h1 class="text-xl sm:text-2xl font-bold text-gray-800">{{ __('تكليف جديد') }}</h1>
        <a href="{{ route('assignments.list') }}" wire:navigate
           class="inline-flex items-center gap-2 px-4 py-2 text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 text-sm font-medium">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/></svg>
            {{ __('العودة للقائمة') }}
        </a>
    </div>

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

    <form wire:submit="save" class="space-y-6">
        {{-- Main Info Card --}}
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
            <h2 class="text-base sm:text-lg font-semibold text-gray-800 mb-4">{{ __('بيانات التكليف') }}</h2>

            <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">
                {{-- User Selection --}}
                <div>
                    <label for="user_id" class="block text-sm font-medium text-gray-700 mb-1">
                        {{ __('المستخدم') }} <span class="text-red-500">*</span>
                    </label>
                    <select wire:model="user_id" id="user_id"
                            class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                        <option value="">{{ __('اختر المستخدم...') }}</option>
                        @foreach($users as $user)
                        <option value="{{ $user->id }}">{{ $user->name_ar ?? $user->name }}</option>
                        @endforeach
                    </select>
                    @error('user_id')
                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                {{-- Assignable Type --}}
                <div>
                    <label for="assignable_type" class="block text-sm font-medium text-gray-700 mb-1">
                        {{ __('نوع التكليف') }} <span class="text-red-500">*</span>
                    </label>
                    <select wire:model.live="assignable_type" id="assignable_type"
                            class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                        <option value="group">{{ __('مجموعة تدريبية') }}</option>
                        <option value="session">{{ __('حصة تدريبية') }}</option>
                    </select>
                    @error('assignable_type')
                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                {{-- Assignable Selection --}}
                <div>
                    <label for="assignable_id" class="block text-sm font-medium text-gray-700 mb-1">
                        {{ $assignable_type === 'group' ? __('المجموعة') : __('الحصة') }} <span class="text-red-500">*</span>
                    </label>
                    <select wire:model="assignable_id" id="assignable_id"
                            class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                        <option value="">{{ __('اختر...') }}</option>
                        @foreach($assignableOptions as $id => $label)
                        <option value="{{ $id }}">{{ $label }}</option>
                        @endforeach
                    </select>
                    @error('assignable_id')
                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                {{-- Scope --}}
                <div>
                    <label for="scope" class="block text-sm font-medium text-gray-700 mb-1">
                        {{ __('نطاق التكليف') }} <span class="text-red-500">*</span>
                    </label>
                    <select wire:model="scope" id="scope"
                            class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                        @foreach($scopeOptions as $value => $label)
                        <option value="{{ $value }}">{{ $label }}</option>
                        @endforeach
                    </select>
                    @error('scope')
                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                {{-- Role Label --}}
                <div>
                    <label for="role_label" class="block text-sm font-medium text-gray-700 mb-1">
                        {{ __('المسمى الوظيفي') }}
                    </label>
                    <input type="text" wire:model="role_label" id="role_label"
                           placeholder="{{ __('مثال: مدرب رئيسي، مساعد مدرب...') }}"
                           class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    @error('role_label')
                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                {{-- Is Primary --}}
                <div class="min-h-[44px] flex items-center gap-3 pt-6">
                    <input type="checkbox" wire:model="is_primary" id="is_primary"
                           class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
                    <label for="is_primary" class="text-sm font-medium text-gray-700">
                        {{ __('تكليف أساسي') }}
                    </label>
                </div>
            </div>
        </div>

        {{-- Schedule Card --}}
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
            <h2 class="text-base sm:text-lg font-semibold text-gray-800 mb-4">{{ __('الجدول الزمني') }}</h2>

            <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">
                {{-- Start Date --}}
                <div>
                    <label for="start_date" class="block text-sm font-medium text-gray-700 mb-1">
                        {{ __('تاريخ البداية') }} <span class="text-red-500">*</span>
                    </label>
                    <input type="date" wire:model="start_date" id="start_date" dir="ltr"
                           class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    @error('start_date')
                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                {{-- End Date --}}
                <div>
                    <label for="end_date" class="block text-sm font-medium text-gray-700 mb-1">
                        {{ __('تاريخ النهاية') }}
                    </label>
                    <input type="date" wire:model="end_date" id="end_date" dir="ltr"
                           class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    @error('end_date')
                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                {{-- Start Time --}}
                <div>
                    <label for="start_time" class="block text-sm font-medium text-gray-700 mb-1">
                        {{ __('وقت البداية') }}
                    </label>
                    <input type="time" wire:model="start_time" id="start_time" dir="ltr"
                           class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    @error('start_time')
                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                {{-- End Time --}}
                <div>
                    <label for="end_time" class="block text-sm font-medium text-gray-700 mb-1">
                        {{ __('وقت النهاية') }}
                    </label>
                    <input type="time" wire:model="end_time" id="end_time" dir="ltr"
                           class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    @error('end_time')
                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>
            </div>

            {{-- Schedule Days --}}
            <div class="mt-4 sm:mt-6">
                <label class="block text-sm font-medium text-gray-700 mb-2">
                    {{ __('أيام التكليف') }}
                </label>
                <div class="flex flex-wrap gap-2 sm:gap-3">
                    @foreach($dayLabels as $dayNum => $dayName)
                    <label class="min-h-[44px] inline-flex items-center gap-2 px-3 py-2 border border-gray-300 rounded-lg cursor-pointer hover:bg-gray-50 has-[:checked]:bg-blue-50 has-[:checked]:border-blue-300">
                        <input type="checkbox" wire:model="schedule_days" value="{{ $dayNum }}"
                               class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
                        <span class="text-sm text-gray-700">{{ $dayName }}</span>
                    </label>
                    @endforeach
                </div>
                @error('schedule_days')
                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>
        </div>

        {{-- Notes Card --}}
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
            <h2 class="text-base sm:text-lg font-semibold text-gray-800 mb-4">{{ __('ملاحظات') }}</h2>
            <textarea wire:model="notes" rows="3"
                      placeholder="{{ __('ملاحظات إضافية...') }}"
                      class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"></textarea>
            @error('notes')
            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
            @enderror
        </div>

        {{-- Submit --}}
        <div class="flex flex-col-reverse sm:flex-row items-stretch sm:items-center justify-end gap-3">
            <a href="{{ route('assignments.list') }}" wire:navigate
               class="text-center px-4 sm:px-6 py-2.5 text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 text-sm font-medium">
                {{ __('إلغاء') }}
            </a>
            <button type="submit"
                    wire:loading.attr="disabled"
                    wire:target="save"
                    class="text-center px-4 sm:px-6 py-2.5 bg-blue-600 text-white rounded-lg hover:bg-blue-700 text-sm font-medium disabled:opacity-50">
                <span wire:loading.remove wire:target="save">{{ __('حفظ التكليف') }}</span>
                <span wire:loading wire:target="save">{{ __('جارٍ الحفظ...') }}</span>
            </button>
        </div>
    </form>
</div>
