@extends('admin.layouts.app')
@section('title', __('admin.menu_commission_categories'))
@section('heading', __('admin.menu_commission_categories'))
@section('content')
<x-admin.filter-scope>
@can('create', \App\Models\CommissionCategory::class)
<x-admin.page-header
    :title="__('admin.menu_commission_categories')"
    :create-route="route('admin.commission-categories.create')"
    :create-label="__('admin.commission_add_category')"
    :show-filter="true" />
@else
<x-admin.page-header :title="__('admin.menu_commission_categories')" :show-filter="true" />
@endcan



<x-admin.filter-panel>
    @include('admin.partials.search')
</x-admin.filter-panel>
<div class="admin-summary-strip mb-6">
    <div class="admin-card">
        <p class="text-xs text-slate-500">{{ __('admin.commission_summary_active') }}</p>
        <p class="mt-1 text-2xl font-bold text-slate-900">{{ $summary['active_categories'] }}</p>
        <p class="mt-1 text-xs text-slate-400">{{ __('admin.commission_summary_of_total', ['total' => $summary['categories']]) }}</p>
    </div>
    <div class="admin-card">
        <p class="text-xs text-slate-500">{{ __('admin.commission_tab_members') }}</p>
        <p class="mt-1 text-2xl font-bold text-slate-900">{{ $summary['members'] }}</p>
    </div>
    <div class="admin-card">
        <p class="text-xs text-slate-500">{{ __('admin.commission_tab_posts') }}</p>
        <p class="mt-1 text-2xl font-bold text-slate-900">{{ $summary['posts'] }}</p>
    </div>
    <div class="admin-card">
        <p class="text-xs text-slate-500">{{ __('admin.commission_tab_surveys') }}</p>
        <p class="mt-1 text-2xl font-bold text-slate-900">{{ $summary['surveys'] }}</p>
    </div>
</div>
<div class="grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
    @forelse($categories as $item)
    <div class="admin-card flex flex-col gap-4">
        <div class="flex items-start justify-between gap-3">
            <div class="min-w-0">
                <h3 class="truncate text-base font-bold text-slate-900">{{ $item->name_fa }}</h3>
                <p class="mt-0.5 font-mono text-xs text-slate-400">{{ $item->slug }}</p>
            </div>
            <x-admin.status-badge :active="$item->is_active" />
        </div>

        <div class="flex flex-wrap gap-3 text-sm text-slate-600">
            <span>{{ $item->members_count }} {{ __('admin.commission_tab_members') }}</span>
            <span>{{ $item->posts_count }} {{ __('admin.commission_tab_posts') }}</span>
            <span>{{ $item->surveys_count }} {{ __('admin.commission_tab_surveys') }}</span>
        </div>

        <div class="mt-auto flex flex-wrap items-center justify-between gap-2 border-t border-slate-100 pt-3">
            @can('view', $item)
            <a href="{{ route('admin.commission-categories.show', $item) }}" class="admin-btn-primary text-sm">
                {{ __('admin.commission_manage') }}
            </a>
            @else
            <span></span>
            @endcan
            <x-admin.table-actions
                :edit-href="auth()->user()->can('update', $item) ? route('admin.commission-categories.edit', $item) : null"
                :delete-action="auth()->user()->can('delete', $item) ? route('admin.commission-categories.destroy', $item) : null"
                :toggle-action="auth()->user()->can('update', $item) ? route('admin.commission-categories.toggle', $item) : null" />
        </div>
    </div>
    @empty
    <div class="admin-card sm:col-span-2 xl:col-span-3 py-10 text-center text-slate-500">
        {{ __('admin.empty') }}
    </div>
    @endforelse
</div>

<div class="mt-4">{{ $categories->links() }}</div>
</x-admin.filter-scope>
@endsection