@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><!-- /.container-fluid -->
    </section>

    <!-- Main content -->
    <section class="content">
      <div class="container-fluid">
        <div class="row">
          <!-- left column -->   
          <div class="col-md-12" style="float:none;margin:auto;">
            <!-- general form elements -->
            <div class="card card-default">
              <div class="card-header">
                <h3 class="card-title">Editar</h3>
              </div>
              <form id="clienteForm"  action="{{ URL('clientes/update') }}" 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 }}" />
                <input type="hidden" name="id" id="id" value="{{$cliente->id }}" />
                <div class="card-body">
                  <div class="row">
                    <div class="col-12">
                      <div class="form-group">                       
                        <label for="name">Nome</label>
                        <input required type="text" class="form-control" name="name" id="name" placeholder="Nome" value="{{$cliente->name }}">
                      </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" value="{{$cliente->phone }}" onblur="checkWhatsapp(this)">
                      </div>     
                      <div class="form-group">
                        <label>Cartão SUS</label>
                        <input type="text" class="form-control" id="sus" name="sus" placeholder="Cartão SUS" value="{{$cliente->sus }}">
                      </div>     
                      <div class="form-group" style="display: none">                     
                        <label for="email">Email</label>
                        <input type="email" class="form-control" id="email" name="email" placeholder="Entre com email" value="{{$cliente->email }}">
                      </div>
                      <div class="form-group" style="display: none">
                        <label>CPF</label>
                        <input type="text" class="form-control" name="cpf" id="cpf" placeholder="CPF" onblur="checkCPF(this)" value="{{$cliente->cpf }}">
                      </div>    
                      <div class="form-group">
                        <label for="name">Data de Nascimento</label>
                        <input type="date" class="form-control" name="nascimento" id="nascimento" value="{{ $cliente->nascimento}}">
                      </div>
                      <div class="form-group">
                        <label for="name">Profissão</label>
                        <input  type="text" class="form-control" name="profissao" id="profissao" value="{{$cliente->profissao }}">
                      </div>            
                      <div class="form-group">
                        <label for="name">Titulo</label>
                        <input  type="text" class="form-control" name="titulo" id="titulo"  placeholder="Titulo"  value="{{$cliente->titulo }}">
                      </div>
                      <div class="form-group">
                        <label for="name">Zona</label>
                        <input  type="text" class="form-control" name="zona" id="zona"  placeholder="Zona"  value="{{$cliente->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"  value="{{$cliente->secao }}">
                      </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" value="{{$cliente->cep }}">
                          <button type="button" class="btn btn-success" onclick="getCep()">Buscar</button>
                        </div>
                      </div>
                      <div class="form-group">
                        <label for="name">Endereço</label>
                        <input  type="text" class="form-control" name="rua" id="rua" placeholder="Rua" value="{{$cliente->rua }}">
                      </div>
                      <div class="form-group">
                        <label  for="name">Número</label>
                        <input  type="text" class="form-control" name="numero" id="numero" placeholder="N° 100" value="{{$cliente->numero }}">
                      </div>
                      <div class="form-group">
                        <label>Complemento</label>
                        <input type="text" class="form-control" id="complemento" name="complemento" value="{{$cliente->complemento }}">
                      </div>
                      <div class="form-group">
                        <label  for="name">Bairro</label>
                        <input  type="text" class="form-control" name="bairro" id="bairro" placeholder="Bairro" value="{{$cliente->bairro }}">
                      </div>               
                      <div class="form-group">
                        <label for="name">Cidade</label>
                        <input  type="text" class="form-control" name="city" id="city" placeholder="Cidade"  value="{{$cliente->city }}">
                      </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 @if($zona->zona == $cliente->zona_regiao) selected @endif value="{{$zona->zona}}">{{$zona->zona}}</option>
                         @endforeach
                        </select>
                      </div>
                    </div>
                  </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('city').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) {
      });
    }

  </script>

@stop