<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>
<div class="row">
  <div class="col-lg-7 col-md-7 col-sm-7">
      
      <div class="main-box-body clearfix">
        <div class="table-responsive">
          <table class="table table-striped">
           
            <thead>

              <tr>
                 <td colspan="6">
                    <%= form_tag crm_customers_path, :method => :get do %>
                      <div class="input-append col-md-12 form-group pull-left">
                        <input type="text" name="filter" style="margin-right:10px" placeholder="Search" id="search" class="form-control input-xs col-md-4">
                        <button type="submit" class="btn btn-primary btn-md">Search</button>
                        <!-- <a href="modal-window" data-toggle= "modal" data-target="#modal-window" class="btn btn-primary btn-md" id="card_read" >Read Card</a> -->

                        <!-- <button type="button" class="btn btn-info btn-md" data-toggle="modal" data-target="#myModal">Open Modal</button> -->
                      </div>
                    <% end %>
                 </td>
              </tr>
              <tr>
                <th>Select</th>
                <th>Sr.no</th>
                <th>Name</th>
                <th>Card No</th>
                <th>Contact no</th>
                <th>Email</th>
                <th>Action</th>
              </tr>
            </thead>

            <tbody>
                <% @i = 0 %>
                 <% @crm_customers.each do |crm_customer| %>
                  
                    <tr class="customer_tr" data-ref="<%= crm_customer.customer_id %>">
                     <td>
                     <input type="radio" style="width:20px;" name="checkbox" class="checkbox_check" ></td>
                     <td>
                      <% if crm_customer.customer_id != "CUS-000000000001" && crm_customer.customer_id != "CUS-000000000002" %> 
                      <%= @i += 1 %>
                      <% end %>
                      </td>
                      <td><%= crm_customer.name %></td>
                      <td><%= crm_customer.card_no rescue '-' %></td>
                      <td><%= crm_customer.contact_no %></td>
                      <td><%= crm_customer.email %></td>
                      <td><%= link_to 'Show', crm_customer_path(crm_customer) %></td>
                     
                    </tr>
                    
                  <% end %>
             
            </tbody>
          </table>
          <br>
          
          <%= paginate @crm_customers %>
        </div>
      </div>
     <%= render 'card_read_form' %>
  </div>

    <%= render 'new_form', crm_customer: @crm_customer %>

    <div class="col-lg-1 col-md-1 col-sm-1">
    <br>
       <a href="<%= crm_customers_path%>" class="btn btn-primary">
        <i class="fa fa-arrow-left fa-lg"></i> Back
       </a>
    </div>
</div>


<script type="text/javascript">

$(function() {
    $('.datepicker').datepicker({
        format : 'dd-mm-yyyy',
        autoclose: true
    });
    $('.datepicker').attr('ReadOnly','true');
    $('.datepicker').css('cursor','pointer');

});

$(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;
            }
              
              $.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_salutation').val(data.salutation);
                    $('#customer_nrc_no').val(data.nrc_no);
                    $('#customer_card_no').val(data.card_no);
                    $('#customer_address').val(data.address);
                    $('#customer_date_of_birth').val(data.date_of_birth);
                    $('#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) {
      $.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)
                          { 
                            window.location.href = '/origami'
                          }else{
                            alert('Record not found!');
                            location.reload();
                          }
                          
                        }  
                });
               }
              }
              
        }
      });
  }

  $('#reset').click(function() {
    
    window.location.href = '/crm/customers'

    return false;
  });

</script>
                  