
    <!-- <div class="page-header">
     <ul class="breadcrumb">
      <li class="breadcrumb-item"><a href="<%= dashboard_path %>"><%= t("views.right_panel.button.home") %></a></li>
      <li class="breadcrumb-item active"><%= t :crm %></li> -->
     <!--  <li class="breadcrumb-item"><a href="<%= dashboard_path %>">Home</a></li> -->
      <!-- <span class="float-right">
        <%= link_to 'Back', dashboard_path %>
      </span>
     </ul>
    </div> -->
  <div class="row clearfix">
    <div class="col-lg-12 col-md-12 col-sm-12">
      <div class="card">
        <div class="body">
          <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
              <% if flash[:member_notice] %>
                <div class="alert bg-green alert-dismissible" role="alert">
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <%= flash[:member_notice] %>
                </div>
              <% elsif flash[:member_error] %>
                <div class="alert bg-red alert-dismissible" role="alert">
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <%= flash[:member_error] %>
                </div>
              <% end %>
          </div>
          </div>
          <div class="row p-l-20 p-t-20">

            <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
              <%= form_tag crm_customers_path, :id => "filter_form", :method => :get do %>
                <div class="row clearfix">
                  <div class="col-sm-5 col-md-5 col-lg-5">
                    <input type="text" name="filter" style="margin-right:10px" placeholder="Search" id="search" class="form-control">
                    <input type="hidden" name="type" id="type" value="">
                  </div>
                  <div class="col-sm-4 col-md-4 col-lg-4">
                    <!-- <div class="col-lg-2 col-md-2 col-sm-2 col-xs-12"> -->
                    <button type="submit" class="btn btn-sm bg-blue waves-effect"><%= t("views.btn.search") %></button>
                  <!-- </div> -->
                    <button type="button" id="member_acc_no" class="btn bg-green btn-sm waves-effect"><%= t("views.btn.memeber_card") %></button>
                    <button type="button" id="qr_code" class="btn bg-green btn-sm waves-effect"><%= t("views.btn.qr_code") %></button>
                  </div>
                </div>
                <% end %>
            </div>
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
              <%= form_tag crm_customers_path, :method => :get do %>
                <div class="row clearfix">
                    <div class="col-sm-5 col-md-5 col-lg-5">
                      <input type="text" name="filter_card_no" style="margin-right:10px" placeholder="Search by Card No" id="search" class="form-control">
                    </div>
                    <div class="col-sm-4 col-md-4 col-lg-4">
                      <!-- <div class="col-lg-2 col-md-2 col-sm-2 col-xs-12"> -->
                      <button type="submit" class="btn btn-sm bg-blue waves-effect">SEARCH BY CARD NO</button>
                    <!-- </div> -->
                    </div>
                </div>
              <%end %>
            </div>
          </div>
          
          <div class="row">
            <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
              <%= paginate @crm_customers %>
              <div class="table-responsive">
                <table class="table table-hover table-striped" style="width:100%">
              <!-- <div class="table-responsive">
                <table class="table table-striped"> -->
                  <thead>
                    <!-- <tr>
                      <td colspan="7">
                         <button id="member_acc_no" class="btn btn-success btn-md"><span class="fa fa-credit-card"></span> Member Card</button>
                        <button id="qr_code" class="btn btn-danger btn-md">
                          <span class="fa fa-credit-card"></span> QR CODE
                        </button> 
                        
                      </td>
                    </tr>-->
                    <tr>
                      <th></th>
                      <th><%= t("views.right_panel.detail.sr_no") %></th>
                      <th><%= t :customer %> <%= t("views.right_panel.detail.type") %></th>
                      <th><%= t("views.right_panel.detail.name") %></th>
                      <th style="width:20%"><%= t("views.right_panel.detail.email") %></th>
                      <th style="width:20%"><%= t("views.right_panel.detail.contact_no") %></th>
                      <th><%= t("views.right_panel.detail.membership_type") %></th>
                      <th><%= t("views.right_panel.detail.card_no") %></th>
                      <th><%= t("views.right_panel.detail.action") %></th>
                    </tr>
                  </thead>

                  <tbody>
                    <% if @crm_customers.count > 0 %>
                      <% @i = 0 %>
                      <% @crm_customers.each do |crm_customer| %>
                        <tr class="customer_tr" data-ref="<%= crm_customer.customer_id %>">
                          <td>
                           <input type="radio" name="checkbox" class="checkbox_check" >
                          </td>
                          <td>
                            <% if crm_customer.customer_id != "CUS-000000000001" && crm_customer.customer_id != "CUS-000000000002" %>
                            <%= @i += 1 %>
                            <%else%>
                            -
                            <% end %>
                          </td>
                          <td><%= crm_customer.customer_type rescue '-' %></td>
                          <td><%= crm_customer.name %></td>
                          <td style="width:20px%;word-break: break-all;"><%= crm_customer.email %></td>
                          <td style="width:20px%;word-break: break-all;"><%= crm_customer.contact_no %></td>
                          <td>
                            <% if !@membership_types.nil? %>
                              <% @membership_types.each do |member_type| %>
                                <% if member_type[1] == crm_customer.membership_type %>
                                  <%= member_type[0] %>
                                <% end %>
                              <% end %>
                            <% end %>
                          </td>
                          <td><%= crm_customer.card_no rescue '-' %></td>
                          <td>
                            <% if crm_customer.membership_id.nil? && !crm_customer.membership_type.nil? && !crm_customer.membership_type =="" && !crm_customer.paypar_account_no =="" && !crm_customer.paypar_account_no.nil? %>
                              <%= link_to t("views.btn.sync"), crm_customer_sync_path(crm_customer), :class => "btn btn-md bg-green waves-effect" %>
                            <% end %>
                            <% if @customer_update_phone_email_membertype %>
                              <%= link_to t("views.btn.update"), crm_customer_update_phone_email_member_type_path(crm_customer), :class => "btn btn-md bg-green waves-effect" %>
                            <% end %>
                            <%= link_to t("views.btn.show"), crm_customer_path(crm_customer), :class => "btn btn-md bg-blue waves-effect" %>
                          </td>
                        </tr>
                      <% end %>
                    <% else %>
                        <tr><td colspan="7"><strong><p style="text-align: center;margin-bottom: -1px">There is no data for search <%=@filter%>....</p></strong></td></tr>
                    <% end %>
                  </tbody>
                </table>
                
              </div>
            </div>
            <% if @create_flag %>
            <div class="col-sm-4 col-md-4 col-lg-4">
              <!-- .row-form-input -->
              <%= render 'new_form', crm_customer: @crm_customer, taxes: @taxes %>
              <!-- .row-form-input -->
            </div>
            <% end %>
          </div> <!-- .end-of-row -->
        </div>
      </div>
    </div>
