<?php defined('BASEPATH') or exit('No direct script access allowed'); ?>
<!DOCTYPE html>
<html dir="<?php echo is_rtl(true) ? 'rtl' : 'ltr'; ?>">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
    <title><?php echo e($form->name); ?></title>
    <?php app_external_form_header($form); ?>
    <?php hooks()->do_action('app_web_to_lead_form_head'); ?>


    <link href="<?= base_url();?>assets/custom/assets/vendors/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="<?= base_url();?>assets/custom/assets/vendors/nice-select/css/nice-select.css" rel="stylesheet">
    <link href="<?= base_url();?>assets/custom/assets/vendors/elagent-icon/style.css" rel="stylesheet">
    <link href="<?= base_url();?>assets/custom/assets/css/style.css" rel="stylesheet">
    <link href="<?= base_url();?>assets/custom/assets/css/responsive.css" rel="stylesheet">
    <style>
    #form_submit:hover {
        background-color: <?php echo adjust_color_brightness($form->submit_btn_bg_color, -30) ?> !important;
    }
.radio{ display: inline-block; }
.radio input[type=radio]{
    margin: 0;
    visibility: hidden;
    left: 1px;
    top: 1px;
}
.radio label{
    background-color: #d55050;
    width: 50px;
    height: 26px;
    cursor: pointer;
    border-radius: 5px;
    box-shadow: inset 0px 4px 0px 0px rgba(0, 0, 0, 0.2);
    transition: all 0.5s ease 0s;
}
.radio label:before{
    content: "";
    background-color: #fafafa;
    width: 20px;
    height: 17px;
    border-radius: 4px;
    box-shadow: 0px 3px 0px 0px #d2d2d2;
    position: absolute;
    top: 3px;
    left: 3px;
    transition: all 0.25s;
    margin-left: 0px !important;
}
.radio input[type=radio]:checked+label{ background-color: #25c686; }
.radio input[type=radio]:checked+label:before{ left: 27px; }
@media only screen and (max-width:767px){
    .radio{ margin: 0 0 20px; }
}
.radio label:after {display:none;}
 /* Registration Type (form-cf-2) */
  .form-group[data-name="form-cf-2"] .chk{
    display:flex; flex-wrap:wrap; gap:30px; align-items:stretch;
  }
  .form-group[data-name="form-cf-2"] .checkbox{ position:relative; margin:0; }

  /* Keep inputs accessible, just hide visually */
  .form-group[data-name="form-cf-2"] .checkbox input[type="checkbox"]{
    position:absolute; inset:0; opacity:0; pointer-events:none;
  }

  .form-group[data-name="form-cf-2"] .checkbox label{
    display:flex; flex-direction:column; justify-content:center; align-items:center;
    height:200px; flex:0 0 200px;
    width: 200px;
    border-radius:10px;
    box-shadow:0 3px 5px rgba(0,0,0,.05);
    border:1px solid rgba(0,0,0,.12);
    text-align:center; background:#fff;
    padding:50px 16px 16px;
    margin:0; cursor:pointer; transition:all .2s ease;
    font-weight:600;
  }
  .form-group[data-name="form-cf-2"] .checkbox label i{
    font-size:48px; display:block; margin-bottom:12px; line-height:1;
  }

  /* Active/Focus styles — swap #0d6efd with your brand if you want */
  .form-group[data-name="form-cf-2"] .checkbox input[type="checkbox"]:checked + label{
    border-color:#0d6efd; box-shadow:0 8px 16px rgba(13,110,253,.15);
  }
  .form-group[data-name="form-cf-2"] .checkbox input[type="checkbox"]:focus + label{
    outline:2px solid #0d6efd; outline-offset:2px;
  }

  .checkbox label:after {
    color: #32CD32;
    font-size: 20px;
    height: 16px; 
    padding-left: 3px;
    padding-top: 1px;
    top: 0;
    width: 16px;
}

.checkbox label:after, .checkbox label:before {
    display: inline-block;
    left: 0;
    margin-left: 10px;
    position: absolute;
}
.checkbox label:before {border:transparent;}
    .dropdown-menu {
        position: relative;
}


a .red_btn {color:#ffffff;}


.tooltip{position:absolute;z-index:1070;display:block;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-style:normal;font-weight:400;line-height:1.42857143;line-break:auto;text-align:left;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-break:normal;word-spacing:normal;word-wrap:normal;white-space:normal;font-size:12px;filter:alpha(opacity=0);opacity:0}.tooltip.in{filter:alpha(opacity=90);opacity:.9}.tooltip.top{padding:5px 0;margin-top:-3px}

 .content-left-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    min-height: 100%;
    padding: 60px 60px 35px 60px;
    color: #fff;
    text-align: center;
    position: relative;
}
</style>
</head>

<body class="web-to-lead <?php echo $form->form_key . ($this->input->get('styled') === '2' ? ' styled' : ''); ?>">





  <div id="response"></div>




<?php echo form_open_multipart($this->uri->uri_string(), ['id' => $form->form_key, 'class' => 'disable-on-submit']); ?>
<?php hooks()->do_action('web_to_lead_form_start'); ?>
<?php echo form_hidden('key', $form->form_key); ?>



<?php
// Helper: get a field by name
function pf_field($fields, $name){
  foreach ($fields as $f) { if (isset($f->name) && $f->name === $name) return $f; }
  return null;
}
?>

<div class="body_wrapper frm-vh-md-100">
  <div class="formify_body formify_signup_fullwidth formify_signup_fullwidth_two d-flex">
    <div class="formify_left_fullwidth formify_left_top_logo frm-vh-md-100 d-flex align-items-center justify-content-center"  style="background-image: url('<?= base_url();?>assets/custom/assets/img/website-banner-img-1-v1.png');background-size: cover;">
      <!-- <a href="#" class="top_logo"><img src="<?= base_url();?>assets/custom/assets/img/logo_white_muzakarah.png" alt=""></a> -->
      
       <style>
        
       </style>
       <div class="content-left-wrapper">
<div> 
 <div class="company-logo text-center">
            <?php get_dark_company_logo(); ?>
        </div>>
 <!-- <img class="img-fluid" src="<?= base_url();?>assets/custom/assets/img/logo_white_muzakarah.png" alt=""> <br><br>  -->
 <!-- <p class="muzakara_h1" style="color: #000;font-size: 20px;font-weight: 400px;">Transformasi Sistem Kewangan Islam Yang Bersepadu</p>
  <ul>
<li style="color: #000;"><i class="icon-compass"></i> <b>AL-MEROZ HOTEL, BANGKOK, THAILAND</b></li>
<li style="color: #000;"><i class="icon-calendar"></i> <b> 15 July – 17 July 2025</b></li>
</ul> -->

                    
</div>
</div>
    </div>

    <div class="formify_right_fullwidth d-flex align-items-center justify-content-center">
      <div class="form_tab_two"><br><br>

        <!-- Tabs (BS3) -->
        <ul class="nav nav-tabs form_tab" id="myTab" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active show" id="One-tab" data-toggle="tab"  role="tab"
                                aria-controls="One" aria-selected="true">
                                <span>1</span>
                                
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="Two-tab" data-toggle="tab"  role="tab"
                                aria-controls="Two" aria-selected="false">
                                <span>2</span>
                                
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="Three-tab" data-toggle="tab"  role="tab"
                                aria-controls="Three" aria-selected="false">
                                <span>3</span>
                                
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="Four-tab" data-toggle="tab"  role="tab"
                                aria-controls="Four" aria-selected="false">
                                <span>4</span>
                                
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="Five-tab" data-toggle="tab"  role="tab"
                                aria-controls="Four" aria-selected="false">
                                <span>5</span>
                            </a>
                        </li>
                    </ul>
<div class="form-col">
                  
        <div class="tab-content" id="myTabContent">
           

          <!-- ===== STEP 1 (BS3 pane classes: active in) ===== -->
          <div class="tab-pane active in" id="One" role="tabpanel" aria-labelledby="One-tab">
            <div class="formify_box">
              <h4 class="form_title">How would you like to  <span>register?</span></h4>

              
              
            <div class="row">

                <?php if ($f = pf_field($form_fields, 'form-cf-2')) { render_form_builder_field($f); } ?>
              

              </div>

              <div class="next_button text-right">
                <a href="#Two" class="btn thm_btn red_btn next_tab" data-toggle="tab">
                  Next <i class="arrow_right"></i>
                </a>
              </div><br><br>
            </div>
          </div>


          <!-- ===== STEP 2(BS3 pane classes: active in) ===== -->
          <div class="tab-pane" id="Two"><div class="formify_box">
            <h4 class="form_title">Inland Revenue Board of <span>Malaysia (IRBM)</span></h4>
            <div class="row">
               <img
  src="<?= base_url('assets/custom/assets/img/lhdn_logo_v1.png'); ?>"
  alt="LHDN Logo"
  class="img-responsive center-block" style="height:100px;">
<div class="alert alert-info" role="alert" style="margin:15px 0;text-align: justify;">
  <i class="fa fa-info-circle" aria-hidden="true" style="margin-right:6px"></i>
  <strong>About e-Invoice:</strong>
  As part of INCEIF University’s full implementation of e-Invoicing effective July 2025, in line with the compliance
  requirements mandated by the <b>Inland Revenue Board of Malaysia (IRBM)</b>, it is mandatory to collect participants’
  identification details for any activity involving invoicing and payment.
  
  <a href="https://www.hasil.gov.my/en/e-invoice/implementation-of-e-invoicing-in-malaysia/about-e-invoice/"
     target="_blank" rel="noopener">
    Learn more on IRBM
  </a>.

</div>
    <p class="form_footer_text" style="padding-bottom:20px;">For e-Invoicing, please provide the ID type and number of the party who will be billed for this event. </p>


<div class="row">
<?php if ($f = pf_field($form_fields, 'form-cf-3')) { render_form_builder_field($f); } ?>
<?php if ($f = pf_field($form_fields, 'form-cf-4')) { render_form_builder_field($f); } ?>
</div>
</div>

            <div class="next_button d-flex align-items-center justify-content-between">
                <a href="#One" data-toggle="tab" class="prev_tab"><i class="arrow_left"></i> Back</a>           
                 <a href="#Three" class="btn thm_btn red_btn next_tab" data-toggle="tab">
                  Next <i class="arrow_right"></i>
                </a>
            </div><br><br></div>

<div id="step2Alert"></div>

</div>
          <!-- ===== STEP 3 (BS3 pane classes: active in) ===== -->
          <div class="tab-pane" id="Three"><div class="formify_box">
                <h4 class="form_title">Tell us about your <span>Billing Details</span></h4>
             <div class="row">

                <?php if ($f = pf_field($form_fields, 'form-cf-1')) { render_form_builder_field($f); } // Salutation ?>
                <?php if ($f = pf_field($form_fields, 'name'))       { render_form_builder_field($f); } // Full Name ?>
                <?php if ($f = pf_field($form_fields, 'company'))       { render_form_builder_field($f); } // Company?>
                <?php if ($f = pf_field($form_fields, 'address'))    { render_form_builder_field($f); } // Address ?>
                <?php if ($f = pf_field($form_fields, 'country'))    { render_form_builder_field($f); } // Country ?>


<?php
$selectedStateCode = set_value('state', $existing_state_code ?? '');

echo render_select(
    'state',
    get_all_states(),                // options
    ['Code','State'],                // value, label
    '<span class="text-danger">*</span> State', // label with asterisk
    $selectedStateCode,              // selected
    [                                // $select_attrs
        'id'               => 'state',
        'required'         => 'required',        // <-- makes it required
        'data-live-search' => true,
        'data-container'   => 'body',
        'data-width'       => '100%',
        'title'            => _l('dropdown_non_selected_tex'),
    ],
    [],                              // $form_group_attr
    'col-md-6 mbot15',               // wrapper classes
    'selectpicker form-control',     // select classes
    true                             // include blank option (needed for required)
);
?>








               


                <?php if ($f = pf_field($form_fields, 'city'))       { render_form_builder_field($f); } // City ?>
                <?php if ($f = pf_field($form_fields, 'zip'))        { render_form_builder_field($f); } // Zip ?>
                <?php if ($f = pf_field($form_fields, 'phonenumber')){ render_form_builder_field($f); } // Phone ?>
                <?php if ($f = pf_field($form_fields, 'email'))      { render_form_builder_field($f); } // Email ?>

                  <?php if ($f = pf_field($form_fields, 'form-cf-10')) { render_form_builder_field($f); } // Salutation ?>

              </div>


            <div class="next_button d-flex align-items-center justify-content-between"><a href="#Two" data-toggle="tab" class="prev_tab"><i class="arrow_left"></i> Back</a>
                <a href="#Four" class="btn thm_btn red_btn next_tab" data-toggle="tab">
                  Next <i class="arrow_right"></i>
                </a></div><br><br></div>
                <!-- Validation -->
<div id="step3Alert" class="alert alert-danger" style="display:none;margin:15px 0;">
  <i class="fa fa-exclamation-circle" aria-hidden="true" style="margin-right:6px"></i>
  <span class="msg">Please complete the required billing details to continue.</span>
</div>

              </div>


          <!-- ===== STEP 4 (BS3 pane classes: active in) ===== -->
          <div class="tab-pane" id="Four"><div class="formify_box">
            <h4 class="form_title">Participants <span>Detail</span></h4>
             <div class="row">

                <?php
// Build salutation options from your existing Salutation custom field (form-cf-1), if present
$salutation_s = [];
if (function_exists('pf_field') && ($f = pf_field($form_fields, 'form-cf-1')) && !empty($f->values)) {
  foreach ($f->values as $opt) {
    if (!empty($opt->value)) { $salutation_s[] = $opt->value; }
  }
}
// Fallback if none found
if (empty($salutation_s)) {
  $salutation_s = ['Dr','Prof','Mr','Ms','Mrs','Assoc. Prof. Dr.','Prof. Madya Dr.'];
}

// Event type options — pass from controller if you like
$event_types = isset($event_types) ? $event_types : ['Conference','Workshop','Seminar'];
?>
<style>
  .bootstrap-select .dropdown-menu { z-index: 2051; }
  .tab-pane, .formify_box { overflow: visible; }
</style>

<div class="formify_box">

  <p class="form_footer_text">
Please enter the total number of participants attending the event, <span style="color:#0055fb;">including yourself</span> if you will be attending.
  </p>
<br><br>
<!-- Step Four … -->

<div id="attendeeList"></div>
<button type="button" class="btn btn-primary" id="addAttendeeBtn">
  <i class="fa fa-plus"></i> Add Participant
</button>

<!-- Prototype as a JS template (NOT in the DOM flow) -->
<script type="text/template" id="attendeeProtoTpl">
  <div class="attendee-row row" data-index="__INDEX__" style="margin-bottom:10px; padding-bottom:10px; border-bottom:1px dashed #eee">
    <div class="col-sm-6">
      <div class="form-group">
        <label>Salutation</label>
        <select name="attendees[__INDEX__][salutation]" class="selectpicker" data-container="body" data-width="100%" title="Select…">
          <option value="">Select…</option>
          <?php foreach ($salutation_s as $s): ?>
            <option value="<?php echo htmlspecialchars($s, ENT_QUOTES, 'UTF-8'); ?>">
              <?php echo htmlspecialchars($s, ENT_QUOTES, 'UTF-8'); ?>
            </option>
          <?php endforeach; ?>
        </select>
      </div>
    </div>

    <div class="col-sm-6">
      <div class="form-group">
        <label>Full Name <span class="text-danger">*</span></label>
        <input type="text" name="attendees[__INDEX__][name]" class="form-control" required>
      </div>
    </div>

    <div class="col-sm-6">
      <div class="form-group">
        <label>Event Type <span class="text-danger">*</span></label>
        <select name="attendees[__INDEX__][event_type]" class="selectpicker" data-container="body" data-width="100%" title="Select…" required>
          <?php foreach (($event_types ?? ['Conference','Workshop','Seminar']) as $et): ?>
            <option value="<?php echo htmlspecialchars($et, ENT_QUOTES, 'UTF-8'); ?>">
              <?php echo htmlspecialchars($et, ENT_QUOTES, 'UTF-8'); ?>
            </option>
          <?php endforeach; ?>
        </select>
      </div>
    </div>

    <div class="col-sm-6">
      <div class="form-group">
        <label>Email <span class="text-danger">*</span></label>
        <input type="email" name="attendees[__INDEX__][email]" class="form-control" required>
      </div>
    </div>

    <div class="col-sm-12 text-right">
      <button type="button" class="btn btn-link text-danger js-remove-row">
        <i class="fa fa-trash"></i> Remove
      </button>
    </div>
  </div>
</script>

</div>



             </div> 


            <div class="next_button d-flex align-items-center justify-content-between"><a href="#Three" data-toggle="tab" class="prev_tab"><i class="arrow_left"></i> Back</a><a href="#Five" class="btn thm_btn red_btn next_tab" data-toggle="tab">Next <i class="arrow_right"></i></a></div></div>
<!-- Validation -->
<div id="step4Alert" class="alert alert-danger" style="display:none;margin:15px 0;">
  <i class="fa fa-exclamation-circle" aria-hidden="true" style="margin-right:6px"></i>
  <span class="msg">Please add at least one participant before continuing.</span>
</div>
</div>

          <!-- ===== STEP 5: Recaptcha/GDPR + Submit ===== -->
          <div class="tab-pane" id="Five">

            <div class="formify_box">
              <h4 class="form_title">TERMS AND <span>CONDITIONS</span></h4>
<style>
  .tnc-box{
    max-height: 400px;          /* fixed reading window */
    overflow: auto;             /* scroll inside */
    padding: 12px 14px;
    background: #f9fbfd;
    border: 1px solid rgba(0,0,0,.1);
    border-left: 4px solid #5bc0de; /* info-ish accent (BS3 info color family) */
    border-radius: 6px;
    margin-top: 6px;
  }
  .tnc-box .tnc{ margin: 8px 0; }
  .tnc-box ul.tnc{ padding-left: 18px; margin: 4px 0 12px; }
  /* Make sure dropdowns from this step overlay correctly */
  .tab-pane, .formify_box { overflow: visible; }
  .bootstrap-select .dropdown-menu { z-index: 2051; }
</style>

              <hr>
<div class="tnc-wrap">


  <div class="tnc-box" id="tncBox" tabindex="0" aria-label="Terms and Conditions">
    <p class="tnc"><strong>1. Early Bird Offer</strong></p>
    <ul class="tnc">
      <li>Early bird rates apply to registrations that are completed and paid in full (or supported by an accepted LoU) on or before the specified early bird deadline.</li>
      <li>In the absence of a response or confirmation within three (3) weeks, the organiser reserves the right to cancel the participant’s registration. The participant will be notified of the cancellation via email or any other appropriate communication channel as deemed necessary.</li>
    </ul>

    <p class="tnc"><strong>2. Payment Terms</strong></p>
    <ul class="tnc">
      <li>Full payment must be made within three (3) weeks after registration is made. Failure to complete payment by the end of the three weeks will result in the cancellation of the participation.</li>
      <li>In the case of payment supported by a valid Letter of Undertaking (LoU) from the recognized organisations, the payments must be paid in the description as specified in the LoU.</li>
      <li>In the absence of a response or confirmation within three (3) weeks, the organiser reserves the right to cancel the participant’s registration. The participant will be notified of the cancellation via email or any other appropriate communication channel as deemed necessary.</li>
    </ul>

    <p class="tnc"><strong>3. Receipt Issuance</strong></p>
    <ul class="tnc">
      <li>The organiser will issue a receipt within seven (7) working days from the date of receipt of payment from the participants.</li>
    </ul>

    <p class="tnc"><strong>4. Submission of LoU</strong></p>
    <ul class="tnc">
      <li>The LoU must clearly specify the participant's details, payment commitment, and timeline for the said payment.</li>
      <li>Any requests for changes to the LoU, such as adjustments to payment schedules or conditions, must be sent in writing to the organiser for approval at least 7 days before the established deadline.</li>
      <li>The organiser maintains the right to implement corrective measures, including but not limited to, suspending participation, canceling registration, or enforcing penalties, in cases of non-compliance with the LoU.</li>
    </ul>

    <p class="tnc"><strong>5. Changes to Registration</strong></p>
    <ul class="tnc">
      <li>Participants may request changes (or substituting with another individual) of the participation subject to the organiser's approval.</li>
    </ul>

    <p class="tnc"><strong>6. Walk-In Registration</strong></p>
    <ul class="tnc">
      <li>In the event that a participant's registration is terminated due to non-payment within the stipulated timeframe as mentioned herein, they may still attend the event as a walk-in participant, subject to the seat availability and the receipt of full payment from the said participant.</li>
      <li>The organiser reserves the right to refuse entry if the event reaches full capacity or if the participant fails to make full payment at the time of walk-in registration.</li>
    </ul>

    <p class="tnc"><strong>7. Program Changes</strong></p>
    <ul class="tnc">
      <li>The organiser reserves the right to modify the schedule, speakers, or event format as it deems fit and necessary.</li>
    </ul>

    <p class="tnc"><strong>8. Cancellation & Refund</strong></p>
    <ul class="tnc">
      <li>Any cancellations by the participant that is made up to two (2) weeks before the event date will be eligible to receive the full materials of the programme (ISSF<?php echo date("Y");?> and/or Advance Training) and a 50% refund.</li>
      <li>Any cancellations by the participant that is made within two (2) weeks of the event date will be eligible to receive the full materials of the programme (ISSF<?php echo date("Y");?> and/or Advance Training)  and a 30% refund.</li>
      <li>Any cancellations made on or after the event date, participant will not be eligible to receive the full materials of the programme (ISSF<?php echo date("Y");?> and/or Advance Training) and will not be entitled to any refunds.</li>
      <li>Refunds as stated in 8(a) and (b) above will be processed within 30 working days from the date of receipt by the organiser the cancellation confirmation from the participant.</li>
    </ul>

    <p class="tnc"><strong>9. Extraordinary Events</strong></p>
    <ul class="tnc">
      <li>In the case of unforeseen circumstances and/or extraordinary events beyond the reasonable control of the organiser, including but not limited to acts of God, war, terrorism, civil unrest, government regulations, natural disasters, or pandemics, the organiser is responsible to refund all fees paid by participants subject to deducting all event costs and expenses incurred by the organiser.</li>
      <li>The organiser shall not be held liable for any expenses incurred by participants, including but not limited to transportation, travelling, accommodation, visa and other related expenses.</li>
    </ul>

    <p class="tnc"><strong>10. Agreement</strong></p>
    <ul class="tnc">
      <li>By registering their participation to the event, participants agree to abide by the terms and conditions herein, including our privacy policy:
        <a href="https://inceif.edu.my/privacy-policy/" target="_blank" rel="noopener">https://inceif.edu.my/privacy-policy/</a>
      </li>
    </ul>
  </div>

  <div class="radio chk" style="margin-top:10px">
    <input type="radio" id="accept_event_terms" name="accept_event_terms" required="true">
    <label for="accept_event_terms">     
    </label> <b>I have read and agree to the Terms &amp; Conditions above.</b>
  </div>
</div>









              <div class="row">
                <?php if (show_recaptcha() && $form->recaptcha == 1) { ?>
                  <div class="col-md-12">
                    <div class="form-group">
                      <div class="g-recaptcha" data-sitekey="<?php echo get_option('recaptcha_site_key'); ?>"></div>
                      <div id="recaptcha_response_field" class="text-danger"></div>
                    </div>
                  </div>
                <?php } ?>

                <?php if (is_gdpr() && get_option('gdpr_enable_terms_and_conditions_lead_form') == 1) { ?>
                  <div class="col-md-12">
                    <div class="checkbox chk">
                      <input type="checkbox" name="accept_terms_and_conditions" required="true" id="accept_terms_and_conditions" <?php echo set_checkbox('accept_terms_and_conditions', 'on'); ?>>
                      <label for="accept_terms_and_conditions">
                        <?php echo _l('gdpr_terms_agree', terms_url()); ?>
                      </label>
                    </div>
                  </div>
                <?php } ?>
              </div>

              <div class="form-group col-lg-12 d-flex align-items-center justify-content-between">
                <a href="#Four" class="prev_tab" data-toggle="tab"><i class="arrow_left"></i> Back</a>
                <button class="btn btn-success" id="form_submit" type="submit"
                        style="color: <?php echo $form->submit_btn_text_color ?>;background-color: <?php echo $form->submit_btn_bg_color ?>;">
                  <i class="fa fa-spinner fa-spin hide" style="margin-right:2px;"></i>
                  <?php echo e($form->submit_btn_name); ?> <i class="fa fa-hand-pointer"></i>

                </button>
              </div>
            </div>
          </div>

        </div><!-- /tab-content -->
      </div>
    </div>
    </div>
  </div>
</div> 

<?php hooks()->do_action('web_to_lead_form_end'); ?>
 <?php echo form_close(); ?>




         <!-- Optional JavaScript; choose one of the two! -->
        <?php app_external_form_footer($form); ?>
    <script src="<?= base_url();?>assets/custom/assets/vendors/bootstrap/js/popper.min.js"></script>  
    <script src="<?= base_url();?>assets/custom/assets/vendors/nice-select/js/jquery.nice-select.min.js"></script>
    <script src="<?= base_url();?>assets/custom/assets/js/main.js"></script>
        <script>
        var form_id = '#<?php echo e($form->form_key); ?>';
        var form_redirect_url = '<?php echo $form->submit_action == 1 ? $form->submit_redirect_url : 0; ?>';
        $(function() {
            $(form_id).appFormValidator({

                onSubmit: function(form) {

                    $("input[type=file]").each(function() {
                        if ($(this).val() === "") {
                            $(this).prop('disabled', true);
                        }
                    });
                    $('#form_submit .fa-spin').removeClass('hide');

                    var formURL = $(form).attr("action");
                    var formData = new FormData($(form)[0]);

                    $.ajax({
                        type: $(form).attr('method'),
                        data: formData,
                        mimeType: $(form).attr('enctype'),
                        contentType: false,
                        cache: false,
                        processData: false,
                        url: formURL
                    }).always(function() {
                        $('#form_submit').prop('disabled', false);
                        $('#form_submit .fa-spin').addClass('hide');
                    }).done(function(response) {
                        response = JSON.parse(response);
                        if (form_redirect_url !== '0') {
                            if (window.top) {
                                window.top.location.href = form_redirect_url;
                            } else {
                                window.location.href = form_redirect_url;
                            }
                            return;
                        } else if (response.redirect_url) {
                            // In case action hook is used to redirect
                            if (window.top) {
                                window.top.location.href = response.redirect_url;
                            } else {
                                window.location.href = response.redirect_url;
                            }
                            return;
                        }
                        if (response.success == false) {
                            $('#recaptcha_response_field').html(response
                                .message); // error message
                        } else if (response.success == true) {
                            $(form_id).remove();
                            $('#response').html('<div class="alert alert-success">' +
                                response.message + '</div>');
                            $('html,body').animate({
                                scrollTop: $("#online_payment_form").offset().top
                            }, 'slow');
                        } else {
                            $('#response').html("<?php echo _l('something_went_wrong'); ?>");
                        }
                        if (typeof(grecaptcha) != 'undefined') {
                            grecaptcha.reset();
                        }
                    }).fail(function(data) {
                        if (typeof(grecaptcha) != 'undefined') {
                            grecaptcha.reset();
                        }
                        if (data.status == 422) {
                            $('#response').html(
                                '<div class="alert alert-danger">Some fields that are required are not filled properly.</div>'
                            );
                        } else {
                            $('#response').html(data.responseText);
                        }
                    });
                    return false;
                }
            });
        });
        </script>
        <?php hooks()->do_action('app_web_to_lead_form_footer'); ?>
    <!-- Option 1: Bootstrap Bundle with Popper -->
    
    <script>
        $(function () {
  var $group = $('.form-group[data-name="form-cf-2"]');

  // 1) Friendlier label + helper
  $group.find('> label.control-label').html(
       
        '<p class="form_footer_text" style="padding-bottom:20px;">Please indicate whether you are registering as an individual (self-paying) or if your event fee will be covered by a company sponsor.</p>'
  );

  // 2) Replace option labels with icon cards
  // NOTE: Font Awesome "company" icon is "fa-building" (there’s no "fa-company")
  $group.find('label[for="chk_form-cf-2_0"]').html(
    '<i class="fa fa-user" aria-hidden="true"></i><span>Individual</span>'
  );
  $group.find('label[for="chk_form-cf-2_1"]').html(
    '<i class="fa fa-building" aria-hidden="true"></i><span>Company</span>'
  );

  // 3) OPTIONAL: make it behave like radio buttons (only one at a time)
  $group.on('change', 'input[type="checkbox"]', function(){
    if (this.checked) {
      $group.find('input[type="checkbox"]').not(this).prop('checked', false);
    }
  });

  // If you use "nice-select" or other select plugins elsewhere, no changes needed here.
});
</script>
<script>

(function ($) {
  $(function () {
    var $list = $('#attendeeList');
    var tpl   = $('#attendeeProtoTpl').html();
    var idx   = 0;

    function addRow(prefill) {
      var html = tpl.replace(/__INDEX__/g, idx);
      var $row = $(html);

      $list.append($row);

      // Initialize selectpicker on the new selects only
      if ($.fn.selectpicker) {
        $row.find('select.selectpicker')
            .attr('data-container', 'body') // ensures dropdown escapes overflow
            .selectpicker();
      }

      if (prefill) {
        $row.find('[name="attendees['+idx+'][salutation]"]').val(prefill.salutation || '').change();
        $row.find('[name="attendees['+idx+'][name]"]').val(prefill.name || '');
        $row.find('[name="attendees['+idx+'][event_type]"]').val(prefill.event_type || '').change();
        $row.find('[name="attendees['+idx+'][email]"]').val(prefill.email || '');
        if ($.fn.selectpicker) $row.find('select.selectpicker').selectpicker('refresh');
      }

      idx++;
    }

    // Add first empty row if you want
    // addRow();

    $('#addAttendeeBtn').on('click', function (e) { e.preventDefault(); addRow(); });
    $list.on('click', '.js-remove-row', function (e) { e.preventDefault(); $(this).closest('.attendee-row').remove(); });
  });
})(window.jQuery);


</script>
<script>
(function($){
  $(function(){
    var $agree = $('#accept_event_terms');
    var $btn   = $('#form_submit');

    function syncSubmit(){
      $btn.prop('disabled', !$agree.is(':checked'));
    }
    // initial state + on toggle
    syncSubmit();
    $agree.on('change', syncSubmit);

    // Optional: if the user tries to submit via keyboard before checking, focus the box
    $(document).on('click', '#form_submit', function(e){
      if (!$agree.is(':checked')) {
        $('#tncBox').focus();
      }
    });
  });
})(window.jQuery);
</script>


<!-- Validation Step 1 -->
<script>
(function ($) {
  $(function () {
    // If your tab-content has a different id, change #myTabContent below.
    var $panes  = $('#myTabContent .tab-pane').length ? $('#myTabContent .tab-pane') : $('.tab-content .tab-pane');

    // ---------- STEP 1 VALIDATOR (unchanged & pure) ----------
    function isStep1Valid() {
      var $boxes = $('#One input[name="form-cf-2[]"]');
      if (!$boxes.length) return true;
      if ($boxes.filter(':checked').length === 0) {
        showStep1Alert('Please choose one option (Individual or Company) to continue.');
        return false;
      }
      hideStep1Alert();
      return true;
    }

    function showStep1Alert(text){
      var $a = $('#step1Alert');
      if (text) $a.find('.msg').text(text);
      if ($a.is(':hidden')) $a.stop(true,true).slideDown(150);
      $('html,body').animate({ scrollTop: $a.offset().top - 80 }, 200);
    }
    function hideStep1Alert(){ $('#step1Alert').stop(true,true).slideUp(120); }

    // ---------- DISABLE/ENABLE STEP 1 "NEXT" ----------
    var $step1Next = $('#One .next_button a');
    var step1Target = $step1Next.attr('href') || '#Two';
    $step1Next.attr('data-target', step1Target); // remember target

    function enableNext($a){
      $a.removeClass('disabled')
        .attr('href', $a.data('target'))
        .attr('data-toggle','tab')
        .addClass('next_tab')
        .removeAttr('aria-disabled')
        .attr('tabindex','0');
    }
    function disableNext($a){
      $a.addClass('disabled')
        .attr('href', '#')
        .removeAttr('data-toggle')
        .removeClass('next_tab')
        .attr('aria-disabled','true')
        .attr('tabindex','-1');
    }
    function step1HasSelection(){
      return $('#One input[name="form-cf-2[]"]:checked').length > 0;
    }
    function updateStep1NextState(){
      if (step1HasSelection()) {
        enableNext($step1Next);
        hideStep1Alert();
      } else {
        disableNext($step1Next);
      }
    }

    // Init state & live toggle
    updateStep1NextState();
    $(document).on('change', '#One input[name="form-cf-2[]"]', updateStep1NextState);

    // Safety: intercept clicks on the Next link
    $(document).on('mousedown touchstart click', '#One .next_button a', function (e) {
      // Block if still invalid; also ensures class stays off
      if (!isStep1Valid()) {
        disableNext($step1Next);
        e.preventDefault(); e.stopImmediatePropagation(); return false;
      }
      // If not using data-toggle="tab", switch manually on click
      if (e.type === 'click' && $(this).attr('data-toggle') !== 'tab') {
        e.preventDefault();
        $('#myTab a[href="' + step1Target + '"]').tab('show');
      }
    });

    // Block top tab clicks when moving forward from Step 1 (prevents bypass)
    $('#myTab').on('mousedown touchstart click', 'a[data-toggle="tab"]', function (e) {
      var href = $(this).attr('href');
      var $target  = $(href);
      var $current = $panes.filter('.active');
      if (!$target.length || !$current.length) return;

      var goingForward = $panes.index($target) > $panes.index($current);
      if (goingForward && $current.is('#One') && !isStep1Valid()) {
        e.preventDefault(); e.stopImmediatePropagation(); return false;
      }
    });
  });
})(window.jQuery);
</script>
<script>
(function ($) {
  $(function () {

    // ---------- STEP 2 VALIDATOR ----------
    // Grab all inputs that belong to form-cf-3 and form-cf-4 (handles [] too)
    function $step2Fields() {
      return $('#Two').find(
        'input[name^="form-cf-3"], select[name^="form-cf-3"], textarea[name^="form-cf-3"],' +
        'input[name^="form-cf-4"], select[name^="form-cf-4"], textarea[name^="form-cf-4"]'
      );
    }

    function fieldHasValue($el){
      var tag = ($el.prop('tagName') || '').toLowerCase();
      var type = ($el.attr('type') || '').toLowerCase();

      // Radio/checkbox groups: need at least one checked in the group
      if (type === 'radio' || type === 'checkbox') {
        var name = $el.attr('name');
        return !!$('#Two [name="'+name+'"]:checked').length;
      }

      // Select: non-empty and not a sentinel "0"
      if (tag === 'select') {
        var v = ($el.val() || '').toString().trim();
        return (v !== '' && v !== '0' && v !== '-1');
      }

      // Text/textarea/etc: non-empty
      var val = ($el.val() || '').toString().trim();
      return val.length > 0;
    }

    function isStep2Valid(){
      var $fields = $step2Fields();
      if (!$fields.length) return true; // nothing to validate
      // We require at least one valid value for group 3 and one for group 4
      var $g3 = $('#Two').find('input[name^="form-cf-3"], select[name^="form-cf-3"], textarea[name^="form-cf-3"]');
      var $g4 = $('#Two').find('input[name^="form-cf-4"], select[name^="form-cf-4"], textarea[name^="form-cf-4"]');

      var ok3 = $g3.length ? groupValid($g3) : true;
      var ok4 = $g4.length ? groupValid($g4) : true;

      if (!(ok3 && ok4)) {
        showStep2Alert('Please provide both the ID Type and the ID Number to continue.');
        return false;
      }
      hideStep2Alert();
      return true;
    }

    function groupValid($group){
      // If the group contains any radios/checkboxes, treat as a choice group; else treat as single value
      var $choices = $group.filter('input[type="radio"], input[type="checkbox"]');
      if ($choices.length) {
        var name = $choices.first().attr('name');
        return !!$('#Two [name="'+name+'"]:checked').length;
      }
      // Otherwise, at least one element in the group must have value
      var valid = false;
      $group.each(function(){ if (fieldHasValue($(this))) { valid = true; return false; } });
      return valid;
    }

    function showStep2Alert(text){
      var $a = $('#step2Alert');
      if (text) $a.find('.msg').text(text);
      if ($a.is(':hidden')) $a.stop(true,true).slideDown(150);
      $('html,body').animate({ scrollTop: $a.offset().top - 80 }, 200);
    }
    function hideStep2Alert(){ $('#step2Alert').stop(true,true).slideUp(120); }

    // ---------- DISABLE/ENABLE STEP 2 "NEXT" ----------
    var $step2Next   = $('#Two .next_button a[href="#Three"], #Two .next_button a').filter(function(){
      return ($(this).attr('href') || '').indexOf('#Three') === 0;
    });
    var step2Target  = $step2Next.attr('href') || '#Three';
    $step2Next.attr('data-target', step2Target);

    function enableStep2Next($a){
      $a.removeClass('disabled')
        .attr('href', $a.data('target'))
        .attr('data-toggle','tab')
        .addClass('next_tab')
        .removeAttr('aria-disabled')
        .attr('tabindex','0');
    }
    function disableStep2Next($a){
      $a.addClass('disabled')
        .attr('href', '#')
        .removeAttr('data-toggle')
        .removeClass('next_tab')
        .attr('aria-disabled','true')
        .attr('tabindex','-1');
    }

    function updateStep2NextState(){
      if (isStep2Valid()) {
        enableStep2Next($step2Next);
      } else {
        disableStep2Next($step2Next);
      }
    }

    // Init state
    updateStep2NextState();

    // Live changes: listen to inputs/selects in Step 2
    $(document).on('change keyup blur', '#Two input, #Two select, #Two textarea', function(){
      updateStep2NextState();
    });

    // Intercept Step 2 Next clicks
    $(document).on('mousedown touchstart click', '#Two .next_button a', function(e){
      if (!isStep2Valid()) {
        disableStep2Next($step2Next);
        e.preventDefault(); e.stopImmediatePropagation(); return false;
      }
      if (e.type === 'click' && $(this).attr('data-toggle') !== 'tab') {
        e.preventDefault();
        $('#myTab a[href="' + step2Target + '"]').tab('show');
      }
    });

    // Prevent jumping forward via tab headers from Step 2 if invalid
    var $panes  = $('#myTabContent .tab-pane').length ? $('#myTabContent .tab-pane') : $('.tab-content .tab-pane');
    $('#myTab').on('mousedown touchstart click', 'a[data-toggle="tab"]', function (e) {
      var href = $(this).attr('href');
      var $target  = $(href);
      var $current = $panes.filter('.active');
      if (!$target.length || !$current.length) return;

      var goingForward = $panes.index($target) > $panes.index($current);
      if (goingForward && $current.is('#Two') && !isStep2Valid()) {
        e.preventDefault(); e.stopImmediatePropagation(); return false;
      }
    });

  });
})(window.jQuery);
</script>
<script>
(function ($) {
  $(function () {

    // --------- helpers ----------
    function showStep3Alert(text){
      var $a = $('#step3Alert');
      if (text) $a.find('.msg').text(text);
      if ($a.is(':hidden')) $a.stop(true,true).slideDown(150);
      $('html,body').animate({ scrollTop: $a.offset().top - 80 }, 200);
    }
    function hideStep3Alert(){ $('#step3Alert').stop(true,true).slideUp(120); }

    function isEmail(v){
      // simple but effective
      return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test((v||'').trim());
    }
    function isPhone(v){
      // digits + basic symbols; at least 6 digits
      v = (v||'').replace(/[^\d]/g,'');
      return v.length >= 6;
    }

    // Get all step-3 inputs that are "required" by attribute/class/aria
    function $step3Required(){
      return $('#Three').find(
        'input[required], select[required], textarea[required], '+
        'input.required, select.required, textarea.required, '+
        'input[aria-required="true"], select[aria-required="true"], textarea[aria-required="true"]'
      );
    }

    // Extra rule: if Step 1 selected "Company", force company field to be required (if present)
    function companyIsRequired(){
      // Works for form-cf-2 rendered as checkbox/radio group
      var $companyChoice = $('#One input[name="form-cf-2[]"]');
      if (!$companyChoice.length) return false;
      var pickedCompany = $companyChoice.filter(':checked').filter(function(){
        return /company/i.test($(this).val() || $(this).closest('label').text() || '');
      }).length > 0;
      return pickedCompany;
    }

    // Check if a single element (or its group) has a valid value
    function elementValid($el){
      var tag  = ($el.prop('tagName') || '').toLowerCase();
      var type = ($el.attr('type') || '').toLowerCase();
      var name = $el.attr('name') || '';

      // Radios/checkboxes: require at least one checked in the *group*
      if (type === 'radio' || type === 'checkbox') {
        if (!name) return true; // bail if unnamed
        return !!$('#Three [name="'+name+'"]:checked').length;
      }

      // Selects: non-empty and not sentinel
      if (tag === 'select') {
        var v = ($el.val() || '').toString().trim();
        return (v !== '' && v !== '0' && v !== '-1');
      }

      // Text-like
      var val = ($el.val() || '').toString().trim();
      if (!val) return false;

      // Specific field checks by name
      if (/email/i.test(name)) {
        return isEmail(val);
      }
      if (/phone|phonenumber/i.test(name)) {
        return isPhone(val);
      }
      if (/zip|postcode|postal/i.test(name)) {
        return val.length >= 3; // light sanity check
      }

      return true;
    }

    function isStep3Valid(){
      // Gather all "required" fields first
      var $required = $step3Required();

      // Enforce company if needed
      if (companyIsRequired()) {
        // Find any company field (text/select/etc) and treat as required
        var $company = $('#Three').find('[name^="company"]');
        if ($company.length) { $required = $required.add($company); }
      }

      // If nothing is marked required, assume valid
      if (!$required.length) return true;

      // Validate each required field / group
      var ok = true;
      $required.each(function(){
        var $el = $(this);
        if (!elementValid($el)) {
          ok = false;
          return false; // break
        }
      });

      if (!ok) {
        showStep3Alert('Please complete all required fields (and check email/phone format) to continue.');
        return false;
      }
      hideStep3Alert();
      return true;
    }

    // ---------- DISABLE/ENABLE STEP 3 "NEXT" ----------
    var $step3Next  = $('#Three .next_button a[href="#Four"], #Three .next_button a').filter(function(){
      return ($(this).attr('href') || '').indexOf('#Four') === 0;
    });
    var step3Target = $step3Next.attr('href') || '#Four';
    $step3Next.attr('data-target', step3Target);

    function enableStep3Next($a){
      $a.removeClass('disabled')
        .attr('href', $a.data('target'))
        .attr('data-toggle','tab')
        .addClass('next_tab')
        .removeAttr('aria-disabled')
        .attr('tabindex','0');
    }
    function disableStep3Next($a){
      $a.addClass('disabled')
        .attr('href', '#')
        .removeAttr('data-toggle')
        .removeClass('next_tab')
        .attr('aria-disabled','true')
        .attr('tabindex','-1');
    }

    function updateStep3NextState(){
      if (isStep3Valid()) {
        enableStep3Next($step3Next);
      } else {
        disableStep3Next($step3Next);
      }
    }

    // Init + live
    updateStep3NextState();
    $(document).on('change keyup blur', '#Three input, #Three select, #Three textarea', updateStep3NextState);
    // Also respond to Step-1 changes (Company/Individual) because it can toggle "company" requirement
    $(document).on('change', '#One input[name="form-cf-2[]"]', updateStep3NextState);

    // Intercept Step-3 Next clicks
    $(document).on('mousedown touchstart click', '#Three .next_button a', function(e){
      if (!isStep3Valid()) {
        disableStep3Next($step3Next);
        e.preventDefault(); e.stopImmediatePropagation(); return false;
      }
      if (e.type === 'click' && $(this).attr('data-toggle') !== 'tab') {
        e.preventDefault();
        $('#myTab a[href="' + step3Target + '"]').tab('show');
      }
    });

    // Prevent jumping forward via tab headers from Step 3 if invalid
    var $panes  = $('#myTabContent .tab-pane').length ? $('#myTabContent .tab-pane') : $('.tab-content .tab-pane');
    $('#myTab').on('mousedown touchstart click', 'a[data-toggle="tab"]', function (e) {
      var href = $(this).attr('href');
      var $target  = $(href);
      var $current = $panes.filter('.active');
      if (!$target.length || !$current.length) return;

      var goingForward = $panes.index($target) > $panes.index($current);
      if (goingForward && $current.is('#Three') && !isStep3Valid()) {
        e.preventDefault(); e.stopImmediatePropagation(); return false;
      }
    });

  });
})(window.jQuery);
</script>

<script>
(function ($) {
  $(function () {

    function showStep4Alert(text){
      var $a = $('#step4Alert');
      if (text) $a.find('.msg').text(text);
      if ($a.is(':hidden')) $a.stop(true,true).slideDown(150);
      $('html,body').animate({ scrollTop: $a.offset().top - 80 }, 200);
    }
    function hideStep4Alert(){ $('#step4Alert').stop(true,true).slideUp(120); }

    function isStep4Valid(){
      var count = $('#attendeeList .attendee-row').length;
      if (count < 1) {
        showStep4Alert('Please add at least one participant before continuing.');
        return false;
      }
      hideStep4Alert();
      return true;
    }

    // ---------- DISABLE/ENABLE STEP 4 "NEXT" ----------
    var $step4Next  = $('#Four .next_button a[href="#Five"], #Four .next_button a').filter(function(){
      return ($(this).attr('href') || '').indexOf('#Five') === 0;
    });
    var step4Target = $step4Next.attr('href') || '#Five';
    $step4Next.attr('data-target', step4Target);

    function enableStep4Next($a){
      $a.removeClass('disabled')
        .attr('href', $a.data('target'))
        .attr('data-toggle','tab')
        .addClass('next_tab')
        .removeAttr('aria-disabled')
        .attr('tabindex','0');
    }
    function disableStep4Next($a){
      $a.addClass('disabled')
        .attr('href', '#')
        .removeAttr('data-toggle')
        .removeClass('next_tab')
        .attr('aria-disabled','true')
        .attr('tabindex','-1');
    }

    function updateStep4NextState(){
      if (isStep4Valid()) {
        enableStep4Next($step4Next);
      } else {
        disableStep4Next($step4Next);
      }
    }

    // Init + live update: whenever rows are added/removed
    updateStep4NextState();
    $(document).on('click', '#addAttendeeBtn, #attendeeList .js-remove-row', function(){
      setTimeout(updateStep4NextState, 100);
    });

    // Intercept Step-4 Next clicks
    $(document).on('mousedown touchstart click', '#Four .next_button a', function(e){
      if (!isStep4Valid()) {
        disableStep4Next($step4Next);
        // Auto-trigger Add Participant to help user
        $('#addAttendeeBtn').trigger('click');
        e.preventDefault(); e.stopImmediatePropagation(); return false;
      }
      if (e.type === 'click' && $(this).attr('data-toggle') !== 'tab') {
        e.preventDefault();
        $('#myTab a[href="' + step4Target + '"]').tab('show');
      }
    });

    // Prevent tab-header skip forward from Step 4
    var $panes  = $('#myTabContent .tab-pane').length ? $('#myTabContent .tab-pane') : $('.tab-content .tab-pane');
    $('#myTab').on('mousedown touchstart click', 'a[data-toggle="tab"]', function (e) {
      var href = $(this).attr('href');
      var $target  = $(href);
      var $current = $panes.filter('.active');
      if (!$target.length || !$current.length) return;

      var goingForward = $panes.index($target) > $panes.index($current);
      if (goingForward && $current.is('#Four') && !isStep4Valid()) {
        e.preventDefault(); e.stopImmediatePropagation(); return false;
      }
    });

  });
})(window.jQuery);
</script>
<script>
(function () {
  var MALAYSIA_VAL = '133'; // value of "Malaysia" in #country
  var NA_STATE_VAL = '17';  // "Not Applicable" code in #state

  function setSelectValue(el, val) {
    var $ = window.jQuery;
    if (!el) return;
    if ($ && $(el).data('selectpicker')) {
      $(el).selectpicker('val', val).selectpicker('refresh');
    } else {
      el.value = val;
      el.dispatchEvent(new Event('change'));
    }
  }

  function clearSelect(el) {
    setSelectValue(el, '');
  }

  function handleCountryChange() {
    var $ = window.jQuery;
    var countryEl = document.getElementById('country');
    var stateEl   = document.getElementById('state');
    if (!countryEl || !stateEl) return;

    var val = ($ && $(countryEl).data('selectpicker'))
      ? $(countryEl).selectpicker('val')
      : countryEl.value;

    if (String(val) === MALAYSIA_VAL) {
      // Back to Malaysia → reset state
      clearSelect(stateEl);
    } else {
      // Other country → force "Not Applicable"
      setSelectValue(stateEl, NA_STATE_VAL);
    }
  }

  // Run once on load
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', handleCountryChange);
  } else {
    handleCountryChange();
  }

  // React to changes
  if (window.jQuery && jQuery('#country').length) {
    jQuery('#country').on('changed.bs.select change', handleCountryChange);
  } else {
    var countryEl = document.getElementById('country');
    if (countryEl) countryEl.addEventListener('change', handleCountryChange);
  }
})();
</script>



<!-- ToolTip-->
</body>

</html>