<style>
#book-appointment-wizard #wizard-frame-1 label { margin-top: 12px; }
.dropdisable .country-list{ display:none; }
</style>
<link rel="stylesheet" href="<?= asset_url('assets/css/intlTelInput.css') ?>">
  <link rel="stylesheet" href="<?= asset_url('assets/css/demo.css') ?>">
  	<link rel="stylesheet" href="<?= asset_url('assets/css/intlTelInputMob.css') ?>">
<link href="https://www.jqueryscript.net/css/jquerysctipttop.css?0925" rel="stylesheet" type="text/css">			
				
<?php if (isset($exceptions)): ?>
    <div style="margin: 10px">
        <h4><?= lang('unexpected_issues') ?></h4>

        <?php foreach ($exceptions as $exception): ?>
            <?= exceptionToHtml($exception) ?>
        <?php endforeach ?>
    </div>
<?php endif; ?>


<!-- SELECT SERVICE AND PROVIDER -->

<div id="wizard-frame-1" class="wizard-frame pt-0">

    <div class="frame-container pt-3">
        <h2 class="frame-title mt-2">Signup</h2>
		<div class="form-message alert alert-danger" <?php if(empty($this->session->flashdata('errorMsg'))) {?>style="display:none;"<?php } ?> id="errorMsg"><?php echo $this->session->flashdata('errorMsg'); ?></div>
		<div class="col-md-12" style="float:left;">
			<div class="btn-group profile" style="float:right">
				<button type="button" class="btn btn-round btn-info" id="btn_edit">Save</button>
				<button type="button" class="btn btn-round btn-default" id="btn_cancel">Cancel</button>
			</div>
		</div>						
		
        <div class="row frame-content">
            <div class="col">

				<form name="customer-profile-frm" id="customer-profile-frm" action="<?php echo site_url('customer/dosignup'); ?>" method="POST">
				<div class="col-md-12">
				<h3>Personal Information</h3>
                <div class="form-group">
				<div class="col-md-6" style="float:left;">
                    <label>First Name <span class="text-danger">*</span></label>
                    <input type="text" name="first_name" id="customer-first-name" class="form-control " required value="<?php echo $customer['first_name']; ?>" />
               </div>
			   <div class="col-md-6" style="float:left;">
                    <label>Last Name <span class="text-danger">*</span></label>
                    <input type="text" name="last_name" id="customer-last-name" class="form-control required" value="<?php echo $customer['last_name']; ?>">
                </div>
				</div>

				<div class="form-group mob">
				
				<div class="col-md-6" style="float:left;">
                    <label>Email <span class="text-danger">*</span></label>
                    <input type="text" name="email" id="customer-email" class="form-control required" value="<?php echo $customer['email']; ?>">
                </div>
				
				<div class="col-md-6" style="float:left;" id="to_get_mobile">
                    <label>Mobile Number <span class="text-danger">*</span></label>
                    <input type="tel" name="phone_number" id="customer-phone-number" class="form-control required" pattern="[0-9]{10}" maxlength="10" value="<?php echo $customer['phone_number']; ?>">
                </div>
                
				</div>
				
				<div class="form-group" id="to_get_phone">
				<div class="col-md-6" style="float:left;">
                    <label>Phone Number</label>
                    <input type="tel" name="mobile_number" id="customer-mobile-number" class="form-control required" pattern="[0-9]{10}" maxlength="10" value="<?php echo $customer['mobile_number']; ?>">
				</div>
				
                <div class="col-md-6" style="float:left;">
                    <label>Address</label>
                    <input type="text" name="address" id="customer-address" class="form-control" value="<?php echo $customer['address']; ?>">
                </div>
                
				</div>
				
				<div class="form-group">
				<div class="col-md-6" style="float:left;">
                    <label>City</label>
                    <input type="text" name="city" id="customer-city" class="form-control" value="<?php echo $customer['city']; ?>">
                </div>
                <div class="col-md-6" style="float:left;">
                    <label>State</label>
                    <input type="text" name="state" id="customer-state" class="form-control" value="<?php echo $customer['state']; ?>">
                </div>
                
				</div>
				
                <div class="form-group">
				<div class="col-md-6" style="float:left;">
                    <label>Zip Code</label>
                    <input type="text" name="zip_code" id="customer-zip-code" class="form-control" value="<?php echo $customer['zip_code']; ?>">
                </div>
				<div class="col-md-6" style="float:left;">
                    <label>Timezone <span class="text-danger">*</span></label>
                    <?= render_timezone_dropdown('name="timezone" id="customer-timezone" class="form-control required"') ?>
                </div>					
				</div>				
                <div class="form-group">
                <div class="col-md-6" style="float:left;">
                    <label>Notes</label>
                    <textarea name="notes" id="customer-notes" class="form-control" rows="3"><?php echo $customer['notes']; ?></textarea>
                </div>
				</div>			
				
				
            </div>
			<input type="hidden" name="mobilecountrycode" id="mobilecountrycode" class="form-control" value="">        
			<input type="hidden" name="phonecountrycode"  id="phonecountrycode"  class="form-control" value="">
			<input type="hidden" name="csrfToken" class="form-control" value="<?php echo $this->security->get_csrf_hash(); ?>">
            </div>
			</form>
        </div>
    </div>

</div>


<!-- FRAME FOOTER -->

<div id="frame-footer">
    <small>
        <span class="footer-powered-by">
           <?php echo config('footer_content'); ?>
        </span>
    </small>
            </div>
        </div>
    </div>
