[[!profile]]

<div class="container-fluid">

<form class="needs-validation" id="email-form" method="post" action="" role="form" enctype="multipart/form-data" novalidate><!-- ~[*id*]~] -->
	
	<div class="input-group mb-3">
		<div class="input-group-prepend">
			<span class="input-group-text" id="basic-addon1"><i class="far fa-paper-plane"></i></span>
		</div>
		<input type="email" class="form-control font-weight-bold" name="emailFrom" id="emailFrom" required="required" value='[[+fullname]] <[[+email]]>' readonly>
	</div>
	
	<input type="hidden" hidden class="form-control" name="emailFrom" id="emailFrom" required="required" value='[[+email]]' >
	<input type="hidden" hidden class="form-control" name="emailFromName" id="emailFromName" required="required" value='[[+fullname]]' >
	<input type="hidden" class="form-control" name="emailReply" id="emailReply" required="required" value='[[+email]]' >
	<input type="hidden" hidden class="form-control" name="emailReplyName" id="emailReplyName" required="required" value='[[+fullname]]' >
	
	<div class="input-group mb-3">
		<div class="input-group-prepend">
			<span class="input-group-text" id="emailAddress"><i class="fas fa-envelope-open"></i></span>
		</div>
		<input type="email" class="form-control" name="emailAddress" id="emailAddress" aria-describedby="emailAddress" placeholder="To" required="required">
		<div id="emailAddress" class="invalid-feedback">Please provide a valid email address</div>
	</div>
	
	<div class="input-group mb-3">
		<div class="input-group-prepend">
			<span class="input-group-text" id="carboncopy"><i class="far fa-envelope-open"></i></span>
		</div>
		<input type="email" class="form-control" name="carboncopy" id="carboncopy" aria-describedby="carboncopy" placeholder="CC" >
	</div>
	
	<div class="input-group mb-3">
		<div class="input-group-prepend">
			<span class="input-group-text" id="subject"><i class="far fa-comment"></i></span>
		</div>
		<input type="text" class="form-control" name="subject" id="subject" aria-describedby="emailHelp" placeholder="Email Subject" required="required">
		<div id="emailAddress" class="invalid-feedback">Please provide a email subject</div>
	</div>

	<div class="input-group mb-3">
		<div class="input-group-prepend">
			<span class="input-group-text" id="attachment"><i class="fas fa-paperclip"></i></span>
		</div>
		<div class="custom-file attachment-row">
			<input type="file" class="custom-file-input" name="attachment[]" id="attachment" aria-describedby="attachment">
			<label class="custom-file-label" for="inputGroupFile01"></label>
		</div>
		<!--
		<div onClick="addMoreAttachment();" class="icon-add-more-attachemnt" title="Add More Attachments">
			<i class="fas fa-folder-plus"></i>
		</div>
		-->
	</div>
	<div class="form-group">
		<label for="exampleFormControlTextarea1">Email Message</label>
		<textarea class="form-control" name="emailBody" id="emailBody" rows="10">
		    
		    <br>Regards<br>
		    <b>[[+fullname]]</b><br>
		    <span class="text-success">Crop Monitor Consultant</span><br>
		    <b>Mob:</b> 0417 728 061 | <b>Email:</b> [[+email]]<br><br>
		    <img src="client-assets/images/crop-monitor.png" alt="Crop Monitor" style="width:10%;"></img><br> <!-- src="[[+photo]]" -->
		 
		 </textarea>
		<div class="valid-feedback"></div>
	</div>
	<button name="send" id="send" type="submit" class="btn btn-primary">Submit</button>
	
</form>

[[!formSubmit]]

</div>

<script type="text/javascript">
    // Example starter JavaScript for disabling form submissions if there are invalid fields
    (function() {
      'use strict';
      window.addEventListener('load', function() {
        // Fetch all the forms we want to apply custom Bootstrap validation styles to
        var forms = document.getElementsByClassName('needs-validation');
        // Loop over them and prevent submission
        var validation = Array.prototype.filter.call(forms, function(form) {
          form.addEventListener('submit', function(event) {
            if (form.checkValidity() === false) {
              event.preventDefault();
              event.stopPropagation();
            }
            form.classList.add('was-validated');
          }, false);
        });
      }, false);
    })();
</script>


<script type="text/javascript">
    
    function validate() {
        var valid = true;

        $(".valid-feedback").html("");
        var userName = document.forms["email-form"]["emailAddress"].value;
        var subject = document.forms["email-form"]["subject"].value;
        var userMessage = document.forms["email-form"]["emailBody"].value;
        
        if (emailAddress == "") {
            $("#emailAddress").html("(required)");
            $("#emailAddress").css('background-color', '#FFFFDF');
            valid = false;
        }
        if (!emailAddress.match(/^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/))
        {
            $("#emailAddress").html("(invalid)");
            $("#emailAddress").css('background-color', '#FFFFDF');
            valid = false;
        }

        if (subject == "") {
            $("#subject").html("(required)");
            $("#subject").css('background-color', '#FFFFDF');
            valid = false;
        }
        if (v == "") {
            $("#emailBody").html("(required)");
            $("#emailBody").css('background-color', '#FFFFDF');
            valid = false;
        }
        return valid;
    }
    /*
    function addMoreAttachment() {
        $(".attachment-row:last").clone().insertAfter(".attachment-row:last");
        $(".attachment-row:last").find("input").val("");
    }
    */
</script>


<script src="https://cloud.tinymce.com/stable/tinymce.min.js?apiKey=xcotawi18mg1imp8im144buq68h9g3ndd3c9c8215w8qu3ld"></script>
    <script>
        tinymce.init({
            selector: 'textarea',
            menubar: false,
            plugins: [
    "advlist autolink lists link image charmap print preview anchor",
    "searchreplace visualblocks code fullscreen",
    "insertdatetime media table paste imagetools wordcount"
  ],
  toolbar: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link ',
  content_css: [
    '//fonts.googleapis.com/css?family=Lato:300,300i,400,400i',
    '//www.tiny.cloud/css/codepen.min.css'
  ]
        });
    </script>