<body>
  <div class="content-body">
    <div class="container">
      <!-- MultiStep Form -->
      <div class="container-fluid">
        <div class="row justify-content-center mt-0">
          <div class="col-11 col-sm-9 col-md-7 col-lg-9 text-center p-0 mt-3">
            <div class="card px-0 pt-2 pb-0" style="background-color: transparent;">
              <div class="row">
                <div class="col-md-12 mx-0">
                  <form id="msform" action="<?= route('wizard.akun.pilih') ?>">
                    <!-- progressbar -->
                    <div class="section-progressbar">
                      <h2 id="judul" class="fs-title text-center">Quick Setup</h2>
                      <ul id="progressbar">
                        <li class="active" id="lokasi"><span></span> Lokasi Absensi</li>
                        <li id="akun" class="active"><span></span> Akun</li>
                        <li id="finish"><span></span> Finish</li>
                      </ul>
                    </div>
                    <fieldset>
                      <div class="form-card">
                        <div class="row">
                          <div class="col-md-12">
                            <div class="form-group form-check">
                              <input type="checkbox" class="form-check-input" id="kepala_departemen" name="kepala_departemen" value="ya">
                              <label class="form-check-label" for="kepala_departemen">Kepala Departemen</label>
                            </div>
                            <div class="form-group form-check">
                              <input type="checkbox" class="form-check-input" id="staff" name="staff" value="ya">
                              <label class="form-check-label" for="staff">Staff</label>
                            </div>
                          </div>
                        </div>
                      </div>
                      <a href="<?= route('wizard.selesai') ?>"><button type="button" name="previous" class="previous action-button-previous float-left">Kembali</button></a>
                      <button type="submit" class="next action-button float-right"> Berikutnya </button>
                    </fieldset>
                  </form>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="footer">
      Copyright © 2021 Absenku Profesional
    </div>
  </div>
</body>
<script type="text/javascript">
$('#kepala_departemen').change(function() {
	if(this.checked) {
		$('#staff').prop('checked', true);
	}
});

$('#staff').change(function() {
	if($('#kepala_departemen').is(':checked')) {
		$('#staff').prop('checked', true);
	}
});
</script>
</html>
