sx-fc/app/views/origami/discounts/index.html.erb

 <div class="row">
  <!-- Column One -->
  <div class="col-lg-6 col-md-6 col-sm-6">

    <!-- Order Details -->
    <div class="card"  >
        <div class="card-header">
          <p id="sale-id" class="hidden"><%=@sale_data.sale_id %></p>
          <div><strong id="order-title">ORDER DETAILS</strong></div>
        </div>
        <div class="card-block">
          <div class="card-title row">
            <div class="col-lg-6 col-md-6 col-sm-6">
              <p>Receipt No: <span id="receipt_no"><%=@sale_data.receipt_no rescue ' '%></span></p>
              <p>Cashier:  <span id="cashier"><%=@sale_data.cashier_name rescue ' '%></span></p>
            </div> 
            <div class="col-lg-6 col-md-6 col-sm-6 text-right">
              <p>Date:  <span id="receipt_date"> <%=@sale_data.receipt_date.strftime("%d/%m/%Y - %I:%M %p") rescue '-'%></span></p>
            </div>                
          </div>
          <div class="card-text">
            <table class="table table-striped" id="order-items-table">
              <thead>
                <tr>
                  <th class="item-name">Items</th>
                  <th class="item-attr">QTY</td>
                  <th class="item-attr">Price</td>
                </tr>
              </thead>
              <tbody>
                <% sub_total = 0 %>
	            <% @sale_data.sale_items.each do |sale_item| %>
	          		<% sub_total += sale_item.qty*sale_item.unit_price%>
	            	<tr>
	                    <td style="width:60%; text-align:left">
	                       <span id="item-name-price"><%=sale_item.product_name%>@<%=sale_item.unit_price%></span>
	                    </td>
	                    <td style="width:20%; text-align:right">
	                      <span id="item-qty"><%=sale_item.qty%></span>
	                    </td>
	                    <td style="width:20%; text-align:right">
	                       <span id="item-total-price"><%=(sale_item.qty*sale_item.unit_price)%></span>
	                    </td>
	                  </tr>
	            <%end %>
              </tbody>
            </table>
          </div>
          <div class="card-footer">
            <table class="table" id="order-charges-table" border="0">
              <tr>
                <td class="charges-name"><strong>Sub Total:</strong></td>
                <td class="item-attr"><strong id="order-sub-total"><%=sub_total%></strong></td>
              </tr>
              <tr>
                <td class="charges-name"><strong>Food:</strong></td>
                <td class="item-attr"><strong id="order-food"></strong></td>
              </tr>
              <tr>
                <td class="charges-name"><strong>Beverage:</strong></td>
                <td class="item-attr"><strong id="order-beverage"></strong></td>
              </tr>
              <tr>
                <td class="charges-name"><strong>Discount:</strong></td>
                <td class="item-attr"><strong id="order-discount">(<%=@sale_data.total_discount rescue 0%>)</strong></td>
              </tr>
              <tr>
                <td class="charges-name"><strong>Tax:</strong></td>
                <td class="item-attr"><strong id="order-Tax"><%=@sale_data.total_tax rescue 0%></strong></td>
              </tr>
              <tr>
                <td class="charges-name"><strong>Grand Total:</strong></td>
                <td class="item-attr"><strong id="order-grand-total"><%=@sale_data.grand_total rescue 0%></strong></td>
              </tr>
            </table>
          </div>
        </div>
      </div> 
  </div>
  <!-- Column One -->

  <!-- Column Two -->
  <div class="col-lg-6 col-md-6 col-sm-6">
	<!-- Discount Amount -->
    <div class="card row">
        <div class="card-header">
          <div><strong id="order-title">Pay Discount</strong></div>
        </div>
        <div class="card-block">
			<div class="card-title">
				<div class="form-horizontal">								
					<div class="form-group">
						<div class="col-md-3">
							<select name="discount_type" id="discount-type" class="form-control">
								<option value=0 >Net</option>
								<option value=1 >Percentage</option>
							</select>
						</div>
						<div class="col-md-9">
							<input type="text" id="discount-amount" name="discount-amount" value="<%= @sale_data.total_discount rescue 0 %>" class="form-control" />	
						</div>									
					</div>			
					<button id="pay-discount" class="btn btn-primary long">Discount</button>
				</div>					
			</div>

			<hr />

	      	<div class="col-md-12">         
	         <div class="row">
	           <div class="col-md-7">
	              <div class="row">
	                 <div class="col-md-3 cashier_number" data-value="1" data-type="num">1</div>
	                 <div class="col-md-3 cashier_number" data-value="2" data-type="num">2</div>
	                 <div class="col-md-3 cashier_number" data-value="3" data-type="num">3</div>
	              </div>
	            </div>
	           <div class="col-md-5">
	              <div class="col-md-12 cashier_number long" data-value="500" data-type="add">500</div>
	           </div>
	         </div>

	         <div class="row">
	           <div class="col-md-7">
	             <div class="row">
	                <div class="col-md-3 cashier_number" data-value="4" data-type="num">4</div>
	                <div class="col-md-3 cashier_number" data-value="5" data-type="num">5</div>
	                <div class="col-md-3 cashier_number" data-value="6" data-type="num">6</div>
	             </div>
	           </div>
	           <div class="col-md-5">
	             <div class="col-md-12 cashier_number long" data-value="1000" data-type="add">1000</div>
	           </div>
	         </div>

	         <div class="row">
	            <div class="col-md-7">
	              <div class="row">
	                 <div class="col-md-3 cashier_number" data-value="7" data-type="num">7</div>
	                 <div class="col-md-3 cashier_number" data-value="8" data-type="num">8</div>
	                 <div class="col-md-3 cashier_number" data-value="9" data-type="num">9</div>
	              </div>
	            </div>
	            <div class="col-md-5">
	                <div class="col-md-12 cashier_number long" data-value="5000" data-type="add">5000</div>
	            </div>
	         </div>

	          <div class="row">
	             <div class="col-md-7">
	               <div class="row">
	                  <div class="col-md-3 cashier_number" data-value="0" data-type="num">0</div>
	                  <div class="col-md-3 cashier_number" data-value="." data-type="num">.</div>
	                  <div class="col-md-3 cashier_number" data-value="00" data-type="num">00</div>
	               </div>
	             </div>
	             <div class="col-md-5">
	                <div class="col-md-12 cashier_number long" data-value="10000" data-type="add">10000</div>
	             </div>
	          </div>

	          <div class="row">
	             <div class="col-md-7">
	               <div class="row">
	                 <div class="col-md-3 cashier_number"></div>
	                 <div class="col-md-3 cashier_number red" data-type="del">DEL</div>
	                 <div class="col-md-3 cashier_number green" data-type="clr">CLR</div>
	               </div>
	             </div>
	             <div class="col-md-5">
	                <div class="col-md-12 cashier_number long" data-value="50000" data-type="add">50000</div>
	             </div>
	          </div>
	      	</div>        
        </div>
    </div>
  </div>    
</div>