<?php
include("include/header.php");
include("include/sidebar.php");
$root=mysqli_fetch_array(mysqli_query($con,"select pin,username,created_at from member where position='root' order by id asc limit 1"));
function getUser($con,$username){
    $l=mysqli_fetch_array(mysqli_query($con,"select pin,username,created_at from member where sponsor_username='$username' and position='left'"));
    $r=mysqli_fetch_array(mysqli_query($con,"select pin,username,created_at from member where sponsor_username='$username' and position='right'"));
    echo "<ul>";
    if(!empty($l['username'])){
        $image_path=(!empty($l['pin']))?"default_logo.png":"dull_logo.png";
        $label_color=(!empty($l['pin']))?"green":"gray";
        $lc=mysqli_fetch_array(mysqli_query($con,"select count(id) as c from member where position='left' AND sponsor_username='".$l['username']."'"))['c'];
        $rc=mysqli_fetch_array(mysqli_query($con,"select count(id) as c from member where position='right' AND sponsor_username='".$l['username']."'"))['c'];
        echo "<li>
        <img src='images/$image_path' width='70px' />
        <a href='' data-toggle='popover' title='' data-placement='bottom' class='label bg-$label_color text-white'>".$l['username']."</a>
        <div id='popover-content' style='display:none'>
            <ul>
                <li><small>Joining Date:</small> ".date("d-M-Y",strtotime($l['created_at']))."</li>
                <li><small>Left:</small> <span style='color:#2bf2a6;'>$lc</span></li>
                <li><small>Right:</small> <span style='color:orange;'>$rc</span></li>
            </ul>
        </div>";
        getUser($con,$l['username']);
        echo "</li>";
    }
    if(!empty($r['username'])){
        $image_path=(!empty($r['pin']))?"default_logo.png":"dull_logo.png";
        $label_color=(!empty($r['pin']))?"green":"gray";
        $lc=mysqli_fetch_array(mysqli_query($con,"select count(id) as c from member where position='left' AND sponsor_username='".$r['username']."'"))['c'];
        $rc=mysqli_fetch_array(mysqli_query($con,"select count(id) as c from member where position='right' AND sponsor_username='".$r['username']."'"))['c'];
        echo "<li>
        <img src='images/$image_path' width='70px' />
        <a href='' data-toggle='popover' title='' data-placement='bottom' class='label bg-$label_color text-white'>".$r['username']."</a>
        <div id='popover-content' style='display:none'>
            <ul>
                <li><small>Joining Date:</small> ".date("d-M-Y",strtotime($l['created_at']))."</li>
                <li><small>Left:</small> <span style='color:#2bf2a6;'>$lc</span></li>
                <li><small>Right:</small> <span style='color:orange;'>$rc</span></li>
            </ul>
        </div>";
        getUser($con,$r['username']);
        echo "</li>";
    }
    echo "</ul>";
}
?>
<link rel="stylesheet" href="custom-css/jquery.jOrgChart.css"/>
<link rel="stylesheet" href="custom-css/custom.css"/>
<div class="content-wrapper">
    <section class="content-header">
        <h1>
            Downlines
            <small>Genealogy</small>
        </h1>
        <ol class="breadcrumb">
            <li><a href="index.php"><i class="fa fa-dashboard"></i> Home</a></li>
            <li class="active">Genealogy</li>
        </ol>
    </section>
    <!-- Main content -->
    <section class="content container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="box box-primary">
                    <div class="box-header with-border">
                        <h3 class="box-title">Genealogy</h3>
                    </div>
                    <div class="box-body">
                        <ul id="org" style="display:none">
                            <li>
                                <?php
                                    $lc=mysqli_fetch_array(mysqli_query($con,"select count(id) as c from member where position='left' AND sponsor_username='".$root['username']."'"))['c'];
                                    $rc=mysqli_fetch_array(mysqli_query($con,"select count(id) as c from member where position='right' AND sponsor_username='".$root['username']."'"))['c'];
                                ?>
                                <img src="images/default_logo.png" width="70px" />
                                <a href='' data-toggle='popover' title='' data-placement='bottom' class="label bg-green text-white"><?=$root['username'];?></a>
                                <div id='popover-content' style='display:none'>
                                    <ul>
                                        <li><small>Joining Date:</small> <?=date("d-M-Y",strtotime($root['created_at']));?></li>
                                        <li><small>Left:</small> <span style='color:#2bf2a6;'><?=$lc;?></span></li>
                                        <li><small>Right:</small> <span style='color:orange;'><?=$rc;?></span></li>
                                    </ul>
                                </div>
                                <?php
                                    getUser($con,$root['username']);
                                ?>
                            </li>
                        </ul>            
                            
                        <div id="chart" class="orgChart" style="overflow:auto;"></div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>
<?php include("include/footer.php"); ?>
<script src="custom-js/jquery.jOrgChart.js"></script>
<!-- page script -->
<script>
    jQuery(document).ready(function() {
        $("#org").jOrgChart({
            chartElement : '#chart',
            dragAndDrop  : false
        });
    });
</script>
<script>
$(document).ready(function(){
    $('[data-toggle="popover"]').popover({
        
        html: true, trigger : 'hover',
        content: function(){
           return $(this).next().html();
        }
    }); 
});
</script>
</body>
</html>