@extends('layouts.admin')

@section('content')
<div class="row">
  <div class="col-xs-12 col-sm-7 col-md-7 col-lg-4">
    <h1 class="page-title txt-color-blueDark">
      <i class="fa fa-table fa-fw "></i> 
        Table 
      <span>> 
        Login History
      </span>
    </h1>
  </div>
</div>

<!-- widget grid -->
<section id="widget-grid" class="">

  <!-- row -->
  <div class="row">

    <!-- NEW WIDGET START -->
    <article class="col-xs-12 col-sm-12 col-md-12 col-lg-12">

      <!-- Widget ID (each widget will need unique ID)-->
      <div class="jarviswidget jarviswidget-color-blueDark" id="wid-id-0" data-widget-editbutton="false">
        <header>
          <span class="widget-icon"> <i class="fa fa-table"></i> </span>
          <h2>Login History</h2>

        </header>

        <!-- widget div-->
        <div>
          <!-- end widget edit box -->

          <!-- widget content -->
          <div class="widget-body">
            <div class="table-responsive">
            
              <table class="table table-bordered">
                <thead>
                  <tr>
                    <th>No.</th>
                    <th>Location</th>
                    <th>Device</th>
                    <th>Browser</th>
                    <th>Date</th>
                  </tr>
                </thead>
                <tbody>
                  @foreach ($userLogins as $index=>$userLogin)        
                    <tr>
                      <td>{{$index+1 }}</td>
                      <td>{{$userLogin->login_area }}</td>
                      <td>{{$userLogin->login_device }}</td>
                      <td>{{$userLogin->login_browser }}</td>
                      <td>{{ $userLogin->created_at->format('d/m/Y h:i') }}
                      </td>
                    </tr>
                  @endforeach      
                </tbody>
              </table>
              <table id="header-fixed" class="table table-bordered"></table>
            </div>
            <div style="text-align: center">
              {{ $userLogins->links() }}
            </div>
          </div>
          <!-- end widget content -->

        </div>
        <!-- end widget div -->

      </div>
      <!-- end widget -->

      <!-- Widget ID (each widget will need unique ID)-->
      

    </article>
    <!-- WIDGET END -->       

  </div>

  <!-- end row -->

  

  <!-- end row -->

</section>
<!-- end widget grid -->

@endsection