@extends('layouts.app')

@section('content')
<div class="page-header">
    <div>
        <h1 class="page-title">هدف جديد (Objective)</h1>
        <p class="page-subtitle">حدد الهدف والنتائج الرئيسية القابلة للقياس</p>
    </div>
    <div class="page-actions">
        <a href="{{ route('okrs.index') }}" class="btn btn-secondary"><i class="fa-solid fa-arrow-right"></i> رجوع</a>
    </div>
</div>

<form method="POST" action="{{ route('okrs.store') }}">
    @csrf
    <div class="card">
        <div class="card-header"><h3>بيانات الهدف</h3></div>
        <div class="card-body">
            <div class="form-grid cols-2">
                <div class="form-group" style="grid-column:1 / -1;">
                    <label class="form-label required">عنوان الهدف</label>
                    <input type="text" name="title" class="form-input" value="{{ old('title') }}" required>
                </div>
                <div class="form-group" style="grid-column:1 / -1;">
                    <label class="form-label">الوصف</label>
                    <textarea name="description" class="form-textarea">{{ old('description') }}</textarea>
                </div>
                <div class="form-group">
                    <label class="form-label required">الفترة</label>
                    <input type="text" name="period" class="form-input" placeholder="مثال: Q1-2026" value="{{ old('period') }}" required>
                </div>
                <div class="form-group">
                    <label class="form-label required">التصنيف</label>
                    <select name="category" class="form-select" required>
                        <option value="individual">فردي</option>
                        <option value="team">فريق</option>
                        <option value="department">قسم</option>
                        <option value="company">الشركة</option>
                    </select>
                </div>
                <div class="form-group">
                    <label class="form-label">الموظف المسؤول</label>
                    <select name="employee_id" class="form-select">
                        <option value="">— بدون —</option>
                        @foreach($employees as $emp)
                            <option value="{{ $emp->id }}" {{ old('employee_id') == $emp->id ? 'selected' : '' }}>{{ $emp->first_name }} {{ $emp->last_name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="form-group">
                    <label class="form-label">القسم</label>
                    <select name="department_id" class="form-select">
                        <option value="">— بدون —</option>
                        @foreach($departments as $dept)
                            <option value="{{ $dept->id }}" {{ old('department_id') == $dept->id ? 'selected' : '' }}>{{ $dept->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="form-group">
                    <label class="form-label">الهدف الأب (للتتالي)</label>
                    <select name="parent_id" class="form-select">
                        <option value="">— بدون —</option>
                        @foreach($objectives as $obj)
                            <option value="{{ $obj->id }}" {{ old('parent_id') == $obj->id ? 'selected' : '' }}>{{ $obj->title }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="form-group">
                    <label class="form-label">الوزن (%)</label>
                    <input type="number" step="0.01" name="weight" class="form-input" value="{{ old('weight', 0) }}">
                </div>
                <div class="form-group">
                    <label class="form-label">تاريخ البدء</label>
                    <input type="date" name="start_date" class="form-input" value="{{ old('start_date') }}">
                </div>
                <div class="form-group">
                    <label class="form-label">تاريخ الانتهاء</label>
                    <input type="date" name="end_date" class="form-input" value="{{ old('end_date') }}">
                </div>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-header">
            <h3>النتائج الرئيسية (Key Results)</h3>
        </div>
        <div class="card-body">
            <div id="kr-wrap"></div>
            <button type="button" class="btn btn-secondary" id="add-kr"><i class="fa-solid fa-plus"></i> إضافة نتيجة رئيسية</button>
        </div>
    </div>

    <div class="form-actions">
        <button type="submit" class="btn btn-primary"><i class="fa-solid fa-check"></i> إنشاء الهدف</button>
        <a href="{{ route('okrs.index') }}" class="btn btn-secondary">إلغاء</a>
    </div>
</form>

<script>
let krIndex = 0;
document.getElementById('add-kr').addEventListener('click', function () {
    const wrap = document.getElementById('kr-wrap');
    const row = document.createElement('div');
    row.className = 'form-grid cols-4';
    row.style.borderBottom = '1px solid var(--border-light)';
    row.style.paddingBottom = '12px';
    row.style.marginBottom = '12px';
    row.innerHTML = `
        <div class="form-group">
            <label class="form-label required">عنوان النتيجة</label>
            <input type="text" name="key_results[${krIndex}][title]" class="form-input" required>
        </div>
        <div class="form-group">
            <label class="form-label required">نوع المقياس</label>
            <select name="key_results[${krIndex}][metric_type]" class="form-select" required>
                <option value="percentage">نسبة مئوية</option>
                <option value="number">رقم</option>
                <option value="currency">قيمة مالية</option>
                <option value="boolean">نعم/لا</option>
            </select>
        </div>
        <div class="form-group">
            <label class="form-label required">القيمة المستهدفة</label>
            <input type="number" step="0.01" name="key_results[${krIndex}][target_value]" class="form-input" required>
        </div>
        <div class="form-group">
            <label class="form-label">الوحدة</label>
            <input type="text" name="key_results[${krIndex}][unit]" class="form-input">
        </div>
    `;
    wrap.appendChild(row);
    krIndex++;
});
document.getElementById('add-kr').click();
</script>
@endsection