@extends('layouts.app')

@section('title', 'درجة وظيفية جديدة')

@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('pay-scale.index') }}" class="btn btn-secondary"><i class="fas fa-arrow-right"></i> رجوع</a>
    </div>
</div>

<form method="POST" action="{{ route('pay-scale.store') }}">
    @csrf
    <div class="card">
        <div class="card-header"><h3><i class="fas fa-layer-group"></i> بيانات الدرجة</h3></div>
        <div class="card-body">
            <div class="form-grid cols-2">
                <div class="form-group">
                    <label class="form-label required">اسم الدرجة</label>
                    <input type="text" name="name" class="form-input" value="{{ old('name') }}" required placeholder="مثال: الدرجة الأولى">
                    @error('name')<p class="form-hint" style="color:var(--danger);">{{ $message }}</p>@enderror
                </div>
                <div class="form-group">
                    <label class="form-label required">رمز الدرجة</label>
                    <input type="text" name="code" class="form-input" value="{{ old('code') }}" required placeholder="مثال: G1">
                    @error('code')<p class="form-hint" style="color:var(--danger);">{{ $message }}</p>@enderror
                </div>
            </div>

            <div class="form-group">
                <label class="form-label">الوصف</label>
                <textarea name="description" class="form-textarea" rows="2">{{ old('description') }}</textarea>
            </div>

            <div class="form-grid cols-3">
                <div class="form-group">
                    <label class="form-label required">الحد الأدنى للراتب</label>
                    <input type="number" name="min_salary" class="form-input" step="0.01" min="0" value="{{ old('min_salary') }}" required>
                </div>
                <div class="form-group">
                    <label class="form-label required">متوسط الراتب</label>
                    <input type="number" name="mid_salary" class="form-input" step="0.01" min="0" value="{{ old('mid_salary') }}" required>
                </div>
                <div class="form-group">
                    <label class="form-label required">الحد الأقصى للراتب</label>
                    <input type="number" name="max_salary" class="form-input" step="0.01" min="0" value="{{ old('max_salary') }}" required>
                </div>
            </div>

            <div class="form-grid cols-3">
                <div class="form-group">
                    <label class="form-label required">نسبة بدل السكن (%)</label>
                    <input type="number" name="housing_percent" class="form-input" step="0.01" min="0" max="100" value="{{ old('housing_percent', 25) }}" required>
                    <p class="form-hint">نسبة من الراتب الأساسي</p>
                </div>
                <div class="form-group">
                    <label class="form-label required">بدل النقل (ثابت)</label>
                    <input type="number" name="transport_allowance" class="form-input" step="0.01" min="0" value="{{ old('transport_allowance', 0) }}" required>
                </div>
                <div class="form-group">
                    <label class="form-label required">عدد الدرجات الفرعية</label>
                    <input type="number" name="steps_count" class="form-input" min="1" max="20" value="{{ old('steps_count', 5) }}" required>
                    <p class="form-hint">سيتم توزيع الرواتب بالتساوي بين الحد الأدنى والأقصى</p>
                </div>
            </div>
        </div>
    </div>

    <div class="form-actions">
        <button type="submit" class="btn btn-primary"><i class="fas fa-save"></i> حفظ الدرجة</button>
        <a href="{{ route('pay-scale.index') }}" class="btn btn-secondary">إلغاء</a>
    </div>
</form>
@endsection