@php
    $monthSelectOptions = \App\Support\ReportingPeriod::monthSelectOptions();
    $yearSelectOptions = \App\Support\ReportingPeriod::yearSelectOptions();

    $salesmanFilterOptions = array_merge(
        [['value' => '', 'label' => 'All users']],
        $salesmanOptions ?? [],
    );

    $statusFilterOptions = [
        ['value' => '', 'label' => 'All statuses'],
        ['value' => 'pending', 'label' => 'Pending'],
        ['value' => 'delivered', 'label' => 'Delivered'],
        ['value' => 'cancelled', 'label' => 'Cancelled'],
    ];

    $financeFilterOptions = [
        ['value' => '', 'label' => 'All deals'],
        ['value' => 'yes', 'label' => 'Financed only'],
        ['value' => 'no', 'label' => 'Cash / no finance app'],
    ];

    $selectedSalesmanStr = $selectedSalesmanId !== null ? (string) $selectedSalesmanId : '';
    $selectedStatusStr = (string) ($selectedStatus ?? '');
    $selectedFinanceStr = (string) ($selectedFinance ?? '');

    $deliveredCount = (int) (($statusCounts['delivered'] ?? 0));
    $pendingCount = (int) (($statusCounts['pending'] ?? 0));
    $cancelledCount = (int) (($statusCounts['cancelled'] ?? 0));

    $salesSummaryMetrics = [
        ['label' => 'Total sales', 'value' => number_format((int) ($totalSales ?? 0))],
        ['label' => 'Delivered', 'value' => number_format($deliveredCount)],
        ['label' => 'Pending', 'value' => number_format($pendingCount)],
        ['label' => 'Cancelled', 'value' => number_format($cancelledCount)],
        ['label' => 'Financed', 'value' => number_format((int) ($financedCount ?? 0))],
        ['label' => 'Total sales revenue', 'value' => format_rand_or_dash($totalSalesRevenue ?? null)],
        ['label' => 'Gross profit', 'value' => format_rand_or_dash($totalGrossProfit ?? null)],
    ];
@endphp

