@section('title', __('Base de conhecimento'))
<div>
    <x-baseview title="{{ __('Atendimento · Base de conhecimento') }}">

        <x-km.aviso tipo="info">
            {{ __('Os FATOS alimentam o assistente: é o que ele pode afirmar ao cliente e ao motorista. As RESPOSTAS PRONTAS são textos que o atendente insere na conversa com um clique. Alterar aqui vale na próxima mensagem, sem publicar versão nova.') }}
        </x-km.aviso>

        <div class="flex gap-2 mt-3">
            <button wire:click="trocarAba('fato')"
                class="px-4 py-2 text-sm font-semibold rounded-lg"
                style="{{ $aba === 'fato' ? 'background:#15803d;color:#fff' : 'background:#f3f4f6;color:#374151' }}">
                {{ __('Fatos da IA') }} ({{ $totalFatos }})
            </button>
            <button wire:click="trocarAba('resposta')"
                class="px-4 py-2 text-sm font-semibold rounded-lg"
                style="{{ $aba === 'resposta' ? 'background:#15803d;color:#fff' : 'background:#f3f4f6;color:#374151' }}">
                {{ __('Respostas prontas') }} ({{ $totalRespostas }})
            </button>
            <div class="flex-1"></div>
            <button wire:click="novo" class="px-4 py-2 text-sm font-bold text-white rounded-lg" style="background:#15803d">
                + {{ $aba === 'fato' ? __('Novo fato') : __('Nova resposta') }}
            </button>
        </div>

        @if ($form)
            <x-km.card titulo="{{ $editandoId ? __('Editar') : __('Novo') }}">
                @if ($aba === 'resposta')
                    <x-km.aviso tipo="atencao">
                        {{ __('Variáveis disponíveis:') }}
                        <b>@{{ nome }}</b>, <b>@{{ nome_completo }}</b>, <b>@{{ protocolo }}</b>,
                        <b>@{{ corrida }}</b>, <b>@{{ valor }}</b>, <b>@{{ atendente }}</b>.
                        {{ __('Variável sem dado na conversa simplesmente some do texto.') }}
                    </x-km.aviso>
                @endif
                <div class="grid grid-cols-1 gap-3 mt-3 md:grid-cols-2">
                    <div>
                        <label class="text-xs font-bold text-gray-500 uppercase">{{ __('Título') }}</label>
                        <input type="text" wire:model.defer="titulo" class="w-full text-sm border-gray-300 rounded-md" />
                        @error('titulo') <p class="text-xs text-red-600">{{ $message }}</p> @enderror
                    </div>
                    <div>
                        <label class="text-xs font-bold text-gray-500 uppercase">{{ __('Assunto') }}</label>
                        <select wire:model.defer="categoria" class="w-full text-sm border-gray-300 rounded-md">
                            @foreach ($categorias as $valor => $rotulo)
                                <option value="{{ $valor }}">{{ __($rotulo) }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="md:col-span-2">
                        <label class="text-xs font-bold text-gray-500 uppercase">{{ __('Conteúdo') }}</label>
                        <textarea wire:model.defer="conteudo" rows="3" class="w-full text-sm border-gray-300 rounded-md"></textarea>
                        @error('conteudo') <p class="text-xs text-red-600">{{ $message }}</p> @enderror
                    </div>
                    <div>
                        <label class="text-xs font-bold text-gray-500 uppercase">{{ __('Vale para') }}</label>
                        <select wire:model.defer="publico" class="w-full text-sm border-gray-300 rounded-md">
                            <option value="ambos">{{ __('Cliente e motorista') }}</option>
                            <option value="cliente">{{ __('Só cliente') }}</option>
                            <option value="motorista">{{ __('Só motorista') }}</option>
                        </select>
                    </div>
                    <div class="flex items-end gap-4">
                        <label class="flex items-center gap-2 text-sm">
                            <input type="checkbox" wire:model.defer="ativo" class="rounded" /> {{ __('Ativo') }}
                        </label>
                        <label class="text-sm">
                            {{ __('Ordem') }}
                            <input type="number" wire:model.defer="ordem" class="text-sm border-gray-300 rounded-md" style="width:80px" />
                        </label>
                    </div>
                </div>
                <div class="flex justify-end gap-2 mt-4">
                    <button wire:click="fechar" class="px-3 py-2 text-sm text-gray-600">{{ __('Cancelar') }}</button>
                    <button wire:click="salvar" class="px-4 py-2 text-sm font-bold text-white rounded-lg" style="background:#15803d">
                        {{ __('Salvar') }}
                    </button>
                </div>
            </x-km.card>
        @endif

        <x-km.tabela titulo="{{ $itens->count() }} {{ $aba === 'fato' ? __('fatos') : __('respostas') }}">
            <x-slot name="cabecalho">
                <th class="px-3 py-2" style="text-align:left">{{ __('Título') }}</th>
                <th class="px-3 py-2" style="text-align:left">{{ __('Conteúdo') }}</th>
                <th class="px-3 py-2" style="text-align:left">{{ __('Assunto') }}</th>
                <th class="px-3 py-2" style="text-align:left">{{ __('Vale para') }}</th>
                <th class="px-3 py-2" style="text-align:left">{{ __('Situação') }}</th>
                <th class="px-3 py-2" style="text-align:left">{{ __('Ações') }}</th>
            </x-slot>
            @forelse ($itens as $i)
                <tr style="vertical-align:top">
                    <td><b>{{ $i->titulo }}</b></td>
                    <td class="text-xs" style="max-width:420px">{{ $i->conteudo }}</td>
                    <td class="text-xs">{{ __($categorias[$i->categoria ?? ''] ?? $i->categoria) }}</td>
                    <td class="text-xs">
                        {{ $i->publico === 'ambos' ? __('Cliente e motorista') : ($i->publico === 'cliente' ? __('Cliente') : __('Motorista')) }}
                    </td>
                    <td>
                        <x-km.chip tipo="{{ $i->ativo ? 'ok' : 'neutro' }}">{{ $i->ativo ? __('ativo') : __('desligado') }}</x-km.chip>
                    </td>
                    <td class="text-xs" style="white-space:nowrap">
                        <button wire:click="editar({{ $i->id }})" style="color:#15803d">{{ __('editar') }}</button> ·
                        <button wire:click="alternar({{ $i->id }})" style="color:#6b7280">{{ $i->ativo ? __('desligar') : __('ligar') }}</button> ·
                        <button wire:click="excluir({{ $i->id }})"
                            wire:confirm="{{ __('Remover em definitivo?') }}" style="color:#b91c1c">{{ __('remover') }}</button>
                    </td>
                </tr>
            @empty
                <tr><td colspan="6" class="text-center text-gray-400" style="padding:1.5rem">{{ __('Nada cadastrado ainda.') }}</td></tr>
            @endforelse
        </x-km.tabela>

    </x-baseview>
</div>