{{-- Corridas por dia · 14 dias (área estilo Stripe, SVG puro) + resumo. --}}
@php $q = $this->serieQuinzena; @endphp
@if ($q)
    <div class="grid gap-4 lg:grid-cols-3">
        <div class="p-4 bg-white border rounded-lg lg:col-span-2">
            <div class="flex items-center justify-between">
                <p class="text-sm font-bold text-gray-700">{{ __('Corridas por dia') }}</p>
                <p class="text-xs text-gray-400">{{ __('últimos 14 dias') }}</p>
            </div>
            <div class="mt-3">
                <svg class="w-full" style="height:150px" viewBox="0 0 600 150" preserveAspectRatio="none" aria-hidden="true">
                    <line x1="4" y1="146" x2="596" y2="146" stroke="#eef1f0" stroke-width="1" />
                    <line x1="4" y1="75" x2="596" y2="75" stroke="#f3f6f4" stroke-width="1" />
                    <polygon points="4,146 {{ $q['area'] }} 596,146" fill="#15803d" opacity=".07" />
                    <polyline points="{{ $q['area'] }}" fill="none" stroke="#15803d" stroke-width="2"
                        vector-effect="non-scaling-stroke" stroke-linejoin="round" stroke-linecap="round" />
                </svg>
                <div class="flex justify-between mt-1 text-[10px] text-gray-400">
                    @foreach ($q['dias'] as $d)
                        @if ($loop->index % 2 === 0)
                            <span>{{ $d['rotulo'] }}</span>
                        @endif
                    @endforeach
                </div>
            </div>
        </div>
        <div class="p-4 bg-white border rounded-lg">
            <p class="text-sm font-bold text-gray-700">{{ __('Na quinzena') }}</p>
            <div class="mt-3 space-y-3">
                <div>
                    <p class="text-xs text-gray-500">{{ __('Corridas') }}</p>
                    <p class="text-xl font-bold text-gray-900" style="font-variant-numeric:tabular-nums">{{ $q['totalCorridas'] }}</p>
                </div>
                <div>
                    <p class="text-xs text-gray-500">{{ __('Receita') }}</p>
                    <p class="text-xl font-bold" style="color:#047857;font-variant-numeric:tabular-nums">{{ $q['totalReceita'] }}</p>
                </div>
                <div>
                    <p class="text-xs text-gray-500">{{ __('Ticket médio') }}</p>
                    <p class="text-xl font-bold text-gray-900" style="font-variant-numeric:tabular-nums">{{ $q['ticketMedio'] }}</p>
                </div>
                <a href="{{ route('operations.center') }}" class="inline-block text-xs font-semibold"
                    style="color:#15803d">{{ __('Abrir a Central de Operações →') }}</a>
            </div>
        </div>
    </div>
@endif