<div class="tabArea">
	<div class="customer_info">
		<h4><?= lang('customer_information'); ?></h4>
	</div>
	<ul class="nav nav-tabs">
		<li class="nav-item">
			<a class="nav-link active" data-toggle="tab" href="#registration"><i class="fa fa-user-plus"></i> <?= !empty(lang('new_registration'))?lang('new_registration'):"New Registration" ;?></a>
		</li>
		<li class="nav-item">
			<a class="nav-link" data-toggle="tab" href="#login"><i class="fas fa-user-check"></i> <?= !empty(lang('already_have_account'))?lang('already_have_account'):"Already have account" ;?></a>
		</li>
	</ul>
	<!-- Tab panes -->
	<div class="tab-content">
		<span class="alertMsg mb-10"></span>
		<div class="tab-pane container active" id="registration">
			<form action="<?= base_url('service/registration/'.$slug); ?>" method="post" class="serviceRegistration">
				<input type="hidden" name="<?= $this->security->get_csrf_token_name(); ?>" value="<?= $this->security->get_csrf_hash(); ?>">

				<div class="form-group">
					<label for=""><?= lang('name'); ?></label>
					<input type="text" name="name" class="form-control">
				</div>

				<div class="form-group">
					<label for=""><?= lang('phone'); ?></label>
					<div class="">
						<input type="text" name="phone" class="form-control phone" autocomplete="off" id="phone">
						<input type="hidden" name="country_code" class="country_code" value="">
						<input type="hidden" name="dial_code" class="dial_code" value="">
					</div>
				</div>
				<div class="form-group">
					<label for=""><?= lang('password'); ?></label>
					<input type="password" name="password" class="form-control password">
				</div>
				<div class="form-group">
					<label for=""><?= lang('confirm_password'); ?></label>
					<input type="password" name="cpassword" class="form-control">
				</div>

				<div class="form-group mt-15 text-center">
					<button type="submit" class="btn btn-primary submitBtn"><?= lang('registration'); ?></button>
				</div>
			</form>

		</div><!-- registration -->
		<div class="tab-pane container fade" id="login">
			<form action="<?= base_url('service/customer_login') ;?>" method="post" class="serviceLogin">
				<input type="hidden" name="<?= $this->security->get_csrf_token_name(); ?>" value="<?= $this->security->get_csrf_hash(); ?>">
				<div class="form-group">
					<label for=""><?= lang('phone'); ?></label>
					<div class="">
						<input type="text" name="phone" id="phone_1" class="form-control phone">
					</div>
				</div>
				<div class="form-group">
					<label for=""><?= lang('password'); ?></label>
					<input type="password" name="password" class="form-control ">
				</div>
				<div class="form-group mt-15 text-center">
					<button type="submit" class="btn btn-primary submitBtn"><?= lang('login'); ?></button>
				</div>
			</form>

		</div><!-- registration -->
	</div>
</div><!-- tabArea -->

<?php $country = my_currency($user['country'],'dial_code'); ?>
<script>
var input = $("#phone_1");
  var code = `<?= !empty($country)?$country:"+880";?>`; // Assigning value from model.
  input.val(code);
  input.intlTelInput({
  	autoHideDialCode: true,
  	autoPlaceholder: "ON",
  	dropdownContainer: document.body,
  	formatOnDisplay: true,
  	hiddenInput: "full_number",
  	initialCountry: "auto",
  	nationalMode: true,
  	placeholderNumberType: "MOBILE",
  	preferredCountries: ['US'],
  	separateDialCode: true
  });

  $(document).on('countrychange','#phone_1',function(){
  	$('.country_code').val(input.intlTelInput("getSelectedCountryData").iso2);
  	$('.dial_code').val(input.intlTelInput("getSelectedCountryData").dialCode);
  });
</script>

<script>
 var input = $("#phone");
  var code = `<?= !empty($country)?$country:"+880";?>`; // Assigning value from model.
  input.val(code);
  input.intlTelInput({
  	autoHideDialCode: true,
  	autoPlaceholder: "ON",
  	dropdownContainer: document.body,
  	formatOnDisplay: true,
  	hiddenInput: "full_number",
  	initialCountry: "auto",
  	nationalMode: true,
  	placeholderNumberType: "MOBILE",
  	preferredCountries: ['US'],
  	separateDialCode: true
  });

  $(document).on('countrychange','#phone',function(){
  	$('.country_code').val(input.intlTelInput("getSelectedCountryData").iso2);
  	$('.dial_code').val(input.intlTelInput("getSelectedCountryData").dialCode);
  });
</script>