@extends('layouts.app')

@section('title', 'الأهداف والنتائج الرئيسية OKRs')

@section('content')
<div class="page-header">
    <h1 class="page-title">الأهداف والنتائج الرئيسية (OKRs)</h1>
</div>

<div class="stats-grid" style="margin-bottom: 24px;">
    <div class="stat-card">
        <div class="stat-number">{{ $okrs->count() }}</div>
        <div class="stat-label">إجمالي الأهداف</div>
    </div>
    <div class="stat-card">
        <div class="stat-number">{{ $okrs->where('status', 'active')->count() }}</div>
        <div class="stat-label">أهداف نشطة</div>
    </div>
    <div class="stat-card">
        <div class="stat-number">{{ $okrs->count() > 0 ? round($okrs->avg('progress')) : 0 }}%</div>
        <div class="stat-label">متوسط التقدم</div>
    </div>
</div>

<div class="grid-2">
    {{-- OKRs List --}}
    <div class="card">
        <div class="card-header"><h3>الأهداف</h3></div>
        @if($okrs->count())
        <div style="padding: 16px; display: flex; flex-direction: column; gap: 12px;">
            @foreach($okrs as $okr)
            <div style="border: 1px solid var(--color-border, #e2e8f0); border-radius: 10px; padding: 16px;">
                <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px;">
                    <div>
                        <div style="font-weight: 600; color: var(--color-text, #1B2A4A); font-size: 0.95rem;">{{ $okr->objective }}</div>
                        <div style="font-size: 0.8rem; color: var(--color-text-muted, #94a3b8); margin-top: 2px;">{{ $okr->quarter ?? '' }}</div>
                    </div>
                    <span class="status-badge status-{{ ($okr->status ?? '') === 'active' ? 'active' : 'inactive' }}">
                        {{ ($okr->status ?? '') === 'active' ? 'نشط' : 'مكتمل' }}
                    </span>
                </div>
                <div style="margin-bottom: 8px; font-size: 0.85rem; color: var(--color-text-secondary, #64748b);">
                    {{ $okr->key_results ?? '' }}
                </div>
                <div style="display: flex; align-items: center; gap: 10px;">
                    <div style="flex: 1; height: 8px; background: var(--color-surface-alt, #e2e8f0); border-radius: 4px; overflow: hidden;">
                        <div style="height: 100%; width: {{ $okr->progress ?? 0 }}%; background: {{ ($okr->progress ?? 0) >= 70 ? '#059669' : (($okr->progress ?? 0) >= 40 ? '#f59e0b' : '#3b82f6') }}; border-radius: 4px; transition: width 0.3s;"></div>
                    </div>
                    <span style="font-weight: 600; font-size: 0.85rem; min-width: 40px;">{{ $okr->progress ?? 0 }}%</span>
                </div>
                <form method="POST" action="{{ route('okr.update-key-result', $okr->id) }}" style="margin-top: 8px; display: flex; gap: 6px; align-items: center;">
                    @csrf
                    <input type="range" name="progress" min="0" max="100" value="{{ $okr->progress ?? 0 }}" style="flex: 1;" oninput="this.nextElementSibling.textContent = this.value + '%'">
                    <span style="font-size: 0.8rem; min-width: 36px;">{{ $okr->progress ?? 0 }}%</span>
                    <button type="submit" class="btn btn-secondary" style="font-size: 0.75rem; padding: 4px 10px;">تحديث</button>
                </form>
            </div>
            @endforeach
        </div>
        @else
        <div style="padding: 24px; text-align: center; color: var(--color-text-muted, #94a3b8);">لا توجد أهداف</div>
        @endif
    </div>

    {{-- Add OKR Form --}}
    <div class="card">
        <div class="card-header"><h3>إضافة هدف جديد</h3></div>
        <div style="padding: 20px;">
            <form method="POST" action="{{ route('okr.store') }}">
                @csrf
                <div class="form-grid">
                    <div>
                        <label class="form-label">الهدف (Objective)</label>
                        <input type="text" name="objective" class="form-input" required placeholder="مثال: زيادة رضا الموظفين بنسبة 20%">
                    </div>
                    <div>
                        <label class="form-label">النتائج الرئيسية (Key Results)</label>
                        <textarea name="key_results" class="form-input" rows="4" required placeholder="مثال:&#10;1. إجراء استبيان ربع سنوي&#10;2. تنفيذ 3 مبادرات تحسين&#10;3. خفض معدل الدوران إلى أقل من 10%"></textarea>
                    </div>
                    <div>
                        <label class="form-label">الربع</label>
                        <select name="quarter" class="form-select" required>
                            <option value="Q1 {{ date('Y') }}">الربع الأول {{ date('Y') }}</option>
                            <option value="Q2 {{ date('Y') }}">الربع الثاني {{ date('Y') }}</option>
                            <option value="Q3 {{ date('Y') }}">الربع الثالث {{ date('Y') }}</option>
                            <option value="Q4 {{ date('Y') }}">الربع الرابع {{ date('Y') }}</option>
                        </select>
                    </div>
                </div>
                <div style="margin-top: 16px;">
                    <button type="submit" class="btn btn-primary">إضافة الهدف</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection