<?php include("includes/head.php");?>

<link rel="stylesheet" href="scripts/amcharts4/charts.css" />
<script src="scripts/amcharts4/core.js"></script>
<script src="scripts/amcharts4/charts.js"></script>
<script src="scripts/amcharts4/themes/animated.js"></script>
<script src="scripts/amcharts4/plugins/forceDirected.js"></script>
   
<body>
<!--[if lt IE 8]>
        <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
<!-- Header top area start-->
<?php include("includes/header.php");?>
<!-- Header top area end-->
<!-- Menu area start-->
<?php include("includes/navigation.php");?>
<!-- Menu area end-->
<!-- Data table area Start-->
<div class="admin-dashone-data-table-area mg-b-40" style="min-height:500px;">
  <div class="container">
    <div class="row">
      <div class="col-lg-12">
        <div class="row">
          <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="width:110% !important;">
            <div class="tab-content view-mail-ov-mg-t-30">
              <div class="tab-pane fade in zoomInDown shadow-reset active">
                <div class="sparkline8-list shadow-reset">
                  <div class="sparkline8-hd">
                    <div class="main-sparkline8-hd">
                      <h1>Stakeholders</h1>
                      <div class="sparkline8-outline-icon">
                        <?php if(isset($_GET['mode']) && $_GET['mode']=='Edit'){?>
                        	<a href="sh-overview.php"><button class="btn btn-sm btn-primary login-submit-cs" type="button" title="Click to Remove Edit Mode">Remove Edit Mode</button></a>&nbsp;
                        <?php }else{?>
                        	<a href="sh-overview.php?mode=Edit"><button class="btn btn-sm btn-success login-submit-cs" type="button" title="Click to show Edit Mode">Edit Mode</button></a>&nbsp;
                        <?php }?>
                        <a href="dashboard.php"><button class="btn btn-sm btn-danger login-submit-cs" type="button">Back to Dashboard</button></a>&nbsp;                   
                      </div>
                    </div>
                  </div>
                  <div class="sparkline8-graph" style="height:1030px !important; margin-bottom:208px;">
                    <div class="container bootstrap snippet">
                      <div class="row">
                        <div id="chartdiv"></div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</div>
<!-- Data table area End-->
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
  <div class="modal-dialog modal-lg">
    <!-- Modal content-->
    <div class="modal-content">
      <!--<div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title"></h4>
            </div>-->
      <div class="modal-body"> </div>
      <div class="modal-footer">
        <!--<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>-->
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="myModal" role="dialog" style="width: 1100px !important; left: 33% !important;">
    <div class="modal-dialog">
    
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Update Category Color</h4>
            </div>
            <div class="modal-body"></div>
            <div class="modal-footer">
                <!--<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>-->
            </div>
        </div>
      
    </div>
</div>

<!-- Footer Start-->
<?php include("includes/footer.php");?>
<!-- Footer End-->

<script>
am4core.useTheme(am4themes_animated);

var chart = am4core.create("chartdiv", am4plugins_forceDirected.ForceDirectedTree);
var networkSeries = chart.series.push(new am4plugins_forceDirected.ForceDirectedSeries());
var nodesTemplate = networkSeries.nodes.template;

