 <script>
     $(document).ready(function() {
        $("input").change(function(){
        $(this).parent().parent().removeClass('has-error');
        $(this).next().next().empty();
    });
         $('.datepicker').datepicker({
        autoclose: true,
        format: "yyyy-mm-dd",
        todayHighlight: true,
        orientation: "top auto",
        todayBtn: true,
        todayHighlight: true,  
    });
         $('.timepicker').timepicker({
      showInputs: false,
      showSeconds: true,
      showMeridian: false,
      minuteStep: 5
    });
        $('#example1').DataTable( {
            dom: 'lBfrtip',  
 buttons: [
        'copyHtml5',
        {
                extend: 'print',
                title: 'Data Absensi Karyawan Mataram Bhumi Perkasa ',
                exportOptions: {
                    columns: [ 0, 1, 2, 3, 4, 5, 6, 7, 8 ]},
               
            },
          {
                extend: 'excelHtml5',
                title: 'Data Absensi Karyawan Mataram Bhumi Perkasa ',
                exportOptions: {
                   columns: [ 0, 1, 2, 3, 4, 5, 6, 7, 8 ]},
      
                extension: '.xlsx'
            },
        {
                extend: 'csvHtml5',
                title: 'Data Absensi Karyawan Mataram Bhumi Perkasa ',
                 exportOptions: {
                   columns: [ 0, 1, 2, 3, 4, 5, 6, 7, 8 ]},
            },
        
      {
                extend: 'pdfHtml5',
                title: 'Data Absensi Karyawan Mataram Bhumi Perkasa  ',
                download: 'open',
                 exportOptions: {
                   columns: [ 0, 1, 2, 3, 4, 5, 6, 7, 8 ]},
                
                 customize: function ( doc ) {
                   doc.defaultStyle.fontSize = 11;
                   doc.defaultStyle.alignment = 'center';
             
                }
                
            }
    ]
    } );

      });
    </script>
    <?php $level=$this->session->userdata('LEVEL');
	if ($level==0){ 
    ?>
<button class="btn btn-success" onclick="tambah()"><i class="glyphicon glyphicon-plus"></i> Tambah</button>  <?php } ?>
<div class="box box-default">
  <div class="box-header with-border">
    <h3 class="box-title">Tabel Absensi Karyawan</h3>
    <div class="box-tools pull-right">
      <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
      <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
    </div><!-- /.box-tools -->
  </div><!-- /.box-header -->
  <div class="box-body">
 <div class="table-responsive">
     <table id="example1" class="table table-bordered table-striped">
                    <thead>
                      <tr style="center">
                        
                        <th>Nik</th>
                        <th>Nama</th>
                        <th>Jabatan</th>
                        <th>Jenis Kelamin</th>
                        <th>Hari</th>
                        <th>Tanggal</th>
                        <th>Masuk</th>
                        <th>Keluar</th>
                        <th>Lembur</th>
                        <?php if ($level==0){ ?> 
                        <th>Aksi</th>
                        <?php } ?>
                      </tr>
                    </thead>
                    <tbody>
                      <?php  foreach($query as $row):
                      $masuk=$row->masuk;
                      $keluar=$row->keluar;
                      $jammasuk = new DateTime(date('H:i:s', strtotime($masuk)));
                      $jamkeluar = new DateTime(date('H:i:s', strtotime($keluar)));
                      $interval = $jammasuk->diff($jamkeluar);
                      
                      ?>
                    <tr>
                     
                       
                        <td><?php echo $row->nik ?></td>
                        <td><?php echo $row->nama ?></td>
                        <td><?php echo $row->jabatan ?></td>
                        <td><?php echo $row->jk ?></td>
                        <td><?php $hari = DateTime::createFromFormat("Y-m-d", $row->tgl);
                         echo $hari->format("l");  ?></td>
                        <td><?php echo $row->tgl ?></td>
                        <td><?php echo $row->masuk ?></td>
                        <td><?php echo $row->keluar ?></td>
                        <?php if($hari->format("l")=='Saturday'){ ?>
                        <td><?php if($interval->h>'3'){
                            $batas= $jammasuk->modify("+3 hours");
                            $lembur = $jamkeluar->diff($batas);
                            echo $lembur->h;
                            echo ' Jam ' ;
                            echo $lembur->i;
                            echo ' Menit' ;
                            } ?> </td> <?php } else{?>
                        <td><?php if($interval->h>'8'){
                            $batas= $jammasuk->modify("+8 hours");
                            $lembur = $jamkeluar->diff($batas);
                            echo $lembur->h;
                            echo ' Jam ' ;
                            echo $lembur->i;
                            echo ' Menit' ;
                            } ?> </td> <?php } ?>
							<?php if ($level==0){ ?> 
                        <td>
                         
                              <a class="btn btn-sm btn-primary" href="javascript:void()" title="Edit" onclick="edit('<?php echo $row->id_ab;?>')"><i class="glyphicon glyphicon-pencil"></i> Edit</a>
                              <a class="btn btn-sm btn-danger"  title="Hapus" onclick="return confirm('apakah anda akan menghapus data '+'<?php echo $row->nama; ?>'+'?')" href="<?php echo site_url()?>absen/delete/<?php echo $row->id_ab; ?>"><i class="glyphicon glyphicon-trash"></i> Delete</a></td>
						 <?php } ?>
					  </tr>
                        <?php 
                       
                        endforeach ;?>
                    </tbody>
                    <tfoot>
                      <tr>
                        <th>Nik</th>
                        <th>Nama</th>
                        <th>Jabatan</th>
                        <th>Jenis Kelamin</th>
                        <th>Hari</th>
                        <th>Tanggal</th>
                        <th>Masuk</th>
                        <th>Keluar</th>
                        <th>Lembur</th>
                         <?php if ($level==0){ ?> 
                        <th>Aksi</th>
                        <?php } ?>
                      </tr>
                    </tfoot>
                  </table>
