djid_siput/resources/views/aktivasi-program/detail.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.update',$data->id)}}" method="POST" id="form-edit">
@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" value="{{$data->value}}" name="value" required readonly>
         <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 disabled> 
            <option value="0" {{$data->status==0?'selected':''}}>Draft</option>
            <option value="1" {{$data->status==1?'selected':''}}>Aktif</option>
            <option value="2" {{$data->status==2?'selected':''}}>Selesai</option>
         </select>
     </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>
        </tr>
      </thead>
      <tbody id="tbody">
          <input type="hidden" name="uniqids" id="uniqids">

          @foreach($data->tahunProgramDetail as $key => $row)
            @php $uniqid = sprintf("%06d", mt_rand(1, 999999)); @endphp
            <tr id="tr-{{$uniqid}}">
                <input type="hidden" name="id_{{$uniqid}}" value="{{$row->id}}">
                <input type="hidden" class="uniqid" value="{{$uniqid}}">
                <td>
                    <select class="form-control program" id="program-{{$uniqid}}" name="id_template_program_{{$uniqid}}" required onChange="selectSubProgram({{$uniqid}})" disabled>
                        @foreach($templateProgram as $opt)
                          <option value="{{$opt->id}}" id="{{$uniqid}}" {{$row->id_template_program==$opt->id?'selected':''}}>{{$opt->nama}}</option>
                        @endforeach
                    </select>
                </td>
                <td>
                    <select class="form-control subprogram" id="subprogram-{{$uniqid}}" name="id_template_program_detail_{{$uniqid}}" required disabled>
                        @foreach($templateProgramDetail->where('id_template_program',$row->id_template_program) as $opt)
                          <option value="{{$opt->id}}" id="{{$uniqid}}" {{$row->id_template_program_detail==$opt->id?'selected':''}}>{{$opt->nama}}</option>
                        @endforeach
                    </select>
                </td>
                <td>
                    <select class="form-control" id="satuan_{{$uniqid}}" name="satuan_{{$uniqid}}" onChange="setJumlah({{$uniqid}})" disabled>
                        <option value="Tahun" {{$row->satuan=='Tahun'?'selected':''}}>Tahun</option>
                        <option value="Bulan" {{$row->satuan=='Bulan'?'selected':''}}>Bulan</option>
                    </select>
                </td>
                <td>
                    <select class="form-control" name="jumlah_{{$uniqid}}" id="jumlah_{{$uniqid}}" disabled>
                        <?php $optJumlah = ($row->satuan == 'Tahun')?12:1; ?>
                        @for($i=1;$i<=$optJumlah;$i++)
                          <option value="{{$i}}" {{$row->jumlah==$i?'selected':''}}>{{$i}}</option>
                        @endfor
                    </select>
                </td>
            </tr>
          @endforeach
      </tbody>
    </table>
    </div>
    <div class="tb-container">
      <div class="row" style="padding:20px">
        <div class="col-md-10"></div>
        <div class="col-md-2">
          <a href="{{route('aktivasi-program')}}" class="btn btn-primary" id="btn-back" style="background: #fff;color: #193865">Kembali</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);
  // checkDuplicate();
})

// 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();

function selectSubProgram(uniqid){
   var id_program = $('#program-'+uniqid).val();
   $.ajax({
        url: "{{url('api/template-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);
        }
    }); 
}

$('#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