@extends('layouts.app')
@section('content')
 <!--conteúdo-->
 <section id="secao-contato" class="conteudo-internas centraliza">
     <h1 class="titulo-internas">Contato</h1>
     <div class="box-contato">
       <form class="formContato" id="contato" name="contato" {{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>
             <strong>Perguntas, sugestões e reclamações</strong> <br>
             Envie um e-mail e entraremos em contato
           </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>
                                 <option data-id="100112" value="AC">AC</option>
                                 <option data-id="100127" value="AL">AL</option>
                                 <option data-id="100113" value="AM">AM</option>
                                 <option data-id="100116" value="AP">AP</option>
                                 <option data-id="100129" value="BA">BA</option>
                                 <option data-id="100123" value="CE">CE</option>
                                 <option data-id="100153" value="DF">DF</option>
                                 <option data-id="100132" value="ES">ES</option>
                                 <option data-id="100152" value="GO">GO</option>
                                 <option data-id="100121" value="MA">MA</option>
                                 <option data-id="100131" value="MG">MG</option>
                                 <option data-id="100150" value="MS">MS</option>
                                 <option data-id="100151" value="MT">MT</option>
                                 <option data-id="100115" value="PA">PA</option>
                                 <option data-id="100125" value="PB">PB</option>
                                 <option data-id="100126" value="PE">PE</option>
                                 <option data-id="100122" value="PI">PI</option>
                                 <option data-id="100141" value="PR">PR</option>
                                 <option data-id="100133" value="RJ">RJ</option>
                                 <option data-id="100124" value="RN">RN</option>
                                 <option data-id="100111" value="RO">RO</option>
                                 <option data-id="100114" value="RR">RR</option>
                                 <option data-id="100143" value="RS">RS</option>
                                 <option data-id="100142" value="SC">SC</option>
                                 <option data-id="100128" value="SE">SE</option>
                                 <option data-id="100135" value="SP">SP</option>
                                 <option data-id="100117" value="TO">TO</option>
                             </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>
             </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="btn-enviar submit">Enviar</button>
           <!-- <span class="enviandoForm hidden">Enviando...</span> -->
         </fieldset>
       </form>
     </div>
   </section>
<!--fim conteúdo-->
@endsection
@push('scripts')
  <script src="{{ asset('assets/js/jquery.mask.min.js') }}"></script>
  <script type="text/javascript">
  var getMunicipios = function (event) {
    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>
@endpush