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

<?php $getStatus = \App\Model\Privillage\Role::where('id',Auth::user()->role_id)->value('akses'); ?>
@extends('dev.core.using')
@section('content')
<style>
 input, select {
     border: 0 !important;
     background: transparent !important;
     border-bottom: 1px solid #cdcdcd !important;
 }
 .tb-container{
   background: #fff;
   margin-top: 1em;
 }
 tbody > tr {
    line-height: 45px !important;
    min-height: 45px !important;
    height: 45px !important;
 }
 .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;
 }
</style>
<br/>
<br/>
<form action="{{route('aktivasi-program.create')}}" method="POST" id="form-create">
@csrf
  <div class="col">
     <div class="form-group">
         <label for="exampleInputEmail1">Tahun Program *</label>
         <input type="" class="form-control" id="tahunProgram" placeholder="No Data Available" name="value" required>
         <small id="tahunProgramHelp" class="form-text text-muted" style="color:red !important"></small>
         <!-- <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small> -->
    </div> 
     <div class="form-group">
         <label for="exampleInputEmail1">Status *</label>
         <select class="form-control" id="status" name="status" required> 
            <option value="0">Draft</option>
            <option value="1">Aktif</option>
            <option value="2">Selesai</option>
         </select>
     </div>
     <div class="row">
       <div class="col-md-10"></div>
       <div class="col-md-2">
          <div class="btn btn-primary" style="background: #B4CD93;float:right" id="add-program"><i class="fas fa-plus-circle"></i> Tambah</div>
       </div>
     </div>
    <div class="btn btn-primary btn-lg btn-block" style="background: #193865;margin-top: 1em">Program</div>
    <div class="tb-container">
    <table class="table table-bordered">
      <thead >
        <tr class="table-dark">
          <th scope="col" width="300px">Program</th>
          <th scope="col" width="300px">Sub Program</th>
          <th scope="col">Periode</th>
          <th scope="col">Jumlah</th>
          <th scope="col">Aksi</th>
        </tr>
      </thead>
      <tbody id="tbody">
          <input type="hidden" name="uniqids" id="uniqids">
      </tbody>
    </table>
    </div>
    <div class="tb-container">
      <div class="row" style="padding:20px">
        <div class="col-md-8"></div>
        <div class="col-md-4">
          <button type="button" class="btn btn-primary confirmation" data-target="form-create" id="btn-submit" style="background: #193865"><i class="fa fa-save"></i> Simpan Perubahan</button>
          <a href="{{route('aktivasi-program')}}" class="btn btn-primary" id="btn-back" style="background: #fff;color: #193865">Batal</a>
        </div>
      </div>
    </div>
  </div>
</form>
<script>
$('#add-program').click(function() {
  var uniqid = Date.now();

  var id = '<input type="hidden" class="uniqid" value="'+uniqid+'">';

  var program = `<td><select class="form-control program" id="program-`+uniqid+`" name="id_template_program_`+uniqid+`" onChange="selectSubProgram(`+uniqid+`)">`
    @foreach($templateProgram as $opt)
      program += `<option value="{{$opt->id}}" id="`+uniqid+`">{{$opt->nama}}</option>`
    @endforeach
  program += `</select></td>`;

  var subprogram = `<td><select class="form-control subprogram" id="subprogram-`+uniqid+`" name="id_template_program_detail_`+uniqid+`">`
  subprogram += `</select></td>`;

  var periode = `<td>
                    <select class="form-control" name="satuan_`+uniqid+`" id="satuan_`+uniqid+`" onChange="setJumlah(`+uniqid+`)">
                        <option value="Tahun">Tahun</option>
                        <option value="Bulan">Bulan</option>
                    </select>
                </td>`;

  var jumlah = `<td>
      <select class="form-control" name="jumlah_`+uniqid+`" id="jumlah_`+uniqid+`">
      </select>
  </td>`;

  var aksi = '<td><center><a id="btn-remove" onClick="removeData('+uniqid+')"><i class="fas fa-trash" style="color: #E12D2D" ></i></a></center></td>';

  var attribute = '<tr id="tr-'+uniqid+'">'+id+program+subprogram+periode+jumlah+aksi+'</tr>';
  $('#tbody').append(attribute);

  setJumlah(uniqid);
  selectSubProgram(uniqid);
  // checkDuplicate();
})

function selectSubProgram(uniqid){
   var id_program = $('#program-'+uniqid).val();
   $.ajax({
        url: "{{url('api/pembuatan-program')}}/subprogram?id_template_program="+id_program,
        dataType: "json",
        type: "GET",
        async: true,
        data: { },
        beforeSend: function(){
          $('#subprogram-'+uniqid).children('option').remove();
        },
        success: function (result) {
            var opt = '';
            $.each( result.data, function( index, value ){
                opt += '<option value="'+value.id+'">'+value.nama+'</option>';
            });

            $('#subprogram-'+uniqid).append(opt);
            console.log(result.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);
        }
    }); 
}

// function checkDuplicate(){
//   var selected = [];
//   var invalid = 0;
//   $('.program option:selected').each(function(i, obj) {
//       //remove tooltip
//       $('#parent-'+obj.id).tooltip('dispose');

//       //check if kolom is duplicate
//       if ($.inArray(obj.value, selected) != -1){
//         $('#parent-'+obj.id).css({'color':'red'});
//         $('#parent-'+obj.id).children('option').css({'color':'#8898aa'});
//         $('#parent-'+obj.id).tooltip({title: 'Program "'+obj.value+'" sudah digunakan'});
//         invalid++;
//       }else{
//         $('#parent-'+obj.id).css({'color':'#8898aa'});
//       }

//       selected.push(obj.value);
      
//   });
  
//   if(invalid>0){
//     $('#btn-submit').prop('disabled',true);
//     return false;
//   }else{
//     $('#btn-submit').prop('disabled',false);
//     return true;
//   }
// }

// checkDuplicate();

$('#btn-submit').on('click',function(){
  // var check = checkDuplicate();
  
  // if(check){
    var uniqids = '';
    $('.uniqid').each(function(i, obj) {
      if(uniqids!=''){
        uniqids += ',';
      }

      uniqids += obj.value;
    });
    $('#uniqids').val(uniqids);
  // }
});

function removeData(uniqid){
  $('#tr-'+uniqid).remove();
  // checkDuplicate();
}

function setJumlah(uniqid){
  var satuan = $('#satuan_'+uniqid).find(":selected").val();
  var jumlah = 0;
  if(satuan=='Tahun'){
    jumlah = 12;
  }else if(satuan=='Bulan'){
    jumlah = 1;
  }
  
  var option = '';
  for(var i = 1;i<=jumlah;i++){
    option += '<option value="'+i+'">'+i+'</option>';
  }

  $('#jumlah_'+uniqid).children('option').remove();
  $('#jumlah_'+uniqid).append(option);
}
</script>
@endsection