@extends('layouts.app')
@section('title', 'قالب تهيئة جديد')

@section('content')
<div class="page-header">
    <div>
        <h1 class="page-title">إنشاء قالب تهيئة</h1>
    </div>
    <div class="page-actions">
        <a href="{{ route('onboarding.templates') }}" class="btn btn-secondary"><i class="fas fa-arrow-right"></i> العودة</a>
    </div>
</div>

<form action="{{ route('onboarding.store-template') }}" method="POST">
    @csrf
    <div class="card" style="margin-bottom: 1rem;">
        <div class="card-header"><h3 class="card-title">بيانات القالب</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" required placeholder="مثال: تهيئة موظف جديد — عام">
                </div>
                <div class="form-group">
                    <label class="form-label">القسم (اختياري)</label>
                    <input type="text" name="department_scope" class="form-input" placeholder="اتركه فارغاً للقالب العام">
                </div>
                <div class="form-group" style="grid-column: 1 / -1;">
                    <label class="form-label">الوصف</label>
                    <textarea name="description" class="form-textarea" rows="2"></textarea>
                </div>
            </div>
        </div>
    </div>

    <div class="card" style="margin-bottom: 1rem;">
        <div class="card-header">
            <h3 class="card-title">المهام</h3>
            <button type="button" class="btn btn-secondary" style="font-size: 0.85rem;" onclick="addItem()"><i class="fas fa-plus"></i> إضافة مهمة</button>
        </div>
        <div class="card-body" id="itemsContainer">
            <div class="template-item" style="border: 1px solid var(--border-light); border-radius: var(--radius); padding: 1rem; margin-bottom: 0.5rem;">
                <div class="form-grid cols-4">
                    <div class="form-group" style="grid-column: span 2;">
                        <label class="form-label required">عنوان المهمة</label>
                        <input type="text" name="items[0][title]" class="form-input" required>
                    </div>
                    <div class="form-group">
                        <label class="form-label">الفئة</label>
                        <select name="items[0][category]" class="form-select">
                            <option value="general">عام</option>
                            <option value="documents">مستندات</option>
                            <option value="training">تدريب</option>
                            <option value="equipment">أجهزة</option>
                            <option value="access">صلاحيات</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="form-label">المدة (أيام)</label>
                        <input type="number" name="items[0][due_days]" class="form-input" value="7" min="1">
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="form-actions">
        <button type="submit" class="btn btn-primary"><i class="fas fa-save"></i> حفظ القالب</button>
    </div>
</form>

<script>
var itemIndex = 1;
function addItem() {
    var container = document.getElementById('itemsContainer');
    var html = '<div class="template-item" style="border: 1px solid var(--border-light); border-radius: var(--radius); padding: 1rem; margin-bottom: 0.5rem;">' +
        '<div class="form-grid cols-4">' +
        '<div class="form-group" style="grid-column: span 2;"><label class="form-label required">عنوان المهمة</label><input type="text" name="items['+itemIndex+'][title]" class="form-input" required></div>' +
        '<div class="form-group"><label class="form-label">الفئة</label><select name="items['+itemIndex+'][category]" class="form-select"><option value="general">عام</option><option value="documents">مستندات</option><option value="training">تدريب</option><option value="equipment">أجهزة</option><option value="access">صلاحيات</option></select></div>' +
        '<div class="form-group"><label class="form-label">المدة (أيام)</label><input type="number" name="items['+itemIndex+'][due_days]" class="form-input" value="7" min="1"></div>' +
        '</div></div>';
    container.insertAdjacentHTML('beforeend', html);
    itemIndex++;
}
</script>
@endsection