<div id="pageHead"><h1>Register</h1></div>
<?php if ($this->session->flashdata('success')) : ?>
<div class="success">
<p>Your registration form has been submitted successfully.</p>
<p>Our team will check your request and will contact you as soon as possible.</p>
<p>Best regards,</p>
<p><strong>JBC Group of Companies Int.</strong></p>
</p>

<?php else: ?>
* Required fields
<?php
//echo $form;
$registeredName = array('name'=>'registeredName', 'size' => 60);
$registrationNo = array('name'=>'registrationNo', 'size' => 60);
$vatNo = array('name'=>'vatNo', 'size' => 60);
$phone = array('name'=>'phone', 'size'=>15, 'class'=>'phone');
$cellphone = array('name'=>'cellphone', 'size'=>15, 'class'=>'phone');
$fax = array('name'=>'fax', 'size'=>15, 'class'=>'phone');
$email = array('name'=>'email', 'size'=>60);
$activity = array('select'=>'Select your main activity', 'Supplier'=>'Supplier', 'Transporter'=>'Transporter', 'Trader'=>'Trader', 'Broker'=>'Broker');
$phaddr1 = array('name'=>'phaddr1', 'size' => 60);
$phaddr2 = array('name'=>'phaddr2', 'size' => 60);	
$phsuburb = array('name'=>'phsuburb', 'size' => 60);
$phcity = array('name'=>'phcity', 'size' => 60);
$phpostcode = array('name'=>'phpostcode', 'size' => 4);
$province = array(
	'select' => 'Select a Province',
	'Eastern Cape' => 'Eastern Cape',
	'Free State' => 'Free State',
	'Gauteng' => 'Gauteng',
	'KwaZulu-Natal' => 'KwaZulu-Natal',
	'Limpopo' => 'Limpopo',
	'Mpumalanga' => 'Mpumalanga',
	'Northern Cape' => 'Northern Cape',
	'North West' => 'North West',
	'Western Cape' => 'Western Cape'
);

$poaddr1 = array('name'=>'poaddr1', 'size' => 60);	
$poaddr2 = array('name'=>'poaddr2', 'size' => 60);	
$posuburb = array('name'=>'posuburb', 'size' => 60);
$pocity = array('name'=>'pocity', 'size' => 60);
$popostcode = array('name'=>'popostcode', 'size' => 4);

$bank = array('name'=>'bank', 'size'=>60);
$branch = array('name'=>'branch', 'size'=>20);
$accountNo = array('name'=>'accountNo', 'size'=>60);
$accountName = array('name'=>'accountName', 'size'=>60);
//Members
$m1firstName = array('name'=>'m1firstname', 'size'=>60);
$m1lastName = array('name'=>'m1firstname', 'size'=>60);
$m1phone = array('name'=>'m1contact', 'size'=>15, 'class'=>'phone');
$m1addr1 = array('name'=>'phaddr1', 'size' => 60);
$m1addr2 = array('name'=>'phaddr2', 'size' => 60);	
$m1suburb = array('name'=>'phsuburb', 'size' => 60);
$m1city = array('name'=>'phcity', 'size' => 60);
$m1postcode = array('name'=>'phpostcode', 'size' => 4);

$m2firstName = array('name'=>'m2firstname', 'size'=>60);
$m2lastName = array('name'=>'m2firstname', 'size'=>60);
$m2phone = array('name'=>'m2contact', 'size'=>15, 'class'=>'phone');
$m2addr1 = array('name'=>'phaddr1', 'size' => 60);
$m2addr2 = array('name'=>'phaddr2', 'size' => 60);	
$m2suburb = array('name'=>'phsuburb', 'size' => 60);
$m2city = array('name'=>'phcity', 'size' => 60);
$m2postcode = array('name'=>'phpostcode', 'size' => 4);

$formClass = 'class="form"';
//Start the form
?>



<script type="text/javascript" >
// postalcodes is filled by the JSON callback and used by the mouse event handlers of the suggest box
var postalcodes;

// this function will be called by our JSON callback
// the parameter jData will contain an array with postalcode objects
function getLocation(jData) {
  if (jData == null) {
    // There was a problem parsing search results
    return;
  }

  // save place array in 'postalcodes' to make it accessible from mouse event handlers
  postalcodes = jData.postalcodes;
    	
  if (postalcodes.length > 1) {
    // we got several places for the postalcode
    // make suggest box visible
    document.getElementById('suggestBoxElement').style.visibility = 'visible';
    var suggestBoxHTML  = '';
    // iterate over places and build suggest box content
    for (i=0;i< jData.postalcodes.length;i++) {
      // for every postalcode record we create a html div 
      // each div gets an id using the array index for later retrieval 
      // define mouse event handlers to highlight places on mouseover
      // and to select a place on click
      // all events receive the postalcode array index as input parameter
      suggestBoxHTML += "<div class='suggestions' id=pcId" + i + " onmousedown='suggestBoxMouseDown(" + i +")' onmouseover='suggestBoxMouseOver(" +  i +")' onmouseout='suggestBoxMouseOut(" + i +")'> " + postalcodes[i].countryCode + ' ' + postalcodes[i].postalcode + '    ' + postalcodes[i].placeName  +'</div>';
    }
    // display suggest box
    document.getElementById('suggestBoxElement').innerHTML = suggestBoxHTML;
  } else {
    if (postalcodes.length == 1) {
      // exactly one place for postalcode
      // directly fill the form, no suggest box required 
      var placeInput = document.getElementById("placeInput");
      placeInput.value = postalcodes[0].placeName;
    }
    closeSuggestBox();
  }
}


