@extends('layouts.app')
@section('title', 'Motoristas')
@section('page_title', 'Gestão de Motoristas')

@section('content')
<div class="py-6 space-y-4">
    <div class="flex items-center justify-between flex-wrap gap-3">
        <form class="flex gap-2 flex-wrap" method="GET"
              x-data
              x-on:change="$el.submit()">
            <input type="text" name="search" value="{{ request('search') }}" placeholder="Nome ou CPF..."
                   class="border border-gray-300 rounded-lg px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-orange-400 w-56"
                   x-on:keydown.enter="$el.closest('form').submit()">
            <select name="status" class="border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-orange-400">
                <option value="">Todos os status</option>
                <option value="Ativo" {{ request('status') === 'Ativo' ? 'selected' : '' }}>Ativo</option>
                <option value="Inativo" {{ request('status') === 'Inativo' ? 'selected' : '' }}>Inativo</option>
                <option value="Férias" {{ request('status') === 'Férias' ? 'selected' : '' }}>Férias</option>
                <option value="Afastado" {{ request('status') === 'Afastado' ? 'selected' : '' }}>Afastado</option>
            </select>
            <input type="text" name="grupo" value="{{ request('grupo') }}" placeholder="Grupo (MACAE...)"
                   class="border border-gray-300 rounded-lg px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-orange-400 w-40"
                   x-on:keydown.enter="$el.closest('form').submit()">
            @if(request()->hasAny(['search','status','grupo']))
                <a href="{{ route('admin.motoristas.index') }}" class="bg-gray-200 text-gray-700 px-4 py-2 rounded-lg text-sm hover:bg-gray-300 transition">Limpar</a>
            @endif
        </form>
        <a href="{{ route('admin.motoristas.create') }}"
           class="text-white px-4 py-2 rounded-lg text-sm font-medium transition flex items-center gap-2"
           style="background:#F26522;" onmouseover="this.style.opacity='.88'" onmouseout="this.style.opacity='1'">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
            Novo Motorista
        </a>
    </div>
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
        <table class="min-w-full divide-y divide-gray-200">
            <thead class="bg-gray-50">
                <tr>
                    <x-th-sort column="ranking_posicao" label="Rank"      :sort="$sort" :dir="$dir" />
                    <x-th-sort column="nome"            label="Nome"      :sort="$sort" :dir="$dir" />
                    <x-th-sort column="cpf"             label="CPF"       :sort="$sort" :dir="$dir" />
                    <x-th-sort column="cargo"           label="Cargo"     :sort="$sort" :dir="$dir" />
                    <x-th-sort column="grupo"           label="Grupo"     :sort="$sort" :dir="$dir" />
                    <x-th-sort column="cnh_validade"    label="Val. CNH"  :sort="$sort" :dir="$dir" />
                    <x-th-sort column="status"          label="Status"    :sort="$sort" :dir="$dir" />
                    <th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase">Ações</th>
                </tr>
            </thead>
            <tbody class="bg-white divide-y divide-gray-100">
                @forelse($motoristas as $motorista)
                @php $topN = $topRank ?? 10; @endphp
                <tr class="hover:bg-gray-50 {{ $motorista->ranking_posicao && $motorista->ranking_posicao <= $topN ? 'bg-amber-50' : '' }}">
                    <td class="px-4 py-3 text-center">
                        @if($motorista->ranking_posicao)
                            <span class="inline-flex items-center justify-center w-8 h-8 rounded-full text-xs font-bold
                                {{ $motorista->ranking_posicao <= 3 ? 'text-white' : 'bg-amber-100 text-amber-800' }}"
                                style="{{ $motorista->ranking_posicao <= 3 ? 'background:#F26522;' : '' }}">
                                #{{ $motorista->ranking_posicao }}
                            </span>
                        @else
                            <span class="text-gray-300 text-xs">—</span>
                        @endif
                    </td>
                    <td class="px-4 py-3 text-sm font-medium text-gray-900">{{ $motorista->nome }}</td>
                    <td class="px-4 py-3 text-sm font-mono text-gray-500">{{ $motorista->cpf ?? '—' }}</td>
                    <td class="px-4 py-3 text-sm text-gray-500">{{ $motorista->cargo ?? '—' }}</td>
                    <td class="px-4 py-3 text-sm text-gray-500">{{ $motorista->grupo ?? '—' }}</td>
                    <td class="px-4 py-3 text-sm">
                        @if($motorista->cnh_validade)
                            @php $vencida = $motorista->cnh_validade->isPast(); @endphp
                            <span class="text-xs {{ $vencida ? 'text-red-600 font-semibold' : 'text-gray-500' }}">
                                {{ $motorista->cnh_validade->format('d/m/Y') }}
                                @if($vencida) ⚠@endif
                            </span>
                        @else
                            <span class="text-gray-300 text-xs">—</span>
                        @endif
                    </td>
                    <td class="px-4 py-3">
                        @php $sc = match($motorista->status) { 'Ativo' => 'green', 'Férias' => 'blue', 'Afastado' => 'yellow', default => 'red' }; @endphp
                        <span class="inline-flex px-2 py-0.5 rounded-full text-xs font-medium bg-{{ $sc }}-100 text-{{ $sc }}-800">{{ $motorista->status }}</span>
                    </td>
                    <td class="px-4 py-3 text-right">
                        <div class="flex items-center justify-end gap-2">
                            <a href="{{ route('admin.motoristas.edit', $motorista) }}"
                               class="inline-flex items-center px-3 py-1 rounded-md bg-blue-600 text-white hover:bg-blue-700 text-xs font-medium transition">Editar</a>
                            <form method="POST" action="{{ route('admin.motoristas.destroy', $motorista) }}" onsubmit="return confirm('Excluir este motorista?')">
                                @csrf @method('DELETE')
                                <button type="submit"
                                        class="inline-flex items-center px-3 py-1 rounded-md bg-red-600 text-white hover:bg-red-700 text-xs font-medium transition">Excluir</button>
                            </form>
                        </div>
                    </td>
                </tr>
                @empty
                <tr><td colspan="7" class="px-6 py-12 text-center text-gray-400 text-sm">Nenhum motorista encontrado.</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
    <div>{{ $motoristas->links() }}</div>
</div>
@endsection