@php
    $money = fn ($v) => number_format((float) $v, 2);
    $pct = fn ($v) => rtrim(rtrim(number_format((float) $v, 2), '0'), '.');

    $cards = [
        ['key' => 'available', 'label' => __('Available to Spend'), 'icon' => 'banknotes', 'chip' => 'bg-emerald-50 text-emerald-600', 'hint' => __('Collected accruals − spend')],
        ['key' => 'pending', 'label' => __('Pending Collection'), 'icon' => 'clock', 'chip' => 'bg-amber-50 text-amber-600', 'hint' => __('Accrued, invoice not yet paid')],
        ['key' => 'spent', 'label' => __('Total Spent'), 'icon' => 'receipt-percent', 'chip' => 'bg-violet-50 text-violet-600', 'hint' => __('Marketing-category expenses')],
        ['key' => 'accrued', 'label' => __('Total Accrued'), 'icon' => 'arrow-trending-up', 'chip' => 'bg-indigo-50 text-indigo-600', 'hint' => __('All marketing earmarks to date')],
    ];
@endphp

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

        {{-- Header --}}
        <x-page-header
            :title="__('Marketing Fund')"
            :subtitle="__('A slice of every job\'s profit is set aside for marketing. Track what is available and what has been spent.')"
        >
            <a href="{{ route('settings.index') }}"
               class="inline-flex items-center gap-1.5 text-sm font-medium text-slate-500 transition hover:text-slate-700">
                <x-icon name="cog-6-tooth" class="h-4 w-4" />
                {{ __('Settings') }}
            </a>
        </x-page-header>

        {{-- Tabs --}}
        <div class="flex items-center gap-1 rounded-xl border border-slate-200 bg-slate-50 p-1 text-sm font-medium">
            <button type="button" wire:click="setTab('overview')"
                @class([
                    'flex-1 rounded-lg px-4 py-2 transition sm:flex-none',
                    'bg-white text-indigo-600 shadow-sm ring-1 ring-slate-200' => $tab === 'overview',
                    'text-slate-500 hover:text-slate-700' => $tab !== 'overview',
                ])>{{ __('Overview') }}</button>
            <button type="button" wire:click="setTab('ledger')"
                @class([
                    'flex-1 rounded-lg px-4 py-2 transition sm:flex-none',
                    'bg-white text-indigo-600 shadow-sm ring-1 ring-slate-200' => $tab === 'ledger',
                    'text-slate-500 hover:text-slate-700' => $tab !== 'ledger',
                ])>{{ __('Ledger') }}</button>
        </div>

        @if ($tab === 'overview')

            {{-- Allocation rate banner --}}
            <x-card class="flex flex-col gap-2 p-5 sm:flex-row sm:items-center sm:justify-between">
                <div>
                    <p class="text-sm font-medium text-slate-500">{{ __('Current allocation rate') }}</p>
                    <p class="mt-1 text-lg font-semibold text-slate-900">
                        {{ $pct($stats['rate']) }}% {{ __('of each completed job\'s gross profit') }}
                    </p>
                </div>
                <div class="text-sm text-slate-500">
                    {{ __('This month') }}:
                    <span class="font-semibold text-emerald-600">+{{ $baseCode }} {{ $money($stats['accrued_this_month']) }}</span>
                    {{ __('accrued') }} ·
                    <span class="font-semibold text-rose-600">−{{ $baseCode }} {{ $money($stats['spent_this_month']) }}</span>
                    {{ __('spent') }}
                </div>
            </x-card>

            {{-- Headline stat cards --}}
            <section class="grid grid-cols-1 gap-5 sm:grid-cols-2 xl:grid-cols-4">
                @foreach ($cards as $card)
                    @php $value = $baseCode . ' ' . $money($stats[$card['key']]); @endphp
                    <x-card class="p-5">
                        <div class="flex items-start justify-between">
                            <div class="min-w-0">
                                <p class="text-[11px] font-semibold uppercase tracking-wider text-slate-400">{{ $card['label'] }}</p>
                                <p class="mt-2 text-2xl font-bold tracking-tight text-slate-900 tabular-nums">{{ $value }}</p>
                                <p class="mt-1.5 text-xs text-slate-400">{{ $card['hint'] }}</p>
                            </div>
                            <span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl {{ $card['chip'] }}">
                                <x-icon name="{{ $card['icon'] }}" class="h-5 w-5" />
                            </span>
                        </div>
                    </x-card>
                @endforeach
            </section>

            {{-- Accrued vs spent trend --}}
            <x-card class="p-5">
                <div class="flex items-center justify-between">
                    <div>
                        <h3 class="text-base font-semibold text-slate-900">{{ __('Fund movement') }}</h3>
                        <p class="text-sm text-slate-500">{{ __('Accrued vs spent each month, with the cumulative fund balance.') }}</p>
                    </div>
                </div>

                <div
                    wire:ignore
                    wire:key="marketing-trend"
                    x-data="{
                        chart: null,
                        data: @js($series),
                        base: @js($baseCode),
                        render() {
                            if (! window.ApexCharts || ! this.$refs.chart) { return; }
                            this.chart = new window.ApexCharts(this.$refs.chart, {
                                chart: { height: 340, fontFamily: 'inherit', toolbar: { show: false }, stacked: false },
                                series: [
                                    { name: @js(__('Accrued')), type: 'column', data: this.data.accrued },
                                    { name: @js(__('Spent')), type: 'column', data: this.data.spent },
                                    { name: @js(__('Cumulative fund')), type: 'line', data: this.data.cumulative },
                                ],
                                labels: this.data.labels,
                                colors: ['#124a61', '#f43f5e', '#10b981'],
                                stroke: { width: [0, 0, 3], curve: 'smooth' },
                                plotOptions: { bar: { borderRadius: 4, columnWidth: '55%' } },
                                fill: { opacity: [0.9, 0.9, 1] },
                                markers: { size: [0, 0, 4] },
                                dataLabels: { enabled: false },
                                xaxis: { labels: { style: { colors: '#94a3b8', fontSize: '11px' } }, axisBorder: { show: false }, axisTicks: { show: false } },
                                yaxis: { labels: { style: { colors: '#94a3b8' }, formatter: (v) => this.base + ' ' + Math.round(v).toLocaleString() } },
                                legend: { position: 'top', horizontalAlign: 'left', fontSize: '13px', markers: { radius: 12 }, itemMargin: { horizontal: 10 } },
                                grid: { borderColor: '#e2e8f0', strokeDashArray: 4 },
                                tooltip: { shared: true, intersect: false, y: { formatter: (v) => this.base + ' ' + Number(v).toLocaleString() } },
                                noData: { text: @js(__('No data')) },
                            });
                            this.chart.render();
                        },
                    }"
                    x-init="$nextTick(() => render())"
                    class="mt-4"
                >
                    <div x-ref="chart"></div>
                </div>
            </x-card>

        @else

            {{-- Ledger --}}
            <x-card>
                <div class="border-b border-slate-100 p-4 sm:p-5">
                    <h3 class="text-base font-semibold text-slate-900">{{ __('Marketing ledger') }}</h3>
                    <p class="text-sm text-slate-500">
                        {{ __('Credits (job accruals) and debits (marketing spend), newest first.') }}
                        @if ($ledgerTotal > $ledger->count())
                            <span class="text-slate-400">{{ __('Showing the latest :n of :total.', ['n' => $ledger->count(), 'total' => $ledgerTotal]) }}</span>
                        @endif
                    </p>
                </div>

                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-slate-100">
                        <thead>
                            <tr class="bg-slate-50/80">
                                <th class="px-3 lg:px-4 py-3.5 text-left text-[11px] font-semibold uppercase tracking-wider text-slate-500">{{ __('Date') }}</th>
                                <th class="px-3 lg:px-4 py-3.5 text-left text-[11px] font-semibold uppercase tracking-wider text-slate-500">{{ __('Entry') }}</th>
                                <th class="px-3 lg:px-4 py-3.5 text-right text-[11px] font-semibold uppercase tracking-wider text-slate-500">{{ __('Amount') }}</th>
                                <th class="px-3 lg:px-4 py-3.5 text-right text-[11px] font-semibold uppercase tracking-wider text-slate-500">{{ __('Balance') }}</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-100">
                            @forelse ($ledger as $row)
                                <tr class="transition-colors hover:bg-slate-50/70">
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-sm text-slate-600">
                                        {{ optional($row['date'])->format('d M Y') ?? '—' }}
                                    </td>
                                    <td class="px-3 lg:px-4 py-4 text-sm">
                                        <div class="flex items-center gap-2">
                                            <span @class([
                                                'inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-lg',
                                                'bg-emerald-50 text-emerald-600' => $row['type'] === 'credit',
                                                'bg-rose-50 text-rose-600' => $row['type'] === 'debit',
                                            ])>
                                                <x-icon name="{{ $row['type'] === 'credit' ? 'arrow-up-right' : 'arrow-right' }}" class="h-4 w-4" />
                                            </span>
                                            <div class="min-w-0">
                                                <p class="font-medium text-slate-900">{{ $row['label'] }}</p>
                                                @if ($row['detail'])
                                                    <p class="truncate text-xs text-slate-400">{{ \Illuminate\Support\Str::limit(strip_tags($row['detail']), 60) }}</p>
                                                @endif
                                            </div>
                                            @if ($row['status'] === \App\Models\MarketingAllocation::PENDING)
                                                <x-badge color="amber">{{ __('Pending') }}</x-badge>
                                            @elseif ($row['status'] === \App\Models\MarketingAllocation::AVAILABLE)
                                                <x-badge color="emerald">{{ __('Available') }}</x-badge>
                                            @endif
                                        </div>
                                    </td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-right text-sm font-semibold {{ $row['type'] === 'credit' ? 'text-emerald-600' : 'text-rose-600' }}">
                                        {{ $row['type'] === 'credit' ? '+' : '−' }}{{ $baseCode }} {{ $money($row['amount']) }}
                                    </td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-right text-sm font-medium text-slate-700">
                                        {{ $baseCode }} {{ $money($row['balance']) }}
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="4" class="px-3 lg:px-4 py-12">
                                        <x-empty-state
                                            icon="megaphone"
                                            :title="__('No marketing activity yet')"
                                            :message="__('Complete and collect jobs to accrue marketing budget, then record Marketing-category expenses to draw it down.')"
                                            class="border-0"
                                        />
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </x-card>

        @endif
    </div>
</div>