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

<?php $getStatus = \App\Model\Privillage\Role::where('id',Auth::user()->role_id)->value('akses'); ?>
@extends('dev.core.using')
@section('content')
<style>
  .prev-holder, .className-wrap, .description-wrap, .tooltip-element, .copy-button {
   display:none !important;
 }
 .form-field{
    flex:0 0 50%;
    position:relative;
    width:50%;
    outline: 1px solid #a9a9a9;
 }

 .frmb {
    display:flex !important;
    flex-wrap:wrap !important;
    min-height:40px !important;
 }
 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;
 }

 /* @media only screen and (max-width: 700px) {
  .field-label{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100px;
    font-size: 14px !important;
    padding-left:0px !important;
 } */
</style>
<br/>
<br/>
<form action="{{route('pembuatan-program.subprogram.update',[$data->id_template_program, $data->id])}}" method="POST" enctype="multipart/form-data" id="form-edit">
@csrf
<input type="hidden" name="total_label" id="total_label">
<input type="hidden" name="total_tipe_kolom" id="total_tipe_kolom">
<input type="hidden" name="total_master_option" id="total_master_option">
<input type="hidden" name="total_required" id="total_required">
<input type="hidden" name="total_description" id="total_description">
  <div class="col">
      <div class="form-group">
          <label for="">Nama Sub Program *</label>
          <input type="text" class="form-control" id="namaProgram" name="nama" placeholder="No Data Available" value="{{$data->nama}}" required style="text-transform:uppercase" >
          <!-- <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small> -->
      </div>
      

      <div class="row">
        <div class="col-md-9"></div>
        <!-- <div class="btn btn-primary" style="background: #B4CD93" id="add-item"><i class="fas fa-plus-circle"></i> Tambah Item Program</div> -->
      </div>
      <button type="button" class="btn btn-primary btn-lg btn-block" style="background: #193865;margin-top: 1em">Item Capaian Program</button>
      
      <div id="fb-editor"></div>
</form>
  
<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-edit" id="btn-submit" style="background: #193865">Simpan Perubahan</button>
      <a href="{{route('pembuatan-program.edit',$data->id_template_program)}}" class="btn btn-primary" id="btn-back" style="background: #fff;color: #193865"> Kembali</a>
    </div>
  </div>
</div>
  
<script>
 
</script>

