<!doctype html>
<html lang="en">

<head>
	<title>[[*longtitle]] | [[++site_name]]</title>
	<base href="[[!++site_url]]">
	<meta charset="[[++modx_charset]]">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta name="keywords" content="[[*introtext]]">
	<meta name="description" content="[[*description]]">
	<link rel="icon" href="client-assets/images/favicon.ico?v=2" type="image/x-icon"> [[!Profile]]
	
	<script type="text/javascript">
    	window.dataLayer = window.dataLayer || [];
    
    	function gtag() {
    		dataLayer.push(arguments);
    	}
    	gtag('js', new Date());
    	gtag('set', {
    		'user_id': '[[+modx.user.id]]'
    	}); // Set the user ID using signed-in user_id.
    	gtag('config', 'UA-133963301-1');
	</script>
	
	<link href="https://cdn.jsdelivr.net/npm/simple-datatables@latest/dist/style.css" rel="stylesheet" />
	<link href="client-assets/css/dashboard-2021.css" rel="stylesheet" />
	<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/js/all.min.js" crossorigin="anonymous"></script>
	<link href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css" rel="stylesheet" crossorigin="anonymous" />
	<script src="client-assets/js/skycons.js"></script>
	<style>
    	.btn-append {
    		color: #495057;
    		background-color: #e9ecef;
    		border: 1px solid #ced4da;
    	}
    	.footer {
    		position: absolute;
    		bottom: 0;
    		width: 100%;
    		height: 60px;
    		line-height: 60px;
    	}
	</style>
</head>

<body class="sb-nav-fixed" id="page-top"> 
    [[!Personalize?
        &yesChunk=`navHeaderLogged`
        &noChunk=`navHeader`
        &allowedGroups=`basicClients,bacicAdmin,companyClients,companyManagers`
    ]]
    
	<div id="layoutSidenav">
	    <div id="layoutSidenav_nav">
    		<!-- Sidebar -->
    		[[Wayfinder?
    		    &startId=`2` 
        		&displayStart=`0` 
        		&startitemTpl=`startitemTpl` 
        		&selfClass=`show` 
        		&level=`2`
        		&outerTpl=`outer`
        		    &outerClass=`sb-sidenav accordion sb-sidenav-dark`
        		&rowTpl=`row`
        		    &rowClass=`nav-link`
        		&parentRowTpl=`parentRow`
        		    &parentClass=`nav-link collapsed`
        		&innerTpl=`inner`
        		    &innerClass=`collapse`
        		&innerRowTpl=`secondInner`
        		    &innerRowClass=`nav-link`
    		]]
        </div>
		
		<div id="layoutSidenav_content">
			<main>

				<div class="container-fluid px-4">
				    <h1 class="mt-4">[[*pagetitle]]</h1>

					<ol class="breadcrumb mb-4"> [[$dash-breadcrumbs]] </ol>
					
					<div class="row">
					    [[!pdf-header]]

