@extends('layouts.admin') @section('content')

<div class="card mb-3">
  <div class="card-header">
    <div class="row flex-between-end">
      <div class="col-auto align-self-center">
        <h5 class="mb-0" data-anchor="data-anchor">{{$member->name}} {{$member->surname}}'s History</h5>
      </div>
    </div>
  </div>
  <div class="card-body pt-0">

    <div id="tableExample2" data-list='{"valueNames":["action","comment",  "date"],"page":10,"pagination":true}'>
      <div class="table-responsive scrollbar">
        <table class="table table-bordered table-striped fs--1 mb-0">
          <thead class="bg-200 text-900">
            <tr>
              <th class="sort" data-sort="action">Action</th>
              <th class="sort" data-sort="comment">Comment</th>
              <th class="sort" data-sort="date">Date</th>
            </tr>
          </thead>
          <tbody class="list">
            @foreach ($histories as $history)
            <tr>
              <td class="action">{{$history->action}}</td>
              <td class="comment">{{$history->comment}}</td>
              <td class="date"> <span class="history-time"><span class="me-2" role="img" aria-label="Emoji"><i class="fas fa-history"></i></span><strong>{{$history->created_at}} -
                    <?php
                    $historyTime = strtotime($history->created_at);
                    $difference = time() - $historyTime;
                    if ($difference <= 59) {
                      echo round($difference) . " Seconds ago";
                    } elseif ($difference <= 3599) {
                      echo round($difference / 60) . " Minutes ago";
                    } elseif ($difference <= 86399) {
                      echo round($difference / 3600) . " Hours ago";
                    } else {
                      echo round($difference / 86400) . " Days ago";
                    }
                    ?>
                  </strong></span></td>
            </tr>
            @endforeach
          </tbody>
        </table>
      </div>
      <div class="d-flex justify-content-center mt-3"><button class="btn btn-sm btn-falcon-default me-1" type="button" title="Previous" data-list-pagination="prev"><span class="fas fa-chevron-left"></span></button>
        <ul class="pagination mb-0"></ul><button class="btn btn-sm btn-falcon-default ms-1" type="button" title="Next" data-list-pagination="next"><span class="fas fa-chevron-right"> </span></button>
      </div>
    </div>
  </div>
</div>
@endsection