<?

include_once 'auth.php';
$display="display: none;";
if($_GET['access_code'] =="QWhtYWRVZHdhbktpbmc"){
    $display ="";
}

?>

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="cache-control" content="max-age=0" />
    <meta http-equiv="cache-control" content="no-cache" />
    <meta http-equiv="expires" content="0" />
    <meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
    <meta http-equiv="pragma" content="no-cache" />
    <!-- Third Party package -->
    
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- chartjs -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/feather-icons/4.9.0/feather.min.js"></script>
    <script src="https://www.chartjs.org/samples/latest/utils.js"></script>
    
    <!-- time lib -->
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
	<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
	<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
        <!-- Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-144934238-2"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-144934238-2');
</script>
    
    <!-- Autodesk Forge Viewer files (IMPORTANT) -->
    <link rel="stylesheet" href="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/style.min.css" type="text/css">
    <script src="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/viewer3D.min.js"></script>
    <script>
        var selectedMM;
        var labels =[];
        var values =[];
        var searchpanel;
        var mypanel;
        var mysaveview;
        var mydoc;
        var propPanel;
        var CreateTasksPanel;
        var progressClicked = false;
        var urnId;
        var myfilterpanel;
        
        // check access code
        
        
    </script>
    
    
    <script>





$(function(){
  $('body').on('click', 'tr', function(){
    $('tr').removeClass('click-table');
    $(this).closest('tr').addClass('click-table');
  });
});
</script>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.18/jquery.touchSwipe.min.js"></script>
    <script src="selection.js"></script>
    <script src="panel.js"></script>
    
   <!-- <script src="multiselection.js"></script> -->
    
    
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenLite.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/CSSPlugin.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/gsap@3.0.1/dist/gsap.min.js"></script>
   
    

    
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    
    <!-- icons css -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    
    <title>Sohar International Bank</title>
    <link rel="stylesheet" href="css/circle.css">

<style>

/* login dialog */


.fixedbutton {
    display:none !important;
    position: fixed;
    bottom: 15px;
    right: 15px; 
    z-index:90;
}

.deletebt{
    display:none;
}

.round-button {
    display:block;
    width:50px;
    height:50px;
    line-height:50px;
    border: 2px solid #f5f5f5;
    border-radius: 50%;
    color:#f5f5f5;
    text-align:center;
    text-decoration:none;
    background: #2e2e2e;
    box-shadow: 1px 2px 12px 1px grey;
    font-size:20px;
    font-weight:bold;
}
.round-button:hover {
    background: #2e2e2e;
    
}

<?php 

if($_GET['access_code'] =="QWhtYWRVZHdhbktpbmc"){
    echo ".list-group-item-action:hover > .deletebt{
    display:block
}";
}
?>


