@extends('layouts.app')

@section('content')
<div class="flex justify-between items-center mb-6" style="margin-top: 15px;">
    <h2 class="text-2xl font-bold text-gold">إضافة موظف جديد</h2>
    <a href="{{ route('admin.employees.index') }}" class="px-4 py-2 bg-gray-800 text-gray-300 rounded-lg">عودة</a>
</div>

<div class="max-w-4xl bg-black/20 border border-gray-800 rounded-2xl p-8">
    <form action="{{ route('admin.employees.store') }}" method="POST" enctype="multipart/form-data">
        @csrf
        
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
                <label class="block text-sm text-gray-400 mb-2">اسم الموظف</label>
                <input type="text" name="name" value="{{ old('name') }}" required class="w-full bg-black border-gray-800 rounded-lg px-4 py-2.5 text-white focus:border-gold outline-none">
                @error('name') <span class="text-red-500 text-xs">{{ $message }}</span> @enderror
            </div>

            <div>
                <label class="block text-sm text-gray-400 mb-2">المسمى الوظيفي</label>
                <select name="job_title_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($jobTitles as $title)
                    <option value="{{ $title->id }}" {{ old('job_title_id') == $title->id ? 'selected' : '' }}>{{ $title->name }}</option>
                    @endforeach
                </select>
                @error('job_title_id') <span class="text-red-500 text-xs">{{ $message }}</span> @enderror
            </div>

            <div class="md:col-span-2 bg-black/30 p-4 rounded-xl border border-gray-800">
                <label class="block text-sm text-gold mb-3 font-bold flex items-center gap-2">
                    <i class="fas fa-building"></i> الفروع المصرح للموظف بالعمل بها
                </label>
                <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                    <div class="flex items-center gap-2 p-2 bg-gray-900/50 rounded-lg hover:bg-gray-800 transition-colors">
                        <input type="checkbox" id="select_all_branches" class="w-4 h-4 rounded border-gray-700 text-gold focus:ring-gold bg-black">
                        <label for="select_all_branches" class="text-sm text-white cursor-pointer select-none font-bold">كل الفروع</label>
                    </div>
                    @foreach($branches as $branch)
                    <div class="flex items-center gap-2 p-2 bg-gray-900/50 rounded-lg hover:bg-gray-800 transition-colors branch-checkbox-container">
                        <input type="checkbox" name="branch_ids[]" value="{{ $branch->id }}" id="branch_{{ $branch->id }}" class="branch-checkbox w-4 h-4 rounded border-gray-700 text-gold focus:ring-gold bg-black" {{ in_array($branch->id, old('branch_ids', [])) ? 'checked' : '' }}>
                        <label for="branch_{{ $branch->id }}" class="text-sm text-gray-300 cursor-pointer select-none">{{ $branch->name }}</label>
                    </div>
                    @endforeach
                </div>
                @error('branch_ids') <span class="text-red-500 text-xs mt-2 block">{{ $message }}</span> @enderror
            </div>

            <div>
                <label class="block text-sm text-gray-400 mb-2">الحالة</label>
                <select name="status" 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="active" {{ old('status') == 'active' ? 'selected' : '' }}>نشط</option>
                    <option value="inactive" {{ old('status') == 'inactive' ? 'selected' : '' }}>غير نشط</option>
                    <option value="on_leave" {{ old('status') == 'on_leave' ? 'selected' : '' }}>في إجازة</option>
                </select>
                @error('status') <span class="text-red-500 text-xs">{{ $message }}</span> @enderror
            </div>

            <div>
                <label class="block text-sm text-gray-400 mb-2">الراتب الأساسي</label>
                <input type="number" name="basic_salary" value="{{ old('basic_salary') }}" step="0.01" required class="w-full bg-black border-gray-800 rounded-lg px-4 py-2.5 text-white focus:border-gold outline-none">
                @error('basic_salary') <span class="text-red-500 text-xs">{{ $message }}</span> @enderror
            </div>

            <div>
                <label class="block text-sm text-gray-400 mb-2">نسبة العمولة (%)</label>
                <input type="number" name="commission_rate" value="{{ old('commission_rate', 0) }}" step="0.01" class="w-full bg-black border-gray-800 rounded-lg px-4 py-2.5 text-white focus:border-gold outline-none">
                @error('commission_rate') <span class="text-red-500 text-xs">{{ $message }}</span> @enderror
            </div>

            <div>
                <label class="block text-sm text-gray-400 mb-2">رقم الجوال</label>
                <input type="text" name="phone" value="{{ old('phone') }}" class="w-full bg-black border-gray-800 rounded-lg px-4 py-2.5 text-white focus:border-gold outline-none">
                @error('phone') <span class="text-red-500 text-xs">{{ $message }}</span> @enderror
            </div>

            <div>
                <label class="block text-sm text-gray-400 mb-2">البريد الإلكتروني</label>
                <input type="email" name="email" value="{{ old('email') }}" class="w-full bg-black border-gray-800 rounded-lg px-4 py-2.5 text-white focus:border-gold outline-none">
                @error('email') <span class="text-red-500 text-xs">{{ $message }}</span> @enderror
            </div>

            <div>
                <label class="block text-sm text-gray-400 mb-2">تاريخ الانضمام</label>
                <input type="text" name="join_date" id="join_date" value="{{ old('join_date') }}" class="w-full bg-black border-gray-800 rounded-lg px-4 py-2.5 text-white focus:border-gold outline-none datepicker">
                @error('join_date') <span class="text-red-500 text-xs">{{ $message }}</span> @enderror
            </div>

            <div>
                <label class="block text-sm text-gray-400 mb-2">الصورة الشخصية</label>
                <input type="file" name="profile_image" class="w-full bg-black border-gray-800 rounded-lg px-4 py-2.5 text-white focus:border-gold outline-none">
                @error('profile_image') <span class="text-red-500 text-xs">{{ $message }}</span> @enderror
            </div>

            <div>
                <label class="block text-sm text-gray-400 mb-2">الوثائق (PDF, صور)</label>
                <input type="file" name="documents[]" multiple class="w-full bg-black border-gray-800 rounded-lg px-4 py-2.5 text-white focus:border-gold outline-none">
                <span class="text-[10px] text-gray-500">يمكنك اختيار أكثر من ملف</span>
                @error('documents') <span class="text-red-500 text-xs">{{ $message }}</span> @enderror
            </div>
        </div>

        <div class="mt-8">
            <button type="submit" class="bg-[#d4af37] text-black w-full py-3 rounded-lg font-bold shadow-lg shadow-[#d4af37]/20 hover:bg-[#b08d2a] transition-all">حفظ الموظف</button>
        </div>
    </form>
