@extends('layouts.app')
@section('title', 'Composições Cavalo+Carreta')
@section('page_title', 'Composições Cavalo + Carreta')

@section('content')
<div class="py-6 space-y-4">
    <div class="grid grid-cols-2 md:grid-cols-5 gap-3">
        <div class="bg-white border border-gray-200 rounded-xl p-4"><div class="text-xs text-gray-500 uppercase">Associações</div><div class="text-2xl font-bold text-gray-900">{{ number_format($resumo['total'], 0, ',', '.') }}</div></div>
        <div class="bg-white border border-gray-200 rounded-xl p-4"><div class="text-xs text-gray-500 uppercase">Ativas</div><div class="text-2xl font-bold text-green-700">{{ number_format($resumo['ativas'], 0, ',', '.') }}</div></div>
        <div class="bg-white border border-gray-200 rounded-xl p-4"><div class="text-xs text-gray-500 uppercase">Automáticas</div><div class="text-2xl font-bold text-blue-700">{{ number_format($resumo['automaticas'], 0, ',', '.') }}</div></div>
        <div class="bg-white border border-gray-200 rounded-xl p-4"><div class="text-xs text-gray-500 uppercase">Manuais</div><div class="text-2xl font-bold text-gray-700">{{ number_format($resumo['manuais'], 0, ',', '.') }}</div></div>
        <div class="bg-white border border-gray-200 rounded-xl p-4"><div class="text-xs text-gray-500 uppercase">Carrocerias sem engate</div><div class="text-2xl font-bold {{ $resumo['carrocerias_sem_engate'] ? 'text-amber-600' : 'text-green-700' }}">{{ $resumo['carrocerias_sem_engate'] }}</div></div>
    </div>

    <div class="bg-blue-50 border border-blue-200 rounded-xl px-4 py-3 text-sm text-blue-900">
        <strong>Regra automática:</strong> CAVALO + CARROCERIA somente quando ambos possuem o mesmo <strong>Engate</strong> informado.
        Categoria, Tipo e SubTipo/Tamanho seguem a matriz oficial da planilha de veículos. Carrocerias sem engate não entram na associação automática.
    </div>

    <div class="flex items-start 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="Placa do cavalo ou carroceria..."
                   class="border border-gray-300 rounded-lg px-3 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="engate" class="border border-gray-300 rounded-lg px-3 py-2 text-sm">
                <option value="">Todos os engates</option>
                @foreach($engates as $engate)<option value="{{ $engate }}" {{ request('engate') === $engate ? 'selected' : '' }}>{{ $engate }}</option>@endforeach
            </select>
            <select name="tipo_cavalo" class="border border-gray-300 rounded-lg px-3 py-2 text-sm">
                <option value="">Todos os cavalos</option>
                @foreach($tiposCavalo as $tipo)<option value="{{ $tipo }}" {{ request('tipo_cavalo') === $tipo ? 'selected' : '' }}>{{ $tipo }}</option>@endforeach
            </select>
            <select name="tipo_carroceria" class="border border-gray-300 rounded-lg px-3 py-2 text-sm">
                <option value="">Todas as carrocerias</option>
                @foreach($tiposCarroceria as $tipo)<option value="{{ $tipo }}" {{ request('tipo_carroceria') === $tipo ? 'selected' : '' }}>{{ $tipo }}</option>@endforeach
            </select>
            <select name="subtipo" class="border border-gray-300 rounded-lg px-3 py-2 text-sm max-w-56">
                <option value="">Todos os subtipos</option>
                @foreach($subtiposCarroceria as $subtipo)<option value="{{ $subtipo }}" {{ request('subtipo') === $subtipo ? 'selected' : '' }}>{{ $subtipo }}</option>@endforeach
            </select>
            <select name="origem" class="border border-gray-300 rounded-lg px-3 py-2 text-sm">
                <option value="">Todas as origens</option>
                <option value="automatica" {{ request('origem') === 'automatica' ? 'selected' : '' }}>Automática</option>
                <option value="manual" {{ request('origem') === 'manual' ? 'selected' : '' }}>Manual</option>
            </select>
            <select name="ativo" class="border border-gray-300 rounded-lg px-3 py-2 text-sm">
                <option value="">Todas</option>
                <option value="1" {{ request('ativo') === '1' ? 'selected' : '' }}>Ativas</option>
                <option value="0" {{ request('ativo') === '0' ? 'selected' : '' }}>Inativas</option>
            </select>
            @if(request()->hasAny(['search','engate','tipo_cavalo','tipo_carroceria','subtipo','origem','ativo']))
                <a href="{{ route('admin.composicoes.index') }}" class="bg-gray-200 text-gray-700 px-4 py-2 rounded-lg text-sm hover:bg-gray-300">Limpar</a>
            @endif
        </form>

        <div class="flex items-center gap-2">
            <form method="POST" action="{{ route('admin.composicoes.sincronizar') }}" onsubmit="return confirm('Sincronizar as associações possíveis com o cadastro atual de veículos?')">
                @csrf
                <button type="submit" class="bg-blue-600 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-blue-700 transition">Sincronizar com a frota</button>
            </form>
            <a href="{{ route('admin.composicoes.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>
                Nova Composição Manual
            </a>
        </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 text-sm">
            <thead class="bg-gray-50">
                <tr>
                    <th class="px-3 py-3 text-left text-xs font-semibold text-gray-500 uppercase">Cavalo</th>
                    <th class="px-3 py-3 text-left text-xs font-semibold text-gray-500 uppercase">Tipo</th>
                    <th class="px-3 py-3 text-left text-xs font-semibold text-gray-500 uppercase">Engate</th>
                    <th class="px-3 py-3 text-left text-xs font-semibold text-gray-500 uppercase">Carroceria</th>
                    <th class="px-3 py-3 text-left text-xs font-semibold text-gray-500 uppercase">Tipo</th>
                    <th class="px-3 py-3 text-left text-xs font-semibold text-gray-500 uppercase">SubTipo/Tam.</th>
                    <th class="px-3 py-3 text-right text-xs font-semibold text-gray-500 uppercase">Cap.</th>
                    <th class="px-3 py-3 text-center text-xs font-semibold text-gray-500 uppercase">Origem</th>
                    <th class="px-3 py-3 text-center text-xs font-semibold text-gray-500 uppercase">Status</th>
                    <th class="px-3 py-3 text-right text-xs font-semibold text-gray-500 uppercase">Ações</th>
                </tr>
            </thead>
            <tbody class="bg-white divide-y divide-gray-100">
                @forelse($composicoes as $comp)
                <tr class="hover:bg-gray-50">
                    <td class="px-3 py-3 font-mono font-semibold text-gray-900">{{ $comp->cavalo?->placa ?? '—' }}</td>
                    <td class="px-3 py-3 text-gray-600 text-xs">{{ $comp->cavalo?->tipo ?? '—' }}</td>
                    <td class="px-3 py-3 text-gray-700 text-xs whitespace-nowrap">{{ $comp->cavalo?->tipo_engate ?? '—' }}</td>
                    <td class="px-3 py-3 font-mono font-semibold text-blue-700">{{ $comp->carreta?->placa ?? '—' }}</td>
                    <td class="px-3 py-3 text-gray-600 text-xs">{{ $comp->carreta?->tipo ?? '—' }}</td>
                    <td class="px-3 py-3 text-gray-600 text-xs whitespace-nowrap">{{ $comp->carreta?->subtipoLabel() ?? '—' }}</td>
                    <td class="px-3 py-3 text-right text-gray-700 text-xs whitespace-nowrap">{{ $comp->carreta?->capacidade_ton !== null ? number_format((float)$comp->carreta->capacidade_ton, 1, ',', '.') . ' TL' : '—' }}</td>
                    <td class="px-3 py-3 text-center">
                        <span class="inline-flex px-2 py-0.5 rounded-full text-xs font-medium {{ $comp->origem === 'automatica' ? 'bg-blue-100 text-blue-700' : 'bg-purple-100 text-purple-700' }}">
                            {{ $comp->origem === 'automatica' ? 'Automática' : 'Manual' }}
                        </span>
                    </td>
                    <td class="px-3 py-3 text-center">
                        <span class="inline-flex px-2 py-0.5 rounded-full text-xs font-medium {{ $comp->is_active ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-500' }}">{{ $comp->is_active ? 'Ativa' : 'Inativa' }}</span>
                    </td>
                    <td class="px-3 py-3 text-right">
                        <div class="flex items-center justify-end gap-2">
                            <a href="{{ route('admin.composicoes.edit', $comp) }}" class="inline-flex items-center px-3 py-1 rounded-md bg-blue-600 text-white hover:bg-blue-700 text-xs font-medium">Editar</a>
                            <form method="POST" action="{{ route('admin.composicoes.destroy', $comp) }}" onsubmit="return confirm('{{ $comp->origem === 'automatica' ? 'Inativar esta associação automática?' : 'Remover esta composição?' }}')">
                                @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">{{ $comp->origem === 'automatica' ? 'Inativar' : 'Remover' }}</button>
                            </form>
                        </div>
                    </td>
                </tr>
                @empty
                <tr><td colspan="10" class="px-6 py-12 text-center text-gray-400">Nenhuma associação encontrada.</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
    <div>{{ $composicoes->links() }}</div>
</div>
@endsection