@extends('layouts.app')

@section('content')
<div class="page-header">
    <div>
        <h1 class="page-title">{{ $objective->title }}</h1>
        <p class="page-subtitle">{{ $objective->categoryLabel() }} • {{ $objective->period }}</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>

<div class="stats-grid cols-4">
    <div class="stat-card">
        <div class="stat-icon"><i class="fa-solid fa-chart-line"></i></div>
        <div class="stat-value">{{ number_format($objective->progress_percentage, 0) }}%</div>
        <div class="stat-label">نسبة الإنجاز</div>
    </div>
    <div class="stat-card">
        <div class="stat-icon"><i class="fa-solid fa-list-check"></i></div>
        <div class="stat-value">{{ $objective->keyResults->count() }}</div>
        <div class="stat-label">النتائج الرئيسية</div>
    </div>
    <div class="stat-card">
        <div class="stat-icon"><i class="fa-solid fa-user"></i></div>
        <div class="stat-value">{{ $objective->employee->first_name ?? '—' }} {{ $objective->employee->last_name ?? '' }}</div>
        <div class="stat-label">الموظف المسؤول</div>
    </div>
    <div class="stat-card">
        <div class="stat-icon"><i class="fa-solid fa-circle-info"></i></div>
        <div class="stat-value"><span class="status-badge status-active">{{ $objective->statusLabel() }}</span></div>
        <div class="stat-label">الحالة</div>
    </div>
</div>

<div class="card">
    <div class="card-header">
        <h3>تحديث نسبة الإنجاز</h3>
    </div>
    <div class="card-body">
        <form method="POST" action="{{ route('okrs.updateProgress', $objective) }}" class="filter-form">
            @csrf
            <div class="filter-group">
                <label class="form-label">النسبة (%)</label>
                <input type="number" name="progress_percentage" min="0" max="100" step="1" class="form-input" value="{{ $objective->progress_percentage }}">
            </div>
            <div class="filter-group">
                <button type="submit" class="btn btn-primary">تحديث</button>
            </div>
        </form>
    </div>
</div>

<div class="card">
    <div class="card-header">
        <h3>النتائج الرئيسية</h3>
    </div>
    <div class="card-body">
        @if($objective->keyResults->isEmpty())
            <div class="empty-state">
                <i class="fa-solid fa-list"></i>
                <p>لا توجد نتائج رئيسية بعد</p>
            </div>
        @else
            @foreach($objective->keyResults as $kr)
            <div style="border-bottom:1px solid var(--border-light); padding:14px 0;">
                <div style="display:flex; justify-content:space-between; align-items:center;">
                    <strong>{{ $kr->title }}</strong>
                    <span class="status-badge status-{{ $kr->status === 'completed' ? 'active' : ($kr->status === 'behind' || $kr->status === 'at_risk' ? 'danger' : 'pending') }}">{{ $kr->statusLabel() }}</span>
                </div>
                <div style="background:var(--border-light); border-radius:var(--radius-sm); overflow:hidden; height:8px; margin:8px 0;">
                    <div style="background:var(--success); width:{{ $kr->progressPercentage() }}%; height:100%;"></div>
                </div>
                <p class="form-hint">{{ $kr->current_value }} / {{ $kr->target_value }} {{ $kr->unit }} ({{ $kr->progressPercentage() }}%)</p>
                <form method="POST" action="{{ route('okrs.keyResults.update', $kr) }}" class="filter-form">
                    @csrf
                    <div class="filter-group">
                        <label class="form-label">القيمة الحالية</label>
                        <input type="number" step="0.01" name="current_value" class="form-input" value="{{ $kr->current_value }}">
                    </div>
                    <div class="filter-group">
                        <label class="form-label">الحالة</label>
                        <select name="status" class="form-select">
                            <option value="not_started" {{ $kr->status == 'not_started' ? 'selected' : '' }}>لم يبدأ</option>
                            <option value="on_track" {{ $kr->status == 'on_track' ? 'selected' : '' }}>على المسار</option>
                            <option value="at_risk" {{ $kr->status == 'at_risk' ? 'selected' : '' }}>في خطر</option>
                            <option value="behind" {{ $kr->status == 'behind' ? 'selected' : '' }}>متأخر</option>
                            <option value="completed" {{ $kr->status == 'completed' ? 'selected' : '' }}>مكتمل</option>
                        </select>
                    </div>
                    <div class="filter-group">
                        <button type="submit" class="btn btn-secondary btn-sm">حفظ</button>
                    </div>
                </form>
            </div>
            @endforeach
        @endif

        <div style="margin-top:16px;">
            <button type="button" class="btn btn-secondary" onclick="document.getElementById('add-kr-form').classList.toggle('hidden-form')">
                <i class="fa-solid fa-plus"></i> إضافة نتيجة رئيسية
            </button>
            <form id="add-kr-form" method="POST" action="{{ route('okrs.keyResults.store', $objective) }}" style="margin-top:12px;">
                @csrf
                <div class="form-grid cols-4">
                    <div class="form-group">
                        <label class="form-label required">العنوان</label>
                        <input type="text" name="title" class="form-input" required>
                    </div>
                    <div class="form-group">
                        <label class="form-label required">نوع المقياس</label>
                        <select name="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="target_value" class="form-input" required>
                    </div>
                    <div class="form-group">
                        <label class="form-label">الوحدة</label>
                        <input type="text" name="unit" class="form-input">
                    </div>
                </div>
                <button type="submit" class="btn btn-primary">حفظ النتيجة</button>
            </form>
        </div>
    </div>
</div>

@if($objective->children->isNotEmpty())
<div class="card">
    <div class="card-header"><h3>أهداف فرعية متتالية</h3></div>
    <div class="card-body">
        <div class="table-responsive">
            <table class="data-table">
                <thead><tr><th>العنوان</th><th>التقدم</th><th>الحالة</th></tr></thead>
                <tbody>
                    @foreach($objective->children as $child)
                    <tr>
                        <td><a href="{{ route('okrs.show', $child) }}">{{ $child->title }}</a></td>
                        <td>{{ number_format($child->progress_percentage, 0) }}%</td>
                        <td><span class="status-badge status-active">{{ $child->statusLabel() }}</span></td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>
@endif

<style>.hidden-form{display:none;}</style>
@endsection