@extends('layouts.app')
@section('title', 'Veículos')
@section('page_title', 'Veículos')

@section('content')
<div class="py-6 space-y-5">
    @if(session('success'))
        <div class="rounded-lg border border-green-200 bg-green-50 px-4 py-3 text-sm text-green-800">{{ session('success') }}</div>
    @endif
    @if(session('error'))
        <div class="rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-800">{{ session('error') }}</div>
    @endif
    @if($errors->any())
        <div class="rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-800">
            @foreach($errors->all() as $erro)<div>{{ $erro }}</div>@endforeach
        </div>
    @endif

    <div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
        @foreach([
            \App\Models\Veiculo::CATEGORIA_CAVALO => ['Cavalos','orange'],
            \App\Models\Veiculo::CATEGORIA_CARROCERIA => ['Carrocerias','blue'],
            \App\Models\Veiculo::CATEGORIA_OUTRO => ['Outros','gray'],
        ] as $cat => [$label,$cor])
            <a href="{{ route('admin.veiculos.index', ['categoria' => $cat]) }}"
               class="bg-white border border-gray-200 rounded-xl px-5 py-4 hover:border-gray-300 transition">
                <div class="text-xs uppercase tracking-wide text-gray-500">{{ $label }}</div>
                <div class="text-2xl font-bold text-gray-900 mt-1">{{ number_format((int)($totaisCategoria[$cat] ?? 0), 0, ',', '.') }}</div>
            </a>
        @endforeach
    </div>

    <div class="bg-white rounded-xl border border-gray-200 p-4">
        <div class="flex flex-col xl:flex-row xl:items-end justify-between gap-4">
            <form method="GET" class="flex flex-wrap items-end gap-3"
                  x-data="{
                    categoria: @js(request('categoria', '')),
                    tipo: @js(request('tipo', '')),
                    tiposPorCategoria: @js($tiposPorCategoria),
                    get tiposDisponiveis() {
                        if (!this.categoria) return @js($tipos);
                        return this.tiposPorCategoria[this.categoria] || [];
                    },
                    trocarCategoria() {
                        if (!this.tiposDisponiveis.includes(this.tipo)) this.tipo = '';
                    }
                  }">
                <div>
                    <label class="block text-xs font-semibold text-gray-600 mb-1">Buscar</label>
                    <input type="text" name="search" value="{{ request('search') }}" placeholder="Placa, tipo, subtipo..."
                           class="border-gray-300 rounded-lg text-sm w-56">
                </div>
                <div>
                    <label class="block text-xs font-semibold text-gray-600 mb-1">Categoria</label>
                    <select name="categoria" x-model="categoria" @change="trocarCategoria()" class="border-gray-300 rounded-lg text-sm">
                        <option value="">Todas</option>
                        @foreach($categorias as $categoria)
                            <option value="{{ $categoria }}">{{ $categoria }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label class="block text-xs font-semibold text-gray-600 mb-1">Tipo</label>
                    <select name="tipo" x-model="tipo" class="border-gray-300 rounded-lg text-sm">
                        <option value="">Todos</option>
                        <template x-for="opcao in tiposDisponiveis" :key="opcao">
                            <option :value="opcao" x-text="opcao"></option>
                        </template>
                    </select>
                </div>
                <div>
                    <label class="block text-xs font-semibold text-gray-600 mb-1">Status</label>
                    <select name="status" class="border-gray-300 rounded-lg text-sm">
                        <option value="">Todos</option>
                        @foreach($status as $s)
                            <option value="{{ $s }}" {{ request('status') === $s ? 'selected' : '' }}>{{ $s }}</option>
                        @endforeach
                    </select>
                </div>
                <button class="bg-gray-900 text-white rounded-lg px-4 py-2 text-sm">Filtrar</button>
                @if(request()->hasAny(['search','categoria','tipo','status']))
                    <a href="{{ route('admin.veiculos.index') }}" class="bg-gray-100 text-gray-700 rounded-lg px-4 py-2 text-sm">Limpar</a>
                @endif
            </form>

            <div class="flex flex-wrap items-center gap-2">
                <details class="relative">
                    <summary class="list-none cursor-pointer bg-blue-50 text-blue-700 border border-blue-200 rounded-lg px-4 py-2 text-sm font-medium">Importar XLSX</summary>
                    <div class="absolute right-0 z-20 mt-2 w-96 max-w-[90vw] bg-white border border-gray-200 rounded-xl shadow-lg p-4">
                        <form method="POST" action="{{ route('admin.veiculos.importar') }}" enctype="multipart/form-data" class="space-y-3">
                            @csrf
                            <div>
                                <div class="text-sm font-semibold text-gray-800">Atualizar cadastro pela planilha</div>
                                <p class="text-xs text-gray-500 mt-1">Usa a placa como chave. Atualiza os campos da planilha e preserva informações complementares do sistema.</p>
                            </div>
                            <input type="file" name="arquivo" accept=".xlsx,.xls" required class="block w-full text-sm text-gray-600">
                            <button class="w-full bg-blue-600 hover:bg-blue-700 text-white rounded-lg px-4 py-2 text-sm font-medium">Importar / Atualizar</button>
                        </form>
                    </div>
                </details>
                <a href="{{ route('admin.veiculos.create') }}" class="text-white rounded-lg px-4 py-2 text-sm font-medium" style="background:#F26522;">Novo Veículo</a>
            </div>
        </div>
    </div>

    <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200">
            <thead class="bg-gray-50">
                <tr>
                    <x-th-sort column="placa" label="Placa" :sort="$sort" :dir="$dir" />
                    <x-th-sort column="categoria" label="Categoria" :sort="$sort" :dir="$dir" />
                    <x-th-sort column="tipo" label="Tipo" :sort="$sort" :dir="$dir" />
                    <x-th-sort column="subtipo" label="SubTipo/Tam." :sort="$sort" :dir="$dir" />
                    <x-th-sort column="tipo_engate" label="Engate" :sort="$sort" :dir="$dir" />
                    <x-th-sort column="tara_kg" label="Tara (kg)" :sort="$sort" :dir="$dir" />
                    <x-th-sort column="capacidade_ton" label="Capacidade" :sort="$sort" :dir="$dir" />
                    <x-th-sort column="vinculo" label="Vínculo" :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-semibold text-gray-500 uppercase">Ações</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-100">
                @forelse($veiculos as $veiculo)
                    <tr class="hover:bg-gray-50">
                        <td class="px-4 py-3 text-sm font-mono font-semibold text-gray-900 whitespace-nowrap">{{ $veiculo->placa }}</td>
                        <td class="px-4 py-3 whitespace-nowrap">
                            @php
                                $catClass = match($veiculo->categoria) {
                                    \App\Models\Veiculo::CATEGORIA_CAVALO => 'bg-orange-100 text-orange-800',
                                    \App\Models\Veiculo::CATEGORIA_CARROCERIA => 'bg-blue-100 text-blue-800',
                                    default => 'bg-gray-100 text-gray-700',
                                };
                            @endphp
                            <span class="inline-flex rounded-full px-2 py-0.5 text-xs font-semibold {{ $catClass }}">{{ $veiculo->categoria }}</span>
                        </td>
                        <td class="px-4 py-3 text-sm text-gray-700 whitespace-nowrap">{{ $veiculo->tipo }}</td>
                        <td class="px-4 py-3 text-sm text-gray-600 whitespace-nowrap">{{ $veiculo->subtipo ?: '—' }}</td>
                        <td class="px-4 py-3 text-sm text-gray-600 whitespace-nowrap">{{ $veiculo->tipo_engate ?: '—' }}</td>
                        <td class="px-4 py-3 text-sm text-gray-700 text-right whitespace-nowrap">{{ $veiculo->tara_kg !== null ? number_format($veiculo->tara_kg, 0, ',', '.') : '—' }}</td>
                        <td class="px-4 py-3 text-sm text-gray-700 text-right whitespace-nowrap">
                            {{ $veiculo->capacidade_ton !== null ? number_format((float)$veiculo->capacidade_ton, 1, ',', '.') . ' TL' : '—' }}
                        </td>
                        <td class="px-4 py-3 text-sm text-gray-600 whitespace-nowrap">{{ $veiculo->vinculo ?: '—' }}</td>
                        <td class="px-4 py-3 whitespace-nowrap">
                            @php
                                $stClass = $veiculo->status === 'Ativo' ? 'bg-green-100 text-green-800' : ($veiculo->status === 'Em Manutenção' ? 'bg-yellow-100 text-yellow-800' : 'bg-gray-100 text-gray-700');
                            @endphp
                            <span class="inline-flex rounded-full px-2 py-0.5 text-xs font-medium {{ $stClass }}">{{ $veiculo->status }}</span>
                        </td>
                        <td class="px-4 py-3 text-right whitespace-nowrap">
                            <a href="{{ route('admin.veiculos.edit', $veiculo) }}" class="inline-flex px-3 py-1.5 rounded-md bg-blue-600 text-white text-xs font-medium">Editar</a>
                        </td>
                    </tr>
                @empty
                    <tr><td colspan="10" class="px-6 py-12 text-center text-gray-400 text-sm">Nenhum veículo encontrado.</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>

    <div>{{ $veiculos->links() }}</div>
</div>
@endsection