@extends('theme')
@section("title", "Portal da Transparência - Angra dos Reis :: Emendas Parlamentares")
@section('content')
<section>
    <div class="container-full p-5 mx-5 emendas-parlamentares">

        @php
            $breadcrumbs = [
                ['route' => route('index'), 'title' => __("Página Inicial")],
                ['currentPage' => "page", 'title' => __("Emendas Parlamentares")],
            ];
        @endphp

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

        @include('components._titleMain', [
            "title" => __("Emendas Parlamentares"),
            "summary" => __(""),
        ])

        {{-- ===== CARD ÚNICO ===== --}}
        <div class="ep-card">

            {{-- Cabeçalho do card --}}
            <div class="ep-card__header">
                <div>
                    <p class="ep-card__eyebrow">Portal da Transparência</p>
                    <h2 class="ep-card__title">Emendas Parlamentares</h2>
                </div>
                <div class="ep-badge-count">
                    <span class="ep-badge-count__num">{{ $emendasParlamentares->total() }}</span>
                    <span class="ep-badge-count__label">documento(s) encontrado(s)</span>
                </div>
            </div>

            {{-- Filtros --}}
            <div class="ep-card__section ep-card__section--filters">
                <div class="ep-section-label">
                    <svg width="14" height="14" viewBox="0 0 16 16" fill="none">
                        <path d="M2 4h12M4 8h8M6 12h4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
                    </svg>
                    Filtrar emendas
                </div>

                <form method="GET" action="{{ route('pages.emendas-parlamentares') }}">
                    <div class="ep-filter-grid">
                        <div class="ep-filter-field ep-filter-field--wide">
                            <label for="q" class="ep-label">Busca geral</label>
                            <input type="text" id="q" name="q" class="ep-input"
                                placeholder="Autor, número, objeto, função…"
                                value="{{ request('q') }}">
                        </div>
                        <div class="ep-filter-field">
                            <label for="autor" class="ep-label">Autor</label>
                            <input type="text" id="autor" name="autor" class="ep-input"
                                placeholder="Digite o autor"
                                value="{{ request('autor') }}">
                        </div>
                        <div class="ep-filter-field">
                            <label for="numero_emenda" class="ep-label">Nº Emenda</label>
                            <input type="text" id="numero_emenda" name="numero_emenda" class="ep-input"
                                placeholder="Ex.: 71200018"
                                value="{{ request('numero_emenda') }}">
                        </div>
                        <div class="ep-filter-field">
                            <label for="ano_emenda" class="ep-label">Ano</label>
                            <select id="ano_emenda" name="ano_emenda" class="ep-input">
                                <option value="">Todos</option>
                                @foreach($anosEmenda as $ano)
                                    @continue((string) $ano === '0')
                                    <option value="{{ $ano }}" @selected((string) request('ano_emenda') === (string) $ano)>
                                        {{ $ano }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="ep-filter-field">
                            <label for="situacao_convenio" class="ep-label">Situação</label>
                            <select id="situacao_convenio" name="situacao_convenio" class="ep-input">
                                <option value="">Todas</option>
                                @foreach($situacoesConvenio as $situacao)
                                    <option value="{{ $situacao }}" @selected(request('situacao_convenio') === $situacao)>
                                        {{ $situacao }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <div class="ep-filter-actions">
                        <button type="submit" class="ep-btn ep-btn--primary">
                            <svg width="12" height="12" viewBox="0 0 16 16" fill="none">
                                <circle cx="6.5" cy="6.5" r="4.5" stroke="currentColor" stroke-width="1.5"/>
                                <path d="M10.5 10.5L14 14" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
                            </svg>
                            Filtrar
                        </button>
                        <a href="{{ route('pages.emendas-parlamentares') }}" class="ep-btn ep-btn--ghost">
                            <svg width="12" height="12" viewBox="0 0 16 16" fill="none">
                                <path d="M3 3l10 10M13 3L3 13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
                            </svg>
                            Limpar filtros
                        </a>
                        <div class="ep-filter-actions__spacer"></div>
                        <span class="ep-download-label">Baixar:</span>
                        <a href="{{ route('pages.emendas-parlamentares.exportar.xls', request()->query()) }}" class="ep-btn ep-btn--download-solid">
                            <svg width="11" height="11" viewBox="0 0 16 16" fill="none">
                                <path d="M8 2v8M5 7l3 3 3-3M3 13h10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                            XLS
                        </a>
                        <a href="{{ route('pages.emendas-parlamentares.exportar.csv', request()->query()) }}" class="ep-btn ep-btn--download-outline">
                            <svg width="11" height="11" viewBox="0 0 16 16" fill="none">
                                <path d="M8 2v8M5 7l3 3 3-3M3 13h10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                            CSV
                        </a>
                    </div>
                </form>
            </div>

            {{-- Tabela --}}
            <div class="ep-table-wrap">
                <table class="ep-table">
                    <colgroup>
                        <col style="width:7%">
                        <col style="width:7%">
                        <col style="width:10%">
                        <col style="width:8%">
                        <col style="width:7%">
                        <col style="width:5%">
                        <col style="width:7%">
                        <col style="width:7%">
                        <col style="width:12%">
                        <col style="width:10%">
                        <col style="width:9%">
                        <col style="width:7%">
                        <col style="width:7%">
                        <col style="width:7%">
                        <col style="width:7%">
                    </colgroup>
                    <thead>
                        <tr>
                            <th>Origem</th>
                            <th>Tipo</th>
                            <th>Autoria</th>
                            <th>Forma de Repasse</th>
                            <th>Número</th>
                            <th>Ano</th>
                            <th class="text-end">Valor Previsto</th>
                            <th class="text-end">Valor Repassado</th>
                            <th>Objeto</th>
                            <th>Localidade beneficiada</th>
                            <th>Órgão executor</th>
                            <th>Função</th>
                            <th>Subfunção</th>
                            <th>Cronograma sintético</th>
                            <th>{{ __('Instrumentos Vinculados') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($emendasParlamentares as $emenda)
                            <tr>
                                <td class="ep-td--sm">{{ $emenda->origem }}</td>
                                <td class="ep-td--sm">{{ $emenda->tipo }}</td>
                                <td class="ep-td--truncate">{{ $emenda->autor }}</td>
                                <td class="ep-td--sm">{{ $emenda->modalidade }}</td>
                                <td class="ep-td--mono">{{ $emenda->numero_emenda }}</td>
                                <td>{{ $emenda->ano_emenda_raw }}</td>
                                <td class="text-end ep-td--mono">
                                    {{
                                        $emenda->valor_previsto_raw !== ''
                                            ? (
                                                preg_match('/\d,\d{2}$/', (string) $emenda->valor_previsto_raw)
                                                    ? $emenda->valor_previsto_raw
                                                    : 'R$ ' . number_format((float) $emenda->valor_previsto, 2, ',', '.')
                                            )
                                            : ''
                                    }}
                                </td>
                                <td class="text-end ep-td--mono">
                                    {{
                                        $emenda->valor_realizado_raw !== ''
                                            ? (
                                                preg_match('/\d,\d{2}$/', (string) $emenda->valor_realizado_raw)
                                                    ? $emenda->valor_realizado_raw
                                                    : 'R$ ' . number_format((float) $emenda->valor_realizado, 2, ',', '.')
                                            )
                                            : ''
                                    }}
                                </td>
                                <td class="ep-td--truncate ep-td--sm">{{ $emenda->objeto }}</td>
                                <td class="ep-td--truncate ep-td--sm">
                                    @if ((int) $emenda->ano_emenda === 2026)
                                        Escola Municipal Tereza Pinheiro de Almeida
                                    @else
                                        -
                                    @endif
                                </td>
                                <td class="ep-td--truncate ep-td--sm">
                                    @if ((int) $emenda->ano_emenda === 2026)
                                        Fundo Municipal de Educação
                                    @else
                                        -
                                    @endif
                                </td>
                                <td class="ep-td--truncate ep-td--sm">{{ $emenda->funcao_raw }}</td>
                                <td class="ep-td--truncate ep-td--sm">{{ $emenda->subfuncao_raw }}</td>
                                <td class="text-center">
                                    @if ((int) $emenda->ano_emenda === 2026)
                                        <a href="https://angra.rj.gov.br/downloads/Transparencia/emenda-parlamentar-001-2026-cronograma-sintetico.pdf"
                                            title="{{ __('Baixar cronograma sintético') }}"
                                            aria-label="{{ __('Baixar cronograma sintético em PDF') }}"
                                            download
                                            target="_blank"
                                            rel="noopener noreferrer">
                                            <i class="fa-solid fa-download fa-lg text-success" aria-hidden="true"></i>
                                        </a>
                                    @else
                                        -
                                    @endif
                                </td>
                                <td class="text-center">
                                    @if ((int) $emenda->ano_emenda === 2026)
                                        <a href="https://angra.rj.gov.br/downloads/Transparencia/instrumentos-vinculados-001-2026-atualizado.pdf"
                                            title="{{ __('Baixar PDF') }}"
                                            aria-label="{{ __('Baixar instrumento vinculado em PDF') }}"
                                            download
                                            target="_blank"
                                            rel="noopener noreferrer">
                                            <i class="fa-solid fa-download fa-lg text-success" aria-hidden="true"></i>
                                        </a>
                                    @else
                                        -
                                    @endif
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="15" class="ep-empty">Nenhuma emenda parlamentar cadastrada.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            {{-- Cards mobile (ocultos no desktop) --}}
            <div class="ep-mobile-list">
                @forelse($emendasParlamentares as $emenda)
                    @php
                        $badge = match ($emenda->situacao_convenio) {
                            'Em execução'                   => 'warning',
                            'Prestação de Contas Concluída' => 'success',
                            default                         => 'danger',
                        };
                    @endphp
                    <div class="ep-mobile-card">
                        <div class="ep-mobile-card__top">
                            <div class="ep-mobile-card__autor">{{ $emenda->autor }}</div>
                            
                        </div>
                        <div class="ep-mobile-card__objeto">{{ $emenda->objeto }}</div>
                        <div class="ep-mobile-card__grid">
                            <div class="ep-mobile-card__item">
                                <span class="ep-mobile-card__key">Nº Emenda</span>
                                <span class="ep-mobile-card__val ep-td--mono">{{ $emenda->numero_emenda }}</span>
                            </div>
                            <div class="ep-mobile-card__item">
                                <span class="ep-mobile-card__key">Ano</span>
                                <span class="ep-mobile-card__val">{{ $emenda->ano_emenda }}</span>
                            </div>
                            <div class="ep-mobile-card__item">
                                <span class="ep-mobile-card__key">Nº Convênio</span>
                                <span class="ep-mobile-card__val">{{ $emenda->numero_convenio }}</span>
                            </div>
                            <div class="ep-mobile-card__item">
                                <span class="ep-mobile-card__key">Função</span>
                                <span class="ep-mobile-card__val">{{ $emenda->funcao_governo }}</span>
                            </div>
                            <div class="ep-mobile-card__item">
                                <span class="ep-mobile-card__key">Modalidade</span>
                                <span class="ep-mobile-card__val">{{ $emenda->modalidade }}</span>
                            </div>
                        </div>
                        <div class="ep-mobile-card__valores">
                            <div class="ep-mobile-card__valor-item">
                                <span class="ep-mobile-card__key">Vl. Previsto</span>
                                <span class="ep-mobile-card__valor-num">R$ {{ number_format($emenda->valor_previsto, 2, ',', '.') }}</span>
                            </div>
                            <div class="ep-mobile-card__valor-item">
                                <span class="ep-mobile-card__key">Vl. Realizado</span>
                                <span class="ep-mobile-card__valor-num ep-mobile-card__valor-num--realizado">R$ {{ number_format($emenda->valor_realizado, 2, ',', '.') }}</span>
                            </div>
                        </div>
                    </div>
                @empty
                    <div class="ep-empty">Nenhuma emenda parlamentar cadastrada.</div>
                @endforelse
            </div>

            {{-- Rodapé / Paginação --}}
            <div class="ep-card__footer">
                <span class="ep-pagination-info">
                    Mostrando {{ $emendasParlamentares->firstItem() }}–{{ $emendasParlamentares->lastItem() }}
                    de {{ $emendasParlamentares->total() }} registros
                </span>
                <div class="ep-pagination">
                    {{ $emendasParlamentares->links() }}
                </div>
            </div>

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

<style>
/* ════════════════════════════════════════════════════
   ESTILOS BASE — desktop idêntico ao original
════════════════════════════════════════════════════ */

/* ── Card principal ────────────────────────────────── */
.ep-card {
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: .625rem;
    overflow: hidden;
}

/* ── Cabeçalho ─────────────────────────────────────── */
.ep-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #dee2e6;
    background: #f8f9fa;
}
.ep-card__eyebrow {
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: #6c757d;
    margin: 0 0 2px;
}
.ep-card__title {
    font-size: 1.15rem;
    font-weight: 600;
    color: #212529;
    margin: 0;
}
.ep-badge-count {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #eaf3de;
    border-radius: 20px;
    padding: 5px 14px;
}
.ep-badge-count__num   { font-size: 1rem; font-weight: 600; color: #27500a; line-height: 1; }
.ep-badge-count__label { font-size: .7rem; color: #3b6d11; }

/* ── Seção genérica ────────────────────────────────── */
.ep-card__section { border-bottom: 1px solid #dee2e6; }
.ep-card__section--filters { padding: 1.25rem 1.5rem; }
.ep-section-label {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: .8rem;
    font-weight: 600;
    color: #495057;
    margin-bottom: 1rem;
}

/* ── Grid de filtros ───────────────────────────────── */
.ep-filter-grid {
    display: grid;
    grid-template-columns: 2fr 1.5fr 1fr 1fr 1.5fr;
    gap: 10px;
    margin-bottom: 1rem;
}
.ep-label {
    display: block;
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #6c757d;
    margin-bottom: 4px;
}
.ep-input {
    width: 100%;
    padding: 6px 10px;
    font-size: .8rem;
    border: 1px solid #ced4da;
    border-radius: .375rem;
    background: #fff;
    color: #212529;
    box-sizing: border-box;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.ep-input:focus {
    outline: none;
    border-color: #198754;
    box-shadow: 0 0 0 3px rgba(25,135,84,.15);
}

/* ── Ações de filtro ───────────────────────────────── */
.ep-filter-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: .875rem;
    border-top: 1px solid #dee2e6;
    flex-wrap: wrap;
}
.ep-filter-actions__spacer { flex: 1; }
.ep-download-label {
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #6c757d;
}

/* ── Botões ────────────────────────────────────────── */
.ep-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    font-size: .8rem;
    font-weight: 500;
    border-radius: .375rem;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
    white-space: nowrap;
}
.ep-btn--primary  { background: #198754; color: #fff; border: 1px solid #198754; }
.ep-btn--primary:hover { background: #157347; border-color: #157347; }
.ep-btn--ghost    { background: transparent; color: #6c757d; border: 1px solid #ced4da; }
.ep-btn--ghost:hover { color: #343a40; border-color: #adb5bd; }
.ep-btn--download-solid   { background: #198754; color: #fff; border: 1px solid #198754; }
.ep-btn--download-solid:hover { background: #157347; color: #fff; }
.ep-btn--download-outline { background: transparent; color: #198754; border: 1px solid #198754; }
.ep-btn--download-outline:hover { background: #eaf3de; }

/* ── Tabela ────────────────────────────────────────── */
.ep-table-wrap { overflow-x: auto; }
.ep-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .8rem;
    table-layout: auto;
    min-width: 1800px;
}
.ep-table thead tr {
    background: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
}
.ep-table thead th {
    padding: .65rem 1rem;
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #6c757d;
    white-space: normal;
    text-align: center;
    vertical-align: middle;
}
.ep-table tbody tr {
    border-bottom: 1px solid #f0f0f0;
    transition: background .1s ease;
}
.ep-table tbody tr:nth-child(even) { background: #fafafa; }
.ep-table tbody tr:hover { background: #f0f9f4; }
.ep-table tbody td {
    padding: .6rem 1rem;
    vertical-align: middle;
    color: #212529;
    text-align: center;
    white-space: normal;
    word-break: break-word;
}
.ep-td--truncate { overflow: visible; text-overflow: clip; white-space: normal; }
.ep-td--sm       { font-size: .75rem; color: #495057; }
.ep-td--mono     { font-variant-numeric: tabular-nums; }
.ep-empty        { text-align: center; padding: 2rem; color: #6c757d; }
.text-end        { text-align: center !important; }

/* ── Badges de situação ────────────────────────────── */
.ep-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: .72rem;
    font-weight: 500;
    white-space: nowrap;
}
.ep-status__dot {
    width: 5px; height: 5px;
    border-radius: 50%;
    flex-shrink: 0;
}
.ep-status--warning { background: #fff3cd; color: #664d03; }
.ep-status--warning .ep-status__dot { background: #ffc107; }
.ep-status--success { background: #d1e7dd; color: #0a3622; }
.ep-status--success .ep-status__dot { background: #198754; }
.ep-status--danger  { background: #f8d7da; color: #58151c; }
.ep-status--danger  .ep-status__dot { background: #dc3545; }

/* ── Rodapé / Paginação ────────────────────────────── */
.ep-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    padding: .75rem 1.5rem;
    background: #f8f9fa;
    border-top: 1px solid #dee2e6;
}
.ep-pagination-info {
    font-size: .75rem;
    color: #6c757d;
}
.ep-pagination { display: flex; align-items: center; }

/* ── Cards mobile: ocultos no desktop ──────────────── */
.ep-mobile-list { display: none; }

/* ── Estilos dos cards mobile ──────────────────────── */
.ep-mobile-card {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #f0f0f0;
    background: #fff;
}
.ep-mobile-card:nth-child(even) { background: #fafafa; }
.ep-mobile-card:last-child { border-bottom: none; }
.ep-mobile-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: .4rem;
}
.ep-mobile-card__autor {
    font-size: .85rem;
    font-weight: 600;
    color: #212529;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ep-mobile-card__objeto {
    font-size: .78rem;
    color: #495057;
    margin-bottom: .75rem;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ep-mobile-card__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 16px;
    margin-bottom: .75rem;
}
.ep-mobile-card__item {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.ep-mobile-card__key {
    font-size: .65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #6c757d;
}
.ep-mobile-card__val {
    font-size: .8rem;
    color: #212529;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ep-mobile-card__valores {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding-top: .65rem;
    border-top: 1px dashed #dee2e6;
}
.ep-mobile-card__valor-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ep-mobile-card__valor-num {
    font-size: .82rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: #212529;
}
.ep-mobile-card__valor-num--realizado { color: #198754; }

/* ════════════════════════════════════════════════════
   BREAKPOINTS — somente mobile/tablet (> 992px = intocado)
════════════════════════════════════════════════════ */

/* ── Tablet (≤ 992px) ──────────────────────────────── */
@media (max-width: 992px) {

    .emendas-parlamentares {
        padding: 1rem !important;
        margin: 0 !important;
    }
    /* Filtros: 2 colunas */
    .ep-filter-grid {
        grid-template-columns: 1fr 1fr;
    }
    .ep-filter-field--wide {
        grid-column: 1 / -1;
    }

    /* Troca tabela por cards */
    .ep-table-wrap  { display: none; }
    .ep-mobile-list { display: block; }

    /* Rodapé empilhado */
    .ep-card__footer {
        flex-direction: column;
        align-items: flex-start;
        padding: .75rem 1.25rem;
    }
    .ep-pagination {
        width: 100%;
        justify-content: center;
    }
}

/* ── Mobile (≤ 576px) ──────────────────────────────── */
@media (max-width: 576px) {
    /* Filtros: coluna única */
    .ep-filter-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .ep-filter-field--wide { grid-column: 1; }

    /* Ações empilhadas */
    .ep-filter-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    .ep-filter-actions__spacer { display: none; }

    .ep-btn--primary,
    .ep-btn--ghost {
        justify-content: center;
        width: 100%;
    }

    /* Botões de download lado a lado, label oculto */
    .ep-download-label { display: none; }
    .ep-btn--download-solid,
    .ep-btn--download-outline {
        flex: 1;
        justify-content: center;
    }

    /* Cabeçalho empilhado */
    .ep-card__header {
        flex-direction: column;
        align-items: flex-start;
        padding: .875rem 1rem;
    }
    .ep-card__section--filters { padding: .875rem 1rem; }
    .ep-card__footer            { padding: .75rem 1rem; }
    .ep-mobile-card             { padding: .875rem 1rem; }
}

/* ── Mobile pequeno (≤ 380px) ──────────────────────── */
@media (max-width: 380px) {
    .ep-mobile-card__grid    { grid-template-columns: 1fr; }
    .ep-mobile-card__valores { grid-template-columns: 1fr; }
    .ep-card__eyebrow        { display: none; }
}
</style>
@endsection