<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="utf-8">
  <title>Mapa de Migração de 18 para 30 horas</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css">
  <link rel="stylesheet" href="css/migracao.css">

  <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
</head>

<body>

<header class="topo">
  <div class="topo-logo">
    <img src="assets/logo-sergio.png" alt="Deputado Sergio Fernandes">
  </div>

  <div class="topo-texto">
    <h1>Mapa de Migração de 18 para 30 horas</h1>
    <p>Levantamento regional sobre carência e disciplinas na rede estadual de ensino.</p>
    <a href="https://www.instagram.com/sergiofernandesrio/" target="_blank" rel="noopener">
      Instagram do Deputado Sergio Fernandes
    </a>
  </div>

  <div class="topo-foto">
    <img src="assets/foto-sergio.png" alt="Deputado Sergio Fernandes">
  </div>
</header>

<main class="layout">
  <section class="mapa-card">
    <div class="mapa-header">
      <div>
        <h2>Estado do Rio de Janeiro</h2>
        <p>Clique no município para preencher a pesquisa.</p>
      </div>
      <button onclick="centralizarMapa()">Centralizar mapa</button>
    </div>

    <div id="map"></div>
  </section>
</main>

<div id="modalPesquisa" class="modal oculto">
  <div class="modal-card">
    <button class="modal-fechar" onclick="fecharModal()">×</button>

    <h2 id="modalMunicipio">Município</h2>
    <p id="modalRegional">Regional</p>

    <form id="formPesquisa" onsubmit="enviarPesquisa(event)">
      <input type="hidden" id="campoIbge">
      <input type="hidden" id="campoMunicipio">
      <input type="hidden" id="campoRegional">

      <label>
        <span class="label-titulo">Nome <span class="obrigatorio">*</span></span>
        <input id="nome" type="text" required placeholder="Digite seu nome">
      </label>

      <label>
        <span class="label-titulo">Telefone <span class="obrigatorio">*</span></span>
        <input
          id="telefone"
          type="tel"
          required
          inputmode="tel"
          autocomplete="tel"
          placeholder="Ex.: (21) 99999-9999"
        >
      </label>

      <label>
        <span class="label-titulo">Disciplina <span class="obrigatorio">*</span></span>
        <input id="disciplina" type="text" required placeholder="Ex.: Matemática, Português, História">
      </label>

      <label>
        Tem carência na cidade?
        <select id="carencia" required>
          <option value="">Selecione</option>
          <option value="Sim">Sim</option>
          <option value="Não">Não</option>
          <option value="Não sei informar">Não sei informar</option>
        </select>
      </label>

      <label>
        Faz tempo de GLP real?
        <select id="glpReal" required>
          <option value="">Selecione</option>
          <option value="Sim">Sim</option>
          <option value="Não">Não</option>
          <option value="Não sei informar">Não sei informar</option>
        </select>
      </label>

      <label>
        Observações
        <textarea id="observacoes" rows="3" placeholder="Opcional"></textarea>
      </label>

      <input id="site" class="campo-armadilha" type="text" autocomplete="off" tabindex="-1">

      <div class="termo-lgpd">
        <input
          id="aceiteLgpd"
          type="checkbox"
          required
          oninvalid="this.setCustomValidity('É necessário aceitar a Política de Privacidade para enviar as informações.')"
          onchange="this.setCustomValidity('')"
>
        <label for="aceiteLgpd">
          Declaro que li e concordo com o uso das informações fornecidas para fins de levantamento parlamentar sobre a migração de 18 para 30 horas, conforme a
          <a href="/privacidade.html" target="_blank" rel="noopener">Política de Privacidade</a>.
        </label>
      </div>

      <button id="botaoEnviar" class="botao-enviar" type="submit">
        <span class="botao-texto">Enviar informação</span>
        <span class="botao-spinner" aria-hidden="true"></span>
      </button>
      <p id="mensagemForm" class="mensagem-form"></p>
    </form>
  </div>
</div>

<script src="js/migracao.js"></script>

</body>
</html>