@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')

<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> Editar endereço</li>
        </li>
      </ol>
    </nav>
    
  </div>
</section>

<section >
  <div class="container">
    
    <div class="card mb-5">
      
      <h5 class="card-header red darken-4 white-text text-center py-4 font-weight-bolder">Editar Endereço</h5>
      
      <div class="card-body area-usuario cad-end p-4">
        
        <form action="{{ route('customer.address.update', [$customer->id, $address->id]) }}" method="post" class="form" enctype="multipart/form-data">
          {{ csrf_field() }}
          <input type="hidden" name="status" value="1">
          <input type="hidden" name="_method" value="put">
          <input type="hidden" name="userId" value="{{ $customer->id }}">
          <input type="hidden" name="addressId" value="{{ $address->id }}">
          
          <!-- País -->
          <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($address->country_id == $country->id) selected="selected" @endif value="{{ $country->id }}">{{ $country->name }}</option>
              @endforeach
            </select>
          </div>
          
          {{--  Identificação  --}}
          <div class="input-group input-group-md 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 lugar" class="form-control" value="{{ old('alias') ?? $address->alias }}" required>
          </div>
          
          <!-- CElular -->
          <div class="input-group input-group-md 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') ?? $address->phone }}" aria-label="Dollar amount (with dot and two decimal places)">
          </div>
          
          <!-- CEP -->
          <div class="input-group input-group-md 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" aria-label="Dollar amount (with dot and two decimal places)" value="{{ old('zip') ?? $address->zip }}">
            <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>
          
          <!-- Logradouro -->
          <div class="input-group input-group-md 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="{{ $address->address_1 }}" class="form-control text-left" value="{{ old('address_1') ?? $address->address_1 }}" required aria-label="Dollar amount (with dot and two decimal places)" >
          </div>
          
          <!-- Número -->
          <div class="input-group input-group-md 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') ?? $address->numero }}" required aria-label="Dollar amount (with dot and two decimal places)">
            <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') ?? $address->complemento }}">
          </div>
          
          <!-- Bairro -->
          <div class="input-group input-group-md 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') ?? $address->address_2 }}">
          </div>
          
          <!-- Cidade -->
          <div class="input-group input-group-md 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>
          </div>
          
          <!-- UF -->
          <div class="input-group input-group-md 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 my-4" type="submit">Atualizar o endereço</button>
          
        </form>
        
      </div>
    </div>
    
    <!--Modal: carregando-->
    <div class="modal fade top" 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">
                Carregando o endereço...
                <div class="spinner-grow text-danger" role="status">
                  <span class="sr-only">Atualizando o endereço...</span>
                </div>
              </p>
            </div>
          </div>
        </div>
        <!--/.Content-->
      </div>
    </div>
    <!-- ./ Modal carregando -->
  </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) {
    $.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" '
          }
          _htmlOptions += ">"+cidade.nome_municipio+"</option>"
        });
        $('#city').append(_htmlOptions)
      }
    })
  }
  
  function buscaCep(cep)
  {
    $('#modalCarregando').modal('show')
    let CEP = cep
    let country_id = $('#country_id option:selected').val()
    {{-- /* Só irá executar executar a busca por CEP se for morador do Brasil */--}}
    if (country_id === '30' && cep !== ''){
      $.ajax({
        url : '/api/cep/' + CEP,
        contentType: 'json',
        success: function (res) {
          $('#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()
        }
      });
    }
  }
  $(document).ready(function () {
    carregaEstados()
    let cep = $('#zip').val()
    buscaCep(cep)
    $("#zip").on('blur', function(){
      buscaCep($(this).val());
    })
    $('#estados').on('change', function(){
      let uf = $('#estados option:selected').val()
      carregaCidades(uf)
    })
  })
</script>
@endsection