@php
    // Accent colours for a target's metric icon chip.
    $iconChip = [
        'indigo' => 'bg-indigo-50 text-indigo-600',
        'violet' => 'bg-violet-50 text-violet-600',
        'sky' => 'bg-sky-50 text-sky-600',
        'emerald' => 'bg-emerald-50 text-emerald-600',
        'amber' => 'bg-amber-50 text-amber-600',
        'blue' => 'bg-blue-50 text-blue-600',
    ];

    // Status badge + progress-bar styling, keyed by derived status.
    $statusMeta = [
        'on_track' => ['label' => __('On Track'), 'badge' => 'bg-emerald-50 text-emerald-700', 'bar' => 'from-emerald-500 to-emerald-400'],
        'at_risk' => ['label' => __('At Risk'), 'badge' => 'bg-amber-50 text-amber-700', 'bar' => 'from-amber-500 to-amber-400'],
        'behind' => ['label' => __('Behind'), 'badge' => 'bg-rose-50 text-rose-700', 'bar' => 'from-rose-500 to-rose-400'],
        'upcoming' => ['label' => __('Upcoming'), 'badge' => 'bg-slate-100 text-slate-600', 'bar' => 'from-slate-400 to-slate-300'],
        'ended' => ['label' => __('Ended'), 'badge' => 'bg-slate-100 text-slate-500', 'bar' => 'from-slate-400 to-slate-300'],
    ];

    $statusFilters = [
        'all' => __('All statuses'),
        'on_track' => __('On Track'),
        'at_risk' => __('At Risk'),
        'behind' => __('Behind'),
    ];

    $periodFilters = [
        'all' => __('All Periods'),
        'daily' => __('Daily'),
        'weekly' => __('Weekly'),
        'monthly' => __('Monthly'),
        'yearly' => __('Yearly'),
    ];

    $tabs = [
        'all' => ['label' => __('All Targets'), 'count' => $tabCounts['all'] ?? 0],
        'sales' => ['label' => __('Sales Team'), 'count' => $tabCounts['sales'] ?? 0],
        'production' => ['label' => __('Production Team'), 'count' => $tabCounts['production'] ?? 0],
        'admin' => ['label' => __('Admin Team'), 'count' => $tabCounts['admin'] ?? 0],
        'finance' => ['label' => __('Finance'), 'count' => $tabCounts['finance'] ?? 0],
    ];

    $sparkPaths = [
        'emerald' => 'M0,26 C18,24 30,10 48,14 C66,18 78,6 96,9 C114,12 126,2 144,5',
        'amber' => 'M0,22 C18,18 30,24 48,16 C66,8 78,18 96,12 C114,6 126,16 144,10',
        'rose' => 'M0,12 C18,16 30,8 48,18 C66,24 78,14 96,20 C114,26 126,16 144,22',
    ];
@endphp

