@extends('layouts.master')

@section('title', $vereador->name) 


@push('styles')
<style>


/* CSS PARA ATIVIDADE PARLAMENTAR */
.atividade-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
.atividade-botao { display: flex; align-items: center; justify-content: center; padding: 20px; border: 2px solid #e0e0e0; border-radius: 8px; text-decoration: none; font-family: 'Montserrat', sans-serif; font-weight: bold; color: #555; background-color: #f9f9f9; transition: all 0.3s ease; }
.atividade-botao:hover { border-color: var(--cor-primaria); background-color: var(--cor-branco); color: var(--cor-primaria); transform: translateY(-3px); box-shadow: 0 4px 15px rgba(0, 90, 156, 0.1); }
.atividade-botao i { margin-right: 10px; font-size: 1.2rem; }
</style>
@endpush


@section('content')

<div class="container pt-4">

    @if($parentPage === 'home')
        {{ Breadcrumbs::render('perfil-vereador-home', $vereador) }}
    @elseif($parentPage === 'mesa-diretora')
        {{ Breadcrumbs::render('perfil-vereador-mesa', $vereador) }}
    @else
        {{ Breadcrumbs::render('perfil-vereador-parlamentares', $vereador) }}
    @endif
    
</div>


    <div class="container-perfil">
        <header class="cabecalho-perfil">
            <img src="{{ asset('assets/peoples/' . $vereador->image) }}" alt="Foto do Vereador {{ $vereador->name }}">
            <div class="info-principal">
                <h1>{{ $vereador->name }}</h1>
            </div>
        </header>

        <nav class="navegacao-abas">
            <button class="aba-botao active" data-aba="sobre">Sobre</button>
            <button class="aba-botao" data-aba="atividade">Atividade Parlamentar</button>
            <button class="aba-botao" data-aba="noticias">Notícias</button>
        </nav>

        <main class="conteudo-perfil">
            {{-- ABA "SOBRE" --}}
            <div id="sobre" class="conteudo-aba active">
                <h3>Biografia</h3>
                <p>{!! $vereador->curriculum !!}</p>
                <h3>Dados Gerais</h3>
                <ul class="dados-gerais">
                    <li><strong>Nome Completo:</strong> <span>{{ $vereador->name }}</span></li>
                    <li><strong>Partido:</strong> <span>{{ $vereador->partido }}</span></li>
                    <li><strong>Cargo:</strong> <span>{{ $vereador->cargo }}</span></li>
                </ul>
            </div>

            {{-- ABA "ATIVIDADE PARLAMENTAR"  --}}
            <div id="atividade" class="conteudo-aba">
    <h3>Atividade Parlamentar</h3>

    <ul class="atividade-lista">
        @if($vereador->indication)
            <li>
                <a href="{{ $vereador->indication }}" target="_blank" class="atividade-item">
                    <span class="atividade-icone azul"><i class="fa-solid fa-pencil-alt"></i></span>
                    <span class="atividade-titulo">Indicações Legislativas</span>
                    <span class="atividade-descricao">Acessar todas as indicações</span>
                </a>
            </li>
        @endif

        @if($vereador->motion)
            <li>
                <a href="{{ $vereador->motion }}" target="_blank" class="atividade-item">
                    <span class="atividade-icone verde"><i class="fa-solid fa-check-circle"></i></span>
                    <span class="atividade-titulo">Moções Aprovadas</span>
                    <span class="atividade-descricao">Consultar moções</span>
                </a>
            </li>
        @endif

        @if($vereador->requeriment)
            <li>
                <a href="{{ $vereador->requeriment }}" target="_blank" class="atividade-item">
                    <span class="atividade-icone roxo"><i class="fa-solid fa-list-alt"></i></span>
                    <span class="atividade-titulo">Requerimentos</span>
                    <span class="atividade-descricao">Visualizar requerimentos</span>
                </a>
            </li>
        @endif

        @if($vereador->projects)
            <li>
                <a href="{{ $vereador->projects }}" target="_blank" class="atividade-item">
                    <span class="atividade-icone amarelo"><i class="fa-solid fa-folder-open"></i></span>
                    <span class="atividade-titulo">Projetos de Lei</span>
                    <span class="atividade-descricao">Ver projetos em tramitação</span>
                </a>
            </li>
        @endif

        @if(!$vereador->projects && !$vereador->requeriment && !$vereador->indication && !$vereador->motion)
            <p>Nenhuma atividade parlamentar cadastrada no momento.</p>
        @endif
    </ul>
</div>
         {{-- ABA "NOTÍCIAS" (DESIGN DE CARDS ATUALIZADO) --}}
            <div id="noticias" class="conteudo-aba">
                <h3>Últimas Notícias Relacionadas</h3>
                
                <div class="noticias-grid">
                    @forelse ($vereador->notices as $noticia)
                        {{-- O card inteiro é um link para a notícia --}}
                        <a href="{{ route('materia.show', $noticia->id) }}" class="noticia-card">
                            
                            {{-- Container da Imagem --}}
                            @if($noticia->image)
                                <div class="noticia-card-imagem-container">
                                    <img src="{{ asset('assets/notices/images/' . $noticia->image) }}" alt="{{ $noticia->title }}" class="noticia-card-imagem">
                                </div>
                            @endif

                            {{-- Container do Conteúdo --}}
                            <div class="noticia-card-conteudo">
                                <span class="noticia-card-data">{{ \Carbon\Carbon::parse($noticia->dateshow)->format('d/m/Y') }}</span>
                                <h4 class="noticia-card-titulo">{{ $noticia->title }}</h4>
                                <span class="noticia-card-ver-mais">Leia mais →</span>
                            </div>
                        </a>
                    @empty
                        <p>Nenhuma notícia encontrada para este parlamentar no momento.</p>
                    @endforelse
                </div>
            </div>
        </main>
    </div>

<script>
    // SEU SCRIPT DAS ABAS (NÃO PRECISA MUDAR)
    const botoesAba = document.querySelectorAll('.aba-botao');
    const conteudosAba = document.querySelectorAll('.conteudo-aba');
    botoesAba.forEach(botao => {
        botao.addEventListener('click', () => {
            botoesAba.forEach(b => b.classList.remove('active'));
            conteudosAba.forEach(c => c.classList.remove('active'));
            botao.classList.add('active');
            const alvoAba = document.querySelector(`#${botao.dataset.aba}`);
            if (alvoAba) {
                alvoAba.classList.add('active');
            }
        });
    });
</script>

@endsection