<!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">
					    <script type="text/javascript" src="//d3js.org/d3.v3.js"></script>
<script type="text/javascript" src="/client-assets/js/plant.js"></script>

<div class="grid-form1">
<h3 id="forms-example" class="">[[*longtitle]]</h3>

<span class="error">* required fields.</span>

[[!clientDetailsFORM]]

<form method="post" action="[[~63~]]" id="csvForm" >

    [[!Personalize?
        &yesChunk=`analysisLogged_Clientdetails`
        &noChunk=`analysis_Clientdetails`
    ]]
    
    <hr>

    <label class="col"><b>Animal Detail</b></label>

<div class="row">
    
    <div class="col-md-3 ">
        <small id="n" class="form-text text-muted">Enter Dry Matter Intake Per Day  Kg</small>
        <div class="input-group input-group-sm mb-3">
            <input type="text" class="form-control" name="lab_no" id="lab_no" placeholder="Dry Matter" ></input>
            <div class="input-group-append">
                <span class="input-group-text" id="">kg</span>
            </div>
        </div>
    </div>

    <div class="col-md-3 ">
        <small for="batch_no">Animal Weight</small>
        <div class="input-group input-group-sm mb-3">
            <input type="text" class="form-control" name="batch_no" id="batch_no" placeholder="Batch No">
            <div class="input-group-append">
                <span class="input-group-text" id="">kg</span>
            </div>
        </div>
    </div>
    
    <div class="col-md-3 ">
        <small id="calving_month" class="form-text text-muted">Calving Month</small>
        <input class="form-control form-control-sm" name="calving_month" id="datepicker" placeholder="Month" data-date="102/2012" data-date-format="mm/yyyy" data-date-viewmode="years" data-date-minviewmode="months" ></input>
        <script>
            $('#datepicker').datepicker({
                uiLibrary: 'bootstrap4',
                format: "mm-yyyy",
                startView: "year", 
                minView: "year"
            });
        </script>
    </div>

    <div class="col-md-3 ">
    	<small for="sample_id" class="form-text text-muted">Lactation Period<span class="error">*</span></small>
    	<div><select name="analysis_type" id="analysis_type" class="form-control form-control-sm" required>
    		<option>Select the Lactation Period...</option>
    		<option id="peak">Peak Lactation</option>
    		<option id="mid">Mid Lactation</option>
    		<option id="late">Late Lactation</option>
    	</select>
    	</div>
    </div>

</div>
    <div class="row">
    <div class="col-md-3  mb-0">
    	<small id="analysis_type" class="form-text text-muted">Analysis Type<span class="error">*</span></small>
    	<div><select name="analysis_type" id="analysis_type" class="form-control form-control-sm" required>
    		<option>Select the type of Analysis...</option>
    		<option id="ash">Dry Ash Test</option>
    		<option id="sap">Sap Analysis</option>
    		<option id="field">Field Test</option>
    	</select></div>
    </div>

    <div class="col-md-3  mb-0">
        <small id="lab_no" class="form-text text-muted">Lab No</small>
        <div class="input-group input-group-sm mb-0">
            <input type="text" class="form-control form-control-sm" name="lab_no" id="lab_no" placeholder="Lab No"></input>
        
        </div>
    </div>
    
    <div class="col-md-3  mb-0">
        <small id="batch_no" class="form-text text-muted">Batch No</small>
        <div class="input-group input-group-sm mb-0">
            <input type="text" class="form-control form-control-sm" name="batch_no" id="batch_no" placeholder="Batch No"></input>
            
        </div>
    </div>
    <div class="col-md-3  mb-0">
        <small id="date_sampled" class="form-text text-muted">Date Sampled</small>
        <input data-provide="datepicker" class="form-control form-control-sm" name="date_sampled" id="datepicker" placeholder="Date Sampled" data-date-format="dd/mm/yyyy" data-date-end-date="0d" ></input>
        <script>
            $('#datepicker').datepicker({
                uiLibrary: 'bootstrap4',
                calendarWeeks: 'true',
                todayHighlight: 'true'
            });
        </script>
    </div>
    
    <!-- Hidden Fields for Database -->
    <input type="hidden" class="form-control form-control-sm" name="m_user" id="m_user" placeholder="[[+modx.user.id]]" required>
    <input type="hidden" class="form-control form-control-sm" name="client_id" id="client_id" placeholder="[[+modx.user.username]]" required>
</div>

<div class="row">
    <div class="col-md-4 ">
        <small id="lab_no" class="form-text text-muted">Sample ID<span class="error">*</span></small>
        <input type="text" class="form-control form-control-sm" name="sample_id" id="sample_id" placeholder="Sample Id" required></input>
    </div>
    
    <div class="col-md-4 ">
        <small id="lab_no" class="form-text text-muted">Site ID</small>
        <input type="text" class="form-control form-control-sm" name="site_id" id="site_id" placeholder="Paddock Id"></input>
    </div>

    [[!croptypeFORM]]