<div class="px-4 py-8 sm:px-6 lg:px-8">
    <div class="mx-auto max-w-7xl">

        {{-- Page header --}}
        <x-page-header :title="__('Targets')" :subtitle="__('Set performance goals and track live progress against the current period.')">
            {{-- Period scope filter --}}
            <div class="relative" x-data="{ open: false }" @click.outside="open = false">
                <button
                    type="button"
                    @click="open = ! open"
                    class="inline-flex items-center gap-2 rounded-xl border px-3.5 py-2 text-sm font-medium shadow-sm transition {{ $periodFilter !== 'all' ? 'border-indigo-200 bg-indigo-50 text-indigo-700' : 'border-slate-200 bg-white text-slate-600 hover:bg-slate-50' }}"
                >
                    <x-icon name="calendar" class="h-4 w-4 {{ $periodFilter !== 'all' ? 'text-indigo-500' : 'text-slate-400' }}" />
                    {{ $periodFilters[$periodFilter] }}
                    <x-icon name="chevron-down" class="h-3.5 w-3.5 opacity-60" />
                </button>
                <div
                    x-show="open"
                    x-cloak
                    x-transition
                    class="absolute right-0 z-20 mt-2 w-44 overflow-hidden rounded-xl border border-slate-200 bg-white py-1 shadow-lg"
                >
                    @foreach ($periodFilters as $value => $label)
                        <button
                            type="button"
                            wire:click="$set('periodFilter', '{{ $value }}')"
                            @click="open = false"
                            class="flex w-full items-center justify-between px-3.5 py-2 text-left text-sm {{ $periodFilter === $value ? 'font-semibold text-indigo-600' : 'text-slate-600 hover:bg-slate-50' }}"
                        >
                            {{ $label }}
                            @if ($periodFilter === $value)
                                <x-icon name="check-circle" class="h-4 w-4" />
                            @endif
                        </button>
                    @endforeach
                </div>
            </div>

            {{-- Status filter ("Filters") --}}
            <div class="relative" x-data="{ open: false }" @click.outside="open = false">
                <button
                    type="button"
                    @click="open = ! open"
                    class="inline-flex items-center gap-2 rounded-xl border px-3.5 py-2 text-sm font-medium shadow-sm transition {{ $statusFilter !== 'all' ? 'border-indigo-200 bg-indigo-50 text-indigo-700' : 'border-slate-200 bg-white text-slate-600 hover:bg-slate-50' }}"
                >
                    <x-icon name="funnel" class="h-4 w-4" />
                    {{ $statusFilter === 'all' ? __('Filters') : $statusFilters[$statusFilter] }}
                </button>
                <div
                    x-show="open"
                    x-cloak
                    x-transition
                    class="absolute right-0 z-20 mt-2 w-44 overflow-hidden rounded-xl border border-slate-200 bg-white py-1 shadow-lg"
                >
                    @foreach ($statusFilters as $value => $label)
                        <button
                            type="button"
                            wire:click="$set('statusFilter', '{{ $value }}')"
                            @click="open = false"
                            class="flex w-full items-center justify-between px-3.5 py-2 text-left text-sm {{ $statusFilter === $value ? 'font-semibold text-indigo-600' : 'text-slate-600 hover:bg-slate-50' }}"
                        >
                            {{ $label }}
                            @if ($statusFilter === $value)
                                <x-icon name="check-circle" class="h-4 w-4" />
                            @endif
                        </button>
                    @endforeach
                </div>
            </div>

            @if ($canManage)
                <x-button wire:click="create" type="button">
                    <x-icon name="plus" class="-ms-1 me-1.5 h-4 w-4" />
                    {{ __('New Target') }}
                </x-button>
            @endif
        </x-page-header>

        @if (! $hasTargets)
            {{-- Nothing configured yet --}}
            <x-card>
                <div class="p-6">
                    <x-empty-state
                        icon="flag"
                        :title="__('No active targets')"
                        :message="__('Create a target to start tracking progress for the current period.')"
                        class="border-0"
                    >
                        @if ($canManage)
                            <x-button wire:click="create" type="button">
                                <x-icon name="plus" class="-ms-1 me-1.5 h-4 w-4" />
                                {{ __('New Target') }}
                            </x-button>
                        @endif
                    </x-empty-state>
                </div>
            </x-card>
        @else
            {{-- Summary cards --}}
            <div class="grid grid-cols-1 gap-5 lg:grid-cols-4">
                {{-- Overall progress donut --}}
                <x-card class="p-5 lg:col-span-1">
                    <p class="text-sm font-semibold text-slate-900">{{ __('Overall Progress') }}</p>
                    <p class="text-xs text-slate-400">{{ __('All targets average') }}</p>

                    <div class="mt-3 flex items-center gap-4">
                        <div class="min-w-0">
                            <p class="text-3xl font-bold text-indigo-600">{{ $summary['avg'] }}%</p>
                            <p class="mt-1 inline-flex items-center gap-1 text-xs font-medium text-emerald-600">
                                <x-icon name="arrow-trending-up" class="h-3.5 w-3.5" />
                                {{ __('Live this period') }}
                            </p>
                        </div>

                        <div
                            wire:ignore
                            class="relative ms-auto"
                            x-data="{
                                chart: null,
                                render() {
                                    if (! window.ApexCharts || ! this.$refs.donut) { return; }
                                    this.chart = new window.ApexCharts(this.$refs.donut, {
                                        chart: { type: 'donut', height: 130, width: 130, sparkline: { enabled: true } },
                                        series: [{{ $summary['on_track'] }}, {{ $summary['at_risk'] }}, {{ $summary['behind'] }}],
                                        labels: [@js(__('On Track')), @js(__('At Risk')), @js(__('Behind'))],
                                        colors: ['#124a61', '#f59e0b', '#ef4444'],
                                        stroke: { width: 2, colors: ['#fff'] },
                                        plotOptions: { pie: { donut: { size: '74%' } } },
                                        dataLabels: { enabled: false },
                                        tooltip: { enabled: true, y: { formatter: (v) => v + ' ' + @js(__('targets')) } },
                                        legend: { show: false },
                                    });
                                    this.chart.render();
                                },
                            }"
                            x-init="$nextTick(() => render())"
                        >
                            <div x-ref="donut"></div>
                            <div class="pointer-events-none absolute inset-0 flex flex-col items-center justify-center">
                                <span class="text-lg font-bold leading-none text-slate-900">{{ $summary['total'] }}</span>
                                <span class="text-[10px] text-slate-400">{{ __('Targets') }}</span>
                            </div>
                        </div>
                    </div>

                    <div class="mt-4 space-y-1.5 border-t border-slate-100 pt-3 text-xs">
                        <div class="flex items-center justify-between">
                            <span class="inline-flex items-center gap-1.5 text-slate-500"><span class="h-2 w-2 rounded-full bg-indigo-500"></span>{{ __('On Track') }}</span>
                            <span class="font-semibold text-slate-700">{{ $summary['on_track'] }}</span>
                        </div>
                        <div class="flex items-center justify-between">
                            <span class="inline-flex items-center gap-1.5 text-slate-500"><span class="h-2 w-2 rounded-full bg-amber-500"></span>{{ __('At Risk') }}</span>
                            <span class="font-semibold text-slate-700">{{ $summary['at_risk'] }}</span>
                        </div>
                        <div class="flex items-center justify-between">
                            <span class="inline-flex items-center gap-1.5 text-slate-500"><span class="h-2 w-2 rounded-full bg-rose-500"></span>{{ __('Behind') }}</span>
                            <span class="font-semibold text-slate-700">{{ $summary['behind'] }}</span>
                        </div>
                    </div>
                </x-card>

                {{-- On Track / At Risk / Behind stat cards --}}
                @foreach ([
                    ['key' => 'on_track', 'label' => __('On Track'), 'count' => $summary['on_track'], 'pct' => $summary['on_track_pct'], 'icon' => 'arrow-trending-up', 'spark' => 'emerald', 'chip' => 'bg-emerald-50 text-emerald-600', 'stroke' => '#10b981'],
                    ['key' => 'at_risk', 'label' => __('At Risk'), 'count' => $summary['at_risk'], 'pct' => $summary['at_risk_pct'], 'icon' => 'arrow-trending-up', 'spark' => 'amber', 'chip' => 'bg-amber-50 text-amber-600', 'stroke' => '#f59e0b'],
                    ['key' => 'behind', 'label' => __('Behind'), 'count' => $summary['behind'], 'pct' => $summary['behind_pct'], 'icon' => 'arrow-trending-down', 'spark' => 'rose', 'chip' => 'bg-rose-50 text-rose-600', 'stroke' => '#ef4444'],
                ] as $stat)
                    <button
                        type="button"
                        wire:click="$set('statusFilter', '{{ $statusFilter === $stat['key'] ? 'all' : $stat['key'] }}')"
                        @class([
                            'group rounded-2xl bg-white p-5 text-left shadow-sm ring-1 transition hover:shadow-md',
                            'ring-indigo-300' => $statusFilter === $stat['key'],
                            'ring-slate-200' => $statusFilter !== $stat['key'],
                        ])
                    >
                        <div class="flex items-start justify-between">
                            <div>
                                <span class="flex h-10 w-10 items-center justify-center rounded-xl {{ $stat['chip'] }}">
                                    <x-icon name="{{ $stat['icon'] }}" class="h-5 w-5" />
                                </span>
                                <p class="mt-3 text-sm font-medium text-slate-500">{{ $stat['label'] }}</p>
                                <p class="mt-1 text-3xl font-bold text-slate-900">{{ $stat['count'] }}</p>
                                <p class="mt-0.5 text-xs text-slate-400">{{ __(':pct% of total', ['pct' => $stat['pct']]) }}</p>
                            </div>
                        </div>

                        {{-- Decorative trend sparkline --}}
                        <svg viewBox="0 0 144 32" preserveAspectRatio="none" class="mt-3 h-10 w-full" aria-hidden="true">
                            <defs>
                                <linearGradient id="spark-{{ $stat['key'] }}" x1="0" y1="0" x2="0" y2="1">
                                    <stop offset="0%" stop-color="{{ $stat['stroke'] }}" stop-opacity="0.18" />
                                    <stop offset="100%" stop-color="{{ $stat['stroke'] }}" stop-opacity="0" />
                                </linearGradient>
                            </defs>
                            <path d="{{ $sparkPaths[$stat['spark']] }} L144,32 L0,32 Z" fill="url(#spark-{{ $stat['key'] }})" />
                            <path d="{{ $sparkPaths[$stat['spark']] }}" fill="none" stroke="{{ $stat['stroke'] }}" stroke-width="2" stroke-linecap="round" />
                        </svg>
                    </button>
                @endforeach
            </div>

            {{-- Tab bar: team filter + search + view toggle --}}
            <div class="mt-6 flex flex-col gap-4 border-b border-slate-200 pb-px lg:flex-row lg:items-center lg:justify-between">
                <div class="-mb-px flex items-center gap-1 overflow-x-auto">
                    @foreach ($tabs as $key => $tab)
                        <button
                            type="button"
                            wire:click="$set('tab', '{{ $key }}')"
                            @class([
                                'inline-flex shrink-0 items-center gap-2 border-b-2 px-3 py-2.5 text-sm font-medium transition',
                                'border-indigo-600 text-indigo-600' => $this->tab === $key,
                                'border-transparent text-slate-500 hover:text-slate-700' => $this->tab !== $key,
                            ])
                        >
                            {{ $tab['label'] }}
                            <span @class([
                                'rounded-full px-1.5 py-0.5 text-[11px] font-semibold',
                                'bg-indigo-100 text-indigo-700' => $this->tab === $key,
                                'bg-slate-100 text-slate-500' => $this->tab !== $key,
                            ])>{{ $tab['count'] }}</span>
                        </button>
                    @endforeach
                </div>

                <div class="flex items-center gap-3 pb-3 lg:pb-0">
                    <div class="relative">
                        <x-icon name="magnifying-glass" class="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" />
                        <input
                            type="search"
                            wire:model.live.debounce.300ms="search"
                            placeholder="{{ __('Search targets...') }}"
                            class="w-full rounded-xl border-slate-200 py-2 pl-9 pr-3 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500 lg:w-64"
                        />
                    </div>

                    <div class="inline-flex shrink-0 rounded-xl border border-slate-200 bg-white p-1">
                        <button type="button" wire:click="$set('view', 'list')" @class(['rounded-lg p-1.5 transition', 'bg-indigo-50 text-indigo-600' => $view === 'list', 'text-slate-400 hover:text-slate-600' => $view !== 'list']) title="{{ __('List view') }}">
                            <x-icon name="bars-3" class="h-4 w-4" />
                        </button>
                        <button type="button" wire:click="$set('view', 'grid')" @class(['rounded-lg p-1.5 transition', 'bg-indigo-50 text-indigo-600' => $view === 'grid', 'text-slate-400 hover:text-slate-600' => $view !== 'grid']) title="{{ __('Grid view') }}">
                            <x-icon name="squares-2x2" class="h-4 w-4" />
                        </button>
                    </div>
                </div>
            </div>

            @if (empty($rows))
                <div class="py-16 text-center">
                    <x-icon name="magnifying-glass" class="mx-auto h-8 w-8 text-slate-300" />
                    <p class="mt-2 text-sm font-medium text-slate-500">{{ __('No targets match your filters.') }}</p>
                </div>
            @elseif ($view === 'list')
                {{-- List (table) view --}}
                <div class="mt-2 overflow-x-auto">
                    <table class="min-w-full">
                        <thead>
                            <tr class="border-b border-slate-200 text-left text-[11px] font-semibold uppercase tracking-wider text-slate-400">
                                <th class="py-3 pr-3">{{ __('Target') }}</th>
                                <th class="px-3 py-3">{{ __('Owner / Team') }}</th>
                                <th class="px-3 py-3">{{ __('Period') }}</th>
                                <th class="px-3 py-3">{{ __('Progress') }}</th>
                                <th class="px-3 py-3">{{ __('Status') }}</th>
                                <th class="py-3 pl-3 text-right">{{ __('Actions') }}</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($rows as $row)
                                @php $sm = $statusMeta[$row['status']] ?? $statusMeta['ended']; @endphp
                                <tr wire:key="target-row-{{ $row['id'] }}" class="group align-middle transition-colors {{ $loop->even ? 'bg-slate-50/70' : 'bg-white' }} hover:bg-indigo-50/40">
                                    {{-- Target --}}
                                    <td class="py-4 pr-3">
                                        <div class="flex items-center gap-3">
                                            <span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl {{ $iconChip[$row['color']] ?? $iconChip['indigo'] }}">
                                                <x-icon name="{{ $row['icon'] }}" class="h-5 w-5" />
                                            </span>
                                            <div class="min-w-0">
                                                <p class="truncate text-sm font-semibold text-slate-900">{{ $row['title'] }}</p>
                                                <p class="truncate text-xs text-slate-400">{{ $row['description'] }}</p>
                                                <span class="mt-1 inline-flex rounded-md bg-slate-100 px-1.5 py-0.5 text-[10px] font-medium text-slate-500">{{ $row['team_label'] }}</span>
                                            </div>
                                        </div>
                                    </td>

                                    {{-- Owner / Team --}}
                                    <td class="px-3 py-4">
                                        <div class="flex items-center gap-2.5">
                                            @if ($row['owner_photo'])
                                                <img src="{{ $row['owner_photo'] }}" alt="{{ $row['owner_name'] }}" class="h-8 w-8 shrink-0 rounded-full object-cover" />
                                            @else
                                                <span class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-indigo-100 text-xs font-semibold text-indigo-700">{{ $row['owner_initials'] }}</span>
                                            @endif
                                            <div class="min-w-0">
                                                <p class="truncate text-sm font-medium text-slate-700">{{ $row['owner_name'] }}</p>
                                                <p class="truncate text-xs text-slate-400">{{ $row['team_label'] }}</p>
                                            </div>
                                        </div>
                                    </td>

                                    {{-- Period --}}
                                    <td class="px-3 py-4">
                                        <p class="text-sm font-medium text-slate-700">{{ $row['window_label'] }}</p>
                                        <p class="text-xs text-slate-400">{{ $row['period_label'] }}</p>
                                    </td>

                                    {{-- Progress --}}
                                    <td class="px-3 py-4 min-w-[180px]">
                                        <div class="flex items-center justify-between text-xs">
                                            <span class="font-medium text-slate-500">{{ $row['progress_label'] }}</span>
                                            <span class="font-semibold text-slate-700">{{ number_format($row['pct'], 0) }}%</span>
                                        </div>
                                        <div class="mt-1.5 h-2 w-full overflow-hidden rounded-full bg-slate-100">
                                            <div class="h-full rounded-full bg-gradient-to-r {{ $sm['bar'] }}" style="width: {{ $row['pct_capped'] }}%"></div>
                                        </div>
                                    </td>

                                    {{-- Status --}}
                                    <td class="px-3 py-4">
                                        <span class="inline-flex items-center rounded-full px-2.5 py-1 text-xs font-medium {{ $sm['badge'] }}">{{ $sm['label'] }}</span>
                                    </td>

                                    {{-- Actions --}}
                                    <td class="py-4 pl-3">
                                        <div class="flex items-center justify-end gap-1">
                                            @if ($canManage)
                                                <button wire:click="edit({{ $row['id'] }})" class="rounded-lg p-1.5 text-slate-400 transition hover:bg-indigo-50 hover:text-indigo-600" title="{{ __('Edit') }}">
                                                    <x-icon name="pencil-square" class="h-4 w-4" />
                                                </button>
                                            @endif
                                            @if ($canDelete)
                                                <button
                                                    wire:click="delete({{ $row['id'] }})"
                                                    wire:confirm="{{ __('Delete this target?') }}"
                                                    class="rounded-lg p-1.5 text-slate-400 transition hover:bg-rose-50 hover:text-rose-600"
                                                    title="{{ __('Delete') }}"
                                                >
                                                    <x-icon name="trash" class="h-4 w-4" />
                                                </button>
                                            @endif
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @else
                {{-- Grid (card) view --}}
                <div class="mt-5 grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-3">
                    @foreach ($rows as $row)
                        @php $sm = $statusMeta[$row['status']] ?? $statusMeta['ended']; @endphp
                        <div wire:key="target-card-{{ $row['id'] }}" class="rounded-2xl bg-white p-5 shadow-sm ring-1 ring-slate-200 transition hover:shadow-md">
                            <div class="flex items-start justify-between gap-3">
                                <div class="flex items-center gap-3 min-w-0">
                                    <span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl {{ $iconChip[$row['color']] ?? $iconChip['indigo'] }}">
                                        <x-icon name="{{ $row['icon'] }}" class="h-5 w-5" />
                                    </span>
                                    <div class="min-w-0">
                                        <p class="truncate text-sm font-semibold text-slate-900">{{ $row['title'] }}</p>
                                        <p class="truncate text-xs text-slate-400">{{ $row['team_label'] }} · {{ $row['window_label'] }}</p>
                                    </div>
                                </div>
                                <span class="inline-flex shrink-0 items-center rounded-full px-2.5 py-1 text-xs font-medium {{ $sm['badge'] }}">{{ $sm['label'] }}</span>
                            </div>

                            <div class="mt-4 flex items-end justify-between">
                                <p class="text-2xl font-bold text-slate-900">{{ number_format($row['pct'], 0) }}%</p>
                                <p class="text-right text-xs text-slate-500">{{ $row['progress_label'] }}</p>
                            </div>
                            <div class="mt-2 h-2 w-full overflow-hidden rounded-full bg-slate-100">
                                <div class="h-full rounded-full bg-gradient-to-r {{ $sm['bar'] }}" style="width: {{ $row['pct_capped'] }}%"></div>
                            </div>

                            <div class="mt-4 flex items-center justify-between border-t border-slate-100 pt-3">
                                <div class="flex items-center gap-2 min-w-0">
                                    @if ($row['owner_photo'])
                                        <img src="{{ $row['owner_photo'] }}" alt="{{ $row['owner_name'] }}" class="h-7 w-7 shrink-0 rounded-full object-cover" />
                                    @else
                                        <span class="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-indigo-100 text-[11px] font-semibold text-indigo-700">{{ $row['owner_initials'] }}</span>
                                    @endif
                                    <span class="truncate text-xs text-slate-500">{{ $row['owner_name'] }}</span>
                                </div>
                                <div class="flex items-center gap-1">
                                    @if ($canManage)
                                        <button wire:click="edit({{ $row['id'] }})" class="rounded-lg p-1.5 text-slate-400 transition hover:bg-indigo-50 hover:text-indigo-600" title="{{ __('Edit') }}">
                                            <x-icon name="pencil-square" class="h-4 w-4" />
                                        </button>
                                    @endif
                                    @if ($canDelete)
                                        <button wire:click="delete({{ $row['id'] }})" wire:confirm="{{ __('Delete this target?') }}" class="rounded-lg p-1.5 text-slate-400 transition hover:bg-rose-50 hover:text-rose-600" title="{{ __('Delete') }}">
                                            <x-icon name="trash" class="h-4 w-4" />
                                        </button>
                                    @endif
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            @endif

            {{-- Bottom CTA banner --}}
            <div class="mt-8 flex flex-col items-start justify-between gap-4 rounded-2xl bg-gradient-to-r from-indigo-50 to-violet-50 p-5 ring-1 ring-indigo-100 sm:flex-row sm:items-center">
                <div class="flex items-center gap-3">
                    <span class="flex h-11 w-11 items-center justify-center rounded-xl bg-white text-indigo-600 shadow-sm">
                        <x-icon name="flag" class="h-5 w-5" />
                    </span>
                    <div>
                        <p class="text-sm font-semibold text-slate-900">{{ __('Stay on track and hit your goals!') }}</p>
                        <p class="text-xs text-slate-500">{{ __('Regularly review your targets and adjust strategies to stay on track.') }}</p>
                    </div>
                </div>
                <a href="{{ route('reports.index') }}" class="inline-flex shrink-0 items-center gap-2 rounded-xl bg-white px-4 py-2 text-sm font-semibold text-indigo-600 shadow-sm ring-1 ring-indigo-100 transition hover:bg-indigo-50">
                    <x-icon name="chart-bar" class="h-4 w-4" />
                    {{ __('View Reports') }}
                </a>
            </div>
        @endif

        {{-- Business development targets (CRM S8): per officer, approved, revised with history --}}
        <livewire:crm.performance.targets-panel />
    </div>

    {{-- Create / Edit Modal --}}
    <x-dialog-modal wire:model.live="showModal" maxWidth="xl">
        <x-slot name="title">
            {{ $editingId ? __('Edit Target') : __('New Target') }}
        </x-slot>

        <x-slot name="content">
            @php
                $metricMonetary = ! empty($metricDefs[$metric]['monetary']);
                $metricPerUser = ! empty($metricDefs[$metric]['per_user']);
            @endphp
            <div class="grid grid-cols-1 gap-4">
                <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                    <div>
                        <x-label for="metric" value="{{ __('Metric') }}" />
                        <select id="metric" wire:model.live="metric" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                            @foreach ($metricDefs as $key => $def)
                                <option value="{{ $key }}">{{ $def['label'] }}</option>
                            @endforeach
                        </select>
                        <x-input-error for="metric" class="mt-2" />
                    </div>

                    <div>
                        <x-label for="type" value="{{ __('Target Type') }}" />
                        <select id="type" wire:model.live="type" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                            @foreach ($types as $key => $label)
                                <option value="{{ $key }}">{{ __($label) }}</option>
                            @endforeach
                        </select>
                        <x-input-error for="type" class="mt-2" />
                    </div>
                </div>

                <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                    <div>
                        <x-label for="period" value="{{ __('Period') }}" />
                        <select id="period" wire:model="period" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                            @foreach ($periods as $p)
                                <option value="{{ $p }}">{{ ucfirst($p) }}</option>
                            @endforeach
                        </select>
                        <x-input-error for="period" class="mt-2" />
                    </div>

                    {{-- Per-user scope: only attributable metrics can be assigned --}}
                    <div>
                        <x-label for="user_id" value="{{ __('Scope') }}" />
                        @if ($metricPerUser)
                            <select id="user_id" wire:model="user_id" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                                <option value="">{{ __('Whole team') }}</option>
                                @foreach ($teamMembers as $member)
                                    <option value="{{ $member->id }}">{{ $member->name }}</option>
                                @endforeach
                            </select>
                            <p class="mt-1 text-xs text-slate-400">{{ __('Assign to one team member, or target the whole team.') }}</p>
                            <x-input-error for="user_id" class="mt-2" />
                        @else
                            <div class="mt-1 flex items-center rounded-xl border border-slate-200 bg-slate-50 px-3 py-2 text-sm text-slate-500">
                                {{ __('Company-wide (team only)') }}
                            </div>
                        @endif
                    </div>
                </div>

                {{-- Type-specific goal inputs --}}
                @if ($type === 'fixed' || $type === 'percentage')
                    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                        <div>
                            <x-label for="value" value="{{ $type === 'percentage' ? __('Target %') : __('Target Value') }}" />
                            <x-input id="value" type="number" step="0.01" min="0" class="mt-1 block w-full" wire:model="value" />
                            <x-input-error for="value" class="mt-2" />
                        </div>

                        @if ($metricMonetary && $type === 'fixed')
                            <div>
                                <x-label for="currency_code" value="{{ __('Currency') }}" />
                                <select id="currency_code" wire:model="currency_code" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                                    <option value="">{{ __('Base currency') }}</option>
                                    @foreach ($currencies as $currency)
                                        <option value="{{ $currency->code }}">{{ $currency->code }}, {{ $currency->name }}</option>
                                    @endforeach
                                </select>
                                <p class="mt-1 text-xs text-slate-400">{{ __('Progress is reported in the team base currency.') }}</p>
                                <x-input-error for="currency_code" class="mt-2" />
                            </div>
                        @endif
                    </div>
                @elseif ($type === 'growth')
                    <div>
                        <x-label for="growth_pct" value="{{ __('Growth vs previous period (%)') }}" />
                        <x-input id="growth_pct" type="number" step="0.01" class="mt-1 block w-full" wire:model="growth_pct" />
                        <p class="mt-1 text-xs text-slate-400">{{ __('Goal = the previous period\'s actual × (1 + growth%). E.g. 10 means “beat last period by 10%”.') }}</p>
                        <x-input-error for="growth_pct" class="mt-2" />
                    </div>
                @elseif ($type === 'formula')
                    <div>
                        <x-label for="formula" value="{{ __('Formula') }}" />
                        <textarea id="formula" wire:model="formula" rows="2" placeholder="overheads * 1.5"
                            class="mt-1 block w-full rounded-xl border-slate-300 font-mono text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500"></textarea>
                        <p class="mt-1 text-xs text-slate-400">
                            {{ __('Use + − * / and parentheses with these variables:') }}
                            <span class="font-mono text-slate-500">{{ implode(', ', $formulaVars) }}</span>
                        </p>
                        <x-input-error for="formula" class="mt-2" />
                    </div>
                @endif

                <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                    <div>
                        <x-label for="effective_from" value="{{ __('Effective From') }}" />
                        <x-input id="effective_from" type="date" class="mt-1 block w-full" wire:model="effective_from" />
                        <x-input-error for="effective_from" class="mt-2" />
                    </div>

                    {{-- Schedule (§16): recurring (open-ended) vs runs until a set date. --}}
                    <div>
                        <x-label value="{{ __('Schedule') }}" />
                        <div class="mt-1 space-y-2">
                            <label class="flex items-start gap-2">
                                <input type="radio" value="recurring" wire:model.live="schedule_mode" class="mt-0.5 border-slate-300 text-indigo-600 focus:ring-indigo-500" />
                                <span class="text-sm text-slate-700">
                                    {{ __('Recurring') }}
                                    <span class="block text-xs text-slate-400">{{ __('Repeats every period, no end date.') }}</span>
                                </span>
                            </label>
                            <label class="flex items-start gap-2">
                                <input type="radio" value="until" wire:model.live="schedule_mode" class="mt-0.5 border-slate-300 text-indigo-600 focus:ring-indigo-500" />
                                <span class="text-sm text-slate-700">
                                    {{ __('Runs until a set date') }}
                                    <span class="block text-xs text-slate-400">{{ __('Ends on the date you choose.') }}</span>
                                </span>
                            </label>
                        </div>
                        <x-input-error for="schedule_mode" class="mt-2" />
                    </div>
                </div>

                @if ($schedule_mode === 'until')
                    <div>
                        <x-label for="effective_to" value="{{ __('Effective To') }}" />
                        <x-input id="effective_to" type="date" class="mt-1 block w-full" wire:model="effective_to" />
                        <x-input-error for="effective_to" class="mt-2" />
                    </div>
                @endif
            </div>
        </x-slot>

        <x-slot name="footer">
            <x-secondary-button wire:click="closeModal" wire:loading.attr="disabled">
                {{ __('Cancel') }}
            </x-secondary-button>

            <x-button class="ms-3" wire:click="save" wire:loading.attr="disabled">
                {{ __('Save') }}
            </x-button>
        </x-slot>
    </x-dialog-modal>
</div>