<section>
  <div class="wizard">
      <div class="wizard-inner">
          <div class="active-line"></div>
          <ul class="nav nav-tabs" role="tablist">
              <li role="presentation" class="nav-item">
                <div class="connecting-line border-right"></div>
                <a href="#step1" class="nav-link active" data-toggle="tab" aria-controls="step1" role="tab" title="Step 1">
                  <span class="round-tab">
                    1
                  </span>
                </a>
              </li>
              <li role="presentation" class="nav-item disabled">
                <div class="connecting-line"></div>
                <a href="#complete" class="nav-link disable" data-toggle="tab" aria-controls="complete" role="tab" title="Complete">
                    <span class="round-tab">
                      2
                    </span>
                </a>
              </li>
          </ul>
      </div>
      <%= simple_form_for @crm_customer,:url => crm_customers_path, :method => :post do |f| %>
          <span class="patch_method"></span>
          <%= f.hidden_field :id, :class => "form-control " %>
          <div class="tab-content">
              <div class="tab-pane active" role="tabpanel" id="step1">
                  <!-- <h4>Step 1</h4> -->
                  <div class="form-group">
                    <div class="col-sm-12 col-md-12 col-lg-12">
                      <label><%= t("views.right_panel.detail.sr_no") %></label>
                      <div class="form-line disabled">
                        <input type="text" name="" value="<%=@count_customer%>" class="form-control" disabled="" >
                      </div>
                    </div>
                  </div>

                  <div class="form-group">
                    <div class="col-sm-12 col-md-12 col-lg-12">
                      <label for="customer[salutation]" class="control-label"> <%= t("views.right_panel.detail.salutation") %> :</label><br>
                      <label class="font-12 radio-inline">
                        <%= f.radio_button :salutation,"Mr", :class => "salutation mr with-gap radio-col-indigo", :value=>"Mr"%><%= t("views.right_panel.detail.mr") %>
                      </label>&nbsp;
                      <label class="font-12 radio-inline">
                        <%= f.radio_button :salutation,"Mrs", :class => "salutation mrs with-gap radio-col-indigo", :value=>"Mrs"%><%= t("views.right_panel.detail.miss") %>
                      </label>&nbsp;
                      <label class="font-12 radio-inline">
                        <%= f.radio_button :salutation,"Miss", :class => "salutation miss with-gap radio-col-indigo", :value=>"Miss"%><%= t("views.right_panel.detail.mrs") %>
                      </label>&nbsp;
                      <label class="font-12 radio-inline">
                        <%= f.radio_button :salutation,"Mdm", :class => "salutation mdm with-gap radio-col-indigo", :value=>"Mdm"%><%= t("views.right_panel.detail.mdm") %>
                      </label>
                    </div>
                  </div>
                  <div class="form-group <%= (flash["errors"]) ? "error" : "" %>">
                    <div class="col-sm-12 col-md-12 col-lg-12">
                      <%= f.input :name, :class => "form-control name", :required => true %>
                      <% flash.each do |test, msg| %>
                      <%
                      str="[\"#{msg['name']}\"]"
                      str.gsub!('["', '')
                      str.gsub!('"]', '') %>
                      <lable class="error col-red m-t--10" style="margin-top:-6px"><%= str %></lable>
                      <% end -%>
                    </div>
                  </div>
                  <div class="form-group <%= (flash["errors"]) ? "error" : "" %>">
                    <div class="col-sm-12 col-md-12 col-lg-12">
                      <%= f.input :contact_no, :class => "form-control contact_no" ,:required => true%>

                      <%  flash.each do |name, msg| %>
                      <% str="[\"#{msg['contact_no']}\"]"
                      str.gsub!('["', '')
                      str.gsub!('"]', '') %>
                      <lable class="error col-red m-t-10" style="margin-top:-6px"><%= str %></lable>
                      <% end %>
                    </div>
                  </div>

                  <div class="form-group <%= (flash["errors"]) ? "error" : "" %>">
                    <div class="col-sm-12 col-md-12 col-lg-12">
                      <%= f.input :email, :class => "form-control email" ,:required => true%>

                      <% flash.each do |name, msg| %>
                      <% str="[\"#{msg['email']}\"]"
                      str.gsub!('["', '')
                      str.gsub!('"]', '') %>
                      <lable class="error col-red m-t-10" style="margin-top:-6px"><%= str %></lable>
                      <% end %>
                    </div>
                  </div>

                  <div class="form-group">
                    <div class="col-sm-12 col-md-12 col-lg-12" align="right">
                      <button type="button" class="btn btn-md bg-blue btn-info-full next-step">Next</button>
                    </div>
                  </div>
              </div>
              <div class="tab-pane" role="tabpanel" id="complete">
                  <!-- <h4>Step 2</h4> -->
                  <div class="form-group">
                    <div class="col-sm-12 col-md-12 col-lg-12">
                      <label><%= t("views.right_panel.detail.customer_photo") %></label>
                      <div class="panel padding-10">
                          <div class="menu-item-img">
                            <% if f.object.image_path? %>
                              <p><%= f.object.name %></p>
                                <%= image_tag f.object.image_path.url, :class => "img-thumbnail" %>
                            <% else %>
                              <%= image_tag "/image/menu_images/default.png", :class => "img-thumbnail" %>
                            <% end %>
                          </div>
                          <%= f.file_field :image_path, :class => "img-thumbnail" %>
                      </div>
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="col-sm-12 col-md-12 col-lg-12">
                      <label for="customer[gender]" class="control-label"><%= t("views.right_panel.detail.gender") %> :</label><br>
                      <label class="font-12 radio-inline">
                      <%= f.radio_button :gender,"Male", :class => "gender male", :value=>"Male"%><%= t("views.right_panel.detail.male") %></label>
                      <label class="font-12 radio-inline">
                      <%= f.radio_button :gender,"Female", :class => "gender female", :value=>"Female"%><%= t("views.right_panel.detail.female") %></label>
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="col-sm-12 col-md-12 col-lg-12">
                      <%= f.input :nrc_no,:label => "NRC No", :class => "form-control nrc_no" %>
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="col-sm-12 col-md-12 col-lg-12">
                      <%= f.input :company, :class => "form-control col-md-6 company"%>

                      <%  flash.each do |name, msg| %>
                      <% str="[\"#{msg['company']}\"]"
                      str.gsub!('["', '')
                      str.gsub!('"]', '') %>
                      <lable class="error col-red m-t-10" style="margin-top:-6px"><%= str %></lable>
                      <% end -%>
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="col-sm-12 col-md-12 col-lg-12">
                      <label class="control-label"><%= t("views.right_panel.detail.date_of_birth") %></label>
                      <%= f.text_field :date_of_birth, :value=>"01-01-1990",:class=>"datepicker form-control col-md-12"%>
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="col-sm-12 col-md-12 col-lg-12">
                      <%= f.input :address, :class => "form-control address" %>
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="col-sm-12 col-md-12 col-lg-12">
                      <label><%= t("views.right_panel.detail.select_customer_type") %></label>
                      <select class="form-control col-md-12 selectpicker  show-tick" id="customer_type" name="customer[customer_type]" style="height: " >
                      <%  Lookup.where("lookup_type = ?", "customer_type" ).each do |ct| %>
                      <option value="<%= ct.value %>">
                        <%= ct.name %></option>
                        <%end %>
                      </select>
                    </div>
                  </div>

                  <div class="form-group">
                    <div class="col-sm-12 col-md-12 col-lg-12">
                      <%= f.input :tax_profiles, :collection => @taxes, :input_html => { :multiple => true },  :class => "form-control tax_profiles" %>
                    </div>
                  </div>

                  <div class="form-group <%= (flash["errors"]) ? "error" : "" %>">
                    <div class="col-sm-12 col-md-12 col-lg-12">
                      <%= f.input :card_no, :class => "form-control card_no"%>
                      <% flash.each do |name, msg| %>
                      <% str="[\"#{msg['card_no']}\"]"
                      str.gsub!('["', '')
                      str.gsub!('"]', '') %>
                      <lable class="error col-red m-t-10" style="margin-top:-6px"><%= str %></lable>
                      <% end %>
                    </div>
                  </div>

                  <div class="form-group">
                    <div class="col-sm-12 col-md-12 col-lg-12">
                      <label class="control-label"><%= t("views.right_panel.detail.paypar_account_no") %>:</label>
                      <div class="-group">
                        <input type="text" class="form-control" id="paypar_account_no" name="customer[paypar_account_no]" readonly/>
                        <div class="input-group-addon"><span class="fa fa-credit-card"></span></div>
                      </div>
                    </div>
                  </div>

                  <div class="form-group">
                    <div class="col-sm-12 col-md-12 col-lg-12">
                      <label class="control-label"><%= t("views.right_panel.detail.select_membership_group") %></label>
                      <select class="form-control col-md-12 selectpicker  show-tick"  name="member_group_id"  style="height: " >
                        <option value=""><%= t("views.right_panel.detail.select_membership_group") %></option>
                        <%  Lookup.where("lookup_type = ?", "member_group_type" ).each do |member| %>
                        <option value="<%= member.value %>">
                        <%= member.name %></option>
                        <%end %>
                      </select>
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="col-sm-12 col-md-12 col-lg-12" align="right">
                      <button type="button" class="btn btn-md bg-blue prev-step">Prev</button>
                      <!-- <%= f.submit "Submit",:class => 'btn btn-primary ', :id => 'submit_customer' %>
                      <%= f.submit "Update",:class => 'btn btn-info ', :disabled =>'', :id => 'update_customer' %> -->
                      <button type="submit" class="btn btn-primary" id="submit_customer"><%= t("views.btn.submit") %></button>
                      <button type="submit" class="btn btn-info" disabled id="update_customer"><%= t("views.btn.update") %></button>
                      <button type="button" class="btn btn-danger" id="reset"><%= t("views.btn.reset") %></button>
                    </div>
                  </div>
              </div>
              <div class="clearfix"></div>
          </div>
      <%end%>
  </div>
