@extends('layouts.app')

@section('content')
<div class="page-header">
    <div>
        <h1 class="page-title">الأهداف والنتائج الرئيسية (OKRs)</h1>
        <p class="page-subtitle">متابعة أهداف الموظفين والأقسام والشركة</p>
    </div>
    <div class="page-actions">
        <a href="{{ route('okrs.create') }}" class="btn btn-primary"><i class="fa-solid fa-plus"></i> هدف جديد</a>
    </div>
</div>

<div class="filter-bar">
    <form method="GET" action="{{ route('okrs.index') }}" class="filter-form">
        <div class="filter-group">
            <label class="form-label">الفترة</label>
            <input type="text" name="period" class="form-input" placeholder="مثال: Q1-2026" value="{{ request('period') }}">
        </div>
        <div class="filter-group">
            <label class="form-label">القسم</label>
            <select name="department_id" class="form-select">
                <option value="">الكل</option>
                @foreach($departments as $dept)
                    <option value="{{ $dept->id }}" {{ request('department_id') == $dept->id ? 'selected' : '' }}>{{ $dept->name }}</option>
                @endforeach
            </select>
        </div>
        <div class="filter-group">
            <label class="form-label">الموظف</label>
            <select name="employee_id" class="form-select">
                <option value="">الكل</option>
                @foreach($employees as $emp)
                    <option value="{{ $emp->id }}" {{ request('employee_id') == $emp->id ? 'selected' : '' }}>{{ $emp->first_name }} {{ $emp->last_name }}</option>
                @endforeach
            </select>
        </div>
        <div class="filter-group">
            <label class="form-label">الحالة</label>
            <select name="status" class="form-select">
                <option value="">الكل</option>
                <option value="draft" {{ request('status') == 'draft' ? 'selected' : '' }}>مسودة</option>
                <option value="active" {{ request('status') == 'active' ? 'selected' : '' }}>نشط</option>
                <option value="completed" {{ request('status') == 'completed' ? 'selected' : '' }}>مكتمل</option>
                <option value="cancelled" {{ request('status') == 'cancelled' ? 'selected' : '' }}>ملغى</option>
            </select>
        </div>
        <div class="filter-group">
            <button type="submit" class="btn btn-primary"><i class="fa-solid fa-filter"></i> تصفية</button>
            <a href="{{ route('okrs.index') }}" class="btn btn-secondary">إعادة تعيين</a>
        </div>
    </form>
</div>

@if($objectives->isEmpty())
    <div class="card"><div class="card-body">
        <div class="empty-state">
            <i class="fa-solid fa-bullseye"></i>
            <p>لا توجد أهداف مطابقة</p>
            <a href="{{ route('okrs.create') }}" class="btn btn-primary">إنشاء هدف جديد</a>
        </div>
    </div></div>
@else
    <div class="stats-grid cols-3">
        @foreach($objectives as $objective)
        <div class="card">
            <div class="card-header">
                <h3>{{ $objective->title }}</h3>
                <span class="status-badge status-{{ $objective->status === 'active' ? 'active' : ($objective->status === 'completed' ? 'active' : ($objective->status === 'cancelled' ? 'expired' : 'draft')) }}">
                    {{ $objective->statusLabel() }}
                </span>
            </div>
            <div class="card-body">
                <p class="form-hint">{{ $objective->categoryLabel() }} • {{ $objective->period }}</p>
                @if($objective->employee)
                    <p class="form-hint"><i class="fa-solid fa-user"></i> {{ $objective->employee->first_name }} {{ $objective->employee->last_name }}</p>
                @endif
                <div style="margin:14px 0;">
                    <div style="display:flex; justify-content:space-between; margin-bottom:6px;">
                        <span class="form-hint">التقدم</span>
                        <strong>{{ number_format($objective->progress_percentage, 0) }}%</strong>
                    </div>
                    <div style="background:var(--border-light); border-radius:var(--radius-sm); overflow:hidden; height:10px;">
                        <div style="background:var(--primary); width:{{ $objective->progress_percentage }}%; height:100%;"></div>
                    </div>
                </div>
                <p class="form-hint">{{ $objective->keyResults->count() }} نتيجة رئيسية</p>
                <div class="action-btns">
                    <a href="{{ route('okrs.show', $objective) }}" class="btn btn-secondary" style="width:100%; justify-content:center;">
                        <i class="fa-solid fa-eye"></i> عرض التفاصيل
                    </a>
                </div>
            </div>
        </div>
        @endforeach
    </div>
    <div class="pagination-wrap">{{ $objectives->links() }}</div>
@endif
@endsection