</div>

<hr class="my-2">

<label class="col mb-0"><b>Analysis Inputs</b></label>
		
<div class="row">
    
    <div class=" col-md-2">
    	<small id="ca" class="form-text text-muted">Calcium</small>
        <div class="input-group input-group-sm mb-0">
            <input type="text" class="form-control form-control-sm" name="ca" id="ca" placeholder="Ca - Calcium"></input>
	    <div class="input-group-append">
                <input class="btn btn-append" type="button" id="calcium" value="ppm" onClick="conversion(this, calcium, ca, 10000)" ></input>
            </div>
        </div>
    </div>

	<div class=" col-md-2">
	<small id="p" class="form-text text-muted">Phosphorus</small>
        <div class="input-group input-group-sm mb-30">
            <input type="text" class="form-control form-control-sm" name="p" id="p" placeholder="P - Phosphorus"></input>
	    <div class="input-group-append">
                <input class="btn btn-append" type="button" id="phosphorus" value="ppm" onClick="conversion(this, phosphorus, p, 10000)" ></input>
            </div>
        </div>
    </div>
    
    <div class=" col-md-2">
	<small id="mg" class="form-text text-muted">Magnesium</small>
        <div class="input-group input-group-sm mb-0">
            <input type="text" class="form-control form-control-sm" name="mg" id="mg" placeholder="Mg - Magnesium"></input>
	    <div class="input-group-append">
                <input class="btn btn-append" type="button" id="magnesium" value="ppm" onClick="conversion(this, magnesium, mg, 10000)" ></input>
            </div>
        </div>
    </div>
	
	<div class=" col-md-2">
	<small id="k" class="form-text text-muted">Postassium</small>
        <div class="input-group input-group-sm mb-0">
            <input type="text" class="form-control form-control-sm" name="k" id="k" placeholder="K - Postassium"></input>
	    <div class="input-group-append">
                <input class="btn btn-append" type="button" id="postassium" value="ppm" onClick="conversion(this, postassium, k, 10000)" ></input>
            </div>
        </div>
    </div>
    
    <div class=" col-md-2">
	<small id="nSmall" class="form-text text-muted">Nitrogen</small>
        <div class="input-group input-group-sm mb-0">
            <input type="text" class="form-control form-control-sm" name="n" id="n" placeholder="N - Nitrogen"></input>
	    <div class="input-group-append">
                <input class="btn btn-append" type="button" id="nitrogen" value="ppm" onClick="conversion(this, nitrogen, n, 10000)" ></input>
            </div>
        </div>
    </div>
	
	<div class=" col-md-2">
	<small id="s" class="form-text text-muted">Sulphur</small>
        <div class="input-group input-group-sm mb-0">
            <input type="text" class="form-control form-control-sm" name="s" id="s" placeholder="S - Sulphur"></input>
	    <div class="input-group-append">
                <input class="btn btn-append" type="button" id="sulphur" value="ppm" onClick="conversion(this, sulphur, s, 10000)" ></input>
            </div>
        </div>
    </div>

</div>


	
<div class="row">
	<div class=" col-md-2">
		<small id="na" class="form-text text-muted">Soduim</small>
        <div class="input-group input-group-sm mb-0">
            <input type="text" class="form-control form-control-sm" name="na" id="na" placeholder="Na - Soduim"></input>
    	<div class="input-group-append">
                <input class="btn btn-append" type="button" id="soduim" value="ppm" onClick="conversion(this, soduim, na, 10000)" ></input>
            </div>
        </div>
    </div>
    
    <div class=" col-md-2">
		<small id="b" class="form-text text-muted">Boron</small>
        <div class="input-group input-group-sm mb-0">
            <input type="text" class="form-control form-control-sm" name="b" id="b" placeholder="B - Boron"></input>
    	<div class="input-group-append">
                <input class="btn btn-append" type="button" id="boron" value="ppm" onClick="conversion(this, boron, b, 10000)" ></input>
            </div>
        </div>
    </div>
    
    <div class=" col-md-2">
		<small id="zn" class="form-text text-muted">Zinc</small>
        <div class="input-group input-group-sm mb-0">
            <input type="text" class="form-control form-control-sm" name="zn" id="zn" placeholder="Zn - Zinc"></input>
    	<div class="input-group-append">
                <input class="btn btn-append" type="button" id="zinc" value="ppm" onClick="conversion(this, zinc, zn, 10000)" ></input>
            </div>
        </div>
    </div>
    
    <div class=" col-md-2">
		<small id="cu" class="form-text text-muted">Copper</small>
        <div class="input-group input-group-sm mb-0">
            <input type="text" class="form-control form-control-sm" name="cu" id="cu" placeholder="Cu - Copper"></input>
    	<div class="input-group-append">
                <input class="btn btn-append" type="button" id="copper" value="ppm" onClick="conversion(this, copper, cu, 10000)" ></input>
            </div>
        </div>
    </div>
	
	<div class=" col-md-2">
		<small id="mn" class="form-text text-muted">Manganese</small>
        <div class="input-group input-group-sm mb-0">
            <input type="text" class="form-control form-control-sm" name="mn" id="mn" placeholder="Mn - Manganese"></input>
    	<div class="input-group-append">
                <input class="btn btn-append" type="button" id="manganese" value="ppm" onClick="conversion(this, manganese, mn, 10000)" ></input>
            </div>
        </div>
    </div>
    
	<div class=" col-md-2">
		<small id="fe" class="form-text text-muted">Iron</small>
        <div class="input-group input-group-sm mb-0">
            <input type="text" class="form-control form-control-sm" name="fe" id="fe" placeholder="Fe - Iron"></input>
    	<div class="input-group-append">
                <input class="btn btn-append" type="button" id="iron" value="ppm" onClick="conversion(this, iron, fe, 10000)" ></input>
            </div>
        </div>
    </div>
	
