@extends('layouts.app')
@section('title', 'Pontos de Espera')
@section('page_title', 'Pontos de Espera')
@section('content')
<div class="py-6 space-y-4">
    @if(session('success'))<div class="bg-green-50 border border-green-200 text-green-800 rounded-lg px-4 py-3 text-sm">{{ session('success') }}</div>@endif
    <div class="flex items-center justify-between gap-3 flex-wrap">
        <form method="GET" class="flex gap-2">
            <input type="text" name="search" value="{{ request('search') }}" placeholder="Nome, sigla ou cidade..." class="border border-gray-300 rounded-lg px-4 py-2 text-sm w-72">
            <button class="bg-gray-800 text-white px-4 py-2 rounded-lg text-sm">Buscar</button>
            @if(request('search'))<a href="{{ route('admin.pontos-espera.index') }}" class="bg-gray-200 text-gray-700 px-4 py-2 rounded-lg text-sm">Limpar</a>@endif
        </form>
        <a href="{{ route('admin.pontos-espera.create') }}" class="text-white px-4 py-2 rounded-lg text-sm font-medium" style="background:#F26522;">+ Novo Ponto de Espera</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>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Nome</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Cidade/UF</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Coordenadas</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Status</th>
                <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase">Ações</th>
            </tr></thead>
            <tbody class="divide-y divide-gray-100">
            @forelse($pontos as $ponto)
                <tr>
                    <td class="px-6 py-4 text-sm"><div class="font-medium text-gray-900">{{ $ponto->nome }}</div><div class="text-xs text-gray-500">{{ $ponto->sigla }}</div></td>
                    <td class="px-6 py-4 text-sm text-gray-600">{{ $ponto->cidade }}{{ $ponto->estado ? '/'.$ponto->estado : '' }}</td>
                    <td class="px-6 py-4 text-xs font-mono text-gray-600">@if($ponto->temCoordenadas()){{ number_format($ponto->latitude,7,'.','') }}, {{ number_format($ponto->longitude,7,'.','') }}@else<span class="text-amber-600">Não informadas</span>@endif</td>
                    <td class="px-6 py-4"><span class="px-2 py-0.5 rounded-full text-xs {{ $ponto->is_active ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-700' }}">{{ $ponto->is_active ? 'Ativo' : 'Inativo' }}</span></td>
                    <td class="px-6 py-4 text-right"><div class="flex justify-end gap-2"><a href="{{ route('admin.pontos-espera.edit', $ponto) }}" class="px-3 py-1 rounded border border-blue-500 text-blue-600 text-xs">Editar</a><form method="POST" action="{{ route('admin.pontos-espera.destroy', $ponto) }}" onsubmit="return confirm('Excluir este ponto de espera?')">@csrf @method('DELETE')<button class="px-3 py-1 rounded bg-red-600 text-white text-xs">Excluir</button></form></div></td>
                </tr>
            @empty<tr><td colspan="5" class="px-6 py-12 text-center text-gray-400 text-sm">Nenhum ponto de espera cadastrado.</td></tr>@endforelse
            </tbody>
        </table>
    </div>
    <div>{{ $pontos->links() }}</div>
</div>
@endsection