</div>

@push('styles')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<link rel="stylesheet" type="text/css" href="https://npmcdn.com/flatpickr/dist/themes/dark.css">
<style>
    .flatpickr-calendar { background: #111 !important; border: 1px solid #333 !important; color: white !important; }
    .flatpickr-day.selected { background: #d4af37 !important; border-color: #d4af37 !important; color: black !important; }
    .flatpickr-month { background: #111 !important; color: white !important; }
    .flatpickr-weekday { background: #111 !important; color: #999 !important; }
    .flatpickr-current-month input.cur-year { background: #111 !important; color: white !important; border: 1px solid #333 !important; }
    .flatpickr-prev-month, .flatpickr-next-month { fill: #d4af37 !important; }
</style>
@endpush

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/ar.js"></script>
<script>
    flatpickr("#join_date", {
        dateFormat: "Y-m-d",
        locale: "{{ app()->getLocale() == 'ar' ? 'ar' : 'default' }}",
    });

    document.getElementById('select_all_branches').addEventListener('change', function() {
        const checkboxes = document.querySelectorAll('.branch-checkbox');
        checkboxes.forEach(cb => {
            cb.checked = this.checked;
        });
    });

    const branchCheckboxes = document.querySelectorAll('.branch-checkbox');
    branchCheckboxes.forEach(cb => {
        cb.addEventListener('change', function() {
            const allChecked = Array.from(branchCheckboxes).every(c => c.checked);
            document.getElementById('select_all_branches').checked = allChecked;
        });
    });
</script>
@endpush
@endsection