sx-fc/app/views/settings/dining_charges/_form.html.erb

<div class="row">
  <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8">
    <%= simple_form_for([:settings,@zone,@settings_dining_facility,@dining_charge]) do |f| %>
      <%= f.error_notification %>

      <div class="form-inputs p-l-15">
        <%= f.input :item_code, :input_html => { :id => 'item_code',:class=>"col-md-9" } %>
        <%= f.input :unit_price, :input_html => { :id => 'unit_price',:class=>"col-md-9"} %>
        <%= f.input :taxable, :input_html => {:class=>"col-md-9"} %>
        <%= f.input :charge_type, :collection => [:hr, :day], :input_html => {:class=>"col-md-8"} %>
        <!--<%= f.input :minimum_free_time ,:input_html => { :class => 'timepicker'} %> -->
            <label class="control-label">* Minimum Free Time</label>
            <div class="input-group">
              <span class="input-group-addon">
                <i class="material-icons">access_time</i>
              </span>
                <% if !@dining_charge.minimum_free_time.nil?%>
                  <input type="text" name="dining_charge[minimum_free_time]" value="<%= @dining_charge.minimum_free_time.utc.strftime('%H:%M') %>" class="timepicker form-control col-md-8" placeholder="Free Time(hh:mm)...">
                <% else %>
                   <input type="text" name="dining_charge[minimum_free_time]" class="timepicker form-control col-md-8" placeholder="Free Time(hh:mm)...">
                <% end %>
            </div>         
        <!--<%= f.input :charge_block, :input_html => { :id => 'charge_block'} %>-->
       <div class="form-group">
          <label class="control-label required"> Charges Block</label>
          <div class="input-group">
            <span class="input-group-addon">
              <i class="material-icons">access_time</i>
            </span>
            <% if !@dining_charge.charge_block.nil?%>
            <input type="text" name="dining_charge[charge_block]" value="<%= @dining_charge.charge_block.utc.strftime('%H:%M') %>" class="timepicker form-control col-md-8" placeholder="Time for Charges(hh:mm)...">
            <% else %>
            <input type="text" name="dining_charge[charge_block]" class="timepicker form-control col-md-8" placeholder="Time for Charges(hh:mm)...">
            <% end %>
          </div> 
       </div>
        <%= f.input :time_rounding, :collection => [:down, :up], :input_html => { :class=>"col-md-8"} %>
       <!-- <%= f.input :time_rounding_block, :input_html => { :id => 'time_rounding_block'} %>-->
       <div class="form-group">
         <label class="control-label required"> Time Rounding Block</label>
          <div class="input-group">
            <span class="input-group-addon">
              <i class="material-icons">access_time</i>
            </span>
            <% if !@dining_charge.time_rounding_block.nil?%>
            <input type="text" name="dining_charge[time_rounding_block]" value="<%= @dining_charge.time_rounding_block.utc.strftime('%H:%M') %>" class="timepicker form-control col-md-8" placeholder="Rounding Time...">
            <% else %>
            <input type="text" name="dining_charge[time_rounding_block]" class="timepicker form-control col-md-8" placeholder="Rounding Time...">
            <% end %>
          </div> 
       </div>
        <%= f.input :time_rounding_block_price, :input_html => { :id => 'time_rounding_block_price',:class=>"col-md-8"} %>
      </div>

      <div class="form-actions p-l-15">
        <%= f.submit "Create",:class => 'btn btn-primary btn-lg waves-effect' %>
      </div>
    <% end %>
  </div>
  <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
    <div class="card">
      <div class="body">
        <h5><i class="material-icons md-18">view_headline <%= t("views.right_panel.header.page_detail") %></i></h5>
        <p>
        1) <%= t("views.right_panel.detail.item_code") %> - <%= t("views.right_panel.detail.item_code_txt") %> <%= t("views.right_panel.detail.extra_charges_txt") %> <br> 
        2) <%= t("views.right_panel.detail.unit_price") %> - <%= t("views.right_panel.detail.write_txt") %> <%= t("views.right_panel.detail.price_txt") %> <%= t("views.right_panel.detail.for") %> <%= t("views.right_panel.detail.extra_charges_txt") %> <br>
        3) <%= t("views.right_panel.detail.taxable") %> - <%= t("views.right_panel.detail.checkbox") %> <%= t("views.right_panel.detail.for") %> <%= t("views.right_panel.detail.taxable_txt") %> <br>
        4) <%= t("views.right_panel.detail.charge_type") %> - <%= t("views.right_panel.detail.write_txt") %> <%= t("views.right_panel.detail.type_txt") %> <br>
        5) <%= t("views.right_panel.detail.minimum_free_time") %> - <%= t("views.right_panel.detail.minimum_free_time_txt") %> <br>
        6) <%= t("views.right_panel.detail.charge_block") %> - <%= t("views.right_panel.detail.charge_txt") %> <%= t("views.right_panel.detail.for") %> <%= t("views.right_panel.detail.block_txt") %> <br>
        7) <%= t("views.right_panel.detail.time_rounding") %> - <%= t("views.right_panel.detail.time_rounding_txt") %> <br>
        8) <%= t("views.right_panel.detail.time_rounding") %> <%= t("views.right_panel.detail.block_txt") %> - <%= t("views.right_panel.detail.time_rounding_txt") %> <%= t("views.right_panel.detail.for") %> <%= t("views.right_panel.detail.block_txt") %> <br>
        9) <%= t("views.right_panel.detail.time_rounding") %> <%= t("views.right_panel.detail.block_txt") %> <%= t("views.right_panel.detail.price_txt") %> - <%= t("views.right_panel.detail.write_txt") %> <%= t("views.right_panel.detail.price_txt") %> <%= t("views.right_panel.detail.for") %> <%= t("views.right_panel.detail.time_rounding_txt2") %><br>
        </p>
        <h5><i class="material-icons md-18">list <%= t("views.right_panel.header.button_lists") %></i> </h5>
        <p>
        1) <%= t("views.right_panel.button.create") %> - <%= t("views.right_panel.detail.create_btn_txt") %> <%= t("views.right_panel.detail.extra_charges_txt") %> <br>
        </p>
        <h5><i class="material-icons md-18">list <%= t("views.right_panel.header.link_lists") %></i> </h5>
        <p>
          1) <%= t("views.right_panel.button.home") %> - <%= t("views.right_panel.detail.home_txt") %> <br>
          2) <%= t("views.right_panel.button.back") %> - <%= t("views.right_panel.detail.back_txt") %> <%= t("views.right_panel.detail.zone_txt") %> <%= t("views.right_panel.detail.detail_txt") %> <br>
        </p>
      </div>
    </div>  
  </div>
