@extends('layouts.app')
@section('title', isset($veiculo) ? 'Editar Veículo' : 'Novo Veículo')
@section('page_title', isset($veiculo) ? 'Editar Veículo' : 'Novo Veículo')

@section('content')
@php
    $categoriaAtual = old('categoria', $veiculo->categoria ?? \App\Models\Veiculo::CATEGORIA_CAVALO);
    $tipoAtual = old('tipo', $veiculo->tipo ?? '');
    $subtipoAtual = old('subtipo', $veiculo->subtipo ?? '');
@endphp
<div class="py-6 max-w-4xl"
     x-data="{
        categoria: @js($categoriaAtual),
        tipo: @js($tipoAtual),
        subtipo: @js($subtipoAtual),
        tiposPorCategoria: @js($tiposPorCategoria),
        subtiposPorTipo: @js($subtiposPorTipo),
        get tiposDisponiveis() { return this.tiposPorCategoria[this.categoria] || []; },
        get subtiposDisponiveis() { return this.subtiposPorTipo[this.tipo] || []; },
        trocarCategoria() {
            if (!this.tiposDisponiveis.includes(this.tipo)) this.tipo = '';
            if (!(this.subtiposPorTipo[this.tipo] || []).includes(this.subtipo)) this.subtipo = '';
        },
        trocarTipo() {
            if (!this.subtiposDisponiveis.includes(this.subtipo)) {
                this.subtipo = this.subtiposDisponiveis.length === 1 ? this.subtiposDisponiveis[0] : '';
            }
        }
     }"
     x-init="trocarCategoria(); trocarTipo()">
    <form method="POST" action="{{ isset($veiculo) ? route('admin.veiculos.update', $veiculo) : route('admin.veiculos.store') }}" class="space-y-5">
        @csrf
        @if(isset($veiculo)) @method('PUT') @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="bg-white rounded-xl border border-gray-200 p-6 space-y-6">
            <div>
                <h2 class="text-base font-semibold text-gray-900">Identificação operacional</h2>
                <p class="text-sm text-gray-500 mt-1">Estrutura alinhada à planilha oficial de veículos MD.</p>
            </div>

            <div>
                <label class="block text-sm font-semibold text-gray-700 mb-2">Categoria *</label>
                <div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
                    @foreach($categorias as $categoria)
                        <label class="cursor-pointer rounded-xl border-2 px-4 py-3 transition"
                               :class="categoria === @js($categoria) ? 'border-orange-500 bg-orange-50' : 'border-gray-200 bg-white'">
                            <input type="radio" name="categoria" value="{{ $categoria }}" x-model="categoria" @change="trocarCategoria(); trocarTipo()" class="sr-only">
                            <div class="text-sm font-bold text-gray-800">{{ $categoria }}</div>
                            <div class="text-xs text-gray-500 mt-1">
                                @if($categoria === 'CAVALO') Unidade motora para composições
                                @elseif($categoria === 'CARROCERIA') Implemento/reboque
                                @else Veículo autônomo ou especial
                                @endif
                            </div>
                        </label>
                    @endforeach
                </div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Placa *</label>
                    <input type="text" name="placa" value="{{ old('placa', $veiculo->placa ?? '') }}" required maxlength="10"
                           class="w-full rounded-lg border-gray-300 uppercase text-sm" placeholder="AAA-0A00">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Tipo *</label>
                    <select name="tipo" x-model="tipo" @change="trocarTipo()" required
                            class="w-full rounded-lg border-gray-300 text-sm">
                        <option value="">— selecione —</option>
                        <template x-for="opcao in tiposDisponiveis" :key="opcao">
                            <option :value="opcao" x-text="opcao"></option>
                        </template>
                    </select>
                    <p class="text-xs text-gray-500 mt-1" x-show="categoria">
                        Tipos permitidos para <span class="font-medium" x-text="categoria"></span>.
                    </p>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">SubTipo / Tamanho *</label>
                    <select name="subtipo" x-model="subtipo" required :disabled="!tipo"
                            class="w-full rounded-lg border-gray-300 text-sm disabled:bg-gray-100 disabled:text-gray-400">
                        <option value="">— selecione —</option>
                        <template x-for="opcao in subtiposDisponiveis" :key="opcao">
                            <option :value="opcao" x-text="opcao"></option>
                        </template>
                    </select>
                    <p class="text-xs text-gray-500 mt-1" x-show="tipo">
                        Opções compatíveis com <span class="font-medium" x-text="tipo"></span>.
                    </p>
                </div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Engate</label>
                    <select name="tipo_engate" class="w-full rounded-lg border-gray-300 text-sm">
                        <option value="">— não informado —</option>
                        @foreach($tiposEngate as $engate)
                            <option value="{{ $engate }}" {{ old('tipo_engate', $veiculo->tipo_engate ?? '') === $engate ? 'selected' : '' }}>{{ $engate }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Tara (kg)</label>
                    <input type="number" min="0" name="tara_kg" value="{{ old('tara_kg', $veiculo->tara_kg ?? '') }}" class="w-full rounded-lg border-gray-300 text-sm" placeholder="8500">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Capacidade (TL)</label>
                    <input type="number" step="0.001" min="0" name="capacidade_ton" value="{{ old('capacidade_ton', $veiculo->capacidade_ton ?? '') }}" class="w-full rounded-lg border-gray-300 text-sm" placeholder="25,0">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Vínculo *</label>
                    <select name="vinculo" required class="w-full rounded-lg border-gray-300 text-sm">
                        @foreach($vinculos as $vinculo)
                            <option value="{{ $vinculo }}" {{ old('vinculo', $veiculo->vinculo ?? 'Frota') === $vinculo ? 'selected' : '' }}>{{ $vinculo }}</option>
                        @endforeach
                    </select>
                </div>
            </div>

            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Status *</label>
                <select name="status" required class="w-full md:w-64 rounded-lg border-gray-300 text-sm">
                    @foreach($statusLista as $status)
                        <option value="{{ $status }}" {{ old('status', $veiculo->status ?? 'Ativo') === $status ? 'selected' : '' }}>{{ $status }}</option>
                    @endforeach
                </select>
            </div>
        </div>

        <div class="bg-white rounded-xl border border-gray-200 p-6 space-y-5">
            <div>
                <h2 class="text-base font-semibold text-gray-900">Informações complementares</h2>
                <p class="text-sm text-gray-500 mt-1">Campos já existentes no sistema e que podem ser completados posteriormente.</p>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div><label class="block text-sm font-medium text-gray-700 mb-1">Empresa</label><input type="text" name="empresa" value="{{ old('empresa', $veiculo->empresa ?? '') }}" class="w-full rounded-lg border-gray-300 text-sm"></div>
                <div><label class="block text-sm font-medium text-gray-700 mb-1">Grupo</label><input type="text" name="grupo" value="{{ old('grupo', $veiculo->grupo ?? '') }}" class="w-full rounded-lg border-gray-300 text-sm"></div>
                <div><label class="block text-sm font-medium text-gray-700 mb-1">Gestor</label><input type="text" name="gestor" value="{{ old('gestor', $veiculo->gestor ?? '') }}" class="w-full rounded-lg border-gray-300 text-sm"></div>
                <div><label class="block text-sm font-medium text-gray-700 mb-1">Código Rastreador</label><input type="text" name="codigo_rastreador" value="{{ old('codigo_rastreador', $veiculo->codigo_rastreador ?? '') }}" class="w-full rounded-lg border-gray-300 text-sm"></div>
                <div><label class="block text-sm font-medium text-gray-700 mb-1">Tecnologia Rastreador</label><input type="text" name="tecnologia_rastreador" value="{{ old('tecnologia_rastreador', $veiculo->tecnologia_rastreador ?? '') }}" class="w-full rounded-lg border-gray-300 text-sm"></div>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Observação</label>
                <textarea name="observacao" rows="3" class="w-full rounded-lg border-gray-300 text-sm">{{ old('observacao', $veiculo->observacao ?? '') }}</textarea>
            </div>
        </div>

        <div class="flex items-center gap-3">
            <button type="submit" class="text-white px-6 py-2.5 rounded-lg text-sm font-medium" style="background:#F26522;">{{ isset($veiculo) ? 'Salvar Alterações' : 'Cadastrar Veículo' }}</button>
            <a href="{{ route('admin.veiculos.index') }}" class="text-gray-600 text-sm">Cancelar</a>
        </div>
    </form>
</div>
@endsection