<x-app-layout>
    <x-slot name="header">
        {{ __('All Sales') }}
    </x-slot>

    <div class="space-y-4 py-6 px-3 sm:px-4 md:px-5">
        <x-flash-messages />

        <div class="overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm">
            <dl class="grid grid-cols-2 divide-y divide-gray-100 sm:grid-cols-4 lg:grid-cols-7 lg:divide-y-0 lg:divide-x">
                @foreach ($salesSummaryMetrics as $metric)
                    <div class="flex min-w-0 items-center justify-between gap-2 px-3 py-2 sm:block sm:px-4">
                        <dt class="truncate text-[10px] font-medium uppercase leading-none tracking-wide text-gray-500">
                            {{ $metric['label'] }}
                        </dt>
                        <dd class="shrink-0 text-base font-semibold tabular-nums leading-none text-gray-900 sm:mt-1 sm:text-lg">
                            {{ $metric['value'] }}
                        </dd>
                    </div>
                @endforeach
            </dl>
        </div>

        <div class="overflow-visible bg-white border border-gray-200 rounded-xl shadow-sm p-4 space-y-3">
            <div class="relative z-20 flex min-h-[1.75rem] flex-wrap items-center gap-x-3 gap-y-2 overflow-visible">
                <form
                    method="GET"
                    action="{{ route('sales.all') }}"
                    class="flex max-w-full shrink-0 flex-wrap items-center justify-start gap-x-2 gap-y-1"
                >
                    <div class="flex shrink-0 items-center gap-1">
                        <label for="month" class="whitespace-nowrap text-[10px] font-medium leading-none text-gray-500">Month</label>
                        <div class="relative h-7 w-max shrink-0">
                            <x-styled-select
                                name="month"
                                id="month"
                                :selected="(string) (int) $reportingPeriod->month"
                                :options="$monthSelectOptions"
                                compact
                                class="h-full"
                            />
                        </div>
                    </div>

                    <div class="ml-2 flex shrink-0 items-center gap-1">
                        <label for="year" class="whitespace-nowrap text-[10px] font-medium leading-none text-gray-500">Year</label>
                        <div class="relative h-7 w-max shrink-0">
                            <x-styled-select
                                name="year"
                                id="year"
                                :selected="(string) (int) $reportingPeriod->year"
                                :options="$yearSelectOptions"
                                compact
                                class="h-full"
                            />
                        </div>
                    </div>

                    <div class="ml-2 flex shrink-0 items-center gap-1">
                        <label for="status" class="whitespace-nowrap text-[10px] font-medium leading-none text-gray-500">Status</label>
                        <div class="relative h-7 w-max shrink-0">
                            <x-styled-select
                                name="status"
                                id="status"
                                :selected="$selectedStatusStr"
                                :options="$statusFilterOptions"
                                compact
                                class="h-full"
                            />
                        </div>
                    </div>

                    <div class="ml-2 flex shrink-0 items-center gap-1">
                        <label for="financed" class="whitespace-nowrap text-[10px] font-medium leading-none text-gray-500">Finance</label>
                        <div class="relative h-7 w-max shrink-0">
                            <x-styled-select
                                name="financed"
                                id="financed"
                                :selected="$selectedFinanceStr"
                                :options="$financeFilterOptions"
                                compact
                                class="h-full"
                            />
                        </div>
                    </div>

                    <div class="flex shrink-0 items-center gap-1">
                        <label for="salesman" class="whitespace-nowrap text-[10px] font-medium leading-none text-gray-500">User</label>
                        <div class="relative h-7 w-[9rem] shrink-0">
                            <x-styled-select
                                name="salesman"
                                id="salesman"
                                :selected="$selectedSalesmanStr"
                                :options="$salesmanFilterOptions"
                                compact
                                class="h-full w-full"
                            />
                        </div>
                    </div>

                    <div class="-ml-2 flex shrink-0 items-center gap-1.5">
                        <button
                            type="submit"
                            class="inline-flex h-6 shrink-0 items-center rounded-md bg-[var(--dealer-accent-color)] px-2 text-[10px] font-medium text-[var(--dealer-accent-text-color)] shadow-sm hover:opacity-95 focus:outline-none focus:ring-1 focus:ring-[var(--dealer-accent-color)]"
                        >
                            Apply
                        </button>
                        <a
                            href="{{ route('sales.all', ['month' => $reportingPeriod->month, 'year' => $reportingPeriod->year]) }}"
                            class="inline-flex h-6 shrink-0 items-center rounded-md border border-gray-200 bg-white px-2 text-[10px] font-medium text-gray-700 shadow-sm hover:bg-gray-50"
                            title="Reset filters (keep month/year)"
                        >
                            Reset
                        </a>
                    </div>
                </form>

                <p class="ml-auto shrink-0 whitespace-nowrap text-right text-xs text-gray-500 leading-none">
                    {{ number_format(($sales ?? null)?->total() ?? 0) }} record(s)
                </p>
            </div>

            <div class="relative z-0 overflow-x-auto">
                <table class="w-full table-fixed divide-y divide-gray-200 text-[11px] leading-tight">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-1.5 py-1.5 text-left font-semibold text-gray-700">Sale #</th>
                            <th class="px-1.5 py-1.5 text-left font-semibold text-gray-700">Sale date</th>
                            <th class="px-1.5 py-1.5 text-left font-semibold text-gray-700">User</th>
                            <th class="px-1.5 py-1.5 text-left font-semibold text-gray-700">Status</th>
                            <th class="px-1.5 py-1.5 text-left font-semibold text-gray-700">Customer / lead</th>
                            <th class="px-1.5 py-1.5 text-left font-semibold text-gray-700">Lead #</th>
                            <th class="px-1.5 py-1.5 text-left font-semibold text-gray-700">Vehicle</th>
                            <th class="px-1.5 py-1.5 text-left font-semibold text-gray-700">Stock #</th>
                            <th class="px-1.5 py-1.5 text-right font-semibold text-gray-700">Selling price</th>
                            <th class="px-1.5 py-1.5 text-right font-semibold text-gray-700">Gross profit</th>
                            <th class="px-1.5 py-1.5 text-left font-semibold text-gray-700">Financed</th>
                            <th class="px-2 py-2 text-left font-semibold text-gray-700">Finance house</th>
                            <th class="px-2 py-2 text-right font-semibold text-gray-700">Amount</th>
                            <th class="px-2 py-2 text-right font-semibold text-gray-700">Deposit</th>
                            <th class="px-2 py-2 text-right font-semibold text-gray-700">Term</th>
                            <th class="px-2 py-2 text-left font-semibold text-gray-700">Finance status</th>
                            <th class="px-2 py-2 text-left font-semibold text-gray-700">Ref #</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-100 bg-white">
                        @forelse (($sales ?? []) as $sale)
                            @php
                                $userName = trim(($sale->user?->name ?? '').' '.($sale->user?->surname ?? ''));
                                $finance = $sale->lead?->latestFinanceApplication;
                                $hasFinance = $finance !== null;
                            @endphp
                            <tr class="hover:bg-gray-50">
                                <td class="px-1.5 py-1.5 whitespace-nowrap text-gray-700">#{{ $sale->id }}</td>
                                <td class="px-1.5 py-1.5 whitespace-nowrap text-gray-700">
                                    {{ optional($sale->sale_date)->format('Y-m-d') ?? $sale->sale_date }}
                                </td>
                                <td class="px-1.5 py-1.5 whitespace-nowrap text-gray-700">{{ $userName !== '' ? $userName : '—' }}</td>
                                <td class="px-1.5 py-1.5 whitespace-nowrap">
                                    <span class="inline-flex rounded-full px-2 py-0.5 text-[10px] font-semibold {{ $sale->statusBadgeClasses() }}">
                                        {{ $sale->statusLabel() }}
                                    </span>
                                </td>
                                <td class="px-1.5 py-1.5 text-gray-900 font-medium truncate">
                                    {{ $sale->lead ? $sale->lead->displayName() : '—' }}
                                </td>
                                <td class="px-1.5 py-1.5 whitespace-nowrap text-gray-700">
                                    {{ $sale->lead_id ? '#'.$sale->lead_id : '—' }}
                                </td>
                                <td class="px-1.5 py-1.5 text-gray-700">
                                    <div class="truncate text-gray-900">{{ $sale->vehicle_make ?? '' }} {{ $sale->vehicle_model ?? '' }}</div>
                                    @if ($sale->vehicle_variant)
                                        <div class="truncate text-[10px] text-gray-500">{{ $sale->vehicle_variant }}</div>
                                    @endif
                                    @if ($sale->vehicle_year)
                                        <div class="text-[10px] text-gray-500">{{ $sale->vehicle_year }}</div>
                                    @endif
                                    @if (! $sale->vehicle_make && ! $sale->vehicle_model && $sale->vehicle_sold)
                                        <div class="truncate text-gray-900">{{ $sale->vehicle_sold }}</div>
                                    @endif
                                    @if (! $sale->vehicle_make && ! $sale->vehicle_model && ! $sale->vehicle_sold)
                                        —
                                    @endif
                                </td>
                                <td class="px-1.5 py-1.5 whitespace-nowrap text-gray-700">{{ $sale->stock_number ?? '—' }}</td>
                                <td class="px-1.5 py-1.5 whitespace-nowrap text-right text-gray-700 tabular-nums">{{ format_rand_or_dash($sale->selling_price) }}</td>
                                <td class="px-1.5 py-1.5 whitespace-nowrap text-right text-gray-700 tabular-nums">{{ format_rand_or_dash($sale->gross_profit) }}</td>
                                <td class="px-1.5 py-1.5 whitespace-nowrap">
                                    @if ($hasFinance)
                                        <span class="inline-flex rounded-full bg-emerald-50 px-2 py-0.5 text-[10px] font-semibold text-emerald-700">Yes</span>
                                    @else
                                        <span class="inline-flex rounded-full bg-gray-100 px-2 py-0.5 text-[10px] font-semibold text-gray-700">No</span>
                                    @endif
                                </td>
                                <td class="px-2 py-2 whitespace-nowrap text-gray-700">{{ $finance?->finance_house ?? '—' }}</td>
                                <td class="px-2 py-2 whitespace-nowrap text-right text-gray-700 tabular-nums">{{ format_rand_or_dash($finance?->amount_financed) }}</td>
                                <td class="px-2 py-2 whitespace-nowrap text-right text-gray-700 tabular-nums">{{ format_rand_or_dash($finance?->deposit) }}</td>
                                <td class="px-2 py-2 whitespace-nowrap text-right text-gray-700">{{ $finance?->term_months ? (int) $finance->term_months.'m' : '—' }}</td>
                                <td class="px-2 py-2 whitespace-nowrap text-gray-700">
                                    @if ($finance)
                                        <span class="inline-flex rounded-full px-2 py-0.5 text-[10px] font-semibold {{ $finance->statusBadgeClasses() }}">
                                            {{ $finance->statusLabel() }}
                                        </span>
                                    @else
                                        —
                                    @endif
                                </td>
                                <td class="px-2 py-2 whitespace-nowrap text-gray-700">{{ $finance?->reference_number ?? '—' }}</td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="17" class="px-2 py-4 text-center text-gray-500">
                                    No sales for this selection.
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            @if (($sales ?? null) instanceof \Illuminate\Contracts\Pagination\Paginator || ($sales ?? null) instanceof \Illuminate\Contracts\Pagination\LengthAwarePaginator)
                <div class="pt-2">
                    {{ $sales->links() }}
                </div>
            @endif
        </div>
    </div>
</x-app-layout>