@extends('layouts.pmar.theme')
@section("title", env("APP_NAME") . " - Conselhos Municipal da Secretaria de Desenvolvimento Social e Promoção da Cidadania")
@section('content')

    <div class="container py-5">
        <div class="row mb-4">
            <div class="col-12 my-3">
                @include('servicos.parts.breadcrumb', [
                    'trail' => [\App\Support\PortalBreadcrumb::link(__('Conselhos Municipal'), route('servicos.conselhos.sdsp'))],
                    'current' => $conselho->nome,
                ])
            </div>
        <h1 class="text-center">{{ $conselho->nome }}</h1>
        <div class="row mt-5">
            <div class="col-6">
                <div class="card shadow-sm border-0 mx-auto" style="max-width: 800px;">
                    <!-- Foto com overlay -->
                    <div class="position-relative overflow-hidden" style="height: 300px;">
                        <img src="{{ asset($conselho->foto) }}" alt="{{ $conselho->nome }}">


                        <div class="top-0 start-0 w-100 h-100 bg-dark bg-opacity-25 position-absolute"></div>

                        @if($conselho->possuiRecursosMultifuncionais)
                            <span class="position-absolute top-0 end-0 m-2 badge bg-info text-white">
                                <i class="fas fa-universal-access me-1"></i> Recursos Especiais
                            </span>
                        @endif

                        <div class="position-absolute bottom-0 start-0 p-3 text-white">
                            <h2 class="card-title mb-0">{{ $conselho->tipoCentroReferencia }} - {{ $conselho->nome }}</h2>
                            <p class="mb-0">{{ $conselho->endereco->bairro }}
                                {{ $conselho->endereco->complemento ? ', ' . $conselho->endereco->complemento : '' }} -
                                Angra dos
                                Reis/RJ
                            </p>
                        </div>
                    </div>

                    <div class="card-body">
                        <p class="card-dark mb-2">
                            <i class="fas fa-map-marker-alt text-danger me-2"></i>
                            <strong>Endereço:</strong> {{ $conselho->endereco->logradouro }},
                            {{ $conselho->endereco->numero }} -
                            CEP: {{ $conselho->endereco->cep ?? 'Não informado' }}
                        </p>

                        <p class="card-dark mb-2">
                            <i class="fas fa-envelope text-primary me-2"></i>
                            <strong>E-mail:</strong>
                            @if($conselho->email)
                                <a href="mailto:{{ $conselho->email }}"
                                    class="text-decoration-none text-dark">{{ $conselho->email }}</a>
                            @else
                                <span class="badge bg-secondary bg-opacity-10 text-secondary">Não informado</span>
                            @endif
                        </p>

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

                    </div>
                </div>
            </div>
            <div class="col-6">
                <h3 class="text-center mb-3">Informações</h3>

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

            <div class="col-12">
                <h3 class="text-center mt-5">Arquivos</h3>
                <div class="accordion mt-3" id="accordionInformacoes">
                    @php 
                        $tiposArray = array_keys($tipos);
                    @endphp

                    @foreach($tiposArray as $index => $tipoNome)
                        @php 
                            $id = Str::slug($tipoNome);
                            $arquivos = $tipos[$tipoNome];
                            $isHidden = $index >= 6 ? 'd-none extra-item' : '';
                        @endphp

                        <div class="accordion-item {{ $isHidden }}">
                            <h2 class="accordion-header" id="heading-{{ $id }}">
                                <button class="accordion-button collapsed" type="button"
                                        data-bs-toggle="collapse"
                                        data-bs-target="#collapse-{{ $id }}"
                                        aria-expanded="false"
                                        aria-controls="collapse-{{ $id }}">
                                    {{ $tipoNome }}
                                </button>
                            </h2>

                            <div id="collapse-{{ $id }}" class="accordion-collapse collapse"
                                aria-labelledby="heading-{{ $id }}"
                                data-bs-parent="#accordionInformacoes">
                                <div class="accordion-body">
                                    @if(count($arquivos) > 0)
                                        @foreach($arquivos as $arquivo)
                                            <div class="arquivo-item">
                                                <a href="{{ asset($arquivo->link) }}" target="_blank">
                                                    {{ date("d/m/Y", strtotime($arquivo->evento_at)) }} - {{ $arquivo->nome }}
                                                </a>
                                            </div>
                                        @endforeach
                                    @else
                                        <div class="text-muted">Nenhum registro encontrado.</div>
                                    @endif
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>

                @if(count($tipos) > 6)
                    <div class="d-flex justify-content-center align-itens-center text-center mt-3">
                        <button class="btn btn-sm btn-outline-primary" onclick="toggleVerMais(this)">
                            Ver Mais
                        </button>
                    </div>
                @endif
            </div>

            <!-- Mapa -->
            <!-- <h3 class="text-center mt-5">Localização</h3>
            <div class="border-top border-secondary mt-2" style="height: 300px;">
                @if($conselho->endereco->latitude && $conselho->endereco->longitude)
                    <iframe width="100%" height="100%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"
                        src="https://maps.google.com/maps?q={{ $conselho->endereco->latitude }},{{ $conselho->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="w-100">
        <h3 class="text-center text-dark mb-3">Localização</h3>
        <div class="border-top border-secondary mx-auto" style="height: 300px; max-width: 1920px;">
            @if($conselho->endereco->latitude && $conselho->endereco->longitude)
                <iframe width="100%" height="100%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"
                    src="https://maps.google.com/maps?q={{ $conselho->endereco->latitude }},{{ $conselho->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>

    <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