@extends('layouts.front.app')
@section('css')
<link href="{{ asset('https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css') }}" rel="stylesheet" />
@endsection
@section('content')
<!-- Main content -->

<section>
  <div class="container">
    
    <nav>
      <ol class="breadcrumb grey lighten-3 mt-3">
        <li>
          <a href="{{ route('home') }}" class="fosco-text font-weight-bold"> <i class="fa fa-home"></i> Home</a>
          <i class="fas fa-angle-double-right mx-2"></i>
        </li>
        <li> 
          <a href="{{ route('accounts', ['tab' => 'profile']) }}" class="black-text font-weight-bolder">
            <i class="fas fa-user-check"></i> Minha Conta
          </a>
          <i class="fas fa-angle-double-right mx-2"></i>
        </li>
        <li class="active font-weight-bolder black-text"> 
          <i class="fa fa-map-marked-alt"></i> Cadastrar endereço
        </li>
      </ol>
    </nav>
    
  </div>
</section>

<section>
  <div class="container">
    
    <div class="card mb-4">
      
      <h5 class="card-header red darken-4 white-text text-center py-4 font-weight-bolder">Cadastrar Endereço</h5>
      
      <div class="card-body area-usuario cad-end p-4">
        
        <form action="{{ route('customer.address.store', $customer->id) }}" method="post" class="form" enctype="multipart/form-data">
          {{ csrf_field() }}
          
          <input type="hidden" name="status" value="1">
          <input type="hidden" name="carrinho" value="{{ $cartCount }}">
          
          <div class="input-group mb-3">
            <div class="input-group-prepend">
              <span class="input-group-text" id="inputGroup-sizing-sm">País</span>
            </div>
            <select name="country_id" id="country_id" class="browser-default custom-select">
              @foreach($countries as $country)
              <option @if(30 === $country->id) selected="selected" @endif value="{{ $country->id }}">{{ $country->name }}</option>
              @endforeach
            </select>
          </div>
          
          <div class="input-group mb-3">
            <div class="input-group-prepend">
              <span class="input-group-text" id="inputGroup-sizing-sm">Identificação</span>
            </div>
            <input type="text" name="alias" id="alias" placeholder="Nome de pessoa ou estabelecimento" class="form-control" value="{{ old('alias') }}" required>
          </div>
          
          <div class="input-group mb-3">
            <div class="input-group-prepend ">
              <span class="input-group-text" id="inputGroup-sizing-sm">Celular</span>
            </div>
            <input type="text" name="phone" id="phone" placeholder="(99) 9 9999-9999" class="form-control" value="{{ old('phone') }}" required>
          </div>
          
          <div class="input-group mb-3">
            <div class="input-group-prepend ">
              <span class="input-group-text" id="inputGroup-sizing-sm">CEP</span>
            </div>
            <input type="text" class="form-control"  name="zip" id="zip" placeholder="Digite o CEP ou clique na lupa ao lado para buscar">
            <div class="input-group-append">
              <span class="input-group-text">
                <a href="http://www.buscacep.correios.com.br/sistemas/buscacep/buscaCep.cfm" target="_blank" title="Buscar o CEP direto no site dos correios" data-toggle="tooltip">
                  <i class="fas fa-search-location"></i>
                </a>
              </span>
            </div>
          </div>
          
          <div class="input-group mb-3">
            <div class="input-group-prepend ">
              <span class="input-group-text" id="inputGroup-sizing-sm">Logradouro</span>
            </div>
            <input type="text" name="address_1" id="address_1" placeholder="Endereço será preenchido automaticamente pelo CEP" class="form-control text-left" value="{{ old('address_1') }}" required>
          </div>
          
          <div class="input-group mb-3">
            <div class="input-group-prepend ">
              <span class="input-group-text" id="inputGroup-sizing-sm">Número</span>
            </div>
            <input type="text" name="numero" id="numero" placeholder="Número" class="form-control" value="{{ old('numero') }}" required>
            <div class="input-group-append">
              <span class="input-group-text">Complemento</span>
            </div>
            <input type="text" name="complemento" id="complemento" placeholder="Complemento" class="form-control" value="{{ old('complemento') }}">
          </div>
          
          <div class="input-group mb-3">
            <div class="input-group-prepend ">
              <span class="input-group-text" id="inputGroup-sizing-sm">Bairro</span>
            </div>
            <input type="text" name="address_2" id="address_2" placeholder="Bairro" class="form-control" value="{{ old('address_2') }}" required>
          </div>
          
          <div class="input-group mb-3">
            <div class="input-group-prepend">
              <span class="input-group-text" id="inputGroup-sizing-sm">Cidade</span>
            </div>
            <select name="city" id="city" class="browser-default custom-select">
              <option>Aguarde...</option>
            </select>
            <input type="hidden" name="nome_municipio">
          </div>
          
          <div class="input-group mb-3">
            <div class="input-group-prepend">
              <span class="input-group-text" id="inputGroup-sizing-sm">Estado</span>
            </div>
            <select name="state_code" id="state_code" class="browser-default custom-select">
              <option>Aguarde...</option>
            </select>
          </div>
          
          <button class="btn box-green btn-block white-text my-4" type="submit" id="cadastrarEndereco">Cadastrar endereço</button>
          
        </form>
        
      </div>
    </div>
    
    <!--Modal: carregando-->
    <div class="modal fade top pt-5" id="modalCarregando" tabindex="-1" role="dialog" data-backdrop="false">
      <div class="modal-dialog modal-top modal-notify modal-info" role="document">
        <!--Content-->
        <div class="modal-content">
          <!--Body-->
          <div class="modal-body">
            <div class="row d-flex justify-content-center align-items-center">
              
              <p class="pt-3 pr-2 modal-text">
                Carregando o endereço...
                <div class="spinner-grow text-danger modal-text" role="status">
                  <span class="sr-only">Carregando o endereço...</span>
                </div>
              </p>
            </div>
          </div>
        </div>
        <!--/.Content-->
      </div>
    </div>
    <!-- ./ Modal carregando -->
    
    <!-- Central Modal Medium Danger -->
    <div class="modal fade pt-5" id="modalAlerta" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-notify modal-danger" role="document">
      <!--Content-->
      <div class="modal-content">
        <!--Header-->
        <div class="modal-header">
          <p class="heading lead">Atenção</p>
          
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true" class="white-text">&times;</span>
          </button>
        </div>
        
        <!--Body-->
        <div class="modal-body">
          <div class="text-center">
            <i class="fas fa-check fa-4x mb-3 animated rotateIn"></i>
            <p class="modal-text">Verifique se o CEP está preenchido corretamente</p>
            <p class="modal-text">O formato é: 99999-999</p>
            <p class="modal-text">Caso não saiba, <a href="http://www.buscacep.correios.com.br/sistemas/buscacep/buscaCep.cfm" target="_blank">busque aqui</a>  o seu endereço</p>
          </div>
        </div>
        
        <!--Footer-->
        <div class="modal-footer justify-content-center">
          <a type="button" class="btn btn-outline-danger waves-effect" data-dismiss="modal">Okay</a>
        </div>
      </div>
      <!--/.Content-->
    </div>
  </div>
  <!-- Central Modal Medium Danger-->
