@extends('theme')
@section("title", "Portal da Transparência - Angra dos Reis :: Relatório de Manifestações")
@section('content')
<section>
    <div class="container-full p-5 mx-5 emendas-pix">
            <!-- Breadcrumb -->
            @php
            $breadcrumbs = [
                    [
                        'route' => route('index'),
                        'title' => __("Página Inicial"),
                    ],
                    [
                        'route' => route('pages.ouvidoria'),
                        'title' => __("Ouvidoria"),
                    ],
                    [
                        'currentPage' => "page",
                        'title' => __("Relatório de Manifestações"),
                    ],
                ];
            @endphp

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

            <!-- Título Principal -->
            @include('components._titleMain', [
                "title" => __("Relatório de Manifestações"),
                "summary" => __("Relatórios anuais estatísticos contendo a quantidade de pedidos de acesso recebidos, atendidos e indeferidos."),
            ])
            
            @include('components._bottunsNavOuvidoria')

            <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">{{ __("Relatório de Manifestações") }}</h2>
                    </div>
                    <div class="ep-badge-count">
                        <span class="ep-badge-count__num">{{ $relatorioDeManifestacoes->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 Relatórios") }}
                    </div>

                    <form action="" method="GET" id="filtro-form">
                        <div class="ep-filter-grid">
                            <div class="ep-filter-field">
                                <label for="situacao" class="ep-label">{{ __("Situação") }}</label>
                                <select class="ep-input" id="situacao" name="situacao">
                                    <option value="">{{ __("Selecione uma opção...") }}</option>
                                    <option value="Concluída">{{ __("Concluídas") }}</option>
                                    <option value="Cadastrada">{{ __("Cadastradas") }}</option>
                                </select>
                            </div>

                            <div class="ep-filter-field">
                                <label for="data" class="ep-label">{{ __("Data de Cadastro") }}</label>
                                <select class="ep-input" id="data" name="data">
                                    <option value="">{{ __("Selecione uma opção...") }}</option>
                                    <option value="2020">2020</option>
                                    <option value="2021">2021</option>
                                    <option value="2022">2022</option>
                                    <option value="2023">2023</option>
                                    <option value="2024">2024</option>
                                    <option value="2025">2025</option>
                                    <option value="2026">2026</option>
                                </select>
                            </div>

                            <div class="ep-filter-field">
                                <label for="pessoa" class="ep-label">{{ __("Tipo de Pessoa") }}</label>
                                <select class="ep-input" id="pessoa" name="pessoa">
                                    <option value="">{{ __("Selecione uma opção...") }}</option>
                                    <option value="Pessoa Física">{{ __("Pessoa Física") }}</option>
                                    <option value="Pessoa Juridica">{{ __("Pessoa Jurídica") }}</option>
                                </select>
                            </div>
                        </div>

                        <div class="ep-filter-actions">
                            <button type="button" id="btn-filtrar" 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>
                            <button type="button" id="btn-limpar" 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") }}
                            </button>
                            <div class="ep-filter-actions__spacer"></div>
                            <span class="ep-download-label">{{ __("Baixar:") }}</span>
                            <a href="https://angra.rj.gov.br/downloads/relatorio_manifestacoes.csv" target="_blank" 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>
                                CSV
                            </a>
                        </div>
                    </form>
                </div>

                <div class="ep-table-wrap">
                    <table class="ep-table">
                                <thead>
                                    <tr>
                                        <th>{{ __("Situação") }}</th>
                                        <th>{{ __("NUP") }}</th>
                                        <th>{{ __("Data de Cadastro") }}</th>
                                        <th>{{ __("Data de Resposta") }}</th>
                                        <th>{{ __("Responsável pela Resposta") }}</th>
                                        <th>{{ __("Tipo de Pessoa") }}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @php $index = 0; @endphp
                                    @forelse($relatorioDeManifestacoes as $manifestacao)
                                        <tr>
                                            <td>{{ $manifestacao->situacao ?? '' }}</td>
                                            <td>{{ $manifestacao->nup ?? '' }}</td>
                                            <td>{{ $manifestacao->dataDeCadastro ? \Carbon\Carbon::parse($manifestacao->dataDeCadastro)->format('d/m/Y') : '' }}</td>
                                            <td>{{ $manifestacao->dataResposta ? \Carbon\Carbon::parse($manifestacao->dataResposta)->format('d/m/Y') : '' }}</td>
                                            <td>{{ $manifestacao->responsavelResposta ?? '' }}</td>
                                            <td>{{ $manifestacao->pessoa ?? '' }}</td>
                                        </tr>
                                        @php $index++; @endphp
                                    @empty
                                        <tr>
                                            <td colspan="6" class="ep-empty">{{ __("* Nenhum registro encontrado") }}</td>
                                        </tr>
                                    @endforelse
                                </tbody>
                    </table>
                </div>

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

    <script>
document.addEventListener("DOMContentLoaded", () => {
const form = document.getElementById("filtro-form");
const rows = document.querySelectorAll("table tbody tr");
const btnFiltrar = document.getElementById("btn-filtrar");
const btnLimpar = document.getElementById("btn-limpar");

const filtrar = () => {
    const situacao = document.getElementById("situacao").value.toLowerCase();
    const data = document.getElementById("data").value.toLowerCase();
    const pessoa = document.getElementById("pessoa").value.toLowerCase();

    rows.forEach(row => {
        const tdSituacao = row.cells[0]?.textContent.toLowerCase() || "";
        const tdData = row.cells[2]?.textContent.toLowerCase() || "";
        const tdPessoa = row.cells[5]?.textContent.toLowerCase() || "";

        const matchSituacao = !situacao || tdSituacao.includes(situacao);
        const matchData = !data || tdData.includes(data);
        const matchPessoa = !pessoa || tdPessoa.includes(pessoa);

        if (matchSituacao && matchData && matchPessoa) {
            row.style.display = "";
        } else {
            row.style.display = "none";
        }
    });
};

form.addEventListener("change", filtrar);
btnFiltrar.addEventListener("click", filtrar);
btnLimpar.addEventListener("click", () => {
    form.reset();
    filtrar();
});
});
    </script>
<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: 1fr 1fr 1fr; 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-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-empty { text-align: center; padding: 2rem; color: #6c757d; }
.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; }
@media (max-width: 992px) {
    .emendas-pix { padding: 1rem !important; margin: 0 !important; }
    .ep-filter-grid { grid-template-columns: 1fr 1fr; }
    .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-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 { width: 100%; 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; }
}
</style>
@endsection