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

<?php $getStatus = \App\Model\Privillage\Role::where('id',Auth::user()->role_id)->value('akses'); ?>
@extends('dev.core.using')
@section('content')
<style>

 .parent-list {
   list-style: none;
 }
 .arr-btn{
   font-size: 20px;
   margin-right: .5em;
   cursor: pointer;
   width: 1.3rem;
   height: 1.3rem;
   border-radius: .5rem;
   text-align: center;
 }
 .arr-btn:hover{
  background: #cdcdcd
 }
 .ic-container{
   /* margin-top: .3em; */
   gap:.5em;
 }
 .ic-container > .ic {
   width: 1.5rem;
   height: 1.3rem;
   border-radius: .5rem;
   text-align: center;
   cursor:pointer;
   background: #cdcdcd;
   /* padding-top: .3rem; */
   font-size: .8em;
   list-style: none;
   color: #000;
 }
 .ic-container > .ic:hover {
  background: #eee;
 }

 @media only screen and (max-width: 700px) {
 .template-item{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
  padding-left:0px !important;
 }
}
</style>
<br/>
<br/>
<div class="card card-stats">
 <div class="card-body">
    <div class="row">
      <div class="col-md-12">
          <a type="button" href="{{route('pembuatan-program.add')}}" class="btn btn-primary" style="background: #193865;color: #fff"><i class="fa fa-plus"></i> Tambah Baru</a>
      </div>
    </div><br>
				
    <ul class="parent-list" id="par-list">
      <li>
      </li>
    </ul>
</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 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>

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" id="form_assign">
  <form action="{{route('pembuatan-program.assign-role')}}" method="POST">
  @csrf
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Program Role</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" class="form_assign" id="form_assign_id_template_program" name="id_template_program">

            @foreach($roles as $row)
              <div class="form-check col-md-6">
                <input type="checkbox" class="form_assign" name="id_role_{{$row->id}}" id="form_assign_id_role_{{$row->id}}">
                <label>{{$row->role_name}}</label>
              </div>
            @endforeach
        </div>
        <div class="modal-footer">
          <div class="form-group">
            <button type="submit" class="btn btn-primary">Simpan Data</button>
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Batalkan</button>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>

<script>

 $(document).ready(function () {
  var base = "{{url('/')}}"
  $(document).ready(function () {
   getList()

  })
   async function getList () {
     const url = "{{url('api/pembuatan-program')}}"
     const res = await fetch(url,{
         method: 'GET', // *GET, POST, PUT, DELETE, etc.
         mode: 'cors', // no-cors, *cors, same-origin
         cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
         credentials: 'same-origin', // include, *same-origin, omit
         headers: {
           'Content-Type': 'application/json'
           // 'Content-Type': 'application/x-www-form-urlencoded',
         }
       })
     const resp = await res.json()
     console.log(resp.data)
     if (resp.status === 200) {
       var html = ""
       for (let dd in resp.data) {
         html += `<li class="row" style="padding-top:7px;">
        <div class="col-xs-4 col-sm-4 col-md-7 template-item" title="${resp.data[dd].nama}"><b>${resp.data[dd].nama}</b></div>
        <div class="ic-container" style="display:flex">
         <small><a href="#" class="badge" onClick="assignRole(${resp.data[dd].id})" style="background: #193865;color: #fff;text-transform:none !important">Assign Role</a></small>
         <a href="${base}/pengaturan/pembuatan-program/edit/${resp.data[dd].id}" class="ic"><i class="fas fa-edit" ></i></a>
         <a href="${base}/pengaturan/pembuatan-program/detail/${resp.data[dd].id}" class="ic"><i class="fas fa-eye" ></i></a>
         <a href="#" data-toggle="modal" id="btn-delete-${resp.data[dd].id}" data-nama="${resp.data[dd].nama}" data-target="#modal-delete" onClick="deleteData(${resp.data[dd].id})" class="ic"><i class="fas fa-trash" ></i></a>
        </div>
         </li>`
       }
       $('#par-list').html(
         html
       )
     }
   }
 })

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

 function assignRole(id_template){
  $.ajax({
        url: "{{url('api/pembuatan-program')}}/"+id_template,
        dataType: "json",
        type: "GET",
        async: true,
        data: { },
        beforeSend: function(){
          $('.form_assign').val('');
          $('.form_assign').attr('checked',false);
        },
        success: function (data) {
            $('#form_assign_id_template_program').val(id_template);
            $('#form_assign').modal('show');
            $.each( data.data.template_program_role, function( key, value ) {
                $('#form_assign_id_role_'+value.id_role).attr('checked',true);
            });
            console.log(data);
        },
        error: function (xhr, exception) {
            var msg = "";
            if (xhr.status === 0) {
                msg = "Not connect.\n Verify Network." + xhr.responseText;
            } else if (xhr.status == 404) {
                msg = "Requested page not found. [404]" + xhr.responseText;
            } else if (xhr.status == 500) {
                msg = "Internal Server Error [500]." +  xhr.responseText;
            } else if (exception === "parsererror") {
                msg = "Requested JSON parse failed.";
            } else if (exception === "timeout") {
                msg = "Time out error." + xhr.responseText;
            } else if (exception === "abort") {
                msg = "Ajax request aborted.";
            } else {
                msg = "Error:" + xhr.status + " " + xhr.responseText;
            }
           console.log(msg);
        }
    }); 
 };
</script>
@endsection