<div class="container-fluid">
  <div class="row">
    <div class="col-xs-12 col-sm-12 col-md-7 col-lg-7">
      <div class="card">
        <%= simple_form_for(@survey, :url => origami_create_surveys_path) do |f| %>
        <%= f.error_notification %>
        <div class="form-inputs p-l-10">

          <%= f.input :child , input_html: { class: 'col-md-10' }%>
          <%= f.input :adult , input_html: { class: 'col-md-10' }%>
          <%= f.input :male , input_html: { class: 'col-md-10' }%>
          <%= f.input :female , input_html: { class: 'col-md-10' }%>
          <%= f.input :total_customer, input_html: { class: 'col-md-10'} %>
          <%= f.input :local , input_html: { class: 'col-md-10' }%>

          <div class="row clearfix">
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 ">
              <div class="form-group p-l-10 p-r-10">
               <label class="p-l-10">Foreigner</label>
               <!-- <input type="text" class="form-control" name="survey[foreigner][]"> -->
               <select class="form-control col-md-12 selectpicker  show-tick" name="survey[foreigner][]" style="height: " >
                <%  Lookup.where("lookup_type = ?", "country" ).each do |ct| %>
                <option value="<%= ct.value %>">
                  <%= ct.name %></option>
                  <%end %>
                </select>
              </div>
            </div>
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 ">
              <div class="form-group p-l-10 p-r-10">
                <label class="p-l-10">Number</label>
                <input type="number"  name="survey[foreigner][]" class="form-control">
              </div>
            </div>
            <div class="col-lg-1 col-md-1 col-sm-1 col-xs-1 ">
             <br>
             <button type="button" class="btn btn-success" id="addForeigner">Add</button>
           </div>
         </div>
         <div class="hidden" id="newTemplate" >

         </div>

         <input type="hidden" name="table_id" value="<%=@dining_facility.id%>">
         <%= f.input :dining_name, :as => :hidden, :input_html => { :value => @dining_facility.name } %>
         <%= f.input :created_by, :as => :hidden, :input_html => { :value => current_login_employee.name } %>
         <%= f.input :receipt_no, :as => :hidden, :input_html => { :value => @receipt_no} %>
         <%= f.input :total_amount, :as => :hidden, :input_html => { :value => @grand_total } %>
       </div>
       <div class="form-actions">
        <%= f.submit "Submit",:class => 'btn btn-primary btn-lg waves-effect' %>
      </div>
      <% end %>
    </div>
    </div>
  <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
    <div class="card">
      <div class="row">
      <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
        <div class="p-l-70 m-b-10 m-t-10">
          <div class="row bottom">
          <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 m-l--5">
              <div class="row m-l--5">
                <div class="col-md-3 left cashier_number" data-value="1" data-type="num">1</div>
                <div class="col-md-3 left cashier_number" data-value="2" data-type="num">2</div>
                <div class="col-md-3 left cashier_number" data-value="3" data-type="num">3</div>
              </div>
            </div>
          </div>

          <div class="row bottom">
          <div class="col-md-12 m-l--5">
              <div class="row m-l--5">
                <div class="col-md-3 left cashier_number" data-value="4" data-type="num">4</div>
                <div class="col-md-3 left cashier_number" data-value="5" data-type="num">5</div>
                <div class="col-md-3 left cashier_number" data-value="6" data-type="num">6</div>
              </div>
            </div>
          </div>

          <div class="row bottom">
          <div class="col-md-12 m-l--5">
              <div class="row m-l--5">
                <div class="col-md-3 left cashier_number" data-value="7" data-type="num">7</div>
                <div class="col-md-3 left cashier_number" data-value="8" data-type="num">8</div>
                <div class="col-md-3 left cashier_number" data-value="9" data-type="num">9</div>
              </div>
            </div>
          </div>

          <div class="row bottom">
          <div class="col-md-12 m-l--5">
              <div class="row m-l--5">
                <div class="col-md-3 left cashier_number" data-value="0" data-type="num">0</div>
                <div class="col-md-3 left cashier_number" data-value="." data-type="num">.</div>
                <div class="col-md-3 left cashier_number" data-value="00" data-type="num">00</div>
              </div>
            </div>
          </div>

          <div class="row bottom">
          <div class="col-md-12 m-l--5">
              <div class="row m-l--5">
                <div class="col-md-3 left cashier_number"></div>
                <div class="col-md-3 left cashier_number red" data-type="del">DEL</div>
                <div class="col-md-3 left cashier_number green" data-type="clr">CLR</div>
              </div>
            </div>
          </div>  
        </div>              
      </div>
    </div> 
    </div> 
  </div>
  <div class="col-xs-12 col-sm-12 col-md-3 col-lg-3 hidden">
    <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.title") %> - <%= t("views.right_panel.detail.write_txt") %> <%= t("views.right_panel.detail.title_txt") %> <br>
          2) <%= t("views.right_panel.detail.account_type") %> - <%= t("views.right_panel.detail.write_txt") %> <%= t("views.right_panel.detail.account_type_txt") %> <br>
          3) <%= t("views.right_panel.detail.discount") %> - <%= t("views.right_panel.detail.checkbox") %> <%= t("views.right_panel.detail.for") %> <%= t("views.right_panel.detail.discount_txt") %> <br>
          4) <%= t("views.right_panel.detail.point") %> - <%= t("views.right_panel.detail.checkbox") %> <%= t("views.right_panel.detail.for") %> <%= t("views.right_panel.detail.point_txt") %> <br>
          5) <%= t("views.right_panel.detail.bonus") %> - <%= t("views.right_panel.detail.checkbox") %> <%= t("views.right_panel.detail.for") %> <%= t("views.right_panel.detail.bonus_txt") %> <br>
          6) <%= t("views.right_panel.detail.rebate") %> - <%= t("views.right_panel.detail.checkbox") %> <%= t("views.right_panel.detail.for") %> <%= t("views.right_panel.detail.rebate_txt") %> <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.submit") %> - <%= t("views.right_panel.detail.submit_btn_txt") %> <%= t("views.right_panel.detail.account_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.account_txt") %> <br>
        </p>
      </div>
    </div>  
  </div>
  <div class="col-lg-1 col-md-1 col-sm-1">
   <button type="button" class="btn btn-default btn-block" id='back'><i class="material-icons">reply</i>Back</button>
 </div>