chart.data = [
  {
    name: "",
	id: "",	
	title:"Click to expand!",
	x: am4core.percent(50),
    y: am4core.percent(50),
	image: "img/logo/logo-ri.png",
    fixed: true,
	//color: "green",
	off: true,
    children: [
	<?php 
	  //--------------- Category Info ----------
	  $category_counter = 0;
	  $selQry_cat = "SELECT * FROM ".TBL_CATEGORIES." WHERE status='1' ORDER BY category_title";
	  $catInfo =  $con->getMultiRow($selQry_cat, __FILE__,__LINE__);
	  $totSHCatListings = count($catInfo);
		if($totSHCatListings>0)
		{
			for($shcat=0;$shcat<$totSHCatListings;$shcat++){
				$category_counter++;
				//----------------------------------------
				$selQry_sh = "SELECT * FROM ".TBL_STAKEHOLDERS." WHERE category_id='".$catInfo[$shcat]['category_id']."' AND status='1' ORDER BY name";
				$shInfo =  $con->getMultiRow($selQry_sh, __FILE__,__LINE__);
				$totSHListings = count($shInfo);
				//----------------------------------------
	?>
      {
        name: "<?php echo $catInfo[$shcat]['category_title'];?>",
		id: "<?php echo $catInfo[$shcat]['category_id'];?>",
		title:"<?php echo $catInfo[$shcat]['category_title'];?> (<?php echo $totSHListings;?>)",
		off: true,
		type: "Cat",
		color:"<?php echo !empty($catInfo[$shcat]['category_orientation'])?$catInfo[$shcat]['category_orientation']:'#a9b7af';?>",
		<?php if( (!isset($_GET['mode'])) && ($totSHListings>0) ){}else{?>
		togglable: false,
		<?php }?>
        children: [
		  <?php
			$shsrno = 0;
			if($totSHListings>0)
			{
				for($shh=0;$shh<$totSHListings;$shh++){
					$shsrno++;
		  ?>
		  	{ name: "<?php echo $shInfo[$shh]['abbreviation'];?>",id:"<?php echo $shInfo[$shh]['id'];?>",title:"<?php echo $shInfo[$shh]['name'];?>", type: "SH", value: "<?php echo $totSHListings;?>",url: "sh-card.php?sid=<?php echo $shInfo[$shh]['id'];?>",color:"<?php echo !empty($shInfo[$shh]['sh_current_orientation'])?$shInfo[$shh]['sh_current_orientation']:'#a9b7af';?>"},
		  <?php }
		  }else{?>
		  	{ name: "",title:"", value: ""}
		  <?php }?>
		]
      },
	  <?php }
	  }?>
    ]
  }
];

//networkSeries.maxLevels = 1;

networkSeries.dataFields.value = "value";
networkSeries.dataFields.name = "name";
networkSeries.dataFields.id = "id";
networkSeries.dataFields.children = "children";
networkSeries.dataFields.fixed = "fixed";
networkSeries.dataFields.color = "color";
networkSeries.dataFields.collapsed = "off";
networkSeries.dataFields.togglable = "togglable";

networkSeries.nodes.template.outerCircle.filters.push(new am4core.DropShadowFilter());
networkSeries.nodes.template.expandAll = false;
networkSeries.nodes.template.togglable = true;
networkSeries.nodes.template.label.hideOversized = true;
networkSeries.nodes.template.label.truncate = true;
networkSeries.nodes.template.tooltipText = "{title}";
networkSeries.nodes.template.fillOpacity = 1;
networkSeries.nodes.template.label.text = "[bold]{name}";//{name}: [bold]{value}[/]
networkSeries.nodes.template.propertyFields.x = "x";
networkSeries.nodes.template.propertyFields.y = "y";
networkSeries.nodes.template.propertyFields.minRadius = "minRadius";
networkSeries.nodes.template.propertyFields.url = "url";
networkSeries.nodes.template.propertyFields.togglable = "togglable";
networkSeries.nodes.template.urlTarget = "_blank";

<?php if(isset($_GET['mode']) && $_GET['mode']=='Edit'){?>		
	nodesTemplate.events.on("hit", function(ev) {
  
		  //alert("clicked on ", ev.target);
		  var node_name = ev.target.dataItem.dataContext.name;
		  var node_id = ev.target.dataItem.dataContext.id;
		  var node_type = ev.target.dataItem.dataContext.type;
		  
		  if(node_type=='Cat')
		  {	
			//$(this).removeData('bs.modal');
			
			var dataURL = "update-cat-orient.php?catid="+node_id;
			$(".modal-body").html("");
			$('.modal-body').load(dataURL,function(){	
				$('#myModal').modal({show:true});
			});
		  }
		  // zoom to an object
		  //ev.target.series.chart.zoomToMapObject(ev.target);
		 
		  // get object info
		  //console.log(ev.target.dataItem.dataContext.name);
		  
 	});
<?php }?>

networkSeries.links.template.strokeWidth = 2;
networkSeries.links.template.strokeOpacity = 1;
networkSeries.links.template.distance = 1.3;

networkSeries.fontSize = 10;
networkSeries.minRadius = am4core.percent(3);
networkSeries.centerStrength = 0.5;
networkSeries.manyBodyStrength = -20;

// Configure icons
var icon = networkSeries.nodes.template.createChild(am4core.Image);
icon.propertyFields.href = "image";
icon.horizontalCenter = "middle";
icon.verticalCenter = "middle";
icon.width = 90;
icon.height = 419;
</script>
    
