@extends('layouts.app')

@section('title', $cycle->name)
@section('heading', 'Performance Cycle')

@section('content')
@include('performance.top-submenu')

<div class="max-w-4xl space-y-6">
    @if(session('success'))<div class="rounded-lg border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-800">{{ session('success') }}</div>@endif
    @if(session('error'))<div class="rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-800">{{ session('error') }}</div>@endif

    <x-card>
        <div class="flex flex-wrap items-start justify-between gap-4">
            <div>
                <h1 class="text-xl font-bold text-slate-900">{{ $cycle->name }}</h1>
                <p class="mt-1 text-sm text-slate-600">{{ $cycle->start_date?->format('d M Y') }} – {{ $cycle->end_date?->format('d M Y') }} · <span class="capitalize">{{ $cycle->status }}</span></p>
            </div>
            <div class="flex flex-wrap gap-2">
                @if($cycle->isEditable())
                    <a href="{{ route('performance-cycles.edit', $cycle) }}" class="btn-icon-action btn-icon-action--edit" title="Edit" aria-label="Edit"><i class="bi bi-pencil-square"></i></a>
                    <form action="{{ route('performance-cycles.launch', $cycle) }}" method="post" onsubmit="return confirm('Launch cycle and create pending reviews for all active employees?');">
                        @csrf
                        <button class="rounded-lg bg-primary px-3 py-2 text-sm font-medium text-white">Launch cycle</button>
                    </form>
                @elseif($cycle->status === 'active')
                    <form action="{{ route('performance-cycles.close', $cycle) }}" method="post" onsubmit="return confirm('Close this cycle?');">
                        @csrf
                        <button class="rounded-lg bg-slate-800 px-3 py-2 text-sm font-medium text-white">Close cycle</button>
                    </form>
                @endif
                <a href="{{ route('reports.performance.export', ['cycle_id' => $cycle->id]) }}" class="rounded-lg border border-slate-300 px-3 py-2 text-sm">Export reviews CSV</a>
            </div>
        </div>

        @if($cycle->description)
            <p class="mt-4 text-sm text-slate-600">{{ $cycle->description }}</p>
        @endif

        <div class="mt-6 grid gap-4 sm:grid-cols-3">
            <div class="rounded-lg border border-slate-200 p-3"><p class="text-xs text-slate-500">Total reviews</p><p class="text-xl font-semibold">{{ $cycle->reviews_count }}</p></div>
            <div class="rounded-lg border border-slate-200 p-3"><p class="text-xs text-slate-500">Pending</p><p class="text-xl font-semibold">{{ $pendingReviews }}</p></div>
            <div class="rounded-lg border border-slate-200 p-3"><p class="text-xs text-slate-500">Completed</p><p class="text-xl font-semibold">{{ $completedReviews }}</p></div>
        </div>
    </x-card>
</div>
@endsection