</section>


<div id="sxModal">
  <div id="sxModal-Content"><h3><%= t :card_tap %></h3></div>
  <div class="m-r-20" align="right">
      <button type="button" class="btn btn-lg btn-link bg-red waves-effect btn_cancel">Cancel</button>
  </div>
</div>
<!-- The modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="modalLabelLarge" aria-hidden="true">
  <div class="modal-dialog modal-lg" style="margin-left:-380px">
    <div class="modal-content">
      <div class="modal-body">
        <div id="container">
          <video autoplay="true" id="videoElement">

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

    </div>
  </div>
</div>
<script type="text/javascript">
  var paypar_account_no = [];
  $(function() {
    paypar_account_no = JSON.parse('<%= @paypar_accountno.to_json.html_safe %>', function (key, value) {
      var type;
      if (value && typeof value === 'object') {
          type = value.type;
          if (typeof type === 'string' && typeof window[type] === 'function') {
              return new(window[type])(value);
          }
      }
      return value;
    });
    console.log(paypar_account_no);

// Read Card Reader
    $("#paypar_account_no").on('focus', function(e){
      if($(this).val() == ''){
        $("#sxModal").show();
        getCardNo();
      }
    });

    // $("#customer_card_no").click(function(){
    //   var ab=$("#customer_tax_profiles").val();
    //   console.log(JSON.stringify(ab));
    // });
  });


  // Read NFC card no from java
  function getCardNo(){
    code2lab.readNFC();
  }

  // get CardNo from Java
  function setCardNo(cardNo){
    check_member = localStorage.getItem("member_card");
    if(cardNo.length == 16){
      if(check_member == "true"){
        $("#paypar_account_no").val(cardNo);
        $("#search").val(cardNo);
        $("#type").val("card");
        $("#filter_form").submit();
      }else{
        if($.inArray(cardNo, paypar_account_no) !== -1){
          swal({
            title: 'Oops',
            text: 'CardNo already registered, Please try another card!',
            type: 'error',
            html: true,
            closeOnConfirm: false,
            closeOnCancel: false,
            allowOutsideClick: false
          }, function () {
            window.location.reload();
          });
        }else{
          $("#paypar_account_no").val(cardNo);
          $("#search").val(cardNo);
          $("#type").val("card");
        }
      }
      $("#sxModal").hide();
      //$("#filter_form").submit();
    }
    $("#sxModal").hide();
  }

  $("#sxModal .btn_cancel").on('click',function(){
    $("#sxModal").hide();
  });
</script>
