@extends('layouts.app-2')
@section('content')

   <!-- Content Header (Page header) -->
   <div class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h1 class="m-0 text-dark">Kordinator</h1>
          </div><!-- /.col -->
          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
              <li class="breadcrumb-item"><a href="#">Home</a></li>
              <li class="breadcrumb-item active">Kordinator </li>
            </ol>
          </div><!-- /.col -->
        </div><!-- /.row -->
      </div><!-- /.container-fluid -->
   </div>
    <!-- /.content-header -->

    <!-- Main content -->
   <section class="content">
      <div class="container-fluid">
         <div class="card">
            <div class="card-header">
              <h3 class="card-title">DataTable with default features</h3>
            </div>
            <!-- /.card-header -->
            <div class="card-body">
               <table id="example1" class="table table-bordered table-striped">
                  <thead>
                     <tr>
                        <th>No</th>
                        <th>Name</th>
                        <th>Area</th>
                        <th style="text-align: right">Action</th>
                     </tr>
                  </thead>
                  <tbody>
                     @foreach ($kordinators as $kordi)
                         <tr>
                           <td>{{++$i}}</td>
                           <td>{{$kordi->nama}}</td>
                           <td>{{$kordi->area}}</td>
                           <td style="text-align: right">
                              <div class="btn-group">
                                {{-- <button type="button" class="btn btn-default text-secondary"><i class="fa fa-edit"></i> </button> --}}
                                <a href="{{route('kordinator.detail', enkripRambo($kordi->id))}}" class="btn btn-default text-secondary"><i class="fa fa-eye"></i></a>
                                {{-- <button type="button" class="btn btn-default text-danger"><i class="fa fa-trash"></i></button> --}}
                              </div>
                            </td>
                         </tr>
                     @endforeach
                  
                  </tbody>
               </table>
            </div>
            <!-- /.card-body -->
          </div>
      </div><!-- /.container-fluid -->
   </section>
    <!-- /.content --> 
@endsection

@push('datatables')
<script>
   $(function () {
     $("#example1").DataTable({
       "responsive": true,
       "autoWidth": false,
     });
     $('#example2').DataTable({
       "paging": true,
       "lengthChange": false,
       "searching": false,
       "ordering": true,
       "info": true,
       "autoWidth": false,
       "responsive": true,
     });
   });
 </script>
@endpush