</div>
</section>
@endsection
@section('js')
<script src="{{ asset('https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js') }}"></script>
<script type="text/javascript">
  $( ".select2" ).select2({
    theme: "mbbootstrap"
  })
  
  function aplicaMascara() {
    let country_id = $('#country_id option:selected').val()
    if (country_id === '30') {
      $('#phone').mask('(99) 9 9999-9999')
      $('#zip').mask('99999-999')
    } else {
      $('#phone').unmask()
      $('#zip').unmask()
    }
  }
  
  aplicaMascara()
  
  $('#country_id').on('change', function() {
    aplicaMascara()
  })
  
  function carregaEstados (uf = null, cep = false) {
    $.ajax({
      url: '/api/estado/',
      contentType: 'json',
      success: function (resultado) {
        let _htmlOptions
        $(resultado).each(function(i,estado){
          _htmlOptions += "<option value='"+estado.uf+"'"
          if (uf === estado.uf) {
            _htmlOptions += ' selected="selected" '
          }
          _htmlOptions += ">"+estado.nome_uf+"</option>"
        });
        $('#state_code').append(_htmlOptions)
        $('.select2').select2()
        if(!cep) {
          carregaCidades (uf)
        }
      }
    })
  }
  
  function carregaCidades (uf = null, cod_cidade = null) {
    $('#city').empty()
    $('#city').append('<option>Aguarde...</option>')
    $.ajax({
      url: '/api/cidade/' + uf,
      contentType: 'json',
      success: function (resultado) {
        let _htmlOptions
        _htmlOptions = 'Aguarde ... '
        $(resultado).each(function(i,cidade){
          _htmlOptions += "<option value='"+cidade.cod_municipio_completo+"'"
          if (cod_cidade === cidade.cod_municipio_completo) {
            _htmlOptions += ' selected="selected" '
            $('input[name=nome_municipio]').val(cidade.nome_municipio)
          }
          _htmlOptions += ">"+cidade.nome_municipio+"</option>"
        });
        $('#city').append(_htmlOptions)
      }
    })
  }
  
  $(document).ready(function () {
    carregaEstados()
    $('#cadastrarEndereco').attr('disabled', true);
    $("#zip").on('blur', function(){
      let CEP = $(this).val()
      let country_id = $('#country_id option:selected').val()
      if(CEP.length < 9) {
        $('#modalAlerta').modal( 'show' )
        $('#cadastrarEndereco').attr('disabled', true)
        $('#zip').focus()
      } else {
        {{-- /* Só irá executar executar a busca por CEP se for morador do Brasil */--}}
        if (country_id === '30'){
          $('#modalCarregando').modal('show')
          $.ajax({
            url : '/api/cep/' + CEP,
            contentType: 'json',
            success: function (res) {
              if(!res.logradouro) {
                $('#modalCarregando').modal('hide')
                $('#modalAlerta').modal( 'show' )
                $('#cadastrarEndereco').attr('disabled', true)
              } else {
                $('#cadastrarEndereco').removeAttr('disabled')
                $('#address_1').val(res.logradouro)
                $('#address_2').val(res.bairro)
                $('#modalCarregando').modal('hide')
                $('.bairro').removeClass('col-md-12').addClass('col-md-6')
                carregaEstados(res.uf, true)
                carregaCidades(res.uf, res.ibge)
                $('#numero').focus()
              }
            }
          });
        } else {
          $('#cadastrarEndereco').removeAttr('disabled');
        }
        $('#estados').on('change', function(){
          let uf = $('#estados option:selected').val()
          carregaCidades(uf)
        })
      }
    })
    $('#address_1').on('blur', function(){
      $('#cadastrarEndereco').removeAttr('disabled')
    })
  })
</script>
@endsection