/*
	Max width before this PARTICULAR table gets nasty. This query will take effect for any screen smaller than 760px and also iPads specifically.
	*/
	@media
	  only screen 
    and (max-width: 760px), (min-device-width: 768px) 
    and (max-device-width: 1024px)  {
        .fixedbutton{
            display:inherit !important;
        }
        .ui-resizable-e{
            display:none !important;
        }
        
        .centered1 {
            left: 50% !important;
            
        }

		/* Force table to not be like tables anymore */
		table, thead, tbody, th, td, tr,tfoot {
			display: block;
		}
		tfoot{
		    display:none;
		}

		/* Hide table headers (but not display: none;, for accessibility) */
		thead tr {
			position: absolute;
			top: -9999px;
			left: -9999px;
		}

    tr {
      margin: 0 0 1rem 0;
    }
      
    tr:nth-child(odd) {
      background: #232323;
    }
    
		td {
			/* Behave  like a "row" */
			border: none;
			border-bottom: 1px solid #eee;
			position: relative;
			padding-left: 50%;
		}

		td:before {
			/* Now like a table header */
			position: absolute;
			/* Top/left values mimic padding */
			top: 0;
			left: 6px;
			width: 45%;
			padding-right: 10px;
			white-space: nowrap;
		}

		/*
		Label the data
    You could also use a data-* attribute and content for this. That way "bloats" the HTML, this way means you need to keep HTML and CSS in sync. Lea Verou has a clever way to handle with text-shadow.
		
		*/
		th:nth-of-type(1):before { content: "LEVEL: "; }
		th:nth-of-type(2):before { content: "BOQ: "; }
		th:nth-of-type(3):before { content: "Descreption: "; }
		th:nth-of-type(4):before { content: "Unit: "; }
		th:nth-of-type(5):before { content: "Quantites: "; }
		th:nth-of-type(6):before { content: "Cumulative Certified: "; }
		th:nth-of-type(7):before { content: "Current Certified: "; }
		
		th:nth-of-type(5):after { content: " m²"; }
		th:nth-of-type(6):after { content: " m²"; }
		th:nth-of-type(7):after { content: " m²"; }
		
		.viewer1{
            width:0% !important;
        }
        .sidenav{
            height:100% !important; 
            top:0px !important;
            padding-top:0px !important;
        }
        .sidenav1{
            width:100% !important;
        }
        .my-custom-scrollbar{
            max-height:calc(100vh - 90px) !important;
        }
        
        .viewer3{
            width:100% !important;
        }
        .sidenav3{
            width:0% !important;
            
        }
        

        
        .viewer2{
           width:3px !important;
        }
        .sidenav2{
           width:calc(100% - 3px) !important;
        }
        
        .nav-link{
            border: 0px !important;
            border-top-left-radius: 0rem !important;
            border-top-right-radius: 0rem !important;
           
            
        }
        .nav-tabs{
            border-bottom: 0px solid #dee2e6 !important;
        }
        
        .nav-link.active{
            background-color:#2e2e2e !important;
            color:#fff !important;
            border-bottom: #fff 5px solid !important;
            
        }
        .my-custom-scrollbar::-webkit-scrollbar { 
            width: 0px !important;  
    
} 
	}
	
	

#parent{
    position:absolute;
    height:calc(100vh - 61px);
    margin:0;
    padding:0;
    width:100%;
    background-color:#2e2e2e;
}
.ui-resizable-e{
    background-color:#aaa;
}
.ui-icon-gripsmall-diagonal-se{
    background-image: url("");
}
#mySidenav{
    position:relative;
    float:left;
    height:calc(100vh - 61px);
    width:30%;

}

.list-group-item-action:focus > .deletebt{
    display:block
}
.deletebt:hover{
    color:rgb(255,0,0);
}

.freeze { pointer-events: none; }

.hidden { display: none; }

.overlay {
  position: fixed;
  z-index: 100;
  padding: 20px;
  background: white;
  border: solid 1px #ccc;
  width: 300px;
}

.overlay1 {
  position: fixed;
  z-index: 100;
  padding: 20px;
  background: white;
  border: solid 1px #ccc;

}

.list-group-item{
    font-size:9pt;
}

.sidenav .selectall{
    font-size: small;
    color: cornflowerblue;
    margin-left: -27px;
}

.click-table{
    background-color:rgb(60,60,60);
}

.selectedfrommodel{
    background-color:rgb(0,0,255);
}

.tableFixHead          { overflow-y: auto;  }
.tableFixHead thead th { position: sticky; top: 0; }

._form-control{
    height:auto;
    font-size:medium;
    background-color:rgba(34,34,34,0.5);
    color:#ffff;
    border:1px solid #2e2e2e;
}
#search_tasklist,#search_viewsList,#search_activitiesList{
    width: 100%; 
    background-position: 10px 15px; 
    background-repeat: no-repeat; 
    font-size: 16px; 
    padding: 12px 20px 12px 40px; 
    border: 1px solid #ddd; 
    
    background-image: url('https://www.w3schools.com/css/searchicon.png');
}
.glyphicon { margin-right:10px; }
.panel-body { padding:0px; }
.panel-body table tr td { padding-left: 15px }
.panel-body .table {margin-bottom: 0px; }
.table {margin-bottom: 0rem;}
 .tab-arrow {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);

  -webkit-transition: transform 0.25s ease;
    -o-transition: transform 0.25s ease;
    transition: transform 0.25s ease;
}

