<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">
          <% if !@survey_data.nil? %>
            <div class="row clearfix">
              <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 ">
                <div class="form-group p-l-10 p-r-10">
                   <%= f.input :child, input_html: { value: @survey_data.child, class: 'col-md-10', :onChange => "total_customer();", :onkeypress => "return isNumberKey(event);", :onkeyup => "surveyChild(this.value);" }%>
                </div>
              </div>
              <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 ">
                <div class="form-group p-l-10 p-r-10">
                  <%= f.input :adult, input_html: { value: @survey_data.adult, class: 'col-md-10', :onChange => "total_customer();", :onkeypress => "return isNumberKey(event);", :onkeyup => "surveyAdult(this.value);" }%> 
                </div>
              </div>
            </div>  
            <div class="row clearfix">
              <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 ">
                <div class="form-group p-l-10 p-r-10">
                  <%= f.input :male , input_html: { value: @survey_data.male, class: 'col-md-10', :onkeypress => "return isNumberKey(event);", :onkeyup => "surveyMale(this.value);" }%> 
                </div>
              </div>
              <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 ">
                <div class="form-group p-l-10 p-r-10">
                  <%= f.input :female , input_html: { value: @survey_data.female, class: 'col-md-10', :onkeypress => "return isNumberKey(event);", :onkeyup => "surveyFemale(this.value);" }%>
                </div>
              </div>
            </div>   
            <%= f.input :total_customer, input_html: { value:@survey_data.total_customer , :readonly => true, class: 'col-md-11'} %>
            <%= f.input :local , input_html: { value: @survey_data.local, class: 'col-md-11', :onkeypress => "return isNumberKey(event);", :onkeyup => "surveyLocal(this.value);" }%>
            <!--<fieldset style="border: 1px solid #BDBDBD;padding: 20px; width: 92%;margin: 20px 0 20px 0;"> -->
              <!-- <legend style="font-size: 1.2em !important;font-weight: bold !important;text-align: left !important;border:none;width:100px;">Foreigner</legend> -->
            <fieldset style="border: 1px solid #BDBDBD;padding: 20px; width: 92%;margin: 20px 0 20px 0;">
              <legend style="font-size: 1.2em !important;font-weight: bold !important;text-align: left !important;border:none;width:100px;">Foreigner</legend>
              <div class="row clearfix foreignerDiv">
                <div class="col-lg-5 col-md-5 col-sm-5 col-xs-5">
                  <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-5 col-md-5 col-sm-5 col-xs-5 ">
                  <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>
            </fieldset>
          <% else %>
            <div class="row clearfix">
              <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 ">
                <div class="form-group p-l-10 p-r-10">
                  <%= f.input :child , input_html: { class: 'col-md-10' ,min:'1', :onChange => "total_customer();", :onkeypress => "return isNumberKey(event);", :onkeyup => "surveyChild(this.value);" }%>
                </div>
              </div>
              <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 ">
                <div class="form-group p-l-10 p-r-10">
                  <%= f.input :adult , input_html: { class: 'col-md-10' ,min:'1', :onChange => "total_customer();", :onkeypress => "return isNumberKey(event);", :onkeyup => "surveyAdult(this.value);" }%> 
                </div>
              </div>
            </div>  
            <div class="row clearfix">
              <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 ">
                <div class="form-group p-l-10 p-r-10">
                  <%= f.input :male , input_html: { min:'1',class: 'col-md-10' , :onkeypress => "return isNumberKey(event);", :onkeyup => "surveyMale(this.value);" }%> 
                </div>
              </div>
              <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 ">
                <div class="form-group p-l-10 p-r-10">
                  <%= f.input :female , input_html: { min:'1',class: 'col-md-10' , :onkeypress => "return isNumberKey(event);", :onkeyup => "surveyFemale(this.value);" }%> 
                </div>
              </div>
            </div>
            <%= f.input :total_customer, input_html: { :readonly => true,min:'1', class: 'col-md-11'} %>
            <%= f.input :local , input_html: { min:'1',class: 'col-md-11', :onkeypress => "return isNumberKey(event);", :onkeyup => "surveyLocal(this.value);" }%>

            <fieldset style="border: 1px solid #BDBDBD;padding: 20px; width: 92%;margin: 20px 0 20px 0;">
              <legend style="font-size: 1.2em !important;font-weight: bold !important;text-align: left !important;border:none;width:100px;">Foreigner</legend>
              <div class="row clearfix">
                <div class="col-lg-5 col-md-5 col-sm-5 col-xs-5 ">
                  <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-5 col-md-5 col-sm-5 col-xs-5 ">
                  <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>
            </fieldset>
          <% end %>
         
          <%if !@dining_facility.nil? %>
             <input type="hidden" name="table_id" id="table_id" value="<%= @dining_facility.id %>">
             <input type="hidden" name="table_type" id="table_type" value="<%= @table_type %>">
             <%= f.input :dining_name, :as => :hidden, :input_html => { :value => @dining_facility.name } %>
          <%else%>
            <input type="hidden" name="table_id" id="table_id" value="0">
            <input type="hidden" name="table_type" id="table_type" value="0">
            <%= f.input :dining_name, :as => :hidden, :input_html => { :value => 0 } %>
          <%end%>
          <input type="hidden" name="sale_id" value="<%=@id%>">
          <input type="hidden" name="cashier_type" value="<%=@cashier_type%>">

         <% if !@survey_data.nil? %>
          <input type="hidden" name="survey_id" value=<%= @survey_data.id %> />
         <% else %>
          <input type="hidden" name="survey_id" />
         <% end %>
         

         <%= 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 form-inputs p-l-10">
        <%= 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">

  function isNumberKey(evt) {
    var charCode = (evt.which) ? evt.which : event.keyCode;
    if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57)) {
      return false;
    } else {
      return true;
    }      
  }
  function surveyChild(val){
    var aa = parseInt(val);
    if(isNaN(aa)) $("#survey_child").val("");
  }
  function surveyAdult(val){
    var aa = parseInt(val);
    if(isNaN(aa)) $("#survey_adult").val("");
  }
  function surveyMale(val){
    var aa = parseInt(val);
    if(isNaN(aa)) $("#survey_male").val("");
  }
  function surveyFemale(val){
    var aa = parseInt(val);
    if(isNaN(aa)) $("#survey_female").val("");
  }
  function surveyLocal(val){
    var aa = parseInt(val);
    if(isNaN(aa)) $("#survey_local").val("");
  }