<!-- Data table area End-->
<script type="text/javascript" src="scripts/raphael/js/jquery_002.js"></script>
<script type="text/javascript" src="scripts/raphael/js/lozad.js"></script>
<script type="text/javascript" src="scripts/raphael/js/modernizr.js"></script>
<script type="text/javascript" src="scripts/raphael/js/PublicPromoRoundel.js"></script>
<script type="text/javascript" src="scripts/raphael/js/CrossBrowserLoader.js"></script>
<script type="text/javascript" src="scripts/raphael/js/Resizer.js"></script>
<script type="text/javascript" src="scripts/raphael/js/LazyLoader.js"></script>
<script type="text/javascript" src="scripts/raphael/js/GlobalNav.js"></script>
<script type="text/javascript" src="scripts/raphael/js/GlobalSearch.js"></script>
<script type="text/javascript" src="scripts/raphael/js/ComponentAccordion.js"></script>
<script type="text/javascript" src="scripts/raphael/js/ComponentAuthorship.js"></script>
<script type="text/javascript" src="scripts/raphael/js/PublicPlpMainpageCookieHandler.js"></script>
<script type="text/javascript" src="scripts/raphael/js/PublicMediaQueryNewsletterPanel.js"></script>
<script type="text/javascript" src="scripts/raphael/js/PublicCarousel.js"></script>
<script type="text/javascript" src="scripts/raphael/js/PublicPrint.js"></script>
<script type="text/javascript" src="scripts/raphael/js/PublicLogoSwitch.js"></script>
<script type="text/javascript" src="scripts/raphael/js/PublicMediaQueries.js"></script>
<script type="text/javascript" src="scripts/raphael/js/PublicMain.js"></script>
<!-- jquery
		============================================ -->
<script src="js/vendor/jquery-1.11.3.min.js"></script>
<!-- bootstrap JS
		============================================ -->
<script src="js/bootstrap.min.js"></script>
<!-- notification JS
		============================================ -->
<script src="js/Lobibox.js"></script>
<script src="js/notification-active.js"></script>
<!-- Tree Viewer JS
		============================================ -->
<script src="js/tree-line/jstree.min.js"></script>
<script src="js/tree-line/jstree.active.js"></script>

<script>
$(document).ready(function() {
	
	/*$(".modal").on("hidden.bs.modal", function() {
    	$(".modal-body").html("");//
  	});*/
  
} );

function reloadData() {
    
	var newData = [
  {
    name: "",
	id: "",	
	title:"Click to expand!",
	x: am4core.percent(50),
    y: am4core.percent(50),
	image: "img/logo/logo-ri.png",
    fixed: true,
	//color: "green",
	off: true,
    children: [
	      {
        name: "Corporate Sector",
		id: "9",
		title:"Corporate Sector (2)",
		off: true,
		type: "Cat",
		color:"red",
				togglable: false,
		        children: [
		  		  	{ name: "DRAP",id:"79",title:"Drug Reg Authority", type: "SH", value: "2",url: "sh-card.php?sid=79",color:"#a9b7af"},
		  		  	{ name: "WRD",id:"67",title:"Warid", type: "SH", value: "2",url: "sh-card.php?sid=67",color:"#a9b7af"},
		  		]
      },
	        {
        name: "Disable Persons Organization",
		id: "17",
		title:"Disable Persons Organization (5)",
		off: true,
		type: "Cat",
		color:"red",
				togglable: false,
		        children: [
		  		  	{ name: "FOP",id:"84",title:"Friends of Paraplegics", type: "SH", value: "5",url: "sh-card.php?sid=84",color:"orange"},
		  		  	{ name: "NFWWD",id:"100",title:"National Forum Supporting Women with Disabilities", type: "SH", value: "5",url: "sh-card.php?sid=100",color:"orange"},
		  		  	{ name: "PDF",id:"98",title:"Pakistan Disabled Foundation", type: "SH", value: "5",url: "sh-card.php?sid=98",color:"orange"},
		  		  	{ name: "STEP",id:"91",title:"Special Talent Exchange Program", type: "SH", value: "5",url: "sh-card.php?sid=91",color:"orange"},
		  		  	{ name: "Strive",id:"117",title:"Strive Trust", type: "SH", value: "5",url: "sh-card.php?sid=117",color:"#a9b7af"},
		  		]
      }
	      ]
  }];
  
    return newData;
}

function loadNewData(newData) {
    /*var chartData = reloadData();
	alert(chartData);
    chart.dataProvider = chartData;
    chart.validateData();*/
	
	//chart.data = reloadData();
	chart.data = newData;
}
</script>

</body>
</html>