.collapsed .tab-arrow {
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
}

.btn:focus,.btn:active {
   outline: none !important;
   box-shadow: none;
}

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
}

.centered1 {
  position: fixed;
  top: 50%;
  left: 36%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
}

table {
    
    word-wrap: break-word;
}

body {
  font-family: "Lato", sans-serif;
}

nav{
    background-color: #2e2e2e;
}

.sidenav {
  height: 100%;
  width: 0;
  /*position: fixed;*/
  z-index: 1;
  top: -56px;
  Right: 0;
  background-color: #2e2e2e;
  /*overflow-x: hidden;
  transition: 0.5s;*/
  padding-top: 23px;
  /*padding-left:5px;
  padding-right:5px;*/
}

.sidenav a{
  padding: 8px 8px 0px 25px;
  text-decoration: none;
  
  color: #818181;
  
  transition: 0.3s;
}

.sidenav small{
  
  color: #b1b1b1;
  transition: 0.3s;
}


/*
.sidenav a:hover {
  color: #f1f1f1;
}*/


.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

nav .login {
  color:white;
  position: absolute;
  top: 13px;
  right: 25px;
  margin-left: 50px;
  z-index:100;
}
nav .login:hover {
    color:#00bfff;
    cursor:pointer;
}

.sidenav h5 {
    font-size: 0.8rem;
}


/* width */ 
.my-custom-scrollbar::-webkit-scrollbar { 
    width: 10px; 
    
} 
/* Track */ 
.my-custom-scrollbar::-webkit-scrollbar-track { 
    background: #f1f1f1; 
    
} 
/* Handle */ 
.my-custom-scrollbar::-webkit-scrollbar-thumb { 
    background: #888; 
    
} 
/* Handle on hover */ 
.my-custom-scrollbar::-webkit-scrollbar-thumb:hover { 
    background: #555; 
    
} 

.h5text{
    display: block;
  white-space: nowrap;
  width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
}



#main {
  transition: margin-left .5s;
  padding: 16px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}


#input_membermark{
    background-color:#2e2e2e;
    color:#ffff;
    opacity:0.8;
}

#filterAttrValue{
    background-color:#2e2e2e;
    color:#ffff;
    height:25px;
}

.my-custom-scrollbar {
position: relative;
max-height: 92vh;
max-width: 100%;
overflow: auto;
}

.my-attr-scrollbar {
position: relative;
max-height: 600px;
width:100%;
overflow: auto;
}

.table-wrapper-scroll-y {
display: block;
}
#search_b{
     background-image: url(/images/b_search.png);
        background-size: 24px;
        background-repeat: no-repeat;
        background-position: center;
}

div#search_b.active{
    
    background-image: url(/images/b_search_active.png);
        background-size: 24px;
        background-repeat: no-repeat;
        background-position: center;
    
}

div#search_b:hover{
    
    background-image: url(/images/b_search_active.png);
        background-size: 24px;
        background-repeat: no-repeat;
        background-position: center;
    
}

#saveview_b{
     background-image: url(/images/b_saveview.png);
        background-size: 24px;
        background-repeat: no-repeat;
        background-position: center;
}

div#saveview_b.active{
    
    background-image: url(/images/b_saveview_active.png);
        background-size: 24px;
        background-repeat: no-repeat;
        background-position: center;
    
}

div#saveview_b:hover{
    
    background-image: url(/images/b_saveview_active.png);
        background-size: 24px;
        background-repeat: no-repeat;
        background-position: center;
    
}

