@extends('layouts.app')

@section('title', 'Pontos Turísticos - ApiEco')

@section('content')
<div class="mb-8">
    <h1 class="text-3xl font-bold text-gray-800">Pontos Turísticos</h1>
    <p class="text-gray-600">Descubra os melhores pontos turísticos de Salvador e arredores.</p>
</div>

<form method="GET" action="{{ route('pontos-turisticos.index') }}" class="mb-6 bg-white p-4 rounded-lg shadow">
    <div class="flex flex-wrap gap-4">
        <div class="flex-1 min-w-[200px]">
            <input type="text" name="search" placeholder="Buscar por nome..." 
                value="{{ request('search') }}"
                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-emerald-500">
        </div>
        <div class="w-48">
            <select name="tipo_id" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-emerald-500">
                <option value="">Todos os Tipos</option>
                @foreach($tipos as $tipo)
                    <option value="{{ $tipo->id }}" {{ request('tipo_id') == $tipo->id ? 'selected' : '' }}>
                        {{ $tipo->icone }} {{ $tipo->nome }}
                    </option>
                @endforeach
            </select>
        </div>
        <div class="w-40">
            <select name="status" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-emerald-500">
                <option value="">Todos Status</option>
                <option value="ativo" {{ request('status') === 'ativo' ? 'selected' : '' }}>Ativo</option>
                <option value="inativo" {{ request('status') === 'inativo' ? 'selected' : '' }}>Inativo</option>
            </select>
        </div>
        <button type="submit" class="bg-emerald-600 text-white px-4 py-2 rounded-md hover:bg-emerald-700">
            Buscar
        </button>
        <a href="{{ route('pontos-turisticos.index') }}" class="px-4 py-2 border border-gray-300 rounded-md hover:bg-gray-50">
            Limpar
        </a>
    </div>
</form>

@if($pontos->isEmpty())
    <div class="bg-white rounded-lg shadow p-8 text-center">
        <p class="text-gray-500">Nenhum ponto turístico encontrado.</p>
    </div>
@else
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        @foreach($pontos as $ponto)
            <a href="{{ route('pontos-turisticos.show', $ponto) }}" class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition">
                <div class="h-48 bg-emerald-100 flex items-center justify-center">
                    @if($ponto->imagens->isNotEmpty())
                        <img src="{{ $ponto->imagens->first()->url }}" alt="{{ $ponto->nome }}" class="w-full h-full object-cover">
                    @else
                        <span class="text-6xl">{{ $ponto->tipo?->icone ?? '📍' }}</span>
                    @endif
                </div>
                <div class="p-4">
                    <div class="flex justify-between items-start mb-2">
                        <h3 class="text-lg font-semibold text-gray-800">{{ $ponto->nome }}</h3>
                        <span class="px-2 py-1 rounded text-xs {{ $ponto->status === 'ativo' ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700' }}">
                            {{ ucfirst($ponto->status) }}
                        </span>
                    </div>
                    <div class="flex items-center gap-2 mb-2">
                        @if($ponto->tipo)
                            <span class="text-xs bg-emerald-100 text-emerald-700 px-2 py-1 rounded">
                                {{ $ponto->tipo->icone }} {{ $ponto->tipo->nome }}
                            </span>
                        @endif
                    </div>
                    <p class="text-sm text-gray-600 mb-2">{{ Str::limit($ponto->descricao, 80) }}</p>
                    <div class="flex items-center text-xs text-gray-500">
                        <span class="mr-2">📍 {{ $ponto->endereco }}</span>
                    </div>
                    <div class="mt-2 text-xs text-gray-500">
                        {{ $ponto->cidade }}/{{ $ponto->estado }}
                    </div>
                </div>
            </a>
        @endforeach
    </div>

    <div class="mt-6">
        {{ $pontos->withQueryString()->links() }}
    </div>
@endif
@endsection