@extends('layouts.master')

@section('css')
<link rel="stylesheet" href="{{ asset('js/plugins/datatables/dataTables.bootstrap4.min.css') }}">
@endsection

@section('title')
VoiceSync: Users
@endsection

@section('content.header.title')

@endsection

@section('content.header.info')

@endsection

@section('content')
<section class="content">
  <div class="container-fluid">
    <div class="row">
      <!-- left column -->
      <div class="col-md-12">
        <div class="card">
          <div class="card-header">
            <h2 class="card-title">Users</h2>
            <div class="card-tools">
            </div>
          </div>
          <div class="card-body table-responsive p-0">
            <table id="users" class="table table-bordered table-striped table-hover">
              <thead>
                <tr>
                  <th>VSID</th>
                  <th>First Name</th>
                  <th>Last Name</th>
                  <th>Email</th>
                  <th>Referred By</th>
                  <th>Account Type</th>
                  <th>Renewal Date</th>
                  <th>Expiration Date</th>
                  <th>Status</th>
                </tr>
              </thead>
              <tbody>
                @foreach($users as $user)
                <tr>
                  <td><a href="users/{{ $user->id }}">{{ $user->vsid }}</a></td>
                  <td>{{ $user->first_name }}</td>
                  <td>{{ $user->last_name }}</td>
                  <td>{{ $user->phone_num }}</td>
                  <td>
                    @if($user->referral_user_id > 0)
                    <a href="users/{{ $user->referral_user_id }}">{{$user->referral_id}}</a>
                    @endif
                  </td>
                  <td>{{$user->account_type}}</td>
                  <td>{{ \Carbon\Carbon::parse($user->renewal_date)->format('m/d/Y')}}</td>
                  <td>{{ \Carbon\Carbon::parse($user->expiration_date)->format('m/d/Y')}}</td>
                  <td>@if ($user->current_flag == '1')
                    <button type="button" class="btn btn-primary">Primary</button>
                    @else
                    <button type="button" class="btn btn-danger">Danger</button>
                    @endif
                  </td>
                </tr>
                @endforeach
              </tbody>
              <tfoot>
                <tr>
                  <th>VSID</th>
                  <th>First Name</th>
                  <th>Last Name</th>
                  <th>Phone #</th>
                  <th>Referred By</th>
                  <th>Account Type</th>
                  <th>Renewal Date</th>
                  <th>Expiration Date</th>
                  <th>Status</th>
                </tr>
              </tfoot>
            </table>
          </div>
          <!-- /.card-body -->
        </div>
      </div>
    </div>
    <!-- /.row -->
  </div><!-- /.container-fluid -->
</section>
@endsection('content')

@section('javascript')

<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="{{ asset('js/plugins/datatables/dataTables.bootstrap4.min.js') }}"></script>
@endsection
@section('page_script')
<script>
  $(document).ready(function () {
    $('#users').DataTable();
  });
</script>
@endsection