@php
    $locale = app()->getLocale();
    $isRtl = $locale === 'ar';
    $currency = \App\Models\Setting::currencyLabel($locale);

    $photoUrl = $trainer->photo ? asset('storage/' . $trainer->photo) : ('https://ui-avatars.com/api/?name=' . urlencode($trainer->full_name) . '&background=random&size=96');
@endphp

@extends('layouts.app')

@section('title', $isRtl ? 'تعديل مدرب' : 'Edit Trainer')

@section('content')
<div class="max-w-4xl mx-auto space-y-8">
    <!-- Header -->
    <div class="flex items-center gap-3">
        <a href="{{ route('trainers.show', $trainer) }}" class="p-2 hover:bg-slate-100 rounded-xl transition-colors">
            <i data-lucide="arrow-{{ $isRtl ? 'right' : 'left' }}" class="w-5 h-5 text-slate-600"></i>
        </a>
        <div class="flex items-center gap-4">
            <img src="{{ $photoUrl }}" class="w-12 h-12 rounded-2xl object-cover" alt="">
            <div>
                <h1 class="text-3xl font-black text-slate-800">{{ $isRtl ? 'تعديل مدرب' : 'Edit Trainer' }}</h1>
                <p class="text-slate-500 mt-1">{{ $trainer->full_name }} • <span class="font-mono">{{ $trainer->employee_id }}</span></p>
            </div>
        </div>
    </div>

    <form action="{{ route('trainers.update', $trainer) }}" method="POST" enctype="multipart/form-data" class="space-y-8">
        @csrf
        @method('PUT')

        @if($errors->any())
            <div class="bg-rose-50 border-2 border-rose-200 rounded-3xl p-6 text-rose-700">
                <div class="flex items-center gap-3 mb-3">
                    <div class="w-10 h-10 bg-rose-500 rounded-xl flex items-center justify-center">
                        <i data-lucide="alert-circle" class="w-5 h-5 text-white"></i>
                    </div>
                    <p class="font-bold">{{ $isRtl ? 'يرجى تصحيح الأخطاء التالية:' : 'Please fix the following errors:' }}</p>
                </div>
                <ul class="list-disc {{ $isRtl ? 'pr-6' : 'pl-6' }} space-y-1 text-sm">
                    @foreach($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <div class="bg-white rounded-3xl border-2 border-slate-200 p-8 space-y-8">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label class="block text-sm font-bold text-slate-700 mb-2">{{ $isRtl ? 'الاسم الأول' : 'First Name' }} *</label>
                    <input type="text" name="first_name" value="{{ old('first_name', $trainer->first_name) }}" required
                           class="w-full px-4 py-3 bg-slate-50 border-2 border-slate-200 rounded-xl focus:border-emerald-500 focus:ring-4 focus:ring-emerald-500/10 outline-none transition-all">
                </div>
                <div>
                    <label class="block text-sm font-bold text-slate-700 mb-2">{{ $isRtl ? 'اسم العائلة' : 'Last Name' }} *</label>
                    <input type="text" name="last_name" value="{{ old('last_name', $trainer->last_name) }}" required
                           class="w-full px-4 py-3 bg-slate-50 border-2 border-slate-200 rounded-xl focus:border-emerald-500 focus:ring-4 focus:ring-emerald-500/10 outline-none transition-all">
                </div>
                <div>
                    <label class="block text-sm font-bold text-slate-700 mb-2">{{ $isRtl ? 'البريد الإلكتروني' : 'Email' }} *</label>
                    <input type="email" name="email" value="{{ old('email', $trainer->email) }}" required
                           class="w-full px-4 py-3 bg-slate-50 border-2 border-slate-200 rounded-xl focus:border-emerald-500 focus:ring-4 focus:ring-emerald-500/10 outline-none transition-all">
                </div>
                <div>
                    <label class="block text-sm font-bold text-slate-700 mb-2">{{ $isRtl ? 'رقم الهاتف' : 'Phone' }} *</label>
                    <input type="text" name="phone" value="{{ old('phone', $trainer->phone) }}" required
                           class="w-full px-4 py-3 bg-slate-50 border-2 border-slate-200 rounded-xl focus:border-emerald-500 focus:ring-4 focus:ring-emerald-500/10 outline-none transition-all">
                </div>
                <div>
                    <label class="block text-sm font-bold text-slate-700 mb-2">{{ $isRtl ? 'الجنس' : 'Gender' }} *</label>
                    <select name="gender" required
                            class="w-full px-4 py-3 bg-slate-50 border-2 border-slate-200 rounded-xl focus:border-emerald-500 focus:ring-4 focus:ring-emerald-500/10 outline-none transition-all">
                        <option value="male" {{ old('gender', $trainer->gender) === 'male' ? 'selected' : '' }}>{{ $isRtl ? 'ذكر' : 'Male' }}</option>
                        <option value="female" {{ old('gender', $trainer->gender) === 'female' ? 'selected' : '' }}>{{ $isRtl ? 'أنثى' : 'Female' }}</option>
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-bold text-slate-700 mb-2">{{ $isRtl ? 'الحالة' : 'Status' }} *</label>
                    <select name="status" required
                            class="w-full px-4 py-3 bg-slate-50 border-2 border-slate-200 rounded-xl focus:border-emerald-500 focus:ring-4 focus:ring-emerald-500/10 outline-none transition-all">
                        <option value="active" {{ old('status', $trainer->status) === 'active' ? 'selected' : '' }}>{{ $isRtl ? 'نشط' : 'Active' }}</option>
                        <option value="inactive" {{ old('status', $trainer->status) === 'inactive' ? 'selected' : '' }}>{{ $isRtl ? 'غير نشط' : 'Inactive' }}</option>
                        <option value="on_leave" {{ old('status', $trainer->status) === 'on_leave' ? 'selected' : '' }}>{{ $isRtl ? 'إجازة' : 'On Leave' }}</option>
                    </select>
                </div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label class="block text-sm font-bold text-slate-700 mb-2">{{ $isRtl ? 'التخصص' : 'Specialization' }} *</label>
                    <input type="text" name="specialization" value="{{ old('specialization', $trainer->specialization) }}" required
                           class="w-full px-4 py-3 bg-slate-50 border-2 border-slate-200 rounded-xl focus:border-emerald-500 focus:ring-4 focus:ring-emerald-500/10 outline-none transition-all">
                </div>
                <div>
                    <label class="block text-sm font-bold text-slate-700 mb-2">{{ $isRtl ? 'سنوات الخبرة' : 'Experience (years)' }} *</label>
                    <input type="number" name="experience_years" value="{{ old('experience_years', $trainer->experience_years) }}" min="0" required
                           class="w-full px-4 py-3 bg-slate-50 border-2 border-slate-200 rounded-xl focus:border-emerald-500 focus:ring-4 focus:ring-emerald-500/10 outline-none transition-all">
                </div>
                <div>
                    <label class="block text-sm font-bold text-slate-700 mb-2">{{ $isRtl ? 'تاريخ التعيين' : 'Hire Date' }} *</label>
                    <input type="date" name="hire_date" value="{{ old('hire_date', optional($trainer->hire_date)->format('Y-m-d')) }}" required
                           class="w-full px-4 py-3 bg-slate-50 border-2 border-slate-200 rounded-xl focus:border-emerald-500 focus:ring-4 focus:ring-emerald-500/10 outline-none transition-all">
                </div>
                <div>
                    <label class="block text-sm font-bold text-slate-700 mb-2">{{ $isRtl ? 'تاريخ الميلاد' : 'Birth Date' }}</label>
                    <input type="date" name="birth_date" value="{{ old('birth_date', optional($trainer->birth_date)->format('Y-m-d')) }}"
                           class="w-full px-4 py-3 bg-slate-50 border-2 border-slate-200 rounded-xl focus:border-emerald-500 focus:ring-4 focus:ring-emerald-500/10 outline-none transition-all">
                </div>
                <div class="md:col-span-2">
                    <label class="block text-sm font-bold text-slate-700 mb-2">{{ $isRtl ? 'تغيير الصورة' : 'Change Photo' }}</label>
                    <input type="file" name="photo" accept="image/*"
                           class="w-full px-4 py-3 bg-slate-50 border-2 border-slate-200 border-dashed rounded-xl focus:border-emerald-500 outline-none transition-all file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-emerald-50 file:text-emerald-700 hover:file:bg-emerald-100">
                </div>
            </div>

            <h2 class="text-lg font-bold text-slate-800">{{ $isRtl ? 'الراتب والعمولة' : 'Salary & Commission' }}</h2>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                <div class="md:col-span-2">
                    <label class="block text-sm font-bold text-slate-700 mb-2">{{ $isRtl ? 'الراتب' : 'Salary' }} *</label>
                    <div class="relative">
                        <input type="number" name="salary" value="{{ old('salary', $trainer->salary) }}" min="0" step="0.01" required
                               class="w-full {{ $isRtl ? 'pl-16' : 'pr-16' }} px-4 py-3 bg-slate-50 border-2 border-slate-200 rounded-xl focus:border-emerald-500 focus:ring-4 focus:ring-emerald-500/10 outline-none transition-all">
                        <span class="absolute {{ $isRtl ? 'left-4' : 'right-4' }} top-1/2 -translate-y-1/2 text-sm font-bold text-slate-500">{{ $currency }}</span>
                    </div>
                </div>
                <div>
                    <label class="block text-sm font-bold text-slate-700 mb-2">{{ $isRtl ? 'نسبة العمولة' : 'Commission %' }}</label>
                    <input type="number" name="commission_rate" value="{{ old('commission_rate', $trainer->commission_rate) }}" min="0" max="100" step="0.01"
                           class="w-full px-4 py-3 bg-slate-50 border-2 border-slate-200 rounded-xl focus:border-emerald-500 focus:ring-4 focus:ring-emerald-500/10 outline-none transition-all">
                </div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label class="block text-sm font-bold text-slate-700 mb-2">{{ $isRtl ? 'الشهادات' : 'Certifications' }}</label>
                    <textarea name="certifications" rows="3"
                              class="w-full px-4 py-3 bg-slate-50 border-2 border-slate-200 rounded-xl focus:border-emerald-500 focus:ring-4 focus:ring-emerald-500/10 outline-none transition-all resize-none">{{ old('certifications', $trainer->certifications) }}</textarea>
                </div>
                <div>
                    <label class="block text-sm font-bold text-slate-700 mb-2">{{ $isRtl ? 'نبذة' : 'Bio' }}</label>
                    <textarea name="bio" rows="3"
                              class="w-full px-4 py-3 bg-slate-50 border-2 border-slate-200 rounded-xl focus:border-emerald-500 focus:ring-4 focus:ring-emerald-500/10 outline-none transition-all resize-none">{{ old('bio', $trainer->bio) }}</textarea>
                </div>
            </div>
        </div>

        <!-- Submit -->
        <div class="flex flex-wrap items-center justify-end gap-3">
            <a href="{{ route('trainers.show', $trainer) }}" class="px-6 py-3 bg-slate-100 hover:bg-slate-200 text-slate-700 rounded-xl font-semibold transition-colors">
                {{ $isRtl ? 'إلغاء' : 'Cancel' }}
            </a>
            <button type="submit" class="px-7 py-3 bg-gradient-to-r from-emerald-500 to-emerald-600 hover:from-emerald-600 hover:to-emerald-700 text-white rounded-xl transition-all flex items-center gap-2 font-bold shadow-lg shadow-emerald-500/30 hover:shadow-emerald-500/50">
                <i data-lucide="save" class="w-5 h-5"></i>
                {{ $isRtl ? 'حفظ التعديلات' : 'Save Changes' }}
            </button>
        </div>
    </form>
</div>
@endsection