var cashier_type = "<%= @cashier_type %>"; 
  $(document).ready(function(){
    /* check webview loaded*/
    var webview = <%= @webview %>;
    showHideNavbar(webview);
      
    $('.foreignerDiv').removeClass("hidden");
    setHeaderBreadCrumb(_SURVEY_);
    <% if !@survey_data.nil? %>
      addSurveyForeignerLists(<%= @survey_data.foreigner.to_json.html_safe %>);
    <% end %>
    //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-5 col-md-5 col-sm-5 col-xs-5 ">'
                            +'<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-5 col-md-5 col-sm-5 col-xs-5 ">'
                            +'<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 add button for new row
    $('#newTemplate').on('click','#addForeigner',function(){
        $('#newTemplate').removeClass('hidden');

        var text_box = '<div id="newRow" class="row clearfix">'
                          +'<div class="col-lg-5 col-md-5 col-sm-5 col-xs-5 ">'
                            +'<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-5 col-md-5 col-sm-5 col-xs-5 ">'
                            +'<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"){
            var value = $('.addfocus').val(input_value);  
            if ($("#survey_child").hasClass('addfocus')){
              var child = $("#survey_child").val()+value;
              var adult = $("#survey_adult").val() || 0;
              var result = parseInt(child) + parseInt(adult);
              $("#survey_total_customer").val(result);
            }  
            if ($("#survey_adult").hasClass('addfocus')){
              var adult = $("#survey_adult").val()+value;
              var child = $("#survey_child").val() || 0;
              var result = parseInt(child) + parseInt(adult);
              $("#survey_total_customer").val(result);
            }        
          }
          else{
            var value = $('.addfocus').val(original_value + '' + input_value);  
            if ($("#survey_child").hasClass('addfocus')){
              var child = $("#survey_child").val()+value;
              var adult = $("#survey_adult").val() || 0;
              var result = parseInt(child) + parseInt(adult);
              $("#survey_total_customer").val(result);
            }   
            if ($("#survey_adult").hasClass('addfocus')){
              var adult = $("#survey_adult").val()+value;
              var child = $("#survey_child").val() || 0;
              var result = parseInt(child) + parseInt(adult);
              $("#survey_total_customer").val(result);
            }      
          }
          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(""); 
          if($("#survey_child").hasClass('addfocus')){
            $("#survey_child").val("");
            var adult = $("#survey_adult").val() || 0;
            var result = parseInt(adult);
            $("#survey_total_customer").val(result);
          }else if($("#survey_adult").hasClass('addfocus')){
            $("#survey_adult").val("");
            var child = $("#survey_child").val() || 0;
            var result = parseInt(child);
            $("#survey_total_customer").val(result);
          }              
          break;
        }
        event.handled = true;
      } else {
        return false;
      }
    });
    // click back button for redirect
    $('#back').on('click',function(){
      var table_type    = $('#table_type').val();
      var table_id      = $('#table_id').val();

      if (cashier_type == "quick_service" || cashier_type == "food_court") {
        window.location.href = '/origami/sale/<%= @id %>/<%= @cashier_type %>/payment/';
      }else{
        if(table_type == "Table"){
          window.location.href = "/origami/table/" + table_id;
        }
        else {
          window.location.href = "/origami/room/" + table_id;
        }
      }
    });

  });

  function addSurveyForeignerLists(foreigner_lists){
    if((foreigner_lists != undefined) && (foreigner_lists != null) && (foreigner_lists != "")){
      $('.foreignerDiv').remove();
      $('#newTemplate').removeClass('hidden');
      foreigner_lists = foreigner_lists.substring(1, (foreigner_lists.length - 1)).replace(new RegExp('"', "g"),'').split(",");
      var arr_foreigner = {};
      $.each(foreigner_lists,function(key,value){
        if(!value.match(/^[0-9]+$/)){
          arr_foreigner[value] = 0;
        }else{
          $.each(arr_foreigner,function(k,val){
            if(arr_foreigner[k] == 0){
              arr_foreigner[k] = value;
            }
          });
        }
      });

      // console.log(foreigner_lists);
      // console.log(arr_foreigner);
      $.each(arr_foreigner, function(key,value){
        if(Object.keys(arr_foreigner)[0] == key){
          var fgn_template = '<div id="newRow" class="row clearfix">'
          +'<div class="col-lg-5 col-md-5 col-sm-5 col-xs-5 ">'
            +'<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| %>'
                  // if (key.toString() == '<%= ct.value.to_s %>')
                  //   var selected = "selected"; 
                  // else 
                    // var selected = "";
                +'<option value="<%= ct.value %>">'
                  +'<%= ct.name %></option>'
                  +'<%end %>'
                +'</select>'
            +'</div>'
            +'</div>'
            +'<div class="col-lg-5 col-md-5 col-sm-5 col-xs-5 ">'
              +'<div class="form-group p-l-10 p-r-10">'
               +'<input type="number"  name="survey[foreigner][]" class="form-control" value="'+value+'">'
              +'</div>'
            +'</div>'
            +'<div class="col-lg-1 col-md-1 col-sm-1 col-xs-1 ">'
              +'<button type="button" class="btn btn-success" id="addForeigner">Add</button>'
            +'</div>'
           +'</div>';
        }else{
          var fgn_template = '<div id="newRow" class="row clearfix">'
                            +'<div class="col-lg-5 col-md-5 col-sm-5 col-xs-5 ">'
                              +'<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| %>'
                                    // if (key.toString() == '<%= ct.value.to_s %>')
                                    //   var selected = "selected"; 
                                    // else 
                                      // var selected = "";
                                  +'<option value="<%= ct.value %>">'
                                    +'<%= ct.name %></option>'
                                    +'<%end %>'
                                  +'</select>'
                              +'</div>'
                            +'</div>'
                            +'<div class="col-lg-5 col-md-5 col-sm-5 col-xs-5 ">'
                              +'<div class="form-group p-l-10 p-r-10">'
                               +'<input type="number"  name="survey[foreigner][]" class="form-control" value="'+value+'">'
                              +'</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(fgn_template);
      });
    }
  }

  function total_customer(){
    var child = $("#survey_child").val() || 0;
    var adult = $("#survey_adult").val() || 0;
    var result = parseInt(child) + parseInt(adult);
    $("#survey_total_customer").val(result);
  }

  
</script>