<!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">
					    <div class="container-fluid">
	

	[[!Profile]]
	<div class="row">
		<div class="col-sm-3">
			<h2 class="text-center">[[+fullname]]</h2>
		</div>
		<div class="col-sm-9">
		    <!-- <a href="/users" class="pull-right">
		        <img title="profile image" class="img-circle img-responsive" src="">
		    </a> -->
		</div>
	</div>

	
	<div class="row">
		
		<div class="col-sm-3">
			<!--left col-->
			<div class="text-center">
				<img src="[[+photo]]" class="avatar img-circle img-fluid img-thumbnail" alt="avatar"> <!-- https://ssl.gstatic.com/accounts/ui/avatar_2x.png -->
				    <h6> </h6>
				<!-- <input type="file" class="text-center center-block file-upload"> -->
				
				<span class="error">[[+error.photo]]</span>
				[[!UpdateProfile? &useExtended=`1` &submitVar=`file-upload` &preHooks=`user_profile_image`]]
				<form class="form" enctype="multipart/form-data" action="[[~[[*id]]]]" method="post">
				    [[+login.update_success:if=`[[+login.update_success]]`:is=`1`:then=`[[%login.profile_updated? &namespace=`login` &topic=`updateprofile`]]`]]
				    <input type="hidden" name="nospam:blank" value="" />

				    <div class="input-group mb-3">
                      <div class="custom-file">
                        <input type="file" class="custom-file-input" name="photo" id="photo" value="[[+photo]]" >
                        <label class="custom-file-label text-left" for="photo">Choose file</label>
                      </div>
                      <div class="input-group-append">
                        <button class="btn btn-outline-secondary" id="file-upload" name="file-upload" type="button">Upload</button>
                      </div>
                    </div>


				</form>
			</div>
			</hr>
			<br>
			
			<div class="alert alert-success" role="alert">Your Account level is: <b>FREE</b> <a href="#" class="alert-link">Upgrade Account</a></div>
			<div class="alert" role="alert"></div>
			
			<!--
    			<div class="panel panel-default">
    				<div class="panel-heading">Website <i class="fa fa-link fa-1x"></i></div>
    				<div class="panel-body"><a href="#"></a></div>
    			</div>
    			
    			<ul class="list-group">
    				<li class="list-group-item text-muted">Activity <i class="fa fa-dashboard fa-1x"></i></li>
    				<li class="list-group-item text-right"><span class="pull-left"><strong>Shares</strong></span></li>
    				<li class="list-group-item text-right"><span class="pull-left"><strong>Likes</strong></span></li>
    				<li class="list-group-item text-right"><span class="pull-left"><strong>Posts</strong></span></li>
    				<li class="list-group-item text-right"><span class="pull-left"><strong>Followers</strong></span></li>
    			</ul>
			
    			<div class="panel panel-default">
    				<div class="panel-heading">Social Media</div>
    				<div class="panel-body">
    					<i class="fa fa-facebook fa-2x"></i> <i class="fa fa-github fa-2x"></i> <i class="fa fa-twitter fa-2x"></i> <i class="fa fa-pinterest fa-2x"></i> <i class="fa fa-google-plus fa-2x"></i>
    				</div>
    			</div>
			-->
			
		</div>
		<!--/col-3-->
		
		<div class="col-sm-9">

			<ul class="nav nav-tabs">
				<li class="nav-item">
				    <a class="nav-link" data-toggle="tab" href="#contact-details">Your Details</a>
				</li>
				<li>
				    <a class="nav-link" data-toggle="tab" href="#change-password">Change Password</a>
				</li>
				<li>
				    <a class="nav-link" data-toggle="tab" href="#messages">Personal Messages</a>
				</li>
			</ul>
			
			<div class="tab-content">
				<div class="tab-pane" id="contact-details">
				<br>
					
					[[!UpdateProfile? 
					&submitVar=`form-save`
					&validate=`
					    fullname:required,
					    mobilephone:required,
					    email:required,
					    address:required,
					    city:required,
					    state:required,
					    zip:required`]]
					
					<div class="updprof-error">[[+error.message]]</div>
                    [[+login.update_success:is=`1`:then=`[[%login.profile_updated? &namespace=`login` &topic=`updateprofile`]]`]]
                    
                    
					<form class="form" action="[[~[[*id]]]]" method="post" id="registrationForm">
						
						<div class="form-row">
							<div class="col-md-6 ">
								<label for="fullname">Name</label>
								<input type="text" class="form-control" name="fullname" id="fullname" value="[[+fullname]]" />
								<small class="error">[[+error.fullname]]</small>
							</div>

							<div class="col-md-6 ">
								<label for="phone">Company</label>
								<input type="text" class="form-control" name="company" id="company" value="[[+fax]]" />
								<small class="error">[[+error.fax]]</small>
							</div>
						</div>
						
						<div class="form-row">
							<div class="col-md-6 ">
								<label for="phone">Phone</label>
								<input type="text" class="form-control" name="phone" id="phone" value="[[+phone]]" />
								<small class="error">[[+error.phone]]</small>
							</div>

							<div class="col-md-6 ">
								<label for="mobilephone">Mobile</label>
								<input type="text" class="form-control" name="mobilephone:required" id="mobilephone" value="[[+mobilephone]]" />
								<small class="error">[[+error.mobilephone]]</small>
							</div>
						</div>
						
						<div class="form-row">
							<div class="col-md-12">
								<label for="email">Email</label>
								<input type="email" class="form-control" name="email:required" id="email" value="[[+email]]" />
								<small class="error">[[+error.email]]</small>
							</div>
						</div>
						
						<div class="form-row">
							<div class="col-md-12">
								<label for="address">Address</label>
								<input type="text" class="form-control" name="address:required" id="address" value="[[+address]]" />
								<small class="error">[[+error.address]]</small>
							</div>
						</div>
						
						<div class="form-row">
							<div class="col-md-3 ">
								<label for="city">City</label>
								<input type="text" class="form-control" name="city:required" id="city" value="[[+city]]" />
								<small class="error">[[+error.city]]</small>
							</div>

							<div class="col-md-3 ">
								<label for="state">State</label>
								<input type="text" class="form-control" name="state:required" id="state" value="[[+state]]" />
								<small class="error">[[+error.state]]</small>
							</div>

							<div class="col-md-3 ">
								<label for="zip">Postcode</label>
								<input type="text" class="form-control" name="zip:required" id="zip" value="[[+zip]]" />
								<small class="error">[[+error.zip]]</small>
							</div>
							
							<div class="col-md-3 ">
								<label for="state">Country</label>
								<input type="text" class="form-control" name="country:required" id="country" value="[[+country]]" />
								<small class="error">[[+error.country]]</small>
							</div>
						</div>
						
						<hr>
						<h4>Industry Details</h4>
						
						<div class="form-row">
							<div class="col-md-6 ">
								<label for="fullname">Industry</label>
								<select class="form-control" name="industry" name="industry" id="industry" value="[[+website]]">
									<option selected>[[+website]]</option>
									<option name="broadacre">Broadacre</option>
									<option name="viticulture">Viticulture</option>
									<option name="horticulture">Horticulture</option>
									<option name="permaculture">Permaculture</option>
									<option name="dairy">Dairy</option>
								</select>
								<small class="error">[[+error.website]]</small>
							</div>

							<div class="col-md-6 ">
								<label for="phone">Role</label>
								<select class="form-control" name="role" name="role" id="role" value="[[+phone]]">
									<option selected>[[+phone]]</option>
									<option name="manager">Manager</option>
									<option name="viticulturist">Viticulturist</option>
									<option name="horticulturist">Horticulturist</option>
									<option name="permaculturist">Permaculturist</option>
									<option name="irrigation-manager">Irrigation Manager</option>
								</select>
								<small class="error">[[+error.phone]]</small>
							</div>
						</div>

						<div class="form-group">
							<div class="col-md-12">
								<br>
								<button class="btn btn-lg btn-success" id="form-save" name="form-save" type="submit"><i class="glyphicon glyphicon-ok-sign"></i> Save</button>
								<button class="btn btn-lg btn-warning" type="reset"><i class="glyphicon glyphicon-repeat"></i> Reset</button>
							</div>
						</div>
					
					</form>
					<hr>
				</div>
				<!--/tab-pane-->
				
				
				<div class="tab-pane" id="change-password">
					
					[[!ChangePassword?
                        &submitVar=`change-password`
                        &placeholderPrefix=`cp.`
                        &validateOldPassword=`1`
                        &validate=`nospam:blank`
                        &successMessage=`Your password is changed`
                    ]]
                    
                    <form action="[[~[[*id]]]]" method="post">
                        <input type="hidden" name="nospam" value="" />
                      <div class="form-group">
                        <label for="password_old">Old Password <span style="color: red;">[[!+cp.error.password_old]]</span></label>
                        <input type="password" class="form-control" name="password_old" id="password_old" value="[[+cp.password_old]]" aria-describedby="password_old" placeholder="Old Password">
                        <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
                      </div>
                      <div class="form-group">
                        <label for="exampleInputPassword1">New Password <span style="color: red;">[[!+cp.error.password_new]]</span></label>
                        <input type="password" class="form-control" name="password_new" id="password_new" value="[[+cp.password_new]]" placeholder="New Password">
                      </div>
                      <div class="form-group">
                        <label for="exampleInputPassword1">Confirm New Password <span style="color: red;">[[!+cp.error.password_new_confirm]]</span></label>
                        <input type="password" class="form-control" name="password_new_confirm" id="password_new_confirm" value="[[+cp.password_new_confirm]]" placeholder="Confirm New Password">
                      </div>
                      <input type="submit" class="btn btn-primary" name="change-password" value="Change Password" >
                    </form>
					
				</div>
				<!--/tab-pane-->
				
				<div class="tab-pane" id="messages">
					
				</div>
				
			</div>
			<!--/tab-pane-->
		</div>
		<!--/tab-content-->
	</div>
	<!--/col-9-->
</div>
<!--/row-->
</div>


<script>
	$(document).ready(function() {
    	var readURL = function(input) {
    	    if (input.files && input.files[0]) {
    	        var reader = new FileReader();
    	
    	        reader.onload = function (e) {
    	            $('.avatar').attr('src', e.target.result);
    	        }
    	
    	        reader.readAsDataURL(input.files[0]);
    	    }
    	}
    
    	$(".file-upload").on('change', function(){
    	    readURL(this);
    	});
	});
</script>
					</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>