</div>
<script>
    var GlobalVariables = {
        availableServices: <?= json_encode($available_services) ?>,
        availableProviders: <?= json_encode($available_providers) ?>,
        baseUrl: <?= json_encode(config('base_url')) ?>,
        manageMode: <?= $manage_mode ? 'true' : 'false' ?>,
        customerToken: <?= json_encode($customer_token) ?>,
        dateFormat: <?= json_encode($date_format) ?>,
        timeFormat: <?= json_encode($time_format) ?>,
        firstWeekday: <?= json_encode($first_weekday) ?>,
        displayCookieNotice: <?= json_encode($display_cookie_notice === '1') ?>,
        appointmentData: <?= json_encode($appointment_data) ?>,
        providerData: <?= json_encode($provider_data) ?>,
        customerData: <?= json_encode($customer_data) ?>,
        displayAnyProvider: <?= json_encode($display_any_provider) ?>,
        csrfToken: <?= json_encode($this->security->get_csrf_hash()) ?>
    };

    var EALang = <?= json_encode($this->lang->language) ?>;
    var availableLanguages = <?= json_encode(config('available_languages')) ?>;
</script>

<script src="<?= asset_url('assets/js/general_functions.js') ?>"></script>
<script src="<?= asset_url('assets/ext/jquery/jquery.min.js') ?>"></script>
<script src="<?= asset_url('assets/ext/jquery-ui/jquery-ui.min.js') ?>"></script>
<script src="<?= asset_url('assets/ext/cookieconsent/cookieconsent.min.js') ?>"></script>
<script src="<?= asset_url('assets/ext/bootstrap/js/bootstrap.bundle.min.js') ?>"></script>
<script src="<?= asset_url('assets/ext/popper/popper.min.js') ?>"></script>
<script src="<?= asset_url('assets/ext/tippy/tippy-bundle.umd.min.js') ?>"></script>
<script src="<?= asset_url('assets/ext/datejs/date.min.js') ?>"></script>
<script src="<?= asset_url('assets/ext/moment/moment.min.js') ?>"></script>
<script src="<?= asset_url('assets/ext/moment/moment-timezone-with-data.min.js') ?>"></script>
<script src="<?= asset_url('assets/js/frontend_book_api.js') ?>"></script>
<script src="<?= asset_url('assets/js/frontend_book.js') ?>"></script>

<script>
    $(function () {
        FrontendBook.initialize(true, GlobalVariables.manageMode);
        GeneralFunctions.enableLanguageSelection($('#select-language'));
    });
	
$("#btn_edit").click(function(){
  if($("#btn_edit").text()=="Save") {
	var errorMsg = '';  
	if($("#customer-first-name").val() == '') {
		errorMsg += '<br>Firstname is mandatory.';
	}	
	if($("#customer-last-name").val() == '') {
		errorMsg += '<br>Lastname is mandatory.';
	}		
	
	if($("#customer-email").val() == '') {
		errorMsg += '<br>Email is mandatory.';
	}	
	
	var regex = /^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
	if($("#customer-email").val() != '' && !regex.test($("#customer-email").val())) {
		errorMsg += '<br>Invalid Customer Email Id.';
	}
	
	if($("#customer-phone-number").val() == '') {
		errorMsg += '<br>Mobile number is mandatory.';
	}	

	if($("#customer-timezone").val() == null) {
		errorMsg += '<br>Timezone is mandatory.';
	}		
	
	let mobilecountryCode = $('#to_get_mobile .iti__selected-flag').attr('title');
	mobilecountryCode2    = mobilecountryCode.replace(/[^0-9]/g,'');
	$("#phonecountrycode").val(mobilecountryCode2);
	
	let phonecountryCode  = $('#to_get_phone .iti__selected-flag').attr('title');
	phonecountryCode2     = phonecountryCode.replace(/[^0-9]/g,'');
	$("#mobilecountrycode").val(phonecountryCode2);
	
	
	if(errorMsg != '') {
		$("#errorMsg").show().html(errorMsg.substring(4));
		return false;
	}
	
	//alert('ready to submit'); return false;
	$('#customer-profile-frm')[0].submit();
  }
  
  if($("#btn_edit").text()=="Edit") {
	$("#btn_edit").text("Save");
	$("#customer-first-name,#customer-last-name,#customer-email,#customer-phone-number,#customer-mobile-number,#customer-address,#customer-city,#customer-state,#customer-zip-code,#customer-timezone,#customer-notes,#customer-username,#customer-password,#customer-cpassword").prop('disabled', false);
  }
  
  
});	

$("#btn_cancel").click(function(){
	window.location.href = "<?php echo config('base_url').'/index.php/customer/manage_dependants'; ?>";
});	
	
$('#customer-timezone').val(Intl.DateTimeFormat().resolvedOptions().timeZone);

</script>
  <script src="<?= asset_url('assets/js/intlTelInput.js') ?>"></script>
  <script>
	var inputHome = document.querySelector("#customer-phone-number");
	var inputMobile = document.querySelector("#customer-mobile-number");

window.intlTelInput(inputHome, {
  initialCountry: "<?php echo $default_country_code; ?>",
  hiddenInput: "full",
  placeholderNumberType: 'MOBILE',
  utilsScript: "<?= asset_url('assets/js/utils.js') ?>" // just for formatting/placeholders etc
});
window.intlTelInput(inputMobile, {
  initialCountry: "<?php echo $default_country_code; ?>",
  hiddenInput: "full",
  placeholderNumberType: 'MOBILE',
  utilsScript: "<?= asset_url('assets/js/utils.js') ?>"
});


// phone no validation(string, special characters not allowed)
$("input[type='tel']").on('keypress', function (event) {
    var regex = new RegExp("^[0-9]+$");
    var key = String.fromCharCode(!event.charCode ? event.which : event.charCode);
    if (!regex.test(key)) {
       event.preventDefault();
       return false;
    }
});

  </script>
  
</body>
</html>
