<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">Patient Profile</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">Edit</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/saveprofile'); ?>" 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" disabled 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" disabled class="form-control required" value="<?php echo $customer['last_name']; ?>">
                </div>
				</div>

                <div class="form-group">
				<div class="col-md-6" style="float:left;">
                    <label>Email <span class="text-danger">*</span></label>
                    <input type="text" name="email" id="customer-email" disabled class="form-control required" value="<?php echo $customer['email']; ?>">
                </div>

                <div class="col-md-6" style="float:left;">
                    <label>Mobile Number <span class="text-danger">*</span></label>
                    <input type="tel" name="phone_number" id="customer-phone-number" disabled class="form-control required" value="<?php echo $customer['phone_number']; ?>">
                </div>
				</div>

                <div class="form-group mob">
				<div class="col-md-6" style="float:left;">
                    <label>Phone Number</label>
                    <input type="tel" name="mobile_number" id="customer-mobile-number" disabled class="form-control required" 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" disabled 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" disabled 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" disabled 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" disabled class="form-control" value="<?php echo $customer['zip_code']; ?>">
                </div>
                <div class="form-group">
				<div class="col-md-6" style="float:left;">
                    <label>Timezone <span class="text-danger">*</span></label>
                    <?= render_timezone_dropdown('disabled name="timezone" id="customer-timezone" class="form-control required"') ?>
                </div>
					
                <div class="col-md-6" style="float:left;">
                    <label>Notes</label>
                    <textarea name="notes" id="customer-notes" disabled class="form-control" rows="3"><?php echo $customer['notes']; ?></textarea>
                </div>
				</div>	
            </div>
			
			
		<div class="col-md-12 float-left">
		<p>&nbsp;</p>
			<h3>Login Details</h3>
                <div class="form-group">
				<div class="col-md-6" style="float:left;">
                    <label>Username <span class="text-danger">*</span></label>
                    <input value="<?php echo $customer['settings']['username']; ?>" name="username" id="customer-username" disabled type="text" class="form-control required">
                </div>

                <div class="col-md-6" style="float:left;">
                    <label>Password <span class="text-danger">*</span></label>
                    <input name="password" id="customer-password" disabled type="password" class="form-control required">
                </div>
				</div>

                <div class="form-group">
				<div class="col-md-6" style="float:left;">
                    <label>Retype Password <span class="text-danger">*</span></label>
                    <input name="cpassword" id="customer-cpassword" disabled type="password" class="form-control required">
                </div>
				</div>
				
            </div>
        
			<input type="hidden" name="id" value="<?php echo $customer['id']; ?>">	
			<input type="hidden" name="email_hidden" value="<?php echo $customer['email']; ?>">
			<input type="hidden" name="username_hidden" value="<?php echo $customer['settings']['username']; ?>">
			<input type="hidden" name="csrfToken" 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-username").val() == '') {
		errorMsg += '<br>Username is mandatory.';
	}		
	if($("#customer-username").val() != '' && !regex.test($("#customer-username").val())) {
		errorMsg += '<br>Invalid Email Id for Username.';
	}
	
	if($("#customer-password").val() != '' && $("#customer-cpassword").val() == '') {
		errorMsg += '<br>Please confirm your password.';
	}
	if($("#customer-password").val() == '' && $("#customer-cpassword").val() != '') {
		errorMsg += '<br>Please enter password.';
	}
	if($("#customer-password").val() != '' && $("#customer-cpassword").val() != '' && $("#customer-password").val() != $("#customer-cpassword").val()) {
		errorMsg += '<br>Password and confirm password does not match.';
	}
	if($("#customer-password").val() != '' && $("#customer-password").val().length < 8) {
		errorMsg += '<br>Password should be minimum 8 characters.';
	}

	if(errorMsg != '') {
		$("#errorMsg").show().html(errorMsg.substring(4));
		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(){
	$("#btn_edit").text("Edit");
	$("#errorMsg").html('').hide();
	$('#customer-profile-frm')[0].reset();
	$('#customer-timezone').val("<?php echo $customer['timezone']; ?>");
	$("#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', true);
});	
	
$('#customer-timezone').val("<?php echo $customer['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: 'auto',
  placeholderNumberType: 'MOBILE',
  utilsScript: "<?= asset_url('assets/js/utils.js') ?>" // just for formatting/placeholders etc
});
window.intlTelInput(inputMobile, {
  initialCountry: 'auto',
  placeholderNumberType: 'MOBILE',
  utilsScript: "<?= asset_url('assets/js/utils.js') ?>"
});
  </script>
  
</body>
</html>
