<?php $__env->startSection('content'); ?>

<?php echo $__env->make('perfil/menu-lateral', ['configMenuLateral' => $configMenuLateral], array_except(get_defined_vars(), array('__data', '__path')))->render(); ?>

<div class="minha-conta__right">
    <div class="box">
          <h2 class="title">Meus Endereços</h2>
          <span>Obs: você não pode excluir o endereço principal.</span>
          <div class="enderecos-list">
               <?php if(count($cadastro->enderecos)){ ?>
                    <?php foreach ($cadastro->enderecos as $endereco): ?>
                         <div class="endereco-item" data-endereco="<?php echo $endereco->id; ?>">
                              <h3 class="endereco-item__title"><?php echo $endereco->nome; ?></h3>
                              <div class="flex-container">
                                   <div class="informacoes">
                                        <span><?php echo $endereco->logradouro; ?>, <?php echo $endereco->numero; ?><?php echo ($endereco->complemento) ? ', '.$endereco->complemento : ''; ?>, B. <?php echo $endereco->bairro; ?>,
                                             CEP <?php echo $endereco->cep; ?>, <?php echo $endereco->cidade ? $endereco->cidade->nome : ''; ?> - <?php echo $endereco->estado ? $endereco->estado->sigla : ''; ?>
                                        </span>
                                   </div>
                                   <div class="acao">
                                        <button class="btn-green definirPrincipal <?php echo $endereco->principal ? 'disable' : ''; ?>" <?php echo $endereco->principal ? 'disabled' : ''; ?>><i class="fa fa-check fa-fw"></i><?php echo $endereco->principal ? 'Principal' : 'Definir como principal'; ?></button>

                                        
                                        <button class="btn-red removerEndereco <?php echo $endereco->principal ? 'disable' : ''; ?>" <?php echo $endereco->principal ? 'disabled' : ''; ?>><i class="fa fa-times fa-fw"></i>Excluir</button>
                                        
                                   </div>
                              </div>
                         </div>
                    <?php endforeach ?>
               <?php }else{ ?>
                    <h4><i> Você não possui nenhum endereço adicionado.</i></h4>
               <?php } ?>
          </div>
          <button type="button" id="adicionar-endereco" class="minha-conta__button-orange">Adicionar novo Endereço</button>
          <div class="adicionar-endereco">
               <form id="form-novo-endereco" method="POST" action="<?php echo url('perfil/salvar-endereco'); ?>">
                    <div class="flex-between">
                         <div class="item-half">
                              <div class="form-group">
                                   <label>Nome local</label>
                                   <input type="text" tabindex="1" required name="nome" id="nome" class="default-input" placeholder=" Ex: Residência, Trabalho, Apartamento...">
                              </div>

                              <div class="form-group">
                                   <label>Rua</label>
                                   <input type="text" tabindex="3" required name="logradouro" id="logradouro" class="default-input" placeholder="Ex: Rua Exemplo">
                              </div>
                              <div class="form-group">
                                   <label>Complemento</label>
                                   <input type="text" tabindex="6" name="complemento" id="complemento" class="default-input" placeholder="Ex: Próximo ao shopping">
                              </div>
                              <div class="form-group">
                                   <label>Telefone Principal</label>
                                   <input type="text" tabindex="8" required name="telefone" id="telefone" class="default-input" placeholder="Ex: (99) 99999-9999">
                              </div>
                         </div>
                         <div class="item-half">
                              <div class="form-group">
                                   <label>CEP</label>
                                   <input placeholder="Ex: 000000-000" type="text" tabindex="2" required name="cep" id="cep" class="default-input">
                              </div>
                              <div class="flex-between">
                                   <div class="item-half">
                                        <label>Número</label>
                                        <input placeholder="Ex: 999" type="number" tabindex="4" required name="numero" id="numero" class="default-input">
                                   </div>
                                   <div class="item-half">
                                        <label>Bairro</label>
                                        <input type="text" placeholder="Ex: Bairro Exemplo"  tabindex="5" required name="bairro" id="bairro" class="default-input">
                                   </div>
                              </div>
                              <div class="form-group hidden">
                                   <label>País</label>
                                   <select name="pais_id" id="pais" required tabindex="7" class="default-select select2">
                                        <option value="1">Brasil</option>
                                        <?php /* foreach ($listaPaises as $pais): ?>
                                             <option value="<?php echo $pais->id; ?>"><?php echo $pais->nome; ?></option>
                                        <?php endforeach */ ?>
                                   </select>
                              </div>
                              <div class="flex-between">
                                   <div class="item-half">
                                        <label>Estado</label>
                                        <select name="estado_id" required tabindex="9" id="estado" class="default-select select2">
                                             <option value=""></option>
                                        </select>
                                   </div>
                                   <div class="item-half">
                                        <label>Cidade</label>
                                        <select name="cidade_id" required tabindex="10" id="cidade" class="default-select select2">
                                             <option value=""></option>
                                        </select>
                                   </div>
                              </div>
                              <div class="form-group" style="height: 95px;"></div>
                         </div>
                    </div>
                    <div class="flex-between">
                         <div class="item">
                              <button type="submit" class="minha-conta__button-blue" id="salvar-endereco">Salvar endereço</button>
                         </div>
                    </div>
               </form>
               
          </div>
     </div>