</div>

<script>

function price(){
    var unit_price = $("#unit_price").val();

    var time_rounding_block = $("input[name='dining_charge[time_rounding_block]']").val();
    var charge_block = $("input[name='dining_charge[charge_block]']").val();
    var rounding = time_rounding_block.split(':');
    var charge_block_time = charge_block.split(':');
    var time1=(parseInt(rounding[0])*60)+parseInt(rounding[1]);
    var time2=(parseInt(charge_block_time[0])*60)+parseInt(charge_block_time[1]);

    // var hour1 = $("select[name='dining_charge[time_rounding_block(4i)]']").val();
    // var min1 = $("select[name='dining_charge[time_rounding_block(5i)]']").val();
    // var time1=(parseInt(hour1)*60)+parseInt(min1);

    // var hour2 = $("select[name='dining_charge[charge_block(4i)]']").val();
    // var min2 = $("select[name='dining_charge[charge_block(5i)]']").val();
    // var time2=(parseInt(hour2)*60)+parseInt(min2);

    var result=(unit_price*time1)/time2;
    $("#time_rounding_block_price").val(result);
    return result;
}


$( "#unit_price" ).change(function() {
  price();
});
$("input[name='dining_charge[time_rounding_block]']").change(function() {
  price();
});
$("input[name='dining_charge[time_rounding_block]']").change(function() {
  price();
});
$("input[name='dining_charge[charge_block]']").change(function() {
  price();
});
$("input[name='dining_charge[charge_block]']").change(function() {
  price();
});
$(document).on('turbolinks:load', function() {
  $('body').bootstrapMaterialDesign();
});
</script>