@extends('layouts.app')
@section('title', 'OS ' . $ordem->numero_os)
@section('page_title', 'OS ' . $ordem->numero_os)

@section('content')
@php
$colorMap = [
    'blue'   => 'bg-blue-100 text-blue-700',
    'indigo' => 'bg-indigo-100 text-indigo-800',
    'teal'   => 'bg-teal-100 text-teal-800',
    'red'    => 'bg-red-100 text-red-700',
    'orange' => 'bg-orange-100 text-orange-700',
    'gray'   => 'bg-gray-100 text-gray-700',
];
$badge = $colorMap[$ordem->statusColor()] ?? 'bg-gray-100 text-gray-700';
@endphp
<div class="py-6 max-w-4xl 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">{{ $ordem->numero_os }}</h2>
                    <span class="inline-flex px-2.5 py-0.5 rounded-full text-xs font-semibold {{ $badge }}">
                        {{ $ordem->statusLabel() }}
                    </span>
                    @if($ordem->finalizado)
                        <span class="inline-flex px-2.5 py-0.5 rounded-full text-xs font-semibold bg-teal-100 text-teal-800">Finalizado</span>
                    @endif
                </div>
                <div class="flex gap-4 text-xs text-gray-500 flex-wrap">
                    @if($ordem->solicitacao)
                        <span><strong>Solicitação:</strong>
                            <a href="{{ route('operador.solicitacoes.show', $ordem->solicitacao) }}"
                               class="text-blue-600 hover:underline">{{ $ordem->solicitacao->numero_solicitacao }}</a>
                        </span>
                    @endif
                    <span><strong>Cliente:</strong> {{ $ordem->cliente_solicitante }}</span>
                    @if($ordem->pedido_cliente)<span><strong>Pedido / OS Cliente:</strong> <span class="font-mono">{{ $ordem->pedido_cliente }}</span></span>@endif
                    <span><strong>Data:</strong> {{ $ordem->data_servico?->format('d/m/Y') }}</span>
                    @if($ordem->operador)
                        <span><strong>Operador:</strong> {{ $ordem->operador->name }}</span>
                    @endif
                </div>
            </div>
            <div class="flex items-center gap-2">
                <a href="{{ route('operador.ordens.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>
                <span class="inline-flex items-center px-3 py-1.5 rounded-md border border-gray-200 bg-gray-50 text-gray-500 text-xs font-medium" title="Para preservar rastreabilidade, use status Cancelado ou Negado.">🔒 OS rastreável</span>
            </div>
        </div>
    </div>

    {{-- Alertas --}}
    @if(session('success'))
    <div class="bg-green-50 border border-green-200 text-green-800 rounded-lg px-4 py-3 text-sm">
        {{ session('success') }}
    </div>
    @endif
    @if(session('error'))
    <div class="bg-red-50 border border-red-200 text-red-700 rounded-lg px-4 py-3 text-sm">
        {{ session('error') }}
    </div>
    @endif
    @if($errors->any())
    <div class="bg-red-50 border border-red-200 text-red-700 rounded-lg px-4 py-3 text-sm">
        <ul class="list-disc list-inside space-y-1">
            @foreach($errors->all() as $error)<li>{{ $error }}</li>@endforeach
        </ul>
    </div>
    @endif

    {{-- Linha do tempo operacional --}}
    @php
        $timeline = [
            ['label'=>'Início da viagem','data'=>$ordem->inicio_viagem_em,'duracao'=>null,'km'=>null,'tipo'=>'vazio'],
            ['label'=>'Chegada na origem','data'=>$ordem->chegada_origem_em,'duracao'=>$ordem->tempoAteOrigemMinutos(),'km'=>$ordem->km_vazio_ate_origem,'tipo'=>'vazio'],
            ['label'=>'Saída da origem','data'=>$ordem->saida_origem_em,'duracao'=>$ordem->permanenciaOrigemMinutos(),'km'=>null,'tipo'=>'parada'],
            ['label'=>'Chegada no destino','data'=>$ordem->chegada_destino_em,'duracao'=>$ordem->transitoDestinoMinutos(),'km'=>$ordem->kmCarregado(),'tipo'=>'carregado'],
            ['label'=>'Saída do destino','data'=>$ordem->saida_destino_em,'duracao'=>$ordem->permanenciaDestinoMinutos(),'km'=>null,'tipo'=>'parada'],
            ['label'=>'Ponto de espera','data'=>$ordem->chegada_ponto_espera_em,'duracao'=>$ordem->tempoPosDestinoMinutos(),'km'=>$ordem->km_vazio_pos_destino,'tipo'=>'vazio'],
        ];
        $primeiroPendente = collect($timeline)->search(fn ($etapa) => !$etapa['data']);
        $primeiroPendente = $primeiroPendente === false ? count($timeline) : $primeiroPendente;
    @endphp
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
        <div class="flex items-center justify-between gap-4 flex-wrap mb-5">
            <div>
                <h3 class="text-sm font-semibold text-gray-800 uppercase tracking-wide">Linha do Tempo Operacional</h3>
                <p class="text-xs text-gray-500 mt-1">Evolução real da viagem, com tempos e quilômetros conhecidos em cada fase.</p>
            </div>
            <div class="flex gap-3 text-xs">
                <span><strong>{{ \App\Models\OrdemServico::formatarDuracao($ordem->tempoOperacaoTotalMinutos()) }}</strong> operação</span>
                <span><strong>{{ $ordem->kmOperacaoConsolidado() !== null ? number_format($ordem->kmOperacaoConsolidado(),3,',','.') . ' km' : '—' }}</strong> consolidados</span>
            </div>
        </div>
        <div class="overflow-x-auto pb-2">
            <div class="min-w-[900px] flex items-start">
                @foreach($timeline as $i => $etapa)
                    @php
                        $concluida = (bool)$etapa['data'];
                        $atual = !$concluida && $i === $primeiroPendente && !in_array($ordem->status, ['concluido','cancelado','negado'], true);
                        $corTexto = $etapa['tipo'] === 'carregado' ? 'text-blue-700' : ($etapa['tipo'] === 'parada' ? 'text-amber-700' : 'text-emerald-700');
                    @endphp
                    <div class="flex-1 min-w-[145px] relative text-center px-2">
                        @if($i < count($timeline)-1)
                            <div class="absolute top-3 left-1/2 w-full h-0.5 {{ $concluida ? 'bg-emerald-300' : 'bg-gray-200' }}"></div>
                        @endif
                        <div class="relative z-10 mx-auto w-7 h-7 rounded-full flex items-center justify-center text-xs font-bold border-2 {{ $concluida ? 'bg-emerald-500 border-emerald-500 text-white' : ($atual ? 'bg-orange-100 border-orange-500 text-orange-700' : 'bg-white border-gray-300 text-gray-400') }}">
                            {{ $concluida ? '✓' : $i + 1 }}
                        </div>
                        <div class="mt-2 text-xs font-semibold text-gray-800">{{ $etapa['label'] }}</div>
                        <div class="mt-1 text-[11px] {{ $concluida ? 'text-gray-700' : 'text-gray-400' }}">
                            {{ $etapa['data'] ? $etapa['data']->format('d/m H:i') : ($atual ? 'Próxima etapa' : 'Pendente') }}
                        </div>
                        @if($etapa['duracao'] !== null)
                            <div class="mt-1 text-[11px] {{ $corTexto }}">{{ \App\Models\OrdemServico::formatarDuracao($etapa['duracao']) }}</div>
                        @endif
                        @if($etapa['km'] !== null)
                            <div class="text-[11px] font-medium {{ $corTexto }}">{{ number_format($etapa['km'],3,',','.') }} km</div>
                        @endif
                    </div>
                @endforeach
            </div>
        </div>
        @if($ordem->percentualKmCarregado() !== null)
            <div class="mt-4 grid grid-cols-2 md:grid-cols-4 gap-3 text-xs">
                <div class="rounded-lg bg-blue-50 border border-blue-100 px-3 py-2"><span class="text-gray-500">Produtivo</span><div class="font-bold text-blue-700 text-base">{{ number_format($ordem->percentualKmCarregado(),1,',','.') }}%</div></div>
                <div class="rounded-lg bg-amber-50 border border-amber-100 px-3 py-2"><span class="text-gray-500">Vazio</span><div class="font-bold text-amber-700 text-base">{{ number_format($ordem->percentualKmVazio(),1,',','.') }}%</div></div>
                <div class="rounded-lg bg-gray-50 border border-gray-200 px-3 py-2"><span class="text-gray-500">Parado origem + destino</span><div class="font-bold text-gray-800 text-base">{{ \App\Models\OrdemServico::formatarDuracao($ordem->tempoParadoMinutos()) }}</div></div>
                <div class="rounded-lg bg-gray-50 border border-gray-200 px-3 py-2"><span class="text-gray-500">Km carregados</span><div class="font-bold text-gray-800 text-base">{{ number_format($ordem->kmCarregado(),3,',','.') }} km</div></div>
            </div>
        @endif
    </div>

    {{-- Formulário de edição --}}
    <form method="POST" action="{{ route('operador.ordens.update', $ordem) }}"
          x-data="osForm()" x-init="init()">
        @csrf @method('PUT')

        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 space-y-5">
            <h3 class="text-sm font-semibold text-gray-700 uppercase tracking-wide border-b border-gray-100 pb-2">
                Dados da Ordem de Serviço
            </h3>

            {{-- Linha 1: Data, Hora, Cliente, Sonda --}}
            <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                <div>
                    <label class="block text-xs font-medium text-gray-600 mb-1">Data do Serviço *</label>
                    <input type="date" name="data_servico" value="{{ old('data_servico', $ordem->data_servico?->format('Y-m-d')) }}" required
                           class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-orange-400">
                </div>
                <div>
                    <label class="block text-xs font-medium text-gray-600 mb-1">Hora de Coleta</label>
                    <input type="text" name="hora_coleta" value="{{ old('hora_coleta', $ordem->hora_coleta) }}"
                           placeholder="07:00" maxlength="8"
                           class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-orange-400">
                </div>
                <div>
                    <label class="block text-xs font-medium text-gray-600 mb-1">Cliente/Solicitante</label>
                    <input type="text" name="cliente_solicitante" value="{{ old('cliente_solicitante', $ordem->cliente_solicitante) }}"
                           class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-orange-400">
                </div>
                <div>
                    <label class="block text-xs font-medium text-gray-600 mb-1">Sonda / Plataforma</label>
                    <input type="text" name="sonda" value="{{ old('sonda', $ordem->sonda) }}"
                           class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-orange-400">
                </div>
            </div>

            {{-- Linha 2: Origem → Destino --}}
            <div class="grid grid-cols-2 md:grid-cols-3 gap-4">
                <div>
                    <label class="block text-xs font-medium text-gray-600 mb-1">Origem</label>
                    <input type="text" name="origem_texto" value="{{ old('origem_texto', $ordem->origemLabel()) }}"
                           class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-orange-400">
                </div>
                <div>
                    <label class="block text-xs font-medium text-gray-600 mb-1">Destino</label>
                    <input type="text" name="destino_texto" value="{{ old('destino_texto', $ordem->destinoLabel()) }}"
                           class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-orange-400">
                </div>
                <div>
                    <label class="block text-xs font-medium text-gray-600 mb-1">Tipo de Veículo Solicitado</label>
                    <input type="text" name="tipo_veiculo_solicitado"
                           value="{{ old('tipo_veiculo_solicitado', $ordem->tipo_veiculo_solicitado) }}"
                           placeholder="ex: 27 TON"
                           class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-orange-400">
                </div>
            </div>

            {{-- Linha 3: Veículo + Carreta --}}
            <div class="grid grid-cols-2 md:grid-cols-3 gap-4">
                <div>
                    <label class="block text-xs font-medium text-gray-600 mb-1">Cavalo (Veículo)</label>
                    <select name="veiculo_id" x-model="cavaloId"
                            x-on:change="sugerirCarreta()"
                            class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-orange-400">
                        <option value="">— sem veículo —</option>
                        @foreach($veiculos as $v)
                            <option value="{{ $v->id }}" {{ old('veiculo_id', $ordem->veiculo_id) == $v->id ? 'selected' : '' }}>
                                {{ $v->placa }} ({{ $v->tipo }})
                            </option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label class="block text-xs font-medium text-gray-600 mb-1">Carroceria / Carreta</label>
                    <select name="carreta_id" x-model="carretaId"
                            class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-orange-400">
                        <option value="">— sem carroceria —</option>
                        <template x-for="c in carretasDisponiveis()" :key="c.id">
                            <option :value="String(c.id)" x-text="c.label"></option>
                        </template>
                    </select>
                    <input type="hidden" name="carreta_placa" :value="carretaSelecionada()?.placa || ''">
                    <p class="mt-1 text-[11px] text-gray-500" x-show="cavaloId && carretasDisponiveis().length === 0" x-cloak>
                        Nenhuma carroceria ativa compatível com este cavalo e com a capacidade necessária.
                    </p>
                </div>
                <div>
                    <label class="block text-xs font-medium text-gray-600 mb-1">Motorista</label>
                    <select name="motorista_id"
                            class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-orange-400">
                        <option value="">— sem motorista —</option>
                        @foreach($motoristas as $m)
                        @php
                            $cnhOsVencida = $m->cnh_validade && $m->cnh_validade->isPast();
                        @endphp
                            <option value="{{ $m->id }}"
                                    {{ old('motorista_id', $ordem->motorista_id) == $m->id ? 'selected' : '' }}
                                    {{ $cnhOsVencida ? 'style=color:red' : '' }}>
                                {{ $m->nome }}{{ $cnhOsVencida ? ' ⚠ CNH vencida' : '' }}
                            </option>
                        @endforeach
                    </select>
                </div>
            </div>

            {{-- Marcos da Viagem / Telemetria --}}
            <div class="rounded-xl border border-blue-100 bg-blue-50/40 p-4 space-y-4">
                <div class="flex items-start justify-between gap-3 flex-wrap">
                    <div>
                        <h4 class="text-sm font-semibold text-gray-800">Marcos da Viagem / Telemetria</h4>
                        <p class="text-xs text-gray-500 mt-1">Preenchimento manual disponível. A mesma estrutura será alimentada futuramente pela integração A52.</p>
                    </div>
                    <div class="flex items-center gap-2 flex-wrap text-xs">
                        @if($ordem->telemetria_fonte)
                            <span class="inline-flex rounded-full bg-white border border-blue-200 px-2.5 py-1 text-blue-700 font-medium">
                                Fonte: {{ match($ordem->telemetria_fonte) { 'a52' => 'A52', 'gps' => 'GPS da frota', 'misto' => 'Múltiplas fontes', default => 'Manual' } }}
                            </span>
                        @endif
                        @if($ordem->a52_referencia)
                            <span class="inline-flex rounded-full bg-white border border-gray-200 px-2.5 py-1 text-gray-600 font-medium">A52: {{ $ordem->a52_referencia }}</span>
                        @else
                            <span class="inline-flex rounded-full bg-white border border-gray-200 px-2.5 py-1 text-gray-400">A52 ainda não vinculado</span>
                        @endif
                    </div>
                </div>

                <div class="rounded-lg border border-blue-100 bg-white/70 px-3 py-2 text-xs text-gray-600">
                    Os marcos devem ser registrados em sequência: <strong>Início da viagem → Chegada na origem → Saída da origem → Chegada no destino → Saída do destino</strong>. Um marco só é habilitado depois que o anterior estiver informado.
                </div>

                <div class="grid grid-cols-1 md:grid-cols-5 gap-3">
                    @php
                        $marcosViagem = [
                            'inicio_viagem_em' => ['Início da viagem', 'inicioViagem', null],
                            'chegada_origem_em' => ['Chegada na origem', 'chegadaOrigem', 'inicioViagem'],
                            'saida_origem_em' => ['Saída da origem', 'saidaOrigem', 'chegadaOrigem'],
                            'chegada_destino_em' => ['Chegada no destino', 'chegadaDestino', 'saidaOrigem'],
                            'saida_destino_em' => ['Saída do destino', 'saidaDestino', 'chegadaDestino'],
                        ];
                    @endphp
                    @foreach($marcosViagem as $campoMarco => [$labelMarco, $modeloMarco, $modeloAnterior])
                    <div class="min-w-0">
                        <label class="block text-xs font-medium text-gray-600 mb-1">{{ $labelMarco }}</label>
                        <input type="datetime-local" id="{{ $campoMarco }}" name="{{ $campoMarco }}"
                               x-model="{{ $modeloMarco }}"
                               @if($campoMarco === 'inicio_viagem_em') x-on:change="aoAlterarInicio()" @endif
                               @if($modeloAnterior) :disabled="!{{ $modeloAnterior }}" @endif
                               class="w-full min-w-0 border border-gray-300 rounded-lg px-2.5 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-orange-400 disabled:bg-gray-100 disabled:text-gray-400 disabled:cursor-not-allowed">
                        <button type="button" x-on:click="marcarAgora('{{ $campoMarco }}')"
                                @if($modeloAnterior) :disabled="!{{ $modeloAnterior }}" @endif
                                class="mt-1 text-[11px] text-blue-600 hover:underline disabled:text-gray-400 disabled:no-underline disabled:cursor-not-allowed">usar agora</button>
                        @if($modeloAnterior)
                            <p x-show="!{{ $modeloAnterior }}" x-cloak class="mt-1 text-[10px] text-amber-600">Informe o marco anterior primeiro.</p>
                        @endif
                    </div>
                    @endforeach
                </div>

                <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-3">
                    @php
                        $temposViagem = [
                            ['Vazio até origem', $ordem->tempoAteOrigemMinutos()],
                            ['Na origem', $ordem->permanenciaOrigemMinutos()],
                            ['Carregado', $ordem->transitoDestinoMinutos()],
                            ['No destino', $ordem->permanenciaDestinoMinutos()],
                            ['Vazio pós-destino', $ordem->tempoPosDestinoMinutos()],
                            ['Operação total', $ordem->tempoOperacaoTotalMinutos()],
                        ];
                    @endphp
                    @foreach($temposViagem as [$rotuloTempo, $minutosTempo])
                    <div class="rounded-lg bg-white border border-blue-100 px-3 py-2">
                        <div class="text-[11px] text-gray-500">{{ $rotuloTempo }}</div>
                        <div class="text-sm font-semibold text-gray-800 mt-0.5">{{ \App\Models\OrdemServico::formatarDuracao($minutosTempo) }}</div>
                    </div>
                    @endforeach
                </div>

                @if($ordem->telemetria_atualizada_em || $ordem->a52_sincronizado_em)
                <div class="text-[11px] text-gray-500 flex gap-4 flex-wrap">
                    @if($ordem->telemetria_atualizada_em)<span>Telemetria atualizada: {{ $ordem->telemetria_atualizada_em->format('d/m/Y H:i') }}</span>@endif
                    @if($ordem->a52_sincronizado_em)<span>Última sincronização A52: {{ $ordem->a52_sincronizado_em->format('d/m/Y H:i') }}</span>@endif
                </div>
                @endif
            </div>

            {{-- Geolocalização / Km vazios --}}
            <div class="rounded-xl border border-emerald-100 bg-emerald-50/40 p-4 space-y-4">
                <div class="flex items-start justify-between gap-3 flex-wrap">
                    <div>
                        <h4 class="text-sm font-semibold text-gray-800">Geolocalização e Quilometragem sem carga</h4>
                        <p class="text-xs text-gray-500 mt-1">Coordenadas podem ser informadas manualmente e futuramente recebidas do A52 ou do GPS/rastreador do caminhão.</p>
                    </div>
                    @if($ordem->geolocalizacao_fonte)
                        <span class="inline-flex rounded-full bg-white border border-emerald-200 px-2.5 py-1 text-xs text-emerald-700 font-medium">
                            Fonte: {{ match($ordem->geolocalizacao_fonte) { 'a52' => 'A52', 'gps' => 'GPS da frota', 'misto' => 'Múltiplas fontes', default => 'Manual' } }}
                        </span>
                    @endif
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                    <div class="rounded-lg border border-emerald-100 bg-white px-3 py-2 text-xs text-gray-600">
                        <div class="font-semibold text-gray-700 mb-1">Origem planejada</div>
                        @if($ordem->origem_latitude_planejada !== null && $ordem->origem_longitude_planejada !== null)
                            <span class="font-mono">{{ number_format($ordem->origem_latitude_planejada,7,'.','') }}, {{ number_format($ordem->origem_longitude_planejada,7,'.','') }}</span>
                        @else
                            <span class="text-amber-600">Sem coordenadas no cadastro de origem na geração desta OS.</span>
                        @endif
                    </div>
                    <div class="rounded-lg border border-emerald-100 bg-white px-3 py-2 text-xs text-gray-600">
                        <div class="font-semibold text-gray-700 mb-1">Destino planejado</div>
                        @if($ordem->destino_latitude_planejada !== null && $ordem->destino_longitude_planejada !== null)
                            <span class="font-mono">{{ number_format($ordem->destino_latitude_planejada,7,'.','') }}, {{ number_format($ordem->destino_longitude_planejada,7,'.','') }}</span>
                        @else
                            <span class="text-amber-600">Sem coordenadas no cadastro de destino na geração desta OS.</span>
                        @endif
                    </div>
                </div>

                <div class="grid grid-cols-1 xl:grid-cols-3 gap-4">
                    <div class="rounded-lg bg-white border border-emerald-100 p-3 space-y-3">
                        <div>
                            <div class="text-xs font-semibold text-gray-800">Trecho vazio até a origem</div>
                            <div class="text-[11px] text-gray-500">Posição do caminhão no início da viagem → chegada na origem.</div>
                        </div>
                        <div class="grid grid-cols-3 gap-2">
                            <div><label class="text-[11px] text-gray-500">Lat. início</label><input type="number" step="0.0000001" name="inicio_viagem_latitude" value="{{ old('inicio_viagem_latitude',$ordem->inicio_viagem_latitude) }}" class="w-full border rounded px-2 py-1.5 text-xs font-mono"></div>
                            <div><label class="text-[11px] text-gray-500">Long. início</label><input type="number" step="0.0000001" name="inicio_viagem_longitude" value="{{ old('inicio_viagem_longitude',$ordem->inicio_viagem_longitude) }}" class="w-full border rounded px-2 py-1.5 text-xs font-mono"></div>
                            <div><label class="text-[11px] text-gray-500">Hodômetro início</label><input type="number" step="0.001" min="0" name="odometro_inicio_viagem_km" value="{{ old('odometro_inicio_viagem_km',$ordem->odometro_inicio_viagem_km) }}" class="w-full border rounded px-2 py-1.5 text-xs"></div>
                            <div><label class="text-[11px] text-gray-500">Lat. chegada origem</label><input type="number" step="0.0000001" name="chegada_origem_latitude" value="{{ old('chegada_origem_latitude',$ordem->chegada_origem_latitude) }}" class="w-full border rounded px-2 py-1.5 text-xs font-mono"></div>
                            <div><label class="text-[11px] text-gray-500">Long. chegada origem</label><input type="number" step="0.0000001" name="chegada_origem_longitude" value="{{ old('chegada_origem_longitude',$ordem->chegada_origem_longitude) }}" class="w-full border rounded px-2 py-1.5 text-xs font-mono"></div>
                            <div><label class="text-[11px] text-gray-500">Hodômetro chegada</label><input type="number" step="0.001" min="0" name="odometro_chegada_origem_km" value="{{ old('odometro_chegada_origem_km',$ordem->odometro_chegada_origem_km) }}" class="w-full border rounded px-2 py-1.5 text-xs"></div>
                        </div>
                        <div class="rounded bg-emerald-50 px-3 py-2 text-sm"><span class="text-gray-600">Km vazios até origem:</span> <strong>{{ $ordem->km_vazio_ate_origem !== null ? number_format($ordem->km_vazio_ate_origem,3,',','.') . ' km' : '—' }}</strong></div>
                    </div>

                    <div class="rounded-lg bg-white border border-blue-100 p-3 space-y-3">
                        <div>
                            <div class="text-xs font-semibold text-gray-800">Trecho carregado</div>
                            <div class="text-[11px] text-gray-500">Saída da origem → chegada no destino. As leituras permitem medir os quilômetros produtivos reais.</div>
                        </div>
                        <div class="grid grid-cols-3 gap-2">
                            <div><label class="text-[11px] text-gray-500">Lat. saída origem</label><input type="number" step="0.0000001" name="saida_origem_latitude" value="{{ old('saida_origem_latitude',$ordem->saida_origem_latitude) }}" class="w-full border rounded px-2 py-1.5 text-xs font-mono"></div>
                            <div><label class="text-[11px] text-gray-500">Long. saída origem</label><input type="number" step="0.0000001" name="saida_origem_longitude" value="{{ old('saida_origem_longitude',$ordem->saida_origem_longitude) }}" class="w-full border rounded px-2 py-1.5 text-xs font-mono"></div>
                            <div><label class="text-[11px] text-gray-500">Hodômetro saída origem</label><input type="number" step="0.001" min="0" name="odometro_saida_origem_km" value="{{ old('odometro_saida_origem_km',$ordem->odometro_saida_origem_km) }}" class="w-full border rounded px-2 py-1.5 text-xs"></div>
                            <div><label class="text-[11px] text-gray-500">Lat. chegada destino</label><input type="number" step="0.0000001" name="chegada_destino_latitude" value="{{ old('chegada_destino_latitude',$ordem->chegada_destino_latitude) }}" class="w-full border rounded px-2 py-1.5 text-xs font-mono"></div>
                            <div><label class="text-[11px] text-gray-500">Long. chegada destino</label><input type="number" step="0.0000001" name="chegada_destino_longitude" value="{{ old('chegada_destino_longitude',$ordem->chegada_destino_longitude) }}" class="w-full border rounded px-2 py-1.5 text-xs font-mono"></div>
                            <div><label class="text-[11px] text-gray-500">Hodômetro chegada destino</label><input type="number" step="0.001" min="0" name="odometro_chegada_destino_km" value="{{ old('odometro_chegada_destino_km',$ordem->odometro_chegada_destino_km) }}" class="w-full border rounded px-2 py-1.5 text-xs"></div>
                        </div>
                        <div class="rounded bg-blue-50 px-3 py-2 text-sm"><span class="text-gray-600">Km carregados:</span> <strong>{{ $ordem->kmCarregado() !== null ? number_format($ordem->kmCarregado(),3,',','.') . ' km' : '—' }}</strong></div>
                    </div>

                    <div class="rounded-lg bg-white border border-emerald-100 p-3 space-y-3">
                        <div>
                            <div class="text-xs font-semibold text-gray-800">Trecho vazio após o destino</div>
                            <div class="text-[11px] text-gray-500">Saída do destino → ponto de espera.</div>
                        </div>
                        <div class="grid grid-cols-3 gap-2">
                            <div><label class="text-[11px] text-gray-500">Lat. saída destino</label><input type="number" step="0.0000001" name="saida_destino_latitude" value="{{ old('saida_destino_latitude',$ordem->saida_destino_latitude) }}" class="w-full border rounded px-2 py-1.5 text-xs font-mono"></div>
                            <div><label class="text-[11px] text-gray-500">Long. saída destino</label><input type="number" step="0.0000001" name="saida_destino_longitude" value="{{ old('saida_destino_longitude',$ordem->saida_destino_longitude) }}" class="w-full border rounded px-2 py-1.5 text-xs font-mono"></div>
                            <div><label class="text-[11px] text-gray-500">Hodômetro saída</label><input type="number" step="0.001" min="0" name="odometro_saida_destino_km" value="{{ old('odometro_saida_destino_km',$ordem->odometro_saida_destino_km) }}" class="w-full border rounded px-2 py-1.5 text-xs"></div>
                        </div>
                        <div>
                            <label class="block text-[11px] text-gray-500 mb-1">Ponto de espera</label>
                            <select name="ponto_espera_id" class="w-full border rounded px-2 py-1.5 text-xs">
                                <option value="">— não informado —</option>
                                @foreach($pontosEspera as $ponto)
                                    <option value="{{ $ponto->id }}" {{ (string)old('ponto_espera_id',$ordem->ponto_espera_id) === (string)$ponto->id ? 'selected' : '' }}>{{ $ponto->nome }}{{ $ponto->sigla ? ' · '.$ponto->sigla : '' }}</option>
                                @endforeach
                            </select>
                            @if($pontoEsperaSugerido)
                                <p class="mt-1 text-[11px] text-emerald-700">Mais próximo geograficamente do destino: <strong>{{ $pontoEsperaSugerido['ponto']->nome }}</strong> ({{ number_format($pontoEsperaSugerido['distancia_geodesica_km'],2,',','.') }} km em linha geodésica). Não representa km rodado em estrada.</p>
                            @endif
                        </div>
                        <div class="grid grid-cols-4 gap-2">
                            <div><label class="text-[11px] text-gray-500">Chegada espera</label><input type="datetime-local" name="chegada_ponto_espera_em" value="{{ old('chegada_ponto_espera_em',$ordem->chegada_ponto_espera_em?->format('Y-m-d\TH:i')) }}" class="w-full border rounded px-2 py-1.5 text-xs"></div>
                            <div><label class="text-[11px] text-gray-500">Latitude</label><input type="number" step="0.0000001" name="chegada_ponto_espera_latitude" value="{{ old('chegada_ponto_espera_latitude',$ordem->chegada_ponto_espera_latitude) }}" class="w-full border rounded px-2 py-1.5 text-xs font-mono"></div>
                            <div><label class="text-[11px] text-gray-500">Longitude</label><input type="number" step="0.0000001" name="chegada_ponto_espera_longitude" value="{{ old('chegada_ponto_espera_longitude',$ordem->chegada_ponto_espera_longitude) }}" class="w-full border rounded px-2 py-1.5 text-xs font-mono"></div>
                            <div><label class="text-[11px] text-gray-500">Hodômetro</label><input type="number" step="0.001" min="0" name="odometro_chegada_ponto_espera_km" value="{{ old('odometro_chegada_ponto_espera_km',$ordem->odometro_chegada_ponto_espera_km) }}" class="w-full border rounded px-2 py-1.5 text-xs"></div>
                        </div>
                        <div class="rounded bg-emerald-50 px-3 py-2 text-sm"><span class="text-gray-600">Km vazios após destino:</span> <strong>{{ $ordem->km_vazio_pos_destino !== null ? number_format($ordem->km_vazio_pos_destino,3,',','.') . ' km' : '—' }}</strong></div>
                    </div>
                </div>

                <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-3">
                    <div class="rounded-lg bg-white border border-emerald-100 px-3 py-2"><div class="text-[11px] text-gray-500">Vazio até origem</div><div class="text-base font-semibold">{{ $ordem->km_vazio_ate_origem !== null ? number_format($ordem->km_vazio_ate_origem,3,',','.') . ' km' : '—' }}</div></div>
                    <div class="rounded-lg bg-white border border-blue-100 px-3 py-2"><div class="text-[11px] text-gray-500">Km carregados</div><div class="text-base font-semibold text-blue-700">{{ $ordem->kmCarregado() !== null ? number_format($ordem->kmCarregado(),3,',','.') . ' km' : '—' }}</div></div>
                    <div class="rounded-lg bg-white border border-emerald-100 px-3 py-2"><div class="text-[11px] text-gray-500">Vazio pós-destino</div><div class="text-base font-semibold">{{ $ordem->km_vazio_pos_destino !== null ? number_format($ordem->km_vazio_pos_destino,3,',','.') . ' km' : '—' }}</div></div>
                    <div class="rounded-lg bg-white border border-gray-200 px-3 py-2"><div class="text-[11px] text-gray-500">Km operação consolidada</div><div class="text-base font-bold">{{ $ordem->kmOperacaoConsolidado() !== null ? number_format($ordem->kmOperacaoConsolidado(),3,',','.') . ' km' : '—' }}</div></div>
                    <div class="rounded-lg bg-white border border-blue-200 px-3 py-2"><div class="text-[11px] text-gray-500">% km produtivo</div><div class="text-base font-bold text-blue-700">{{ $ordem->percentualKmCarregado() !== null ? number_format($ordem->percentualKmCarregado(),1,',','.') . '%' : '—' }}</div></div>
                    <div class="rounded-lg bg-white border border-amber-200 px-3 py-2"><div class="text-[11px] text-gray-500">% km vazio</div><div class="text-base font-bold text-amber-700">{{ $ordem->percentualKmVazio() !== null ? number_format($ordem->percentualKmVazio(),1,',','.') . '%' : '—' }}</div></div>
                </div>
                <p class="text-[11px] text-gray-500">Com a cadeia completa de hodômetro, o Sistema MD calcula os km vazios, os km carregados e os percentuais produtivo/vazio. Os indicadores consolidados só aparecem quando os três trechos estão completos. A52/GPS poderá futuramente fornecer as coordenadas, leituras ou a distância efetivamente percorrida.</p>
            </div>

            {{-- Linha 4: Químico, CTE cliente, NF/CTE MD, Notas --}}
            <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                <div>
                    <label class="block text-xs font-medium text-gray-600 mb-1">Químico</label>
                    <input type="text" name="quimico" value="{{ old('quimico', $ordem->quimico) }}"
                           class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-orange-400">
                </div>
                <div>
                    <label class="block text-xs font-medium text-gray-600 mb-1">CTE do Cliente</label>
                    <input type="text" name="cte_cliente" value="{{ old('cte_cliente', $ordem->cte_cliente) }}"
                           class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-orange-400">
                </div>
                <div>
                    <label class="block text-xs font-medium text-gray-600 mb-1">NF / CTE MD</label>
                    <input type="text" name="nf_cte_md" value="{{ old('nf_cte_md', $ordem->nf_cte_md) }}"
                           class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-orange-400">
                </div>
                <div>
                    <label class="block text-xs font-medium text-gray-600 mb-1">Notas Transportadas</label>
                    <input type="text" name="notas_transportadas" value="{{ old('notas_transportadas', $ordem->notas_transportadas) }}"
                           class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-orange-400">
                </div>
            </div>

            {{-- Linha 5: Status, DADOS RT --}}
            <div class="grid grid-cols-2 md:grid-cols-3 gap-4">
                <div>
                    <label class="block text-xs font-medium text-gray-600 mb-1">Status *</label>
                    <select name="status" required x-model="statusOs"
                            class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-orange-400">
                        @foreach(\App\Models\OrdemServico::STATUS as $key => $info)
                            <option value="{{ $key }}"
                                    {{ old('status', $ordem->status) === $key ? 'selected' : '' }}
                                    @if($key === 'concluido') x-bind:disabled="!saidaDestino" @endif>
                                {{ $info['label'] }}
                            </option>
                        @endforeach
                    </select>
                    <div class="mt-1 space-y-0.5 text-[11px]">
                        <p x-show="statusOs === 'em_execucao' && !inicioViagem" x-cloak class="text-red-600">
                            Informe o início da viagem para usar o status Em Execução.
                        </p>
                        <p x-show="inicioViagem && statusOs === 'em_execucao'" class="text-gray-500">
                            O início da viagem coloca a OS em execução automaticamente.
                        </p>
                        <p x-show="!saidaDestino" class="text-gray-500">
                            Concluído fica disponível somente após informar a saída do destino.
                        </p>
                    </div>
                </div>
                <div>
                    <label class="block text-xs font-medium text-gray-600 mb-1">DADOS RT</label>
                    <input type="text" name="dados_rt" value="{{ old('dados_rt', $ordem->dados_rt) }}"
                           class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-orange-400">
                </div>
            </div>

            {{-- Observação + OBS Preço --}}
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label class="block text-xs font-medium text-gray-600 mb-1">Observação</label>
                    <textarea name="observacao" rows="2"
                              class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-orange-400">{{ old('observacao', $ordem->observacao) }}</textarea>
                </div>
                <div>
                    <label class="block text-xs font-medium text-gray-600 mb-1">OBS de Preço</label>
                    <textarea name="obs_preco" rows="2"
                              class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-orange-400">{{ old('obs_preco', $ordem->obs_preco) }}</textarea>
                </div>
            </div>

            {{-- Checkboxes --}}
            <div class="flex flex-wrap gap-6">
                <label class="inline-flex items-center gap-2 text-sm text-gray-700 cursor-pointer">
                    <input type="checkbox" name="emitir_cte" value="1" class="rounded text-orange-500"
                           {{ old('emitir_cte', $ordem->emitir_cte) ? 'checked' : '' }}>
                    Emitir CTE?
                </label>
                <label class="inline-flex items-center gap-2 text-sm text-gray-700 cursor-pointer">
                    <input type="checkbox" name="adicional_noturno" value="1" class="rounded text-orange-500"
                           {{ old('adicional_noturno', $ordem->adicional_noturno) ? 'checked' : '' }}>
                    Adicional Noturno
                </label>
                <label class="inline-flex items-center gap-2 text-sm text-gray-700 cursor-pointer">
                    <input type="checkbox" name="adicional_fds" value="1" class="rounded text-orange-500"
                           {{ old('adicional_fds', $ordem->adicional_fds) ? 'checked' : '' }}>
                    Adicional FDS
                </label>
                <label class="inline-flex items-center gap-2 text-sm text-gray-700 cursor-pointer">
                    <input type="checkbox" name="finalizado" value="1" class="rounded text-orange-500"
                           {{ old('finalizado', $ordem->finalizado) ? 'checked' : '' }}>
                    Finalizado
                </label>
                <label class="inline-flex items-center gap-2 text-sm text-gray-700 cursor-pointer">
                    <input type="checkbox" name="postergado" value="1" class="rounded text-orange-500"
                           x-model="postergado"
                           {{ old('postergado', $ordem->postergado) ? 'checked' : '' }}>
                    Postergado
                </label>
            </div>

            {{-- Obs. de Postergamento (visível apenas se postergado) --}}
            <div x-show="postergado" x-cloak>
                <label class="block text-xs font-medium text-gray-600 mb-1">Obs. de Postergamento</label>
                <input type="text" name="obs_postergamento"
                       value="{{ old('obs_postergamento', $ordem->obs_postergamento) }}"
                       placeholder="Ex.: reagendado para 25/mai por solicitação do cliente"
                       class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-orange-400">
            </div>

            {{-- Botões --}}
            <div class="flex items-center gap-3 pt-2 border-t border-gray-100">
                <button type="submit"
                        class="inline-flex items-center px-5 py-2 rounded-lg text-white text-sm font-semibold transition"
                        style="background:#F26522;" onmouseover="this.style.opacity='.88'" onmouseout="this.style.opacity='1'">
                    Salvar Alterações
                </button>
                <a href="{{ route('operador.ordens.index') }}"
                   class="inline-flex items-center px-5 py-2 rounded-lg border border-gray-300 text-gray-700 hover:bg-gray-50 text-sm transition">
                    Cancelar
                </a>
            </div>
        </div>
    </form>

    @php
        // Prepara a matriz no PHP antes de serializar para JavaScript.
        // Evita que o parser Blade tente interpretar arrays/arrow functions dentro de @json(...).
        $composicoesPorCavalo = $composicoes
            ->groupBy('cavalo_id')
            ->map(function ($grupo) {
                return $grupo
                    ->map(function ($c) {
                        return [
                            'id' => $c->carreta?->id,
                            'placa' => $c->carreta?->placa,
                            'subtipo' => $c->carreta?->subtipo,
                            'capacidade' => $c->carreta?->capacidade_ton !== null
                                ? (float) $c->carreta->capacidade_ton
                                : null,
                        ];
                    })
                    ->filter(fn ($c) => !empty($c['id']))
                    ->values();
            });
    @endphp

    <script>
    function osForm() {
        // Matriz ativa cavalo → carrocerias, já filtrável por capacidade da carga.
        const composicoes = @js($composicoesPorCavalo);
        const pesoCarga = @js($ordem->itemSolicitacao?->carga_peso_ton !== null ? (float)$ordem->itemSolicitacao->carga_peso_ton : null);

        return {
            cavaloId: "{{ old('veiculo_id', $ordem->veiculo_id) }}",
            carretaId: "{{ old('carreta_id', $ordem->carreta_id) }}",
            postergado: {{ old('postergado', $ordem->postergado) ? 'true' : 'false' }},
            sugestaoCarreta: false,
            inicioViagem: @js(old('inicio_viagem_em', $ordem->inicio_viagem_em?->format('Y-m-d\TH:i')) ?? ''),
            chegadaOrigem: @js(old('chegada_origem_em', $ordem->chegada_origem_em?->format('Y-m-d\TH:i')) ?? ''),
            saidaOrigem: @js(old('saida_origem_em', $ordem->saida_origem_em?->format('Y-m-d\TH:i')) ?? ''),
            chegadaDestino: @js(old('chegada_destino_em', $ordem->chegada_destino_em?->format('Y-m-d\TH:i')) ?? ''),
            saidaDestino: @js(old('saida_destino_em', $ordem->saida_destino_em?->format('Y-m-d\TH:i')) ?? ''),
            statusOs: @js(old('status', $ordem->status)),

            aoAlterarInicio() {
                if (this.inicioViagem && this.statusOs === 'programado') {
                    this.statusOs = 'em_execucao';
                }
            },

            marcarAgora(campo) {
                const el = document.getElementById(campo);
                if (!el) return;
                const agora = new Date();
                const local = new Date(agora.getTime() - agora.getTimezoneOffset() * 60000);
                el.value = local.toISOString().slice(0, 16);
                el.dispatchEvent(new Event('input', { bubbles: true }));
                el.dispatchEvent(new Event('change', { bubbles: true }));
            },

            init() {
                if (this.cavaloId) this.sugerirCarreta(false);
            },

            carretasDisponiveis() {
                const lista = composicoes[this.cavaloId] || [];
                return lista
                    .filter(c => pesoCarga === null || c.capacidade === null || Number(c.capacidade) >= Number(pesoCarga))
                    .map(c => ({
                        ...c,
                        label: `${c.placa} · ${c.subtipo || 'N/A'} · ${c.capacidade !== null ? Number(c.capacidade).toLocaleString('pt-BR', {maximumFractionDigits: 1}) + ' t' : 'cap. n/i'}`
                    }));
            },

            carretaSelecionada() {
                return this.carretasDisponiveis().find(c => String(c.id) === String(this.carretaId)) || null;
            },

            sugerirCarreta(sobrescrever = true) {
                const lista = this.carretasDisponiveis();
                if (!lista.some(c => String(c.id) === String(this.carretaId))) {
                    this.carretaId = lista.length ? String(lista[0].id) : '';
                } else if (sobrescrever && lista.length) {
                    this.carretaId = String(lista[0].id);
                }
            },
        };
    }
    </script>
</div>
@endsection