@extends('layouts.admin.core')
@section('content')
<div class="content-header">
  <div class="container-fluid">
    <div class="row mb-2">
      <div class="col-sm-6">
        <!--<h1 class="m-0 text-dark">Starter Page</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">Users Management</li>
        </ol>
      </div><!-- /.col -->
    </div><!-- /.row -->
  </div><!-- /.container-fluid -->
</div>
<!-- /.content-header -->
<!--
<div class="row">
    <div class="col-lg-12 margin-tb">
        <div class="pull-left">
            <h2>Users Management</h2>
        </div>
        <div class="pull-right">
            <a class="btn btn-success" href="{{ route('users.create') }}"> Create New User</a>
        </div>
    </div>
</div>
-->
@if ($message = Session::get('success'))
<div class="alert alert-success">
  <p>{{ $message }}</p>
</div>
@endif

<div class="content">
<div class="container-fluid">
<div class="row">
  <div class="col-12">
    <div class="card">
      <div class="card-header">
        <h3 class="card-title"><strong>Users Management</strong></h3>
      </div>
      <!-- /.card-header -->
        <div class="card-body">
              <table class="table table-bordered table-striped" id="indexusers" style="width: 100%;">
                  <thead>
                      <tr>
                          <th>No.</th>
                          <th>Nama</th>
                          <th>Email</th>
                          <th>Ponsel</th>
                          <th>Telegram</th>
                          <th>Roles</th>
                          <th width="200px">Action</th>
                      </tr>
                  </thead>
                  @foreach ($data as $key => $user)
                    <tr>
                      <td>{{ ++$i }}</td>
                      <td>{{ $user->name }}</td>
                      <td>{{ $user->email }}</td>
                      <td>{{ $user->ponsel }}</td>
                      <td>{{ $user->telegram_id }}</td>
                      <td>
                        @if(!empty($user->getRoleNames()))
                        @foreach($user->getRoleNames() as $v)
                          <label class="badge badge-success">{{ $v }}</label>
                        @endforeach
                        @endif
                      </td>
                      <td>
                        <a class="btn btn-info" href="{{ route('users.show',$user->id) }}"><i class="fas fa-desktop"></i> Show</a>
                        <a class="btn btn-primary" href="{{ route('users.edit',$user->id) }}"><i class="far fa-edit"></i> Edit</a>
                        {!! Form::open(['method' => 'DELETE','route' => ['users.destroy', $user->id],'style'=>'display:inline']) !!}
                          {!! Form::submit('Delete', ['class' => 'btn btn-danger']) !!}
                        {!! Form::close() !!}
                      </td>
                    </tr>
                  @endforeach
              </table>
        </div>
      <!-- /.card-body -->
    </div>
  <!-- /.card -->
  </div>
