<h1>Open Cashier</h1>
<br>

<div class="row">
  <div class="col-md-4">
      <table class='table table-striped'>
        <tr>
          <th>Cashier Terminal</th>
          <th>
            <select class='form-control' id='cashier_terminal'>
              <% @terminal.each do |ter| %>
                <option value="<%= ter.id %>"><%= ter.name %></option>
              <% end %>
            </select>
          </th>
        </tr>
        <% @float.each do |float| %>
        <tr>
          <th><%= float.name %></th>
          <th><input class='float-value' type='text' data-value ="<%= float.value %>" value='0' id='<%= float.value %>'></input></th>
        </tr>
        <% end %>
        <tr>
          <th>Total</th>
          <th><div id='total'></div></th>
        </tr>
      </table>

  </div>
    <div class='col-md-8'>
      <div class="row">
         <div class="col-lg-6 col-md-1 col-sm-1">
           <div class="row bottom">
             <div class=" cashier_number " data-value="1" data-type="num">1</div>
             <div class=" cashier_number left" data-value="2" data-type="num">2</div>
             <div class=" cashier_number left" data-value="3" data-type="num">3</div>
           </div>
           <div class="row bottom">
             <div class=" cashier_number " data-value="4" data-type="num">4</div>
             <div class=" cashier_number left" data-value="5" data-type="num">5</div>
             <div class=" cashier_number left" data-value="6" data-type="num">6</div>
           </div>
           <div class="row bottom">
             <div class=" cashier_number " data-value="7" data-type="num">7</div>
             <div class=" cashier_number left" data-value="8" data-type="num">8</div>
             <div class=" cashier_number left" data-value="9" data-type="num">9</div>
           </div>
           <div class="row bottom">
             <div class=" cashier_number " data-value="0" data-type="num">0</div>
             <div class=" cashier_number left" data-value="." data-type="num">.</div>
             <div class=" cashier_number left" data-value="00" data-type="num">00</div>
           </div>
           <div class="row bottom">
             <div class=" cashier_number orange " data-type="clr">Clr</div>
             <div class=" cashier_number left" data-type='ent' >Calculate</div>
             <div class=" cashier_number purple left" id="open_cashier">Open Cashier</div>
           </div>
         </div>

      </div>
  </div>
</div>

<script>

var float_value = ""
var total = 0

$(document).on('focusout', '.float-value', function(event){
 float_value = $(this).attr("data-value");
 $(document).on('click', '.cashier_number', function(event){
   if(event.handled !== true) {
       var input_type = $(this).attr("data-type");
       switch (input_type) {
         case 'num':
         var input_value = $(this).attr("data-value");
           var original = $('#'+float_value).val();
           if (original == "0"){
               $('#'+float_value).val(input_value);
           }else{
               $('#'+float_value).val(original + input_value);
           }
         break;
         case 'clr':
            $('#'+float_value).val("0");
         break;
         case 'ent':
            var sum = 0
            <%
              sum = 0
              @float.each do |float|
                %>
                  var float = "<%= float.value %>"
                  console.log(float)
                  var cal = $('#'+ float).val() * float
                  sum += cal;
                <%
              end
            %>
            total = sum
            $('#total').text(total)
         break;
     }
       event.handled = true;
     } else {
         return false;
     }
 });
})

$('#open_cashier').on('click',function(){
  var cashier_terminal = $('#cashier_terminal').val();
  var amount = $('#total').text();
  $.ajax({type: "POST",
    url: "<%= origami_shifts_path  %>",
    data: "opening_balance=" + amount + "&cashier_terminal="+ cashier_terminal,
    success:function(result){
      if(result){
        window.location.href = '/origami';
     }
    }
  });
})
</script>
