@extends('layouts.app')
@section('page-title', __('KPIs'))


@section('title', __('KPIs'))

@section('content')
<div class="content-wrapper">
    @include('partials.messages')

    <div class="d-flex justify-content-between align-items-center mb-3">
        <h4 class="mb-0">{{ __('KPIs') }}</h4>
        <div>
            <a href="{{ route('performance.reviews.index') }}" class="btn btn-outline-secondary">
                <i class="fa fa-clipboard-list mr-1"></i> {{ __('Evaluations') }}
            </a>
            <a href="{{ route('performance.users.index') }}" class="btn btn-outline-secondary">
                <i class="fa fa-chart-line mr-1"></i> {{ __('Users & Leaderboard') }}
            </a>
            <a href="{{ route('performance.kpis.create') }}" class="btn btn-primary">
                <i class="fa fa-plus mr-1"></i> {{ __('New KPI') }}
            </a>
        </div>
    </div>

    <div class="card">
        <div class="card-body">
            <form method="GET" action="{{ route('performance.kpis.index') }}" class="row mb-3">
                <div class="col-md-3">
                    <select name="type" class="form-control" onchange="this.form.submit()">
                        <option value="">{{ __('All types') }}</option>
                        <option value="individual" @selected(request('type') === 'individual')>{{ __('Individual') }}</option>
                        <option value="departmental" @selected(request('type') === 'departmental')>{{ __('Departmental') }}</option>
                    </select>
                </div>
                <div class="col-md-3">
                    <select name="status" class="form-control" onchange="this.form.submit()">
                        <option value="">{{ __('All statuses') }}</option>
                        <option value="active" @selected(request('status') === 'active')>{{ __('Active') }}</option>
                        <option value="draft" @selected(request('status') === 'draft')>{{ __('Draft') }}</option>
                        <option value="archived" @selected(request('status') === 'archived')>{{ __('Archived') }}</option>
                    </select>
                </div>
                <div class="col-md-4">
                    <input type="text" name="title" class="form-control" placeholder="{{ __('Search title...') }}" value="{{ request('title') }}">
                </div>
                <div class="col-md-2">
                    <button type="submit" class="btn btn-outline-secondary w-100">{{ __('Filter') }}</button>
                </div>
            </form>

            <table class="table table-hover">
                <thead>
                    <tr>
                        <th>{{ __('Title') }}</th>
                        <th>{{ __('Type') }}</th>
                        <th>{{ __('Status') }}</th>
                        <th>{{ __('Questions') }}</th>
                        <th>{{ __('Assigned Users') }}</th>
                        <th>{{ __('Evaluations') }}</th>
                        <th class="text-right">{{ __('Actions') }}</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($kpis as $kpi)
                        <tr>
                            <td>{{ $kpi->title }}</td>
                            <td>
                                <span class="badge {{ $kpi->type === 'individual' ? 'badge-info' : 'badge-secondary' }}">
                                    {{ ucfirst($kpi->type) }}
                                </span>
                            </td>
                            <td>
                                <span class="badge
                                    @if($kpi->status === 'active') badge-success
                                    @elseif($kpi->status === 'draft') badge-warning
                                    @else badge-dark
                                    @endif
                                ">{{ ucfirst($kpi->status) }}</span>
                            </td>
                            <td>{{ $kpi->questions_count }}</td>
                            <td>{{ $kpi->users_count }}</td>
                            <td>{{ $kpi->performances_count }}</td>
                            <td class="text-right">
                                <a href="{{ route('performance.kpis.assign.edit', $kpi) }}" class="btn btn-sm btn-outline-primary mr-1" title="{{ __('Assign Users') }}">
                                    <i class="fa fa-users"></i>
                                </a>
                                <a href="{{ route('performance.kpis.edit', $kpi) }}" class="btn btn-sm btn-outline-secondary mr-1">
                                    <i class="fa fa-pen"></i>
                                </a>
                                <form action="{{ route('performance.kpis.destroy', $kpi) }}" method="POST" class="d-inline"
                                      onsubmit="return confirm('{{ __('Delete this KPI? This cannot be undone.') }}');">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn btn-sm btn-outline-danger">
                                        <i class="fa fa-trash"></i>
                                    </button>
                                </form>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="7" class="text-center text-muted py-4">{{ __('No KPIs yet.') }}</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>

            {{ $kpis->links() }}
        </div>
    </div>
</div>
@endsection