@extends('layout.main')
@section('title','Daftar Pejabat')
    
@section('breadcrumb')
<div class="col-lg-9 col-sm-8 col-md-8 col-xs-12">
    <ol class="breadcrumb">
      <li><a href="index.html">Dashboard</a></li>
      <li><a href="index.html">Daftar Pejabat</a></li>
    </ol>
</div>
@endsection

@section('content')
<!-- Row -->
<div class="row">
  <div class="col-sm-12">
    <div class="panel panel-default border-panel card-view">
      <div class="panel-heading">
        <div class="pull-left">
          <h6 class="panel-title txt-dark">Daftar Pejabat</h6>
        </div>
        <div class="clearfix"></div>
      </div>
      <div class="panel-wrapper collapse in">
        <div class="panel-body">
          <div class="table-wrap">
            <div class="table-responsive">
              <table id="datable_1" class="table table-hover display  pb-30" >
                <thead>
                  <tr>
                    <th>#</th>
                    <th>Foto</th>
                    <th>Nama</th>
                    <th>Jabatan</th>
                    <th>Status</th>
                    <th>Aksi</th>
                  </tr>
                </thead>
                <tfoot>
                  <tr>
                    <th>#</th>
                    <th >Foto</th>
                    <th >Nama</th>
                    <th >Jabatan</th>
                    <th >Status</th>
                    <th>Aksi</th>
                  </tr>
                </tfoot>
                <tbody>
                  @foreach ($daftar as $item)
                      <tr>
                        <td>{{$loop->iteration}}</td>
                        <td><img src="{{ asset('foto')}}/{{$item->foto}}" alt="image" class="img-circle" width="60" height="60"/></td>
                        <td>{{$item->nama}}</td>
                        <td>{{$item->jabatan}}</td>
                        <td>{{$item->status}}</td>
                        <td>
                          <div class="btn-group">
                            <div class="dropdown">
                              <!-- Single button -->
                              <button class="btn btn-danger dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                                <i class="ti-pencil-alt"></i> 
                              <span class="caret"></span>
                              </button>
                              <ul class="dropdown-menu" data-dropdown-in="flipInX" data-dropdown-out="flipOutX">
                              <li><a href="#">Edit</a></li>
                              <li><a href="#">Hapus</a></li>
                              {{-- <li><a href="#">Something else here</a></li> --}}
                              <li class="divider"></li>
                              <li><a href="#">Detail</a></li>
                              </ul>
                            </div>
                          </div>

                        </td>
                      </tr>
                  @endforeach  
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>	
  </div>
</div>

@endsection