@extends('layouts.app')

@section('title', 'Goals & KPIs')
@section('heading', 'Goals & KPIs')

@section('content')
    @include('performance.top-submenu')
    <x-card>

        <div class="mb-4 flex items-center justify-between">
            <p class="text-sm text-slate-500">Track organizational goals and key performance indicators</p>
            <a href="{{ route('goals.create') }}" class="inline-flex rounded-lg bg-teal-700 px-4 py-2 text-sm font-medium text-white hover:bg-teal-600"><i class="bi bi-plus-lg me-1"></i>Add Goal</a>
        </div>

        <div class="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
            @forelse($goals as $goal)
                <div class="rounded-xl border border-slate-200 p-4">
                    <div class="mb-2 flex items-center justify-between gap-2">
                        <p class="text-sm font-semibold text-slate-900"><i class="bi bi-bullseye me-1 text-teal-700"></i>{{ $goal->title }}</p>
                        <span class="rounded-full px-2 py-0.5 text-xs whitespace-nowrap
                            @if($goal->status === 'on_track') bg-emerald-100 text-emerald-700
                            @elseif($goal->status === 'at_risk') bg-amber-100 text-amber-700
                            @elseif($goal->status === 'behind') bg-red-100 text-red-700
                            @else bg-blue-100 text-blue-700 @endif">
                            {{ ucwords(str_replace('_', ' ', $goal->status)) }}
                        </span>
                    </div>
                    <p class="mb-3 text-xs text-slate-500">{{ $goal->team ?: ($goal->department?->name ?: 'General') }}</p>

                    <p class="mb-1 text-xs text-slate-500">Progress</p>
                    <progress class="mb-1 h-2 w-full overflow-hidden rounded-full [&::-webkit-progress-bar]:bg-slate-200 [&::-webkit-progress-value]:bg-teal-700" max="100" value="{{ min(100, max(0, (int) $goal->progress)) }}"></progress>
                    <p class="mb-3 text-right text-xs text text-slate-500">{{ $goal->progress }}%</p>

                    <div class="grid gap-1 text-xs text-slate-500">
                        <p>Target: {{ $goal->target ?: '—' }}</p>
                        <p>Due: {{ $goal->due_date?->format('n/j/Y') ?? '—' }}</p>
                    </div>

                    <div class="mt-4 flex items-center gap-3 text-sm">
                        <a href="{{ route('goals.edit', $goal) }}" class="btn-icon-action btn-icon-action--edit" title="Edit" aria-label="Edit"><i class="bi bi-pencil-square"></i></a>
                        <form action="{{ route('goals.destroy', $goal) }}" method="POST" class="inline" onsubmit="return confirm('Delete this goal?');">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="btn-icon-action btn-icon-action--delete" title="Delete" aria-label="Delete"><i class="bi bi-trash3"></i></button>
                        </form>
                    </div>
                </div>
            @empty
                <p class="col-span-full rounded-lg border border-dashed border-slate-300 p-6 text-center text-sm text-slate-500">No goals added yet.</p>
            @endforelse
        </div>

        @if($goals->hasPages())<div class="mt-4">{{ $goals->links() }}</div>@endif
    </x-card>
@endsection