add.pt 18.6 KB
<html metal:use-macro="load: ../base.pt">
<div metal:fill-slot="content">
<!--h4>Tambah/Edit Register</h4-->
<h4>Tambah Fast Register</h4>
<hr>
<form id="deform" method="POST" enctype="multipart/form-data" accept-charset="utf-8"
      class="form-horizontal">
  <fieldset class="deformFormFieldset">
    <input type="hidden" name="_charset_" />
    <input type="hidden" name="__formid__" value="deform"/>
    <div class="form-group">
      <div tal:condition="'id' in form">
        <div tal:define="field form['id']">
          ${structure:field.serialize()}
        </div>
      </div>
      <!--unit_id ------------------------------->
      <div tal:define="field form['unit_id']">
          ${structure:field.serialize()}
      </div>
      <!--pajak_id ------------------------------->
      <div tal:define="field form['pajak_id']">
          ${structure:field.serialize()}
      </div>
        
      <div class="col-md-6">
        <!--kode ------------------------------->
        <div class="form-group" tal:define="field form['kode']" id="item-${field.oid}">
          <label for="${field.oid}" class="control-label col-md-3" id="req-${field.oid}">
              ${field.title}<span id="error-${field.oid}" class="text text-danger"
                                  tal:condition="field.required">&nbsp*</span></label>
          <div class="col-md-9">
              ${structure:field.serialize()}
              <script>
                  $("#${field.oid}").attr("readonly", true);
              </script>
              <p id="error-${field.oid}" class="help-block" tal:condition="field.error"
                           tal:repeat="error field.error.messages()">
                           ${error}</p>          
          </div>
        </div>
        <!--wp_kode ------------------------------->
        <div class="form-group" tal:define="field form['wp_kode']" id="item-${field.oid}">
          <label for="${field.oid}" class="control-label col-md-3" id="req-${field.oid}">
              ${field.title}<span id="error-${field.oid}" class="text text-danger"
                                  tal:condition="field.required">&nbsp*</span></label>
          <div class="col-md-9">
              ${structure:field.serialize()}
              <p id="error-${field.oid}" class="help-block" tal:condition="field.error"
                           tal:repeat="error field.error.messages()">
                           ${error}</p>          
          </div>
        </div>
		<!--wp_nama ------------------------------->
        <div class="form-group" tal:define="field form['wp_nama']" id="item-${field.oid}">
          <label for="${field.oid}" class="control-label col-md-3" id="req-${field.oid}">
              ${field.title}<span id="error-${field.oid}" class="text text-danger"
                                  tal:condition="field.required">&nbsp*</span></label>
          <div class="col-md-9">
              ${structure:field.serialize()}
              <p id="error-${field.oid}" class="help-block" tal:condition="field.error"
                           tal:repeat="error field.error.messages()">
                           ${error}</p>          
          </div>
        </div>
		<!--wp_alamat_1 ------------------------------->
        <div class="form-group" tal:define="field form['wp_alamat_1']" id="item-${field.oid}">
          <label for="${field.oid}" class="control-label col-md-3" id="req-${field.oid}">
              ${field.title}<span id="error-${field.oid}" class="text text-danger"
                                  tal:condition="field.required">&nbsp*</span></label>
          <div class="col-md-9">
              ${structure:field.serialize()}
              <p id="error-${field.oid}" class="help-block" tal:condition="field.error"
                           tal:repeat="error field.error.messages()">
                           ${error}</p>          
          </div>
        </div>
		<!--wp_alamat_2 ------------------------------->
        <div class="form-group" tal:define="field form['wp_alamat_2']" id="item-${field.oid}">
          <label for="${field.oid}" class="control-label col-md-3" id="req-${field.oid}">
              ${field.title}<span id="error-${field.oid}" class="text text-danger"
                                  tal:condition="field.required">&nbsp*</span></label>
          <div class="col-md-9">
              ${structure:field.serialize()}
              <p id="error-${field.oid}" class="help-block" tal:condition="field.error"
                           tal:repeat="error field.error.messages()">
                           ${error}</p>          
          </div>
        </div>
        <!--unit_nm ------------------------------->
        <div class="form-group" tal:define="field form['unit_nm']" id="item-${field.oid}">
          <label for="${field.oid}" class="control-label col-md-3" id="req-${field.oid}">
              ${field.title}<span id="error-${field.oid}" class="text text-danger"
                                  tal:condition="field.required">&nbsp*</span></label>
          <div class="col-md-9" tal:define="field form['unit_nm']" >
              ${structure:field.serialize()}
              <p id="error-${field.oid}" class="help-block" tal:condition="field.error"
                           tal:repeat="error field.error.messages()">
                           ${error}</p>          
          </div>
        </div>
		<!--wilayah_id ------------------------------->
        <div class="form-group" tal:define="field form['wilayah_id']" id="item-${field.oid}">
          <label for="${field.oid}" class="control-label col-md-3" id="req-${field.oid}">
              ${field.title}<span id="error-${field.oid}" class="text text-danger"
                                  tal:condition="field.required">&nbsp*</span></label>
          <div class="col-md-9" tal:define="field form['wilayah_id']" >
              ${structure:field.serialize()}
              <p id="error-${field.oid}" class="help-block" tal:condition="field.error"
                           tal:repeat="error field.error.messages()">
                           ${error}</p>          
          </div>
        </div>
        <!--pajak_nm ------------------------------->
        <div class="form-group" tal:define="field form['pajak_nm']" id="item-${field.oid}">
          <label for="${field.oid}" class="control-label col-md-3" id="req-${field.oid}">
              ${field.title}<span id="error-${field.oid}" class="text text-danger"
                                  tal:condition="field.required">&nbsp*</span></label>
          <div class="col-md-9">
              ${structure:field.serialize()}
              <p id="error-${field.oid}" class="help-block" tal:condition="field.error"
                           tal:repeat="error field.error.messages()">
                           ${error}</p>          
          </div>
          <script>
            //Untuk headof Pajak
            $('#pajak_nm').typeahead({
            remote: {
                    url: "/pajak/hon_fast/act?term=%QUERY&unit_id=",
                    replace: function () {
                        var q = "/pajak/hon_fast/act?term="+$('#pajak_nm').val();
                        if ($('#unit_id').val()) {
                            q += "&unit_id="+encodeURIComponent($('#unit_id').val());
                        }
                        return q;
                    }
                },
           
                "hint"     : true,
                "highlight": true,
                "cache"    : false,
                "minLength": 1,
                "limit"    : 15
            },{
                "name"      : 'pajak_nm',
                "displayKey": 'value',
            });
            
            $('#pajak_nm').bind('typeahead:selected', function(obj, datum, name) {  
                 $('#pajak_id').val(datum.id);
                 $('#tarif').val(datum.tarif);
            });
          </script>
        </div>
        <!--periode_1 ------------------------------->
        <div class="form-group" tal:define="field form['periode_1']" id="item-${field.oid}">
          <label for="${field.oid}" class="control-label col-md-3" id="req-${field.oid}">
              ${field.title}<span id="error-${field.oid}" class="text text-danger"
                                  tal:condition="field.required">&nbsp*</span></label>
          <div class="col-md-4">
              ${structure:field.serialize()}
              <p id="error-${field.oid}" class="help-block" tal:condition="field.error"
                           tal:repeat="error field.error.messages()">
                           ${error}</p>          
          </div>
          <div class="col-md-1">
          s.d
          </div>
          <div class="col-md-4" tal:define="field form['periode_2']">
              ${structure:field.serialize()}
          </div>
        </div>
        <!--tgl_tetap ------------------------------->
        <div class="form-group" tal:define="field form['tgl_tetap']" id="item-${field.oid}">
          <label for="${field.oid}" class="control-label col-md-3" id="req-${field.oid}">
              ${field.title}<span id="error-${field.oid}" class="text text-danger"
                                  tal:condition="field.required">&nbsp*</span></label>
          <div class="col-md-9">
              ${structure:field.serialize()}
              <p id="error-${field.oid}" class="help-block" tal:condition="field.error"
                           tal:repeat="error field.error.messages()">
                           ${error}</p>          
          </div>
        </div>
        <!--jatuh_tempo ------------------------------->
        <div class="form-group" tal:define="field form['jatuh_tempo']" id="item-${field.oid}">
          <label for="${field.oid}" class="control-label col-md-3" id="req-${field.oid}">
              ${field.title}<span id="error-${field.oid}" class="text text-danger"
                                  tal:condition="field.required">&nbsp*</span></label>
          <div class="col-md-9">
              ${structure:field.serialize()}
              <p id="error-${field.oid}" class="help-block" tal:condition="field.error"
                           tal:repeat="error field.error.messages()">
                           ${error}</p>          
          </div>
        </div>
      </div>

      <div class="col-md-6">
        <!--dasar ------------------------------->
        <div class="form-group" tal:define="field form['dasar']" id="item-${field.oid}">
          <label for="${field.oid}" class="control-label col-md-3" id="req-${field.oid}">
              ${field.title}<span id="error-${field.oid}" class="text text-danger"
                                  tal:condition="field.required">&nbsp*</span></label>
          <div class="col-md-9">
              ${structure:field.serialize()}
              <p id="error-${field.oid}" class="help-block" tal:condition="field.error"
                           tal:repeat="error field.error.messages()">
                           ${error}</p>          
          </div>
        </div>
        <!--tarif ------------------------------->
        <div class="form-group" tal:define="field form['tarif']" id="item-${field.oid}">
          <label for="${field.oid}" class="control-label col-md-3" id="req-${field.oid}">
              ${field.title}<span id="error-${field.oid}" class="text text-danger"
                                  tal:condition="field.required">&nbsp*</span></label>
          <div class="col-md-8">
              ${structure:field.serialize()}
              <script>
                  $("#${field.oid}").attr("readonly", true);
              </script>
              <p id="error-${field.oid}" class="help-block" tal:condition="field.error"
                           tal:repeat="error field.error.messages()">
                           *</p>
          </div>
        </div>
        <!--pokok ------------------------------->
        <div class="form-group" tal:define="field form['pokok']" id="item-${field.oid}">
          <label for="${field.oid}" class="control-label col-md-3" id="req-${field.oid}">
              ${field.title}<span id="error-${field.oid}" class="text text-danger"
                                  tal:condition="field.required">&nbsp*</span></label>
          <div class="col-md-9">
              ${structure:field.serialize()}
              <script>
                  $("#${field.oid}").attr("readonly", true);
              </script>
              <p id="error-${field.oid}" class="help-block" tal:condition="field.error"
                           tal:repeat="error field.error.messages()">
                           ${error}</p>
          </div>
        </div>
        <!--denda ------------------------------->
        <div class="form-group" tal:define="field form['denda']" id="item-${field.oid}">
          <label for="${field.oid}" class="control-label col-md-3" id="req-${field.oid}">
              ${field.title}<span id="error-${field.oid}" class="text text-danger"
                                  tal:condition="field.required">&nbsp*</span></label>
          <div class="col-md-9">
              ${structure:field.serialize()}
              <p id="error-${field.oid}" class="help-block" tal:condition="field.error"
                           tal:repeat="error field.error.messages()">
                           ${error}</p>
          </div>
        </div>
        <!--bunga ------------------------------->
        <div class="form-group" tal:define="field form['bunga']" id="item-${field.oid}">
          <label for="${field.oid}" class="control-label col-md-3" id="req-${field.oid}">
              ${field.title}<span id="error-${field.oid}" class="text text-danger"
                                  tal:condition="field.required">&nbsp*</span></label>
          <div class="col-md-9">
              ${structure:field.serialize()}
              <p id="error-${field.oid}" class="help-block" tal:condition="field.error"
                           tal:repeat="error field.error.messages()">
                           ${error}</p>          </div>
          <p id="error-${field.oid}" class="help-block" tal:condition="field.error"
                       tal:repeat="error field.error.messages()">
                       ${error}</p>
        </div>
        <!--jumlah ------------------------------->
        <div class="form-group" tal:define="field form['jumlah']" id="item-${field.oid}">
          <label for="${field.oid}" class="control-label col-md-3" id="req-${field.oid}">
              ${field.title}<span id="error-${field.oid}" class="text text-danger"
                                  tal:condition="field.required">&nbsp*</span></label>
          <div class="col-md-9">
              ${structure:field.serialize()}
              <script>
                  $("#${field.oid}").attr("readonly", true);
              </script>
              <p id="error-${field.oid}" class="help-block" tal:condition="field.error"
                           tal:repeat="error field.error.messages()">
                           ${error}</p>          </div>
          
        </div> 
      </div> 
    </div>
    
    <div class="form-group">
      <div class="col-md-6">
        <!--Button ------------------------------->
        <div class="form-group">
          <label class="control-label col-md-3">
          </label>
          <div class="col-md-9">
              <button id="deformsave" name="simpan" type="submit" class="btn btn-primary "
                  value="simpan">Simpan</button>
              <button id="deformcancel" name="batal" type="submit" class="btn btn-danger "
                value="batal">Batal</button>       
          </div>
        </div> 
      </div>
    </div>
    <script>
        //Untuk headof OPD
        $('#unit_nm').typeahead({
            "hint"     : true,
            "highlight": true,
            "minLength": 1,
            "limit"    : 15,
            "remote"   : "/skpd/hon_fast/act?term=%QUERY",
        },{
            "name"      : 'unit_nm',
            "displayKey": 'value',
        });    

        $('#unit_nm').bind('typeahead:selected', function(obj, datum, name) {  
            $('#unit_id').val(datum.id);
        });

        $('#dasar').keyup(function(){
           var dasar  = this.value.length;
           if(dasar > 0){
               //alert(dasar);
               var _dasar = $('#dasar').val();
               var _dasarr = parseFloat(_dasar.replace(/[^0-9-.]/g,''));
               var _tarif = $('#tarif').val();
               var _denda = $('#denda').val();
               var _bunga = $('#bunga').val();
               
               var _pokok;
               _pokok = (_dasarr * _tarif / 100)
               $('#pokok').val(_pokok);
               
               var _dendaa = parseFloat(_denda.replace(/[^0-9-.]/g,''));
               var _bungaa = parseFloat(_bunga.replace(/[^0-9-.]/g,''));
               var x;
               x = _dendaa + _bungaa
               var _jumlah;
               _jumlah = _pokok + x
               $('#jumlah').val(_jumlah);
            }
        });
       
        $('#denda').keyup(function(){
           var denda  = this.value.length;
           if(denda > 0){
               //alert(denda);
               var _denda = $('#denda').val();
               var _dendaa = parseFloat(_denda.replace(/[^0-9-.]/g,''));
               var _pokok = $('#pokok').val();
               var _pokon = parseInt(_pokok);
               var _bunga = $('#bunga').val();
               
               var _bungaa = parseFloat(_bunga.replace(/[^0-9-.]/g,''));
               var _bungab = parseInt(_bungaa);
               var x;
               x = _dendaa + _pokon
               var _jumlah;
               _jumlah = _bungab + x
               $('#jumlah').val(_jumlah);
            }
        });
       
        $('#bunga').keyup(function(){
           var bunga  = this.value.length;
           if(bunga > 0){
               //alert(bunga);
               var _bunga = $('#bunga').val();
               var _bungaa = parseFloat(_bunga.replace(/[^0-9-.]/g,''));
               var _pokok = $('#pokok').val();
               var _pokon = parseInt(_pokok);
               var _denda = $('#denda').val();
               
               var _dendaa = parseFloat(_denda.replace(/[^0-9-.]/g,''));
               var _dendab = parseInt(_dendaa);
               var x;
               x = _dendab + _bungaa + _pokon
               var _jumlah;
               _jumlah = x
               $('#jumlah').val(_jumlah);
            }
        });
    </script>
  </fieldset>
</form>

</div>
</html>