</div>
<script>
     $(document).ready(function(){

          $(document).on('click', '.definirPrincipal', function(){
               var button = $(this);
               var enderecoItem = $(this).closest('.endereco-item');
               $.ajax({
                    headers: {
                         'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    url:'/perfil/definir-endereco-principal',
                    type:'POST',
                    data:{
                         id: enderecoItem.data('endereco')
                    },
                    beforeSend:function(){
                         //$('.carregando').fadeIn();
                    },
                    success:function(data){
                         if(data.status){
                              //cartaoItem.remove();
                              $('.definirPrincipal.disable').html('<i class="fa fa-fw fa-check"></i> Definir como principal');
                              $('.definirPrincipal.disable').prop('disabled', false);
                              $('.definirPrincipal.disable').removeClass('disable');
                              
                              $('.removerEndereco.disable').prop('disabled', false);
                              $('.removerEndereco.disable').removeClass('disable');
                              

                              button.addClass('disable');
                              button.html('<i class="fa fa-fw fa-check"></i> Principal');
                              button.closest('.acao').find('.removerEndereco').addClass('disable');
                              button.closest('.acao').find('.removerEndereco').prop("disabled",true);
                              
                         }else{
                              alertUtil.alertError(data.message);
                         }
                         //$('.carregando').fadeOut();
                    }
               });
          });

          $(document).on('click', '.removerEndereco', function(e){
                    $button = $(this);

                    swal({
                         className: "alert-confirm",
                         /*title: "Are you sure?",*/
                         text: "Tem certeza de que deseja excluir este registro?",
                         /*icon: "warning",*/
                         buttons: {
                           cancel: {
                             text: "Não",
                             value: null,
                             visible: true,
                             className: "btn-action",
                             closeModal: true,
                           },
                           confirm: {
                             text: "Sim",
                             value: true,
                             visible: true,
                             className: "btn-save",
                             closeModal: true
                           }
                         },
                         /*dangerMode: true,*/
                    })
                    .then((willDelete) => {
                      if (willDelete) {
                        enderecoItem = $(this).closest('.endereco-item');
                         $.ajax({
                              headers: {
                                 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                             },
                              url:'/perfil/excluir-endereco',
                              type:'POST',
                              data:{
                                   id: enderecoItem.data('endereco')
                              },
                              beforeSend:function(){
                                   $('.carregando').fadeIn();
                              },
                              success:function(data){
                                   if(data.status){
                                        alertUtil.alertSuccess(data.message);
                                        enderecoItem.remove();
                                   }else{
                                        alertUtil.alertError(data.message);
                                   }
                                   $('.carregando').fadeOut();
                              }
                         });
                      }
                    });

                              
                         


                    
                    
               });


          $(document).on('click','#adicionar-endereco',function(e){
               e.preventDefault();
               if($('.adicionar-endereco').is(':visible')){
                    $('.adicionar-endereco').slideUp();
               }else{
                    $('.adicionar-endereco').slideDown();
               }
               
          });

          $(document).on('submit','#card',function(e){
               e.preventDefault();
               $.ajax({
                    url:'/perfil/salvar-cartao',
                    type:'POST',
                    data:$(this).serialize(),
                    beforeSend:function(){
                         $('.carregando').fadeIn();
                    },
                    success:function(data){
                         if(data.status){
                              alertUtil.alertSuccess(data.message);
                              if($('.cartoes-list .cartao-item').length == 0){
                                   $('.cartoes-list').html(data.html);
                              }else{
                                   $('.cartoes-list').append(data.html);
                              }
                              $('.pagamento').slideUp();
                         }else{
                              alertUtil.alertError(data.message);
                         }
                         $('.carregando').fadeOut();
                    }
               });
          });

          $(document).on('submit','#form-novo-endereco',function(e){
               e.preventDefault();
               $.ajax({
                    url:$(this).attr('action'),
                    type:$(this).attr('method'),
                    data:$(this).serialize(),
                    beforeSend:function(){
                         $('.carregando').fadeIn();
                    },
                    success:function(data){
                         if(data.status){
                              alertUtil.alertSuccess(data.message);
                              if($('.enderecos-list .endereco-item').length == 0){
                                   $('.enderecos-list').html(data.html);
                              }else{
                                   $('.enderecos-list').append(data.html);
                              }
                              $('.adicionar-endereco').slideUp();
                              $('#nome').val('');
                              $('#cep').val('');
                              $('#logradouro').val('');
                              $('#numero').val('');
                              $('#bairro').val('');
                              $('#complemento').val('');
                              $('#pais').val('');
                              $('#telefone').val('');
                              $('#estado').val('');
                              $('#cidade').val('');
                         }else{
                              alertUtil.alertError(data.message);
                         }
                         $('.carregando').fadeOut();
                    }
               });
          });


          $('.select2').select2();

          $('#pais').change(function(){
               setCidade($(this).val(), null, null);
          });

          $('#estado').change(function(){
               setCidade(null, $(this).val(), null);
          });

          $('#cep').mask('99999-999');

          $('#cep').blur(function(){
               var cep = $(this).val().replace('-', '').replace('.', '');
               var verify = $.trim(cep);

               if(verify){
                    $.ajax({
                         url: "/admin/getcep",
                         dataType: 'json',
                         type: 'POST',
                         data: {
                              'cep': verify,
                              '_token': $('[name="_token"]').val()
                         },
                         success: function(resultadoCEP) {
                              if (resultadoCEP.status) {
                                   $('#bairro').val(unescape(resultadoCEP.bairro));
                                   $('#logradouro').val(unescape(resultadoCEP.logradouro));
                                   $('#complemento').val(unescape(resultadoCEP.complemento));

                                   atualizarCidadesEstado(resultadoCEP.uf, resultadoCEP.cidade);

                                   $('#numero').focus();
                              }
                         },
                         error: function(xhr, ajaxOptions, thrownError) {
                              //alertUtil.alertError(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
                         }
                    });

               }else{
                    alertUtil.alertWarning('Você deve preencher o campo CEP.');
               }


          });

          function inputHandler(masks, max, event) {
               var c = event.target;
               var v = c.value.replace(/\D/g, '');
               var m = c.value.length > max ? 1 : 0;
               VMasker(c).unMask();
               VMasker(c).maskPattern(masks[m]);
               c.value = VMasker.toPattern(v, masks[m]);
          }

          function inputMaskNumber(masks, max, event) {
            var c = event.target;
            var v = c.value.replace(/\D/g, '');
            var m = c.value.length > max ? 1 : 0;
            VMasker(c).unMask();
            VMasker(c).maskPattern(masks[m]);
            c.value = VMasker.toPattern(v, masks[m]);
          }
             
          if($('[name="telefone"]').length){
            var telMask = ['(99) 9999-9999', '(99) 99999-9999'];
            var tel = document.querySelector('[name="telefone"]');
            VMasker(tel).maskPattern(telMask[0]);
            tel.addEventListener('input', inputMaskNumber.bind(undefined, telMask, 14), false);
            // telefone: $telefone.replace(/[^0-9]/g, '')
          }

     });

     var flag = true;
     function setCidade(pais_id = null, estado_id = null, cidade_id = null){
          if(flag){
               flag = false;
               if(!pais_id){
                    pais_id = $('#pais').val();
               }else{
                    $('#pais').val(pais_id);
               }
               $.ajax({
                    url:'/estado/buscar-estados-pais',
                    type:'POST',
                    data:{
                         pais_id: pais_id
                    },
                    success:function(data){
                         $('[name="estado_id"]').html('');
                         $.each(data, function(key , obj){
                              var selected = (obj.id == estado_id) ? 'selected' : '';
                              $('[name="estado_id"]').append('<option data-uf="'+obj.sigla+'" '+selected+' value="'+obj.id+'">'+obj.nome+'</option>');
                         });

                         if(!estado_id){
                              estado_id = $('#estado').val();
                         }

                         $.ajax({
                              url:'/cidade/buscar-cidades-estado',
                              type:'POST',
                              data:{
                                   estado_id: estado_id
                              },
                              success:function(data){
                                   $('[name="cidade_id"]').html('');
                                   $.each(data, function(key , obj){
                                        var selected = (obj.id == cidade_id) ? 'selected' : '';
                                        $('[name="cidade_id"]').append('<option '+selected+' value="'+obj.id+'">'+obj.nome+'</option>');
                                   });
                                   $('[name="cidade_id"]').trigger('change');
                                   flag = true;
                              }
                         });
                    }
               });
          }


     }

     function atualizarCidadesEstado(uf = null, cidade = null){

          flag = false;

          var pais_id = 1; // Brasil
          $('#pais option').prop('selected', false);
          $('#pais option[value="'+pais_id+'"]').prop('selected', true);
          $('#pais').trigger('change');
          
          $.ajax({
               url:'/estado/buscar-estados-pais',
               type:'POST',
               data:{
                    pais_id: pais_id
               },
               success:function(data){
                    $('[name="estado_id"]').html('');
                    $.each(data, function(key , obj){
                         var selected = (obj.id == estado_id) ? 'selected' : '';
                         $('[name="estado_id"]').append('<option data-uf="'+obj.sigla+'" '+selected+' value="'+obj.id+'">'+obj.nome+'</option>');
                    });

                    
                    if(uf){
                         $('[name="estado_id"] option').prop('selected', false);
                         $('[name="estado_id"] option[data-uf="'+uf+'"]').prop('selected', true);
                         $('[name="estado_id"]').trigger('change');
                    }

                    var estado_id = $('[name="estado_id"] option:selected').val();
                    $.ajax({
                         url: "/cidade/buscar-cidades-estado",
                         type: "post",
                         data: {
                              estado_id:estado_id, 
                         },
                         success:function(data){
                              $('[name="cidade_id"]').html('');
                              $.each(data,function(key , data){
                                   var selectedCidade = (cidade && cidade == data.nome) ? 'selected' : '';
                                   $('[name="cidade_id"]').append('<option '+selectedCidade+' value="'+data.id+'">'+data.nome+'</option>')
                              });

                              flag = true;
                         },
                    }); 
                    

               }
          });
          


     }

</script>

</div>
</div>
</div>
</section> 
<?php $__env->stopSection(); ?>
<?php echo $__env->make('layouts.website', array_except(get_defined_vars(), array('__data', '__path')))->render(); ?>