@extends('layouts.app')

@section('content')
<div class="page-header">
    <div>
        <h1 class="page-title">تقييم 360 جديد</h1>
        <p class="page-subtitle">اختر الموظف والمقيّمين من مختلف الفئات</p>
    </div>
    <div class="page-actions">
        <a href="{{ route('review-360.index') }}" class="btn btn-secondary"><i class="fa-solid fa-arrow-right"></i> رجوع</a>
    </div>
</div>

<form method="POST" action="{{ route('review-360.store') }}">
    @csrf
    <div class="card">
        <div class="card-header"><h3>بيانات التقييم</h3></div>
        <div class="card-body">
            <div class="form-grid cols-3">
                <div class="form-group">
                    <label class="form-label required">الموظف المُقيَّم</label>
                    <select name="employee_id" class="form-select" required>
                        <option value="">اختر الموظف</option>
                        @foreach($employees as $emp)
                            <option value="{{ $emp->id }}">{{ $emp->first_name }} {{ $emp->last_name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="form-group">
                    <label class="form-label required">اسم الدورة</label>
                    <input type="text" name="cycle_name" class="form-input" placeholder="مثال: تقييم 360 - الربع الأول 2026" required>
                </div>
                <div class="form-group">
                    <label class="form-label">موعد الاستحقاق</label>
                    <input type="date" name="due_date" class="form-input">
                </div>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-header"><h3>المقيّمون</h3></div>
        <div class="card-body">
            <div id="reviewers-wrap"></div>
            <button type="button" class="btn btn-secondary" id="add-reviewer"><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('review-360.index') }}" class="btn btn-secondary">إلغاء</a>
    </div>
</form>

<script>
let reviewerIndex = 0;
const users = @json($users->map(fn($u) => ['id' => $u->id, 'name' => $u->name]));

function addReviewerRow() {
    const wrap = document.getElementById('reviewers-wrap');
    const row = document.createElement('div');
    row.className = 'form-grid cols-3';
    row.style.borderBottom = '1px solid var(--border-light)';
    row.style.paddingBottom = '10px';
    row.style.marginBottom = '10px';

    let options = '<option value="">اختر المستخدم</option>';
    users.forEach(function (u) {
        options += `<option value="${u.id}">${u.name}</option>`;
    });

    row.innerHTML = `
        <div class="form-group">
            <label class="form-label required">المقيّم</label>
            <select name="reviewers[${reviewerIndex}][reviewer_id]" class="form-select" required>${options}</select>
        </div>
        <div class="form-group">
            <label class="form-label required">نوع العلاقة</label>
            <select name="reviewers[${reviewerIndex}][reviewer_type]" class="form-select" required>
                <option value="self">تقييم ذاتي</option>
                <option value="manager">المدير المباشر</option>
                <option value="peer">زميل</option>
                <option value="subordinate">مرؤوس</option>
                <option value="client">عميل</option>
            </select>
        </div>
    `;
    wrap.appendChild(row);
    reviewerIndex++;
}

document.getElementById('add-reviewer').addEventListener('click', addReviewerRow);
addReviewerRow();
</script>
@endsection