<tour-personal-info>

	<div class="box box-details" if="{ state.step_number > 0 }">
		<div class="box-title">
			<h2><span class="sort">{ state.step_number }</span> Personal Info</h2>
		</div>
		<div class="box-content">

			<div class="row">
				<div class="col-md-6">
					<div class="form-group">
						<label class="control-label">First name <span class="text-danger">*</span></label>
						<input type="text" class="zt-control" id="firstname" data-ref="firstname" onchange="{ input_change }" required>
					</div>
				</div>

				<div class="col-md-6">
					<div class="form-group">
						<label class="control-label">Last name <span class="text-danger">*</span></label>
						<input type="text" class="zt-control" id="lastname" data-ref="lastname" onchange="{ input_change }" required>
					</div>
				</div>
			</div>

			<div class="row">
				<div class="col-md-6">
					<div class="form-group">
						<label class="control-label">Email <span class="text-danger">*</span></label>
						<input type="email" class="zt-control" id="email" data-ref="email" onchange="{ input_change }" required>
					</div>
				</div>

				<div class="col-md-6">
					<div class="form-group">
						<label class="control-label">Phone <span class="text-danger">*</span></label>
						<input type="phone" class="zt-control" id="phone" data-ref="phone" onchange="{ input_change }" required>
						<div class="object-tip font-sm">Please type your international phone number (starting with "+"" or "00")</div>
					</div>
				</div>
			</div>

			<div class="form-group">
				<label class="control-label">Your notes</label>
				<textarea class="zt-control" data-ref="notes"></textarea>
			</div>

		</div>
	</div>

	<script>
	/*
		Methods:
		initialize( step_number ) :: initialize component with the step number to show
		get_lastname() :: returns the lastname
		get_firstname() :: returns the firstname
		get_email() :: returns the email
		get_phone() :: returns the phone
		get_notes() :: returns the notes
		validate()

		Events:
		onchangehandler() :: triggers when any input has been changed
	*/

		this.state = {
			step_number: 0,
		}


		// Initialize the component
		this.initialize = step_number => {
	
			this.state.step_number = step_number;

			this.update();
		}


		this.get_lastname = () => {
			return this.refs.lastname.value
		}
		this.get_firstname = () => {
			return this.refs.firstname.value
		}
		this.get_email = () => {
			return this.refs.email.value
		}
		this.get_phone = () => {
			return this.refs.phone.value
		}
		this.get_notes = () => {
			return this.refs.notes.value
		}


		this.input_change = event => {
			this.opts.onchangehandler();
		}


		this.validate = () => {
			if (!this.refs.firstname.value) {
				alert("Please type your first name!");
				$('#firstname').focus();
				return false;
			} else if (!this.refs.lastname.value) {
				alert("Please type your last name!");
				$('#lastname').focus();
				return false;
			} else if (!this.refs.email.value) {
				alert("Please type your email!");
				$('#email').focus();
				return false;
			} else if (!this.refs.phone.value) {
				alert("Please type your phone number!");
				$('#phone').focus();
				return false;
			} else {
				return true;
			}
		}


	</script>
</tour-personal-info>