

<?php $__env->startSection('content'); ?>
<div class="card card-outline-info">
  <div class="card-header">
      <h4 class="m-b-0 text-white">My Geneology</h4>
  </div>
  <div class="card-body">
          <!-- /top tiles -->
          <div class="" style="overflow-x: scroll;">
            <div class="page-title">
              <div class="title_left">
                <h3>Geneology <small>your downlines</small></h3>
              </div>
              <form id="update-password" action="<?php echo e(url('/users/geneology')); ?>" method="post" data-parsley-validate>
                <div class="title_right">
                  <div class="col-md-5 col-sm-5 col-xs-12 form-group pull-right top_search">
                    <div class="input-group">
                      <?php echo e(csrf_field()); ?>

                      <input type="text" class="form-control" name="username" required="" placeholder="Search for...">
                      <span class="input-group-btn">
                        <button class="btn btn-default" type="submit">Go!</button>
                      </span>
                    </div>
                  </div>
                </div>
              </form>

            </div>

          <div class="clearfix"></div>
          <div class="row">
            <div class="col-md-12 col-sm-12 col-xs-12" style="padding:0px;">
              <div class="x_panel">
                <div>
                  
                  <p style="float:left; text-align:center; padding-left: 10px;">
                    <img src="<?php echo e(url('/')); ?>/assets/images/users/active.png">
                    <br>
                    <span>Active</span>
                  </p>
                  <p style="float:left; text-align:center; padding-left: 10px;">
                    <img src="<?php echo e(url('/')); ?>/assets/images/users/inactive.png">
                    <br>
                    <span>Inactive</span>
                  </p>
                  <p style="float:left; text-align:center; padding-left: 10px;">
                    <img src="<?php echo e(url('/')); ?>/assets/images/users/vacant.png">
                    <br>                    
                    <span>Vacant</span>
                  </p>

                  <p style="text-align: center;">
                    <a href="<?php echo e(url('/')); ?>/users/geneology/<?php echo e($curr_parent); ?>"><i class="fa fa-arrow-up fa-1x" style="color: #ccc; text-shadow: 1px 1px 1px #ccc;"></i> One Step Up</a>
                    <a href="<?php echo e(url('/')); ?>/users/geneology/<?php echo e($user->username); ?>"><i class="fa fa-arrow-up fa-1x" style="color: #ccc; text-shadow: 1px 1px 1px #ccc;"></i><i class="fa fa-arrow-up fa-1x" style="color: #ccc; text-shadow: 1px 1px 1px #ccc;"></i> To Top</a>
                  </p>
                </div>
                  <!--
                  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;">
                    <?php echo $treeHtml; ?>

                  </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>
        var t = $('#users-table').DataTable({
                processing: true,
                serverSide: true,
                ajax: '<?php echo url('/'); ?>/users/getUrequest',
                dom: 'frtip',
                'lengthMenu': [ [10, 25, 50, -1], [10, 25, 50, "All"] ],
                columns: [
                    { data: 'id', name: 'id' },
                    { data: 'subject', name: 'subject' },
                    { data: 'user_read', name: 'user_read' },
                    { data: 'action', name: 'action' }
                ],
                "columnDefs": [
                    {
                        "render": function ( data, type, row ) {
                        if(data==0){
                            return '<span class="label label-success">Read</span>';
                        }else{
                            return '<span class="label label-danger">Unread</span>';
                        }
                        },
                        "targets": 2
                    },
                ],
                'order': [[1, 'asc']],
                drawCallback: function( settings ) {
                    openModal();
                  }
            });
            
            function openModal(){
              $('.openModal').click(function(){
                 $('#loadModalAjax .modal-content').load('<?php echo e(url('/')); ?>/users/' + $(this).attr('data-id'),function(result){
                    $('#loadModalAjax').modal({show:true});
                  //init_validation('#updateStudentForm', rules, messages);
                   });
              });
              $('.openModalInvoices').click(function(){
                 $('#loadModalAjax .modal-content').load('/student_invoices_modal.php?id=' + $(this).attr('data-id'),function(result){
                    $('#loadModalAjax').modal({show:true});
                  //init_validation('#updateStudentForm', rules, messages);
                   });
              });
            }

    </script>
<style type="text/css">
    .tree ul {
  padding-top: 20px; position: relative;
  
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
}

.tree li {
  float: left; text-align: center;
  list-style-type: none;
  position: relative;
  padding: 20px 5px 0 5px;
  
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
}

/*We will use ::before and ::after to draw the connectors*/

.tree li::before, .tree li::after{
  content: '';
  position: absolute; top: 0; right: 50%;
  border-top: 1px solid #ccc;
  width: 50%; height: 20px;
}
.tree li::after{
  right: auto; left: 50%;
  border-left: 1px solid #ccc;
}

/*We need to remove left-right connectors from elements without 
any siblings*/
.tree li:only-child::after, .tree li:only-child::before {
  display: none;
}

/*Remove space from the top of single children*/
.tree li:only-child{ padding-top: 0;}

/*Remove left connector from first child and 
right connector from last child*/
.tree li:first-child::before, .tree li:last-child::after{
  border: 0 none;
}
/*Adding back the vertical connector to the last nodes*/
.tree li:last-child::before{
  border-right: 1px solid #ccc;
  border-radius: 0 5px 0 0;
  -webkit-border-radius: 0 5px 0 0;
  -moz-border-radius: 0 5px 0 0;
}
.tree li:first-child::after{
  border-radius: 5px 0 0 0;
  -webkit-border-radius: 5px 0 0 0;
  -moz-border-radius: 5px 0 0 0;
}

/*Time to add downward connectors from parents*/
.tree ul ul::before{
  content: '';
  position: absolute; top: 0; left: 50%;
  border-left: 1px solid #ccc;
  width: 0; height: 20px;
}

.tree li a{
 /* border: 1px solid #ccc;*/
  height: 80px;
  width: 100px;
  padding: 5px 10px;
  text-decoration: none;
  color: #666;
  font-family: arial, verdana, tahoma;
  font-size: 11px;
  display: inline-block;
  
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;

}

/*Time for some hover effects*/
/*We will apply the hover effect the the lineage of the element also*/
/*.tree li a:hover, .tree li a:hover+ul li a {
  background: #c8e4f8; color: #000; border: 1px solid #94a0b4;
}
*//*Connector styles on hover*/
.tree li a:hover+ul li::after, 
.tree li a:hover+ul li::before, 
.tree li a:hover+ul::before, 
.tree li a:hover+ul ul::before{
  border-color:  #94a0b4;
}
.tooltip-inner {
    max-width: 340px;
    padding: 3px 5px;
    color: #fff;
    text-align: center;
    background-color: #000;
    border-radius: .25rem;
}
.tooltip-inner .table td, .table th {
    padding: .75rem;
    vertical-align: top;
    border-top: 1px solid #e9ecef;
}
</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\yeselectricv.loc\resources\views/users/geneology.blade.php ENDPATH**/ ?>