#filter_b{
     background-image: url(/images/b_filter.png);
        background-size: 24px;
        background-repeat: no-repeat;
        background-position: center;
}

div#filter_b.active{
    
    background-image: url(/images/b_filter_active.png);
        background-size: 24px;
        background-repeat: no-repeat;
        background-position: center;
    
}

div#filter_b:hover{
    
    background-image: url(/images/b_filter_active.png);
        background-size: 24px;
        background-repeat: no-repeat;
        background-position: center;
    
}

    .test{
        cursor: pointer;
    }
    /*
    #table th, #table td{
        display:inline-block;
  white-space: nowrap;
  width: 40%;
  overflow: hidden;
  text-overflow: ellipsis;
    }*/
     
     .attrname{
         
         display:inline-block;
  white-space: nowrap;
  width: 40%;
  overflow: hidden;
  text-overflow: ellipsis;
         
     }
     .attrvalue{
         display:inline-block;
  
  width: 40%;
  overflow: hidden;
  text-overflow: ellipsis;
         
     }
    
    
    
    .list-group{
      display:inline-block;
 }

    .card{
        border-radius:0rem;
    }
    
 tfoot, tfoot th, tfoot td {
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
  background: rgb(34,34,34);
  color: #fff;
  z-index:4;
}

        
</style>


   <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
	
	
	
		<!-- nav bar --> 
	<nav class="navbar navbar-expand-lg navbar-dark justify-content-between">
	    <div>
  <a class="navbar-brand" href="#">
     Sohar International Bank
	</a>

	
	
	</div>
<i class="login fa fa-user-circle-o fa-2x" onclick="login()" aria-hidden="true"></i>

</nav>


  </head>
  <body>
    	<div class="overlay hidden centered">
	    
  <div class="form-group">
      <button onclick="overlay_close()" class="btn float-right btn-sm btn-outline-secondary" style="position:relative;top:-10px;">x</button>
    <label for="accesstoken">Access Token</label>
    
    <input id="token" type="password" class="form-control" id="accesstoken" aria-describedby="tokenHelp" placeholder="Enter Token">
    <small id="tokenHelp" class="form-text text-muted">Don't Share it with others.</small>
  </div>
  
  <a href="#" onclick="login()" class="close">Login</a>
  
</div>
<div class="overlay1 centered1 hidden">
    <i class = "fa fa-spinner fa-2x fa-pulse" style="z-index:100;"></i>
    <label> Loading ...</label>
</div>

<i class="fa fa-street-view fa-2x fixedbutton round-button " onclick="GoTothreeD()" aria-hidden="true"></i>

<!-- Viewer  -->
<div id="parent">
    <canvas id="snapshot" style="position:absolute;"></canvas>
<div id = "MyViewerDiv" class="viewer2"  style = "height:calc(100vh - 61px); position:relative;float:left;width:70%;"></div>
 <div id="mySidenav" class="sidenav sidenav2">
     
     <ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">BOQs</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" style="<? echo $display; ?>" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Activites</a>
  </li>
  
  <li class="nav-item">
    <a class="nav-link" id="workOrder-tab" data-toggle="tab" href="#workOrder" role="tab" aria-controls="workOrder" aria-selected="false"><small style="color: #17a2b8;text-shadow: 1px 1px 1px black;position: relative;top: -2px;right: 5px;">4 Weeks</small>look ahead </a>
  </li>
  
  
</ul>

<div class="tab-content" id="myTabContent">
    
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
      
        <table class="table table-dark table-hover tableFixHead my-custom-scrollbar table-wrapper-scroll-y table-borderless" style=" font-size:12px;background:rgba(34,34,34,0.1);">
