@extends('layouts.app')

@section('title', $ponto->nome . ' - ApiEco')

@section('content')
<div class="bg-white rounded-lg shadow-lg overflow-hidden">
    <div class="h-96 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-9xl">{{ $ponto->tipo?->icone ?? '📍' }}</span>
        @endif
    </div>

    <div class="p-8">
        <div class="flex justify-between items-start mb-4">
            <div>
                <h1 class="text-3xl font-bold text-gray-800">{{ $ponto->nome }}</h1>
                <p class="text-gray-600 mt-1">{{ $ponto->endereco }}, {{ $ponto->cidade }}/{{ $ponto->estado }}</p>
                @if($ponto->tipo)
                    <span class="inline-block mt-2 bg-emerald-100 text-emerald-700 px-3 py-1 rounded-full text-sm">
                        {{ $ponto->tipo->icone }} {{ $ponto->tipo->nome }}
                    </span>
                @endif
            </div>
            <span class="px-4 py-2 rounded-lg text-lg {{ $ponto->status === 'ativo' ? 'bg-green-100 text-green-700' : ($ponto->status === 'inativo' ? 'bg-red-100 text-red-700' : 'bg-yellow-100 text-yellow-700') }}">
                {{ str_replace('_', ' ', ucfirst($ponto->status)) }}
            </span>
        </div>

        <div class="prose max-w-none mb-8">
            <h2 class="text-xl font-semibold text-gray-800 mb-2">Descrição</h2>
            <p class="text-gray-600">{{ $ponto->descricao }}</p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
            <div class="bg-gray-50 rounded-lg p-4">
                <h3 class="font-semibold text-gray-800 mb-2">📍 Localização</h3>
                <p class="text-gray-600">
                    Latitude: {{ $ponto->latitude }}<br>
                    Longitude: {{ $ponto->longitude }}
                </p>
            </div>
            <div class="bg-gray-50 rounded-lg p-4">
                <h3 class="font-semibold text-gray-800 mb-2">🕐 Horário de Funcionamento</h3>
                @if($ponto->horario_funcionamento)
                    @foreach($ponto->horario_funcionamento as $dia => $horario)
                        <p class="text-gray-600">{{ strtoupper($dia) }}: {{ $horario }}</p>
                    @endforeach
                @else
                    <p class="text-gray-600">Não informado</p>
                @endif
            </div>
        </div>

        @if($ponto->avaliacoes->isNotEmpty())
            <div class="mb-8">
                <h3 class="text-xl font-semibold text-gray-800 mb-4">⭐ Avaliações</h3>
                <div class="flex items-center mb-4">
                    <span class="text-3xl font-bold text-emerald-600">{{ number_format($mediaAvaliacao, 1) }}</span>
                    <span class="ml-2 text-gray-600">/ 5 ({{ $totalAvaliacoes }} avaliações)</span>
                </div>
                <div class="space-y-3">
                    @foreach($ponto->avaliacoes->take(5) as $avaliacao)
                        <div class="border border-gray-200 rounded-lg p-3">
                            <div class="flex justify-between items-center mb-1">
                                <span class="font-semibold">{{ $avaliacao->user->name }}</span>
                                <span class="text-yellow-500">{{ str_repeat('★', $avaliacao->nota) }}{{ str_repeat('☆', 5 - $avaliacao->nota) }}</span>
                            </div>
                            <p class="text-gray-600 text-sm">{{ $avaliacao->comentario }}</p>
                        </div>
                    @endforeach
                </div>
            </div>
        @endif

        <div class="flex gap-4">
            @auth
                <a href="{{ route('admin.pontos-turisticos.edit', $ponto) }}" class="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700">
                    Editar
                </a>
            @endauth
            <a href="{{ route('pontos-turisticos.index') }}" class="bg-gray-200 text-gray-700 px-4 py-2 rounded-md hover:bg-gray-300">
                Voltar
            </a>
        </div>
    </div>
</div>
@endsection