

<?php $__env->startSection('content'); ?>
<div class="card card-outline-info">
  <div class="card-header">
      <h4 class="m-b-0 text-white">My Genealogy</h4>
  </div>
  <div class="card-body">
          <div class="" style="overflow-x: scroll;">
            <div class="page-title">
              <div class="title_left">
                <h3>Level Genealogy <small>your downlines</small></h3>
              </div>
            </div>

          <div class="clearfix"></div>
          <div class="row">
            <div class="col-md-12 col-sm-12 col-xs-12">
                  <!--
                  We will create a family tree using just CSS(3)
                  The markup will be simple nested lists
                  -->
                  <div class="tree" style="width: 1340px; margin: 0 auto;">
                    <div class="box">
                      <ul class="directory-list folder">
                        <?php $__currentLoopData = $users; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $user): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <li><span class="usrsname" onclick="initLevelGenealogyAjax(<?php echo e($user->id); ?>, $(this))" data-id="<?php echo e($user->id); ?>"><?php echo e($user->username); ?> (<?php echo e($user->full_name); ?>)</span></li>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                      </ul>
                    </div>
                  </div>

              </div>
            </div>
          </div>

<div class="modal fade" id="loadModalAjax" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="display: none;" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
    </div>
    <!-- /.modal-content -->
   </div>
  <!-- /.modal-dialog -->
</div>
</div>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('javascript'); ?>
    <script>
  function initLevelGenealogyAjax(id, ele){
      
        $.ajax({url: "<?php echo e(url('/')); ?>/users/levelgeneologyanydata/"+id,
        success: function(result){
          ele.removeAttr('onclick');
          ele.attr('onclick', 'togglechildli($(this));');
          $(result).insertAfter(ele);
          initLevelGenealogy();
        }});

  }
  function initLevelGenealogy(){

  // get all folders in our .directory-list
  var allFolders = $(".directory-list li > ul");
  allFolders.each(function() {

    // add the folder class to the parent <li>
    var folderAndName = $(this).parent();
    folderAndName.addClass("folder");

    // // backup this inner <ul>
    // var backupOfThisFolder = $(this);
    // // then delete it
    // $(this).remove();
    // // add an <a> tag to whats left ie. the folder name
    // folderAndName.wrapInner("<a href='#' />");
    // // then put the inner <ul> back
    // folderAndName.append(backupOfThisFolder);

    // // now add a slideToggle to the <a> we just added
    // folderAndName.find("a").click(function(e) {
    //   //$(this).siblings("ul").slideToggle("slow");
    //   e.preventDefault();
    // });

  });
}

function togglechildli(ele){
  ele.nextAll('ul').eq(0).slideToggle('slow');
}
</script>
<style type="text/css">
/* The list style
-------------------------------------------------------------- */

.directory-list ul {
  margin-left: 10px;
  padding-left: 20px;
  border-left: 1px dashed #ddd;
}

.directory-list li {
  list-style: none;
  color: #888;
  font-size: 17px;
  font-style: italic;
  font-weight: normal;
}

.directory-list a {
  border-bottom: 1px solid transparent;
  color: #888;
  text-decoration: none;
  transition: all 0.2s ease;
}

.directory-list a:hover {
  border-color: #eee;
  color: #000;
}

.directory-list .folder,
.directory-list .folder > a {
  color: #777;
  font-weight: bold;
}


/* The icons
-------------------------------------------------------------- */

.directory-list li:before {
  margin-right: 10px;
  content: "";
  height: 20px;
  vertical-align: middle;
  width: 20px;
  background-repeat: no-repeat;
  display: inline-block;
  /* file icon by default */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path fill='lightgrey' d='M85.714,42.857V87.5c0,1.487-0.521,2.752-1.562,3.794c-1.042,1.041-2.308,1.562-3.795,1.562H19.643 c-1.488,0-2.753-0.521-3.794-1.562c-1.042-1.042-1.562-2.307-1.562-3.794v-75c0-1.487,0.521-2.752,1.562-3.794 c1.041-1.041,2.306-1.562,3.794-1.562H50V37.5c0,1.488,0.521,2.753,1.562,3.795s2.307,1.562,3.795,1.562H85.714z M85.546,35.714 H57.143V7.311c3.05,0.558,5.505,1.767,7.366,3.627l17.41,17.411C83.78,30.209,84.989,32.665,85.546,35.714z' /></svg>");
  background-position: center 2px;
  background-size: 60% auto;
}

.directory-list li.folder:before {
  /* folder icon if folder class is specified */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path fill='lightblue' d='M96.429,37.5v39.286c0,3.423-1.228,6.361-3.684,8.817c-2.455,2.455-5.395,3.683-8.816,3.683H16.071 c-3.423,0-6.362-1.228-8.817-3.683c-2.456-2.456-3.683-5.395-3.683-8.817V23.214c0-3.422,1.228-6.362,3.683-8.817 c2.455-2.456,5.394-3.683,8.817-3.683h17.857c3.422,0,6.362,1.228,8.817,3.683c2.455,2.455,3.683,5.395,3.683,8.817V25h37.5 c3.422,0,6.361,1.228,8.816,3.683C95.201,31.138,96.429,34.078,96.429,37.5z' /></svg>");
  background-position: center top;
  background-size: 75% auto;
}
</style>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('layouts.app', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH G:\xampp\htdocs\yespropmart2.loc\resources\views/users/levelgeneology.blade.php ENDPATH**/ ?>