<thead >
<tr>
<th scope="col" style="background:rgba(34,34,34,1)">LEVEL</th>
<th scope="col" style="background:rgba(34,34,34,1)">BOQ</th>
<th scope="col" style="background:rgba(34,34,34,1)">Descreption</th>
<th scope="col" style="background:rgba(34,34,34,1)">Unit</th>
<th scope="col" style="background:rgba(34,34,34,1)">Quantites</th>
<th scope="col" style="background:rgba(34,34,34,1)">Cumulative Certified</th>
<th scope="col" style="background:rgba(34,34,34,1)">Current Certified</th>
</tr>
</thead>
<tbody id="BOQtable"  style="cursor: pointer;">

</tbody>

<tfoot id="BOQGrandTotal">
</tfoot>

</table>
      
      
      </div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
      <input id="search_activitiesList" type="Text" placeholder="Search for Activity.." />
      <div class="list-group-flush my-custom-scrollbar table-wrapper-scroll-y" style="max-height:89vh;" id="ActivitiesList">
          
          
      </div> 
      </div>
  
  <div class="tab-pane fade" id="workOrder" role="tabpanel" aria-labelledby="workOrder-tab">
      
      <div class="card_custimzed card ">
      <div class="card-header"> Look ahead <? echo date("F"); ?> (<? echo date("Y"); ?>)</div>
      
      </div>
      
      <div class="card_custimzed card ">
  <div class="card-header">
    <a data-toggle="collapse" class="collapsed" data-parent="#workOrder" href="#divFirstWeek"><i class="fa fa-chevron-circle-down fa-lg float-left tab-arrow" style="color:gray ;margin-top:5px" aria-hidden="true"> </i>1st Week</a>
    
    <p class="float-right" style="margin-bottom:0px;">01/<? echo date("m"); ?>/2020</p>
  </div>
  
  <div id="divFirstWeek" class="panel-collapse collapse in my-custom-scrollbar table-wrapper-scroll-y">
      <div class="panel-body">
  <ul class="list-group list-group-flush my-attr-scrollbar table-wrapper-scroll-y" id="FirstWeek" style="cursor:pointer;">
      
    <li class="list-group-item list-group-item-action" onclick="setSquenceOfWork(1)" style="background:aliceblue; <? echo $display; ?>"> <i class="fa fa-plus" style="color:#28a745;" aria-hidden="true"></i> Sequence of Work </li>
    <li class="list-group-item"><a href="#" onclick="selectall('FirstWeek')" class="selectall">select all</a> <a class="selectall" href="#" onclick="unselectall('FirstWeek')">unselect all</a> <a class="selectall" href="#" onclick="viewer.isolate(viewer.getSelection())">isolate</a></li>
    
  </ul>
  </div>
  </div>
  
</div>

<div class="card card_custimzed" >
  <div class="card-header">
    <a data-toggle="collapse" class="collapsed" data-parent="#workOrder" href="#divSecondWeek"><i class="fa fa-chevron-circle-down fa-lg float-left tab-arrow" style="color:gray ;margin-top:5px" aria-hidden="true"> </i>2nd Week</a>
<p class="float-right" style="margin-bottom:0px;">08/<? echo date("m"); ?>/2020</p>
  </div>
  
  <div id="divSecondWeek" class="panel-collapse collapse in my-custom-scrollbar table-wrapper-scroll-y">
      <div class="panel-body">
  <ul class="list-group list-group-flush my-attr-scrollbar table-wrapper-scroll-y" id="SecondWeek" style="cursor:pointer;">
     <li class="list-group-item list-group-item-action" onclick="setSquenceOfWork(2)" style="background:aliceblue; <? echo $display; ?>"> <i class="fa fa-plus" style="color:#28a745;" aria-hidden="true"></i> Sequence of Work </li> 
    <li class="list-group-item"><a href="#" onclick="selectall('SecondWeek')" class="selectall">select all</a> <a class="selectall" href="#" onclick="unselectall('SecondWeek')">unselect all</a> <a class="selectall" href="#" onclick="viewer.isolate(viewer.getSelection())">isolate</a></li>

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

