@section('title', $d->name)
<div>
    <x-baseview title="{{ __('Ficha do motorista') }}">

        {{-- ============ cabeçalho de identidade (padrão Clerk) ============ --}}
        <div class="p-4 mt-4 bg-white border rounded-lg">
            <div class="flex flex-wrap items-center justify-between gap-3">
                <div class="flex items-center gap-3" style="min-width:0">
                    <img src="{{ $d->photo }}" alt=""
                        style="width:56px;height:56px;border-radius:9999px;object-fit:cover;border:1px solid #e4e9e8;flex-shrink:0" />
                    <div style="min-width:0">
                        <div class="flex flex-wrap items-center gap-2">
                            <p class="text-lg font-bold text-gray-900">{{ $d->name }}</p>
                            <x-km.chip tipo="{{ $d->is_active ? 'ok' : 'erro' }}">{{ $d->is_active ? __('Active') : __('Blocked') }}</x-km.chip>
                            <x-km.chip tipo="{{ $d->is_online ? 'info' : 'neutro' }}">{{ $d->is_online ? __('Online') : __('Offline') }}</x-km.chip>
                        </div>
                        <p class="text-xs text-gray-500" style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap">
                            {{ $d->email }} · {{ $d->phone }}
                            @if ($d->cpf) · CPF {{ $d->cpf }} @endif
                            @if ($d->vehicle) · {{ $d->vehicle->reg_no }} {{ $d->vehicle->color }} @endif
                        </p>
                    </div>
                </div>
                <div class="flex flex-wrap items-center gap-2">
                    @if ($solicitacao && $solicitacao->status === 'pending')
                        <a href="{{ route('drivers.documents.review') }}"
                            class="px-3 text-sm font-semibold rounded-lg border"
                            style="color:#92400e;border-color:#fcd34d;background:#fffbeb;padding-top:7px;padding-bottom:7px">{{ __('Revisar documentos') }}</a>
                    @endif
                    @if ($d->is_online)
                        <button wire:click="tirarDoAr" class="px-3 text-sm border rounded-lg"
                            style="padding-top:7px;padding-bottom:7px">{{ __('Set offline') }}</button>
                    @endif
                    @if ($d->is_active)
                        <button wire:click="bloquear" class="px-4 text-sm font-semibold rounded-lg border"
                            style="color:#b91c1c;border-color:#fecaca;background:#fef2f2;padding-top:7px;padding-bottom:7px">{{ __('Block') }}</button>
                    @else
                        <button wire:click="desbloquear" class="px-4 text-sm font-semibold text-white rounded-lg"
                            style="background:#15803d;padding-top:8px;padding-bottom:8px">{{ __('Unblock') }}</button>
                    @endif
                </div>
            </div>
        </div>

        {{-- ============ prontidão (banner 1Password): por que (não) recebe corrida ============ --}}
        @php $pendentes = collect($prontidao)->where('ok', false)->count(); @endphp
        <div class="p-4 mt-4 bg-white border rounded-lg" style="border-left:4px solid {{ $pendentes ? '#d97706' : '#059669' }}">
            <div class="flex flex-wrap items-center justify-between gap-2">
                <p class="text-sm font-bold {{ $pendentes ? '' : 'text-gray-700' }}" style="{{ $pendentes ? 'color:#92400e' : '' }}">
                    {{ $pendentes ? __('Not ready to work') : __('Ready to work') }}
                </p>
                @if ($pendentes)
                    <x-km.chip tipo="atencao">{{ $pendentes }} {{ __('pending item(s)') }}</x-km.chip>
                @else
                    <x-km.chip tipo="ok">{{ __('tudo certo') }}</x-km.chip>
                @endif
            </div>
            <div class="grid grid-cols-1 gap-2 mt-3 lg:grid-cols-2">
                @foreach ($prontidao as $p)
                    <div class="flex gap-2 text-sm">
                        <span style="flex-shrink:0;font-weight:700;color:{{ $p['ok'] ? (!empty($p['aviso']) ? '#d97706' : '#059669') : '#dc2626' }}">
                            {{ $p['ok'] ? (!empty($p['aviso']) ? '!' : '✓') : '✗' }}
                        </span>
                        <div style="min-width:0">
                            <p class="font-semibold text-gray-800">{{ $p['titulo'] }}</p>
                            <p class="text-xs text-gray-500">{{ $p['detalhe'] }}</p>
                        </div>
                    </div>
                @endforeach
            </div>
            <p class="mt-3 text-[11px] text-gray-400">
                {{ __('The app also requires the "display over other apps" permission and battery optimization off — neither is visible from here.') }}
            </p>
        </div>

        {{-- ============ desempenho e dinheiro ============ --}}
        <x-km.kpis>
            <x-km.kpi valor="{{ $stats['corridas'] }}" rotulo="{{ __('Rides') }}" />
            <x-km.kpi valor="{{ $stats['concluidas'] }}" rotulo="{{ __('Completed') }}" cor="#047857" />
            <x-km.kpi valor="{{ $stats['corridas30'] }}" rotulo="{{ __('Rides (30d)') }}" />
            <x-km.kpi valor="{{ $stats['taxaCancel'] }}%" rotulo="{{ __('Cancellation rate (30d)') }}"
                cor="{{ $stats['taxaCancel'] > 15 ? '#dc2626' : '#047857' }}" />
            <x-km.kpi valor="R$ {{ number_format($stats['ganhos'], 2, ',', '.') }}" rotulo="{{ __('Earned') }}" cor="#047857" />
            <x-km.kpi valor="R$ {{ number_format($stats['aReceber'], 2, ',', '.') }}" rotulo="{{ __('To receive') }}" cor="#b45309" />
        </x-km.kpis>

        {{-- ============ conteúdo: documentos à esquerda, trilho à direita ============ --}}
        <div class="grid gap-4 mt-4 lg:grid-cols-3">
            <div class="lg:col-span-2 space-y-4">

                <x-km.card titulo="{{ __('Documents') }}"
                    subtitulo="{{ $solicitacao ? __('Solicitação') . ': ' . (['pending' => 'em análise', 'approved' => 'aprovada', 'rejected' => 'recusada'][$solicitacao->status] ?? $solicitacao->status) : '' }}">
                    <div class="grid gap-3 md:grid-cols-2">
                        @forelse ($docs as $doc)
                            <div class="border rounded-lg overflow-hidden">
                                @if (isMediaImage($doc))
                                    <a href="{{ route('secure.media', $doc->id) }}" target="_blank">
                                        <img src="{{ route('secure.media', $doc->id) }}"
                                            style="width:100%;max-height:15rem;object-fit:contain;background:#111827" />
                                    </a>
                                @else
                                    <a href="{{ route('secure.media', $doc->id) }}" target="_blank" class="block p-3 text-sm">{{ $doc->file_name }}</a>
                                @endif
                                <p class="px-2 py-1 text-[11px] font-bold uppercase text-gray-500" style="background:#f8faf9">
                                    {{ in_array($doc->name, ['cnh', 'crlv', 'selfie']) ? strtoupper($doc->name) : $doc->file_name }}
                                </p>
                            </div>
                        @empty
                            <p class="text-sm text-gray-400">{{ __('No documents found') }}</p>
                        @endforelse
                    </div>

                    @if ($analises->count())
                        <p class="mt-4 text-xs font-bold text-gray-500 uppercase">{{ __('Automatic analysis') }}</p>
                        @foreach ($analises as $a)
                            @php $res = json_decode($a->result ?? '{}', true); @endphp
                            <div class="px-3 py-2 mt-2 text-xs rounded-lg"
                                style="background:{{ $a->code_message === 'approved' ? '#f0fdf4' : ($a->code_message === 'rejected' ? '#fef2f2' : '#fffbeb') }}">
                                <b>{{ $a->service }}</b> · {{ $a->code_message }}
                                @foreach (($res['motivos'] ?? []) as $m)
                                    <div class="text-gray-600">· {{ $m }}</div>
                                @endforeach
                            </div>
                        @endforeach
                    @endif
                </x-km.card>

                <x-km.card titulo="{{ __('Last rides') }}" :semPadding="true">
                    <div class="divide-y" style="border-color:#f1f4f3">
                        @forelse ($ultimasCorridas as $c)
                            <div class="flex flex-wrap items-center justify-between gap-2 px-3 py-2 text-sm">
                                <span>
                                    <a href="{{ route('orders.details', ['code' => $c->code]) }}" target="_blank"
                                        class="font-semibold" style="color:#15803d">#{{ $c->code }}</a>
                                    <span class="text-xs text-gray-400">· {{ $c->created_at->format('d/m/Y H:i') }}</span>
                                </span>
                                <span class="flex items-center gap-2">
                                    <span style="font-variant-numeric:tabular-nums">R$ {{ number_format((float) $c->total, 2, ',', '.') }}</span>
                                    <x-km.chip tipo="{{ $c->status === 'delivered' ? 'ok' : (in_array($c->status, ['cancelled', 'failed']) ? 'erro' : 'info') }}">
                                        {{ ['delivered' => 'Concluída', 'cancelled' => 'Cancelada', 'failed' => 'Falhou', 'pending' => 'Aguardando'][$c->status] ?? 'Em andamento' }}
                                    </x-km.chip>
                                </span>
                            </div>
                        @empty
                            <p class="px-3 py-3 text-sm text-gray-400">{{ __('No rides yet.') }}</p>
                        @endforelse
                    </div>
                </x-km.card>
            </div>

            {{-- trilho direito --}}
            <div class="space-y-4">
                @isset($rosto)
                    @php
                        $cor = $rosto['decisao'] === 'aprova' ? '#059669' : ($rosto['decisao'] === 'recusa' ? '#dc2626' : '#d97706');
                    @endphp
                    <div class="p-3 bg-white border rounded-lg" style="border-left:4px solid {{ $cor }}">
                        <p class="text-xs font-bold text-gray-500 uppercase">{{ __('Comparação facial') }}</p>
                        <div class="flex items-center gap-2 mt-2">
                            @isset($rosto['selfie_id'])
                                <a href="{{ route('secure.media', $rosto['selfie_id']) }}" target="_blank">
                                    <img src="{{ route('secure.media', $rosto['selfie_id']) }}" alt="selfie"
                                        style="width:72px;height:90px;object-fit:cover;border-radius:8px;border:1px solid #e4e9e8">
                                </a>
                            @endisset
                            @isset($rosto['doc_id'])
                                <a href="{{ route('secure.media', $rosto['doc_id']) }}" target="_blank">
                                    <img src="{{ route('secure.media', $rosto['doc_id']) }}" alt="documento"
                                        style="width:72px;height:90px;object-fit:contain;background:#fff;border-radius:8px;border:1px solid #e4e9e8">
                                </a>
                            @endisset
                            <div style="flex:1;min-width:0">
                                <p class="text-2xl font-bold" style="color:{{ $cor }}">
                                    {{ $rosto['percentual'] !== null ? $rosto['percentual'] . '%' : '·' }}
                                </p>
                                <p class="text-xs text-gray-600">{{ $rosto['motivo'] ?? '' }}</p>
                            </div>
                        </div>
                        @isset($rosto['limiar_aprova'])
                            <p class="mt-2 text-[10px] text-gray-400">
                                {{ __('aprova acima de') }} {{ (int) round($rosto['limiar_aprova'] * 100) }}% ·
                                {{ __('recusa abaixo de') }} {{ (int) round($rosto['limiar_recusa'] * 100) }}%
                            </p>
                        @endisset
                    </div>
                @endisset

                @if (isset($consultasOficiais) && $consultasOficiais->count())
                    <div class="p-3 bg-white border rounded-lg">
                        <p class="text-xs font-bold text-gray-500 uppercase">{{ __('Consultas na base oficial') }}</p>
                        @foreach ($consultasOficiais as $c)
                            <div class="mt-2 text-xs">
                                <p class="flex items-center justify-between">
                                    <b class="text-gray-700">{{ $c->service }}</b>
                                    <x-km.chip tipo="{{ $c->success ? 'ok' : 'erro' }}">{{ $c->success ? __('respondeu') : __('não respondeu') }}</x-km.chip>
                                </p>
                                <p class="text-gray-400">{{ $c->created_at->format('d/m/Y H:i') }}
                                    @if ((float) $c->price > 0) · R$ {{ number_format((float) $c->price, 2, ',', '.') }} @endif
                                </p>
                                @if (!$c->success && $c->code_message)
                                    <p style="color:#b91c1c">{{ $c->code_message }}</p>
                                @endif
                            </div>
                        @endforeach
                    </div>
                @endif

                @if ($d->vehicle)
                    <div class="p-3 bg-white border rounded-lg">
                        <p class="text-xs font-bold text-gray-500 uppercase">{{ __('Veículo') }}</p>
                        <p class="mt-1 text-sm font-semibold text-gray-800">{{ $d->vehicle->reg_no }}</p>
                        <p class="text-xs text-gray-500">
                            {{ optional(optional($d->vehicle->car_model)->car_make)->name }}
                            {{ optional($d->vehicle->car_model)->name }}
                            · {{ $d->vehicle->color }}
                            @if ($d->vehicle->year) · {{ $d->vehicle->year }} @endif
                        </p>
                        <p class="mt-1">
                            <x-km.chip tipo="{{ $d->vehicle->is_active && $d->vehicle->verified ? 'ok' : 'atencao' }}">
                                {{ $d->vehicle->is_active && $d->vehicle->verified ? __('liberado') : __('não liberado') }}
                            </x-km.chip>
                        </p>
                    </div>
                @endif

                <div class="p-3 bg-white border rounded-lg">
                    <p class="text-xs font-bold text-gray-500 uppercase">{{ __('Incidents') }}</p>
                    @forelse ($ocorrencias as $o)
                        <div class="mt-2 text-xs" style="border-left:3px solid {{ $o->type === 'sos' ? '#dc2626' : '#d1d5db' }};padding-left:8px">
                            <p class="font-semibold text-gray-700">{{ $o->tipo_label }} · {{ $o->status_label }}</p>
                            <p class="text-gray-400">{{ $o->created_at->format('d/m/Y H:i') }}</p>
                            @if ($o->resolution)
                                <p class="text-gray-500">{{ $o->resolution }}</p>
                            @endif
                        </div>
                    @empty
                        <p class="mt-1 text-xs text-gray-400">{{ __('No incidents for this driver.') }}</p>
                    @endforelse
                </div>
            </div>
        </div>

    </x-baseview>
</div>