@extends('layouts.app')
@section('title', isset($composicao) ? 'Editar Composição' : 'Nova Composição')
@section('page_title', isset($composicao) ? 'Editar Composição Cavalo+Carreta' : 'Nova Composição Cavalo+Carreta')

@section('content')
<div class="py-6 max-w-3xl">
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-8">
        @if(isset($composicao) && $composicao->origem === 'automatica')
            <div class="mb-5 bg-blue-50 border border-blue-200 rounded-lg px-4 py-3 text-sm text-blue-900">
                Esta associação foi gerada automaticamente porque Cavalo e Carroceria possuem o mesmo engate. Você pode inativá-la ou adicionar uma observação operacional.
            </div>
        @endif

        <form method="POST" action="{{ isset($composicao) ? route('admin.composicoes.update', $composicao) : route('admin.composicoes.store') }}">
            @csrf
            @if(isset($composicao)) @method('PUT') @endif

            <div class="grid grid-cols-1 gap-5">
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-1">Cavalo *</label>
                    <select name="cavalo_id" id="cavalo_id" required {{ isset($composicao) && $composicao->origem === 'automatica' ? 'disabled' : '' }} class="w-full border border-gray-300 rounded-lg px-4 py-2.5 text-sm focus:ring-2 focus:ring-orange-400">
                        <option value="">— selecione o cavalo —</option>
                        @foreach($cavalos as $c)
                        <option value="{{ $c->id }}" data-engate="{{ $c->tipo_engate }}" {{ old('cavalo_id', $composicao->cavalo_id ?? '') == $c->id ? 'selected' : '' }}>
                            {{ $c->placa }} — {{ $c->tipo }} — {{ $c->tipo_engate ?: 'engate não informado' }}
                        </option>
                        @endforeach
                    </select>
                    @if(isset($composicao) && $composicao->origem === 'automatica')<input type="hidden" name="cavalo_id" value="{{ $composicao->cavalo_id }}">@endif
                    @error('cavalo_id')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                </div>

                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-1">Carroceria *</label>
                    <select name="carreta_id" id="carreta_id" required {{ isset($composicao) && $composicao->origem === 'automatica' ? 'disabled' : '' }} class="w-full border border-gray-300 rounded-lg px-4 py-2.5 text-sm focus:ring-2 focus:ring-orange-400">
                        <option value="">— selecione a carroceria —</option>
                        @foreach($carretas as $c)
                        <option value="{{ $c->id }}" data-engate="{{ $c->tipo_engate }}" {{ old('carreta_id', $composicao->carreta_id ?? '') == $c->id ? 'selected' : '' }}>
                            {{ $c->placa }} — {{ $c->tipo }} / {{ $c->subtipoLabel() ?: 'N/A' }} — {{ $c->tipo_engate ?: 'engate não informado' }}
                            {{ $c->capacidade_ton !== null ? '· ' . number_format((float)$c->capacidade_ton, 1, ',', '.') . ' TL' : '' }}
                        </option>
                        @endforeach
                    </select>
                    @if(isset($composicao) && $composicao->origem === 'automatica')<input type="hidden" name="carreta_id" value="{{ $composicao->carreta_id }}">@endif
                    <p class="mt-1 text-xs text-gray-500">Após escolher o cavalo, somente carrocerias com o mesmo engate permanecem disponíveis.</p>
                    @error('carreta_id')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Observação</label>
                    <textarea name="observacao" rows="2" class="w-full border border-gray-300 rounded-lg px-4 py-2.5 text-sm focus:ring-2 focus:ring-orange-400" placeholder="Ex.: Restrição operacional específica desta combinação...">{{ old('observacao', $composicao->observacao ?? '') }}</textarea>
                </div>

                <div class="flex items-center gap-3">
                    <input type="checkbox" name="is_active" id="is_active" value="1" {{ old('is_active', $composicao->is_active ?? true) ? 'checked' : '' }} class="w-4 h-4 rounded border-gray-300 text-orange-500 focus:ring-orange-400">
                    <label for="is_active" class="text-sm font-medium text-gray-700">Associação ativa</label>
                </div>
            </div>

            <div class="mt-8 flex items-center gap-4">
                <button type="submit" class="text-white px-6 py-2.5 rounded-lg text-sm font-medium" style="background:#F26522;">{{ isset($composicao) ? 'Salvar Alterações' : 'Cadastrar Composição' }}</button>
                <a href="{{ route('admin.composicoes.index') }}" class="text-gray-600 hover:text-gray-800 text-sm">Cancelar</a>
            </div>
        </form>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', () => {
    const cavalo = document.getElementById('cavalo_id');
    const carroceria = document.getElementById('carreta_id');
    const todas = Array.from(carroceria.options).map(o => ({ value: o.value, text: o.text, engate: o.dataset.engate || '', selected: o.selected }));

    function filtrar() {
        const opt = cavalo.options[cavalo.selectedIndex];
        const engate = opt?.dataset?.engate || '';
        const atual = carroceria.value;
        carroceria.innerHTML = '';
        todas.forEach(item => {
            if (!item.value || (engate && item.engate === engate)) {
                const o = new Option(item.text, item.value, false, item.value === atual || (!atual && item.selected));
                o.dataset.engate = item.engate;
                carroceria.add(o);
            }
        });
        if (!engate) carroceria.value = '';
    }

    cavalo.addEventListener('change', filtrar);
    filtrar();
});
</script>
@endsection