
<?php include("../pages/header.php");?>
<style>
.activeTab {display:none;}
.act{display:block;}
</style>

      <div class="w3-row ">
	  
	  
         <div class="col-md-12 no-padding " style='margin-bottom:10px;'>
		
<p></p>
			
      <ul class="nav nav-tabs  " style=''>
			
              
              <li  class="active" ><a href="#form-contacts" class="tablink w3-light-grey" data-toggle="tab" onclick="openTab(event, 'dashboard');">Dashboard</a></li>
			    <li><a href="#form-settings" class="tablink" onclick="openTab(event, 'noticeboard');" data-toggle="tab">Noticeboard</a></li>
           
		
            </ul>


         <div class="w3-container w3-light-grey  activeTab  act" id='dashboard' style='margin-bottom:10px;padding:2px'>
		 <div class='w3-light-grey'  id='dash-content'>

<?php

foreach(serviceS($connect) as $row){
	
	$service_name=ucwords(strtolower($row["service"]));
	$desc=$row["description"];
	$date=$row["date"];
	$profile=$row["photo"];
	$sid= $row["id"];
	if(($profile==="")){
		$profile='../images/img_avatar5.png';
	}else{	$profile="../admin/pages/services/".$row["photo"];
	}
	$numn=count(service_notes($connect,$sid));

?>
     

  <div class='w3-container w3-light-grey col-md-4 ' style='min-height:300px;padding:5px'>
  
		  <div class="w3-container  w3-white no-padding w3-margin-top w3-card-2 w3-animate-zoom" >
          <!-- Widget: user widget style 1 -->
          <div class="box box-widget widget-user " >
            <!-- Add the bg color to the header using any of the bg-* classes -->
            <div class="widget-user-header bg-green w3-card-2 w3-hover-opacity" style='padding:;cursor:pointer' onclick='open_notes("<?php echo $sid; ?>")'>
			<h3 class="widget-user-username"><?php echo $service_name;?></h3>
				 
              <div class="widget-user-image">
             <img class="img-circle" src="<?php echo $profile;?>" alt="User Avatar" style=''>
              </div>
              <!-- /.widget-user-image -->
			
            </div>
			
			 <div class="btn-group pull-right top-right" style='position:absolute;top:0%;right:0'>
					  <label class=' btn  dropdown-toggle widget-user-username w3-text-white' data-toggle="dropdown"><i class='fa fa-ellipsis-v'></i></label>
						<ul class="dropdown-menu" role="menu" >
						<li><a href="#">Exit</a></li>
						<li><a href="#">Report</a></li>
						<li class="divider"></li>
						<li><a href="#">More <span class='fa fa-ellipsis-h pull-right'></span></a></li>
					  </ul>
				</div>
          
		     <div class="box-body" style="min-height:120px"><br>
			<strong><i class="fa fa-book margin-r-5"></i> Description</strong>
              <p class="text-muted">
               <?php echo ucfirst($desc);?>
              </p>
          </div>
          <!-- /.widget-user -->
		  <div class="box-footer no-padding">
              <ul class="nav nav-stacked">
                <li class='hide'><a href="#">Projects <span class="pull-right badge bg-blue">3</span></a></li>
                <li class='hide'><a href="#">Tasks <span class="pull-right badge bg-aqua">5</span></a></li>
                <li><a href="#">Notes<span class="pull-right badge bg-green"><?php echo $numn;?></span></a></li>
              </ul>
            </div>
            </div>
			           
       	      

		</div>
		
 </div>	
<?php } ?>
  </div>
  <div id="service-notes" class="w3-container no-padding w3-light-grey" style='min-height:450px;display:none'></div>
			
  </div>
  
			

			<div id="noticeboard" class="w3-container activeTab w3-light-grey" style='min-height:450px'>
			  
			  <p>Noticeboard</p>
			</div>
		 </div>
		 
  
  <div class='modal fade' id='loader'>
  <div class='modal-dialog' style='top:40%'><center s><img src='../images/status.gif'></center></div>
  </div>

  
</div>

<!-- jQuery 2.2.3 -->
<script src="../admin/plugins/jQuery/jquery-2.2.3.min.js"></script>
<!-- Bootstrap 3.3.7 -->
<script src="../admin/bootstrap/js/bootstrap.min.js"></script>
<script>
function openTab(evt, tabName) {
  var i, x, tablinks;
  x = document.getElementsByClassName("activeTab");
  for (i = 0; i < x.length; i++) {
     x[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablink");
  for (i = 0; i < x.length; i++) {
     tablinks[i].classList.remove("w3-light-grey");
  }
  document.getElementById(tabName).style.display = "block";
  evt.currentTarget.classList.add("w3-light-grey");
}


function open_loader(id){
	// alert();
	$("#"+id).modal("show")
}

function open_notes(id){
	
	$("#loader").modal("show");
	$.ajax({
		url:"service-notes/service-notes.php?userservicetarget="+id,
		method:"POST",
		success: function(data){
			$("#loader").modal("hide");
			$("#dash-content").hide();
			$("#service-notes").show();
			$("#service-notes").html(data);
			// document.getElementById("dash-content").style.display = "none";
		}
		
	})
}
function open_single_notes(id){
	
	$("#loader").modal("show");
	$.ajax({
		url:"service-notes/single-service-notes.php?post="+id,
		method:"POST",
		success: function(data){
			$("#loader").modal("hide");
			// $("#dash-content").hide();
			$("#single-service-notes").show();
			$("#single-service-notes").html(data);
			// document.getElementById("dash-content").style.display = "none";
		}
		
	})
}

function dashboard(){
	$("#dash-content").show();
	$("#service-notes").hide();
}
</script>
 <?php
include("../pages/footer.php");
?>