@extends('layouts.pmar.theme')
@section("title", env("APP_NAME") . " - Parques e Jardins da Cidade de Angra dos Reis")
@section('content')

<div class="container">
    <div class="row">
        <div class="col-12 my-2">
            @include('servicos.parts.breadcrumb', [
                'trail' => [\App\Support\PortalBreadcrumb::link(__('Parques e Jardins'), route('servicos.parquesJardins.supj'))],
                'current' => $parque->nome,
            ])
        </div>
    </div>

</div>

<div class="container-full bg-waves bg-softGray">
    <div class="row d-flex justify-content-center py-2">
        <div class="col-10 col-sm-10 col-md-10 col-lg-7 col-xl-7 col-xxl-7 py-5">
            <div class="card shadow-sm border-0 mx-auto">
                <!-- Foto com overlay -->
                <div class="position-relative overflow-hidden ratio ratio-16x9" style="height: 300px;">
                    <img class="object-fit-cover w-100 h-100" src="{{ asset($parque->foto) }}" alt="{{ $parque->nome }}">
                    <div class="position-absolute top-0 start-0 w-100 h-100 bg-dark bg-opacity-25"></div>
                </div>

                <div class="card-body">
                    <!-- Nome do parque -->
                    <h1 class="card-title mb-3 fw-bold fs-1">{{ $parque->nome }}</h1>

                    <!-- Bairro e complemento -->
                    <p class="mb-1 mx-1 text-muted">
                        <i class="fa-solid fa-map text-soft mx-2"></i>
                        {{ $parque->endereco->bairro }}
                        {{ $parque->endereco->complemento ? ', ' . $parque->endereco->complemento : '' }} - Angra dos Reis/RJ
                    </p>

                    <!-- Categoria -->
                    <div class="my-3">
                        <span class="badge bg-primary text-white fs-6">
                            <i class="fas fa-tag me-1"></i> {{ $parque->categorias }}
                        </span>
                    </div>

                    <!-- Endereço completo -->
                    <div class="col-md-6 my-3">
                        <i class="fas fa-map-marker-alt fs-5 text-danger me-2"></i>
                        <strong>Endereço:</strong>
                        {{ $parque->endereco->logradouro }},
                        {{ $parque->endereco->numero }} -
                        CEP: {{ $parque->endereco->cep ?? 'Não informado' }}
                    </div>

                    @if($parque->endereco->domicilio)
                    <div class="col-md-6 my-3">
                        <p class="mb-1">
                            <i class="fas fa-home fs-5 text-info me-2"></i>
                            <strong>Tipo:</strong> {{ $parque->endereco->domicilio }}
                        </p>
                    </div>
                    @endif

                    <div class="col-md-6 my-3">
                        <p class="mb-1">
                            <i class="fas fa-city fs-5 text-secondary me-2"></i>
                            <strong>Cidade/UF:</strong> {{ $parque->endereco->cidade }}/{{ $parque->endereco->uf }}
                        </p>
                    </div>

                    @if($parque->endereco->latitude && $parque->endereco->longitude)
                    <div class="col-md-6 my-3">
                        <p class="mb-1">
                            <i class="fas fa-map-pin fs-5 text-warning me-2"></i>
                            <strong>Coordenadas:</strong>
                            {{ number_format($parque->endereco->latitude, 6) }}, {{ number_format($parque->endereco->longitude, 6) }}
                        </p>
                    </div>
                    @endif

                    <div class="col-md-6 my-3">
                        <p class="card-dark mb-2">
                            <i class="fas fa-envelope fs-5 text-primary me-2"></i>
                            <strong>E-mail:</strong>
                            @if($parque->email)
                            <a href="mailto:{{ $parque->email }}" class="text-decoration-none text-dark">
                                {{ $parque->email }}
                            </a>
                            @else
                            <span class="badge text-dark">Não informado</span>
                            @endif
                        </p>
                    </div>

                    <div class="col-md-6 my-3">
                        <p class="card-dark mb-2">
                            <i class="fas fa-phone-alt fs-5 text-success me-2"></i>
                            <strong>Telefone:</strong>
                            @if($parque->telefone)
                            <a href="tel:+55{{ $parque->telefone }}" class="text-decoration-none text-dark">
                                {{ preg_replace('/(\d{2})(\d{4,5})(\d{4})/', '($1) $2-$3', $parque->telefone) }}
                            </a>
                            @else
                            <span class="badge text-dark">Não informado</span>
                            @endif
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<div class="container my-5">
    <div class="row">
        <div class="col-12 py-5">
            <h2 class="text-soft fw-bold text-center mb-4">Estrutura do Parque</h2>

            <div class="row g-3">
                @foreach(App\Enums\StatusAtributosParquesJardins::cases() as $status)
                @if(in_array($status->name, $atributos))
                <div class="col-4 col-md-4 col-lg-3">
                    <div class="card h-100 text-center p-3">
                        @switch($status->name)
                        @case('CAMPO')
                        <i class="fas fa-futbol fa-3x text-secondary mb-2"></i>
                        @break
                        @case('CAMPO_DE_AREIA')
                        <i class="fas fa-volleyball-ball fa-3x text-secondary mb-2"></i>
                        @break
                        @case('CAMPO_DE_GRAMA_SINTETICA')
                        <i class="fas fa-leaf fa-3x text-secondary mb-2"></i>
                        @break
                        @case('QUADRA')
                        <i class="fas fa-basketball-ball fa-3x text-secondary mb-2"></i>
                        @break
                        @case('QUADRA_POLIESPORTIVA')
                        <i class="fas fa-table-tennis fa-3x text-secondary mb-2"></i>
                        @break
                        @case('QUADRA_DE_AREIA')
                        <i class="fas fa-football fa-3x text-secondary mb-2"></i>
                        @break
                        @case('PISTA_DE_SKATE')
                        <i class="fas fa-skating fa-3x text-secondary mb-2"></i>
                        @break
                        @case('ACADEMIA_AO_AR_LIVRE')
                        <i class="fas fa-dumbbell fa-3x text-secondary mb-2"></i>
                        @break
                        @case('PARQUE_INFANTIL')
                        <i class="fas fa-child-reaching fa-3x text-secondary mb-2"></i>
                        @break
                        @case('PARQUE_PARA_PET')
                        <i class="fas fa-paw fa-3x text-secondary mb-2"></i>
                        @break
                        @case('JARDINS')
                        <i class="fas fa-spa fa-3x text-secondary mb-2"></i>
                        @break
                        @case('VESTIARIO')
                        <i class="fas fa-tshirt fa-3x text-secondary mb-2"></i>
                        @break
                        @default
                        <i class="fas fa-check-circle fa-3x text-secondary mb-2"></i>
                        @endswitch
                        <h5 class="card-title">{{ $status->value }}</h5>
                    </div>
                </div>
                @endif
                @endforeach
            </div>
        </div>
    </div>