</div>

</div>

<script type="text/javascript">
  $(document).ready(function(){
    //click add button for new row
    $('#addForeigner').on('click',function(){
        $('#newTemplate').removeClass('hidden');

        var text_box = '<div id="newRow" class="row clearfix">'
                          +'<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 ">'
                            +'<div class="form-group p-l-10 p-r-10">'
                             +' <select class="form-control col-md-12 selectpicker  show-tick" '
                                +' name="survey[foreigner][]" style="height: " >'
                                +'<%  Lookup.where("lookup_type = ?", "country" ).each do |ct| %>'
                                +'<option value="<%= ct.value %>">'
                                  +'<%= ct.name %></option>'
                                  +'<%end %>'
                                +'</select>'
                            +'</div>'
                          +'</div>'
                          +'<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 ">'
                            +'<div class="form-group p-l-10 p-r-10">'
                             +'<input type="number"  name="survey[foreigner][]" class="form-control">'
                            +'</div>'
                          +'</div>'
                          +'<div class="col-lg-1 col-md-1 col-sm-1 col-xs-1 ">'
                            +'<button type="button" class="btn btn-danger" id="removeRow">Remove</button>'
                          +'</div>'
                         +'</div>';
        $('#newTemplate').append(text_box);
    });

    //click remove buttom 
    $('#newTemplate').on('click','#removeRow', function(){
      $(this).parent().parent().remove()
    });

    $( "input" ).focusin(function() {
      $('.addfocus').removeClass('addfocus'); 
      $( this ).addClass('addfocus');
    });

    $(".cashier_number").on('click', function(event){
      if(event.handled !== true) {
        
        var original_value='';
        original_value = $('.addfocus').val();

        var input_type = $(this).attr("data-type");

        switch (input_type) {
          case 'num':
          var input_value = $(this).attr("data-value");
          if (original_value == "0.0"){
            $('.addfocus').val(input_value);            
          }
          else{
            $('.addfocus').val(original_value + '' + input_value);            
          }
          break;

          case 'add':
          var input_value = $(this).attr("data-value");
          amount = parseInt(input_value);
          $('.addfocus').val(amount);                   
          break;

          case 'del' :
          var discount_text=$('.addfocus').val();
          $('.addfocus').val(discount_text.substr(0,discount_text.length-1));   
          break;

          case 'clr':
          $('.addfocus').val("");              
          break;
        }
        event.handled = true;
      } else {
        return false;
      }
    });

    // click back button for redirect
    $('#back').on('click',function(){
      table_type    = '<%=@table_type%>';
      table_id      = '<%=@dining_facility.id%>';
        if(table_type == "Table"){
          window.location.href = "/origami/table/" + table_id
        }
        else {
          window.location.href = "/origami/room/" + table_id
        }
    });

  });
</script>