</div>
  </div><!-- /.box-body -->
</div><!-- /.box -->

<script type="text/javascript">
function tambah()
{
    
    $('#form')[0].reset(); // reset form on modals
    $('.form-group').removeClass('has-error'); // clear error class
    $('.help-block').empty(); // clear error string
    $('#modal_form').modal('show'); // show bootstrap modal
    $('.modal-title').text('Tambah Data'); // Set Title to Bootstrap modal title
    /*document.getElementById("readonly").id ="false";*/
   
}
    
function edit(id_ab)
{
   

    $('#formedit')[0].reset(); // reset form on modals
    $('.form-group').removeClass('has-error'); // clear error class
    $('.help-block').empty(); // clear error string


    //Ajax Load data from ajax
    $.ajax({
        url : "<?php echo site_url('absen/edit/')?>/" + id_ab,
        type: "POST",
        dataType: "JSON",
        success: function(data)
        {

            $('[name="id_ab"]').val(data.id_ab);
            $('[name="tgl"]').val(data.tgl);
            $('[name="masuk"]').val(data.masuk);
            $('[name="keluar"]').val(data.keluar);
            $('#modal_formedit').modal('show'); // show bootstrap modal when complete loaded
            $('.modal-title').text('Edit Data'); // Set title to Bootstrap modal title
            
        },
        error: function (jqXHR, textStatus, errorThrown)
        {
            alert('Error get data from ajax');
        },
    });
}
function save()
{
    $('#btnSave').text('saving...'); //change button text
    $('#btnSave').attr('disabled',true); //set button disable 
    var url= "<?php echo site_url('absen/tambah')?>";

    

    // ajax adding data to database
    $.ajax({
        url : url,
        type: "POST",
        data: $('#form').serialize(),
        dataType: "JSON",
        success: function(data)
        {

            if(data.status) //if success close modal 
            {
                $('#modal_form').modal('hide');
                reload_table();
            
               
                
            }
            else
            {
                for (var i = 0; i < data.inputerror.length; i++) 
                {
                    $('[name="'+data.inputerror[i]+'"]').parent().parent().addClass('has-error'); //select parent twice to select div form-group class and add has-error class
                    $('[name="'+data.inputerror[i]+'"]').next().text(data.error_string[i]); //select span help-block class set text error string
                }
            }
            $('#btnSave').text('save'); //change button text
            $('#btnSave').attr('disabled',false); //set button enable 


        },
        error: function (jqXHR, textStatus, errorThrown)
        {
            alert('Error adding / update data');
            $('#btnSave').text('save'); //change button text
            $('#btnSave').attr('disabled',false); //set button enable 

        }
    });
}
function update()
{
    $('#btnSave').text('saving...'); //change button text
    $('#btnSave').attr('disabled',true); //set button disable 
    var url= "<?php echo site_url('absen/update')?>";

    

    // ajax adding data to database
    $.ajax({
        url : url,
        type: "POST",
        data: $('#formedit').serialize(),
        dataType: "JSON",
        success: function(data)
        {

            if(data.status) //if success close modal 
            {
                $('#modal_formedit').modal('hide');
                reload_table();
            
               
                
            }
            else
            {
                for (var i = 0; i < data.inputerror.length; i++) 
                {
                    $('[name="'+data.inputerror[i]+'"]').parent().parent().addClass('has-error'); //select parent twice to select div form-group class and add has-error class
                    $('[name="'+data.inputerror[i]+'"]').next().text(data.error_string[i]); //select span help-block class set text error string
                }
            }
            $('#btnSave').text('save'); //change button text
            $('#btnSave').attr('disabled',false); //set button enable 


        },
        error: function (jqXHR, textStatus, errorThrown)
        {
            alert('Error adding / update data');
            $('#btnSave').text('save'); //change button text
            $('#btnSave').attr('disabled',false); //set button enable 

        }
    });
}
function reload_table(){
window.location.reload(true); 
}


