@extends('layouts.app')

@section('content')
<div class="flex justify-between items-center mb-6">
    <h2 class="text-2xl font-bold text-gold">إنشاء دورة رواتب جديدة</h2>
    <a href="{{ route('admin.payrolls.index') }}" class="px-4 py-2 bg-gray-800 text-gray-300 rounded-lg">عودة</a>
</div>

<div class="max-w-xl bg-black/20 border border-gray-800 rounded-2xl p-8">
    <form action="{{ route('admin.payrolls.store') }}" method="POST" id="payrollForm">
        @csrf
        
        <div class="space-y-6">
            <div>
                <label class="block text-sm text-gray-400 mb-2">الفرع</label>
                <select name="branch_id" required class="w-full bg-black border-gray-800 rounded-lg px-4 py-2.5 text-white focus:border-gold outline-none">
                    <option value="">اختر الفرع</option>
                    @foreach($branches as $branch)
                    <option value="{{ $branch->id }}">{{ $branch->name }}</option>
                    @endforeach
                </select>
                @error('branch_id') <span class="text-red-500 text-xs">{{ $message }}</span> @enderror
            </div>

            <div class="grid grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm text-gray-400 mb-2">السنة</label>
                    <select id="select_year" class="w-full bg-black border-gray-800 rounded-lg px-4 py-2.5 text-white focus:border-gold outline-none">
                        @for($y = 2025; $y <= 2050; $y++)
                            <option value="{{ $y }}" {{ $y == date('Y') ? 'selected' : '' }}>{{ $y }}</option>
                        @endfor
                    </select>
                </div>
                <div>
                    <label class="block text-sm text-gray-400 mb-2">الشهر</label>
                    <select id="select_month" class="w-full bg-black border-gray-800 rounded-lg px-4 py-2.5 text-white focus:border-gold outline-none">
                        @php
                            $months = [
                                '01' => 'يناير', '02' => 'فبراير', '03' => 'مارس', '04' => 'أبريل',
                                '05' => 'مايو', '06' => 'يونيو', '07' => 'يوليو', '08' => 'أغسطس',
                                '09' => 'سبتمبر', '10' => 'أكتوبر', '11' => 'نوفمبر', '12' => 'ديسمبر'
                            ];
                        @endphp
                        @foreach($months as $num => $name)
                            <option value="{{ $num }}" {{ $num == date('m') ? 'selected' : '' }}>{{ $num }} - {{ $name }}</option>
                        @endforeach
                    </select>
                </div>
            </div>

            <!-- Hidden field to store combined YYYY-MM -->
            <input type="hidden" name="month" id="combined_month">

            <p class="text-[10px] text-gray-500 mt-1">سيتم جلب جميع الموظفين النشطين في هذا الفرع تلقائياً.</p>
            @error('month') <span class="text-red-500 text-xs">{{ $message }}</span> @enderror

            <button type="submit" class="btn-gold w-full py-3 mt-4 font-bold">إنشاء الدورة</button>
        </div>
    </form>
</div>

<script>
    document.getElementById('payrollForm').addEventListener('submit', function(e) {
        const year = document.getElementById('select_year').value;
        const month = document.getElementById('select_month').value;
        document.getElementById('combined_month').value = `${year}-${month}`;
    });
</script>
@endsection