@extends('theme')
@section("title", "Portal da Transparência - Angra dos Reis :: Dívida Ativa")
@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' => __("Dívida Ativa")],
            ];
        @endphp

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

        @include('components._titleMain', [
            "title" => __("Relatório de Inscritos na Dívida Ativa"),
            "summary" => __("Relação de imóveis e contribuintes inscritos na dívida ativa do município."),
        ])

        <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">Dívida Ativa</h2>
                </div>
                <div class="ep-badge-count">
                    <span class="ep-badge-count__num">{{ $dividas->total() }}</span>
                    <span class="ep-badge-count__label">registro(s) encontrado(s)</span>
                </div>
            </div>

            <div class="ep-card__section ep-card__section--filters">
                <div class="ep-section-label">Filtrar dívida ativa</div>

                <form method="GET" action="{{ route('pages.divida-ativa') }}">
                    <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="Inscrição, imóvel, CPF/CNPJ, contribuinte, exercício..."
                                value="{{ request('q') }}">
                        </div>
                        <div class="ep-filter-field">
                            <label for="exercicio" class="ep-label">Exercício</label>
                            <select id="exercicio" name="exercicio" class="ep-input">
                                <option value="">Todos</option>
                                @foreach(($exercicios ?? []) as $exercicio)
                                    <option value="{{ $exercicio }}" @selected((string) request('exercicio') === (string) $exercicio)>
                                        {{ $exercicio }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="ep-filter-field">
                            <label for="origem" class="ep-label">Origem</label>
                            <select id="origem" name="origem" class="ep-input">
                                <option value="">Todas</option>
                                @foreach(($origens ?? []) as $origem)
                                    <option value="{{ $origem }}" @selected(request('origem') === $origem)>
                                        {{ $origem }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="ep-filter-field">
                            <label for="status_divida" class="ep-label">Status</label>
                            <select id="status_divida" name="status_divida" class="ep-input">
                                <option value="">Todos</option>
                                @foreach(($statusDivida ?? []) as $statusItem)
                                    <option value="{{ $statusItem }}" @selected(request('status_divida') === $statusItem)>
                                        {{ $statusItem }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="ep-filter-field">
                            <label for="tipo_pessoa" class="ep-label">Tipo de Pessoa</label>
                            <select id="tipo_pessoa" name="tipo_pessoa" class="ep-input">
                                <option value="">Todos</option>
                                <option value="pf" @selected(request('tipo_pessoa') === 'pf')>Pessoa Física</option>
                                <option value="pj" @selected(request('tipo_pessoa') === 'pj')>Pessoa Jurídica</option>
                            </select>
                        </div>
                    </div>

                    <div class="ep-filter-actions">
                        <a href="{{ asset('docs/Atualizacao_da_Divida_Ativa.xlsx') }}" class="ep-btn ep-btn--primary ep-btn--download" target="_blank">
                            <i class="fas fa-file-csv me-2"></i> Download do relatório completo (.xslx)
                        </a>
                        <div class="ep-filter-actions__spacer"></div>
                        <button type="submit" class="ep-btn ep-btn--primary">Filtrar</button>
                        <a href="{{ route('pages.divida-ativa') }}" class="ep-btn ep-btn--ghost">Limpar filtros</a>
                    </div>
                </form>
            </div>

            <div class="ep-table-wrap">
                <table class="ep-table">
                    <thead>
                        <tr>
                            <th>Inscrição</th>
                            <th>Imóvel</th>
                            <th>CPF/CNPJ</th>
                            <th>Contribuinte</th>
                            <th>Origem</th>
                            <th>Exercício</th>
                            <th>Data Dívida</th>
                            <th>Valor Total</th>
                            <th>Certidão</th>
                            <th>Status</th>
                            <th>Parcelado</th>
                            <th>Protestado</th>
                            <th>Ajuizado</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($dividas as $divida)
                            <tr>
                                <td>{{ $divida->registro->numInscricao ?? '-' }}</td>
                                <td>{{ $divida->registro->numImovel ?? '-' }}</td>
                                <td>{{ $divida->registro->isPJ ? ($divida->registro->cnpj_anonimizado ?? '-') : ($divida->registro->cpf_anonimizado ?? '-') }}</td>
                                <td class="ep-td--truncate">{{ $divida->registro->nome_anonimizado ?? '-' }}</td>
                                <td class="ep-td--truncate">{{ $divida->registro->origemDivida ?? '-' }}</td>
                                <td>{{ $divida->registro->exercicio ?? '-' }}</td>
                                <td>{{ !empty($divida->registro->dividaData) ? date('d/m/Y', strtotime($divida->registro->dividaData)) : '-' }}</td>
                                <td class="ep-td--mono">{{ $divida->registro->dividaValorTotal ?? '-' }}</td>
                                <td>{{ $divida->registro->numCertidao ?? '-' }}</td>
                                <td>{{ $divida->registro->dividaStatus ?? '-' }}</td>
                                <td>{{ !empty($divida->registro->dividaParcelado) ? 'Sim' : 'Não' }}</td>
                                <td>{{ !empty($divida->registro->dividaProtestado) ? 'Sim' : 'Não' }}</td>
                                <td>{{ !empty($divida->registro->dividaAjuizado) ? 'Sim' : 'Não' }}</td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="13" class="ep-empty">Nenhum registro encontrado.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            <div class="ep-card__footer">
                <span class="ep-pagination-info">
                    Mostrando {{ $dividas->firstItem() ?? 0 }}-{{ $dividas->lastItem() ?? 0 }}
                    de {{ $dividas->total() }} registros
                </span>
                <div class="ep-pagination">
                    {{ $dividas->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: repeat(2, minmax(240px, 1fr)); gap: 10px 12px; margin-bottom: 1rem; }
.ep-filter-field--wide { grid-column: 1 / -1; }
.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-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--ghost { background: transparent; color: #6c757d; border: 1px solid #ced4da; }
.ep-btn--download { margin-right: auto; }
.ep-table-wrap { overflow-x: auto; }
.ep-table { width: 100%; border-collapse: collapse; font-size: .8rem; table-layout: auto; min-width: 1500px; }
.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--mono { font-variant-numeric: tabular-nums; }
.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-parlamentares { padding: 1rem !important; margin: 0 !important; }
    .ep-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ep-filter-field--wide { grid-column: 1 / -1; }
    .ep-btn--download { margin-right: 0; }
    .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; }
    .ep-filter-field--wide { grid-column: 1; }
    .ep-filter-actions { flex-direction: column; align-items: stretch; }
    .ep-filter-actions__spacer { display: none; }
    .ep-btn { justify-content: center; width: 100%; }
}
</style>
@endsection