</div>

<script type="text/javascript">
  $(document).ready(function () {
    localStorage.setItem("member_card",false);
    /*$('.datepicker').datepicker({
        format : 'dd-mm-yyyy',
        autoclose: true
    });
    $('.datepicker').attr('ReadOnly','true');
    $('.datepicker').css('cursor','pointer');*/

    // Read Card Reader
    $("#member_acc_no").on('click', function(e){
      localStorage.setItem("member_card",true);
      var cardNo = "";
      $("#sxModal").show();
      setTimeout(function(){
        getCardNo();
        $("#sxModal").hide();
        $("#filter_form").submit();
      },100);
    });

    // QR Code Reader
    $("#qr_code").on('click', function(e){
        var code = "";        
        setTimeout(function(){
           code=getQRCode();
           setQRCode(code);           
        },100);
    });

    // Read qrcode from java
    function getQRCode(){
      return code2lab.readQRCode();
    }

    // get QRCode from Java
    function setQRCode(code){
      $("#qr_code").text(code);
      $("#search").val(code);
    }

    /*new customer UI func:*/
    //Initialize tooltips
    $('.nav-tabs > li a[title]').tooltip();
    
    //Wizard
    $('a[data-toggle="tab"]').on('show.bs.tab', function (e) {

        var $target = $(e.target);
    
        if ($target.parent().hasClass('disabled')) {
            return false;
        }
    });

    $(".next-step").click(function (e) {
        var $active = $('.wizard .nav-tabs li a.active');
        $active.parent().next().removeClass('disabled');
        nextTab($active);
        $('.wizard .nav-tabs li.active .connecting-line').css({"border-bottom-left-radius": 0, "border-top-left-radius": 0});
    });
    $(".prev-step").click(function (e) {

        var $active = $('.wizard .nav-tabs li a.active');
        prevTab($active);

    });
    /*new customer UI func:*/
  });

  /*customer UI tab btn*/
  function nextTab(elem) {
      $(elem).parent().next().find('a[data-toggle="tab"]').click();
  }
  function prevTab(elem) {
      $(elem).parent().prev().find('a[data-toggle="tab"]').click();
  }
  /*customer UI tab btn*/

  $(document).on('click',".customer_tr",function(){
       // if(this.checked){
        $(this).closest('tr').find('.checkbox_check').prop( "checked", true );
          //$( "#checkbox_check" ).prop( "checked", true );
          var sale_id     = $("#sale_id").val() || 0;
          var customer_id = $(this).attr('data-ref');

          if(sale_id != 0){
            // var url = "/"+customer_id;
            update_sale(customer_id,sale_id);
          }else{

            var url = "customers/" + customer_id + "/edit";
          }

          $("#customer_tax_profiles").children().removeAttr("selected").css({'color':'#000','background':'none'});

            $.ajax({
              type: "GET",
              url: url,
              data: {},
              dataType: "json",
              success: function(data) {                 
                // Selected for Taxes  
                var taxes = JSON.stringify(data.tax_profiles);  
                var parse_taxes = JSON.parse(taxes); 
                $.each(parse_taxes, function(i, value){
                  $("#customer_tax_profiles option[value='" + value + "']").attr("selected","selected").css({'color':'#fff','background':'#215d9c'});
                });

                  $('#customer_id').val(data.id);
                  $('#customer_name').val(data.name);
                  $('#customer_company').val(data.company);
                  $('#customer_contact_no').val(data.contact_no);
                  $('#customer_email').val(data.email);
                  $('#customer_salutation').val(data.salutation);
                  $('#customer_nrc_no').val(data.nrc_no);
                  $('#customer_card_no').val(data.card_no);
                  $('#customer_type').val(data.customer_type);                    
                  $('#paypar_account_no').val(data.paypar_account_no);
                  $('#customer_address').val(data.address);
                  $('#customer_date_of_birth').val(data.date_of_birth);
                  if(data.image_path.url!=undefined && data.image_path.url!=null){
                    $('.menu-item-img .img-thumbnail').attr('src',data.image_path.url);
                  }
                  $('#customer_membership_type').val(data.membership_type);
                    $('.selectpicker > option[value="'+data.membership_type+'"]').attr('selected','selected');
                  if (data.gender == 'Male') {
                    $('.male').prop( "checked", true )
                  }else{
                    $('.female').prop( "checked", true )
                  }

                  if(data.salutation == 'Mr') {
                    $('.mr').prop( "checked", true )
                  }else if(data.salutation == 'Miss') {
                    $('.miss').prop( "checked", true )
                  }else if(data.salutation == 'Mrs'){
                    $('.mrs').prop( "checked", true )
                  }else{
                    $('.mdm').prop( "checked", true )
                  }

                  $('.membership_authentication_code').val(data.membership_authentication_code);

                  $('#update_customer').removeAttr('disabled').val('');
                  $('#update_customer').attr('value', 'Update');
                  $('#submit_customer').attr('disabled','disabled');

                  $("#new_customer").attr('class', 'simple_form edit_customer');
                  var id = "edit_customer_"+customer_id;
                  $("#new_customer").attr('id', id);

                  $(".edit_customer").attr('id', id);
                  $(".edit_customer").attr('action', '/crm/customers/' + $('#customer_id').val());
                  $(".edit_customer").attr('action', '/crm/customers/' + $('#customer_id').val());
                  $(".patch_method").html('<input type="hidden" name="_method" value="patch">');
                  //$(".edit_customer").attr('method', 'PATCH');
              }
           });
        // }else{

        // }
  })

  function update_sale(customer_id,sale_id) {
      swal({
        title: "Confirmation",
        text: "Are You Sure to assign this customer!",
        type: "success",
        showCancelButton: true,
        confirmButtonColor: "green",
        confirmButtonText: "Yes, delete it!",
        closeOnConfirm: false
      }, function () {
        $.ajax({
          type: "POST",
          url: "update_sale/" ,
          data: {customer_id:customer_id,sale_id:sale_id},
          dataType: "json",
          success: function(data) {
            if(data.status == true)
            {
              window.location.href = '/origami'
            }else{
              swal("Alert!", "Record not found!", "error");
              location.reload();
            }

          }
        });
      });
  }

  $('#reset').click(function() {

    window.location.href = '/crm/customers'

    return false;
  });

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