@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">Manage Document</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>Document</h2>
            </div>
            <div class="pull-right">
                @can('document-create')
                <a class="btn btn-success" href="{{ route('documents.create') }}">Tambah Document</a>
                @endcan
            </div>
        </div>
    </div>
    -->
    @if ($message = Session::get('success'))
        <div class="alert alert-success">
            <p>{{ $message }}</p>
        </div>
    @endif
    <div class="row">
        <div class="col-12">
          <div class="card">
            <div class="card-header">
              <h3 class="card-title"><strong>Manage Document</strong></h3>
            </div>
            <div class="card-body">
                
                <a class="btn btn-success" href="{{ route('documents.create') }}"><i class="fa fa-user-plus"></i>&nbspTambah Document</a>
                
            </div>
            <!-- /.card-header -->
              <div class="card-body">
                    <table class="table table-bordered table-striped" id="indexdocuments" style="width: 100%;">
                        <thead>
                           <tr>
                              <th>No</th>
                              <th>Nomor Surat</th>
                              <th>Jenis Surat</th>
                              <th>Tanggal Surat</th>
                              <th>Dokumen Surat</th>
                              <th>Status</th> <!--setuju, batal, revisi-->
                              <th>Ket. Status</th> <!--setuju, batal, revisi-->
                              <th width="280px">Action</th>
                          </tr>
                        </thead>
                        @foreach ($surats as $key => $surat)
                          <tr>
                              <td>{{ ++$i }}</td>
                              <td>{{ $surat->NomorSurat }}</td>
                              <td>{{ $surat->JenisSurat }}</td>
                              <td>{{ $surat->TglSurat }}</td>
                              <td><a href="{{asset('storage/surat_dms/'.$surat->DokumenSurat)}}">{{ $surat->DokumenSurat  }}</a></td>
                              <td>{{ $surat->Status  }}</td>
                              <td>{{ $surat->KetStatus  }}</td>
                              <td>
                                  <form action="{{ route('documents.destroy',$surat->id) }}" method="POST">
                                      <a class="btn btn-sm btn-info" href="{{ route('documents.show',$surat->id) }}">Detail</a>
                                      @can('document-edit')
                                      <a class="btn btn-sm btn-primary" href="{{ route('documents.edit',$surat->id) }}">Edit</a>
                                      @endcan
                                      @csrf
                                      @method('DELETE')
                                      @can('document-delete')
                                      <button type="submit" class="btn btn-sm btn-danger">Delete</button>
                                      @endcan  
                                  </form>
                              </td>
                          </tr>
                        @endforeach
                    </table>
              </div>
            <!-- /.card-body -->
          </div>
        <!-- /.card -->
        </div>
      <!-- /.col -->
      </div>
      <!-- /.row -->
@endsection
@section('js')
<script>
$(function() {
  $('#indexdocuments').DataTable({
      lengthMenu: [[10, 30, 50, -1], [10, 30, 50, "All"]],
      processing: true,
      //serverSide: true,
      responsive: true,
      //autoWidth: true,
      //scrollX: true,
      //scrollCollapse: true,
      /*columnDefs: [
            { width: '100%', targets: 13 }
        ],*/
      initComplete: function (settings, json) {  
			  $("#indexdocuments").wrap("<div style='overflow:auto; width:100%;position:relative;'></div>");            
		  },
      dom: 'Blfrtip',
          buttons: [
            {
                  extend: 'pdfHtml5',
                  text: '<i class="fa fa-file-pdf"></i>',
          title: 'Manage Document',
                  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: 'Manage Document', 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: 'Manage Document',
              titleAttr: 'Copy'
            },
            {
              extend: 'csvHtml5',
              text: '<i class="fa fa-file-csv"></i>',
        title: 'Manage Document',
              titleAttr: 'CSV'
            },
            {
              extend: 'excelHtml5',
              text: '<i class="fa fa-file-excel"></i>',
        title: 'Manage Document',
              titleAttr: 'Excel'
            },
            {
              extend: 'print',
              text: '<i class="fa fa-print"></i>',
        title: 'Manage Document',
              titleAttr: 'Print'
            },
           
            {
                text: '<i class="fa fa-plus"> Tambah Document</i>',
                className: 'btn btn-default btnTambahDocument',
                titleAttr: 'Tambah Document',
                action: function (e, dt, node, config)
                {
                    //This will send the page to the location specified
                    window.location.href = '{{ route('documents.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