sx-fc/app/views/crm/customers/index.html.erb

<div class="row">
  <div class="col-lg-12">
    <ol class="breadcrumb">
       <li><a href="<%= crm_root_path %>">Home</a></li>
       <li class="active">
           <a href="<%= crm_customers_path %>">Customer</a>
       </li>
       <!-- <a href="<%= new_crm_customer_path%>" class="btn btn-primary pull-right">
        <i class="fa fa-plus-circle fa-lg"></i> Add Customer
       </a> -->
    </ol>
  </div>
</div>
<br/>

<div class="row">
  <div class="col-lg-8">
      
      <div class="main-box-body clearfix">
        <div class="table-responsive">
          <table class="table table-striped">
           
            <thead>
              <tr>
                <th>Select</th>
                <th>Name</th>
                <th>Company</th>
                <th>Contact no</th>
                <th>Email</th>
              </tr>
            </thead>

            <tbody>
              <% @crm_customers.each do |crm_customer| %>
                <tr>
                 <td>
                 <input type="radio" style="width:20px;" value="<%= crm_customer.customer_id %>" name="checkbox" class="checkbox_check" ></td>
                  <td><%= crm_customer.name %></td>
                  <td><%= crm_customer.company %></td>
                  <td><%= crm_customer.contact_no %></td>
                  <td><%= crm_customer.email %></td>
                  <td>
                  <%= link_to 'Destroy', crm_customer_path(crm_customer), method: :delete, data: { confirm: 'Are you sure?' } %>
                    
                  </td>
                 
                </tr>
              <% end %>
            </tbody>
          </table>
        </div>
      </div>

  </div>

  <div class="col-lg-4">
  <%= simple_form_for @crm_customer,:url => crm_customers_path, :method => :post do |f| %>
       <span class="patch_method"></span>
       <input type="hidden" id="sale_id" name="sale_id" value="<%= @sale_id %>" />
       <%= f.hidden_field :id, :class => "form-control col-md-6 " %>
       
     <div class="form-group">
        <%= f.input :name, :class => "form-control col-md-6 name" %>

      </div>
      <div class="form-group">
        <%= f.input :company, :class => "form-control col-md-6 company" %>
      </div>
      <div class="form-group">
        <%= f.input :contact_no, :class => "form-control col-md-6 contact_no" %>

      
       </div>

      <div class="form-group">
        <%= f.input :email, :class => "form-control col-md-6 email" %>      
      </div>

       <div class="form-group">
         <label>Date Of Birth</label>
         <%= f.text_field :date_of_birth,:class=>"form-control datepicker date_of_birth",:readonly =>true, :value => @date_of_birth%>
      </div>

      <div class="form-group">
        <select class="selectpicker form-control col-md-12" name="membership_id">
            <option>Select Member Group</option>
            <% @member_group.each do |member| %>
               <option value="<%= member["id"] %>">
              <%= member["name"] %></option>
            <%end %>
          </select>    
      </div>


      <div class="form-group">
        <%= f.input :membership_type, :class => "form-control col-md-6 membership_type" %>
      </div>
      <div class="form-group">
         <%= f.input :membership_authentication_code, :class => "form-control col-md-6 membership_authentication_code" %>
                  
      </div>
      <div class="form-group">
        <%= f.button :submit, "Submit",:class => 'btn btn-primary ', :id => 'submit_customer' %>
        <%= f.button :submit, "Update",:class => 'btn btn-primary ', :disabled =>'', :id => 'update_customer' %>
      </div>
  <%end%>
  </div>
</div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.2.0/jquery-confirm.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.2.0/jquery-confirm.min.js"></script>
<script type="text/javascript">
  $(function () {
     if (jQuery().datepicker) {
            $('.datepicker').datepicker({
               format : 'dd-mm-yyyy',
               autoclose: true
            });
            $('.datepicker').attr('ReadOnly','true');
            $('.datepicker').css('cursor','pointer');
      }
     
  });

  $(document).on('click',".checkbox_check",function(){
     if(this.checked){
            
            var sale_id = $("#sale_id").val() || 0;
            var customer_id = $(this).val();

            if(sale_id != 0){
              var url = "../"+customer_id;
              update_sale(customer_id,sale_id);
            }else{
              
              var url = "customers/"+customer_id;
            }
              
              $.ajax({      
                type: "GET",         
                url: url, 
                data: {},
                dataType: "json",
                success: function(data) {
                   $('#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_date_of_birth').val(data.date_of_birth);
                    $('#customer_membership_type').val(data.membership_type);
                    $('.select > option[value="'+data.membership_id+'"]').attr('selected','selected');
                    $('.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').val();
                    $("#new_customer").attr('id', id);
                    $(".edit_customer").attr('action', '/crm/customers/' + $('#customer_id').val());
                    $(".edit_customer").attr('action', '/crm/customers/' + $('#customer_id').val());
                    $(".patch_method").append('<input type="hidden" name="_method" value="patch">');
                    //$(".edit_customer").attr('method', 'PATCH');
                }
             });
          }else{
            
          }
  })

  function update_sale(customer_id,sale_id) {
      $.confirm({
        title: 'Confirm!',
        content: 'Are You Sure to assign this customer!',
        buttons: {
              
              cancel: function () {
                
              },
              confirm: {
              text: 'Confirm',
              btnClass: 'btn-green',
              keys: ['enter', 'shift'],
              action: 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)
                          { 
                            alert('Customer has assigned');
                            window.location.href = '/origami'
                          }else{
                            alert('Record not found!');
                            location.reload();
                          }
                          
                        }  
                });
               }
              }
              
        }
      });
  }


 
  /*function changeMethod() {
    $("#update_customer").attr('method', 'put');
   }*/
     

  /* $("#update_customer").click(function() {
    $("#new_customer").attr('class', 'edit_customer');
    var id = "edit_customer_"+$('#customer_id').val();alert(id);
    $("#new_customer").attr('id', id);
    alert(";;")
    //$('#new_customer').removeClass('new_customer');
    //$('#new_customer').addClass('edit_customer')
  }); */


</script>