djid_siput/resources/views/aktivasi-program/aktivasi-program.blade.php

<?php $getStatus = \App\Model\Privillage\Role::where('id',Auth::user()->role_id)->value('akses'); ?>
@extends('dev.core.using')
@section('content')
<style>
 .ic {
   width: 1.5rem;
   height: 1.3rem;
   border-radius: .5rem;
   text-align: center;
   cursor:pointer;
   /* background: #cdcdcd; */
   /* padding-top: .3rem; */
   font-size: 1em;
   list-style: none;
   color: #000;
 }
 .ic:hover {
  background: #eee;
  color: #000;
 }
 .dataTables_wrapper, .dataTables_info, .dataTables_length {
   background: #f8f9fe !important;
   color: #000 !important;
 }
 
</style>
<br/>
<br/>
<div class="col">

 <div class="input-group mb-3">
   <div class="input-group-prepend" style="height: 2.63em">
     <span class="input-group-text" id="basic-addon1"><i class="fas fa-search"></i></span>
   </div>
   <input type="text" class="form-control"  style="height: 3em" placeholder="Search" aria-label="Search" aria-describedby="basic-addon1">
 </div>
  <div class="row">
    <div class="col-md-12">
        <a type="button" href="{{route('aktivasi-program.add')}}" class="btn btn-primary" style="background: #193865;color: #fff"><i class="fa fa-plus"></i> Tambah Baru</a>
    </div>
  </div>
  <table class="table table-striped" id="tbl" style="text-align:center">
      <thead>
        <tr class="table-dark">
          <th scope="col">Tahun</th>
          <th scope="col">Label</th>
          <th scope="col" class="stts">Status</th>
          <th scope="col" class="dgcActions">Aksi</th>
        </tr>
      </thead>
      <tbody>
        
        
      </tbody>
   </table>
   <div id="demo"></div>
</div>

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" id="modal-delete">
  <form action="" method="POST" id="form-delete">
  @csrf
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Konfirmasi</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <input type="hidden" id="delete-id">
          <center>Anda yakin akan menghapus Tahun Program <span id="delete-nama" style="font-weight:bold"></span> ?</center>
        </div>
        <div class="modal-footer">
          <div class="form-group center">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Batalkan</button>
            <button type="submit" class="btn btn-danger">Hapus Data</button>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>

<script src="{{ asset('public/js/pagination-min.js')}}" type="text/javascript"></script>
<script>
 let table =''

$(document).ready( async function () {
    let totalPage
   table = await $('#tbl').DataTable({
      "serverSide": true,
      "processing": true,
      "paging": true,
      "ordering": false,
      "searching": false,
      iTotalDisplayRecords: 15,
      "lengthMenu": [ [10, 25, 50, 100], [10, 25, 50, 100] ],
      "pageLength": 10,
      ajax: {
       url: '{{url("/api/aktivasi-program")}}' + '?' + $.param({ paramInQuery: 1 }),
       
      },
      columns: [
       { data: 'value' },
       { data: 'label_tahun_program' },
       // { data: 'status' },
       { data: null, searchable: false, orderable: false },
       { data: null, searchable: false, orderable: false }
      ],
      columnDefs: [
           {
               targets: "dgcActions",
               //data: null,
               render: function (data, type, row) {
                   var html = `
                     <a href="{{url('pengaturan/aktivasi-program/edit')}}/${data.id}" class="ic"><i class="fas fa-edit" style="color: #3C8F61"></i></a>
                    <a href="{{url('pengaturan/aktivasi-program/detail')}}/${data.id}" class="ic"><i class="fas fa-eye" style="color: #0093DD"></i></a>
                    <a href="#" data-toggle="modal" class="ic" id="btn-delete-${data.id}" data-nama="${data.value}" data-target="#modal-delete" onClick="deleteData(${data.id})"><i class="fas fa-trash" style="color: #E12D2D" ></i></a>
                   `;
 
                   return html;
               }
           },
           {
               targets: "stts",
               //data: null,
               render: function (data, type, row) {
                var html;
                  if(row.status ==0){
                    html = '<span class="badge badge-warning">Draft</span>';
                  }else if(row.status ==1){
                    html = '<span class="badge badge-success text-dark">Aktif</span>';
                  }else if(row.status ==2){
                    html = '<span class="badge badge-primary text-dark">Selesai</span>';
                  }
                   
 
                   return html;
               }
           }
       ]
    });
} );

function deleteData(id){
    var nama = $('#btn-delete-'+id).attr('data-nama');
    $('#form-delete').attr("action","{{url('pengaturan/aktivasi-program/delete')}}/"+id);
    $('#delete-id').val(id);
    $('#delete-nama').text();
    $('#delete-nama').text(nama);
 }


</script>
@endsection