@extends('layouts.app')
@section('title', 'إضافة نوع إجازة - DOTS HR Pro')

@push('styles')
<style>
.form-card { background: #fff; border-radius: 12px; padding: 24px; box-shadow: 0 2px 8px rgba(0,0,0,.06); border: 1px solid #eee; margin-bottom: 20px; }
.form-card h3 { color: #1B2A4A; margin-bottom: 16px; padding-bottom: 10px; border-bottom: 2px solid #E8502F; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; }
.form-group { margin-bottom: 16px; }
.form-group label { display: block; margin-bottom: 6px; font-weight: 600; font-size: 0.85rem; color: #555; }
.form-group input, .form-group select, .form-group textarea { width: 100%; padding: 10px 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 0.95rem; font-family: inherit; }
.form-group textarea { resize: vertical; min-height: 80px; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: #E8502F; outline: none; box-shadow: 0 0 0 3px rgba(232,80,47,0.1); }
.checkbox-group { display: flex; flex-wrap: wrap; gap: 16px; }
.checkbox-item { display: flex; align-items: center; gap: 8px; }
.checkbox-item input[type="checkbox"] { width: 18px; height: 18px; accent-color: #E8502F; }
.btn-save { background: #E8502F; color: #fff; border: none; padding: 12px 32px; border-radius: 8px; cursor: pointer; font-weight: 700; font-size: 1rem; }
.btn-save:hover { background: #d4421f; }
.btn-cancel { background: #eee; color: #333; border: none; padding: 12px 32px; border-radius: 8px; cursor: pointer; font-weight: 600; font-size: 1rem; text-decoration: none; display: inline-block; }
.btn-cancel:hover { background: #ddd; }
.form-actions { display: flex; gap: 12px; justify-content: flex-start; margin-top: 20px; }
.color-preview { display: inline-block; width: 24px; height: 24px; border-radius: 50%; vertical-align: middle; margin-right: 8px; border: 1px solid #ddd; }
</style>
@endpush

@section('content')
<div class="page-header">
    <div>
        <h1 class="page-title"><i class="fas fa-plus-circle" style="color:#E8502F;"></i> إضافة نوع إجازة جديد</h1>
        <p class="page-subtitle">تعريف نوع إجازة جديد مع سياساته</p>
    </div>
</div>

@if($errors->any())
<div class="alert alert-danger">
    <ul style="margin:0; padding-right:20px;">
        @foreach($errors->all() as $error)
            <li>{{ $error }}</li>
        @endforeach
    </ul>
</div>
@endif

<form method="POST" action="{{ route('leave-management.store-type') }}">
    @csrf

    {{-- Basic Info --}}
    <div class="form-card">
        <h3><i class="fas fa-info-circle"></i> المعلومات الأساسية</h3>
        <div class="form-grid">
            <div class="form-group">
                <label>اسم الإجازة (عربي) *</label>
                <input type="text" name="name_ar" value="{{ old('name_ar') }}" required placeholder="مثال: إجازة دراسية">
            </div>
            <div class="form-group">
                <label>اسم الإجازة (إنجليزي)</label>
                <input type="text" name="name_en" value="{{ old('name_en') }}" placeholder="e.g. Study Leave">
            </div>
            <div class="form-group">
                <label>الرمز (Slug)</label>
                <input type="text" name="slug" value="{{ old('slug') }}" placeholder="study_leave" dir="ltr">
            </div>
            <div class="form-group">
                <label>الأيقونة (Font Awesome)</label>
                <input type="text" name="icon" value="{{ old('icon', 'fas fa-calendar-check') }}" dir="ltr" placeholder="fas fa-calendar-check">
            </div>
            <div class="form-group">
                <label>اللون</label>
                <input type="color" name="color" value="{{ old('color', '#3b82f6') }}" style="height:42px; padding:4px;">
            </div>
            <div class="form-group">
                <label>الترتيب</label>
                <input type="number" name="sort_order" value="{{ old('sort_order', 99) }}" min="0">
            </div>
        </div>
    </div>

    {{-- Policy --}}
    <div class="form-card">
        <h3><i class="fas fa-gavel"></i> السياسة</h3>
        <div class="form-grid">
            <div class="form-group">
                <label>المدة الافتراضية (أيام) *</label>
                <input type="number" name="default_days" value="{{ old('default_days', 0) }}" min="0" required>
            </div>
            <div class="form-group">
                <label>نوع الأجر *</label>
                <select name="pay_type" id="pay_type" required>
                    <option value="full" {{ old('pay_type') == 'full' ? 'selected' : '' }}>مدفوعة بالكامل</option>
                    <option value="partial" {{ old('pay_type') == 'partial' ? 'selected' : '' }}>مدفوعة جزئياً</option>
                    <option value="unpaid" {{ old('pay_type') == 'unpaid' ? 'selected' : '' }}>بدون أجر</option>
                </select>
            </div>
            <div class="form-group">
                <label>نسبة الأجر (%)</label>
                <input type="number" name="pay_percentage" value="{{ old('pay_percentage', 100) }}" min="0" max="100" step="0.01">
            </div>
            <div class="form-group">
                <label>الجنس *</label>
                <select name="gender" required>
                    <option value="all" {{ old('gender') == 'all' ? 'selected' : '' }}>الجميع</option>
                    <option value="male" {{ old('gender') == 'male' ? 'selected' : '' }}>ذكور فقط</option>
                    <option value="female" {{ old('gender') == 'female' ? 'selected' : '' }}>إناث فقط</option>
                </select>
            </div>
            <div class="form-group">
                <label>الحد الأدنى للخدمة (أشهر)</label>
                <input type="number" name="min_service_months" value="{{ old('min_service_months', 0) }}" min="0">
            </div>
            <div class="form-group">
                <label>فترة الإشعار المسبق (أيام)</label>
                <input type="number" name="advance_notice_days" value="{{ old('advance_notice_days', 0) }}" min="0">
            </div>
            <div class="form-group">
                <label>أقصى عدد مرات في السنة</label>
                <input type="number" name="max_times_per_year" value="{{ old('max_times_per_year') }}" min="1" placeholder="غير محدود">
            </div>
            <div class="form-group">
                <label>أقصى عدد مرات خلال الخدمة</label>
                <input type="number" name="max_times_per_career" value="{{ old('max_times_per_career') }}" min="1" placeholder="غير محدود">
            </div>
        </div>
    </div>

    {{-- Carry Forward --}}
    <div class="form-card">
        <h3><i class="fas fa-redo"></i> الترحيل والخيارات</h3>
        <div class="form-group">
            <label>أقصى أيام ترحيل (اتركه فارغ = لا ترحيل)</label>
            <input type="number" name="max_carry_forward_days" value="{{ old('max_carry_forward_days') }}" min="0" placeholder="0">
        </div>
        <div class="checkbox-group">
            <label class="checkbox-item">
                <input type="checkbox" name="carry_forward" value="1" {{ old('carry_forward') ? 'checked' : '' }}>
                السماح بالترحيل
            </label>
            <label class="checkbox-item">
                <input type="checkbox" name="allow_half_day" value="1" {{ old('allow_half_day') ? 'checked' : '' }}>
                السماح بنصف يوم
            </label>
            <label class="checkbox-item">
                <input type="checkbox" name="allow_negative_balance" value="1" {{ old('allow_negative_balance') ? 'checked' : '' }}>
                السماح برصيد سالب
            </label>
            <label class="checkbox-item">
                <input type="checkbox" name="requires_attachment" value="1" {{ old('requires_attachment') ? 'checked' : '' }}>
                يتطلب مرفق
            </label>
            <label class="checkbox-item">
                <input type="checkbox" name="exclude_weekends" value="1" {{ old('exclude_weekends', 1) ? 'checked' : '' }}>
                استبعاد عطل نهاية الأسبوع
            </label>
            <label class="checkbox-item">
                <input type="checkbox" name="exclude_holidays" value="1" {{ old('exclude_holidays', 1) ? 'checked' : '' }}>
                استبعاد الإجازات الرسمية
            </label>
            <label class="checkbox-item">
                <input type="checkbox" name="is_active" value="1" {{ old('is_active', 1) ? 'checked' : '' }}>
                مفعّل
            </label>
        </div>
    </div>

    {{-- Description --}}
    <div class="form-card">
        <h3><i class="fas fa-align-right"></i> الوصف</h3>
        <div class="form-group">
            <label>وصف الإجازة</label>
            <textarea name="description_ar" placeholder="وصف اختياري لنوع الإجازة...">{{ old('description_ar') }}</textarea>
        </div>
    </div>

    <div class="form-actions">
        <button type="submit" class="btn-save"><i class="fas fa-save"></i> حفظ</button>
        <a href="{{ route('leave-management.types') }}" class="btn-cancel">إلغاء</a>
    </div>
</form>
@endsection