function closeSuggestBox() {
  document.getElementById('suggestBoxElement').innerHTML = '';
  document.getElementById('suggestBoxElement').style.visibility = 'hidden';
}


// remove highlight on mouse out event
function suggestBoxMouseOut(obj) {
  document.getElementById('pcId'+ obj).className = 'suggestions';
}

// the user has selected a place name from the suggest box
function suggestBoxMouseDown(obj) {
  closeSuggestBox();
  var placeInput = document.getElementById("placeInput");
  placeInput.value = postalcodes[obj].placeName;
}

// function to highlight places on mouse over event
function suggestBoxMouseOver(obj) {
  document.getElementById('pcId'+ obj).className = 'suggestionMouseOver';
}


// this function is called when the user leaves the postal code input field
// it call the geonames.org JSON webservice to fetch an array of places 
// for the given postal code 
function postalCodeLookup() {

  var country = "ZA";

  if (geonamesPostalCodeCountries.toString().search(country) == -1) {
     return; // selected country not supported by geonames
  }
  // display 'loading' in suggest box
  document.getElementById('suggestBoxElement').style.visibility = 'visible';
  document.getElementById('suggestBoxElement').innerHTML = '<small><i>loading ...</i></small>';

  //var postalcode = document.getElementById("postalcodeInput").value;
	var city = document.getElementById("city").value;

  request = 'http://api.geonames.org/postalCodeSearchJSON?placename=Clarens&maxRows=10&country=ZA&username=cgull';
//	'http://api.geonames.org/postalCodeLookupJSON?postalcode=' + postalcode  + '&country=' + country  + '&callback=getLocation&username=demo';

  // Create a new script object
  aObj = new JSONscriptRequest(request);
  // Build the script tag
  aObj.buildScriptTag();
  // Execute (add) the script tag
  aObj.addScriptTag();
}
</script>
City <input id="city" name="city" onblur="postalCodeLookup();" size="10" type="text">
<span style="position: relative; z-index: 24;">
  <input id="placeInput"  name="place" size="30" onblur="closeSuggestBox();" type="text">
  <span style="position: absolute; top: 20px; left: 0px; z-index:25;visibility: hidden;" id="suggestBoxElement"></span>
</span>



















<div style="margin-top: 1em; float: left;">
<?php
echo form_open('register', $formClass);

echo form_fieldset('Company Details');
?>
<div class="field">
	<?= form_label('Registered Name *') ?>
  <?= form_input($registeredName) ?>
</div>
<div class="field">
	<?= form_label('Registration No. *') ?>
  <?= form_input($registrationNo) ?>
</div>
<div class="field">
	<?= form_label('VAT No.') ?>
  <?= form_input($vatNo) ?>
</div>
<div class="field">
	<?= form_label('Phone *') ?>
  <?= form_input($phone) ?>
</div>
<div class="field">
	<?= form_label('Cellphone') ?>
  <?= form_input($cellphone) ?>
</div>
<div class="field">
	<?= form_label('Fax') ?>
  <?= form_input($fax) ?>
</div>
<div class="field">
	<?= form_label('Main Activity *') ?>
	<?= form_dropdown('activity', $activity) ?>
</div>

<div class="left" style="width: 48%; margin-right: 4%;">
<fieldset>
	<legend><span class="grey">Physical Address</span></legend>
  <div class="field">
  	<?= form_label('Address Line 1 *') ?>
    <?= form_input($phaddr1) ?>
  </div>
  <div class="field">
  	<?= form_label('Address Line 2') ?>
    <?= form_input($phaddr2) ?>
  </div>
  <div class="field">
  	<?= form_label('Suburb *') ?>
    <?= form_input($phsuburb) ?>
  </div>
  <div class="field">
  	<?= form_label('City/Town *') ?>
    <?= form_input($phcity) ?>
  </div>
	<div class="field">
  	<?= form_label('Post Code *') ?>
    <?= form_input($phpostcode) ?>
  </div>
  <div class="field">
		<?= form_label('Province *') ?>
		<?= form_dropdown('phprovince', $province) ?>
	</div>
