@extends('layouts.app')
@section('title', 'إضافة حقل مخصص - DOTS HR Pro')

@section('content')
<div class="page-header">
    <div>
        <h1 class="page-title">إضافة حقل مخصص</h1>
        <p class="page-subtitle">إنشاء حقل إضافي جديد لملفات الموظفين</p>
    </div>
    <div class="page-actions">
        <a href="{{ route('settings.custom-fields.index') }}" class="btn btn-ghost"><i class="fas fa-arrow-right"></i> رجوع</a>
    </div>
</div>

@if($errors->any())
<div class="alert alert-danger" style="background: var(--danger-light); border: 1px solid var(--danger); padding: 1rem; border-radius: var(--radius); margin-bottom: 1.5rem; color: var(--danger)">
    <ul style="margin:0; padding-right: 1.2rem">
        @foreach($errors->all() as $error)
            <li>{{ $error }}</li>
        @endforeach
    </ul>
</div>
@endif

<div class="card" style="max-width:800px">
    <div class="card-body">
        <form method="POST" action="{{ route('settings.custom-fields.store') }}">
            @csrf
            <div class="form-grid cols-2">
                <div class="form-group">
                    <label class="form-label required">اسم الحقل (عربي)</label>
                    <input type="text" name="name" value="{{ old('name') }}" class="form-input" placeholder="مثال: فصيلة الدم" required>
                    <small class="form-hint">الاسم الذي سيظهر في النموذج</small>
                </div>
                <div class="form-group">
                    <label class="form-label required">المفتاح (إنجليزي)</label>
                    <input type="text" name="key" value="{{ old('key') }}" class="form-input" placeholder="مثال: blood_type" required pattern="[a-z][a-z0-9_]*" dir="ltr">
                    <small class="form-hint">حروف صغيرة وأرقام و _ فقط — يبدأ بحرف</small>
                </div>
            </div>
            <div class="form-grid cols-2">
                <div class="form-group">
                    <label class="form-label required">نوع الحقل</label>
                    <select name="type" class="form-select" required id="field-type" onchange="toggleOptions()">
                        @foreach(\App\Models\CustomField::TYPE_LABELS as $val => $label)
                            <option value="{{ $val }}" {{ old('type') == $val ? 'selected' : '' }}>{{ $label }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="form-group">
                    <label class="form-label required">القسم</label>
                    <select name="section" class="form-select" required>
                        @foreach(\App\Models\CustomField::SECTION_LABELS as $val => $label)
                            <option value="{{ $val }}" {{ old('section') == $val ? 'selected' : '' }}>{{ $label }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            <div class="form-group" id="options-group" style="display:none">
                <label class="form-label">الخيارات</label>
                <input type="text" name="options" value="{{ old('options') }}" class="form-input" placeholder="مثال: O+, O-, A+, A-, B+, B-, AB+, AB-" dir="ltr">
                <small class="form-hint">افصل الخيارات بفاصلة — يظهر فقط مع نوع "قائمة اختيار"</small>
            </div>
            <div class="form-group">
                <label class="form-label">نص توضيحي (Placeholder)</label>
                <input type="text" name="placeholder" value="{{ old('placeholder') }}" class="form-input" placeholder="نص يظهر داخل الحقل قبل الكتابة">
            </div>
            <div class="form-grid cols-3">
                <div class="form-group">
                    <label class="form-label">الترتيب</label>
                    <input type="number" name="sort_order" value="{{ old('sort_order', 0) }}" class="form-input" min="0">
                </div>
                <div class="form-group" style="display:flex; align-items:center; gap:0.5rem; padding-top:1.8rem">
                    <input type="checkbox" name="is_required" value="1" id="is_required" {{ old('is_required') ? 'checked' : '' }}>
                    <label for="is_required">حقل مطلوب</label>
                </div>
                <div class="form-group" style="display:flex; align-items:center; gap:0.5rem; padding-top:1.8rem">
                    <input type="checkbox" name="show_in_table" value="1" id="show_in_table" {{ old('show_in_table') ? 'checked' : '' }}>
                    <label for="show_in_table">إظهار في جدول الموظفين</label>
                </div>
            </div>
            <div class="form-actions">
                <button type="submit" class="btn btn-primary btn-lg"><i class="fas fa-save"></i> حفظ الحقل</button>
                <a href="{{ route('settings.custom-fields.index') }}" class="btn btn-ghost btn-lg">إلغاء</a>
            </div>
        </form>
    </div>
</div>

@push('scripts')
<script>
function toggleOptions() {
    var type = document.getElementById('field-type').value;
    document.getElementById('options-group').style.display = (type === 'select') ? 'block' : 'none';
}
toggleOptions();
</script>
@endpush
@endsection