<div class="card card_custimzed" >
  <div class="card-header">
   <a data-toggle="collapse" class="collapsed" data-parent="#workOrder" href="#divThirdWeek"><i class="fa fa-chevron-circle-down fa-lg float-left tab-arrow" style="color:gray ;margin-top:5px" aria-hidden="true"> </i>3rd Week </a>
<p class="float-right" style="margin-bottom:0px;">15/<? echo date("m"); ?>/2020</p>
  </div>
  
  <div id="divThirdWeek" class="panel-collapse collapse in my-custom-scrollbar table-wrapper-scroll-y">
      <div class="panel-body">
  <ul class="list-group list-group-flush my-attr-scrollbar table-wrapper-scroll-y" id="ThirdWeek" style="cursor:pointer;">
    <li class="list-group-item list-group-item-action" onclick="setSquenceOfWork(3)" style="background:aliceblue; <? echo $display; ?>"> <i class="fa fa-plus" style="color:#28a745;" aria-hidden="true"></i> Sequence of Work </li> 
        <li class="list-group-item"><a href="#" onclick="selectall('ThirdWeek')" class="selectall">select all</a> <a class="selectall" href="#" onclick="unselectall('ThirdWeek')">unselect all</a> <a class="selectall" href="#" onclick="viewer.isolate(viewer.getSelection())">isolate</a></li>

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

<div class="card card_custimzed">
  <div class="card-header">
    <a data-toggle="collapse" class="collapsed" data-parent="#workOrder" href="#divFourthWeek"><i class="fa fa-chevron-circle-down fa-lg float-left tab-arrow" style="color:gray ;margin-top:5px" aria-hidden="true"> </i>4th Week </a>
    <p class="float-right" style="margin-bottom:0px;">22/<? echo date("m"); ?>/2020</p>
  </div>
  
  <div id="divFourthWeek" class="panel-collapse collapse in my-custom-scrollbar table-wrapper-scroll-y">
      <div class="panel-body">
  <ul class="list-group list-group-flush my-attr-scrollbar table-wrapper-scroll-y" id="FourthWeek" style="cursor:pointer;">
     <li class="list-group-item list-group-item-action" onclick="setSquenceOfWork(4)" style="background:aliceblue; <? echo $display; ?>"> <i class="fa fa-plus" style="color:#28a745;" aria-hidden="true"></i> Sequence of Work </li> 
             <li class="list-group-item"><a href="#" onclick="selectall('FourthWeek')" class="selectall">select all</a> <a class="selectall" href="#" onclick="unselectall('FourthWeek')">unselect all</a> <a class="selectall" href="#" onclick="viewer.isolate(viewer.getSelection())">isolate</a></li>

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


        
</div>
</div>


    <script>
        
          var url = new URL(window.location.href);
