@extends('admin.layout.main')
@section('title')
    إضافة الموظف
@endsection

@section('style')
    <style>
        /* تحسين مظهر الحقول */
        #nationalIdField {
            transition: all 0.3s ease;
        }

        .form-check-input:checked {
            background-color: #17c1e8;
            border-color: #17c1e8;
        }

        .input-group-text {
            background: transparent;
            border-left: none;
        }

        .input-group .form-control {
            border-right: none;
        }

        .input-group .form-control:focus {
            border-right: none;
            box-shadow: none;
        }
    </style>
@endsection
@section('content')
    <div class="row">
        <div class="col-12">
            <div class="card mb-4">
                <div class="card-header pb-0">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="text-info">
                                <i class="fas fa-user-plus me-2"></i>
                                إضافة موظف جديد
                            </h6>
                        </div>
                        <a href="{{ route('admin.employee.index') }}" class="btn btn-outline-secondary btn-sm mb-0">
                            <i class="fas fa-arrow-right me-1"></i>
                            العودة للقائمة
                        </a>
                    </div>
                </div>

                <div class="card-body">
                    <form action="{{ route('admin.employee.store') }}" method="POST" enctype="multipart/form-data">
                        @csrf

                        <!-- صف 1: اسم الموظف -->
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label for="name" class="form-label">
                                    <i class="fas fa-user text-info me-1"></i>
                                    اسم الموظف <span class="text-danger">*</span>
                                </label>
                                <input type="text" class="form-control @error('name') is-invalid @enderror" id="name"
                                    name="name" value="{{ old('name') }}" placeholder="أدخل اسم الموظف الكامل"
                                    autocomplete="off">
                                @error('name')
                                    <div class="invalid-feedback">
                                        <i class="fas fa-exclamation-circle me-1"></i>
                                        {{ $message }}
                                    </div>
                                @enderror
                            </div>

                            <div class="col-md-6">
                                <label for="nationality" class="form-label">
                                    <i class="fas fa-flag text-info me-1"></i>
                                    الجنسية <span class="text-danger">*</span>
                                </label>
                                <select class="form-control @error('nationality') is-invalid @enderror" id="nationality"
                                    name="nationality" onchange="toggleNationalIdField()">
                                    <option value="">-- اختر الجنسية --</option>
                                    <option value="سوريا" {{ old('nationality') == 'سوريا' ? 'selected' : '' }}>سوريا</option>
                                    <option value="السعودية" {{ old('nationality') == 'السعودية' ? 'selected' : '' }}>السعودية
                                    </option>
                                </select>
                                @error('nationality')
                                    <div class="invalid-feedback">
                                        <i class="fas fa-exclamation-circle me-1"></i>
                                        {{ $message }}
                                    </div>
                                @enderror
                            </div>
                        </div>

                        <!-- صف 2: حقل متغير حسب الجنسية + الإقامة -->
                        <div class="row mb-3">
                            <div class="col-md-6" id="nationalIdField" style="display: none;">
                                <label for="national_id" class="form-label">
                                    <i class="fas fa-id-card text-info me-1"></i>
                                    <span id="nationalIdLabel">الرقم الوطني</span> <span class="text-danger">*</span>
                                </label>
                                <input type="text" class="form-control @error('national_id') is-invalid @enderror"
                                    id="national_id" name="national_id" value="{{ old('national_id') }}"
                                    placeholder="أدخل الرقم" autocomplete="off">
                                @error('national_id')
                                    <div class="invalid-feedback">
                                        <i class="fas fa-exclamation-circle me-1"></i>
                                        {{ $message }}
                                    </div>
                                @enderror
                            </div>

                            <div class="col-md-6" id="residenceField">
                                <label for="residence" class="form-label">
                                    <i class="fas fa-passport text-info me-1"></i>
                                    الإقامة <span class="text-danger">*</span>
                                </label>
                                <input type="text" class="form-control @error('residence') is-invalid @enderror"
                                    id="residence" name="residence" value="{{ old('residence') }}"
                                    placeholder="أدخل مكان الإقامة" autocomplete="off">
                                @error('residence')
                                    <div class="invalid-feedback">
                                        <i class="fas fa-exclamation-circle me-1"></i>
                                        {{ $message }}
                                    </div>
                                @enderror
                            </div>
                        </div>

                        <!-- صف 3: الجنس + تاريخ الميلاد -->
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label class="form-label">
                                    <i class="fas fa-venus-mars text-info me-1"></i>
                                    الجنس <span class="text-danger">*</span>
                                </label>
                                <div class="d-flex gap-3 @error('gender') is-invalid-gender @enderror">
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="gender" id="gender_male"
                                            value="ذكر" {{ old('gender') == 'ذكر' ? 'checked' : '' }}>
                                        <label class="form-check-label" for="gender_male">
                                            <i class="fas fa-male text-info"></i> ذكر
                                        </label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="gender" id="gender_female"
                                            value="أنثى" {{ old('gender') == 'أنثى' ? 'checked' : '' }}>
                                        <label class="form-check-label" for="gender_female">
                                            <i class="fas fa-female text-info"></i> أنثى
                                        </label>
                                    </div>
                                </div>
                                @error('gender')
                                    <div class="invalid-feedback d-block">
                                        <i class="fas fa-exclamation-circle me-1"></i>
                                        {{ $message }}
                                    </div>
                                @enderror
                            </div>

                            <div class="col-md-6">
                                <label for="birth_date" class="form-label">
                                    <i class="fas fa-calendar-alt text-info me-1"></i>
                                    تاريخ الميلاد <span class="text-danger">*</span>
                                </label>
                                <input type="date" class="form-control @error('birth_date') is-invalid @enderror"
                                    id="birth_date" name="birth_date" value="{{ old('birth_date') }}" autocomplete="off">
                                @error('birth_date')
                                    <div class="invalid-feedback">
                                        <i class="fas fa-exclamation-circle me-1"></i>
                                        {{ $message }}
                                    </div>
                                @enderror
                            </div>
                        </div>

                        <!-- صف 4: تاريخ التوظيف + رقم الهاتف -->
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label for="employment_date" class="form-label">
                                    <i class="fas fa-briefcase text-info me-1"></i>
                                    تاريخ التوظيف <span class="text-danger">*</span>
                                </label>
                                <input type="date" class="form-control @error('employment_date') is-invalid @enderror"
                                    id="employment_date" name="employment_date" value="{{ old('employment_date') }}"
                                    autocomplete="off">
                                @error('employment_date')
                                    <div class="invalid-feedback">
                                        <i class="fas fa-exclamation-circle me-1"></i>
                                        {{ $message }}
                                    </div>
                                @enderror
                            </div>

                            <div class="col-md-6">
                                <label for="phone" class="form-label">
                                    <i class="fas fa-phone-alt text-info me-1"></i>
                                    رقم الهاتف <span class="text-danger">*</span>
                                </label>
                                <div class="input-group">
                                    <input type="tel" class="form-control @error('phone') is-invalid @enderror" id="phone"
                                        name="phone" value="{{ old('phone') }}" placeholder="5x xxx xxxx"
                                        autocomplete="off">
                                </div>
                                @error('phone')
                                    <div class="invalid-feedback d-block">
                                        <i class="fas fa-exclamation-circle me-1"></i>
                                        {{ $message }}
                                    </div>
                                @enderror
                            </div>
                        </div>

                        <!-- صف 5: الراتب + الخبرات -->
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label for="salary" class="form-label">
                                    <i class="fas fa-money-bill-wave text-info me-1"></i>
                                    الراتب <span class="text-danger">*</span>
                                </label>
                                <div class="input-group">
                                    <input type="number" class="form-control @error('salary') is-invalid @enderror"
                                        id="salary" name="salary" value="{{ old('salary') }}" placeholder="0.00"
                                        autocomplete="off">
                                </div>
                                @error('salary')
                                    <div class="invalid-feedback d-block">
                                        <i class="fas fa-exclamation-circle me-1"></i>
                                        {{ $message }}
                                    </div>
                                @enderror
                            </div>

                            <div class="col-md-6">
                                <label for="experience" class="form-label">
                                    <i class="fas fa-star text-info me-1"></i>
                                    الخبرات <span class="text-danger">*</span>
                                </label>
                                <input type="text" class="form-control @error('experience') is-invalid @enderror"
                                    id="experience" name="experience" value="{{ old('experience') }}"
                                    placeholder="مجال الخبرة وعدد السنوات">
                                @error('experience')
                                    <div class="invalid-feedback">
                                        <i class="fas fa-exclamation-circle me-1"></i>
                                        {{ $message }}
                                    </div>
                                @enderror
                            </div>
                        </div>

                        <!-- صف 6: البريد الإلكتروني + كلمة المرور -->
                        <div class="row mb-4">
                            <div class="col-md-6">
                                <label for="email" class="form-label">
                                    <i class="fas fa-envelope text-info me-1"></i>
                                    البريد الإلكتروني <span class="text-danger">*</span>
                                </label>
                                <input type="email" class="form-control @error('email') is-invalid @enderror" id="email"
                                    name="email" value="{{ old('email') }}" placeholder="employee@traveloffice.com">
                                @error('email')
                                    <div class="invalid-feedback">
                                        <i class="fas fa-exclamation-circle me-1"></i>
                                        {{ $message }}
                                    </div>
                                @enderror
                            </div>
                            <div class="col-md-6">
                                <label for="password" class="form-label">
                                    <i class="fas fa-lock text-info me-1"></i>
                                    كلمة المرور <span class="text-danger">*</span>
                                </label>
                                <div class="input-group">
                                    <input type="password" class="form-control @error('password') is-invalid @enderror"
                                        id="password" name="password" placeholder="أدخل كلمة المرور"
                                        autocomplete="new-password">
                                </div>
                                @error('password')
                                    <div class="invalid-feedback">
                                        <i class="fas fa-exclamation-circle me-1"></i>
                                        {{ $message }}
                                    </div>
                                @enderror
                            </div>
                        </div>

                        <!-- أزرار التحكم -->
                        <div class="row">
                            <div class="col-12 d-flex justify-content-start gap-2">
                                <button type="submit" class="btn bg-gradient-info">
                                    <i class="fas fa-save me-2"></i>
                                    حفظ الموظف
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script>
        function toggleNationalIdField() {
            const nationality = document.getElementById('nationality').value;
            const nationalIdField = document.getElementById('nationalIdField');
            const nationalIdLabel = document.getElementById('nationalIdLabel');
            const residenceField = document.getElementById('residenceField');

            if (nationality === 'سوريا') {
                // إظهار حقل الرقم الوطني وتغيير نصه
                nationalIdField.style.display = 'block';
                nationalIdLabel.textContent = 'الرقم الوطني';
                residenceField.classList.remove('col-md-6');
                residenceField.classList.add('col-md-6');
            } else if (nationality === 'السعودية') {
                // إظهار حقل رقم الإقامة
                nationalIdField.style.display = 'block';
                nationalIdLabel.textContent = 'رقم الإقامة';
                residenceField.classList.remove('col-md-6');
                residenceField.classList.add('col-md-6');
            } else {
                // إخفاء الحقل إذا لم يتم اختيار جنسية
                nationalIdField.style.display = 'none';
                residenceField.classList.remove('col-md-6');
                residenceField.classList.add('col-md-6');
            }
        }

        // تشغيل الدالة عند تحميل الصفحة للتحقق من القيمة القديمة
        document.addEventListener('DOMContentLoaded', function () {
            toggleNationalIdField();
        });
    </script>
@endsection
