<html metal:use-macro="load: ../base.pt">
<div metal:fill-slot="content">
<h4>Tambah Penerimaan</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 class="col-md-9" tal:condition="'id' in form">
      <div tal:define="field form['id']">
        ${structure:field.serialize()}
        
      </div>
    </div>
    <div class="col-md-6">
        <!--arinvoice_id ------------------------------->
        <div tal:define="field form['arinvoice_id']">
        ${structure:field.serialize()}
        </div>
        <!--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">
            <div class="input-group">
                ${structure:field.serialize()}
              <span class="input-group-btn">
              <button id="deformcari" name="cari" type="submit" class="btn btn-primary btn-xs"
                    value="cari">Cari</button>
              </span>
              <script>
                 $("#${field.oid}").keypress(function() {
                    $("#unit_nama").val("");
                    $("#rek_nama").val("");
                    $("#wp_nama").val("");
                    $("#op_nama").val("");
                    $("#pokok").val("0");
                    $("#denda").val("0");
                    $("#bunga_awal").val("0");
                    $("#jumlah").val("0");
                    $("#bank_id").val("");
                    $("#channel_id").val("");
                    $("#ntb").val("");
                    $("#ntp").val("");
                    $("#periode_1").val("");
                    $("#periode_2").val("");
                    $("#tgl_tetap").val("");
                    $("#jatuh_tempo").val("0");
                    $("#bunga").val("0");
                    $("#bayar").val("0");
                  } 
                 ); 
              </script>
            </div>
          </div><!-- /input-group -->
        </div>
        <!--unit_nama ------------------------------->
        <div class="form-group" tal:define="field form['unit_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()}
              <script>
                  $("#${field.oid}").attr("readonly", true);
              </script>
          </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()}
              <script>
                  $("#${field.oid}").attr("readonly", true);
              </script>
          </div>
        </div> 
        <!--op_nama ------------------------------->
        <div class="form-group" tal:define="field form['op_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()}
              <script>
                  $("#${field.oid}").attr("readonly", true);
              </script>
          </div>
        </div> 
        <!--rek_nama ------------------------------->
        <div class="form-group" tal:define="field form['rek_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()}
              <script>
                  $("#${field.oid}").attr("readonly", true);
              </script>
          </div>
        </div> 
		<!--Bank & Channel ------------------------------->
        <div class="form-group" tal:define="field form['bank_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-3">
              ${structure:field.serialize()}
              <script>
                  $("#${field.oid}").attr("readonly", true);
              </script>
          </div>
          <div class="control-label col-md-3">
          Channel
          </div>
          <div class="col-md-3" tal:define="field form['channel_id']">
              ${structure:field.serialize()}
              <script>
                  $("#${field.oid}").attr("readonly", true);
              </script>
          </div> 
        </div>
		<!--NTB & NTP ------------------------------->
        <div class="form-group" tal:define="field form['ntb']" 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()}
              <script>
                  $("#${field.oid}").attr("readonly", true);
              </script>
          </div>
          <div class="control-label col-md-1">
          NTP
          </div>
          <div class="col-md-4" tal:define="field form['ntp']">
              ${structure:field.serialize()}
              <script>
                  $("#${field.oid}").attr("readonly", true);
              </script>
          </div> 
        </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-3">
              ${structure:field.serialize()}
              <script>
                  $("#${field.oid}").attr("readonly", true);
              </script>
          </div>
          <div class="control-label col-md-3">
          s.d
          </div>
          <div class="col-md-3" tal:define="field form['periode_2']">
              ${structure:field.serialize()}
              <script>
                  $("#${field.oid}").attr("readonly", true);
              </script>
          </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-3">
              ${structure:field.serialize()}
              <script>
                  $("#${field.oid}").attr("readonly", true);
              </script>
          </div>
        <!--jatuh_tempo ------------------------------->
          <div 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-3">
                ${structure:field.serialize()}
              <script>
                  $("#${field.oid}").attr("readonly", true);
              </script>
            </div>
          </div>
        </div>        
    </div>

    <div class="col-md-6">
        <!--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-3">
                ${structure:field.serialize()}
                <script>
                    $("#${field.oid}").attr("readonly", true);
                </script>
            </div>
            <div tal:define="field form['denda']" id="item-${field.oid}">
            <label for="${field.oid}" class="control-label col-md-2" 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-3">
                ${structure:field.serialize()}
                <script>
                    $("#${field.oid}").attr("readonly", true);
                </script>
            </div>
            </div>
        </div> 
        <!--bunga_awal ------------------------------->
        <div class="form-group" tal:define="field form['bunga_awal']" 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-3">
                ${structure:field.serialize()}
                <script>
                    $("#${field.oid}").attr("readonly", true);
                </script>
            </div>
            
            <div tal:define="field form['jumlah']" id="item-${field.oid}">
            <label for="${field.oid}" class="control-label col-md-2" 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-3">
                ${structure:field.serialize()}
                <script>
                    $("#${field.oid}").attr("readonly", true);
                </script>
            </div>
            </div>
        </div>
        
        <div class="form-group">
            <label class="control-label col-md-3">
                PEMBAYARAN</label>
        </div> 
        <!--tgl_bayar ------------------------------->
        <div class="form-group" tal:define="field form['tgl_bayar']" 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()">
                            *</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()}
            </div>
        </div>
        <!--bayar ------------------------------->
        <div class="form-group" tal:define="field form['bayar']" 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()">
                            *</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">Bayar</button>
                <button id="deformcancel" name="batal" type="submit" class="btn btn-default "
                    value="batal">Batal</button>
            </div>
        </div>
    </div>
    </div> 
  </fieldset>
</form>

</div>
</html>