<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"><?php if(empty($customer['id'])) { echo "Add"; } else { echo "Edit"; } ?> Dependants</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/savedependant'); ?>" 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">
                <div class="col-md-6" style="float:left;">
                    <label>Relationship <span class="text-danger">*</span></label>
                    <select class="form-control required" id="customer-relationship" name="relationship">
						<option value="">-Select Relation</option>
						<?php foreach($dependantRelationShip as $res) { ?>
						<option value="<?php echo $res; ?>" <?php if($customer['relationship']==$res) { echo "selected"; } ?> ><?php echo $res; ?></option>
						<?php } ?>
					</select>	
                </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="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-relationship").val() == '') {
		errorMsg += '<br>Relationship is mandatory.';
	}		
	
	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("<?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>