@extends('layouts.app')

@section('title', 'إضافة مكافأة أو بدل')

@section('content')
<div class="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100 py-8 px-4 md:px-8">
    <div class="max-w-4xl mx-auto">
        <div class="mb-8 flex items-center justify-between">
            <div>
                <h1 class="text-3xl font-bold text-black mb-2">إضافة مكافأة أو بدل</h1>
                <p class="text-black">تسجيل مكافأة أداء أو بدل إضافي للموظف</p>
            </div>
            <a href="{{ route('allowances.index') }}" class="inline-flex items-center px-4 py-2 bg-white border border-gray-300 rounded-lg text-black font-medium hover:bg-gray-50 transition-all duration-200 shadow-sm">
                <i class="fas fa-arrow-right ml-2"></i>
                <span>العودة للقائمة</span>
            </a>
        </div>

        @if($errors->any())
        <div class="bg-red-50 border-l-4 border-red-500 p-4 mb-6 rounded-r-lg shadow-sm">
            <div class="flex">
                <div class="flex-shrink-0">
                    <i class="fas fa-exclamation-circle text-red-500 text-xl"></i>
                </div>
                <div class="mr-3">
                    <h3 class="text-red-800 font-bold mb-1">يوجد بعض الأخطاء في البيانات:</h3>
                    <ul class="list-disc list-inside text-red-700 text-sm">
                        @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            </div>
        </div>
        @endif

        <div class="bg-white rounded-2xl shadow-xl overflow-hidden border border-gray-100">
            <form action="{{ route('allowances.store') }}" method="POST" class="p-8">
                @csrf

                <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
                    <div class="col-span-1 md:col-span-2">
                        <label for="employee_id" class="block text-sm font-semibold text-black mb-2">الموظف <span class="text-red-500">*</span></label>
                        <select name="employee_id" id="employee_id" required
                            class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200">
                            <option value="">اختر الموظف...</option>
                            @foreach($employees as $employee)
                            <option value="{{ $employee->id }}" {{ old('employee_id') == $employee->id ? 'selected' : '' }}>
                                {{ $employee->user->name }} ({{ $employee->employee_number }}) - {{ $employee->job_title }}
                            </option>
                            @endforeach
                        </select>
                    </div>

                    <div class="col-span-1">
                        <label for="amount" class="block text-sm font-semibold text-black mb-2">المبلغ (ر.س) <span class="text-red-500">*</span></label>
                        <input type="number" step="0.01" name="amount" id="amount" value="{{ old('amount') }}" required
                            class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200"
                            placeholder="0.00">
                    </div>

                    <div class="col-span-1">
                        <label for="bonus_date" class="block text-sm font-semibold text-black mb-2">التاريخ <span class="text-red-500">*</span></label>
                        <input type="date" name="bonus_date" id="bonus_date" value="{{ old('bonus_date', date('Y-m-d')) }}" required
                            class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200">
                    </div>

                    <div class="col-span-1 md:col-span-2">
                        <label for="bonus_type" class="block text-sm font-semibold text-black mb-2">نوع المكافأة/البدل <span class="text-red-500">*</span></label>
                        <select name="bonus_type" id="bonus_type" required
                            class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200">
                            <option value="performance" {{ old('bonus_type') == 'performance' ? 'selected' : '' }}>مكافأة أداء</option>
                            <option value="annual" {{ old('bonus_type') == 'annual' ? 'selected' : '' }}>مكافأة سنوية</option>
                            <option value="project" {{ old('bonus_type') == 'project' ? 'selected' : '' }}>مكافأة مشروع</option>
                            <option value="overtime" {{ old('bonus_type') == 'overtime' ? 'selected' : '' }}>مكافأة ساعات إضافية</option>
                            <option value="other" {{ old('bonus_type', 'other') == 'other' ? 'selected' : '' }}>مكافأة أخرى</option>
                        </select>
                    </div>

                    <div class="col-span-1 md:col-span-2">
                        <label for="description" class="block text-sm font-semibold text-black mb-2">السبب / الوصف</label>
                        <textarea name="description" id="description" rows="3"
                            class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200"
                            placeholder="اشرح سبب منح المكافأة أو تفاصيل البدل">{{ old('description') }}</textarea>
                    </div>
                </div>

                <div class="flex items-center justify-end pt-6 border-t border-gray-100 gap-4">
                    <button type="reset" class="px-6 py-3 border border-gray-300 rounded-xl text-black font-semibold hover:bg-gray-50 transition-all duration-200">
                        إعادة تعيين
                    </button>
                    <button type="submit" class="px-10 py-3 bg-gradient-to-r from-blue-600 to-blue-700 text-white font-bold rounded-xl hover:from-blue-700 hover:to-blue-800 transition-all duration-200 shadow-lg hover:shadow-xl transform hover:scale-[1.02]">
                        <i class="fas fa-save ml-2"></i>
                        حفظ البيانات
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection