@extends('layouts.app')
@section('title', 'Ordens de Serviço')
@section('page_title', 'Ordens de Serviço')

@section('content')
<div class="py-6 space-y-5">

    {{-- Contadores --}}
    <div class="grid grid-cols-2 sm:grid-cols-3 gap-4">
        @php
        $cards = [
            ['label' => 'Programadas',   'count' => $contadores['programado'],  'bg' => '#2563eb'],
            ['label' => 'Em Execução',   'count' => $contadores['em_execucao'], 'bg' => '#7c3aed'],
            ['label' => 'Concluídas',    'count' => $contadores['concluido'],   'bg' => '#0d9488'],
        ];
        @endphp
        @foreach($cards as $card)
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 flex items-center gap-4">
            <div class="w-10 h-10 rounded-lg flex items-center justify-center text-white text-sm font-bold"
                 style="background:{{ $card['bg'] }}">{{ $card['count'] }}</div>
            <span class="text-sm text-gray-600 font-medium">{{ $card['label'] }}</span>
        </div>
        @endforeach
    </div>

    {{-- Filtros --}}
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4">
        <form method="GET" action="{{ route('operador.ordens.index') }}"
              class="flex flex-wrap items-end gap-3" x-data
              x-init="$watch('', () => {})">
            @if(request('solicitacao_id'))
                <input type="hidden" name="solicitacao_id" value="{{ request('solicitacao_id') }}">
            @endif
            <div>
                <label class="block text-xs text-gray-500 mb-1">Pesquisar</label>
                <input type="text" name="search" value="{{ request('search') }}"
                       placeholder="OS, cliente, origem, destino…"
                       class="border border-gray-300 rounded-lg px-3 py-1.5 text-sm w-56 focus:outline-none focus:ring-2 focus:ring-orange-400">
            </div>
            <div>
                <label class="block text-xs text-gray-500 mb-1">Status</label>
                <select name="status"
                        class="border border-gray-300 rounded-lg px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-orange-400"
                        onchange="this.form.submit()">
                    <option value="">Todos</option>
                    @foreach(\App\Models\OrdemServico::STATUS as $key => $info)
                        <option value="{{ $key }}" {{ request('status') === $key ? 'selected' : '' }}>{{ $info['label'] }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="block text-xs text-gray-500 mb-1">Data de</label>
                <input type="date" name="data_de" value="{{ request('data_de') }}"
                       class="border border-gray-300 rounded-lg px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-orange-400">
            </div>
            <div>
                <label class="block text-xs text-gray-500 mb-1">Data até</label>
                <input type="date" name="data_ate" value="{{ request('data_ate') }}"
                       class="border border-gray-300 rounded-lg px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-orange-400">
            </div>
            <div class="flex items-end gap-2">
                <button type="submit"
                        class="inline-flex items-center px-4 py-1.5 rounded-lg text-white text-sm font-medium transition"
                        style="background:#F26522;" onmouseover="this.style.opacity='.88'" onmouseout="this.style.opacity='1'">
                    Filtrar
                </button>
                @if(request()->hasAny(['search','status','data_de','data_ate','solicitacao_id']))
                <a href="{{ route('operador.ordens.index') }}"
                   class="inline-flex items-center px-4 py-1.5 rounded-lg border border-gray-300 text-gray-700 hover:bg-gray-50 text-sm transition">
                    Limpar
                </a>
                @endif
            </div>
            {{-- Export --}}
            <div class="ml-auto flex items-end">
                <a href="{{ route('operador.ordens.exportar', request()->query()) }}"
                   class="inline-flex items-center gap-1 px-4 py-1.5 rounded-lg text-white text-sm font-medium transition"
                   style="background:#0A1E3D;" onmouseover="this.style.opacity='.85'" onmouseout="this.style.opacity='1'">
                    ⬇ Exportar XLSX
                </a>
            </div>
        </form>
    </div>

    @if($solicitacaoFiltro)
    <div class="bg-blue-50 border border-blue-200 text-blue-800 rounded-lg px-4 py-3 text-sm flex flex-wrap items-center justify-between gap-3">
        <div>
            <strong>Filtro por solicitação:</strong> {{ $solicitacaoFiltro->numero_solicitacao }}
            <span class="text-blue-600 ml-1">— exibindo somente as OS vinculadas a esta solicitação.</span>
        </div>
        <a href="{{ route('operador.ordens.index') }}" class="font-semibold hover:underline">Remover filtro</a>
    </div>
    @elseif(request('solicitacao_id'))
    <div class="bg-amber-50 border border-amber-200 text-amber-800 rounded-lg px-4 py-3 text-sm">
        A solicitação informada no filtro não foi encontrada.
    </div>
    @endif

    {{-- 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

    {{-- Tabela --}}
    <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">Lista de OS</h3>
            <span class="text-xs text-gray-400">{{ $ordens->total() }} registro(s)</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>
                        <x-th-sort column="data_servico"        label="Data"      :sort="$sort" :dir="$dir" />
                        <x-th-sort column="numero_os"           label="N° OS"     :sort="$sort" :dir="$dir" />
                        <x-th-sort column="cliente_solicitante" label="Cliente"   :sort="$sort" :dir="$dir" />
                        <x-th-sort column="origem_texto"        label="Origem"    :sort="$sort" :dir="$dir" />
                        <x-th-sort column="destino_texto"       label="Destino"   :sort="$sort" :dir="$dir" />
                        <x-th-sort column="cavalo_placa"        label="Veículo"   :sort="$sort" :dir="$dir" />
                        <x-th-sort column="motorista_nome"      label="Motorista" :sort="$sort" :dir="$dir" />
                        <x-th-sort column="status"              label="Status"    :sort="$sort" :dir="$dir" />
                        <th class="px-3 py-3 text-center text-xs font-semibold text-gray-500 uppercase">CTE?</th>
                        <th class="px-3 py-3 text-center text-xs font-semibold text-gray-500 uppercase">OK?</th>
                        <th class="px-3 py-3 text-center text-xs font-semibold text-gray-500 uppercase">Ações</th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-100">
                    @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',
                    ];
                    @endphp
                    @forelse($ordens as $os)
                    @php $badge = $colorMap[$os->statusColor()] ?? 'bg-gray-100 text-gray-700'; @endphp
                    <tr class="hover:bg-gray-50">
                        <td class="px-3 py-2 font-medium text-gray-900">{{ $os->data_servico?->format('d/m/Y') }}</td>
                        <td class="px-3 py-2 font-mono text-xs text-gray-700">{{ $os->numero_os }}</td>
                        <td class="px-3 py-2 text-gray-700 max-w-[190px]"><div class="truncate">{{ $os->cliente_solicitante }}</div>@if($os->pedido_cliente)<div class="text-[10px] text-blue-600 truncate" title="{{ $os->pedido_cliente }}">Pedido: {{ $os->pedido_cliente }}</div>@endif</td>
                        <td class="px-3 py-2 font-semibold text-gray-800">{{ $os->origemLabel() }}</td>
                        <td class="px-3 py-2 text-gray-700">{{ $os->destinoLabel() }}</td>
                        <td class="px-3 py-2 text-xs text-gray-600">{{ $os->cavalo_placa ?? $os->veiculo?->placa ?? '—' }}</td>
                        <td class="px-3 py-2 text-xs text-gray-600">{{ $os->motorista_nome ?? $os->motorista?->nome ?? '—' }}</td>
                        <td class="px-3 py-2">
                            <span class="inline-flex px-2 py-0.5 rounded-full text-xs font-semibold {{ $badge }}">
                                {{ $os->statusLabel() }}
                            </span>
                        </td>
                        <td class="px-3 py-2 text-center text-xs">{{ $os->emitir_cte ? '✓' : '' }}</td>
                        <td class="px-3 py-2 text-center text-xs">{{ $os->finalizado ? '✓' : '' }}</td>
                        <td class="px-3 py-2 text-center">
                            <a href="{{ route('operador.ordens.show', $os) }}"
                               class="inline-flex items-center px-2.5 py-1 rounded-md text-white text-xs font-medium"
                               style="background:#2563eb;">
                                Abrir
                            </a>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="12" class="px-6 py-10 text-center text-gray-400 text-sm">
                            Nenhuma OS encontrada.
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        @if($ordens->hasPages())
        <div class="px-6 py-4 border-t border-gray-100">
            {{ $ordens->links() }}
        </div>
        @endif
    </div>
</div>
@endsection