<?= $this->extend("templates/hod_base"); ?>

<?= $this->section("content"); ?>
<?php $page_session = \Config\Services::session(); ?>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h1>Manage Profile</h1>
          </div>
          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
              <li class="breadcrumb-item"><a href="#">Home</a></li>
              <li class="breadcrumb-item active">Manage Profile</li>
            </ol>
          </div>
        </div>
      </div><!-- /.container-fluid -->
    </section>

    <!-- Main content -->
    <section class="content">
      <div class="container-fluid">
        <!-- SELECT2 EXAMPLE -->
        <div class="card card-default">
          <div class="card-header p-2">
            <ul class="nav nav-pills">
              <li class="nav-item"><a class="nav-link active" href="#sign" data-toggle="tab">Signature</a></li>
              <li class="nav-item"><a class="nav-link" href="#password" data-toggle="tab">Change Password</a></li>
            </ul>
          </div>
          <div class="card-body">
            <div class="tab-content">
                <div class="active tab-pane" id="sign">
                    <form method="POST" id="sign_form" class="form-horizontal form-validate" enctype="multipart/form-data">
                        <input type="hidden" name="action" id="action" value="sign"/>
                        <div class="form-group">
                            <label for="formAdmin-Image" class="col-sm-2 control-label">Signature Image</label>
                            <div class="col-sm-10">
                            <input type="file" class="form-control" name="image" id="formAdmin-Image" placeholder="Upload Image" required accept="image/*" onchange="previewImage(this, '#signPreview')">
                            </div>
                        </div>       
                        <div class="form-group" id="signPreview">
                            <div class="col-12">
                            <img src="<?=base_url('uploads/signature/'.$page_session->get('id')) ?>" width="150" alt="My Signature"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-12">
                            <button type="submit" id="submit" class="btn btn-primary btn-flat">Upload</button>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="tab-pane" id="password">
                    <form method="POST" id="pwd_form" class="form-validate">
                        <input type="hidden" name="action" id="action" value="password"/>
                      <div class="row">
                      <div class="col-md-6">
                        <div class="form-group">
                          <label>New Password:<font style="color:#F00"> *</font></label>
                          <input type="password" class="form-control" name="pass1" id="pass1" minlength="6" required autofocus />
                        </div>
                      </div>
                      <div class="col-md-6">
                        <div class="form-group">
                          <label>Retype New Password:<font style="color:#F00"> *</font></label>
                          <input type="password" class="form-control" name="pass2" id="pass2" minlength="6" required autofocus equalTo="#pass1" />
                        </div>
                      </div>
                      </div>
                      <div class="row">
                      <div class="col-md-12">
                        <div class="form-group">
                          <input type="submit" class="form-control btn btn-primary" name="submit" id="submit_button" value="Submit"/>
                        </div>
                      </div>
                      </div>
                    </form>
                </div>
            </div>
          </div>
        </div>

      </div>
      <!-- /.container-fluid -->
    </section>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->

<?= $this->endSection(); ?>