@php
    $routeMapaDados = $routeMapaDados ?? (!empty($painelDashboard)
        ? 'admin.dashboardEstrategico.projetosProgramas.mapa.dados'
        : 'admin.projetosProgramas.mapa.dados');
    $ppMapaFiltrosChaves = [
        'mapa_search',
        'mapa_gestor',
        'mapa_prioritario',
        'mapa_orcamento_status_cor',
        'mapa_status_registro',
        'mapa_bairro',
    ];
    $ppMapaHasFiltros = collect($ppMapaFiltrosChaves)->contains(function ($k) {
        return request()->filled($k);
    });
    $ppMapaFiltrosExpanded = request()->has('mapa_filtros_visiveis')
        ? request()->boolean('mapa_filtros_visiveis')
        : $ppMapaHasFiltros;
@endphp

<div class="pp-mapa-wrapper"
    data-pp-mapa
    data-endpoint="{{ route($routeMapaDados) }}"
    data-label-total="{{ __('Projetos no mapa:') }}"
    data-label-zoom-in="{{ __('Aproximar') }}"
    data-label-zoom-out="{{ __('Afastar') }}"
    data-label-recenter="{{ __('Recentrar') }}"
    data-label-fullscreen-enter="{{ __('Tela cheia') }}"
    data-label-fullscreen-exit="{{ __('Sair da tela cheia') }}"
    data-label-view-more="{{ __('Ver mais') }}"
    data-label-no-bairro="{{ __('Não informado') }}"
    data-label-no-andamento="{{ __('Sem andamento informado') }}"
    data-label-mapao-number="{{ __('Nº MAPÃO') }}"
    data-label-bairro="{{ __('Bairro') }}"
    data-label-abrangencia="{{ __('Abrangência') }}"
    data-label-municipio-inteiro="{{ __('Município inteiro (todos os bairros)') }}"
    data-label-municipio-referencia="{{ __('Ponto de referência no centro do município.') }}"
    data-label-orcamento-previsto="{{ __('Orçamento previsto') }}"
    data-label-orcamento-disponivel="{{ __('Orçamento disponível') }}"
    data-label-prazo="{{ __('Prazo') }}"
    data-label-andamento="{{ __('Andamento') }}"
    data-label-days="{{ __('dias') }}"
    data-label-no-results="{{ __('Nenhum projeto com coordenadas para os filtros atuais.') }}"
    data-label-loading="{{ __('Carregando projetos...') }}"
    aria-label="{{ __('Mapa interativo de projetos e programas') }}">

    <div class="mb-3" data-pp-mapa-filters>
        <input type="hidden" name="mapa_filtros_visiveis" class="pp-mapa-filtros-visiveis-field" value="{{ $ppMapaFiltrosExpanded ? '1' : '0' }}">

        <div class="row g-2 mb-2 align-items-end">
            <div class="col-12 col-md-4 col-lg-3">
                <label class="form-label small" for="pp_mapa_f_gestor">{{ __('Secretaria') }}</label>
                <select id="pp_mapa_f_gestor" class="form-select form-select-sm" data-pp-mapa-filter data-pp-mapa-api-param="gestor">
                    <option value="">{{ __('Todos') }}</option>
                    @foreach($gestores as $g)
                        <option value="{{ $g->id }}" {{ request('mapa_gestor') == $g->id ? 'selected' : '' }}>
                            {{ $g->abbreviation ? $g->abbreviation . ' - ' . $g->name : $g->name }}
                        </option>
                    @endforeach
                </select>
            </div>
            <div class="col-12 col-md-8 col-lg-9">
                <label class="form-label small" for="pp_mapa_f_search">{{ __('Buscar') }}</label>
                <div class="input-group input-group-sm">
                    <input type="search" id="pp_mapa_f_search" class="form-control"
                        placeholder="{{ __('Buscar por denominação, descrição, bairro, endereço...') }}"
                        value="{{ request('mapa_search') }}"
                        autocomplete="off"
                        data-pp-mapa-filter
                        data-pp-mapa-api-param="search">
                    <button class="btn btn-outline-secondary" type="button" data-pp-mapa-clear-search
                        title="{{ __('Limpar busca') }}" aria-label="{{ __('Limpar busca') }}">
                        <i class="fa fa-times" aria-hidden="true"></i>
                    </button>
                </div>
            </div>
        </div>

        <div class="d-flex flex-wrap justify-content-between align-items-center gap-2 mb-2">
            <button
                class="btn btn-outline-secondary btn-sm"
                type="button"
                aria-controls="pp-mapa-filtros-collapse"
                aria-expanded="{{ $ppMapaFiltrosExpanded ? 'true' : 'false' }}"
                data-pp-mapa-filtros-toggle
                data-label-show="{{ __('Exibir filtros') }}"
                data-label-hide="{{ __('Ocultar filtros') }}">
                <i class="fa-solid fa-sliders me-1" aria-hidden="true"></i>
                <span data-pp-mapa-filtros-toggle-label>{{ $ppMapaFiltrosExpanded ? __('Ocultar filtros') : __('Exibir filtros') }}</span>
            </button>
            <div class="small text-muted" data-pp-mapa-status aria-live="polite" aria-atomic="true"></div>
        </div>

        <div id="pp-mapa-filtros-collapse" class="collapse {{ $ppMapaFiltrosExpanded ? 'show' : '' }}">
            <div class="row g-2 mb-2">
                <div class="col-6 col-md-4 col-lg-2 col-xl-2">
                    <label class="form-label small" for="pp_mapa_f_prioritario">{{ __('Prioritário') }}</label>
                    <select id="pp_mapa_f_prioritario" class="form-select form-select-sm" data-pp-mapa-filter data-pp-mapa-api-param="prioritario">
                        <option value="">{{ __('Todos') }}</option>
                        <option value="1" {{ request('mapa_prioritario') === '1' ? 'selected' : '' }}>{{ __('Sim') }}</option>
                        <option value="0" {{ request('mapa_prioritario') === '0' ? 'selected' : '' }}>{{ __('Não') }}</option>
                    </select>
                </div>
                <div class="col-6 col-md-4 col-lg-2 col-xl-2">
                    <label class="form-label small" for="pp_mapa_f_orcamento_status_cor">{{ __('Situação do orçamento (MAPÃO)') }}</label>
                    <select id="pp_mapa_f_orcamento_status_cor" class="form-select form-select-sm" data-pp-mapa-filter data-pp-mapa-api-param="orcamento_status_cor">
                        <option value="">{{ __('Todas') }}</option>
                        @foreach($mapaoCoresLegenda ?? [] as $valor => $legenda)
                            <option value="{{ $valor }}" {{ request('mapa_orcamento_status_cor') === $valor ? 'selected' : '' }}>{{ $legenda }}</option>
                        @endforeach
                        <option value="_vazio" {{ request('mapa_orcamento_status_cor') === '_vazio' ? 'selected' : '' }}>{{ __('Sem situação cadastrada') }}</option>
                    </select>
                </div>
                @unless(!empty($mapaoApenasCadastroCompleto))
                    <div class="col-6 col-md-4 col-lg-2 col-xl-2">
                        <label class="form-label small" for="pp_mapa_f_status_registro">{{ __('Situação do cadastro') }}</label>
                        <select id="pp_mapa_f_status_registro" class="form-select form-select-sm" data-pp-mapa-filter data-pp-mapa-api-param="status_registro">
                            <option value="">{{ __('Todas') }}</option>
                            @foreach($statusRegistroFiltroOpcoes ?? [] as $valor => $rotulo)
                                <option value="{{ $valor }}" {{ request('mapa_status_registro') === $valor ? 'selected' : '' }}>{{ $rotulo }}</option>
                            @endforeach
                        </select>
                    </div>
                @endunless
                <div class="col-12 col-md-6 col-lg-4 col-xl-3">
                    <label class="form-label small" for="pp_mapa_f_bairro">{{ __('Bairro') }}</label>
                    <select id="pp_mapa_f_bairro" class="form-select form-select-sm" data-pp-mapa-filter data-pp-mapa-api-param="bairro">
                        <option value="">{{ __('Todos') }}</option>
                        @foreach($bairrosFiltroOpcoes ?? [] as $bNome)
                            <option value="{{ $bNome }}" {{ request('mapa_bairro') === $bNome ? 'selected' : '' }}>
                                {{ ($bNome === ($bairroTodosRotulo ?? '')) ? __('Todos os bairros') : $bNome }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="col-12 col-md-8 col-lg-4 col-xl-3 d-flex align-items-end gap-2 flex-wrap">
                    <button class="btn btn-success btn-sm" type="button" data-pp-mapa-apply-filters>
                        <i class="fa fa-filter me-1" aria-hidden="true"></i> {{ __('Filtrar') }}
                    </button>
                    <button class="btn btn-secondary btn-sm" type="button" data-pp-mapa-clear-filters>
                        {{ __('Limpar') }}
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div class="d-flex flex-wrap justify-content-between align-items-center gap-2 mb-2">
        <div class="small text-muted">
            <strong>{{ __('Projetos no mapa:') }}</strong>
            <span data-pp-mapa-total>0</span>
        </div>
        <div class="d-flex align-items-center gap-2 flex-wrap">
            <div class="small text-muted d-inline-flex align-items-center gap-2 me-1" aria-hidden="true">
                <span class="pp-mapa-legend-pin pp-mapa-legend-pin--bairro">
                    <i class="fa-solid fa-location-dot" aria-hidden="true"></i>
                </span>
                <span>{{ __('Projeto no bairro') }}</span>
                <span class="pp-mapa-legend-pin pp-mapa-legend-pin--municipio ms-2">
                    <i class="fa-solid fa-city" aria-hidden="true"></i>
                </span>
                <span>{{ __('Município inteiro') }}</span>
            </div>
            <button type="button" class="btn btn-outline-secondary btn-sm" data-pp-mapa-action="zoom-in"
                title="{{ __('Aproximar') }}" aria-label="{{ __('Aproximar') }}">
                <i class="fa-solid fa-plus" aria-hidden="true"></i>
            </button>
            <button type="button" class="btn btn-outline-secondary btn-sm" data-pp-mapa-action="zoom-out"
                title="{{ __('Afastar') }}" aria-label="{{ __('Afastar') }}">
                <i class="fa-solid fa-minus" aria-hidden="true"></i>
            </button>
            <button type="button" class="btn btn-outline-secondary btn-sm" data-pp-mapa-action="recenter"
                title="{{ __('Recentrar') }}" aria-label="{{ __('Recentrar') }}">
                <i class="fa-solid fa-location-crosshairs" aria-hidden="true"></i>
            </button>
            <button type="button" class="btn btn-outline-primary btn-sm" data-pp-mapa-action="fullscreen"
                title="{{ __('Tela cheia') }}" aria-label="{{ __('Tela cheia') }}">
                <i class="fa-solid fa-expand" aria-hidden="true"></i>
            </button>
        </div>
    </div>

    <div class="pp-mapa-canvas" data-pp-mapa-canvas role="application" aria-busy="false"></div>
    <div class="small text-muted mt-2 d-none" data-pp-mapa-empty>{{ __('Nenhum projeto com coordenadas para os filtros atuais.') }}</div>
</div>