</div>

<div class="row">
	<div class=" col-md-2">
		<small id="m" class="form-text text-muted">Molybdenum</small>
        <div class="input-group input-group-sm mb-0">
            <input type="text" class="form-control form-control-sm" name="m" id="m" placeholder="M - Molybdenum"></input>
     	<div class="input-group-append">
                <input class="btn btn-append" type="button" id="molybdenum" value="ppm" onClick="conversion(this, molybdenum, m, 10000)" ></input>
            </div>
        </div>
    </div>
	
	<div class=" col-md-2">
		<small id="co" class="form-text text-muted">Cobalt</small>
        <div class="input-group input-group-sm mb-0">
            <input type="text" class="form-control form-control-sm" name="co" id="co" placeholder="Co - Cobalt"></input>
	 	<div class="input-group-append">
                <input class="btn btn-append" type="button" id="cobalt" value="ppm" onClick="conversion(this, cobalt, co, 10000)" ></input>
            </div>
        </div>
    </div>
	
	<div class=" col-md-2">
		<small id="se" class="form-text text-muted">Selenium</small>
        <div class="input-group input-group-sm mb-0">
            <input type="text" class="form-control form-control-sm" name="se" id="se" placeholder="Se - Selenium"></input>
	 	<div class="input-group-append">
                <input class="btn btn-append" type="button" id="selenium" value="ppm" onClick="conversion(this, selenium, se, 10000)" ></input>
            </div>
        </div>
    </div>
	
	<div class=" col-md-2">
		<small id="ch" class="form-text text-muted">Chloride</small>
        <div class="input-group input-group-sm mb-0">
            <input type="text" class="form-control form-control-sm" name="ch" id="ch" placeholder="Ch - Chloride"></input>
	 	<div class="input-group-append">
                <input class="btn btn-append" type="button" id="chloride" value="ppm" onClick="conversion(this, chloride, cg, 10000)" ></input>
            </div>
        </div>
    </div>
    
</div>


<script type="text/javascript">
    function conversion(value, input, element, conversion) {
        var Nvalue = document.getElementById(element.id).value;
        var el = document.getElementById(input.id);
        if ( el.value === "%" ) {
            el.value = "ppm";
            document.getElementById(element.id).value = Nvalue*conversion;
        } else {
            el.value = "%";
            document.getElementById(element.id).value = Nvalue/conversion;
        }
    }
</script>
    
	
		
    <button form="csvForm" type="submit" class="btn btn-success">Submit</button>
</form>

[[!newClientDetails]]

<hr>

<label class="col"><b>Excel/CSV Upload</b></label>

<div class="input-group mt-3">
  <div class="custom-file">
    <input type="file" class="custom-file-input" id="CM-upload">
    <label class="custom-file-label" for="CM-upload">Choose file</label>
  </div>
  <div class="input-group-append">
    <button class="btn btn-outline-secondary" type="button" id="CM-download">Download</button>
  </div>
</div>

<hr>

<script type="text/javascript">
    function Choice() {
        y = document.getElementById("client_id");
        document.getElementById("email").value = email[y.selectedIndex];
        document.getElementById("name").value = name[y.selectedIndex];
        document.getElementById("company").value = company[y.selectedIndex];
        document.getElementById("site_address").value = site_address[y.selectedIndex];
        document.getElementById("state_postcode").value = state_postcode[y.selectedIndex];
        }
</script>

</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>