@extends('layouts.app')

@section('content')
@php
    $isEdit = isset($template);
    $criteria = $isEdit ? ($template->criteria ?? []) : [['name' => '', 'description' => '', 'weight' => '', 'max_score' => 5]];
@endphp

<div class="page-header">
    <div>
        <h1 class="page-title">{{ $isEdit ? 'تعديل قالب التقييم' : 'قالب تقييم جديد' }}</h1>
        <p class="page-subtitle">حدد اسم القالب والمعايير التي سيتم التقييم بناءً عليها</p>
    </div>
    <div class="page-actions">
        <a href="{{ route('appraisal-templates.index') }}" class="btn btn-secondary">
            <i class="fa-solid fa-arrow-right"></i> رجوع
        </a>
    </div>
</div>

<form method="POST" action="{{ $isEdit ? route('appraisal-templates.update', $template) : route('appraisal-templates.store') }}" id="template-form">
    @csrf
    @if($isEdit) @method('PUT') @endif

    <div class="card">
        <div class="card-header"><h3>بيانات القالب</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', $isEdit ? $template->name : '') }}" required>
                </div>
                <div class="form-group">
                    <label class="form-label">الحالة</label>
                    <select name="is_active" class="form-select">
                        <option value="1" {{ (old('is_active', $isEdit ? $template->is_active : 1)) == 1 ? 'selected' : '' }}>مفعّل</option>
                        <option value="0" {{ (old('is_active', $isEdit ? $template->is_active : 1)) == 0 ? 'selected' : '' }}>غير مفعّل</option>
                    </select>
                </div>
                <div class="form-group" style="grid-column: 1 / -1;">
                    <label class="form-label">الوصف</label>
                    <textarea name="description" class="form-textarea">{{ old('description', $isEdit ? $template->description : '') }}</textarea>
                </div>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-header">
            <h3>معايير التقييم</h3>
            <span class="form-hint">مجموع الأوزان يجب أن يساوي 100%</span>
        </div>
        <div class="card-body">
            <div id="criteria-wrap">
                @foreach($criteria as $i => $c)
                <div class="form-grid cols-4 criterion-row" style="border-bottom:1px solid var(--border-light); padding-bottom:12px; margin-bottom:12px;">
                    <div class="form-group">
                        <label class="form-label required">اسم المعيار</label>
                        <input type="text" name="criteria[{{ $i }}][name]" class="form-input" value="{{ $c['name'] ?? '' }}" required>
                    </div>
                    <div class="form-group">
                        <label class="form-label">الوصف</label>
                        <input type="text" name="criteria[{{ $i }}][description]" class="form-input" value="{{ $c['description'] ?? '' }}">
                    </div>
                    <div class="form-group">
                        <label class="form-label required">الوزن (%)</label>
                        <input type="number" step="0.01" name="criteria[{{ $i }}][weight]" class="form-input criterion-weight" value="{{ $c['weight'] ?? '' }}" required>
                    </div>
                    <div class="form-group">
                        <label class="form-label required">الدرجة القصوى</label>
                        <input type="number" step="0.01" name="criteria[{{ $i }}][max_score]" class="form-input" value="{{ $c['max_score'] ?? 5 }}" required>
                    </div>
                </div>
                @endforeach
            </div>
            <button type="button" class="btn btn-secondary" id="add-criterion">
                <i class="fa-solid fa-plus"></i> إضافة معيار
            </button>
            <div class="form-hint" style="margin-top:10px;">إجمالي الوزن الحالي: <strong id="weight-total">0</strong>%</div>
        </div>
    </div>

    <div class="form-actions">
        <button type="submit" class="btn btn-primary">
            <i class="fa-solid fa-check"></i> {{ $isEdit ? 'حفظ التعديلات' : 'إنشاء القالب' }}
        </button>
        <a href="{{ route('appraisal-templates.index') }}" class="btn btn-secondary">إلغاء</a>
    </div>
</form>

<script>
let criterionIndex = {{ count($criteria) }};

function recalcTotal() {
    let total = 0;
    document.querySelectorAll('.criterion-weight').forEach(function (input) {
        total += parseFloat(input.value) || 0;
    });
    document.getElementById('weight-total').textContent = total.toFixed(2);
}

document.getElementById('criteria-wrap').addEventListener('input', function (e) {
    if (e.target.classList.contains('criterion-weight')) {
        recalcTotal();
    }
});

document.getElementById('add-criterion').addEventListener('click', function () {
    const wrap = document.getElementById('criteria-wrap');
    const row = document.createElement('div');
    row.className = 'form-grid cols-4 criterion-row';
    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="criteria[${criterionIndex}][name]" class="form-input" required>
        </div>
        <div class="form-group">
            <label class="form-label">الوصف</label>
            <input type="text" name="criteria[${criterionIndex}][description]" class="form-input">
        </div>
        <div class="form-group">
            <label class="form-label required">الوزن (%)</label>
            <input type="number" step="0.01" name="criteria[${criterionIndex}][weight]" class="form-input criterion-weight" required>
        </div>
        <div class="form-group">
            <label class="form-label required">الدرجة القصوى</label>
            <input type="number" step="0.01" name="criteria[${criterionIndex}][max_score]" class="form-input" value="5" required>
        </div>
    `;
    wrap.appendChild(row);
    criterionIndex++;
});

recalcTotal();
</script>
@endsection