@extends('layouts.app')
@section('content')
 <!--conteúdo-->
<section id="contato">
  <div class="container">
    <div class="row">
      <div class="col">
        <div style="margin-top: 30px;" class="box_titulo_padrao"><!--Titulo Padrão-->
          <h1>
            <svg class="svg-calendario-dims">
              <use xlink:href="sprite-svg/sprite.svg#calendario"></use>
            </svg>
            Contato
          </h1>
        </div><!--Titulo Padrão-->

        <article class="box-contato">
              <form class="formContato" id="contato" name="contato" action="{{url('contato')}}" method="POST">
              {{ csrf_field() }}

             @if (session('success'))
                <div class="alert alert-success">
                  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                  <strong>{{ session('success') }}</strong>
                </div>
            @endif

            @if (session('error'))
              <div class="alert alert-danger">
                <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <strong>{{ session('error') }}</strong>
              </div>
            @endif

            <fieldset>
              <legend>
                <p><strong>Perguntas, sugestões e reclamações</strong> <br>
                Envie um e-mail e entraremos em contato</p>
              </legend>

              <div class="form-group">
                <label for="uf">UF<strong class="lead text-danger">*</strong>:</label>
                <select name="sigla_uf" id="estado" required="" placeholder="UF" class="form-control">
                  <option value="">Escolha o Estado</option>
                  @foreach ($estados as $key => $estado)
                    <option data-id="{{$estado->id}}" value="{{$estado->uf}}">{{$estado->uf}}</option>
                  @endforeach
                </select>
              </div>

              <!-- final div form-group -->
              <div class="form-group">
                <label for="municipio">Município<strong class="lead text-danger">*</strong>: </label>
                <span id="exibe_cidade">
                  <select name="municipio" id="cidade" required="" placeholder="Município" class="form-control">
                    <option value="">Selecione o município</option>
                  </select>
                  <input type="hidden" name="municipio_id" id="municipio_id">
                </span>
              </div>

              <!-- final div form-group -->
              <div class="form-group">
                <label for="nome">Nome<strong class="lead text-danger">*</strong>:</label>
                <input type="text" class="form-control" id="txtNome" name="nome" placeholder="Seu nome:" required="" value="">
              </div>
              <!-- final div form-group -->
              <div class="form-group">
                <label for="orgaoEmpresa">Órgão ou Empresa<strong class="lead text-danger">*</strong>:</label>
                <input type="text" class="form-control" id="txtEntidade" name="entidade" placeholder="Informe o nome do órgão ou empresa" required="" value="">
              </div>
              <!-- final div form-group -->
              <div class="form-group">
                <label for="cargo">Cargo:</label>
                <input type="text" class="form-control" id="txtCargo" name="cargo" placeholder="Informe seu cargo" value="">
              </div>
              <!-- final div form-group -->
              <div class="form-group">
                <label for="email">E-mail<strong class="lead text-danger">*</strong>:</label>
                <input type="email" class="form-control" id="txtEmail" name="email" placeholder="Informe seu e-mail" required="" value="">
              </div>
              <!-- final div form-group -->
              <div class="form-group">
                <label for="ddd">Telefone:</label>
                <div class="englobaTel">
                  <input type="text" class="form-control" id="txtFone" name="telefone" placeholder="(00) 00000-0000" value="" maxlength="15">
                </div>
              </div>
              <!-- final div form-group -->
              <div class="form-group" style="align-items: flex-start;">
                <label for="mensagem">Mensagem<strong class="lead text-danger">*</strong>:</label>
                <textarea name="mensagem" id="txtMsg" class="form-control" placeholder="Digite sua Mensagem" required=""></textarea>
              </div>
              <!-- final div form-group -->
              <!-- <span class="text-danger">As infromações que estão marcadas com o "*" são obrigatorias</span> -->
              <button class="submit">Enviar</button>
              <!-- <span class="enviandoForm hidden">Enviando...</span> -->
            </fieldset>
            </form>
          <!-- <figure class="ilustracaoInternas">
            <img src="assets/img/ilustracao-internas.png" alt="" class="img-fluid">
          </figure> -->
          <div class="box_info_lateral">
            <h1>Encontre-nos</h1>
            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3839.3514861629583!2d-47.87385268558623!3d-15.785409989056838!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x951978586ffb9065%3A0xd46f6b05cc5bc2d5!2sConfedera%C3%A7%C3%A3o+Nacional+de+Munic%C3%ADpios!5e0!3m2!1spt-BR!2sbr!4v1536085025718" width="100%" height="300" frameborder="0" style="border:0" allowfullscreen></iframe>
            <div class="texto">
              <ul>
                <li><a href="#"><svg class="svg-telefone-dims">
                  <use xlink:href="sprite-svg/sprite.svg#telefone"></use>
                </svg>(61) 2101-6000</a></li>
                <li><a href="#"><svg class="svg-email-dims">
                  <use xlink:href="sprite-svg/sprite.svg#email"></use>
                </svg>atendimento@cnm.org.br</a></li>
                <li><a href="#"> <svg class="svg-pin-dims">
                    <use xlink:href="sprite-svg/sprite.svg#pin_2"></use>
                  </svg>SGAN Quadra 601 Módulo N <br> Brasília/DF | CEP: 70.830-010</a></li>
              </ul>
            </div>
          </div>
        </article>


      </div>
    </div>
  </div>
</section>
<!--fim conteúdo-->
@endsection
@section('scripts')
  <script src="{{ asset('assets/js/jquery.mask.min.js') }}"></script>
  <script type="text/javascript">
  var getMunicipios = function (event) {
    console.log('ahuahua')
    var estado_id = $( "#estado option:selected" ).data('id');

    if(!estado_id || estado_id == undefined) return false;

    $.ajax({
      type: "GET",
      url: "contato/"+estado_id+"/municipios",
      dataType: 'json',
    })
    .done(function(data) {
        var option;
        $('#cidade').html('<option value="">Selecione o município</option>')
        for(d in data) {
          option = '<option data-id="'+data[d].id+'" value="'+data[d].nome+'">'+data[d].nome+'</option>'
          $('#cidade').append(option)
        }
    })
    .fail(function() {
      alert('Falha ao localizar os municípios')
    })
  }

  $("#estado").change(getMunicipios);

  $("#cidade").change(function(event){
    var option = $(event.target).find(":selected")
    $('#municipio_id').val(option.data('id'))
  });

  $(document).ready(function(){
    $('#txtFone').mask('(00) 00000-0000');
    getMunicipios();
  });
</script>
@endsection