<script>
    $('#file_input').on('change',function(){
      var file = $(this).get(0).files[0];
      if(file){
          var reader = new FileReader();

          reader.onload = function(){
              $('#file_preview').attr('src',reader.result);
              $('#card_file_preview').show();
          }

          reader.readAsDataURL(file);
      }else{
        $('#card_file_preview').hide();
      }
      
    });

    var optKolom = [];
    @foreach($input as $key => $opt)
      optKolom.push({"kolom":"{{$key}}","type":"{{$opt['type']}}"});
    @endforeach

    // numbersString.split(',');
    //action tambah item
    $('#add-item').on('click',function(){
      var uniqid = Date.now();
      //initialize attribute
      
      var id = '<input type="hidden" class="uniqid" value="'+uniqid+'">';
      //kolom
      var kolom = '<td><select class="form-control kolom" onChange="setKolom('+uniqid+')" id="parent-'+uniqid+'" data-id="'+uniqid+'" required name="kolom_'+uniqid+'">';
      kolom += '<option value=""></option>';
      $.each( optKolom, function( index, value ) {
        kolom += '<option value="'+value.kolom+'" data-id="'+value.type+'" id="'+uniqid+'">'+value.kolom+'</option>';
      });
      kolom += '</select></td>';

      //label
      var label = '<td><input type="text" class="form-control label" value="" required name="label_'+uniqid+'">'

      //target
      var tipeKolom = `<td><select class="tipeKolom form-control" id="tipeKolom-`+uniqid+`" required name="tipe_kolom_`+uniqid+`">
                    </select></td>`;

      //isRequired
      var isRequired = `<td><select class="is_required form-control" required name="is_required_`+uniqid+`">
                            <option value="0">Tidak</option>
                            <option value="1">Ya</option>
                        </select></td>`;

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

      var attribute = '<tr id="tr-'+uniqid+'">'+id+kolom+label+tipeKolom+isRequired+aksi+'</tr>';
      $('#body').append(attribute);
      

    });

    var optTipeKolom = [];
    optTipeKolom['text'] = `<option value="text">Text</option>
                            <option value="file">File/Attachment</option>
                            <option value="provinsi">Provinsi</option>
                            <option value="kabkot">Kota/Kabupaten</option>`;
    optTipeKolom['number'] = `<option value="number">Numeric</option>`;
    optTipeKolom['date'] = `<option value="date">Date</option>`;

    function setKolom(uniqid){
      var value = $('#parent-'+uniqid).children("option:selected").attr('data-id');
      $('#tipeKolom-'+uniqid).children('option').remove();
      $('#tipeKolom-'+uniqid).append(optTipeKolom[value]);
      checkDuplicate();
    };

    function checkDuplicate(){
      var selected = [];
      var invalid = 0;
      $('.kolom 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: 'Kolom "'+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;
      }
    }

    //trigger for first time;
    checkDuplicate();

    $('#btn-submit').on('click',function(){

        //get all label
        var total_label = '';
        $('.fld-label').each(function(i, obj) {
          if(total_label!=''){
            total_label += ',';
          }

          total_label += obj.value;
        });

        //get all tipe_kolom
        var total_tipe_kolom = '';
        $('.fld-title').each(function(i, obj) {
          if(total_tipe_kolom!=''){
            total_tipe_kolom += ',';
          }

          total_tipe_kolom += obj.value;
        });

        //get all master option
        var total_master_option = '';
        $('.fld-options').each(function(i, obj) {
          if(total_master_option!=''){
            total_master_option += ',';
          }

          total_master_option += obj.value;
        });
        
        //get all required trigger
        var total_required = '';
        $('.fld-required').each(function(i, obj) {
          if(total_required!=''){
            total_required += ',';
          }
          
          total_required += obj.checked;
        });
        
        //get all ID
        var total_description = '';
        $('.fld-description').each(function(i, obj) {
          if(total_description!=''){
            total_description += ',';
          }
          
          total_description += obj.value;
        });

        $('#total_label').val(total_label);
        $('#total_tipe_kolom').val(total_tipe_kolom);
        $('#total_master_option').val(total_master_option);
        $('#total_required').val(total_required);
        $('#total_description').val(total_description);
    });

    

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


