@extends('layouts.app')

@section('title', 'إنشاء كشف راتب جديد')

@section('content')
<div class="container m-auto p-4 sm:p-6 lg:p-8 py-8">
    <div class="flex justify-between items-center mb-6">
        <h1 class="text-2l font-bold text-black">إنشاء كشف راتب جديد</h1>
        
        <a href="{{ route('payrolls.index') }}" class="bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 p-4 rounded">
            <i class="fas fa-arrow-right ml-1"></i> العودة إلى القائمة
        </a>
    </div>

    @if($errors->any())
    <div class="bg-red-100 border border-red-400 text-red-700 p-4 py-3 rounded relative mb-4" role="alert">
        <ul class="list-disc list-inside">
            @foreach($errors->all() as $error)
            <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
    @endif

    <div class="bg-white shadow-md rounded-lg overflow-hidden p-6">
        <form action="{{ route('payrolls.store') }}" method="POST">
            @csrf
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                <div>
                    <label for="month" class="block text-sm font-medium text-black mb-1">الشهر</label>
                    <select id="month" name="month" class="mt-1 block w-full py-2 p-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" required>
                        <option value="">اختر الشهر</option>
                        <option value="1" {{ old('month', $currentMonth) == 1 ? 'selected' : '' }}>يناير</option>
                        <option value="2" {{ old('month', $currentMonth) == 2 ? 'selected' : '' }}>فبراير</option>
                        <option value="3" {{ old('month', $currentMonth) == 3 ? 'selected' : '' }}>مارس</option>
                        <option value="4" {{ old('month', $currentMonth) == 4 ? 'selected' : '' }}>أبريل</option>
                        <option value="5" {{ old('month', $currentMonth) == 5 ? 'selected' : '' }}>مايو</option>
                        <option value="6" {{ old('month', $currentMonth) == 6 ? 'selected' : '' }}>يونيو</option>
                        <option value="7" {{ old('month', $currentMonth) == 7 ? 'selected' : '' }}>يوليو</option>
                        <option value="8" {{ old('month', $currentMonth) == 8 ? 'selected' : '' }}>أغسطس</option>
                        <option value="9" {{ old('month', $currentMonth) == 9 ? 'selected' : '' }}>سبتمبر</option>
                        <option value="10" {{ old('month', $currentMonth) == 10 ? 'selected' : '' }}>أكتوبر</option>
                        <option value="11" {{ old('month', $currentMonth) == 11 ? 'selected' : '' }}>نوفمبر</option>
                        <option value="12" {{ old('month', $currentMonth) == 12 ? 'selected' : '' }}>ديسمبر</option>
                    </select>
                </div>
                
                <div>
                    <label for="year" class="block text-sm font-medium text-black mb-1">السنة</label>
                    <input type="number" id="year" name="year" value="{{ old('year', $currentYear) }}" min="2000" ma="2100" class="mt-1 block w-full py-2 p-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" required>
                </div>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
                <div>
                    <label for="start_date" class="block text-sm font-medium text-black mb-1">تاريخ البداية</label>
                    <input type="date" id="start_date" name="start_date" value="{{ old('start_date', date('Y-m-01')) }}" class="mt-1 block w-full py-2 p-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" required>
                </div>
                
                <div>
                    <label for="end_date" class="block text-sm font-medium text-black mb-1">تاريخ النهاية</label>
                    <input type="date" id="end_date" name="end_date" value="{{ old('end_date', date('Y-m-t')) }}" class="mt-1 block w-full py-2 p-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" required>
                </div>
                
                <div>
                    <label for="payment_date" class="block text-sm font-medium text-black mb-1">تاريخ الدفع</label>
                    <input type="date" id="payment_date" name="payment_date" value="{{ old('payment_date', date('Y-m-d', strtotime('+1 day', strtotime(date('Y-m-t'))))) }}" class="mt-1 block w-full py-2 p-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" required>
                </div>
            </div>
            
            <div class="mb-6">
                <label for="notes" class="block text-sm font-medium text-black mb-1">ملاحظات</label>
                <textarea id="notes" name="notes" rows="3" class="mt-1 block w-full py-2 p-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">{{ old('notes') }}</textarea>
            </div>
            
            <div class="bg-yellow-50 border-l-4 border-yellow-400 p-4 mb-6">
                <div class="flex">
                    <div class="flex-shrink-0">
                        <i class="fas fa-eclamation-triangle text-yellow-400"></i>
                    </div>
                    <div class="mr-3">
                        <p class="text-sm text-yellow-700">
                            سيتم إنشاء كشف الرواتب لجميع الموظفين النشطين. يمكنك تعديل تفاصيل الرواتب بعد الإنشاء.
                        </p>
                    </div>
                </div>
            </div>
            
            <div class="flex justify-end">
                <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 p-4 rounded">
                    <i class="fas fa-save ml-1"></i> إنشاء كشف الرواتب
                </button>
            </div>
        </form>
    </div>
</div>
@endsection