@extends('masterpage.masterpage')
@section('content')
    <section class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h1>Liderança</h1>
          </div>
         
        </div>
      </div>
    </section>

    <section class="content">
      <div class="container-fluid">
        @if(Session::has('message'))
          <div class="alert alert-success alert-dismissible">
            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
            <h5><i class="icon fas fa-check"></i> Alerta!</h5>
            {{ Session::get('message')}}
          </div>
        @endif
        @if(Session::has('error'))
          <div class="alert alert-danger alert-dismissible">
            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
            <h5><i class="icon fas fa-ban"></i> Alert!</h5>
            {{ Session::get('error')}}
          </div>
        @endif
        <div class="row">
          <div class="col-md-12" style="float:none;margin:auto;">
            <div class="card card-default">
              <div class="card-header">
                <h3 class="card-title"><b><i>Cadastro</b></i></h3>
              </div>
              <form id="clienteForm"  action="{{ URL('usuarios/store') }}" method="post" role="form">
                <input type="hidden" name="_token" id="csrf-token" value="{{ Session::token() }}" />
                <div class="card-body">
                  @if(Session::has('message'))
                    <div class="alert alert-success alert-dismissible">
                      <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                      <h5><i class="icon fas fa-check"></i>{{ Session::get('message') }}</h5>
                    </div>
                  @endif
                  @if(Session::has('error'))
                    <div class="alert alert-danger alert-dismissible">
                      <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                      <h5><i class="icon fas fa-ban"></i>{{ Session::get('error') }}</h5>
                    </div>
                  @endif
                  <div class="form-group">
                    <label>Nome</label>
                    <input type="text" class="form-control" name="name" id="name" placeholder="Nome" autofocus required>
                  </div>
                  <div class="form-group">
                    <label>Whatsapp</label>
                    <input type="text" class="form-control" name="whatsapp" id="whatsapp" placeholder="Whatsapp" required  onblur="checkWhatsapp(this)">
                  </div> 
                  <div class="form-group">
                    <label for="email">E-mail</label>
                    <input type="email" class="form-control" id="email" name="email" placeholder="E-mail">
                  </div>
                  <div class="form-group">
                    <label>Cartão SUS</label>
                    <input type="text" class="form-control" name="sus" id="sus" placeholder="Cartão SUS">
                  </div>
                  <div class="form-group">
                    <label>Link Facebook</label>
                    <input type="text" class="form-control" name="facebook" id="facebook" placeholder="Facebook">
                  </div> 
                  <div class="form-group">
                    <label>Link Instagram</label>
                    <input type="text" class="form-control" name="instagram" id="instagram" placeholder="Instagram">
                  </div>         
                  <div class="form-group">
                    <label for="exampleInputPassword1">Senha</label>
                    <input type="password" class="form-control" id="password" name="password" placeholder="Senha" required>
                  </div>
                  <div class="form-group">
                    <label for="password">Confirmar senhas</label>
                    <input type="password" class="form-control" id="confirmPassword" onblur="checkPass(this)" placeholder="Confirme a Senha">
                  </div>
                  @if (Auth::user()->perfil == 1)
                    <div class="form-group">
                      <label>Perfil</label>
                      <select name="perfil" class="form-control">
                        <option value="1">Administrador</option>
                        <option value="2">Liderança</option>
                      </select>
                    </div>
                  @else
                    <select name="perfil" class="form-control" hidden>
                      <option value="2">Liderança</option>
                    </select>
                  @endif

                  <div class="form-group">
                    <label>Meta cadastros liderança</label>
                    <input type="number" min="0" value="0" class="form-control" id="meta_lideranca" name="meta_lideranca">
                  </div>

                  <div class="form-group">
                    <label>Meta cadastros eleitores</label>
                    <input type="number" min="0" value="0" class="form-control" id="meta_eleitores" name="meta_eleitores">
                  </div>

                  <div class="form-group">
                    <label>CEP</label>
                    <div class="input-group-prepend">
                      <input type="text" class="form-control" id="cep" name="cep" data-mask="00000-000">
                      <button type="button" class="btn btn-success" onclick="getCep()">Buscar</button>
                    </div>
                  </div>

                  <div class="form-group">
                    <label>Endereço</label>
                    <input type="text" class="form-control" id="endereco" name="endereco">
                  </div>

                  <div class="form-group">
                    <label>Número</label>
                    <input type="text" class="form-control" id="numero" name="numero">
                  </div>

                  <div class="form-group">
                    <label>Complemento</label>
                    <input type="text" class="form-control" id="complemento" name="complemento">
                  </div>

                  <div class="form-group">
                    <label>Bairro</label>
                    <input type="text" class="form-control" id="bairro" name="bairro">
                  </div>

                  <div class="form-group">
                    <label>Cidade</label>
                    <input type="text" class="form-control" id="cidade" name="cidade">
                  </div>

                </div>
                <div class="card-footer">
                  <button type="button" onclick="getPhone()" class="btn btn-primary">Salvar</button>
                  <a href="{{ url('usuarios') }}" class="btn btn-default">Voltar </a>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </section>
    <a href="#" id="sendWhatsapp" hidden target="_blank"></a>
