<?php
/**
 * Template Name: Mapa de Obras
 *
 * Página própria do mapa (escopo jul/2026): pins coloridos pelos 5 status,
 * filtros combinados status + região + área com "limpar filtros", popup com
 * resumo/investimento/previsão + botão pra ficha e o card da obra
 * selecionada abaixo do mapa (padrão do wireframe). Os dados dos pins vão
 * inline via functions.php (window.mfmMapa); a lógica fica em paginas.js.
 * Aceita ?status=…&regiao=…&eixo=… pra chegar com filtro aplicado.
 */

get_header();

$mfm_eixos   = mfm_eixos_fixos();
?>

<main id="conteudo" class="mfm-pagina mfm-pagina-mapa">
	<div class="mfm-container">
		<?php get_template_part( 'template-parts/breadcrumb', null, array( 'itens' => array( array( 'rotulo' => 'Mapa de Obras' ) ) ) ); ?>

		<header class="mfm-pagina-cabecalho">
			<h1 class="mfm-pagina-cabecalho__titulo">
				<span class="mfm-chave" aria-hidden="true">{</span>
				<?php the_title(); ?>
				<span class="mfm-chave" aria-hidden="true">}</span>
			</h1>
			<p class="mfm-pagina-cabecalho__contagem" id="mfm-mapa-contagem" aria-live="polite"></p>
		</header>

		<form class="mfm-filtros mfm-filtros--mapa" aria-label="Filtros do mapa de obras">
			<label class="mfm-filtro">
				<span>Status</span>
				<select id="mfm-filtro-status">
					<option value="">Todos os status</option>
					<?php foreach ( mfm_status_rotulos() as $mfm_valor => $mfm_rotulo ) : ?>
						<option value="<?php echo esc_attr( $mfm_valor ); ?>"><?php echo esc_html( $mfm_rotulo ); ?></option>
					<?php endforeach; ?>
				</select>
			</label>

			<label class="mfm-filtro">
				<span>Bairro</span>
				<select id="mfm-filtro-bairro">
					<option value="">Todos os bairros</option>
					<?php foreach ( mfm_bairros_por_regiao() as $mfm_zona_nome => $mfm_bairros ) : ?>
						<optgroup label="<?php echo esc_attr( 'Região ' . $mfm_zona_nome ); ?>">
							<?php foreach ( $mfm_bairros as $mfm_bairro ) : ?>
								<option value="<?php echo esc_attr( $mfm_bairro->slug ); ?>"><?php echo esc_html( $mfm_bairro->name ); ?></option>
							<?php endforeach; ?>
						</optgroup>
					<?php endforeach; ?>
				</select>
			</label>

			<label class="mfm-filtro">
				<span>Área</span>
				<select id="mfm-filtro-eixo">
					<option value="">Todas as áreas</option>
					<?php foreach ( $mfm_eixos as $mfm_eixo ) : ?>
						<option value="<?php echo esc_attr( sanitize_title( $mfm_eixo ) ); ?>"><?php echo esc_html( $mfm_eixo ); ?></option>
					<?php endforeach; ?>
				</select>
			</label>

			<div class="mfm-filtros__acoes">
				<button class="mfm-filtros__limpar-botao" id="mfm-filtro-limpar" type="button">Limpar filtros</button>
			</div>
		</form>

		<div class="mfm-pagina-mapa__caixa" id="mfm-mapa-pagina" aria-label="Mapa das obras de Maringá"></div>

		<ul class="mfm-mapa-legenda" aria-label="Legenda das cores dos pins">
			<?php foreach ( mfm_status_rotulos() as $mfm_valor => $mfm_rotulo ) : ?>
				<li>
					<span class="mfm-legenda__ponto mfm-cor-<?php echo esc_attr( $mfm_valor ); ?>" aria-hidden="true"></span>
					<?php echo esc_html( $mfm_rotulo ); ?>
				</li>
			<?php endforeach; ?>
		</ul>

		<!-- Card da obra selecionada no mapa (paginas.js preenche ao clicar num pin) -->
		<div class="mfm-pagina-mapa__selecionada" id="mfm-obra-selecionada" aria-live="polite"></div>
	</div>
</main>

<?php
get_footer();
