@extends('layouts.master')

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

@section('title')
VoiceSync:Admins
@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">Admin</h2>
            <div class="card-tools">
            </div>
          </div>
          <div class="card-body">
            <table id="admins" class="table table-bordered table-striped table-hover">
              <thead>
                <tr>
                  <th>First Name</th>
                  <th>Last Name</th>
                  <th>Phone #</th>
                  <th>Email</th>
                  <th>Admin Type</th>
                  <th><a href="/admin/create" class="btn btn-warning" role="button"
                      aria-pressed="true"><i
                        class="fa fa-plus"></i> Add New</a></th>
                </tr>
              </thead>
              <tbody>
                @foreach($admins as $admin)
                <tr>
                  <td>{{ $admin->first_name }}</td>
                  <td>{{ $admin->last_name }}</td>
                  <td>{{ $admin->phone_num }}</td>
                  <td>{{ $admin->email }}</td>
                  <td>{{ $admin->admin_type_name}}</td>
                  <td><a href="{{ url('admin')}}/{{ $admin->id }}">Edit</a></td>
                </tr>
                @endforeach
              </tbody>
              <tfoot>
                <tr>
                  <th>First Name</th>
                  <th>Last Name</th>
                  <th>Phone #</th>
                  <th>Email</th>
                  <th>Admin Type</th>
                  <th></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 () {
    $('#admins').DataTable();
  });
</script>
@endsection