@extends('layouts.pmar.theme')
@section("title", env("APP_NAME") . " - " . $conselho->nome)
@section('content')

<style>
    .btn-vermais {
    background-color: var(--primary);
    color: #fff;
    border: none;
    padding: 10px 28px;
    font-size: 1rem;
    font-weight: 500;
    border-radius: 50px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(13, 110, 253, 0.2);
}

.btn-vermais:hover {
    background-color: #0b5ed7;
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(13, 110, 253, 0.3);
}

.btn-vermais:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(13, 110, 253, 0.2);
}

.accordion-header {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
}

.accordion-item {
  border: none;
  margin-bottom: 1rem;
  border-radius: 12px !important;
  border-color: transparent;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  transition: all 0.3s ease;
}

.accordion-button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-right: 0.75rem;
}

.accordion-button::after {
  background-image: none !important;
  border: none !important;
  content: "+";
  width: 34px;
  height: 34px;
  min-width: 34px;
  font-size: 1.1rem;
  font-weight: 700;
  color: #0d6efd;
  background-color: #e9ecef;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s ease, background-color 0.25s ease, color 0.25s ease;
  margin-left: 12px;
  box-shadow: none;
}

.accordion-button:not(.collapsed)::after {
  content: "−";
  transform: rotate(180deg);
  background-color: #0d6efd;
  color: #fff;
}

.accordion-button:focus,
.accordion-button:not(.collapsed) {
  box-shadow: none;
  background-color: transparent;
}

</style>

<div class="container py-5">

    <nav aria-label="breadcrumb" class="mb-4">
        <ol class="breadcrumb bg-transparent p-0">
            <li class="breadcrumb-item">
                <a href="{{ route('paginas.home') }}">{{ __("Portal") }}</a>
            </li>
            <li class="breadcrumb-item">
                <a href="{{ route("paginas.conselhos-municipais") }}">Conselhos Municipais</a>
            </li>
            <li class="breadcrumb-item active" aria-current="page">{{ $conselho->nome }}</li>
        </ol>
    </nav>

    <div class="text-center my-5">
        <h1 class="fw-bold">{{ $conselho->nome }}</h1>
        <div class="mx-auto mt-3" style="height: 3px; width: 100px; background-color: var(--primary);"></div>
    </div>

    <div class="row g-4">
        <div class="col-12">
            <div class="card border-0 shadow-lg h-100 overflow-hidden rounded-4">
                <div class="position-relative" style="height: 320px;">
                    <img src="{{ asset($conselho->foto ?? 'pmar/assets/img/icons/centro_referencia.png') }}"
                        alt="{{ $conselho->nome }}"
                        class="w-100 h-100 object-fit-cover">

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

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

                    <div class="position-absolute bottom-0 start-0 p-4 text-white">
                        <h2 class="h4 fw-bold mb-1">{{ $conselho->nome }}</h2>
                        <p class="mb-0 small">
                            {{ $conselho->endereco->bairro }}
                            {{ $conselho->endereco->complemento ? ', ' . $conselho->endereco->complemento : '' }}
                            - Angra dos Reis/RJ
                        </p>
                    </div>
                </div>

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

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

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

    <div class="top50"></div>

    <div class="row">
        <div class="accordion accordion-flush" id="accordionInformacoes" data-aos="fade-up" data-aos-delay="200" data-aos-duration="1000">
            <div class="accordion-item">
                <h2 class="accordion-header" id="headingInformacoes">
                    <button class="accordion-button collapsed fs-8 fw-bold px-3" 
                        type="button" 
                        data-bs-toggle="collapse" 
                        data-bs-target="#collapseInformacoes"
                        aria-expanded="false" 
                        aria-controls="collapseInformacoes">
                        Mais Informações
                    </button>
                </h2>
                <div id="collapseInformacoes" 
                    class="accordion-collapse collapse" 
                    aria-labelledby="headingInformacoes" 
                    data-bs-parent="#accordionInformacoes">
                    <div class="accordion-body">
                        @if($conselho->informacoes)
                            <p class="text-muted">{!! $conselho->informacoes !!}</p>
                        @else
                            <p class="text-muted text-center">Nenhuma informação disponível.</p>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div class="top100"></div>

    @php
    // Filtra apenas os tipos que possuem arquivos
    $tiposComArquivos = array_filter($tipos, fn($arquivos) => count($arquivos) > 0);
@endphp

<div class="mt-5">
    <h3 class="text-center fw-bold text-primary mb-4">Arquivos</h3>
    
    @if(count($tiposComArquivos) === 0)
        <div class="text-center text-muted">Nenhum arquivo disponível no momento.</div>
    @else
        <section class="faq-section">
            <div class="container">
                <div class="accordion accordion-flush" id="accordionArquivos" data-aos="fade-up" data-aos-delay="200" data-aos-duration="1000">

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

                        <div class="accordion-item {{ $isHidden }}">
                            <h2 class="accordion-header" id="heading-{{ $id }}">
                                <button class="accordion-button collapsed fs-8 fw-bold px-3" 
                                        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 text-dark p-4">
                                    <ul class="list_down">
                                        @foreach($arquivos as $arquivo)
                                            <li>
                                                <a href="{{ asset($arquivo->link) }}" target="_blank">
                                                    <strong>
                                                        {{ date('d/m/Y', strtotime($arquivo->evento_at)) }} - {{ $arquivo->nome }}
                                                    </strong>
                                                </a>
                                            </li>
                                        @endforeach
                                    </ul>
                                </div>
                            </div>
                        </div>
                    @endforeach

                </div>
            </div>
        </section>

        @if(count($tiposComArquivos) > 6)
            <div class="text-center mt-4">
                <button class="btn-vermais" onclick="toggleVerMais(this)">
                    Ver Mais
                </button>
            </div>
        @endif
    @endif
</div>

    <div class="top100"></div>

    <!-- <div class="mt-5">
        <h3 class="text-center fw-bold text-primary mb-4">Localização</h3>
        <div class="rounded-4 overflow-hidden shadow-sm" style="height: 350px;">
            @if($conselho->endereco->latitude && $conselho->endereco->longitude)

                <iframe width="100%" height="100%" frameborder="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 text-secondary">
                    <i class="fas fa-map-marker-alt fa-2x me-2"></i>
                    <span>Localização não disponível</span>
                </div>
            @endif
        </div>
    </div> -->

</div>

<script>
    function toggleVerMais(btn) {
        const items = document.querySelectorAll('.extra-item');
        const isHidden = items[0]?.classList.contains('d-none');
        items.forEach(item => item.classList.toggle('d-none'));
        btn.innerText = isHidden ? 'Ver Menos' : 'Ver Mais';
    }
</script>

@endsection