<style type="text/css">
  .timeline {
    list-style: none;
    padding: 20px 0 20px;
    position: relative;
  }
  .timeline:before {
    top: 0;
    bottom: 0;
    position: absolute;
    content: " ";
    width: 3px;
    background-color: #eeeeee;
    left: 50%;
    margin-left: -1.5px;
  }
  .timeline > li {
    margin-bottom: 20px;
    position: relative;
  }
  .timeline > li:before,
  .timeline > li:after {
    content: " ";
    display: table;
  }
  .timeline > li:after {
    clear: both;
  }
  .timeline > li:before,
  .timeline > li:after {
    content: " ";
    display: table;
  }
  .timeline > li:after {
    clear: both;
  }
  .timeline > li > .timeline-panel {
    width: 46%;
    float: left;
    border: 1px solid #d4d4d4;
    border-radius: 2px;
    padding: 20px;
    position: relative;
    -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
  }
  .timeline > li > .timeline-panel:before {
    position: absolute;
    top: 26px;
    right: -15px;
    display: inline-block;
    border-top: 15px solid transparent;
    border-left: 15px solid #ccc;
    border-right: 0 solid #ccc;
    border-bottom: 15px solid transparent;
    content: " ";
  }
  .timeline > li > .timeline-panel:after {
    position: absolute;
    top: 27px;
    right: -14px;
    display: inline-block;
    border-top: 14px solid transparent;
    border-left: 14px solid #fff;
    border-right: 0 solid #fff;
    border-bottom: 14px solid transparent;
    content: " ";
  }
  .timeline > li > .timeline-badge {
    color: #fff;
    width: 50px;
    height: 50px;
    line-height: 50px;
    font-size: 1.4em;
    text-align: center;
    position: absolute;
    top: 16px;
    left: 50%;
    margin-left: -25px;
    background-color: #999999;
    z-index: 100;
    border-top-right-radius: 50%;
    border-top-left-radius: 50%;
    border-bottom-right-radius: 50%;
    border-bottom-left-radius: 50%;
  }
  .timeline > li.timeline-inverted > .timeline-panel {
    float: right;
  }
  .timeline > li.timeline-inverted > .timeline-panel:before {
    border-left-width: 0;
    border-right-width: 15px;
    left: -15px;
    right: auto;
  }
  .timeline > li.timeline-inverted > .timeline-panel:after {
    border-left-width: 0;
    border-right-width: 14px;
    left: -14px;
    right: auto;
  }
  .timeline-badge.primary {
    background-color: #2e6da4 !important;
  }
  .timeline-badge.success {
    background-color: #3f903f !important;
  }
  .timeline-badge.warning {
    background-color: #f0ad4e !important;
  }
  .timeline-badge.danger {
    background-color: #d9534f !important;
  }
  .timeline-badge.info {
    background-color: #5bc0de !important;
  }
  .timeline-title {
    margin-top: 0;
    color: inherit;
  }
  .timeline-body > p,
  .timeline-body > ul {
    margin-bottom: 0;
  }
  .timeline-body > p + p {
    margin-top: 5px;
  }
</style>

