@extends('masterpage.masterpage')
@section('content')
  <section class="content-header">
    <div class="container-fluid">
      <div class="row mb-2">
        <div class="col-sm-6">
          <h1>Eleitor</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>
          {{ 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>
          {{ 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('clientes/store') }}" method="post" role="form">
              <input type="hidden" name="_token" id="csrf-token" value="{{ Session::token() }}" />
              <input type="hidden" name="user_id" id="user_id" value="{{Auth::user()->id }}" />
              <div class="card-body">
                <div class="form-group">                       
                  <label for="name">Nome</label>
                  <input required type="text" class="form-control" name="name" id="name" placeholder="Nome">
                </div>           
                <div class="form-group">
                  <label>Whatsapp</label>
                  <input  type="text" class="form-control" id="phone" name="phone" data-inputmask='"mask": "(99) 99999-9999"' 
                    data-mask placeholder="Whatsapp" onblur="checkWhatsapp(this)">
                </div>
                <div class="form-group" style="display: none">                     
                  <label for="email">E-mail</label>
                  <input type="email" class="form-control" id="email" name="email" onblur="checkEmail(this)">
                </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 for="name">Data de Nascimento</label>
                  <input  type="date" class="form-control" name="nascimento" id="nascimento">
                </div>    
                <div class="form-group">
                  <label for="name">Profissão</label>
                  <input  type="text" class="form-control" name="profissao" id="profissao">
                </div>
                <div class="form-group">
                  <label for="name">Titulo</label>
                  <input  type="text" class="form-control" name="titulo" id="titulo"  placeholder="Titulo">
                </div>
                <div class="form-group">
                  <label for="name">Zona</label>
                  <input  type="text" class="form-control" name="zona" id="zona"  placeholder="Zona">
                </div>
                <div class="form-group">
                  <label for="name">Seção</label>
                  <input  type="text" class="form-control" name="secao" id="secao"  placeholder="Seção">
                </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="rua" name="rua">
                </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 class="form-group">
                  <label>Região</label>
                  <select name="zona_regiao" id="zona_regiao" class="form-control">
                    <option value=""></option>
                    @foreach ($zonas as $zona )
                      <option value="{{$zona->zona}}">{{$zona->zona}}</option>
                    @endforeach
                  </select>
                </div>
              </div>
              <div class="card-footer">
                <button type="submit" class="btn btn-primary">Salvar</button>
                <a href="{{ url('clientes') }}" class="btn btn-default">Voltar </a>
              </div>
            </form>
          </div>           
        </div>
      </div>
    </div>
  </section>
@stop  

@section('scripts')

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

  <script>

    $(document).ready(function() {
      $('[data-mask]').inputmask()      
    });

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

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

    async function getCep() {
      let cep = document.getElementById('cep').value.replace('-', '')
      this.cep(cep)
        .then(function (result) {
          document.getElementById('rua').value = result.street
          document.getElementById('cidade').value = result.city
          document.getElementById('bairro').value = result.neighborhood
          document.getElementById('numero').focus()
        })
    }

    
    function checkWhatsapp(params) {
      var csrfToken = $('#csrf-token').val();
      var data = new FormData();
      data.append('whatsapp', params.value);      
      fetch('{{URL('clientes/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('phone').value = ''
        }
      }).catch(function(error) {
      });
    }

    function checkEmail(email) {
      $.ajax({
        url: '{{ URL('clientes/checkEmail') }}',
        type: 'POST',
        data: {
          "_token": "{{ csrf_token() }}",
          'email': email.value
        },
        dataType: 'JSON',
        success: function(response) {
          if (response == true) {
            document.getElementById('email').value = ''
            Swal.fire({
              title: 'Atenção!',
              text: 'E-mail já cadastrado.',
              icon: 'info',
              confirmButtonText: 'Entendi'
            })
          }
        }
      });
    }

    function checkCPF(cpf) {
      $.ajax({
        url: '{{ URL('clientes/checkCPF') }}',
        type: 'POST',
        data: {
          "_token": "{{ csrf_token() }}",
          'cpf': cpf.value
        },
        dataType: 'JSON',
        success: function(response) {
          if (response == true) {
            document.getElementById('cpf').value = ''
            Swal.fire({
              title: 'Atenção!',
              text: 'CPF já cadastrado.',
              icon: 'info',
              confirmButtonText: 'Entendi'
            })
          }
        }
      });
    }

  </script>

@stop