@section('title', __('Document Validation'))
<div>
    <x-baseview title="{{ __('Document Validation') }}">

        @if (!$svcEnabled)
            <x-km.aviso tipo="atencao">
                {{ __('Infosimples token is not configured yet.') }}
                <a href="{{ route('settings.docval') }}" style="color:#1d4ed8;text-decoration:underline">{{ __('Open settings') }}</a>
            </x-km.aviso>
        @endif
        @if ($isTestMode)
            <x-km.aviso tipo="atencao">
                {{ __('TEST MODE is on — all queries are SIMULATED and free.') }}
                <a href="{{ route('settings.docval') }}" style="color:#1d4ed8;text-decoration:underline">{{ __('settings') }}</a>
            </x-km.aviso>
        @endif

        <x-km.kpis colunas="4">
            <x-km.kpi valor="{{ $totalCount }}" rotulo="{{ __('Queries made') }}" />
            <x-km.kpi valor="{{ $monthCount }}" rotulo="{{ __('This month') }}" />
            <x-km.kpi valor="R$ {{ number_format($totalSpent, 2, ',', '.') }}" rotulo="{{ __('Total spent') }}" cor="#b45309" />
            <div class="px-3 py-2 bg-white border rounded-lg">
                <p class="text-lg font-bold">Infosimples</p>
                <p class="text-[11px] text-gray-500">{{ __('Provider') }} · <a href="{{ route('settings.docval') }}" style="color:#1d4ed8;text-decoration:underline">{{ __('settings') }}</a></p>
            </div>
        </x-km.kpis>

        <x-km.filtros>
            <x-km.filtro rotulo="{{ __('Search name, email or CPF') }}">
                <input type="text" wire:model.debounce.500ms="search" placeholder="{{ __('Search name, email or CPF') }}"
                    class="text-sm border-gray-300 rounded-md" style="width:260px" />
            </x-km.filtro>
            <div style="margin-left:auto;align-self:center">
                <a href="{{ route('settings.docval') }}" class="text-xs" style="color:#1d4ed8;text-decoration:underline">{{ __('Validation settings') }}</a>
            </div>
        </x-km.filtros>

        <x-km.tabela titulo="{{ __('Drivers') }}">
            <x-slot name="cabecalho">
                <th class="px-3 py-2" style="text-align:left">ID</th>
                <th class="px-3 py-2" style="text-align:left">{{ __('Driver') }}</th>
                <th class="px-3 py-2" style="text-align:left">CPF</th>
                <th class="px-3 py-2" style="text-align:left">{{ __('Active') }}</th>
                <th class="px-3 py-2" style="text-align:left">CPF ✓</th>
                <th class="px-3 py-2" style="text-align:left">CNH ✓</th>
                <th class="px-3 py-2" style="text-align:left">{{ __('Vehicle') }} ✓</th>
                <th class="px-3 py-2"></th>
            </x-slot>
            @forelse ($drivers as $driver)
                @php($lv = $latestByDriver->get($driver->id, []))
                <tr>
                    <td>{{ $driver->id }}</td>
                    <td>{{ $driver->name }}<br /><span style="font-size:11px;color:#9ca3af">{{ $driver->email }}</span></td>
                    <td>{{ $driver->cpf ?: '·' }}</td>
                    <td>
                        <x-km.chip tipo="{{ $driver->is_active ? 'ok' : 'atencao' }}">{{ $driver->is_active ? __('Yes') : __('No') }}</x-km.chip>
                    </td>
                    @foreach (['cpf', 'cnh', 'veiculo'] as $cat)
                        <td>
                            @if (isset($lv[$cat]))
                                <span title="{{ $lv[$cat]->code_message }} ({{ $lv[$cat]->created_at->format('d/m H:i') }})"
                                    style="color:{{ $lv[$cat]->success ? '#16a34a' : '#dc2626' }};font-weight:700">
                                    {{ $lv[$cat]->success ? '✔' : '✖' }}
                                </span>
                                <span style="font-size:11px;color:#9ca3af">{{ $lv[$cat]->created_at->format('d/m') }}</span>
                            @else
                                <span style="color:#d1d5db">·</span>
                            @endif
                        </td>
                    @endforeach
                    <td style="text-align:right;white-space:nowrap">
                        <button wire:click="analyzeDriverDocs({{ $driver->id }})" wire:loading.attr="disabled"
                            title="{{ __('Runs OCR on every uploaded document (CNH, then CRLV)') }}"
                            style="padding:.35rem .7rem;color:#1a4531;border-radius:8px;background:#fff;font-weight:600;border:1px solid #1a4531;font-size:.72rem">{{ __('Auto OCR') }}</button>
                        <button wire:click="openValidate({{ $driver->id }})"
                            style="padding:.35rem .8rem;color:#fff;border-radius:8px;background:#1a4531;font-weight:600;border:none;font-size:.75rem">{{ __('Validate') }}</button>
                    </td>
                </tr>
            @empty
                <tr><td colspan="8" class="text-center text-gray-400" style="padding:1.5rem">{{ __('No drivers found') }}</td></tr>
            @endforelse
        </x-km.tabela>
        <div wire:loading wire:target="analyzeDriverDocs" class="mt-2 text-xs text-gray-500">{{ __('Analyzing documents, please wait...') }}</div>

        <x-km.tabela titulo="{{ __('Validation history') }}">
            <x-slot name="cabecalho">
                <th class="px-3 py-2" style="text-align:left">{{ __('Date') }}</th>
                <th class="px-3 py-2" style="text-align:left">{{ __('Driver') }}</th>
                <th class="px-3 py-2" style="text-align:left">{{ __('Service') }}</th>
                <th class="px-3 py-2" style="text-align:left">{{ __('Result') }}</th>
                <th class="px-3 py-2" style="text-align:right">{{ __('Cost') }}</th>
                <th class="px-3 py-2" style="text-align:left">{{ __('Details') }}</th>
            </x-slot>
            @forelse ($history as $h)
                <tr style="vertical-align:top">
                    <td style="white-space:nowrap">{{ $h->created_at->format('d/m/Y H:i') }}</td>
                    <td>{{ optional($h->user)->name ?: '·' }}</td>
                    <td style="font-family:monospace;font-size:11px">{{ $h->service }}
                        @if (\Illuminate\Support\Str::startsWith((string) $h->code_message, 'SIMULADO'))
                            <x-km.chip tipo="atencao">{{ __('TEST') }}</x-km.chip>
                        @endif
                    </td>
                    <td>
                        <span style="color:{{ $h->success ? '#16a34a' : '#dc2626' }};font-weight:600">{{ $h->success ? __('OK') : __('Error') }}</span>
                        <span style="font-size:11px;color:#6b7280">({{ $h->code }}) {{ \Illuminate\Support\Str::limit($h->code_message, 60) }}</span>
                    </td>
                    <td style="text-align:right">{{ $h->price !== null ? 'R$ ' . number_format($h->price, 2, ',', '.') : '·' }}</td>
                    <td>
                        <details>
                            <summary style="cursor:pointer;color:#1d4ed8;font-size:11px">{{ __('view') }}</summary>
                            <pre style="max-height:260px;overflow:auto;background:#f9fafb;border:1px solid #e5e7eb;border-radius:8px;padding:.5rem;font-size:.66rem;white-space:pre-wrap;word-break:break-all">{{ json_encode(['args' => $h->args, 'result' => $h->result, 'errors' => $h->errors], JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) }}</pre>
                            @foreach ((array) $h->receipts as $r)
                                <a href="{{ $r }}" target="_blank" style="display:block;font-size:11px;color:#1d4ed8;text-decoration:underline">{{ __('Receipt') }} {{ $loop->iteration }}</a>
                            @endforeach
                        </details>
                    </td>
                </tr>
            @empty
                <tr><td colspan="6" class="text-center text-gray-400" style="padding:1.5rem">{{ __('No validations yet') }}</td></tr>
            @endforelse
        </x-km.tabela>
    </x-baseview>

    {{-- modal validar --}}
    <div x-data="{ open: @entangle('showValidate') }">
        <x-modal :withForm="false">
            <p class="text-xl font-semibold">{{ __('Validate') }}: {{ $valUserName }}</p>

            <p style="font-size:.7rem;color:#6b7280;margin-top:.4rem">{{ __('Official queries') }}</p>
            <div class="flex flex-wrap gap-2" style="margin:.2rem 0 .3rem">
                @foreach (['cpf' => 'CPF', 'cnh' => 'CNH', 'veiculo' => __('Vehicle'), 'custom' => __('Custom')] as $m => $label)
                    <button type="button" wire:click="$set('mode', '{{ $m }}')"
                        style="padding:.35rem .8rem;border-radius:8px;font-size:.78rem;font-weight:600;border:1px solid #1a4531;{{ $mode === $m ? 'background:#1a4531;color:#fff' : 'background:#fff;color:#1a4531' }}">{{ $label }}</button>
                @endforeach
            </div>
            <p style="font-size:.7rem;color:#6b7280">{{ __('Image analysis (uploaded documents)') }}</p>
            <div class="flex flex-wrap gap-2" style="margin:.2rem 0 .6rem">
                @foreach (['ocr_cnh' => 'OCR CNH', 'ocr_crlv' => 'OCR CRLV', 'qr' => 'QR Code'] as $m => $label)
                    <button type="button" wire:click="$set('mode', '{{ $m }}')"
                        style="padding:.35rem .8rem;border-radius:8px;font-size:.78rem;font-weight:600;border:1px solid #1d4ed8;{{ $mode === $m ? 'background:#1d4ed8;color:#fff' : 'background:#fff;color:#1d4ed8' }}">{{ $label }}</button>
                @endforeach
            </div>

            <div class="space-y-2">
                @if ($mode === 'cpf')
                    <div><label class="text-xs text-gray-500">CPF</label>
                        <input type="text" wire:model.defer="cpf" class="w-full px-3 py-2 border rounded" /></div>
                    <div><label class="text-xs text-gray-500">{{ __('Birth date') }} (dd/mm/aaaa)</label>
                        <input type="text" wire:model.defer="birthdate" placeholder="01/01/1990" class="w-full px-3 py-2 border rounded" /></div>
                    @error('cpf')<p class="text-xs" style="color:#dc2626">{{ $message }}</p>@enderror
                    @error('birthdate')<p class="text-xs" style="color:#dc2626">{{ $message }}</p>@enderror
                @elseif ($mode === 'cnh')
                    <div class="flex gap-2">
                        <div style="width:110px"><label class="text-xs text-gray-500">UF</label>
                            <select wire:model.defer="uf" class="w-full px-2 py-2 border rounded">
                                @foreach ($ufs as $u)<option value="{{ strtolower($u) }}">{{ $u }}</option>@endforeach
                            </select></div>
                        <div class="flex-1"><label class="text-xs text-gray-500">CPF</label>
                            <input type="text" wire:model.defer="cpf" class="w-full px-3 py-2 border rounded" /></div>
                    </div>
                    <div><label class="text-xs text-gray-500">{{ __('CNH number (registro) — required by some states') }}</label>
                        <input type="text" wire:model.defer="cnhRegistro" class="w-full px-3 py-2 border rounded" /></div>
                    <p class="text-xs text-gray-500">{{ __('Required fields vary by state') }} — <a href="https://infosimples.com/consultas/" target="_blank" style="color:#1d4ed8;text-decoration:underline">{{ __('see per-state docs') }}</a> · {{ __('Tip: run OCR CNH first to extract the registro automatically.') }}</p>
                    @error('uf')<p class="text-xs" style="color:#dc2626">{{ $message }}</p>@enderror
                    @error('cpf')<p class="text-xs" style="color:#dc2626">{{ $message }}</p>@enderror
                @elseif ($mode === 'veiculo')
                    <div class="flex gap-2">
                        <div style="width:110px"><label class="text-xs text-gray-500">UF</label>
                            <select wire:model.defer="uf" class="w-full px-2 py-2 border rounded">
                                @foreach ($ufs as $u)<option value="{{ strtolower($u) }}">{{ $u }}</option>@endforeach
                            </select></div>
                        <div class="flex-1"><label class="text-xs text-gray-500">{{ __('Plate') }}</label>
                            <input type="text" wire:model.defer="placa" class="w-full px-3 py-2 border rounded uppercase" /></div>
                    </div>
                    <div><label class="text-xs text-gray-500">Renavam</label>
                        <input type="text" wire:model.defer="renavam" class="w-full px-3 py-2 border rounded" /></div>
                    @error('uf')<p class="text-xs" style="color:#dc2626">{{ $message }}</p>@enderror
                    @error('placa')<p class="text-xs" style="color:#dc2626">{{ $message }}</p>@enderror
                @elseif (in_array($mode, ['ocr_cnh', 'ocr_crlv', 'qr']))
                    <div>
                        <label class="text-xs text-gray-500">{{ __('Image source') }}</label>
                        <select wire:model="ocrSource" class="w-full px-3 py-2 border rounded">
                            <option value="">— {{ __('choose') }} —</option>
                            @foreach ($driverDocs as $id => $label)
                                <option value="{{ $id }}">{{ $label }}</option>
                            @endforeach
                            <option value="upload">{{ __('Upload a file now (admin)') }}</option>
                        </select>
                        @error('ocrSource')<p class="text-xs" style="color:#dc2626">{{ $message }}</p>@enderror
                    </div>
                    @if ($ocrSource === 'upload')
                        <div><label class="text-xs text-gray-500">{{ __('File (photo/scan/PDF)') }}</label>
                            <input type="file" wire:model="ocrUpload" accept="image/*,.pdf" class="w-full text-sm" />
                            <div wire:loading wire:target="ocrUpload" style="font-size:.72rem;color:#6b7280">{{ __('Uploading...') }}</div></div>
                    @endif
                    <p class="text-xs text-gray-500">
                        {{ $mode === 'qr' ? __('Decodes the QR Code (e.g. digital CRLV-e) — R$ 0,02') : __('Extracts the document fields with confidence score — R$ 0,10') }}.
                        {{ __('Note: a valid image that is not the expected document is billed too (code 702).') }}
                    </p>
                @else
                    <div><label class="text-xs text-gray-500">{{ __('Service path') }} (ex.: receita-federal/cpf)</label>
                        <input type="text" wire:model.defer="customService" class="w-full px-3 py-2 border rounded" /></div>
                    <div><label class="text-xs text-gray-500">{{ __('Arguments (one key=value per line)') }}</label>
                        <textarea wire:model.defer="customArgs" rows="3" class="w-full px-3 py-2 border rounded" placeholder="cpf=00000000000&#10;birthdate=01/01/1990"></textarea></div>
                    @error('customService')<p class="text-xs" style="color:#dc2626">{{ $message }}</p>@enderror
                @endif
            </div>

            <button type="button" wire:click="runValidation" wire:loading.attr="disabled"
                style="width:100%;padding:.65rem 1rem;margin-top:.8rem;color:#fff;border-radius:8px;background:#1a4531;font-weight:600;border:none">{{ __('Run query') }}</button>
            <div wire:loading wire:target="runValidation" style="margin-top:.5rem;text-align:center;color:#6b7280;font-size:.8rem">{{ __('Querying, please wait...') }}</div>

            @if ($lastResult)
                <div style="margin-top:.8rem;border:1px solid {{ $lastResult['success'] ? '#bbf7d0' : '#fecaca' }};background:{{ $lastResult['success'] ? '#f0fdf4' : '#fef2f2' }};border-radius:10px;padding:.7rem">
                    <p style="font-weight:700;color:{{ $lastResult['success'] ? '#16a34a' : '#dc2626' }}">
                        {{ $lastResult['success'] ? __('Success') : __('Error') }} ({{ $lastResult['code'] }})
                        @if ($lastResult['price']) · R$ {{ number_format($lastResult['price'], 2, ',', '.') }} @endif
                    </p>
                    <p style="font-size:.78rem">{{ $lastResult['message'] }}</p>
                    @if (!empty($lastResult['campos']))
                        <table style="width:100%;font-size:.74rem;border-collapse:collapse;margin-top:.4rem;background:#fff;border:1px solid #e5e7eb;border-radius:8px">
                            <thead><tr style="text-align:left;border-bottom:1px solid #e5e7eb"><th style="padding:.3rem .5rem">{{ __('Field') }}</th><th style="padding:.3rem .5rem">{{ __('Value') }}</th><th style="padding:.3rem .5rem">Score</th></tr></thead>
                            <tbody>
                                @foreach ($lastResult['campos'] as $c)
                                    <tr style="border-bottom:1px solid #f3f4f6">
                                        <td style="padding:.3rem .5rem;color:#6b7280">{{ $c['titulo'] }}</td>
                                        <td style="padding:.3rem .5rem;font-weight:600">{{ $c['valor'] }}</td>
                                        <td style="padding:.3rem .5rem">{{ $c['score'] !== null ? number_format($c['score'] * 100, 0) . '%' : '—' }}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    @elseif (!empty($lastResult['result']))
                        <pre style="max-height:220px;overflow:auto;background:#fff;border:1px solid #e5e7eb;border-radius:8px;padding:.5rem;font-size:.68rem;white-space:pre-wrap;word-break:break-all;margin-top:.4rem">{{ json_encode($lastResult['result'], JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) }}</pre>
                    @endif
                    @foreach ((array) ($lastResult['receipts'] ?? []) as $r)
                        <a href="{{ $r }}" target="_blank" style="display:block;font-size:.72rem;color:#1d4ed8;text-decoration:underline">{{ __('Receipt') }} {{ $loop->iteration }}</a>
                    @endforeach
                </div>
            @endif

            {{-- selfie --}}
            <hr class="my-3" />
            <p style="font-weight:600;font-size:.85rem">{{ __('Selfie (liveness by web link)') }}</p>
            <p style="font-size:.74rem;color:#6b7280">
                {{ $selfieInfo ? __('Selfie received at') . ' ' . $selfieInfo['at'] : __('No selfie received yet.') }}
                @if ($selfieInfo)
                    · <a href="{{ route('secure.media', $selfieInfo['id']) }}" target="_blank" style="color:#1d4ed8;text-decoration:underline">{{ __('view') }}</a>
                @endif
            </p>
            <button type="button" wire:click="makeSelfieLink"
                style="padding:.45rem .9rem;margin-top:.3rem;color:#1a4531;border-radius:8px;background:#fff;font-weight:600;border:1px solid #1a4531;font-size:.78rem">{{ __('Generate selfie link (72h)') }}</button>
            @if ($selfieUrl)
                <div style="display:flex;gap:.4rem;margin-top:.4rem">
                    <input type="text" readonly value="{{ $selfieUrl }}" id="selfieUrlInput"
                        style="flex:1;padding:.45rem .6rem;font-size:.7rem;border:1px solid #e5e7eb;border-radius:8px;background:#f9fafb" />
                    <button type="button"
                        onclick="var i=document.getElementById('selfieUrlInput');i.select();try{document.execCommand('copy');}catch(e){}if(navigator.clipboard)navigator.clipboard.writeText(i.value);this.innerText=@js(__('Copied!'));"
                        style="padding:.45rem .8rem;color:#fff;border-radius:8px;background:#1a4531;font-weight:600;border:none;font-size:.74rem">{{ __('Copy') }}</button>
                </div>
                <p style="font-size:.7rem;color:#6b7280;margin-top:.2rem">{{ __('Send this link to the driver (WhatsApp/e-mail). It opens the phone camera in the browser.') }}</p>
            @endif
        </x-modal>
    </div>
</div>