@extends('layouts.admin.core')
@section('content')
<style media="screen">
    tr:nth-child(even) {background-color:}
    .table tbody tr:hover td, .table tbody tr:hover th {
      background-color: #ccfff8;
    }

    p.draf {
      display: none;
      font-size: 11px;
      text-shadow: 0 0 1px DarkTurquoise, 0 0 5px aquamarine;
    }

    div.draf:hover p.draf {
      display: table-cell;
    }

  </style>
    <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 Absensi Ketidakhadiran</li>
            </ol>
            </div><!-- /.col -->
        </div><!-- /.row -->
        </div><!-- /.container-fluid -->
    </div>
    <!-- /.content-header -->
    @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 Absensi Ketidakhadiran</strong></h3>
            </div>
            <div class="card-body">
                @role('Admin')
                <a class="btn btn-success" href="{{ route('absensis.create') }}"><i class="fa fa-user-plus"></i>&nbspTambah Absensi Ketidakhadiran</a>
				@endrole
            </div>
            <!-- /.card-header -->
              <div class="card-body">
                 
                <div class="col-12 col-sm-12">
                    <div class="d-flex justify-content-center">
                        <div class="form-inline">
                            <div class="form-group mb-2">
                                <label for="from_date" class="col-sm-2 col-form-label">Dari Tanggal</label>
                                <input type="text" class="datepicker-here form-control" name="from_date" id="from_date" autocomplete="off" data-language="id" placeholder="From Date" class="form-control"/>
                            </div>
                            <div class="form-group mb-2">
                                <label for="to_date" class="col-sm-2 col-form-label">Sampai Tanggal</label>
                                <input type="text" class="datepicker-here form-control" name="to_date" id="to_date" autocomplete="off" data-language="id" placeholder="To Date" class="form-control" />
                            </div>
                            <div class="form-group mb-2">
                                <button name="filter" id="filter" class="btn btn-primary">Filter</button>&nbsp;
                                <button name="refresh" id="refresh" class="btn btn-default">Refresh</button>
                            </div>
                        </div>
                    </div> 
                </div>
            
                <!--       
                <div class="row input-daterange id=dateRange">
                    <div class="col-md-4">
                        <input type="text" class="datepicker-here form-control" name="from_date" id="from_date" autocomplete="off" data-language="id" placeholder="From Date" class="form-control"/>
                    </div>
                    <div class="col-md-4">
                        <input type="text" class="datepicker-here form-control" name="to_date" id="to_date" autocomplete="off" data-language="id" placeholder="To Date" class="form-control" />
                    </div>
                    <div class="col-md-4">
                        <button type="button" name="filter" id="filter" class="btn btn-primary">Filter</button>
                        <button type="button" name="refresh" id="refresh" class="btn btn-default">Refresh</button>
                    </div>
                </div>
                -->
                <br />
                    <table class="table table-bordered table-striped responsive" id="indexabsensis1" style="width: 100%;">
                        <thead>
                           <tr>
                              <th>No</th>
                              <th>Dari Tanggal</th>
                              <th>Sampai Tanggal</th>
                              <th>Nama</th>
                              <th>NIP</th>
                              <th>Jenis Absensi Ketidakhadiran</th>
							  <th>Keterangan</th>
							  <th width="100px">Action</th>
                          </tr>
                        </thead>
                       
                    </table>
              </div>
            <!-- /.card-body -->
          </div>
        <!-- /.card -->
        </div>
      <!-- /.col -->
      </div>
      <!-- /.row -->
@endsection
@section('js')
<script>

    $(document).ready(function(){
     $('.datepicker-here').datepicker({
        format:'yyyy-mm-dd',
        autoclose:true
     }).datepicker("setDate",'now');
    
     load_data();
    
     function load_data(from_date = '', to_date = '')
     {
      $('#indexabsensis1').DataTable({
        
        responsive: true,
        processing: true,
        serverSide: true,
        ajax: {
            url:'{{ route("absensis.index") }}',
            data:{from_date:from_date, to_date:to_date}
        },
        columns: [
                {
                data:'DT_RowIndex',
                name:'No'
                },
                {
                data:'TglKetidakhadiran',
                name:'TglKetidakhadiran'
                },
                {
                data:'TglKetidakhadiranSelesai',
                name:'TglKetidakhadiranSelesai'
                },
                {
                data:'NamaPegawai',
                name:'NamaPegawai'
                },
                {
                data:'NipPegawai',
                name:'NipPegawai'
                },
                {
                data:'JenisKetidakhadiran',
                name:'JenisKetidakhadiran'
                },
                {
                data:'Keterangan',
                name:'Keterangan'
                },
                {
                    data:'action',
                    name:'action'
                }
                
            ],
            initComplete: function (settings, json) {  
			  $("#indexabsensis").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 Absensi Ketidakhadiran',
                  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 Absensi Ketidakhadiran', 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 Absensi Ketidakhadiran',
              titleAttr: 'Copy'
            },
            {
              extend: 'csvHtml5',
              text: '<i class="fa fa-file-csv"></i>',
        title: 'Manage Absensi Ketidakhadiran',
              titleAttr: 'CSV'
            },
            {
              extend: 'excelHtml5',
              text: '<i class="fa fa-file-excel"></i>',
        title: 'Manage Absensi Ketidakhadiran',
              titleAttr: 'Excel'
            },
            {
              extend: 'print',
              text: '<i class="fa fa-print"></i>',
        title: 'Manage Absensi Ketidakhadiran',
              titleAttr: 'Print'
            },
           
          ]
        });
        }
        
        $('#filter').click(function(){
        var from_date = $('#from_date').val();
        var to_date = $('#to_date').val();
        if(from_date != '' &&  to_date != '')
        {
        $('#indexabsensis1').DataTable().destroy();
        load_data(from_date, to_date);
        }
        else
        {
        alert('Both Date is required');
        }
        });
            
        $('#refresh').click(function(){
        $('#from_date').val('');
        $('#to_date').val('');
        $('#indexabsensis1').DataTable().destroy();
        load_data();
        });
    
    });
</script>

@stop