@extends('layouts.app')

@section('content')
    <x-common.page-breadcrumb :pageTitle="$title ?? 'Riwayat & Proses Produksi'" />

    @php
        $totalOrders = method_exists($orders, 'total') ? $orders->total() : $orders->count();

        $summary = $summary ?? [
            'total_finished' => $totalOrders,
            'total_picked_up' => 0,
            'avg_duration_text' => '-',
            'today_finished' => 0,
        ];

        $topOperatorMonth = $topOperatorMonth ?? null;
        $topDesignerMonth = $topDesignerMonth ?? null;
        $topFinishingMonth = $topFinishingMonth ?? null;

        $performanceStats = collect($performanceStats ?? []);
        $operators = $operators ?? collect();
        $designers = $designers ?? collect();
        $finishingOperators = $finishingOperators ?? collect();

        $formatDuration = function ($start, $finish) {
            if (!$start || !$finish) return '-';

            $duration = $start->diff($finish);
            $text = '';

            if ($duration->h > 0) $text .= $duration->h . 'j ';
            if ($duration->i > 0) $text .= $duration->i . 'm';

            return trim($text) ?: '< 1m';
        };


        $productionStatusMeta = function ($order) {
            $pickedUpAt = data_get($order, 'picked_up_at');
            $finishedAt = data_get($order, 'finished_at');
            $finishingAt = data_get($order, 'finishing_started_at') ?? data_get($order, 'started_finishing_at');
            $startedAt = data_get($order, 'started_at');
            $designerId = data_get($order, 'designer_id');
            $operatorId = data_get($order, 'operator_id');
            $finishingOperatorId = data_get($order, 'finishing_operator_id');
            $rawStatus = strtolower((string) (data_get($order, 'production_status') ?? data_get($order, 'status') ?? ''));

            if ($pickedUpAt || in_array($rawStatus, ['picked_up', 'taken', 'diambil', 'sudah_diambil'], true)) {
                return [
                    'label' => 'Sudah Diambil',
                    'step' => 'Order sudah diserahkan ke pelanggan',
                    'class' => 'bg-success-100 text-success-700 dark:bg-success-500/20 dark:text-success-400',
                    'dot' => 'bg-success-500',
                ];
            }

            if ($finishedAt || in_array($rawStatus, ['finished', 'completed', 'done', 'selesai'], true)) {
                return [
                    'label' => 'Selesai',
                    'step' => 'Produksi selesai, menunggu diambil',
                    'class' => 'bg-blue-light-100 text-blue-light-700 dark:bg-blue-light-500/20 dark:text-blue-light-400',
                    'dot' => 'bg-blue-light-500',
                ];
            }

            if ($finishingAt || $finishingOperatorId || str_contains($rawStatus, 'finishing')) {
                return [
                    'label' => 'Proses Finishing',
                    'step' => 'Sedang dikerjakan bagian finishing',
                    'class' => 'bg-purple-100 text-purple-700 dark:bg-purple-500/20 dark:text-purple-400',
                    'dot' => 'bg-purple-500',
                ];
            }

            if ($startedAt || $operatorId || str_contains($rawStatus, 'print') || str_contains($rawStatus, 'cetak') || str_contains($rawStatus, 'process')) {
                return [
                    'label' => 'Proses Cetak',
                    'step' => 'Sedang dikerjakan operator mesin',
                    'class' => 'bg-warning-100 text-warning-700 dark:bg-warning-500/20 dark:text-warning-400',
                    'dot' => 'bg-warning-500',
                ];
            }

            if ($designerId || str_contains($rawStatus, 'design') || str_contains($rawStatus, 'desain')) {
                return [
                    'label' => 'Proses Desain',
                    'step' => 'Sedang dikerjakan designer',
                    'class' => 'bg-brand-100 text-brand-700 dark:bg-brand-500/20 dark:text-brand-400',
                    'dot' => 'bg-brand-500',
                ];
            }

            if (in_array($rawStatus, ['cancelled', 'canceled', 'batal'], true)) {
                return [
                    'label' => 'Dibatalkan',
                    'step' => 'Order dibatalkan',
                    'class' => 'bg-error-100 text-error-700 dark:bg-error-500/20 dark:text-error-400',
                    'dot' => 'bg-error-500',
                ];
            }

            return [
                'label' => 'Menunggu Proses',
                'step' => 'Belum mulai produksi',
                'class' => 'bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-300',
                'dot' => 'bg-gray-400',
            ];
        };

        $productionStageOptions = [
            '' => 'Semua Status Proses',
            'waiting' => 'Menunggu Proses',
            'design' => 'Proses Desain',
            'printing' => 'Proses Cetak',
            'finishing' => 'Proses Finishing',
            'finished' => 'Selesai',
            'picked_up' => 'Sudah Diambil',
        ];

        $insightText = 'Belum ada insight performa bulan ini.';
        if ($topOperatorMonth && data_get($topOperatorMonth, 'name')) {
            $insightText = data_get($topOperatorMonth, 'name') . ' memimpin performa operator bulan ini dengan ' . data_get($topOperatorMonth, 'total', 0) . ' pekerjaan selesai.';
        }
    @endphp

    {{-- AI Summary --}}
    <div class="mb-6 grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-4">
        <div class="rounded-2xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-white/[0.03]">
            <p class="text-sm text-gray-500 dark:text-gray-400">Total Order Ditampilkan</p>
            <h3 class="mt-2 text-2xl font-bold text-gray-900 dark:text-white">{{ number_format($summary['total_finished'] ?? 0) }}</h3>
            <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">Termasuk proses berjalan & selesai</p>
        </div>

        <div class="rounded-2xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-white/[0.03]">
            <p class="text-sm text-gray-500 dark:text-gray-400">Sudah Diambil</p>
            <h3 class="mt-2 text-2xl font-bold text-success-600">{{ number_format($summary['total_picked_up'] ?? 0) }}</h3>
            <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">Order selesai yang sudah pickup</p>
        </div>

        <div class="rounded-2xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-white/[0.03]">
            <p class="text-sm text-gray-500 dark:text-gray-400">Rata-rata Durasi Produksi</p>
            <h3 class="mt-2 text-2xl font-bold text-brand-600">{{ $summary['avg_duration_text'] ?? '-' }}</h3>
            <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">Dari mulai cetak sampai selesai</p>
        </div>

        <div class="rounded-2xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-white/[0.03]">
            <p class="text-sm text-gray-500 dark:text-gray-400">Selesai Hari Ini</p>
            <h3 class="mt-2 text-2xl font-bold text-blue-light-600">{{ number_format($summary['today_finished'] ?? 0) }}</h3>
            <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">Output produksi hari ini</p>
        </div>
    </div>

    {{-- AI Insight --}}
    <div class="mb-6 overflow-hidden rounded-2xl border border-brand-200 bg-gradient-to-r from-brand-50 via-white to-blue-light-50 dark:border-brand-800 dark:from-brand-500/10 dark:via-white/[0.03] dark:to-blue-light-500/10">
        <div class="flex flex-col gap-4 px-5 py-5 lg:flex-row lg:items-center lg:justify-between">
            <div>
                <p class="text-xs font-semibold uppercase tracking-wider text-brand-600 dark:text-brand-400">AI Performance Insight</p>
                <h3 class="mt-1 text-lg font-semibold text-gray-900 dark:text-white">Ringkasan Performa Tim Produksi</h3>
                <p class="mt-2 text-sm text-gray-600 dark:text-gray-300">
                    {{ $insightText }}
                </p>
            </div>
            <a href="{{ route('produksi.index') }}"
               class="inline-flex items-center gap-2 rounded-xl bg-white px-4 py-2 text-sm font-medium text-brand-600 shadow-sm ring-1 ring-inset ring-brand-200 hover:bg-brand-50 dark:bg-gray-900 dark:text-brand-400 dark:ring-brand-800 dark:hover:bg-gray-800">
                <svg class="size-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
                </svg>
                Kembali ke Antrian Produksi
            </a>
        </div>
    </div>

    {{-- Top Performer Cards --}}
    <div class="mb-6 grid grid-cols-1 gap-4 lg:grid-cols-3">
        <div class="rounded-2xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-white/[0.03]">
            <p class="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">Top Designer Bulan Ini</p>
            <div class="mt-3">
                <h4 class="text-lg font-bold text-gray-900 dark:text-white">{{ data_get($topDesignerMonth, 'name', '-') }}</h4>
                <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">{{ number_format(data_get($topDesignerMonth, 'total', 0)) }} pekerjaan</p>
            </div>
        </div>

        <div class="rounded-2xl border border-brand-200 bg-brand-50 p-5 dark:border-brand-800 dark:bg-brand-500/10">
            <p class="text-xs font-semibold uppercase tracking-wide text-brand-700 dark:text-brand-400">Top Operator Mesin Bulan Ini</p>
            <div class="mt-3">
                <h4 class="text-lg font-bold text-brand-900 dark:text-white">{{ data_get($topOperatorMonth, 'name', '-') }}</h4>
                <p class="mt-1 text-sm text-brand-700 dark:text-brand-300">{{ number_format(data_get($topOperatorMonth, 'total', 0)) }} pekerjaan</p>
            </div>
        </div>

        <div class="rounded-2xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-white/[0.03]">
            <p class="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">Top Operator Finishing Bulan Ini</p>
            <div class="mt-3">
                <h4 class="text-lg font-bold text-gray-900 dark:text-white">{{ data_get($topFinishingMonth, 'name', '-') }}</h4>
                <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">{{ number_format(data_get($topFinishingMonth, 'total', 0)) }} pekerjaan</p>
            </div>
        </div>
    </div>

    <div class="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
        <div class="border-b border-gray-200 px-5 py-4 dark:border-gray-800">
            <div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
                <div>
                    <h3 class="text-lg font-semibold text-gray-800 dark:text-white/90">Riwayat & Proses Produksi</h3>
                    <p class="text-sm text-gray-500 dark:text-gray-400">Pantau order yang sedang diproses, finishing, selesai, hingga sudah diambil.</p>
                </div>
            </div>
        </div>

        {{-- Filter --}}
        <div class="border-b border-gray-200 px-5 py-4 dark:border-gray-800">
            <form method="GET" class="grid grid-cols-1 gap-4 xl:grid-cols-7">
                <div class="xl:col-span-2">
                    <x-form.input
                        name="search"
                        label="Cari"
                        placeholder="Invoice, pelanggan, file..."
                        :value="request('search')"
                    />
                </div>

                <div>
                    <x-form.date-picker
                        name="date"
                        label="Tanggal"
                        placeholder="Pilih tanggal"
                        :defaultDate="request('date')"
                    />
                </div>

                <div>
                    <x-form.select
                        name="pickup"
                        label="Pengambilan"
                        placeholder="Semua"
                        :value="request('pickup')"
                        :options="[
                            'not_picked_up' => 'Belum Diambil',
                            'picked_up' => 'Sudah Diambil',
                        ]"
                    />
                </div>

                <div>
                    <x-form.select
                        name="production_stage"
                        label="Status Proses"
                        placeholder="Semua Status"
                        :value="request('production_stage')"
                        :options="$productionStageOptions"
                    />
                </div>

                <div>
                    <x-form.select
                        name="designer_id"
                        label="Designer"
                        placeholder="Semua Designer"
                        :value="request('designer_id')"
                        :options="$designers->pluck('name', 'id')->toArray()"
                    />
                </div>

                <div>
                    <x-form.select
                        name="operator_id"
                        label="Operator Mesin"
                        placeholder="Semua Operator"
                        :value="request('operator_id')"
                        :options="$operators->pluck('name', 'id')->toArray()"
                    />
                </div>

                <div>
                    <x-form.select
                        name="finishing_operator_id"
                        label="Operator Finishing"
                        placeholder="Semua Finishing"
                        :value="request('finishing_operator_id')"
                        :options="$finishingOperators->pluck('name', 'id')->toArray()"
                    />
                </div>

                <div class="xl:col-span-7 flex flex-wrap items-center gap-3">
                    <button type="submit" class="inline-flex h-11 items-center rounded-lg bg-gray-100 px-4 text-sm font-medium text-gray-700 hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700">
                        Filter
                    </button>

                    <a href="{{ route('produksi.history') }}" class="inline-flex h-11 items-center rounded-lg border border-gray-300 px-4 text-sm font-medium text-gray-700 hover:bg-gray-50 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-800">
                        Reset
                    </a>
                </div>
            </form>
        </div>

        {{-- Data table --}}
        <div class="overflow-x-auto">
            <table class="w-full min-w-[1300px]">
                <thead>
                    <tr class="border-b border-gray-200 dark:border-gray-800">
                        <th class="px-5 py-3 text-left text-sm font-medium text-gray-500 dark:text-gray-400">Invoice</th>
                        <th class="px-5 py-3 text-left text-sm font-medium text-gray-500 dark:text-gray-400">File</th>
                        <th class="px-5 py-3 text-left text-sm font-medium text-gray-500 dark:text-gray-400">Pelanggan</th>
                        <th class="px-5 py-3 text-left text-sm font-medium text-gray-500 dark:text-gray-400">Designer</th>
                        <th class="px-5 py-3 text-left text-sm font-medium text-gray-500 dark:text-gray-400">Operator Mesin</th>
                        <th class="px-5 py-3 text-left text-sm font-medium text-gray-500 dark:text-gray-400">Operator Finishing</th>
                        <th class="px-5 py-3 text-left text-sm font-medium text-gray-500 dark:text-gray-400">Status Proses</th>
                        <th class="px-5 py-3 text-left text-sm font-medium text-gray-500 dark:text-gray-400">Pembayaran / Pickup</th>
                        <th class="px-5 py-3 text-left text-sm font-medium text-gray-500 dark:text-gray-400">Waktu</th>
                        <th class="px-5 py-3 text-left text-sm font-medium text-gray-500 dark:text-gray-400">Aksi</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-200 dark:divide-gray-800">
                    @forelse($orders as $order)
                        <tr class="hover:bg-gray-50 dark:hover:bg-white/[0.02]">
                            <td class="px-5 py-4 align-top">
                                <span class="text-sm font-semibold text-gray-800 dark:text-white/90">{{ $order->invoice_number }}</span>
                                @if(!empty($order->size) || !empty($order->qty))
                                    <br>
                                    <span class="text-xs text-gray-500">
                                        {{ $order->size ?? '-' }} @if(!empty($order->qty)) | {{ $order->qty }} pcs @endif
                                    </span>
                                @endif
                            </td>

                            <td class="px-5 py-4 align-top">
                                <div class="text-sm font-semibold text-gray-800 dark:text-white/90 break-words whitespace-normal">
                                    {{ $order->file_name ?? '-' }}
                                </div>
                            </td>

                            <td class="px-5 py-4 align-top text-sm text-gray-800 dark:text-white/90">
                                {{ $order->customer_name }}
                            </td>

                            <td class="px-5 py-4 align-top text-sm text-gray-600 dark:text-gray-300">
                                {{ $order->designer->name ?? '-' }}
                            </td>

                            <td class="px-5 py-4 align-top text-sm text-gray-600 dark:text-gray-300">
                                {{ $order->operator->name ?? '-' }}
                            </td>

                            <td class="px-5 py-4 align-top text-sm text-gray-600 dark:text-gray-300">
                                {{ $order->finishingOperator->name ?? '-' }}
                            </td>

                            @php
                                $processMeta = $productionStatusMeta($order);
                            @endphp
                            <td class="px-5 py-4 align-top">
                                <div class="flex flex-col gap-2">
                                    <span class="inline-flex w-fit items-center gap-2 rounded-full px-3 py-1 text-xs font-semibold {{ $processMeta['class'] }}">
                                        <span class="size-2 rounded-full {{ $processMeta['dot'] }}"></span>
                                        {{ $processMeta['label'] }}
                                    </span>
                                    <span class="max-w-[220px] text-xs text-gray-500 dark:text-gray-400">
                                        {{ $processMeta['step'] }}
                                    </span>
                                </div>
                            </td>

                            <td class="px-5 py-4 align-top">
                                <div class="flex flex-col gap-1">
                                    <span class="inline-flex w-fit rounded-full px-2 py-0.5 text-xs font-medium {{ $order->getPaymentStatusBadgeClass() }}">
                                        {{ $order->getPaymentStatusLabel() }}
                                    </span>
                                    <span class="inline-flex w-fit rounded-full px-2 py-0.5 text-xs font-medium {{ $order->getPickupStatusBadgeClass() }}">
                                        {{ $order->getPickupStatusLabel() }}
                                    </span>
                                </div>
                            </td>

                            <td class="px-5 py-4 align-top">
                                <div class="text-sm text-gray-800 dark:text-white/90">
                                    @if($order->finished_at)
                                        Selesai: {{ $order->finished_at?->format('d M Y H:i') }}
                                    @elseif($order->started_at)
                                        Mulai: {{ $order->started_at?->format('d M Y H:i') }}
                                    @else
                                        -
                                    @endif
                                </div>
                                <div class="mt-1 text-xs text-gray-500">
                                    Durasi:
                                    @if($order->finished_at)
                                        {{ $formatDuration($order->started_at, $order->finished_at) }}
                                    @elseif($order->started_at)
                                        {{ $formatDuration($order->started_at, now()) }}
                                    @else
                                        -
                                    @endif
                                </div>
                            </td>

                            <td class="px-5 py-4 align-top">
                                <div class="flex items-center gap-2">
                                    @if(auth()->user()->isOperator())
                                        <a href="{{ route('produksi.show', $order) }}" class="text-gray-500 hover:text-brand-500" title="Lihat Detail">
                                            <svg class="size-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                                            </svg>
                                        </a>
                                    @else
                                        <a href="{{ route('orders.show', $order) }}" class="text-gray-500 hover:text-brand-500" title="Lihat Detail">
                                            <svg class="size-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                                            </svg>
                                        </a>

                                        @if($order->canMarkAsPickedUp())
                                            <form action="{{ route('orders.mark-picked-up', $order) }}" method="POST" class="inline">
                                                @csrf
                                                <button type="submit" class="text-success-500 hover:text-success-600" title="Tandai Sudah Diambil">
                                                    <svg class="size-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                                                    </svg>
                                                </button>
                                            </form>
                                        @endif
                                    @endif
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="10" class="px-5 py-10 text-center text-sm text-gray-500 dark:text-gray-400">
                                Tidak ada data riwayat produksi.
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        @if($orders->hasPages())
            <div class="border-t border-gray-200 px-5 py-4 dark:border-gray-800">
                {{ $orders->links() }}
            </div>
        @endif
    </div>

    {{-- Leaderboard --}}
    <div class="mt-6 rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
        <div class="border-b border-gray-200 px-5 py-4 dark:border-gray-800">
            <div class="flex items-center justify-between">
                <div>
                    <h3 class="text-lg font-semibold text-gray-800 dark:text-white/90">Performa Karyawan</h3>
                    <p class="text-sm text-gray-500 dark:text-gray-400">Leaderboard operator berdasarkan output kerja.</p>
                </div>
                <span class="rounded-full bg-brand-50 px-3 py-1 text-xs font-medium text-brand-700 dark:bg-brand-500/10 dark:text-brand-400">
                    Live Summary
                </span>
            </div>
        </div>

        <div class="overflow-x-auto">
            <table class="w-full min-w-[900px]">
                <thead>
                    <tr class="border-b border-gray-200 dark:border-gray-800">
                        <th class="px-5 py-3 text-left text-sm font-medium text-gray-500 dark:text-gray-400">Rank</th>
                        <th class="px-5 py-3 text-left text-sm font-medium text-gray-500 dark:text-gray-400">Nama</th>
                        <th class="px-5 py-3 text-left text-sm font-medium text-gray-500 dark:text-gray-400">Hari Ini</th>
                        <th class="px-5 py-3 text-left text-sm font-medium text-gray-500 dark:text-gray-400">Bulan Ini</th>
                        <th class="px-5 py-3 text-left text-sm font-medium text-gray-500 dark:text-gray-400">Total</th>
                        <th class="px-5 py-3 text-left text-sm font-medium text-gray-500 dark:text-gray-400">Rata-rata Durasi</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-200 dark:divide-gray-800">
                    @forelse($performanceStats as $index => $staff)
                        <tr class="hover:bg-gray-50 dark:hover:bg-white/[0.02]">
                            <td class="px-5 py-4">
                                @if($index === 0)
                                    <span class="inline-flex items-center rounded-full bg-warning-100 px-2.5 py-1 text-xs font-bold text-warning-700 dark:bg-warning-500/20 dark:text-warning-400">
                                        #1 Top
                                    </span>
                                @elseif($index === 1)
                                    <span class="inline-flex items-center rounded-full bg-gray-100 px-2.5 py-1 text-xs font-bold text-gray-700 dark:bg-gray-800 dark:text-gray-300">
                                        #2
                                    </span>
                                @elseif($index === 2)
                                    <span class="inline-flex items-center rounded-full bg-orange-100 px-2.5 py-1 text-xs font-bold text-orange-700 dark:bg-orange-500/20 dark:text-orange-400">
                                        #3
                                    </span>
                                @else
                                    <span class="text-sm font-medium text-gray-600 dark:text-gray-300">#{{ $index + 1 }}</span>
                                @endif
                            </td>
                            <td class="px-5 py-4">
                                <div class="text-sm font-semibold text-gray-900 dark:text-white">{{ data_get($staff, 'name', '-') }}</div>
                            </td>
                            <td class="px-5 py-4 text-sm text-gray-700 dark:text-gray-300">{{ number_format(data_get($staff, 'today_count', 0)) }}</td>
                            <td class="px-5 py-4 text-sm font-semibold text-brand-600 dark:text-brand-400">{{ number_format(data_get($staff, 'month_count', 0)) }}</td>
                            <td class="px-5 py-4 text-sm text-gray-700 dark:text-gray-300">{{ number_format(data_get($staff, 'total_count', 0)) }}</td>
                            <td class="px-5 py-4 text-sm text-gray-700 dark:text-gray-300">{{ data_get($staff, 'avg_duration_text', '-') }}</td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="6" class="px-5 py-8 text-center text-sm text-gray-500 dark:text-gray-400">
                                Belum ada data performa karyawan.
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
@endsection