</fieldset>
</div><!-- End physical address -->

<div class="left" style="width: 48%;">
	<fieldset>
		<legend><span class="grey">Postal Address</span></legend>
  <div class="field">
  	<?= form_label('Address Line 1 *') ?>
    <?= form_input($poaddr1) ?>
  </div>
  <div class="field">
  	<?= form_label('Address Line 2') ?>
    <?= form_input($poaddr2) ?>
  </div>
  <div class="field">
  	<?= form_label('Suburb *') ?>
    <?= form_input($posuburb) ?>
  </div>
  <div class="field">
  	<?= form_label('City/Town *') ?>
    <?= form_input($pocity) ?>
  </div>
    <div class="field">
  	<?= form_label('Post Code *') ?>
    <?= form_input($popostcode) ?>
  </div>
  <div class="field">
		<?= form_label('Province *') ?>
		<?= form_dropdown('poprovince', $province) ?>
	</div>
  </fieldset>
</div>

<div class="clear"></div>

<fieldset style="width: 48%;">
	<legend><span class="grey">Bank Details</span></legend>
<div class="field">
	<?= form_label('Bank *') ?>
  <?= form_input($bank) ?>
</div>
<div class="field">
	<?= form_label('Branch Code *') ?>
  <?= form_input($branch) ?>
</div>
<div class="field">
	<?= form_label('Account No. *') ?>
  <?= form_input($accountNo) ?>
</div>
<div class="field">
	<?= form_label('Account Name *') ?>
  <?= form_input($accountName) ?>
</div>
</fieldset>
<?= form_fieldset_close() ?>

<?= form_fieldset('Members') ?>
<div class="left" style="width: 48%; margin-right: 4%;">
	<fieldset>
		<legend><span class="grey">Member</span></legend>
    <div class="field">
    	<?= form_label('First Name') ?>
      <?= form_input($m1firstName) ?>
    </div>
    <div class="field">
    	<?= form_label('Last Name') ?>
			<?= form_input($m1lastName) ?>
    </div>
    <div class="field">
    	<?= form_label('Contact Number') ?>
			<?= form_input($m1phone) ?>
    </div>

  <fieldset>
	<legend><span class="grey">Physical Address</span></legend>
  <div class="field">
  	<?= form_label('Address Line 1') ?>
    <?= form_input($m1addr1) ?>
  </div>
  <div class="field">
  	<?= form_label('Address Line 2') ?>
    <?= form_input($m1addr2) ?>
  </div>
  <div class="field">
  	<?= form_label('Post Code') ?>
    <?= form_input($m1postcode) ?>
  </div>
  <div class="field">
  	<?= form_label('Suburb') ?>
    <?= form_input($m1suburb) ?>
  </div>
  <div class="field">
  	<?= form_label('City/Town') ?>
    <?= form_input($m1city) ?>
  </div>
  <div class="field">
		<?= form_label('Province') ?>
		<?= form_dropdown('m1province', $province) ?>
	</div>
</fieldset>
</fieldset>
</div>
<div class="left" style="width: 48%;">
	<fieldset>
		<legend><span class="grey">Member</span></legend>
    <div class="field">
    	<?= form_label('First Name') ?>
      <?= form_input($m2firstName) ?>
    </div>
    <div class="field">
    	<?= form_label('Last Name') ?>
			<?= form_input($m2lastName) ?>
    </div>
    <div class="field">
    	<?= form_label('Contact Number') ?>
			<?= form_input($m2phone) ?>
    </div>
	<fieldset>
  <legend><span class="grey">Physical Address</span></legend>
  <div class="field">
  	<?= form_label('Address Line 1') ?>
    <?= form_input($m2addr1) ?>
  </div>
  <div class="field">
  	<?= form_label('Address Line 2') ?>
    <?= form_input($m2addr2) ?>
  </div>
  <div class="field">
  	<?= form_label('Post Code') ?>
    <?= form_input($m2postcode) ?>
  </div>
  <div class="field">
  	<?= form_label('Suburb') ?>
    <?= form_input($m2suburb) ?>
  </div>
  <div class="field">
  	<?= form_label('City/Town') ?>
    <?= form_input($m2city) ?>
  </div>
  <div class="field">
		<?= form_label('Province') ?>
		<?= form_dropdown('m2province', $province) ?>
	</div>
</fieldset>
</fieldset>
</div>
	<div style="float: right; margin-top: 1em;">
		<?= form_submit('submit', 'Request Registration') ?>
  </div>
</div><!-- End form -->
<?php
	endif;
?>
<script>
$(".phone").mask("(999) 999-9999");

src="http://api.geonames.org/postalCodeSearchJSON?postalcode=9707&maxRows=10&username=cgull";
</script>