@extends('layouts.app')
@section('title', __('KPI blocks'))
@section('page-title', __('KPI blocks'))
@section('page-subtitle', __('The configurable KPI cards displayed on the home page.'))

@section('content')
@include('super-admin._nav')

<div class="card overflow-hidden">
    <div class="px-6 py-4 border-b border-slate-200/70 dark:border-slate-800 flex items-center gap-3">
        <x-icon name="chart" class="w-5 h-5 text-brand-600"/>
        <span class="font-semibold">{{ __('All KPI blocks') }}</span>
        <span class="ms-auto badge-info">{{ $features->count() }}</span>
        <a href="{{ route('super-admin.kpi-features.create') }}" class="btn-primary text-xs">
            <x-icon name="plus" class="w-4 h-4"/> {{ __('Add KPI block') }}
        </a>
    </div>
    <div class="divide-y divide-slate-100 dark:divide-slate-800">
        @forelse($features as $f)
            <div class="px-6 py-4 flex items-center gap-4">
                <div class="w-10 h-10 rounded-lg bg-{{ $f->color }}-100 text-{{ $f->color }}-700 dark:bg-{{ $f->color }}-900/30 dark:text-{{ $f->color }}-300 flex items-center justify-center">
                    <x-icon :name="$f->icon" class="w-5 h-5"/>
                </div>
                <div class="flex-1 min-w-0">
                    <div class="font-semibold truncate">{{ $f->title() }}</div>
                    <div class="text-sm text-slate-500 truncate">{{ $f->summary() }}</div>
                </div>
                <span class="text-xs text-slate-500">#{{ $f->sort }}</span>
                <span class="inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full text-xs font-semibold {{ $f->is_active ? 'bg-emerald-50 text-emerald-700' : 'bg-slate-100 text-slate-500' }}">
                    {{ $f->is_active ? __('Active') : __('Inactive') }}
                </span>
                <a href="{{ route('super-admin.kpi-features.edit', $f) }}" class="btn-secondary text-xs">
                    <x-icon name="edit" class="w-4 h-4"/> {{ __('Edit') }}
                </a>
                <form method="POST" action="{{ route('super-admin.kpi-features.destroy', $f) }}"
                      onsubmit="return confirm('{{ __('Delete this KPI block?') }}')">
                    @csrf @method('DELETE')
                    <button class="btn-ghost text-xs text-rose-600"><x-icon name="trash" class="w-4 h-4"/></button>
                </form>
            </div>
        @empty
            <div class="text-center py-16 text-slate-500">
                <x-icon name="chart" class="w-10 h-10 mx-auto opacity-30 mb-2"/>
                {{ __('No KPI blocks yet.') }}
            </div>
        @endforelse
    </div>
</div>
@endsection