<!-- /.col -->
</div>
</div>
</div>
<!-- /.row -->
@endsection
@section('js')
<script>
$(function() {
  $('#indexusers').DataTable({
      lengthMenu: [[5, 10, 20, -1], [5, 10, 20, "All"]],
      processing: true,
      //serverSide: true,
      responsive: true,
      //autoWidth: true,
      //scrollX: true,
      //scrollCollapse: true,
      initComplete: function (settings, json) {  
			  $("#indexusers").wrap("<div style='overflow:auto; width:100%;position:relative;'></div>");            
		  },
      dom: 'Blfrtip',
          buttons: [
            {
                  extend: 'pdfHtml5',
                  text: '<i class="fa fa-file-pdf"></i>',
          title: 'Users Management',
                  titleAttr: 'PDF',
                  orientation: 'landscape',
                  pageSize: 'A4',
                  exportOptions: {
                      /*search: 'applied',
                      order: 'applied',
                      stripNewlines: false
                      */
                      columns: ':visible',
                      search: 'applied',
                      order: 'applied'
                  },
                  customize: function (doc) {
                      var rdoc = doc;
                      var rcout = doc.content[doc.content.length - 1].table.body.length - 1;
                      doc.content.splice(0, 1);
                      var now = new Date();
                      var jsDate = now.getDate() + '/' + (now.getMonth() + 1) + '/' + now.getFullYear() + '  and Time:' + now.getHours() + ':' + now.getMinutes() + ':' + now.getSeconds();
                      //doc.pageMargins = [30, 70, 30, 30];
                      //doc.pageMargins = [20,60,20,30];
                      doc.pageMargins = [100, 60, 100, 30];
                      //doc.content[1].margin = [ 100, 0, 100, 0 ] //left, top, right, bottom
                      doc.defaultStyle.fontSize = 9;
                      doc.styles.tableHeader.fontSize = 11;
                      //doc.content[doc.content.length - 1].table.headerRows = 2;
                      /*for (var i = 0; i < rcout; i++) {
                          var obj = doc.content[doc.content.length - 1].table.body[i + 1];
                          doc.content[doc.content.length - 1].table.body[(i + 1)][0] = { text: obj[0].text, style: [obj[0].style], bold: true };
                          doc.content[doc.content.length - 1].table.body[(i + 1)][3] = {
                              text: obj[3].text,
                              style: [obj[3].style],
                              alignment: 'center',
                              bold: obj[3].text > 60 ? true : false,
                              fillColor: obj[3].text > 60 ? 'red' : null
                          };
                      }*/

                      doc['header'] = (function (page, pages) {
                          return {
                              table: {
                                  widths: ['100%'],
                                  headerRows: 0,
                                  body: [
                                      [{ text: 'Users Management', alignment: 'center', fontSize: 14, bold: true, margin: [0, 10, 0, 0] }],
                                      /*[
                                          {
                                              text:
                                                  [
                                                      { text: 'SubTitle1: ', bold: true }, 'Sub title details...1\n',
                                                      { text: 'SubTitle2: ', bold: true }, 'Sub title details...2',
                                                  ]
                                          }
                                      ]*/
                                  ]
                              },
                              layout: 'noBorders',
                              margin: 10
                          }
                      });

                      doc['footer'] = (function (page, pages) {
                          return {
                              columns: [
                                  {
                                      alignment: 'left',
                                      text: ['Created Date: ', { text: jsDate.toString() }]
                                  },
                                  {
                                      alignment: 'center',
                                      text: 'Total ' + rcout.toString() + ' rows'
                                  },
                                  {
                                      alignment: 'right',
                                      text: ['page ', { text: page.toString() }, ' of ', { text: pages.toString() }]
                                  }
                              ],
                              margin: 10
                          }
                      });

                      var objLayout = {};
                      objLayout['hLineWidth'] = function(i) { return .5; };
                      objLayout['vLineWidth'] = function(i) { return .5; };
                      objLayout['hLineColor'] = function(i) { return '#aaa'; };
                      objLayout['vLineColor'] = function(i) { return '#aaa'; };
                      objLayout['paddingLeft'] = function(i) { return 5; };
                      objLayout['paddingRight'] = function(i) { return 45; };
                      //doc.content[0].layout = objLayout;
                      doc.content[doc.content.length - 1].layout = objLayout;
                      /*
                      var objLayout = {};
                      objLayout['hLineWidth'] = function (i) { return .8; };
                      objLayout['vLineWidth'] = function (i) { return .5; };
                      objLayout['hLineColor'] = function (i) { return '#aaa'; };
                      objLayout['vLineColor'] = function (i) { return '#aaa'; };
                      objLayout['paddingLeft'] = function (i) { return 5; };
                      //objLayout['paddingRight'] = function (i) { return 50; };
                      //doc.content[0].layout = objLayout;
                      doc.content[doc.content.length - 1].layout = objLayout;
                      */
                  }
            },
            {
              extend: 'copyHtml5',
              text: '<i class="fa fa-copy"></i>',
        title: 'Users Management',
              titleAttr: 'Copy'
            },
            {
              extend: 'csvHtml5',
              text: '<i class="fa fa-file-csv"></i>',
        title: 'Users Management',
              titleAttr: 'CSV'
            },
            {
              extend: 'excelHtml5',
              text: '<i class="fa fa-file-excel"></i>',
        title: 'Users Management',
              titleAttr: 'Excel'
            },
            {
              extend: 'print',
              text: '<i class="fa fa-print"></i>',
        title: 'Users Management',
              titleAttr: 'Print'
            },
            {
                text: '<i class="fa fa-plus"> Tambah User</i>',
                className: 'btn btn-default btnAddJob',
                titleAttr: 'Tambah User',
                action: function (e, dt, node, config)
                {
                    //This will send the page to the location specified
                    window.location.href = '{{ route('users.create') }}';
                }
            }
          ],
          /*
          initComplete: function() {
              $('.buttons-copy').html('<i class="fa fa-copy" />')
              $('.buttons-csv').html('<i class="fa fa-file-csv" />')
              $('.buttons-excel').html('<i class="fa fa-file-excel" />')
              $('.buttons-pdf').html('<i class="fa fa-file-pdf" />')
              $('.buttons-print').html('<i class="fa fa-print" />')
          }
          */
      });
    });
    //oTable.ajax.url('statussync/json').load();
</script>
@stop