@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">
          <h1>
            <svg class="svg-calendario-dims">
              <use xlink:href="sprite-svg/sprite.svg#calendario"></use>
            </svg>
            Contato
          </h1>
        </div>

        <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 $estado)
                    <option value="{{$estado['sigla']}}">{{$estado['nome']}}</option>
                  @endforeach
                </select>
              </div>

              <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>
                </span>
              </div>

              <div class="form-group">
                <label for="nome">Nome<strong class="lead text-danger">*</strong>:</label>
                <input type="text" class="form-control" name="nome" placeholder="Seu nome:" required="">
              </div>

              <div class="form-group">
                <label for="orgaoEmpresa">Órgão ou Empresa<strong class="lead text-danger">*</strong>:</label>
                <input type="text" class="form-control" name="entidade" placeholder="Informe o nome do órgão ou empresa" required="">
              </div>

              <div class="form-group">
                <label for="cargo">Cargo:</label>
                <input type="text" class="form-control" name="cargo" placeholder="Informe seu cargo">
              </div>

              <div class="form-group">
                <label for="email">E-mail<strong class="lead text-danger">*</strong>:</label>
                <input type="email" class="form-control" name="email" placeholder="Informe seu e-mail" required="">
              </div>

              <div class="form-group">
                <label for="ddd">Telefone:</label>
                <div class="englobaTel">
                  <input type="text" class="form-control" name="telefone" placeholder="(00) 00000-0000" maxlength="15">
                </div>
              </div>

              <div class="form-group" style="align-items: flex-start;">
                <label for="mensagem">Mensagem<strong class="lead text-danger">*</strong>:</label>
                <textarea name="mensagem" class="form-control" placeholder="Digite sua Mensagem" required=""></textarea>
              </div>

              <button class="submit">Enviar</button>
            </fieldset>
            </form>

          <div class="box_info_lateral">
            <h1>Encontre-nos</h1>
            <!-- Google Maps iframe e contatos -->
          </div>
        </article>
      </div>
    </div>
  </div>
</section>
@endsection

@section('scripts')
  <script src="{{ asset('assets/js/jquery.mask.min.js') }}"></script>
  <script type="text/javascript">
  var getMunicipios = function (event) {
    var estado_id = $("#estado").val();
    if(!estado_id) return false;

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

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