</script>

<!-- Bootstrap modal -->
<div class="modal fade" id="modal_form" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true"></span></button>
                <h3 class="modal-title">Form Karyawan</h3>
            </div>
            <div class="modal-body form">
                 <form action="#" id="form" class="form-horizontal">

                        <div class="form-group">
                            <label class="control-label col-md-3">Nik </label>
                            <div class="col-md-9">
                                  <select class="form-control" name="id_kar">
                                    <option value="">-----Pilih-----</option>
                                     <?php foreach ($karyawan as $karyawanlist) { ?>
                                        <option value="<?php echo $karyawanlist->id_kar; ?>"><?php echo $karyawanlist->nama; ?>(<?php echo $karyawanlist->nik; ?>)</option><?php } ?>
                                  </select>
                                <span class="help-block"></span>
                            </div>
                        </div>
                        <!-- 
                         <div class="form-group">
                            <label class="control-label col-md-3">Nik</label>
                            <div class="col-md-9">
                                <input name="id_kar" id="Nik" placeholder="Nik" class="form-control" type="text">
                                <span class="help-block"></span>
                            </div>
                        </div>
                         -->
                        <div class="form-group">
                            <label class="control-label col-md-3">Tanggal</label>
                            <div class="col-md-9">
                                <input name="tgl" placeholder="yyyy-mm-dd" class="form-control datepicker" type="text">
                                <span class="help-block"></span>
                            </div>
                        </div> 
                        <div class="form-group">
                            <label class="control-label col-md-3">Jenis </label>
                            <div class="col-md-9">
                                  <select class="form-control" name="jenis" id="jenis">
                                    <option value="">-----Pilih-----</option>
                                    <option value="masuk">Masuk</option>
                                    <option value="keluar">Keluar</option>
                                  </select>
                                <span class="help-block"></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-md-3">Jam</label>
                            <div class="col-md-9">

                        <div class="bootstrap-timepicker">
                                <input name="jam" id="timepicker" class="form-control bootstrap-timepicker timepicker" type="text">
                                <span class="help-block"></span></div>
                        </div> 
                        </div>                      
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" id="btnSave" onclick="save()" class="btn btn-primary">Save</button>
                <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- End Bootstrap modal -->
<!-- Bootstrap modal -->
<div class="modal fade" id="modal_formedit" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true"></span></button>
                <h3 class="modal-title">Form Karyawan</h3>
            </div>
            <div class="modal-body form">
                 <form action="#" id="formedit" class="form-horizontal">
                        <input type="hidden" name="id_ab">
                        <div class="form-group">
                            <label class="control-label col-md-3">Nik </label>
                            <div class="col-md-9">
                                  <select class="form-control" name="id_kar">
                                    <option value="">-----Pilih-----</option>
                                     <?php foreach ($karyawan as $karyawanlist) { ?>
                                        <option value="<?php echo $karyawanlist->id_kar; ?>"><?php echo $karyawanlist->nama; ?>(<?php echo $karyawanlist->nik; ?>)</option><?php } ?>
                                  </select>
                                <span class="help-block"></span>
                            </div>
                        </div>
                        <!-- 
                         <div class="form-group">
                            <label class="control-label col-md-3">Nik</label>
                            <div class="col-md-9">
                                <input name="id_kar" id="Nik" placeholder="Nik" class="form-control" type="text">
                                <span class="help-block"></span>
                            </div>
                        </div>
                         -->
                        <div class="form-group">
                            <label class="control-label col-md-3">Tanggal</label>
                            <div class="col-md-9">
                                <input name="tgl" placeholder="yyyy-mm-dd" class="form-control datepicker" type="text">
                                <span class="help-block"></span>
                            </div>
                        </div> 
                        <div class="form-group">
                            <label class="control-label col-md-3">Masuk</label>
                            <div class="col-md-9">

                        <div class="bootstrap-timepicker">
                                <input name="masuk" id="timepicker" class="form-control bootstrap-timepicker timepicker" type="text">
                                <span class="help-block"></span></div>
                        </div> 
                        </div>
                        <div class="form-group">
                            <label class="control-label col-md-3">Keluar</label>
                            <div class="col-md-9">

                        <div class="bootstrap-timepicker">
                                <input name="keluar" id="timepicker" class="form-control bootstrap-timepicker timepicker" type="text">
                                <span class="help-block"></span></div>
                        </div> 
                        </div>                      
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" id="btnSave" onclick="update()" class="btn btn-primary">Save</button>
                <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- End Bootstrap modal -->