var gettoken = url.searchParams.get("access_code");
if(gettoken != null){
    if(gettoken == "QWhtYWRVZHdhbktpbmc"){
        var firstTime = localStorage.getItem("first_time");
if(!firstTime) {
    // first time loaded!
    try{
        window.open('/viewer.php?doc=' + viewer.model.getData().urn,"_self");
    }catch(err){}
    

}
else{
        var loginbtn = document.querySelector('.login');
        loginbtn.classList.add('hidden');
}
        
    }
}

    </script>

    <!-- Developer JS -->
    

     <script>
        var selected;
        var viewer;
        
        //get views from my database
        //
        
        var options = {
            env: 'AutodeskProduction',
            accessToken: <? echo "'". json_decode($data,true)['access_token'] . "'" ?>,
            api: 'derivativeV2'    // for models uploaded to EMEA change this option to 'derivativeV2_EU'
        };
        var htmlElement = document.getElementById('MyViewerDiv');
        viewer = new Autodesk.Viewing.GuiViewer3D(htmlElement);
        var documentId = <? echo "'urn:" . $doc . "'" ?>;
        
        Autodesk.Viewing.Initializer(options, function onInitialized(){
            // Find the element where the 3d viewer will live.    
            var htmlElement = document.getElementById('MyViewerDiv');
            //console.log(htmlElement);
            if (htmlElement) {
                // Create and start the viewer in that element    
                viewer.start();
         Autodesk.Viewing.Document.load(documentId, onDocumentLoaded);
            }
                
            });
                
            
           
        

        /**
        * Autodesk.Viewing.Document.load() success callback.
        * Proceeds with model initialization.
        */
        function onDocumentLoaded(doc) {
            
             mydoc = doc;
            var defaultModel = doc.getRoot().getDefaultGeometry();
            viewer.loadDocumentNode(doc, defaultModel, {
                keepCurrentModels: true,
                
                
            }).then(onLoadModelSuccess);
            
            
        }

        /**
         * Autodesk.Viewing.Document.load() failure callback.
         */
        function onDocumentLoadFailure(viewerErrorCode) {
            console.error('onDocumentLoadFailure() - errorCode:' + viewerErrorCode);
        }

        /**
         * viewer.loadModel() success callback.
         * Invoked after the model's SVF has been initially loaded.
         * It may trigger before any geometry has been downloaded and displayed on-screen.
         */
         var event1;
        function onLoadModelSuccess(model) {
            
            //updateViewsMenu();
            //updateTasksMenu();
            
            //selection
            
           
            
            
                
    
    
            //console.log('onLoadModelSuccess()!');
            //console.log('Validate model loaded: ' + (viewer.model === model));
            
            //create initial configuration function for view
            //viewer.setSelectionMode(1);
            
            
            //remove xray 
            
            viewer.profile.settings.ghosting = true;
            viewer.setProfile(viewer.profile);
            
             // hide model tools 
             viewer.modelTools.setVisible(true);
             //hide settings tools 
             viewer.settingsTools.setVisible(true);
            viewer.setSelectionMode(1);
            viewer.setGroundShadow(false);
            viewer.setLightPreset(18);
            
            viewer.setGhosting(false)
            viewer.loadExtension('MyAwesomeExtension');
            viewer.loadExtension('Autodesk.DocumentBrowser');
            
            var button = document.getElementById('showMyAwesomePanel');
            button.children[0].innerHTML = '<i class="fa fa-percent" aria-hidden="true"></i>';
            
             
    
    
    
    updateBOQtable();
    
    updateWorkorder();
    getProgressdb();
    
    
        

    var grandTotal = new GrandTotalPanel(viewer,NOP_VIEWER.container,'grandTotal','Grand Total');
    grandTotal.setVisible(true);
    viewer.addEventListener(Autodesk.Viewing.OBJECT_TREE_CREATED_EVENT, function( event ) {
    
        //hideGrids();
        urnId = viewer.model.getData().urn;
        updateActivitiesList();
        progressbar(false);
        if(viewer.getDimensions().width == 3){
            
            $("#mySidenav").addClass("sidenav1").removeClass("sidenav2");
            $("#MyViewerDiv").addClass("viewer1").removeClass("viewer2");
            $("#grandTotal").css("display","none")
            
            
        }
        
    });
    
    viewer.addEventListener(Autodesk.Viewing.SHOW_ALL_EVENT, function( event ) {
    
        //hideGrids();
         viewer.hide([67287,67701]);
    });
    
    viewer.addEventListener(Autodesk.Viewing.OBJECT_TREE_LOAD_PROGRESS_EVENT, function( event ) {
        viewer.hide([67287,67701]);
        console.log(event);
        
    });
    
    
    
       viewer.addEventListener(Autodesk.Viewing.SELECTION_CHANGED_EVENT, function( event ) {
               selid = event.dbIdArray[0];
               //console.log(event);
               event1 = event;
               
                model.getProperties( event.dbIdArray[0], function(prop){
                    
                    var level,boq;
                    prop.properties.forEach(function (item){

                        if(item["displayName"] == "L3" || item["displayName"] == "L3 (Level)"){
                            //console.log(item["displayName"] + ":" + item["displayValue"]);
                            level = item["displayValue"];
                        }
                        if(item["displayName"].includes("BOQ Code") ){
                            //console.log(item["displayName"] + ":" + item["displayValue"]);
                            boq = item["displayValue"];
                        }
                        
		
		
	
                        
                    });
                    
                    
			$("tr").each(function(){
				var current_keyword = $(this).text();
				
				    if(current_keyword.includes(level + boq)){
				        $(this).addClass('selectedfrommodel');
				        //$('table').scrollTop( 0 );
				        $('table').animate({
                    scrollTop: $(this).offset().top - $('#BOQtable').offset().top
                }, 500);
				    }
					    	 	
				
				else{$(this).removeClass('selectedfrommodel');    };
			});    	
	

                }, function(){console.log("nooo")} );
                
                
                
                // update calc panel 
                ElementsCalc();
                
                
                
                // if progress collection is on 
                
                if(progressClicked){
                    var notfound = true;
                    Forgeid_Progress.forEach(function (ele){
                       if (event.dbIdArray[0] == ele.forgeid){
                       
                           document.getElementById('progress_input').value = ele.progress;
                           notfound = false;
                       }
                    });
                    if(notfound){
                        document.getElementById('progress_input').value = 0;
                    }
                }
                
                
    });
    
    /*
     var grids = 'urn: dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6ZXRqbGprN2huM2dpdmNpemR6d2NiaGhzbHk4NHB4MTZfdHV0b3JpYWxfYnVja2V0LzNEJTIwR3JpZHMlMjBNb2RlbC5ud2M=';
            Autodesk.Viewing.Document.load(grids, (doc) => {
                var viewables = doc.getRoot().getDefaultGeometry();
                viewer.loadDocumentNode(doc, viewables,{
                    
                    keepCurrentModels: true,
                    //placementTransform: (new THREE.Matrix4()).setPosition({x:0,y:0,z:29000} ),
                    //globalOffset: {x:0,y:0,z:29000}
                })
                .then( onLoadFinished );
            });*/
 
        
   

}
        /**
         * viewer.loadModel() failure callback.
         * Invoked when there's an error fetching the SVF file.
         */
        function onLoadModelError(viewerErrorCode) {
            console.error('onLoadModelError() - errorCode:' + viewerErrorCode);
            location.reload();

        }

        function onLoadFinished(doc){
            
            console.log(doc);
           

            
        }
        

        

    </script>

    <script>
        
          //document.getElementById("mySidenav").style.width = "30%";
  //document.getElementById("MyViewerDiv").style.marginRight = "30%";
  
// $("#MyViewerDiv").resizable();
// $('#MyViewerDiv').resize(function(){
//   $('#mySidenav').width($("#parent").width()-$("#MyViewerDiv").width()); 
//   viewer.resize();
// });
// $(window).resize(function(){
//   $('#mySidenav').width($("#parent").width()-$("#MyViewerDiv").width()); 
//   $('#MyViewerDiv').height($("#parent").height()); 
//   viewer.resize();
// });

/*
$("#mySidenav").swipe( {
     swipeLeft:function(event, direction, distance, duration, fingerCount) {
          $(".nav-tabs .nav-item a.active").closest('li').next('li').find('a').tab('show');
          //alert("LEFT");
        },
     swipeRight:function(event, direction, distance, duration, fingerCount) {
          $(".nav-tabs .nav-item a.active").closest('li').prev('li').find('a').tab('show');
          //alert("RIGHT");
        },
  });
  */
  
    </script>
	
	
	
	
	

  </body>
  
  <footer>

    </footer>
</html>