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

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

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

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

        @php
            $formatCurrency = static fn ($value) => 'R$ ' . number_format((float) $value, 2, ',', '.');
        @endphp

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

            <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-pix') }}">
                    <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="Código, beneficiário, objeto, empenho..."
                                value="{{ request('q') }}">
                        </div>
                        <div class="ep-filter-field">
                            <label for="numero_codigo" class="ep-label">Número/Código</label>
                            <input type="text" id="numero_codigo" name="numero_codigo" class="ep-input" placeholder="Ex.: 3300100" value="{{ request('numero_codigo') }}">
                        </div>
                        <div class="ep-filter-field">
                            <label for="ano" class="ep-label">Ano</label>
                            <select id="ano" name="ano" class="ep-input">
                                <option value="">Todos</option>
                                @foreach($anosPix as $ano)
                                    <option value="{{ $ano }}" @selected((string) request('ano') === (string) $ano)>
                                        {{ $ano }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="ep-filter-field">
                            <label for="beneficiario" class="ep-label">Beneficiário</label>
                            <input type="text" id="beneficiario" name="beneficiario" class="ep-input"
                                placeholder="Digite o beneficiário"
                                value="{{ request('beneficiario') }}">
                        </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-pix') }}" 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-pix.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-pix.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>

            <div class="ep-table-wrap">
                <table class="ep-table">
                    <thead>
                        <tr>
                            <th>Número/Código</th>
                            <th class="text-end">Valor Repassado</th>
                            <th>Ano</th>
                            <th>Beneficiário</th>
                            <th>Objeto</th>
                            <th>Nº Empenho</th>
                            <th class="text-end">Empenhado</th>
                            <th class="text-end">Liquidado</th>
                            <th class="text-end">Pago</th>
                            <th>Dados do Plano de Ação</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($emendasPix as $emenda)
                            <tr>
                                <td class="ep-td--mono">{{ $emenda->numero_codigo }}</td>
                                <td class="text-end ep-td--mono ep-td--currency">
                                    {{ $formatCurrency($emenda->valor_repassado) }}
                                </td>
                                <td class="ep-td--year">{{ $emenda->ano_raw ?: $emenda->ano }}</td>
                                <td class="ep-td--truncate">{{ $emenda->beneficiario }}</td>
                                <td class="ep-td--truncate ep-td--sm">{{ $emenda->objeto }}</td>
                                <td class="ep-td--mono">{{ $emenda->numero_empenho }}</td>
                                <td class="text-end ep-td--mono ep-td--currency">
                                    {{ $formatCurrency($emenda->empenhado) }}
                                </td>
                                <td class="text-end ep-td--mono ep-td--currency">
                                    {{ $formatCurrency($emenda->liquidado) }}
                                </td>
                                <td class="text-end ep-td--mono ep-td--currency">
                                    {{ $formatCurrency($emenda->pago) }}
                                </td>
                                <td class="ep-td--truncate ep-td--sm">
                                    @if(!empty($emenda->dados_plano_acao) && str_starts_with($emenda->dados_plano_acao, 'http'))
                                        <a href="{{ $emenda->dados_plano_acao }}" target="_blank" rel="noopener noreferrer">Abrir link</a>
                                    @else
                                        {{ $emenda->dados_plano_acao }}
                                    @endif
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="10" class="ep-empty">Nenhuma emenda cadastrada.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            <div class="ep-mobile-list">
                @forelse($emendasPix as $emenda)
                    <div class="ep-mobile-card">
                        <div class="ep-mobile-card__top">
                            <div class="ep-mobile-card__autor">{{ $emenda->beneficiario ?: 'Não informado' }}</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úmero/Código</span>
                                <span class="ep-mobile-card__val ep-td--mono">{{ $emenda->numero_codigo }}</span>
                            </div>
                            <div class="ep-mobile-card__item">
                                <span class="ep-mobile-card__key">Ano</span>
                                <span class="ep-mobile-card__val ep-td--year">{{ $emenda->ano_raw ?: $emenda->ano }}</span>
                            </div>
                            <div class="ep-mobile-card__item">
                                <span class="ep-mobile-card__key">Nº Empenho</span>
                                <span class="ep-mobile-card__val">{{ $emenda->numero_empenho }}</span>
                            </div>
                        </div>
                        <div class="ep-mobile-card__valores">
                            <div class="ep-mobile-card__valor-item">
                                <span class="ep-mobile-card__key">Valor Repassado</span>
                                <span class="ep-mobile-card__valor-num">{{ $formatCurrency($emenda->valor_repassado) }}</span>
                            </div>
                            <div class="ep-mobile-card__valor-item">
                                <span class="ep-mobile-card__key">Empenhado</span>
                                <span class="ep-mobile-card__valor-num">{{ $formatCurrency($emenda->empenhado) }}</span>
                            </div>
                            <div class="ep-mobile-card__valor-item">
                                <span class="ep-mobile-card__key">Liquidado</span>
                                <span class="ep-mobile-card__valor-num">{{ $formatCurrency($emenda->liquidado) }}</span>
                            </div>
                            <div class="ep-mobile-card__valor-item">
                                <span class="ep-mobile-card__key">Pago</span>
                                <span class="ep-mobile-card__valor-num ep-mobile-card__valor-num--realizado">{{ $formatCurrency($emenda->pago) }}</span>
                            </div>
                        </div>
                    </div>
                @empty
                    <div class="ep-empty">Nenhuma Emenda cadastrada.</div>
                @endforelse
            </div>

            <div class="ep-card__footer">
                <span class="ep-pagination-info">
                    Mostrando {{ $emendasPix->firstItem() }}–{{ $emendasPix->lastItem() }}
                    de {{ $emendasPix->total() }} registros
                </span>
                <div class="ep-pagination">
                    {{ $emendasPix->links() }}
                </div>
            </div>
        </div>
    </div>
</section>

<style>
.ep-card { background: #fff; border: 1px solid #dee2e6; border-radius: .625rem; overflow: hidden; }
.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; }
.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; }
.ep-filter-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 2fr; 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); }
.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; }
.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; }
.ep-table-wrap { overflow-x: auto; }
.ep-table { width: 100%; border-collapse: collapse; font-size: .8rem; table-layout: auto; min-width: 1450px; }
.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: nowrap; 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 !important; white-space: nowrap; word-break: normal; }
.ep-td--truncate { overflow: visible; text-overflow: clip; white-space: normal; word-break: break-word; min-width: 220px; }
.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: right !important; }
.ep-td--year { white-space: nowrap; font-weight: 600; }
.ep-td--currency { white-space: nowrap; }
.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; }
.ep-mobile-list { display: none; }
.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; }
@media (max-width: 992px) {
    .emendas-pix { padding: 1rem !important; margin: 0 !important; }
    .ep-filter-grid { grid-template-columns: 1fr 1fr; }
    .ep-filter-field--wide { grid-column: 1 / -1; }
    .ep-table-wrap { display: none; }
    .ep-mobile-list { display: block; }
    .ep-card__footer { flex-direction: column; align-items: flex-start; padding: .75rem 1.25rem; }
    .ep-pagination { width: 100%; justify-content: center; }
}
@media (max-width: 576px) {
    .ep-filter-grid { grid-template-columns: 1fr; gap: 8px; }
    .ep-filter-field--wide { grid-column: 1; }
    .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%; }
    .ep-download-label { display: none; }
    .ep-btn--download-solid,
    .ep-btn--download-outline { flex: 1; justify-content: center; }
    .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; }
}
@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