<style>
table{
  margin: 0 auto;
  width: 100%;
  clear: both;
  border-collapse: collapse;
  table-layout: fixed; 
  word-wrap:break-word; 
}
</style>
<div class="row page-titles">
  <div class="col-md-5 align-self-center">
    <h4 class="text-themecolor">MANAGE SECRETARIAT</h4>
  </div>
  <div class="col-md-7 align-self-center text-right">
    <div class="d-flex justify-content-end align-items-center">
      <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="<?php echo base_url();?>admin/dashboard">HOME</a></li>
        <li class="breadcrumb-item active">MANAGE SECRETARIAT</li>
      </ol>
    </div>
  </div>
</div>
<div class="col-12 ">
  <div class="card mt-4">
    <div class="card-body">
      <div class="row">
        <div class="col-md-4">
          <div class="form-group">
            <label class="control-label">DESIGNATIONS</label>
            <select class="form-control" id="designation-filter-2" name="designation-filter-2">
              <option value="">SELECT DESIGNATION</option>
              <?php 
              if($designation !== "No Data"){
                foreach($designation as $val){
                  echo '<option value="'.$val->id.'">'.strtoupper($val->name).'</option>';
                }
              }
              ?>
            </select>
          </div>
        </div>
        <div class="col-md-4 offset-4">
          <button class="btn btn-block btn-rounded btn-outline-success mt-4" onclick="window.location.href='<?php echo base_url(); ?>secretariat/add'">ADD SECRETARIAT
          </button>  
        </div>
      </div>
      <table id="secretariatTable" class="table table-striped table-bordered text-center" cellspacing="0" width="100%">
        <thead>
          <tr>
            <th>VIEW</th>
            <th>DELETE</th>
            <th>IMAGE</th>
            <th>NAME</th>
            <th>DESIGNATION</th>
            <th>STATUS</th>
            <th>MODIFIED BY</th>
            <th>MODIFIED DATE</th>
          </tr>
        </thead>
        <tbody>
        </tbody>
      </table>
    </div>
  </div>
</div>