@section('title', __('Atendimento · Relatório'))
<div>
    <x-baseview title="{{ __('Atendimento · Relatório') }}">

        {{-- o agora --}}
        <x-km.kpis>
            <x-km.kpi valor="{{ $agora['aguardando'] }}" rotulo="{{ __('Na fila agora') }}"
                cor="{{ $agora['aguardando'] > 0 ? '#d97706' : '#111827' }}" />
            <x-km.kpi valor="{{ $agora['emAtendimento'] }}" rotulo="{{ __('Em atendimento') }}" cor="#1d4ed8" />
            <x-km.kpi valor="{{ $agora['comIa'] }}" rotulo="{{ __('IA atendendo') }}" cor="#7c3aed" />
            <x-km.kpi valor="{{ $agora['chamadosAbertos'] }}" rotulo="{{ __('Chamados abertos') }}" />
            <x-km.kpi valor="{{ $agora['chamadosVencidos'] }}" rotulo="{{ __('Chamados vencidos') }}"
                cor="{{ $agora['chamadosVencidos'] > 0 ? '#dc2626' : '#111827' }}" />
            <div class="px-3 py-2 bg-white border rounded-lg">
                <select wire:model="dias" class="w-full text-sm border-gray-300 rounded-md">
                    <option value="1">{{ __('Hoje') }}</option>
                    <option value="7">{{ __('Últimos 7 dias') }}</option>
                    <option value="30">{{ __('Últimos 30 dias') }}</option>
                </select>
                <p class="mt-1 text-[11px] text-gray-500">{{ __('Período dos números abaixo') }}</p>
            </div>
        </x-km.kpis>

        {{-- o período --}}
        <x-km.kpis>
            <x-km.kpi valor="{{ $p['abertos'] }}" rotulo="{{ __('Atendimentos abertos') }}" />
            <x-km.kpi valor="{{ $p['fechados'] }}" rotulo="{{ __('Encerrados') }}" cor="#047857" />
            <x-km.kpi valor="{{ $p['pctIa'] }}%" rotulo="{{ __('Resolvidos pela IA (do total encerrado)') }}" cor="#7c3aed" />
            <x-km.kpi valor="{{ \App\Models\SupportTicket::duracao($p['filaMediaSeg']) }}" rotulo="{{ __('Espera média até o atendente') }}"
                cor="#d97706" />
            <x-km.kpi valor="{{ \App\Models\SupportTicket::duracao($p['atendimentoMediaSeg']) }}" rotulo="{{ __('Duração média com o atendente') }}"
                cor="#1d4ed8" />
            <x-km.kpi valor="{{ \App\Models\SupportTicket::duracao($p['primeiraMediaSeg']) }}" rotulo="{{ __('1ª resposta média (IA conta)') }}" />
        </x-km.kpis>

        <div class="grid gap-4 mt-4 lg:grid-cols-3">
            {{-- série --}}
            <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">{{ __('Atendimentos por dia') }}</p>
                    <p class="text-xs text-gray-400">{{ __('últimos 14 dias · pico') }} {{ $maxSerie }}</p>
                </div>
                <svg class="w-full mt-3" style="height:130px" viewBox="0 0 600 130" preserveAspectRatio="none" aria-hidden="true">
                    <line x1="4" y1="126" x2="596" y2="126" stroke="#eef1f0" stroke-width="1" />
                    <polygon points="4,126 {{ $area }} 596,126" fill="#7c3aed" opacity=".08" />
                    <polyline points="{{ $area }}" fill="none" stroke="#7c3aed" 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 ($serie as $d)
                        @if ($loop->index % 2 === 0)
                            <span>{{ $d['rotulo'] }}</span>
                        @endif
                    @endforeach
                </div>
            </div>

            {{-- desfechos --}}
            <div class="p-4 bg-white border rounded-lg">
                <p class="text-sm font-bold text-gray-700">{{ __('Desfechos do período') }}</p>
                <div class="mt-2 space-y-1">
                    @forelse ($p['desfechos'] as $desfecho => $qtd)
                        <p class="flex items-center justify-between text-sm">
                            <x-km.chip tipo="{{ in_array($desfecho, ['resolvido', 'resolvido_pela_ia']) ? 'ok' : ($desfecho === 'sem_procedencia' ? 'erro' : 'neutro') }}">
                                {{ \App\Models\SupportTicket::DESFECHOS[$desfecho] ?? $desfecho }}
                            </x-km.chip>
                            <b style="font-variant-numeric:tabular-nums">{{ $qtd }}</b>
                        </p>
                    @empty
                        <p class="text-xs text-gray-400">{{ __('Nenhum encerramento no período.') }}</p>
                    @endforelse
                </div>
                <a href="{{ route('support.inbox') }}" class="inline-block mt-3 text-xs font-semibold"
                    style="color:#15803d">{{ __('Abrir o Atendimento →') }}</a>
            </div>
        </div>

        {{-- dinheiro devolvido: quem autorizou, de qual corrida e por que --}}
        <x-km.card titulo="{{ __('Devoluções ao cliente no período') }}">
            <x-km.aviso tipo="{{ $estornoTotal > 0 ? 'atencao' : 'info' }}">
                {{ __('Total devolvido') }}: <b>{{ currencyFormat($estornoTotal) }}</b>
                · {{ __('sempre pelo mesmo meio de pagamento usado pelo cliente') }}
            </x-km.aviso>
            <x-km.tabela titulo="{{ $estornos->count() }} {{ __('devoluções') }}">
                <x-slot name="cabecalho">
                    <th class="px-3 py-2" style="text-align:left">{{ __('Quando') }}</th>
                    <th class="px-3 py-2" style="text-align:left">{{ __('Corrida') }}</th>
                    <th class="px-3 py-2" style="text-align:left">{{ __('Valor') }}</th>
                    <th class="px-3 py-2" style="text-align:left">{{ __('Meio') }}</th>
                    <th class="px-3 py-2" style="text-align:left">{{ __('Quem autorizou') }}</th>
                    <th class="px-3 py-2" style="text-align:left">{{ __('Motivo') }}</th>
                    <th class="px-3 py-2" style="text-align:left">{{ __('Protocolo') }}</th>
                </x-slot>
                @forelse ($estornos as $e)
                    <tr>
                        <td style="white-space:nowrap">{{ $e->created_at->format('d/m/Y H:i') }}</td>
                        <td>
                            @if ($e->order)
                                <a href="{{ route('orders.details', ['code' => $e->order->code]) }}" target="_blank"
                                    style="color:#15803d">#{{ $e->order->code }}</a>
                            @else
                                -
                            @endif
                        </td>
                        <td><b>{{ currencyFormat((float) $e->amount) }}</b></td>
                        <td>{{ $e->method === 'PIX' ? 'PIX' : __('Cartão') }}</td>
                        <td>{{ optional($e->operador)->name ?: '-' }}</td>
                        <td class="text-xs">{{ $e->reason }}</td>
                        <td class="text-xs">{{ optional($e->ticket)->protocol ?: '-' }}</td>
                    </tr>
                @empty
                    <tr><td colspan="7" class="text-center text-gray-400" style="padding:1.2rem">{{ __('Nenhuma devolução no período.') }}</td></tr>
                @endforelse
            </x-km.tabela>
        </x-km.card>

    </x-baseview>
</div>