<section class="container" style="padding:2rem">
  <div class="card bg-light-transparent">
    <div class="card-body">
      <div class="card no-shadow">
        <div class="card-body">

          <ul class="nav nav-pills nav-fills justify-content-center" role="tablist">
            <li class="nav-item">
              <a class="nav-link active" data-toggle="tab" href="#tabular-content" role="tab" aria-controls="tabular" aria-selected="true"><i class="fas fa-table"></i> Tabular</a>
            </li>
            <li class="nav-item" >
              <a class="nav-link" data-toggle="tab" href="#timeline-content" role="tab" aria-controls="timeline" aria-selected="false"><i class="fas fa-hourglass-half"></i> Timeline</a>
            </li>
          </ul>
          <div class="col text-center">
            <h3 class="border-bottom"><?php echo ($rsStaff)?$rsStaff['name']:''; ?></h3> 
          </div>

          <div class="tab-content" id="actionData">
            <div class="tab-pane fade show active" id="tabular-content" role="tabpanel" aria-labelledby="tabular-tab">
              <div class="table-responsive">
                <table class="table table-bordered">
                  <thead>
                    <tr>
                      <th>Action type</th>
                      <th>Effective date</th>
                      <th>Created at</th>
                      <th>Action <br><small class="text-danger">*No changes allowed after 3 days.</small></th>
                    </tr> 
                  </thead>
                  <tbody>
                    <?php if($action_profile) foreach ($action_profile as $key => $ap){ ?>
                    <tr> 
                      <td><?php echo ($ap->type)?$ap->type:''; ?></td>
                      <td><?php echo ($ap->action_efective_date)?date('d-F-Y',strtotime($ap->action_efective_date)):''; ?></td>
                      <td><?php echo ($ap->created_at)?$ap->created_at:''; ?></td>
                      <td class="text-center">
                        <div class="btn-group">
                          <a class="btn btn-info btn-sm" data-trigger="hover" data-tooltip="tooltip" title="" data-original-title="print action" href="<?php echo base_url('hr/StaffProfile/printAction/'.$ap->id); ?>" target="_blank">
                              <i class="fas fa-print"></i>
                          </a>
                          <a class="btn btn-primary btn-sm" data-trigger="hover" data-tooltip="tooltip" title="" data-original-title="view action" href="<?php echo base_url('hr/StaffProfile/viewAction/'.$ap->id); ?>" target="_blank">
                            <i class="fas fa-eye"></i>
                          </a>
                          <?php $date_diff = date_diff(new DateTime($ap->created_at),new DateTime());
                           if($date_diff->days <= 3){ ?>
                            <a class="btn btn-success btn-sm" data-trigger="hover" data-tooltip="tooltip" title="" data-original-title="edit action" href="<?php echo base_url('hr/StaffProfile/editAction/'.$ap->id); ?>" target="_blank">
                              <i class="fas fa-edit"></i>
                            </a>
                            <button type="button" class="btn btn-danger btn-sm" data-trigger="hover" data-tooltip="tooltip" title="" data-original-title="delete action" data-id="<?php echo $ap->id; ?>" target="_blank" onclick="removeAction(this)">
                              <i class="fas fa-trash"></i>
                            </button>
                          <?php } ?>
                        </div>
                      </td>
                    </tr>
                    <?php } ?>
                  </tbody>
                </table>
              </div>
            </div>
            <div class="tab-pane fade" id="timeline-content" role="tabpanel" aria-labelledby="timeline-tab">

              <!-- timeline -->
              <div class="container bg-white">
                  
                  <ul class="timeline">
                      <?php 
                        $ap_counter = 0;
                        if($action_profile) foreach ($action_profile as $key => $ap){ 
                        $oe = $ap_counter % 2;
                        $ap_counter++;
                        if ($oe == 0) {
                        ?> 

                        <li>
                          <div class="timeline-badge" style="background-color:<?php echo ($ap->color)?$ap->color:''; ?>">
                            <i class="<?php echo ($ap->icon)?$ap->icon:''; ?>"></i>
                          </div>
                          <div class="timeline-panel">
                            <div class="timeline-heading">
                              <h6 class="timeline-title">
                                <?php 
                                echo ++$key.' ) ';
                                echo ($ap->type)?$ap->type:'';
                               ?></h6>
                            </div>
                            <div class="timeline-body">
                              <p>
                                Effective date : <?php echo ($ap->action_efective_date)?$ap->action_efective_date:''; ?>
                                <hr>
                                <div class="btn-group">
                                  <a class="btn btn-info btn-sm" data-trigger="hover" data-tooltip="tooltip" title="" data-original-title="print action" href="<?php echo base_url('hr/StaffProfile/printAction/'.$ap->id); ?>" target="_blank">
                                      <i class="fas fa-print"></i>
                                  </a>
                                  <a class="btn btn-primary btn-sm" data-trigger="hover" data-tooltip="tooltip" title="" data-original-title="view action" href="<?php echo base_url('hr/StaffProfile/viewAction/'.$ap->id); ?>" target="_blank">
                                    <i class="fas fa-eye"></i>
                                  </a>
                                  <a class="btn btn-success btn-sm" data-trigger="hover" data-tooltip="tooltip" title="" data-original-title="edit action" href="<?php echo base_url('hr/StaffProfile/editAction/'.$ap->id); ?>" target="_blank">
                                    <i class="fas fa-edit"></i>
                                  </a>
                                  <button class="btn btn-danger btn-sm" data-trigger="hover" data-tooltip="tooltip" title="" data-original-title="delete action" target="_blank" data-id="<?php echo $ap->id; ?>" onclick="removeAction(this)">
                                    <i class="fas fa-trash"></i>
                                  </button>
                                </div>
                                <small><?php echo ($ap->created_at)?$ap->created_at:''; ?></small>
                              </p>
                            </div>
                          </div>
                        </li>

                        <?php }else{ ?>

                        <li class="timeline-inverted">
                          <div class="timeline-badge" style="background-color:<?php echo ($ap->color)?$ap->color:''; ?>">
                            <i class="<?php echo ($ap->icon)?$ap->icon:''; ?>"></i>
                          </div>
                          <div class="timeline-panel">
                            <div class="timeline-heading">
                              <h6 class="timeline-title">
                                <?php
                                echo ++$key.' ) ';
                                echo ($ap->type)?$ap->type:''; ?>
                              </h6>
                            </div>
                            <div class="timeline-body">
                              <p>
                                 Effective date : <?php echo ($ap->action_efective_date)?$ap->action_efective_date:''; ?>
                                <hr>
                               <div class="btn-group">
                                  <a class="btn btn-info btn-sm" data-trigger="hover" data-tooltip="tooltip" title="" data-original-title="print action" href="<?php echo base_url('hr/StaffProfile/printAction/'.$ap->id); ?>" target="_blank">
                                    <i class="fas fa-print"></i>
                                  </a>
                                  <a class="btn btn-primary btn-sm" data-trigger="hover" data-tooltip="tooltip" title="" data-original-title="view action" href="<?php echo base_url('hr/StaffProfile/viewAction/'.$ap->id); ?>" target="_blank">
                                    <i class="fas fa-eye"></i>
                                  </a>
                                  <a class="btn btn-success btn-sm" data-trigger="hover" data-tooltip="tooltip" title="" data-original-title="edit action" href="<?php echo base_url('hr/StaffProfile/editAction/'.$ap->id); ?>" target="_blank">
                                    <i class="fas fa-edit"></i>
                                  </a>
                                  <button class="btn btn-danger btn-sm" data-trigger="hover" data-tooltip="tooltip" title="" data-original-title="delete action" target="_blank" data-id="<?php echo $ap->id; ?>" onclick="removeAction(this)">
                                    <i class="fas fa-trash"></i>
                                  </button>
                                </div>
                                <small><?php echo ($ap->created_at)?$ap->created_at:''; ?></small>
                              </p>                      
                            </div>
                          </div>
                      </li>

                      <?php }} ?>
                  </ul>
              </div>
              <!-- timeline -->

            </div>
          </div>
          
        </div>
      </div>
    </div>
  </div>
</section>
<script type="text/javascript">
function removeAction(element) {
  id = $(element).data('id');
  url = '<?php echo base_url('hr/api/staffprofiling/remove_action'); ?>';

  toastConfirm('Are you sure you want to remove this action?',function(){
    data = {
      token:'<?php ecHo $_SESSION['token']; ?>',
      id: id,
    }

    ajxRequest(url,'POST',data, '<?php echo current_url(); ?>');
  });
}
</script>