<script src="{{asset('templates/assets/js/form-builder.min.js')}}"></script>
<script>
    var options = {
    disabledActionButtons: ['data','save','clear'],
    disabledFieldButtons: {
      text: ['copy'], // disables the remove butotn for text fields
      select: ['copy'], // disables the edit button for select fields
      date: ['copy'], // disables the edit button for select fields
      file: ['copy'], // disables the edit button for select fields
      number: ['copy'] // disables the edit button for select fields
    },

    typeUserAttrs: {
      select: {
        label: {
          label: 'Label',
          value: '',
        },
        options: {
          label: 'Master Option',
          options: {
            @foreach($masterOption as $row)
            '{{$row->id}}':'{{$row->label}}',
            @endforeach
          },
          style: 'border: 1px solid red'
        },
        title:{
          label: 'Tipe Data',
          value: 'select',
          readonly: 'true'
        },
        className:{
          label: 'Form Class',
          value: 'form-control',
          readonly: 'true'
        }
      },
      text: {
        label: {
          label: 'Label',
          value: '',
        },
        title:{
          label: 'Tipe Data',
          value: 'text',
          readonly: 'true'
        },
        className:{
          label: 'Form Class',
          value: 'form-control',
          readonly: 'true'
        }
      },
      number: {
        label: {
          label: 'Label',
          value: '',
        },
        title:{
          label: 'Tipe Data',
          value: 'number',
          readonly: 'true'
        },
        className:{
          label: 'Form Class',
          value: 'form-control',
          readonly: 'true'
        }
      },
      date: {
        label: {
          label: 'Label',
          value: '',
        },
        title:{
          label: 'Tipe Data',
          value: 'date',
          readonly: 'true'
        },
        className:{
          label: 'Form Class',
          value: 'form-control',
          readonly: 'true'
        }
      },
      file: {
        label: {
          label: 'Label',
          value: '',
        },
        title:{
          label: 'Tipe Data',
          value: 'file',
          readonly: 'true'
        },
        className:{
          label: 'Form Class',
          value: 'form-control',
          readonly: 'true'
        }
      }
    },
    
    typeUserDisabledAttrs: {
        'text': [
          'name',
          'access',
          'label',
          'className',
          'subtype',
          'value',
          'placeholder',
          'maxlength'
      ],
      'number': [
          'name',
          'access',
          'label',
          'className',
          'subtype',
          'value',
          'min',
          'max',
          'step',
          'placeholder',
          'maxlength'
      ],
      'date': [
          'name',
          'access',
          'label',
          'className',
          'subtype',
          'value',
          'min',
          'max',
          'step',
          'placeholder',
          'maxlength'
      ],
      'file': [
          'name',
          'access',
          'label',
          'className',
          'subtype',
          'value',
          'placeholder',
          'maxlength',
          'multiple'
      ],
      'select': [
          'name',
          'access',
          'className',
          'subtype',
          'options',
          'placeholder',
          'label',
          'multiple',
      ]
    },

    inputSets: [
        {
          label: 'Input Text',
          name: 'input-text', // optional - one will be generated from the label if name not supplied
          showHeader: false, // optional - Use the label as the header for this set of inputs
          fields: [
              {
                type: 'text',
                label: 'Input Text',
                className: 'form-control',
              }
            ]
        },
        {
          label: 'File/Attachment',
          name: 'file-attachment', // optional - one will be generated from the label if name not supplied
          showHeader: false, // optional - Use the label as the header for this set of inputs
          fields: [
              {
                type: 'file',
                label: 'File/Attachment',
                className: 'form-control',
              }
            ]
        },
        {
          label: 'Provinsi',
          name: 'provinsi', // optional - one will be generated from the label if name not supplied
          showHeader: false, // optional - Use the label as the header for this set of inputs
          fields: [
              {
                type: 'text',
                label: 'Provinsi',
                className: 'form-control',
                title:'provinsi'
              }
            ]
        },
        {
          label: 'Kota/Kabupaten',
          name: 'kabkot', // optional - one will be generated from the label if name not supplied
          showHeader: false, // optional - Use the label as the header for this set of inputs
          fields: [
              {
                type: 'text',
                label: 'Kota/Kabupaten',
                className: 'form-control',
                title:'kabkot'
              }
            ]
        },
        {
          label: 'Number',
          name: 'numbers', // optional - one will be generated from the label if name not supplied
          showHeader: false, // optional - Use the label as the header for this set of inputs
          fields: [
              {
                style:'width:100%',
                type: 'number',
                label: 'Number',
                className: 'form-control',
              }
            ]
        },
        {
          label: 'Date',
          name: 'dates', // optional - one will be generated from the label if name not supplied
          showHeader: false, // optional - Use the label as the header for this set of inputs
          fields: [
              {
                type: 'date',
                label: 'Date',
                className: 'form-control',
              }
            ]
        },
        {
          label: 'Select Option',
          name: 'select-option', // optional - one will be generated from the label if name not supplied
          showHeader: false, // optional - Use the label as the header for this set of inputs
          fields: [
              {
                type: 'select',
                label: 'Select Option',
                className: 'form-control'
              }
            ]
        },    
      ],
      disableFields: [
          'autocomplete',
          'button',
          'checkbox-group',
          'date',
          'file',
          'header',
          'hidden',
          'number',
          'paragraph',
          'radio-group',
          'select',
          'starRating',
          'text',
          'textarea',
      ],
      @if(!empty($data->itemProgram))
      defaultFields: [
        
          @foreach($data->itemProgram->sortBy('order_by') as $key => $row)
          {
            className: "form-control",
            label: "{{$row->label}}", //label
            description: "{{$row->id}}", //id
            required: {{$row->is_required==1?'true':'false'}}, //is_required
            type: "{{$row->type}}", //type form builder (custom attribute)
            title: "{{$row->tipe_kolom}}", //tipe_kolom
            options: "{{$row->id_master_option}}"
          },
          @endforeach
        
      ],
      @endif
  };
  $('#fb-editor').formBuilder(options);


$('.prev-holder').hide();
</script>
@endsection