<?php if (!defined('FLUX_ROOT')) exit; ?>
<style>

/* For mobile phones: */
[class*="col-"] {
  width: 100%;
}

@media only screen and (min-width: 600px) {
  /* For tablets: */
  .col-s-1 {width: 8.33%;}
  .col-s-2 {width: 16.66%;}
  .col-s-3 {width: 25%;}
  .col-s-4 {width: 33.33%;}
  .col-s-5 {width: 41.66%;}
  .col-s-6 {width: 50%;}
  .col-s-7 {width: 58.33%;}
  .col-s-8 {width: 66.66%;}
  .col-s-9 {width: 75%;}
  .col-s-10 {width: 83.33%;}
  .col-s-11 {width: 91.66%;}
  .col-s-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
  /* For desktop: */
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
}

/* The Modal (background) */
.modal {
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  background-image: url(https://rescdn.imtxwy.com/ro/nyy/imgs/ep6/index/bg@1x.jpg);
  background-position: center 0;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: 100%;

}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 50%; /* Could be more or less, depending on screen size */
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  animation-name: animatetop;
  animation-duration: 0.4s
}
/* Add Animation */
@keyframes animatetop {
  from {top: -300px; opacity: 0}
  to {top: 0; opacity: 1}
}


</style>


<div id="register" class="modal">
        <div class="modal-header">
          <h1 class="modal-title">Pre-Registration</h1>
        </div>
	    <div class="modal-body">

			<?php if (isset($errorMessage)): ?>
			<p class="red" style="font-weight: bold"><?php echo htmlspecialchars($errorMessage) ?></p>
			<?php endif ?>
			<form action="<?php echo $this->url ?>" method="post" class="generic-form">
				<?php if (count($serverNames) === 1): ?>
				<input type="hidden" name="server" value="<?php echo htmlspecialchars($session->loginAthenaGroup->serverName) ?>">
				<?php endif ?>
				<table class="generic-form-table">
					<?php if (count($serverNames) > 1): ?>
					<tr>
						<th><label for="register_server"><?php echo htmlspecialchars(Flux::message('AccountServerLabel')) ?></label></th>
						<td>
							<select name="server" id="register_server"<?php if (count($serverNames) === 1) echo ' disabled="disabled"' ?>>
							<?php foreach ($serverNames as $serverName): ?>
								<option value="<?php echo htmlspecialchars($serverName) ?>"<?php if ($params->get('server') == $serverName) echo ' selected="selected"' ?>><?php echo htmlspecialchars($serverName) ?></option>
							<?php endforeach ?>
							</select>
						</td>
					</tr>
					<?php endif ?>
					
					<tr>
						<th width=20%><label for="register_username"><?php echo htmlspecialchars(Flux::message('AccountUsernameLabel')) ?></label></th>
						<td><input type="text" name="username" id="register_username" value="<?php echo htmlspecialchars($params->get('username')) ?>" /></td>
					</tr>
					
					<tr>
						<th><label for="register_password"><?php echo htmlspecialchars(Flux::message('AccountPasswordLabel')) ?></label></th>
						<td><input type="password" name="password" id="register_password" /></td>
					</tr>
					
					<tr>
						<th><label for="register_confirm_password"><?php echo htmlspecialchars(Flux::message('AccountPassConfirmLabel')) ?></label></th>
						<td><input type="password" name="confirm_password" id="register_confirm_password" /></td>
					</tr>
					<tr>
						<th><label for="register_mobile_number"><?php echo htmlspecialchars(Flux::message('AccountMobileLabel')) ?><br>	</label></th>
						<td>
							<p id="output">Please enter a valid mobile number.</p>
							<input hidden id="mobile" name ="mobile" >
							<input id="phone" type ="tel" >
						</td>

					</tr>
					<tr>
						<th><label for="register_email_address"><?php echo htmlspecialchars(Flux::message('AccountEmailLabel')) ?></label></th>
						<td><input type="text" name="email_address" id="register_email_address" value="<?php echo htmlspecialchars($params->get('email_address')) ?>" /></td>
					</tr>
					<tr>
						<th><label><?php echo htmlspecialchars(Flux::message('AccountBirthdateLabel')) ?></label></th>
						<td><?php echo $this->dateField('birthdate',null,0) ?></td>
					</tr>
					
					<?php if (Flux::config('UseCaptcha')): ?>
					<tr>
						<?php if (Flux::config('EnableReCaptcha')): ?>
						<th><label for="register_security_code"><?php echo htmlspecialchars(Flux::message('AccountSecurityLabel')) ?></label></th>
						<td><?php echo $recaptcha ?></td>
						<?php else: ?>
						<th><label for="register_security_code"><?php echo htmlspecialchars(Flux::message('AccountSecurityLabel')) ?></label></th>
						<td>
							<div class="security-code">
								<img src="<?php echo $this->url('captcha') ?>" />
							</div>
							
							<input type="text" name="security_code" id="register_security_code" />
							<div style="font-size: smaller;" class="action">
								<strong><a href="javascript:refreshSecurityCode('.security-code img')"><?php echo htmlspecialchars(Flux::message('RefreshSecurityCode')) ?></a></strong>
							</div>
						</td>
						<?php endif ?>
					</tr>
					<?php endif ?>
					
					<tr>
						<td></td>
						<td>
							<div style="margin-bottom: 5px">
								   <p class="text-tip uk-text-left">
															LevelUP Games will collect the following personal information for the registration of new account.
															<br> Refusing may not allow you to create a game account.
															<br> 1) Personal information that will be collected: Cell phone number and email address.
															<br> 2) Purpose of personal information collected and utilized: SMS will be sent to the above Cell phone number for the game launch date, in-game events, and event prizing.
															<br> 3) Name of the consignment company that will utilize the personal information: LevelUP Games.
															<br> 4) Duration of personal information retention and utilization: Personal information will be dispose within 365 days based on the date of personal information collected.
														</p>

							</div>

							<div style="margin-bottom: 5px">
								<?php printf(htmlspecialchars(Flux::message('AccountCreateInfo2')), '<a href="'.$this->url('service', 'tos').'">'.Flux::message('AccountCreateTerms').'</a>') ?>
							</div>
							<div>
								<button type="submit" id= "register" disabled="disabled" ><strong><?php echo htmlspecialchars(Flux::message('AccountCreateButton')) ?></strong></button>
							</div>
						</td>
					</tr>
				</table>
			</form>
		</div>	
        <div class="modal-footer">
			<center><h3><?php echo number_format($info['accounts'] + 122) ?> Total Adventurers Await</h3></center><br>
			<img src="<?php echo $this->themePath('img/levelupgames.png') ?>">
         </div>
	</div>	 
</div>

<script type="text/javascript">
    $(window).on('load',function(){
        $('#register').modal('show');
    });

</script>