@extends('layouts.dashboard')
@section('pg-body')

<!-- Sub Header -->
<section class="wf100 subheader" style="padding: 25px 0;">
    <div class="container">
        <ul>
            <li><a href="{{ url('home') }}">Home</a></li>
            <li><a href="{{ url('conselhos-municipais') }}">Conselhos Municipais</a></li>
            <li>{{ $conselho->nome }}</li>
        </ul>
    </div>
</section>

<!-- Main Content -->
<div class="main-content p20">
    <div class="container">
        <!-- Título do Conselho -->
        <div class="row">
            <div class="col-md-12">
                <h1 class="conselho-titulo">{{ $conselho->nome }}</h1>
            </div>
        </div>

        <div class="row">
            <!-- Conteúdo Principal - Full Width -->
            <div class="col-md-12">

                <!-- Descrição do Conselho -->
                @if($conselho->descricao)
                <div class="conselho-descricao mb-10" style="color: #333; font-size: 16px;">
                    {!! $conselho->descricao !!}
                </div>
                @endif

                <!-- Membros do Conselho -->
                <div class="membros-section mb-4">
                    <h3 class="section-title">
                        <i class="fa fa-users"></i> Composição do Conselho
                    </h3>

                    @if(isset($membros) && count($membros) > 0)
                        <div class="row">
                            @foreach($membros as $membro)
                            <div class="col-md-4 col-sm-6 mb-3">
                                <div class="membro-card">
                                    <div class="membro-foto">
                                        @if($membro->foto)
                                            <img src="{{ asset('upload/conselhos_municipais_membros/'.$membro->foto) }}" alt="{{ $membro->nome }}">
                                        @else
                                            <div class="sem-foto">
                                                <i class="fa fa-user"></i>
                                            </div>
                                        @endif
                                    </div>
                                    <div class="membro-info">
                                        <h4>{{ $membro->nome }}</h4>
                                        <span class="cargo-badge">{{ $membro->cargo }}</span>
                                        @if($membro->seguimento)
                                            <p class="membro-contato">
                                                <i class="fa fa-bookmark"></i> {{ $membro->seguimento }}
                                            </p>
                                        @endif
                                        @if($membro->email)
                                            <p class="membro-contato">
                                                <i class="fa fa-envelope"></i> {{ $membro->email }}
                                            </p>
                                        @endif
                                        @if($membro->telefone)
                                            <p class="membro-contato">
                                                <i class="fa fa-phone"></i> {{ $membro->telefone }}
                                            </p>
                                        @endif
                                    </div>
                                </div>
                            </div>
                            @endforeach
                        </div>
                    @else
                        <div class="alert alert-info">
                            <i class="fa fa-info-circle"></i> Em processo de composição.
                        </div>
                    @endif
                </div>

                <!-- Arquivos do Conselho -->
                @if(isset($arquivos) && count($arquivos) > 0)
                <div class="arquivos-section">
                    <h3 class="section-title">
                        <i class="fa fa-folder-open"></i> Documentos e Arquivos
                    </h3>

                    @php
                        $arquivosPorTipo = $arquivos->groupBy('tipo');
                    @endphp

                    <div class="row">
                        @foreach($arquivosPorTipo as $tipo => $listaArquivos)
                        <div class="col-md-6">
                            <div class="arquivo-grupo">
                                <h4 class="arquivo-tipo">{{ $tipo }}</h4>
                                <ul class="arquivo-lista">
                                    @foreach($listaArquivos as $arquivo)
                                    <li>
                                        <div class="arquivo-item">
                                            <div class="arquivo-icon">
                                                <i class="fa fa-file-pdf-o"></i>
                                            </div>
                                            <div class="arquivo-detalhes">
                                                <strong>{{ $arquivo->nome_arquivo }}</strong>
                                            </div>
                                            <div class="arquivo-acoes">
                                                <a href="{{ asset('upload/conselhos_municipais_arquivos/'.$arquivo->arquivo) }}"
                                                   target="_blank"
                                                   class="btn btn-sm btn-success">
                                                    <i class="fa fa-download"></i> Baixar
                                                </a>
                                            </div>
                                        </div>
                                    </li>
                                    @endforeach
                                </ul>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
                @endif

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

<style>
.conselho-titulo {
    font-size: 28px;
    color: #333;
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: 3px solid #0066cc;
}

.section-title {
    font-size: 22px;
    color: #333;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #0066cc;
    display: flex;
    align-items: center;
    gap: 10px;
}
.section-title i {
    color: #0066cc;
}

/* Cards de Membros */
.membro-card {
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 15px;
    transition: all 0.3s ease;
    height: 100%;
}
.membro-card:hover {
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}
.membro-foto {
    flex-shrink: 0;
    width: 70px;
    height: 70px;
    margin-right: 15px;
}
.membro-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid #0066cc;
}
.sem-foto {
    width: 100%;
    height: 100%;
    background: #f0f0f0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid #ddd;
}
.sem-foto i {
    font-size: 30px;
    color: #999;
}
.membro-info h4 {
    margin: 0 0 5px 0;
    font-size: 16px;
    color: #333;
    font-weight: 600;
}
.cargo-badge {
    display: inline-block;
    background: #0066cc;
    color: #fff;
    padding: 3px 10px;
    border-radius: 15px;
    font-size: 12px;
    font-weight: 500;
    margin-bottom: 8px;
}
.membro-contato {
    margin: 3px 0;
    font-size: 13px;
    color: #666;
}
.membro-contato i {
    color: #0066cc;
    width: 18px;
}

/* Arquivos */
.arquivo-grupo {
    margin-bottom: 25px;
}
.arquivo-tipo {
    font-size: 16px;
    color: #0066cc;
    margin-bottom: 10px;
    padding-left: 10px;
    border-left: 4px solid #0066cc;
}
.arquivo-lista {
    list-style: none;
    padding: 0;
    margin: 0;
}
.arquivo-lista li {
    margin-bottom: 10px;
}
.arquivo-item {
    display: flex;
    align-items: center;
    background: #f8f9fa;
    padding: 12px 15px;
    border-radius: 5px;
    border-left: 3px solid #28a745;
    transition: all 0.2s ease;
}
.arquivo-item:hover {
    background: #e9ecef;
}
.arquivo-icon {
    flex-shrink: 0;
    margin-right: 15px;
}
.arquivo-icon i {
    font-size: 28px;
    color: #dc3545;
}
.arquivo-detalhes {
    flex-grow: 1;
}
.arquivo-detalhes strong {
    color: #333;
    font-size: 14px;
}
.arquivo-acoes {
    flex-shrink: 0;
}
.arquivo-acoes .btn {
    border-radius: 20px;
}

/* Responsivo */
@media (max-width: 768px) {
    .membro-card {
        flex-direction: column;
        text-align: center;
    }
    .membro-foto {
        margin-right: 0;
        margin-bottom: 10px;
    }
}
</style>

@endsection