@extends('layouts.app')
@section('title', 'Solicitação ' . $solicitacao->numero_solicitacao . ' — Operador')
@section('page_title', 'Solicitação ' . $solicitacao->numero_solicitacao)

@section('content')
@php
    $sc = $solicitacao->statusColor();
    $colorMap = ['gray'=>'bg-gray-100 text-gray-700','blue'=>'bg-blue-100 text-blue-700','yellow'=>'bg-yellow-100 text-yellow-700','green'=>'bg-green-100 text-green-800','indigo'=>'bg-indigo-100 text-indigo-800','teal'=>'bg-teal-100 text-teal-800','red'=>'bg-red-100 text-red-700'];
    $badgeClass = $colorMap[$sc] ?? 'bg-gray-100 text-gray-700';
@endphp
<div class="py-6 max-w-6xl space-y-6">

    {{-- Cabeçalho --}}
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
        <div class="flex items-start justify-between gap-4 flex-wrap">
            <div class="space-y-1">
                <div class="flex items-center gap-3 flex-wrap">
                    <h2 class="text-lg font-bold text-gray-900">{{ $solicitacao->numero_solicitacao }}</h2>
                    <span class="inline-flex px-2.5 py-0.5 rounded-full text-xs font-semibold {{ $badgeClass }}">
                        {{ $solicitacao->statusLabel() }}
                    </span>
                </div>
                @if($solicitacao->assunto)
                    <p class="text-sm text-gray-600 font-medium">{{ $solicitacao->assunto }}</p>
                @endif
                <div class="flex gap-4 text-xs text-gray-500 flex-wrap">
                    <span><strong>Cliente:</strong> {{ $solicitacao->cliente?->nome_fantasia ?? $solicitacao->cliente?->razao_social ?? '—' }}</span>
                    <span><strong>Solicitante:</strong> {{ $solicitacao->solicitante_nome }} {{ $solicitacao->solicitante_email ? '(' . $solicitacao->solicitante_email . ')' : '' }}</span>
                    <span><strong>Criada:</strong> {{ $solicitacao->created_at->format('d/m/Y H:i') }}</span>
                    @if($solicitacao->operador)
                        <span><strong>Operador:</strong> {{ $solicitacao->operador->name }}</span>
                    @endif
                </div>
            </div>
            {{-- Ações do operador --}}
            <div class="flex items-center gap-2 flex-wrap">
                @if((in_array($solicitacao->status, ['enviada','em_analise','aprovada']) || ($solicitacao->status === 'rascunho' && $solicitacao->operador_id)) && $ordens->isEmpty())
                    <a href="{{ route('operador.solicitacoes.edit', $solicitacao) }}"
                       class="inline-flex items-center px-3 py-1.5 rounded-md border border-blue-500 text-blue-700 hover:bg-blue-50 text-xs font-medium transition">✎ Editar</a>
                @endif
                @if($solicitacao->status === 'rascunho' && $solicitacao->operador_id)
                    <form method="POST" action="{{ route('operador.solicitacoes.enviar', $solicitacao) }}">
                        @csrf @method('PATCH')
                        <button type="submit"
                                class="inline-flex items-center px-3 py-1.5 rounded-md text-white text-xs font-medium transition"
                                style="background:#F26522;">Enviar para análise</button>
                    </form>
                @endif
                @if($solicitacao->status === 'enviada' && !$solicitacao->operador_id)
                    <form method="POST" action="{{ route('operador.solicitacoes.assumir', $solicitacao) }}">
                        @csrf @method('PATCH')
                        <button type="submit"
                                class="inline-flex items-center px-3 py-1.5 rounded-md border border-yellow-500 text-yellow-700 hover:bg-yellow-50 text-xs font-medium transition">Assumir Análise</button>
                    </form>
                @endif
                @if($solicitacao->status === 'em_analise')
                    <form method="POST" action="{{ route('operador.solicitacoes.aprovar', $solicitacao) }}">
                        @csrf @method('PATCH')
                        <button type="submit"
                                class="inline-flex items-center px-3 py-1.5 rounded-md text-white text-xs font-medium transition"
                                style="background:#F26522;" onmouseover="this.style.opacity='.88'" onmouseout="this.style.opacity='1'">✓ Aprovar</button>
                    </form>
                    {{-- Rejeitar (modal inline) --}}
                    <div x-data="{ open: false }">
                        <button type="button" x-on:click="open = true"
                                class="inline-flex items-center px-3 py-1.5 rounded-md bg-red-600 text-white hover:bg-red-700 text-xs font-medium transition">Rejeitar</button>
                        <div x-show="open" x-cloak
                             class="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm"
                             x-transition>
                            <div class="bg-white rounded-xl shadow-2xl p-6 max-w-md w-full mx-4">
                                <h3 class="text-sm font-semibold text-gray-900 mb-3">Rejeitar Solicitação</h3>
                                <form method="POST" action="{{ route('operador.solicitacoes.rejeitar', $solicitacao) }}">
                                    @csrf @method('PATCH')
                                    <textarea name="justificativa_rejeicao" rows="4"
                                              class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-red-400"
                                              placeholder="Informe o motivo da rejeição (obrigatório)..." required></textarea>
                                    <div class="flex items-center gap-2 mt-4">
                                        <button type="submit"
                                                class="px-4 py-2 rounded-lg text-white text-sm font-medium bg-red-600 hover:bg-red-700 transition">Confirmar Rejeição</button>
                                        <button type="button" x-on:click="open = false"
                                                class="px-4 py-2 rounded-lg border border-gray-300 text-gray-600 text-sm hover:bg-gray-50 transition">Cancelar</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                @endif
                {{-- Gerar OSes: apenas uma vez, quando a solicitação estiver pronta --}}
                @if($solicitacao->status === 'aprovada' && $ordens->isEmpty())
                    <form method="POST" action="{{ route('operador.solicitacoes.gerar_os', $solicitacao) }}">
                        @csrf
                        <button type="submit"
                                @disabled(!empty($problemasGeracaoOs))
                                class="inline-flex items-center px-3 py-1.5 rounded-md text-white text-xs font-medium transition {{ !empty($problemasGeracaoOs) ? 'opacity-40 cursor-not-allowed' : '' }}"
                                style="background:#0A1E3D;" onmouseover="this.style.opacity='.85'" onmouseout="this.style.opacity='1'"
                                onclick="return confirm('Gerar as OS desta solicitação? Esta operação não poderá ser regenerada automaticamente.')">
                            📋 Gerar OSes
                        </button>
                    </form>
                @elseif($ordens->isNotEmpty())
                    <a href="{{ route('operador.ordens.index', ['solicitacao_id' => $solicitacao->id]) }}"
                       class="inline-flex items-center px-3 py-1.5 rounded-md border border-indigo-300 text-indigo-700 hover:bg-indigo-50 text-xs font-medium transition">
                        📋 Ver {{ $ordens->count() }} OS
                    </a>
                @endif
                <a href="{{ route('operador.solicitacoes.index') }}"
                   class="inline-flex items-center px-3 py-1.5 rounded-md border border-gray-300 text-gray-600 hover:bg-gray-50 text-xs font-medium transition">← Voltar</a>
            </div>
        </div>
        @if($solicitacao->justificativa_rejeicao)
            <div class="mt-4 p-3 rounded-lg bg-red-50 border border-red-200 text-sm text-red-700">
                <strong>Motivo da rejeição:</strong> {{ $solicitacao->justificativa_rejeicao }}
            </div>
        @endif
        @if($solicitacao->pedido_cliente)
            <div class="mt-4 p-3 rounded-lg bg-blue-50 border border-blue-200 text-sm text-blue-800">
                <strong>Pedido / OS do Cliente:</strong> <span class="font-mono">{{ $solicitacao->pedido_cliente }}</span>
            </div>
        @endif
        @if($solicitacao->observacoes)
            <div class="mt-4 p-3 rounded-lg bg-gray-50 border border-gray-200 text-sm text-gray-700">
                <strong>Observações:</strong> {{ $solicitacao->observacoes }}
            </div>
        @endif
    </div>

    {{-- Regras do fluxo operacional --}}
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-5">
        <div class="flex items-start justify-between gap-4 flex-wrap">
            <div>
                <h3 class="text-sm font-semibold text-gray-800 uppercase tracking-wide">Fluxo Solicitação → OS</h3>
                <p class="text-xs text-gray-500 mt-1">A solicitação só entra em execução quando as OS forem efetivamente geradas.</p>
            </div>
            @if($ordens->isNotEmpty())
                <span class="inline-flex px-2.5 py-1 rounded-full text-xs font-semibold bg-indigo-100 text-indigo-700">{{ $ordens->count() }} OS gerada(s)</span>
            @endif
        </div>
        <div class="grid grid-cols-2 md:grid-cols-5 gap-2 mt-4 text-xs">
            @foreach([
                ['enviada','1. Enviada'], ['em_analise','2. Em análise'], ['aprovada','3. Aprovada'], ['em_execucao','4. Em execução'], ['concluida','5. Concluída']
            ] as [$statusFluxo,$labelFluxo])
                @php
                    $ordemFluxo = ['enviada'=>1,'em_analise'=>2,'aprovada'=>3,'em_execucao'=>4,'concluida'=>5];
                    $atualFluxo = $ordemFluxo[$solicitacao->status] ?? 0;
                    $passoFluxo = $ordemFluxo[$statusFluxo];
                @endphp
                <div class="rounded-lg border p-2.5 {{ $solicitacao->status === $statusFluxo ? 'border-orange-300 bg-orange-50 text-orange-800' : ($atualFluxo >= $passoFluxo ? 'border-emerald-200 bg-emerald-50 text-emerald-800' : 'border-gray-200 bg-gray-50 text-gray-400') }}">
                    <span class="font-semibold">{{ $labelFluxo }}</span>
                </div>
            @endforeach
        </div>
        @if($solicitacao->status === 'aprovada' && !empty($problemasGeracaoOs))
            <div class="mt-4 rounded-lg border border-amber-200 bg-amber-50 p-3 text-xs text-amber-800">
                <p class="font-semibold mb-1">Antes de gerar as OS:</p>
                <ul class="list-disc pl-4 space-y-1">
                    @foreach($problemasGeracaoOs as $problema)<li>{{ $problema }}</li>@endforeach
                </ul>
            </div>
        @endif
        @if($ordens->isNotEmpty())
            <p class="mt-3 text-xs text-gray-500">Após a geração, motorista, veículo, data/hora e status operacional devem ser ajustados diretamente nas respectivas OS. A regeneração automática é bloqueada para preservar rastreabilidade.</p>
        @endif
    </div>

    @php
        $itensComCoincidencia = collect($disponibilidadeItens)->filter(fn($ctx) => !empty($ctx['coincidencias_horario'] ?? []));
        $totalCoincidencias = $itensComCoincidencia->sum(fn($ctx) => count($ctx['coincidencias_horario'] ?? []));
    @endphp
    @if($totalCoincidencias > 0)
        <div class="bg-amber-50 border border-amber-300 rounded-xl p-4">
            <div class="flex items-start gap-3">
                <div class="text-amber-600 text-xl">⚠</div>
                <div>
                    <p class="text-sm font-bold text-amber-900">Conflito / coincidência de agenda identificado</p>
                    <p class="text-xs text-amber-800 mt-1">Há {{ $totalCoincidencias }} ocorrência(s) no mesmo dia e horário em Solicitações, OS ou na base importada. Confira os detalhes abaixo antes de aprovar a alocação.</p>
                </div>
            </div>
        </div>
    @endif

    {{-- Itens + alocação --}}
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
        <div class="px-6 py-4 border-b border-gray-100 flex items-center justify-between">
            <h3 class="text-sm font-semibold text-gray-700 uppercase tracking-wide">Itens de Transporte & Alocação</h3>
            <span class="text-xs text-gray-400">{{ $solicitacao->itens->count() }} item(ns)</span>
        </div>
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200 text-sm">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="px-3 py-3 text-left text-xs font-semibold text-gray-500 uppercase">#</th>
                        <th class="px-3 py-3 text-left text-xs font-semibold text-gray-500 uppercase">Origem</th>
                        <th class="px-3 py-3 text-left text-xs font-semibold text-gray-500 uppercase">Destino</th>
                        <th class="px-3 py-3 text-left text-xs font-semibold text-gray-500 uppercase">Sonda</th>
                        <th class="px-3 py-3 text-left text-xs font-semibold text-gray-500 uppercase">Data</th>
                        <th class="px-3 py-3 text-left text-xs font-semibold text-gray-500 uppercase">Hora</th>
                        <th class="px-3 py-3 text-center text-xs font-semibold text-gray-500 uppercase">Qtd</th>
                        <th class="px-3 py-3 text-left text-xs font-semibold text-gray-500 uppercase">Peso</th>
                        <th class="px-3 py-3 text-left text-xs font-semibold text-gray-500 uppercase" style="min-width:150px;">Cavalo</th>
                        <th class="px-3 py-3 text-left text-xs font-semibold text-gray-500 uppercase" style="min-width:180px;">Carroceria</th>
                        <th class="px-3 py-3 text-left text-xs font-semibold text-gray-500 uppercase" style="min-width:180px;">Motorista</th>
                        <th class="px-3 py-3 text-left text-xs font-semibold text-gray-500 uppercase">Status</th>
                        <th class="px-3 py-3 text-center text-xs font-semibold text-gray-500 uppercase">Salvar</th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-100">
                    @forelse($solicitacao->itens as $item)
                    @php
                        $isc = $item->statusColor();
                        $ibadge = $colorMap[$isc] ?? 'bg-gray-100 text-gray-700';
                        $dispItem = $disponibilidadeItens[$item->id] ?? [
                            'motoristas_criticos'=>[], 'motoristas_atencao'=>[],
                            'veiculos_criticos'=>[], 'veiculos_atencao'=>[],
                            'carretas_criticas'=>[], 'carretas_atencao'=>[],
                            'coincidencias_horario'=>[],
                        ];
                    @endphp
                    <tr class="hover:bg-gray-50">
                        <td class="px-3 py-2 text-xs text-gray-400">{{ $loop->iteration }}</td>
                        <td class="px-3 py-2 font-semibold text-gray-800">{{ $item->origemLabel() }}</td>
                        <td class="px-3 py-2 text-gray-700">{{ $item->destinoLabel() }}</td>
                        <td class="px-3 py-2 text-gray-500 text-xs">{{ $item->sondaLabel() }}</td>
                        <td class="px-3 py-2 font-medium text-gray-800">{{ $item->data_coleta?->format('d/m/Y') }}</td>
                        <td class="px-3 py-2 text-gray-500">{{ $item->hora_coleta ?? '—' }}</td>
                        <td class="px-3 py-2 text-center font-medium">{{ $item->quantidade }}</td>
                        <td class="px-3 py-2 text-xs text-gray-500">{{ $item->carga_peso_ton !== null ? number_format((float)$item->carga_peso_ton, 3, ',', '.') . ' t' : '—' }}</td>
                        {{-- Formulário de alocação inline --}}
                        <form method="POST"
                              action="{{ route('operador.solicitacoes.itens.alocar', ['solicitacao' => $solicitacao, 'item' => $item]) }}"
                              class="contents" x-data="{ cavaloId: @js((string)($item->veiculo_id ?? '')), carretaId: @js((string)($item->carreta_id ?? '')) }">
                            @csrf @method('PATCH')
                            <td class="px-3 py-2">
                                <select name="veiculo_id" x-model="cavaloId"
                                        x-on:change="if (!((window.composicoesAlocacao[cavaloId] || []).includes(Number(carretaId)))) carretaId = ''"
                                        class="w-full border border-gray-300 rounded px-2 py-1 text-xs focus:outline-none focus:ring-1 focus:ring-orange-400">
                                    <option value="">— sem veículo —</option>
                                    @foreach($veiculos as $v)
                                        @php
                                            $vCritico = isset($dispItem['veiculos_criticos'][$v->id]);
                                            $vAtencao = !$vCritico && isset($dispItem['veiculos_atencao'][$v->id]);
                                            $vSelecionado = (int)$item->veiculo_id === (int)$v->id;
                                        @endphp
                                        <option value="{{ $v->id }}"
                                                {{ $vSelecionado ? 'selected' : '' }}
                                                {{ $vCritico && !$vSelecionado ? 'disabled' : '' }}>
                                            {{ $v->placa }} ({{ $v->categoriaLabel() }}){{ $vCritico ? ' — ⛔ conflito no horário' : ($vAtencao ? ' — ⚠ ocupado no dia' : '') }}
                                        </option>
                                    @endforeach
                                </select>
                            </td>
                            <td class="px-3 py-2">
                                <select name="carreta_id" x-model="carretaId"
                                        class="w-full border border-gray-300 rounded px-2 py-1 text-xs focus:outline-none focus:ring-1 focus:ring-orange-400">
                                    <option value="">— sem carroceria —</option>
                                    @foreach($carretas as $c)
                                        @php
                                            $cCritico = isset($dispItem['carretas_criticas'][$c->id]);
                                            $cAtencao = !$cCritico && isset($dispItem['carretas_atencao'][$c->id]);
                                            $cSelecionada = (int)$item->carreta_id === (int)$c->id;
                                            $capInsuficiente = $item->carga_peso_ton !== null && $c->capacidade_ton !== null && (float)$c->capacidade_ton < (float)$item->carga_peso_ton;
                                        @endphp
                                        <option value="{{ $c->id }}"
                                                {{ $cSelecionada ? 'selected' : '' }}
                                                {{ (($cCritico || $capInsuficiente) && !$cSelecionada) ? 'disabled' : '' }}
                                                x-bind:disabled="{{ ($cCritico || $capInsuficiente) ? 'true' : 'false' }} || !cavaloId || !((window.composicoesAlocacao[cavaloId] || []).includes({{ (int)$c->id }}))">
                                            {{ $c->placa }} · {{ $c->subtipo }} · {{ $c->capacidade_ton !== null ? number_format((float)$c->capacidade_ton, 1, ',', '.') . ' t' : 'cap. n/i' }}{{ $capInsuficiente ? ' — ⛔ capacidade' : ($cCritico ? ' — ⛔ conflito' : ($cAtencao ? ' — ⚠ ocupado no dia' : '')) }}
                                        </option>
                                    @endforeach
                                </select>
                            </td>
                            <td class="px-3 py-2">
                                <select name="motorista_id"
                                        class="w-full border border-gray-300 rounded px-2 py-1 text-xs focus:outline-none focus:ring-1 focus:ring-orange-400">
                                    <option value="">— sem motorista —</option>
                                    @foreach($motoristas as $m)
                                    @php
                                        $cnhVencida = $m->cnh_validade && $m->cnh_validade->isPast();
                                        $mCritico = isset($dispItem['motoristas_criticos'][$m->id]);
                                        $mAtencao = !$mCritico && isset($dispItem['motoristas_atencao'][$m->id]);
                                        $mSelecionado = (int)$item->motorista_id === (int)$m->id;
                                        $mSuffix = $cnhVencida ? ' — ⛔ CNH vencida' : ($mCritico ? ' — ⛔ conflito no horário' : ($mAtencao ? ' — ⚠ ocupado no dia' : ''));
                                    @endphp
                                        <option value="{{ $m->id }}"
                                                {{ $mSelecionado ? 'selected' : '' }}
                                                {{ ($cnhVencida || $mCritico) && !$mSelecionado ? 'disabled' : '' }}>
                                            {{ $m->nome }}{{ $mSuffix }}
                                        </option>
                                    @endforeach
                                </select>
                            </td>
                            <td class="px-3 py-2">
                                <select name="status"
                                        class="w-full border border-gray-300 rounded px-2 py-1 text-xs focus:outline-none focus:ring-1 focus:ring-orange-400">
                                    @foreach(\App\Models\ItemSolicitacao::STATUS as $key => $info)
                                        <option value="{{ $key }}" {{ $item->status === $key ? 'selected' : '' }}>{{ $info['label'] }}</option>
                                    @endforeach
                                </select>
                            </td>
                            <td class="px-3 py-2 text-center">
                                @if(in_array($solicitacao->status, ['em_analise', 'aprovada'], true) && $ordens->isEmpty())
                                    <button type="submit"
                                            class="inline-flex items-center px-3 py-1 rounded-md text-white text-xs font-medium transition"
                                            style="background:#F26522;" onmouseover="this.style.opacity='.88'" onmouseout="this.style.opacity='1'">
                                        Salvar
                                    </button>
                                @else
                                    <span class="text-gray-300 text-xs">—</span>
                                @endif
                            </td>
                        </form>
                    </tr>
                    @if(!empty($dispItem['coincidencias_horario']))
                    <tr class="bg-amber-50/70">
                        <td colspan="13" class="px-4 py-3">
                            <div class="flex items-start gap-2">
                                <span class="text-amber-600">⚠</span>
                                <div class="min-w-0 flex-1">
                                    <p class="text-xs font-bold text-amber-900">Mesmo dia e horário já constam em outra ocorrência</p>
                                    <div class="mt-2 grid gap-2">
                                        @foreach($dispItem['coincidencias_horario'] as $coincidencia)
                                            <div class="rounded-lg border border-amber-200 bg-white px-3 py-2 flex items-center justify-between gap-3 flex-wrap">
                                                <div class="text-xs text-gray-700">
                                                    <span class="font-bold text-gray-900">{{ $coincidencia['numero'] }}</span>
                                                    <span class="ml-1 inline-flex rounded px-1.5 py-0.5 text-[10px] font-semibold {{ $coincidencia['fonte'] === 'importacao' ? 'bg-amber-100 text-amber-800' : ($coincidencia['fonte'] === 'os' ? 'bg-indigo-100 text-indigo-700' : 'bg-blue-100 text-blue-700') }}">
                                                        {{ $coincidencia['fonte'] === 'importacao' ? 'Importado' : ($coincidencia['fonte'] === 'os' ? 'OS' : 'Solicitação') }}
                                                    </span>
                                                    <span class="mx-1 text-gray-300">•</span>{{ $coincidencia['cliente'] }}
                                                    <span class="mx-1 text-gray-300">•</span>{{ $coincidencia['origem'] }} → {{ $coincidencia['destino'] }}
                                                    @if(!empty($coincidencia['motorista']))
                                                        <span class="mx-1 text-gray-300">•</span>Motorista: {{ $coincidencia['motorista'] }}
                                                    @endif
                                                    @if(!empty($coincidencia['veiculo']))
                                                        <span class="mx-1 text-gray-300">•</span>Cavalo: {{ $coincidencia['veiculo'] }}
                                                    @endif
                                                    <span class="mx-1 text-gray-300">•</span>Status: {{ $coincidencia['status'] }}
                                                </div>
                                                @if($coincidencia['fonte'] === 'os')
                                                    <a href="{{ route('operador.ordens.show', $coincidencia['id']) }}" class="text-xs font-semibold text-indigo-700 hover:underline">Abrir OS</a>
                                                @elseif($coincidencia['fonte'] === 'solicitacao')
                                                    <a href="{{ route('operador.solicitacoes.show', $coincidencia['id']) }}" class="text-xs font-semibold text-blue-700 hover:underline">Abrir solicitação</a>
                                                @elseif(auth()->user()?->hasRole('superadmin'))
                                                    <a href="{{ route('admin.historico.show', $coincidencia['id']) }}" class="text-xs font-semibold text-amber-800 hover:underline">Auditar importado</a>
                                                @else
                                                    <span class="text-[10px] text-amber-700">Registro importado</span>
                                                @endif
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        </td>
                    </tr>
                    @endif
                    @empty
                    <tr><td colspan="13" class="px-6 py-8 text-center text-gray-400 text-sm">Nenhum item.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        <div class="px-5 py-3 border-t border-gray-100 bg-gray-50 text-[11px] text-gray-500 flex flex-wrap gap-x-5 gap-y-1">
            <span><strong class="text-gray-600">Legenda:</strong> <strong class="text-red-700">⛔ conflito de recurso</strong> bloqueia a opção; <strong class="text-amber-700">⚠ coincidência de agenda</strong> exige conferência.</span>
            <span><strong class="text-amber-700">⚠ Ocupado no dia:</strong> recurso permitido, mas já aparece em outra operação do mesmo dia.</span>
        </div>
    </div>

    @if(!empty($itensExpirados))
    <div class="bg-red-50 border border-red-200 rounded-xl p-4">
        <div class="flex items-start gap-3">
            <div class="text-red-500 text-lg">⚠</div>
            <div>
                <p class="text-sm font-bold text-red-800">Há item(ns) com data/horário de coleta vencido</p>
                <p class="text-xs text-red-700 mt-1">O sistema não gera sugestões nem permite nova alocação para esses itens. A solicitação deve ser corrigida antes de prosseguir.</p>
                <ul class="mt-2 text-xs text-red-700 list-disc pl-4 space-y-1">
                    @foreach($solicitacao->itens as $item)
                        @if(isset($itensExpirados[$item->id]))
                            <li>{{ $item->origemLabel() }} → {{ $item->destinoLabel() }} · {{ $item->data_coleta?->format('d/m/Y') }} {{ $item->hora_coleta ? substr((string)$item->hora_coleta,0,5) : '' }} — {{ $itensExpirados[$item->id] }}</li>
                        @endif
                    @endforeach
                </ul>
            </div>
        </div>
    </div>
    @endif

    {{-- ── Sugestões do Sugestor ─────────────────────────────────── --}}
    @if(!empty($sugestoes) && collect($sugestoes)->flatten(1)->isNotEmpty())
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
        <div class="px-6 py-4 border-b border-gray-100 flex items-center gap-3" style="background:rgba(242,101,34,0.04);">
            <div class="w-1 h-5 rounded-full" style="background:#F26522;"></div>
            <h3 class="text-sm font-bold text-gray-800 uppercase tracking-wide">Sugestões de Alocação</h3>
            <span class="text-xs text-gray-400 ml-auto">Histórico importado + sistema · disponibilidade atual · desempate por experiência, ranking, carga e rodízio</span>
        </div>
        <div class="p-5 space-y-6">
            @foreach($solicitacao->itens as $item)
                @if(isset($sugestoes[$item->id]) && $sugestoes[$item->id]->isNotEmpty())
                <div>
                    {{-- Cabeçalho do item --}}
                    <div class="mb-3">
                        <p class="text-xs font-semibold text-gray-600 uppercase tracking-wide">
                            Item {{ $loop->iteration }} —
                            {{ $item->origemLabel() }} → {{ $item->destinoLabel() }}
                            @if($item->data_coleta) · {{ $item->data_coleta->format('d/m/Y') }} @endif
                            @if($item->hora_coleta) · {{ substr((string)$item->hora_coleta, 0, 5) }} @endif
                        </p>
                        @if(!$item->origem_id || !$item->destino_id)
                            <p class="text-xs text-amber-700 mt-1">⚠ Score de rota desconsiderado porque origem e/ou destino ainda não possuem vínculo cadastral.</p>
                        @endif
                    </div>
                    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
                        @foreach($sugestoes[$item->id] as $i => $sug)
                        <div class="border border-gray-200 rounded-lg p-4 flex flex-col gap-3 hover:border-orange-300 hover:shadow-sm transition"
                             x-data>
                            {{-- Posição + Score --}}
                            <div class="flex items-center justify-between">
                                <span class="inline-flex items-center justify-center w-6 h-6 rounded-full text-xs font-bold text-white"
                                      style="background:{{ $i === 0 ? '#F26522' : ($i === 1 ? '#0A1E3D' : '#6B7280') }}">
                                    {{ $i + 1 }}
                                </span>
                                <span class="text-xs font-semibold text-gray-700">
                                    Score: {{ number_format($sug->score * 100, 1) }}%
                                </span>
                            </div>

                            {{-- Motorista --}}
                            <div>
                                <p class="text-sm font-bold text-gray-900">{{ $sug->motorista->nome }}</p>
                                <p class="text-xs text-gray-500">
                                    {{ $sug->motorista->rankLabel() }}
                                    @if($sug->motorista->empresa) · {{ $sug->motorista->empresa }} @endif
                                </p>
                            </div>

                            {{-- Veículo sugerido --}}
                            <div class="text-xs text-gray-600 flex items-center justify-between gap-2">
                                <span>🚛 Cavalo: <span class="font-mono font-semibold">{{ $sug->veiculo->placa }}</span></span>
                                <span>🛻 Carroceria: <span class="font-mono font-semibold">{{ $sug->carreta->placa }}</span>
                                <span class="text-gray-400">({{ $sug->carreta->subtipo }} · {{ $sug->carreta->capacidade_ton !== null ? number_format((float)$sug->carreta->capacidade_ton, 1, ',', '.') . ' t' : 'cap. n/i' }})</span></span>
                                <span class="text-[11px] px-2 py-0.5 rounded-full bg-emerald-50 text-emerald-700 border border-emerald-200">Disponível no horário</span>
                            </div>

                            {{-- Mini barra de scores --}}
                            <div class="space-y-1 text-xs text-gray-500">
                                @foreach([
                                    ['Rota',    $sug->score_rota],
                                    ['Cliente', $sug->score_cliente],
                                    ['Rank',    $sug->score_rank],
                                    ['Disp.',   $sug->score_disponibilidade],
                                    ['Prox.',   $sug->score_proximidade],
                                    ['Exp.',    $sug->score_experiencia],
                                ] as [$label, $val])
                                <div class="flex items-center gap-2">
                                    <span class="w-12 shrink-0">{{ $label }}</span>
                                    <div class="flex-1 bg-gray-100 rounded-full h-1.5">
                                        <div class="h-1.5 rounded-full" style="background:#F26522; width:{{ number_format($val * 100, 0) }}%;"></div>
                                    </div>
                                    <span class="w-8 text-right">{{ number_format($val * 100, 0) }}%</span>
                                </div>
                                @endforeach
                            </div>

                            {{-- Evidências / explicação --}}
                            <div class="rounded-md bg-gray-50 border border-gray-100 p-2.5 text-xs text-gray-600">
                                <p class="font-semibold text-gray-700 mb-1">Por que foi sugerido</p>
                                <ul class="space-y-0.5 list-disc pl-4">
                                    @foreach($sug->motivos as $motivo)
                                        <li>{{ $motivo }}</li>
                                    @endforeach
                                </ul>
                                <p class="mt-2 text-[11px] text-gray-400">
                                    Base histórica usada: {{ number_format($sug->historico_total, 0, ',', '.') }} operação(ões)
                                    · Importados: {{ number_format($sug->historico_importado, 0, ',', '.') }}
                                    · Sistema: {{ number_format($sug->historico_sistema, 0, ',', '.') }}
                                    @if(($sug->historico_aproximado ?? 0) > 0) · Alias/nome curto: {{ number_format($sug->historico_aproximado, 0, ',', '.') }} @endif
                                    · Rota: {{ $sug->viagens_rota }}
                                    · Cliente: {{ $sug->viagens_cliente }}
                                </p>
                            </div>

                            <div class="rounded-md border border-blue-100 bg-blue-50/60 p-2 text-[11px] text-blue-800">
                                <span class="font-semibold">Desempate:</span> {{ $sug->criterio_desempate }}
                            </div>

                            @if(!empty($sug->alertas))
                                <div class="rounded-md border border-amber-200 bg-amber-50 p-2.5 text-xs text-amber-800">
                                    <p class="font-semibold mb-1">Atenção operacional</p>
                                    @foreach($sug->alertas as $alerta)
                                        <p>• {{ $alerta }}</p>
                                    @endforeach
                                </div>
                            @endif

                            {{-- Botão Usar --}}
                            @if(in_array($solicitacao->status, ['em_analise', 'aprovada'], true) && $ordens->isEmpty())
                            <form method="POST"
                                  action="{{ route('operador.solicitacoes.itens.alocar', ['solicitacao' => $solicitacao, 'item' => $item]) }}">
                                @csrf @method('PATCH')
                                <input type="hidden" name="motorista_id" value="{{ $sug->motorista->id }}">
                                @if($sug->veiculo)
                                <input type="hidden" name="veiculo_id" value="{{ $sug->veiculo->id }}">
                                @endif
                                @if($sug->carreta)
                                <input type="hidden" name="carreta_id" value="{{ $sug->carreta->id }}">
                                @endif
                                <input type="hidden" name="status" value="{{ $item->status }}">
                                <button type="submit"
                                        class="w-full mt-1 inline-flex items-center justify-center px-3 py-1.5 rounded-md text-white text-xs font-medium transition"
                                        style="background:#F26522;" onmouseover="this.style.opacity='.88'" onmouseout="this.style.opacity='1'">
                                    ✓ Usar esta sugestão
                                </button>
                            </form>
                            @endif
                        </div>
                        @endforeach
                    </div>
                </div>
                @endif
            @endforeach
        </div>
    </div>
    @endif

<script>
window.composicoesAlocacao = @json($composicoesMapa ?? []);
</script>
</div>
@endsection