@extends('layouts.app')
@section('title', 'Solicitação ' . $solicitacao->numero_solicitacao)
@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">
                    <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->pedido_cliente)
                    <p class="text-sm text-gray-700"><span class="font-semibold">Pedido / OS do Cliente:</span> <span class="font-mono">{{ $solicitacao->pedido_cliente }}</span></p>
                @endif
                @if($solicitacao->assunto)
                    <p class="text-sm text-gray-600">{{ $solicitacao->assunto }}</p>
                @endif
                <p class="text-xs text-gray-400">
                    Criada em {{ $solicitacao->created_at->format('d/m/Y \à\s H:i') }}
                    @if($solicitacao->operador)
                        · Operador: <span class="font-medium text-gray-600">{{ $solicitacao->operador->name }}</span>
                    @endif
                </p>
            </div>
            <div class="flex items-center gap-2 flex-wrap">
                @if($solicitacao->status === 'rascunho')
                    <a href="{{ route('cliente.solicitacoes.edit', $solicitacao) }}"
                       class="inline-flex items-center px-3 py-1.5 rounded-md bg-blue-600 text-white hover:bg-blue-700 text-xs font-medium transition">Editar</a>
                    <form method="POST" action="{{ route('cliente.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;" onmouseover="this.style.opacity='.88'" onmouseout="this.style.opacity='1'">Enviar ao Operador</button>
                    </form>
                @endif
                @if(in_array($solicitacao->status, ['enviada','em_analise']))
                    <form method="POST" action="{{ route('cliente.solicitacoes.cancelar', $solicitacao) }}"
                          onsubmit="return confirm('Cancelar esta solicitação?')">
                        @csrf @method('PATCH')
                        <button type="submit"
                                class="inline-flex items-center px-3 py-1.5 rounded-md border border-red-400 text-red-600 hover:bg-red-50 text-xs font-medium transition">Cancelar</button>
                    </form>
                @endif
                <a href="{{ route('cliente.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->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>

    {{-- Acompanhamento visual --}}
    @php
        $fluxo = ['rascunho','enviada','em_analise','aprovada','em_execucao','concluida'];
        $indiceAtual = array_search($solicitacao->status, $fluxo, true);
        $cancelada = $solicitacao->status === 'cancelada';
        $etapas = [
            ['status'=>'enviada', 'label'=>'Enviada', 'desc'=>'Recebida pela operação'],
            ['status'=>'em_analise', 'label'=>'Em análise', 'desc'=>'Em avaliação pelo operador'],
            ['status'=>'aprovada', 'label'=>'Aprovada', 'desc'=>'Liberada para programação'],
            ['status'=>'em_execucao', 'label'=>'Em execução', 'desc'=>'Recursos/OS em operação'],
            ['status'=>'concluida', 'label'=>'Concluída', 'desc'=>'Atendimento finalizado'],
        ];
    @endphp
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-5">
        <div class="flex items-center justify-between gap-3 mb-4 flex-wrap">
            <div>
                <h3 class="text-sm font-semibold text-gray-800 uppercase tracking-wide">Acompanhamento</h3>
                <p class="text-xs text-gray-400 mt-1">Situação atual da sua solicitação e dos itens de transporte.</p>
            </div>
            @if($cancelada)
                <span class="inline-flex px-3 py-1 rounded-full text-xs font-semibold bg-red-100 text-red-700">
                    {{ $solicitacao->justificativa_rejeicao ? 'Solicitação rejeitada' : 'Solicitação cancelada' }}
                </span>
            @endif
        </div>

        @if(!$cancelada && $solicitacao->status !== 'rascunho')
            <div class="grid grid-cols-1 sm:grid-cols-5 gap-2">
                @foreach($etapas as $etapa)
                    @php
                        $idxEtapa = array_search($etapa['status'], $fluxo, true);
                        $atingida = $indiceAtual !== false && $indiceAtual >= $idxEtapa;
                        $atual = $solicitacao->status === $etapa['status'];
                    @endphp
                    <div class="rounded-lg border p-3 {{ $atual ? 'border-orange-300 bg-orange-50' : ($atingida ? 'border-emerald-200 bg-emerald-50' : 'border-gray-200 bg-gray-50') }}">
                        <div class="flex items-center gap-2">
                            <span class="w-5 h-5 rounded-full flex items-center justify-center text-[10px] font-bold {{ $atingida ? 'text-white' : 'bg-gray-200 text-gray-500' }}"
                                  style="{{ $atingida ? 'background:#F26522;' : '' }}">{{ $atingida ? '✓' : $loop->iteration }}</span>
                            <span class="text-xs font-semibold {{ $atingida ? 'text-gray-800' : 'text-gray-400' }}">{{ $etapa['label'] }}</span>
                        </div>
                        <p class="text-[11px] mt-2 {{ $atingida ? 'text-gray-600' : 'text-gray-400' }}">{{ $etapa['desc'] }}</p>
                    </div>
                @endforeach
            </div>
        @elseif($solicitacao->status === 'rascunho')
            <div class="rounded-lg bg-gray-50 border border-gray-200 p-3 text-sm text-gray-600">
                Esta solicitação ainda é um rascunho. Você pode editá-la antes de enviar ao operador.
            </div>
        @endif
    </div>

    {{-- Tabela unificada de itens (+ OS quando em_execucao) --}}
    @php
        $emExecucao = in_array($solicitacao->status, ['em_execucao','concluida'], true) && $ordemPorItem->isNotEmpty();
        $osColors   = ['programado'=>'bg-blue-100 text-blue-700','em_execucao'=>'bg-orange-100 text-orange-700','concluido'=>'bg-teal-100 text-teal-800','cancelado'=>'bg-red-100 text-red-700','negado'=>'bg-red-100 text-red-700'];
    @endphp
    <div class="bg-white rounded-xl shadow-sm border {{ $emExecucao ? 'border-orange-200' : 'border-gray-200' }} overflow-hidden">
        <div class="px-6 py-4 border-b {{ $emExecucao ? 'border-orange-100' : 'border-gray-100' }} flex items-center gap-3"
             style="{{ $emExecucao ? 'background:rgba(249,115,22,0.05);' : '' }}">
            @if($emExecucao)
                <svg class="w-4 h-4 text-orange-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
                </svg>
                <h3 class="text-sm font-semibold text-orange-700 uppercase tracking-wide">Itens de Transporte — Acompanhamento</h3>
                <span class="ml-auto text-xs bg-orange-100 text-orange-700 px-2 py-0.5 rounded-full font-semibold">{{ $ordemPorItem->count() }} OS</span>
            @else
                <h3 class="text-sm font-semibold text-gray-700 uppercase tracking-wide">Itens de Transporte</h3>
            @endif
        </div>
        <div class="overflow-x-auto">
            <table class="w-full divide-y divide-gray-200 text-sm">
                <thead class="bg-gray-50">
                    <tr>
                        @if($emExecucao)
                        <th class="px-3 py-3 text-left text-xs font-semibold text-gray-500 uppercase whitespace-nowrap">N° OS</th>
                        @endif
                        <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 whitespace-nowrap">Data</th>
                        <th class="px-3 py-3 text-left text-xs font-semibold text-gray-500 uppercase whitespace-nowrap">Horário</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 whitespace-nowrap">Veículo</th>
                        <th class="px-3 py-3 text-left text-xs font-semibold text-gray-500 uppercase">Motorista</th>
                        <th class="px-3 py-3 text-left text-xs font-semibold text-gray-500 uppercase">Status</th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-100">
                    @forelse($solicitacao->itens as $item)
                    @php
                        $os     = $emExecucao ? ($ordemPorItem->get($item->id)) : null;
                        // Use OS status when available, fall back to item status
                        if ($os) {
                            $badge = $osColors[$os->status] ?? 'bg-gray-100 text-gray-700';
                            $statusLabel = $os->statusLabel();
                        } else {
                            $isc   = $item->statusColor();
                            $badge = $colorMap[$isc] ?? 'bg-gray-100 text-gray-700';
                            $statusLabel = $item->statusLabel();
                        }
                        // Prefer OS data for vehicle/driver when OS exists
                        $placa     = $os ? ($os->cavalo_placa ?? $os->veiculo?->placa ?? '—') : ($item->veiculo?->placa ?? '—');
                        $motorista = $os ? ($os->motorista_nome ?? $os->motorista?->nome ?? '—') : ($item->motorista?->nome ?? '—');
                    @endphp
                    <tr class="hover:bg-gray-50">
                        @if($emExecucao)
                        <td class="px-3 py-2.5 font-mono font-semibold text-gray-800 whitespace-nowrap">
                            {{ $os?->numero_os ?? '—' }}
                        </td>
                        @endif
                        <td class="px-3 py-2.5 font-semibold text-gray-800">{{ $item->origemLabel() }}</td>
                        <td class="px-3 py-2.5 text-gray-700">{{ $item->destinoLabel() }}</td>
                        <td class="px-3 py-2.5 text-gray-500">{{ $item->sondaLabel() }}</td>
                        <td class="px-3 py-2.5 font-medium text-gray-800 whitespace-nowrap">{{ $item->data_coleta?->format('d/m/Y') }}</td>
                        <td class="px-3 py-2.5 text-gray-500 whitespace-nowrap">{{ $item->hora_coleta ?? '—' }}</td>
                        <td class="px-3 py-2.5 text-center font-medium text-gray-800">{{ $item->quantidade }}</td>
                        <td class="px-3 py-2.5 text-gray-500">{{ $item->carga_peso_ton !== null ? number_format((float)$item->carga_peso_ton, 3, ',', '.') . ' t' : '—' }}</td>
                        <td class="px-3 py-2.5 font-mono text-gray-500 text-xs whitespace-nowrap">{{ $placa }}</td>
                        <td class="px-3 py-2.5 text-gray-600 truncate" style="max-width:160px;">{{ $motorista }}</td>
                        <td class="px-3 py-2.5">
                            <span class="inline-flex px-2 py-0.5 rounded-full text-xs font-medium {{ $badge }}">{{ $statusLabel }}</span>
                        </td>
                    </tr>
                    @empty
                    <tr><td colspan="{{ $emExecucao ? 11 : 10 }}" class="px-6 py-8 text-center text-gray-400 text-sm">Nenhum item cadastrado.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection