@extends('theme')
@section("title", env('APP_NAME') . " - Ponto Turístico - " . $ponto->ponto)
@section('content')

    <style>
        #map {
            width: 100%;
            max-width: 100%;
            height: 400px;
            border-radius: 8px;
            overflow: hidden;
        }

        .mapa-local .row {
            margin: 0;
        }
    </style>

    @include('components._header', ["img" => env("APP_ASSET") . "/" . $ponto->foto, "title" => __($ponto->ponto)])

    <main>
        <div class="container section-content-pages">

            <div class="chrumb-share">
                <div class="breadcrumb">
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="{{ route("home") }}"><i class="fas fa-home"></i>
                                    {{ __("Início") }}</a></li>
                            <li class="breadcrumb-item"><a
                                    href="{{ route('pages.pontos-turisticos') }}">{{ __("Pontos Turísticos") }}</a></li>
                            <li class="breadcrumb-item active" aria-current="page"><strong
                                    style="font-weight: normal">{{ __($ponto->ponto) }}</strong></li>
                        </ol>
                    </nav>
                </div>

                <div class="share">
                    <span>Compartilhar: </span>
                    <a data-bs-toggle="modal" data-bs-target="#exampleModal" class="share-link">
                        <img src="{{ asset('assets/imgs/share.png') }}" class="share-icon">
                    </a>
                </div>
            </div>

            <div class="row">
                <div class="col">
                    <h2 data-aos="fade-up" data-aos-duration="1000" data-aos-offset="0">
                        {{ __($ponto->subtitulo) }}
                    </h2>
                    <p data-aos="fade-up" data-aos-duration="1000" data-aos-offset="0">
                        {!! __($ponto->descricao) !!}
                    </p>
                </div>
            </div>
        </div>

        @if(isset($ponto->arquivos) && $ponto->arquivos->count() > 0)
            <section class="container galeria-fotos">
                <div class="row">
                    <div class="col">
                        <h3 class="text-center" data-aos="fade-up" data-aos-duration="1000" data-aos-offset="0">
                            {{ __("Galeria de Fotos") }}
                        </h3>
                        <div id="lightgallery">
                            <div class="flex-container d-flex flex-wrap justify-content-center gap-3">
                                @php $url = env("APP_ASSET") . "/"; @endphp
                                @foreach($ponto->arquivos as $arquivo)
                                    <figure data-aos="fade-up" data-aos-duration="1000" data-aos-offset="0"
                                        style="width: 220px; height: 150px; overflow: hidden; border-radius: 8px; cursor: pointer;">
                                        <img src="{{ url($url . $arquivo->link) }}" alt="{{ $ponto->ponto }}"
                                            class="img-fluid gallery-img" data-bs-toggle="modal" data-bs-target="#imageModal"
                                            data-img="{{ url($url . $arquivo->link) }}">
                                    </figure>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        @endif

        @if(!empty($ponto->latitude) && !empty($ponto->longitude))
            <section class="container mapa-local">
                <div class="row">
                    <div class="col-12">
                        <h3 class="text-center" data-aos="fade-up" data-aos-duration="1000" data-aos-offset="0">
                            {{ __("Localização") }}</h3>

                        <div id="map" data-info="{{ $ponto->ponto }}" data-lat="{{ $ponto->latitude }}"
                            data-long="{{ $ponto->longitude }}" style="height: 400px; border-radius: 8px;" data-aos="fade-up"
                            data-aos-duration="1000" data-aos-offset="0">
                        </div>
                        @php
                            $maps = "https://www.google.com/maps?q=" . $ponto->latitude . "," . $ponto->longitude;
                            $waze = "https://www.waze.com/ul?ll=" . $ponto->latitude . "," . $ponto->longitude . "&navigate=yes&zoom=17";
                        @endphp
                        <div class="text-center map-app" data-aos="fade-up" data-aos-duration="1000" data-aos-offset="0">
                            <p>{{ __("Navegar até o ponto turístico") }}</p>
                            <a href="{{ $maps }}" target="_blank">
                                <img src="{{ asset('assets/imgs/gmaps-logo.png') }}" alt="Google Maps">
                            </a>
                            <a href="{{ $waze }}" target="_blank">
                                <img src="{{ asset('assets/imgs/waze-logo.png') }}" alt="Waze">
                            </a>
                        </div>
                    </div>
                </div>
            </section>
        @endif

        </main>

        <!-- Modal de Imagem Ampliada -->
        <div class="modal fade" id="imageModal" tabindex="-1" aria-labelledby="imageModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-lg">
                <div class="modal-content bg-transparent border-0">
                    <div class="modal-body p-0 position-relative">
                        <button type="button" class="btn-close position-absolute top-0 end-0 m-3 bg-light rounded-circle" data-bs-dismiss="modal" aria-label="Close"></button>
                        <img src="" id="modalImage" class="w-100 rounded-3" alt="Imagem Ampliada">
                    </div>
                </div>
            </div>
        </div>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const modalImage = document.getElementById('modalImage');
        const galleryImages = document.querySelectorAll('.gallery-img');

        galleryImages.forEach(img => {
            img.addEventListener('click', function() {
                const imgSrc = this.getAttribute('data-img');
                modalImage.src = imgSrc;
            });
        });
    });
</script>

@endsection