<div class="grid">
    [[!logoHeader]]
    [[!waterAnalysisClient]]
    
    <div class="clearfix"></div>
    
    
    <!-- GRAPH BANNER -->
    
    <div class="nav-wrap">
        <div class="graph-header text-center" style="width: 100%;">ANALYSIS RESULTS</div>
    </div>
    
    <div class="clearfix"></div>
    <hr>
    
    <!-- CHART HEADER  -->
    
    <table class="chart">
        <tbody>
          <tr class="chart-header">
            <th colspan=3 class="black text-center col-50 border-left border-right border-top">ELEMENT</th>
            <th colspan=3 class="black text-center col-50 border-right border-top">STATUS</th>
          </tr>
          
          <tr class="chart-header-sub">
            <th class="black text-center col-16 border-bottom border-left"></th>
            <th class="black text-center col-16 border-bottom">DESIRED</th>
            <th class="black text-center col-16 border-bottom">FOUND</th>
            <th class="text-center col-16 border-left stripe-1">LIGHT</th>
            <th class="text-center col-16 border-left stripe-1">MEDIUM</th>
            <th class="text-center col-16 border-left border-right stripe-1">HEAVY</th>
          </tr>
          
          <tr>
            <td class="border-left"></td>
            <td class="border-left"></td>
            <td class="border-left nutrient-balance"></td>
            <td class="border-left"></td>
            <td class="border-left"></td>
            <td class="border-left border-right"></td>
          </tr>
          
          [[!waterAnalysisCalcs? &element=cec  &nutrient=`CEC` &graph=lightorangeGraph]]
          [[!waterAnalysisCalcs? &element=tec  &nutrient=`TEC` &graph=lightorangeGraph]]
          
          <tr class="chart-header-sub">
            <th class="text-center col-16 border-left white"></th>
            <th class="text-center col-16 border-left white"></th>
            <th class="text-center col-16 border-left nutrient-balance"></th>
            <th class="text-center col-16 border-left stripe-1">DEFICIT</th>
            <th class="text-center col-16 border-left stripe-1">IDEAL</th>
            <th class="text-center col-16 border-left border-right stripe-1">HIGH</th>
          </tr>
          
          [[!waterAnalysisCalcs? &element=ph_h2o  &nutrient=`pH-level (H20)` &graph=lightorangeGraph]]
          [[!waterAnalysisCalcs? &element=ph_cacl2  &nutrient=`pH-level (CaCl2)` &graph=lightorangeGraph]]
          [[!waterAnalysisCalcs? &element=ocarbon  &nutrient=`Organic Carbon` &graph=lightorangeGraph]]
          [[!waterAnalysisCalcs? &element=omatter  &nutrient=`Organic Matter` &graph=lightorangeGraph]]
        
          <tr class="chart-header-sub">
            <th colspan=3 class="col-16 border-left text-center lightblue">RATIOS</th>
            <th class="text-center col-16 border-left stripe-1"></th>
            <th class="text-center col-16 border-left stripe-1"></th>
            <th class="text-center col-16 border-left border-right stripe-1"></th>
          </tr>
          
          [[!soilAnalysisRatio? &element=`ca_mehlick3` &elementTwo=`mg_mehlick3`  &rec=`ca_mg_ratio` &nutrient=`Ca:Mg Ratio` &graph=lightblueGraph]]
          [[!waterAnalysisCalcs? &element=NH3_N  &nutrient=`Total Nitrogen` &type=`%` &graph=lightblueGraph]]
          [[!waterAnalysisCalcs? &element=p_mehlick  &nutrient=`Total Carbon` &type=`%` &graph=lightblueGraph]]
          [[!soilAnalysisRatio? &element=`p_bray2` &elementTwo=`NO3_N` &rec=`c_n_ratio` &nutrient=`C:N Ratio` &graph=lightblueGraph]]
          
         
          <tr class="chart-header-sub">
            <th colspan=3 class="col-16 border-left text-center lightgreen">MAJOR ELEMENTS</th>
            <th class="text-center col-16 border-left stripe-1"></th>
            <th class="text-center col-16 border-left stripe-1"></th>
            <th class="text-center col-16 border-left border-right stripe-1"></th>
          </tr>
          
          [[!waterAnalysisCalcs? &element=NO3_N  &nutrient=`Nitrate Nitrogen` &type=ppm &graph=lightgreenGraph]]
          [[!waterAnalysisCalcs? &element=NH3_N  &nutrient=`Ammonium Nitrogen` &type=ppm &graph=lightgreenGraph]]
          [[!waterAnalysisCalcs? &element=p_mehlick  &nutrient=`Phosphorus (mehlick III)` &type=ppm &graph=lightgreenGraph]]
          [[!waterAnalysisCalcs? &element=p_bray2  &nutrient=`Phosphorus (Bray 2)` &type=ppm &graph=lightgreenGraph]]
          [[!waterAnalysisCalcs? &element=p_morgan  &nutrient=`Phosphate (morgan)` &type=ppm &graph=lightgreenGraph]]
        
          <tr class="chart-header-sub">
            <th colspan=3 class="col-16 border-left text-center lightred">TRACE ELEMENTS</th>
            <th class="text-center col-16 border-left stripe-1"></th>
            <th class="text-center col-16 border-left stripe-1"></th>
            <th class="text-center col-16 border-left border-right stripe-1"></th>
          </tr>
          
          [[!waterAnalysisCalcs? &element=s_morgan  &nutrient=`Sulfur` &type=ppm &graph=lightredGraph]]
          [[!waterAnalysisCalcs? &element=b_cacl2  &nutrient=`Boron` &type=ppm &graph=lightredGraph]]
          [[!waterAnalysisCalcs? &element=mn_dtpa  &nutrient=`Manganese` &type=ppm &graph=lightredGraph]]
          [[!waterAnalysisCalcs? &element=cu_dtpa  &nutrient=`Copper` &type=ppm &graph=lightredGraph]]
          [[!waterAnalysisCalcs? &element=zn_dtpa  &nutrient=`Zinc` &type=ppm &graph=lightredGraph]]
          [[!waterAnalysisCalcs? &element=fe_dtpa  &nutrient=`Iron` &type=ppm &graph=lightredGraph]]
          [[!waterAnalysisCalcs? &element=al  &nutrient=`Aluminium` &type=ppm &graph=lightredGraph]]
          [[!waterAnalysisCalcs? &element=sl_cacl2  &nutrient=`Silicon` &type=ppm &graph=lightredGraph]]
        
          <tr class="chart-header-sub">
            <th colspan=3 class="col-16 border-left text-center lightpurple">BASE SATURATION</th>
            <th class="text-center col-16 border-left stripe-1"></th>
            <th class="text-center col-16 border-left stripe-1"></th>
            <th class="text-center col-16 border-left border-right stripe-1"></th>
          </tr>
          
          [[!waterAnalysisCalcs? &element=`BS_ca2`  &nutrient=`Calcium` &type=`%` &graph=lightpurpleGraph]]
          [[!waterAnalysisCalcs? &element=`BS_mg2`  &nutrient=`Magnesium` &type=`%` &graph=lightpurpleGraph]]
          [[!waterAnalysisCalcs? &element=`BS_k`  &nutrient=`Potassium` &type=`%` &graph=lightpurpleGraph]]
          [[!waterAnalysisCalcs? &element=`BS_na`  &nutrient=`Sodium` &type=`%` &graph=lightpurpleGraph]]
          [[!waterAnalysisCalcs? &element=`BS_al3`  &nutrient=`Other Bases` &type=`%` &graph=lightpurpleGraph]]
          [[!waterAnalysisCalcs? &element=`BS_h`  &nutrient=`Hydrogen` &type=`%` &graph=lightpurpleGraph]]
          
          <tr class="chart-header-sub">
            <th colspan=3 class="col-16 border-left text-center lightgrey">SOLUBLE MORGAN 2 EXTRACT</th>
            <th class="text-center col-16 border-left stripe-1"></th>
            <th class="text-center col-16 border-left stripe-1"></th>
            <th class="text-center col-16 border-left border-right stripe-1"></th>
          </tr>
          
          [[!waterAnalysisCalcs? &element=s_morgan  &nutrient=`Calcium` &type=`%` &graph=lightgreyGraph]]
          [[!waterAnalysisCalcs? &element=b_cacl2  &nutrient=`Magnesium` &type=`%` &graph=lightgreyGraph]]
          [[!waterAnalysisCalcs? &element=mn_dtpa  &nutrient=`Potassium` &type=`%` &graph=lightgreyGraph]]

          <tr class="chart-header-sub">
            <th colspan=3 class="col-16 border-left text-center lightgrey">ADDITIONAL DATA</th>
            <th class="text-center col-16 border-left stripe-1">LOW</th>
            <th class="text-center col-16 border-left stripe-1">IDEAL</th>
            <th class="text-center col-16 border-left border-right stripe-1">EXCELLENT</th>
          </tr>
          
          [[!waterAnalysisCalcs? &element=s_morgan  &nutrient=`Calcium` &type=`%` &graph=lightgreyGraph]]

          <tr>
            <td class="border-bottom border-left"></td>
            <td class="border-bottom border-left"></td>
            <td class="border-bottom border-left nutrient-balance"></td>
            <td class="border-bottom border-left"></td>
            <td class="border-bottom border-left"></td>
            <td class="border-bottom border-left border-right"></td>
          </tr>
        </tbody>
    </table>

    <div class="clearfix"></div>
					</div>

				</div>

			</main>
			
			<footer class="py-4 bg-light mt-auto">
                <div class="container-fluid px-4">
                    <div class="d-flex align-items-center justify-content-between small">
                        <div class="text-muted">[[SimpleCopyright? &startYear=`2003`]]. All Rights Reserved <a href="[[~1]]"></a></div>
                        <div>
                            <a href="[[~39~]]">Privacy Policy</a>
                            &middot;
                            <a href="[[~39~]]">Terms &amp; Conditions</a>
                        </div>
                    </div>
                </div>
            </footer>
            
		</div>

	</div>

	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
	<script>
    	/*!
            * Start Bootstrap - SB Admin v7.0.3 (https://startbootstrap.com/template/sb-admin)
            * Copyright 2013-2021 Start Bootstrap
            * Licensed under MIT (https://github.com/StartBootstrap/startbootstrap-sb-admin/blob/master/LICENSE)
            */
            // 
        // Scripts
        // 
        
        window.addEventListener('DOMContentLoaded', event => {
        
            // Toggle the side navigation
            const sidebarToggle = document.body.querySelector('#sidebarToggle');
            if (sidebarToggle) {
                // Uncomment Below to persist sidebar toggle between refreshes
                // if (localStorage.getItem('sb|sidebar-toggle') === 'true') {
                //     document.body.classList.toggle('sb-sidenav-toggled');
                // }
                sidebarToggle.addEventListener('click', event => {
                    event.preventDefault();
                    document.body.classList.toggle('sb-sidenav-toggled');
                    localStorage.setItem('sb|sidebar-toggle', document.body.classList.contains('sb-sidenav-toggled'));
                });
            }
        
        });

	</script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js" crossorigin="anonymous"></script>
	<script src="https://cdn.jsdelivr.net/npm/simple-datatables@latest" crossorigin="anonymous"></script>
</body>
</html>