@extends('theme')
@section('title', __('Portal da Transparência - Angra dos Reis :: Conselhos Municipais'))
@section('content')
<section class="conselhos-page">
    <div class="container py-5">

        @php
            $breadcrumbs = [
                [
                    'route' => route('index'),
                    'title' => __('Página Inicial'),
                ],
                [
                    'currentPage' => 'page',
                    'title' => __('Portal da Transparência'),
                ],
            ];

            $conselhos = [
                [
                    'nome' => __('Conselho Municipal do Idoso - CMI'),
                    'sigla' => 'CMI',
                    'url' => 'https://angra.rj.gov.br/servicos/conselho-municipal-do-idoso-cmi',
                    'icon' => 'fa-person-cane',
                ],
                [
                    'nome' => __('Conselho Municipal de Entorpecentes - COMEN'),
                    'sigla' => 'COMEN',
                    'url' => 'https://angra.rj.gov.br/servicos/conselho-municipal-de-entorpecentes-comen',
                    'icon' => 'fa-shield-heart',
                ],
                [
                    'nome' => __('Conselho Municipal do Direito da Criança e do Adolescente - CMDCA'),
                    'sigla' => 'CMDCA',
                    'url' => 'https://angra.rj.gov.br/servicos/conselho-municipal-dos-direitos-das-criancas-e-dos-adolescentes',
                    'icon' => 'fa-child-reaching',
                ],
                [
                    'nome' => __('Conselho Municipal dos Direitos das Pessoas com Deficiência - CMDPD'),
                    'sigla' => 'CMDPD',
                    'url' => 'https://angra.rj.gov.br/servicos/conselho-municipal-dos-direitos-da-pessoa-com-deficiencia-cmdpd',
                    'icon' => 'fa-wheelchair',
                ],
                [
                    'nome' => __('Conselho Municipal de Educação - CME'),
                    'sigla' => 'CME',
                    'url' => 'https://angra.rj.gov.br/servicos/cacs-fundeb',
                    'icon' => 'fa-graduation-cap',
                ],
                [
                    'nome' => __('Conselho Municipal de Saúde - CMS'),
                    'sigla' => 'CMS',
                    'url' => 'https://angra.rj.gov.br/servicos/conselho-municipal-de-saude',
                    'icon' => 'fa-heart-pulse',
                ],
                [
                    'nome' => __('Conselho Municipal de Assistência Social - CMAS'),
                    'sigla' => 'CMAS',
                    'url' => 'https://angra.rj.gov.br/servicos/conselho-municipal-de-assistencia-social-cmas',
                    'icon' => 'fa-hands-holding-child',
                ],
                [
                    'nome' => __('Conselho Municipal de Turismo - Comtur'),
                    'sigla' => 'Comtur',
                    'url' => 'https://angra.rj.gov.br/servicos/conselho-municipal-de-turismo',
                    'icon' => 'fa-umbrella-beach',
                ],
                [
                    'nome' => __('Conselho Municipal para Assuntos da Pesca - CMAP'),
                    'sigla' => 'CMAP',
                    'url' => 'https://angra.rj.gov.br/servicos/cmap-conselho-municipal-para-assuntos-da-pesca',
                    'icon' => 'fa-fish',
                ],
            ];
        @endphp

        @include('components._breadcrumb', $breadcrumbs)

        @include('components._titleMain', [
            'title' => __('Conselhos Municipais de Angra dos Reis'),
            'summary' => __('Consulte os conselhos municipais e acesse as informações publicadas por cada órgão colegiado.'),
        ])

        <div class="conselhos-intro rounded-4 p-4 p-md-5 mb-4">
            <div class="row align-items-center g-3">
                <div class="col-lg-8">
                    <p class="mb-0 text-muted">
                        {{ __('Selecione um conselho na lista abaixo para acessar documentos, atas, resoluções e demais publicações no portal institucional da Prefeitura.') }}
                    </p>
                </div>
                <div class="col-lg-4">
                    <label for="conselhosSearch" class="form-label visually-hidden">{{ __('Buscar conselho') }}</label>
                    <div class="input-group conselhos-search shadow-sm">
                        <span class="input-group-text bg-white border-0" aria-hidden="true">
                            <i class="fas fa-search text-soft"></i>
                        </span>
                        <input
                            type="search"
                            id="conselhosSearch"
                            class="form-control border-0"
                            placeholder="{{ __('Buscar por nome ou sigla...') }}"
                            autocomplete="off"
                            aria-controls="conselhosGrid"
                        >
                    </div>
                </div>
            </div>
        </div>

        <p class="small text-muted mb-4" aria-live="polite">
            <span id="conselhosCount">{{ count($conselhos) }}</span>
            {{ __('conselho(s) encontrado(s)') }}
        </p>

        <div class="row g-4" id="conselhosGrid" role="list">
            @foreach ($conselhos as $conselho)
                <div
                    class="col-lg-6 col-xl-4"
                    role="listitem"
                    data-conselho-nome="{{ $conselho['nome'] }}"
                    data-conselho-sigla="{{ $conselho['sigla'] }}"
                >
                    <article class="card h-100 border-0 shadow-sm conselho-card">
                        <a
                            href="{{ $conselho['url'] }}"
                            class="conselho-card-link d-flex flex-column h-100 p-4"
                            target="_blank"
                            rel="noopener noreferrer"
                            aria-label="{{ __('Acessar :nome', ['nome' => $conselho['nome']]) }}"
                        >
                            <div class="d-flex align-items-start gap-3">
                                <span
                                    class="conselho-card-icon rounded-3 d-inline-flex align-items-center justify-content-center"
                                    aria-hidden="true"
                                >
                                    <i class="fa-solid {{ $conselho['icon'] }} fa-lg"></i>
                                </span>
                                <div class="flex-grow-1 min-w-0">
                                    <span class="conselho-card-sigla badge text-bg-light text-soft mb-2">
                                        {{ $conselho['sigla'] }}
                                    </span>
                                    <h2 class="conselho-card-title fw-semibold text-dark mb-0">
                                        {{ $conselho['nome'] }}
                                    </h2>
                                </div>
                                <i class="fas fa-arrow-right conselho-card-arrow mt-1" aria-hidden="true"></i>
                            </div>
                        </a>
                    </article>
                </div>
            @endforeach
        </div>

        <div id="conselhosEmpty" class="alert alert-light border shadow-sm text-center py-5 mt-2" role="status">
            <i class="fas fa-search fa-2x text-soft mb-3 d-block" aria-hidden="true"></i>
            <p class="mb-0 text-muted">{{ __('Nenhum conselho encontrado para a busca informada.') }}</p>
        </div>

    </div>
</section>

<link rel="stylesheet" href="{{ asset('css/conselhos.css') }}">
<script src="{{ asset('js/conselhos.js') }}" defer></script>
@endsection