</div>

<div class="container-full bg-waves bg-positive my-5">
    <div class="row d-flex justify-content-center">
        <div class="col-12 col-sm-12 col-md-12 col-lg-8 col-xl-8 col-xxl-8 mb-5">
            <h1 class="text-center text-royal my-5 fw-bold">Galeria do Parque</h1>

            @if(count($arquivos) > 0)
            <div id="galleryCarousel" class="carousel slide" data-bs-ride="carousel">
                <div class="carousel-inner">
                    @foreach($arquivos as $index => $arquivo)
                    <div class="carousel-item {{ $index === 0 ? 'active' : '' }}">
                        <img style="cursor: pointer;" src="{{ asset($arquivo->link) }}"
                            class="d-block w-75 rounded-5 mx-auto"
                            data-bs-toggle="modal"
                            data-bs-target="#imageModal"
                            onclick="document.getElementById('modalImage').src = this.src">
                    </div>
                    @endforeach
                </div>
                <button class="carousel-control-prev" type="button" data-bs-target="#galleryCarousel" data-bs-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">Anterior</span>
                </button>
                <button class="carousel-control-next" type="button" data-bs-target="#galleryCarousel" data-bs-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">Próximo</span>
                </button>
            </div>
            @else
            <p class="text-center text-muted">* Nenhuma imagem nesta galeria</p>
            @endif
        </div>
    </div>
</div>


<div class="container py-5">
    <div class="row">
        <div class="col-12 my-5">
            <h2 class="text-soft fw-bold text-center mb-3">Mais informações</h2>

            @if($parque->informacoes)
            <p>{!! $parque->informacoes !!}</p>
            @else
            <p class="text-muted">Nenhuma informação disponível.</p>
            @endif
        </div>
    </div>
</div>

<div class="container-full mt-5">
    <div class="w-100">
        <h2 class="text-soft fw-bold text-center mb-3">Localização</h2>
        <div class="border-top border-secondary mx-auto" style="height: 300px; max-width: 1920px;">
            @if($parque->endereco->latitude && $parque->endereco->longitude)
            <iframe width="100%" height="100%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"
                src="https://maps.google.com/maps?q={{ $parque->endereco->latitude }},{{ $parque->endereco->longitude }}&z=17&output=embed"
                style="border: none;" allowfullscreen>
            </iframe>
            @else
            <div class="h-100 d-flex justify-content-center align-items-center bg-light bg-opacity-10 text-white">
                <i class="fas fa-map-marker-alt fa-3x me-3"></i>
                <h4 class="mb-0">Localização não disponível</h4>
            </div>
            @endif
        </div>
    </div>
</div>

<div class="modal fade" id="imageModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-fullscreen">
        <div class="modal-content bg-waves bg-positive bg-opacity-0 p-0 border-0 position-relative">

            <button type="button"
                class="btn-close p-4 text-royal fs-1 position-absolute top-0 end-0 m-3 z-3 bg-white bg-opacity-50 rounded-circle p-2"
                data-bs-dismiss="modal"
                aria-label="Fechar"></button>

            <div class="modal-body d-flex align-items-center justify-content-center p-1 p-md-4">
                <img id="modalImage"
                    src=""
                    class="img-fluid rounded-3 shadow-lg"
                    style="max-height: 85vh; object-fit: contain;"
                    alt="Imagem ampliada">
            </div>
        </div>
    </div>
</div>

<script>
    function toggleVerMais(btn) {
        const items = document.querySelectorAll('.extra-item');
        const isHidden = items.length && items[0].classList.contains('d-none');

        items.forEach(item => {
            if (isHidden) {
                item.classList.remove('d-none');
            } else {
                item.classList.add('d-none');
            }
        });

        btn.innerText = isHidden ? 'Ver Menos' : 'Ver Mais';
    }
</script>

@endsection