@stop  

@section('scripts')

  <script src="https://cdn.jsdelivr.net/npm/cep-promise/dist/cep-promise.min.js"></script>

  <script>

    var configs = {!! json_encode($configs) !!}

    $(document).ready(function() {

      $("input[data-bootstrap-switch]").each(function(){
        $(this).bootstrapSwitch();
      });

      $("input[id*='cpf_cnpj']").inputmask({
        mask: ['999.999.999-99'],
        keepStatic: true
      });

      $("input[id*='cep']").inputmask({
        mask: ['99999-999'],
        keepStatic: true
      });

      $("input[id*='whatsapp']").inputmask({
        mask: ['(99) 99999-9999'],
        keepStatic: true
      });
    })
      
    async function getCep() {
      let cep = document.getElementById('cep').value.replace('-', '')
      this.cep(cep)
        .then(function (result) {
          document.getElementById('endereco').value = result.street
          document.getElementById('cidade').value = result.city
          document.getElementById('bairro').value = result.neighborhood
          document.getElementById('numero').focus()
        })
    }

    function checkPass(params) {
      if (params.value != document.getElementById('password').value) {
        document.getElementById('confirmPassword').value = ''
        Swal.fire({
          title: 'Atenção!',
          text: 'O campo senha e confirmar devem ser iguais.',
          icon: 'info',
          confirmButtonText: 'Entendi'
        })
      }
    }

    function checkWhatsapp(params) {
      var csrfToken = $('#csrf-token').val();
      var data = new FormData();
      data.append('whatsapp', params.value);      
      fetch('{{URL('usuarios/checkWhatsapp')}}', {
        method: 'post',
        body: data,
        headers: {
            "X-CSRF-Token": csrfToken
        },       
      }).then(function(response) {
        if(response.status == 200) {            
          return response.json();
        }
      }).then(function(json) {
        if (json != true) {
          Swal.fire({
            title: 'Atenção!',
            text: 'O Whatsapp ' + params.value + ' já está em uso.',
            icon: 'info',
            confirmButtonText: 'OK'
          })
          document.getElementById('whatsapp').value = ''
        }
      }).catch(function(error) {
      });
    }

    function formataTelefone(params) {
      for (let index = 0; index < params.length; index++) {
          params = params.replace('(', '');
          params = params.replace(')', '');
          params = params.replace(' ', '');
          params = params.replace('-', '');
      }
      return params;
    }

    function detectar_mobile() {
      var check = false;
      (function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))check = true})(navigator.userAgent||navigator.vendor||window.opera);
      return check;
    }

    function detectIphone() {  
      return new Promise((resolve, reject) => {     
        var uagent = navigator.userAgent.toLowerCase();
        if (uagent.search("iphone") > -1) {
          return resolve('true');
        } else {
          return resolve('false');
        }         
      })
    }

    async function getPhone() {
      
      let message = "*Olá,* " + document.getElementById('name').value + "!%0a"
      message += "*Agora você também é um líder!*%0a" 
      message += "Siga as instruções abaixo para acesso a maior plataforma de liderança do Brasil!%0a%0a" 
      message += "🏠 *Link de acesso:* " + "https://" + configs.subdominio + '.bizybox.com.br' + "%0a";
      message += "😍 *O login é seu telefone:* " + formataTelefone(document.getElementById('whatsapp').value) + "%0a";
      message += "✔️ *Senha:* " + document.getElementById('password').value + "%0a";

      if (await detectIphone() == "true") {
        document.getElementById('sendWhatsapp').href = "whatsapp://send?phone=55" +formataTelefone(document.getElementById('whatsapp').value) + "&text="+message;
        document.getElementById('sendWhatsapp').click();
      } else {
        if (detectar_mobile() == false) {
          document.getElementById('sendWhatsapp').href = "https://api.whatsapp.com/send?phone=55" +
          formataTelefone(document.getElementById('whatsapp').value) + "&text="+message;
          document.getElementById('sendWhatsapp').click();
        } else {
          document.getElementById('sendWhatsapp').href = "whatsapp://send?phone=55" +
          formataTelefone(document.getElementById('whatsapp').value) + "&text="+message;
          document.getElementById('sendWhatsapp').click();
        }
      }
      document.getElementById("clienteForm").submit();
    }
    
  </script>

@stop