EVOLUTION-NINJA

Edit File: customer_list.php

<?php $this->load->view('includes/header.php')?>

<div class="form-check-inline">
            <label class="form-check-label">
              <input type="radio" class="form-check-input" id="date" name="optradio" value="date">Date
            </label>
          </div>
          <div class="form-check-inline">
            <label class="form-check-label">
              <input type="radio" class="form-check-input" id="month" name="optradio" value="month">Month
            </label>
          </div>
          <div class="form-check-inline disabled">
            <label class="form-check-label">
              <input type="radio" class="form-check-input" id="year" name="optradio" value="year">Year
            </label>
          </div>
          
          <div class="from_to_date">
          </div>
         
          <div class="months">
          </div>

</div>
          </div>

</form>
         
        	<div id ="jaytab" style="margin-top:3%;" class="grid table-responsive">
    				<table id="list0"></table>
    				<div id="pager0"></div>
    				<div id="dialogSelectRow" title="Warning" style="display:none">
    					<p>Please select row</p>
    				</div>
  			 </div>
         
          <div id ="datejaytab" style="margin-top:3%" class="grid table-responsive">
          <table id="datelist1"></table>
          <div id="datepager1"></div>
          <div id="dialogSelectRow" title="Warning" style="display:none">
            <p>Please select row</p>
          </div>
        </div>

<div id ="monthjaytab" style="margin-top:3%" class="grid table-responsive">
          <table id="monthlist2"></table>
          <div id="monthpager2"></div>
          <div id="dialogSelectRow" title="Warning" style="display:none">
            <p>Please select row</p>
          </div>
        </div>
          <div id ="yearjaytab" style="margin-top:3%" class="grid table-responsive">
          <table id="yearlist3"></table>
          <div id="yearpager3"></div>
          <div id="dialogSelectRow" title="Warning" style="display:none">
            <p>Please select row</p>
          </div>
        </div>

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

<!--  <div class="modal fade" id="edit_modal" tabindex="-1" role="dialog" aria-labelledby="ModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="ModalLabel">Edit Customer</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>

<div class="row">
                  <div class="col-sm-4">
                    <div class="form-group" >
                        <label for="exampleInputUsername1">Name</label>
                        <input type="text" class="form-control customer_name" name="customer_name" required>
                    </div>
                  </div>
                  <div class="col-sm-4">
                    <div class="form-group" >
                          <label for="exampleInputUsername1">Phone</label>
                        <input type="text" class="form-control customer_phone" name="customer_phone" required>
                      </div> 
                  </div>
                  <div class="col-sm-4">
                    <div class="form-group" >
                    <label for="exampleInputUsername1">Email</label>
                  <input type="text" class="form-control customer_email" name="customer_email" required>
                </div>
                  </div>

</div>

<div class="row">
                  <div class="col-sm-4">
                    <div class="form-group" >
                    <label for="exampleInputUsername1">Remark</label>
                  <input type="text" class="form-control remarks" name="remarks" required>
                </div>
                  </div>
                   <div class="col-sm-4">
                     <div class="form-group" >
                    <label for="exampleInputUsername1">Address</label>
                  <input type="text" class="form-control address" name="address" required>
                </div> 
                  </div>
                   <div class="col-sm-4">
                    <div class="form-group" >
                    <label for="exampleInputUsername1">Site</label>
                    <select type="text" name="site_number" class="form-control site_number">  
                      <option value="">Select</option>
                      <option value="1">1</option>
                      <option value="2">2</option>
                      <option value="3">3</option>
                    </select>
                </div>  
                  </div>
                </div>

<div class="col-sm-4">
                    <div class="form-group" >
                    <label for="exampleInputUsername1">Reference From</label>
                  <input type="text" class="form-control ref_from" name="ref_from" required>
                </div> 
                  </div>
                   <div class="col-sm-4">
                    <div class="form-group" >
                      <label for="exampleInputUsername1">Reference Type</label>
                      <select name="ref_type" class="form-control ref_type" id="ref_type" >
                        <option value="">Select</option>
                        <option value="Marketing">Marketing</option>
                        <option value="Walkin">Walkin</option>
                        <option value="Agents">Agents</option>
                        <option value="Old Customer">Old Customer</option>
                        <option value="Staff">Staff</option>
                        <option value="Paper Adds">Paper Adds</option>
                        <option value="Website Marketing"> WebsiteMarketing</option>
                        <option value="Social Media">Social Media</option>
                        <option value="Agents">E-commerence Site</option>
                        <option value="Old Customer">Hordings</option>
                        <option value="Staff">Sine Boards</option>
                        <option value="Reference">Tv Boards</option>
                        <option value="Paper Adds">FM ads</option>
                        <option value="Paper Adds">Adds</option>
                      </select>    
                    </div>  
                  </div>
                   <div class="col-sm-2">
                    
                  </div>
                </div>

</div>

<div class="modal-footer">
              <button type="submit" class="btn btn-primary submit">Submit</button>
              <button type="button" class="btn btn-light" data-dismiss="modal">Close</button>
            </div>

</form>

</div>
        </div>
    </div> -->
    <div class="modal fade" id="edit_modal" tabindex="-1" role="dialog" aria-labelledby="ModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="ModalLabel">Edit Customer</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>

<div class="row">
                  <div class="col-sm-4">
                    <div class="form-group" >
                        <label for="exampleInputUsername1">Name<span style="color:red">*</span></label>
                        <input type="text" class="form-control customer_name" name="customer_name" pattern="[A-Za-z\s]{1,40}" required>
                    </div>
                  </div>
                  <div class="col-sm-4">
                    <div class="form-group" >
                          <label for="exampleInputUsername1">Phone<span style="color:red">*</span></label>
                        <input type="text" class="form-control customer_phone" name="customer_phone" pattern="[0-9]{10}" required>
                      </div> 
                  </div>
                  <div class="col-sm-4">
                    <div class="form-group" >
                    <label for="exampleInputUsername1">Email<span style="color:red">*</span></label>
                  <input type="email" class="form-control customer_email" name="customer_email" required>
                </div>
                  </div>

</div>

<div class="row">
                  <div class="col-sm-4">
                    <div class="form-group" >
                      <label for="exampleInputUsername1">Remarks</label>
                      <input type="text" class="form-control remarks" name="remarks" required>
                    </div>
                  </div>
                  <div class="col-sm-4">
                    <div class="form-group" >
                      <label for="exampleInputUsername1">Address<span style="color:red">*</span></label>
                      <input type="text" class="form-control address" name="address" >
                    </div> 
                  </div>
                  
                </div>

</div>

</form>

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

</div>

box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(255, 0, 0, 0.6);
}
</style>

$(document).ready(function(){

$("#list0").jqGrid({
    url:"<?php echo site_url('get-customer-list')?>",   
    mtype : "get",   
    datatype: "json", 
    colNames:['id','Name','Phone','Email','Address','Reference Type','Refered By','Ref Person\'s Layout','Ref Person\'s Site','Remarks','Action'],
        colModel:[
          {name:'id',index:'id', width:100, hidden:true,editable:false,key:true},
          {name:'name',index:'name', width:150, hidden:false,editable:false},
          {name:'phone',index:'phone', width:100, hidden:false,editable:false},
          {name:'email',index:'email', width:200, hidden:false,editable:false},
          {name:'address',index:'address',editable:false, width:200},
          {name:'reference_type',index:'reference_type',editable:false, width:100},
          {name:'ref_from',index:'ref_from',editable:false, width:100},
          {name:'ref_layout',index:'ref_layout',editable:false, width:75},
          {name:'site_no',index:'site_no',editable:false, width:75},
          {name:'remarks',index:'remarks',editable:false, width:100},
          {name:'',index:'',width:80, search:false,editable:false,formatter: function (cellvalue, options, rowObject) {
            var retVal = "";
            var retVal = '  <a onclick="edit_customer('+rowObject.id+');" href="javascript:void(0);"><i class="fa fa-pencil-square-o" style="color:blue;" aria-hidden="true"></i></a>   <a onclick="delete_customer('+rowObject.id+')"; href="javascript:void(0);"><i class="fa fa-trash" style="color:red;" aria-hidden="true"></i></a>';
            return retVal;
          }},
       ],
    rowNum:20,
    rowTotal: 2000,
    rowList : [20,30],
    rownumbers: true,
    //rownumWidth: 60,
    pager:"#pager0", 
    sortname:'id', 
    viewrecords: true,
    gridview: true,
    autowidth: true,
    sortorder:"asc",
    shrinkToFit: true,
    loadonce:true,
    autoencode: true,
    caption:"Customer List",
    //Subgrid1...
    subGrid: false,
  });

$("#list0").jqGrid("setLabel", "rn", "SL");
    $("#list0").jqGrid('filterToolbar',{searchOperators : false}); //for multisearch code,remove if not required

$("#list0").jqGrid('navGrid','#pager2',
      {edit:false,add:false,del:false,search:false,refreshstate:"current"},
      { },
      { },
      { }, 
      {
      sopt:['eq', 'ne', 'lt', 'gt', 'cn', 'bw', 'ew'],
      closeOnEscape: true, 
      multipleSearch: true, 
      closeAfterSearch: true,
      closeAfterDelete:true,
      closeAfterEdit:true
      },
    );

});

$(':radio[id=date]').change(function(){
 $("#jaytab").hide();
  });
$(':radio[id=month]').change(function(){
 $("#jaytab").hide();
  });
$(':radio[id=year]').change(function(){
 $("#jaytab").hide();
  });
  $(':radio[id=month]').change(function(){
 $("#datejaytab").hide();
  });
 $(':radio[id=year]').change(function(){
 $("#monthjaytab").hide();
  });

$('input[name=optradio]').change(function()
  {
    var value = $(this).val();

$('.from_to_date').empty();
    $('.months').empty();
    $('.years').empty();
    $('.filter_submit').empty();

if(value == 'date')
    {

$('.from_to_date').empty();
      var content = '';
      content += '<div class="row" style="padding-top: 30px;">';
      content += '<div class="col-sm-2">';
      content += '<div class="form-group">';
      content += '<center><label>From Date</label> </center>';            
      content += '</div>';
      content += '</div>';
      content += '<div class="col-sm-4">';
      content += '<div class="form-group">';
      content += '<input type="text" name="from_date" class="form-control from_date from_datepicker">';
      content += '</div> ';
      content += '</div>';

content += '<div class="col-sm-2">';
      content += '<div class="form-group">';
      content += '<center><label >To Date</label></center>';
      content += '</div> ';
      content += '</div>';
      content += '<div class="col-sm-4">';
      content += '<div class="form-group">';
      content += '<input type="text" name="to_date" class="form-control to_date to_datepicker">';
      content += '</div>';
      content += '</div> ';
      content += '</div>';
      $('.from_to_date').append(content);

$(function(){
      $(".from_datepicker").datepicker({
          dateFormat: 'dd-mm-yy',
        }).on('changeDate', function(ev){
          $('.to_datepicker').datepicker('hide');
        });
      });

$('.from_datepicker').on('change', function(){
          var date = $(this).val();
          $('.to_datepicker').datepicker({
            dateFormat: 'dd-mm-yy',
            minDate: date,
          });  
      });
    }
    else if(value == 'month')
    {
      $('.months').empty();
      var content = '';

content += '<div class="row" style="padding-top: 30px;">';
      content += '<div class="col-sm-2">';
      content += '<center><label>Months</label></center>';
      content += '</div>';
      content += '<div class="col-sm-4">';
      content += '<div class="form-group">';
      content += '<select class="form-control col-sm-8 month" id="months" name="months">';
      content += '<option value="">Select</option>';
      content += '<option value="01">January</option>';
      content += '<option value="02">Febraury</option>';
      content += '<option value="03">March</option>';
      content += '<option value="04">April</option>';
      content += '<option value="05">May</option>';
      content += '<option value="06">June</option>';
      content += '<option value="07">July</option>';
      content += '<option value="08">August</option>';
      content += '<option value="09">September</option>';
      content += '<option value="10">October</option>';
      content += '<option value="11">November</option>';
      content += '<option value="12">December</option>';
      content += '</select>';
      content += '</div>';
      content += '</div>';
      content += '</div>';

$('.months').append(content);
    }
    else
    {
      $('.years').empty();
      var content = '';
      content += '<div class="row" style="padding-top: 30px;">';
      content += '<div class="col-sm-2">';
      content += '<center><label>Year</label></center>';
      content += '</div>';
      content += '<div class="col-sm-4">';
      content += '<div class="form-group">';
      content += '<input type="text" name="year" class="form-control year" id="datetimepicker1" >';
      content += '</div>';
      content += '</div>';
      content += '</div>';
      $('.years').append(content);

$('#datetimepicker1').datetimepicker({
        format      :   "YYYY",
        //viewMode    :   "years", 
      });
    }

var content = '';
    content += '<div class="form-group">';
    content += '<div class="col-sm-6">';
    content += '<button type="submit" id="btn" class="btn btn-primary  center-block">Submit</button>';
    content += '</div>';
    content += '</div>';

$('.filter_submit').append(content);

});

$('.filter_choice_submit').submit(function(e)
  {
     e.preventDefault();
    var type = $('input[name=optradio]:checked').val();
    
    
    if(type == 'date')
    {
      var from_date = $(".from_date").val();
      var to_date = $(".to_date").val();
      $("#datelist1").jqGrid({
        url:"<?php echo site_url('get-datewise-customer-list')?>?from_date="+from_date+"&to_date="+to_date,  
        mtype : "get",   
        datatype: "json", 
        colNames:['id','Name','Phone','Email','Address','Reference Type','Refered By','Ref Person\'s Layout','Ref Person\'s Site','Remarks','Action'],
        colModel:[
          {name:'id',index:'id', width:100, hidden:true,editable:false,key:true},
          {name:'name',index:'name', width:150, hidden:false,editable:false},
          {name:'phone',index:'phone', width:100, hidden:false,editable:false},
          {name:'email',index:'email', width:200, hidden:false,editable:false},
          {name:'address',index:'address',editable:false, width:200},
          {name:'reference_type',index:'reference_type',editable:false, width:100},
          {name:'ref_from',index:'ref_from',editable:false, width:100},
          {name:'ref_layout',index:'ref_layout',editable:false, width:75},
          {name:'site_no',index:'site_no',editable:false, width:75},
          {name:'remarks',index:'remarks',editable:false, width:100},
          {name:'',index:'',width:80, search:false,editable:false,formatter: function (cellvalue, options, rowObject) {
            var retVal = "";
            var retVal = '  <a onclick="edit_customer('+rowObject.id+');" href="javascript:void(0);"><i class="fa fa-pencil-square-o" style="color:blue;" aria-hidden="true"></i></a>   <a onclick="delete_customer('+rowObject.id+')"; href="javascript:void(0);"><i class="fa fa-trash" style="color:red;" aria-hidden="true"></i></a>';
            return retVal;
          }},
       ],

rowNum:20,
        rowTotal: 2000,
        rowList : [20,30],
        rownumbers: true,
        //rownumWidth: 60,
        pager:"#datepager1", 
        sortname:'id', 
        viewrecords: true,
        gridview: true,
        autowidth: true,
        sortorder:"asc",
        shrinkToFit: true,
        loadonce:true,
        autoencode: true,
        caption:"Customer List",
        //Subgrid1...
        subGrid: false,

});

}
    else if(type == 'month')
    {
      var month = $(".month").val();
      $("#monthlist2").jqGrid({
        url:"<?php echo site_url('get-monthwise-customer-list')?>?month="+month,
        mtype : "get",   
        datatype: "json", 
        colNames:['id','Name','Phone','Email','Address','Reference Type','Refered By','Ref Person\'s Layout','Ref Person\'s Site','Remarks','Action'],
        colModel:[
          {name:'id',index:'id', width:100, hidden:true,editable:false,key:true},
          {name:'name',index:'name', width:150, hidden:false,editable:false},
          {name:'phone',index:'phone', width:100, hidden:false,editable:false},
          {name:'email',index:'email', width:200, hidden:false,editable:false},
          {name:'address',index:'address',editable:false, width:200},
          {name:'reference_type',index:'reference_type',editable:false, width:100},
          {name:'ref_from',index:'ref_from',editable:false, width:100},
          {name:'ref_layout',index:'ref_layout',editable:false, width:75},
          {name:'site_no',index:'site_no',editable:false, width:75},
          {name:'remarks',index:'remarks',editable:false, width:100},
          {name:'',index:'',width:80, search:false,editable:false,formatter: function (cellvalue, options, rowObject) {
            var retVal = "";
            var retVal = '  <a onclick="edit_customer('+rowObject.id+');" href="javascript:void(0);"><i class="fa fa-pencil-square-o" style="color:blue;" aria-hidden="true"></i></a>   <a onclick="delete_customer('+rowObject.id+')"; href="javascript:void(0);"><i class="fa fa-trash" style="color:red;" aria-hidden="true"></i></a>';
            return retVal;
          }},
       ],

rowNum:20,
        rowTotal: 2000,
        rowList : [20,30],
        rownumbers: true,
        //rownumWidth: 60,
        pager:"#monthpager2", 
        sortname:'id', 
        viewrecords: true,
        gridview: true,
        autowidth: true,
        sortorder:"asc",
        shrinkToFit: true,
        loadonce:true,
        autoencode: true,
        caption:"Customer List",
        //Subgrid1...
        subGrid: false,

});
    }
    else 
    {
      var year = $(".year").val();
      $("#yearlist3").jqGrid({
        url:"<?php echo site_url('get-yearwise-customer-list')?>?year="+year,
        mtype : "get",   
        datatype: "json", 
        colNames:['id','Name','Phone','Email','Address','Reference Type','Refered By','Ref Person\'s Layout','Ref Person\'s Site','Remarks','Action'],
        colModel:[
          {name:'id',index:'id', width:100, hidden:true,editable:false,key:true},
          {name:'name',index:'name', width:150, hidden:false,editable:false},
          {name:'phone',index:'phone', width:100, hidden:false,editable:false},
          {name:'email',index:'email', width:200, hidden:false,editable:false},
          {name:'address',index:'address',editable:false, width:200},
          {name:'reference_type',index:'reference_type',editable:false, width:100},
          {name:'ref_from',index:'ref_from',editable:false, width:100},
          {name:'ref_layout',index:'ref_layout',editable:false, width:75},
          {name:'site_no',index:'site_no',editable:false, width:75},
          {name:'remarks',index:'remarks',editable:false, width:100},
          {name:'',index:'',width:80, search:false,editable:false,formatter: function (cellvalue, options, rowObject) {
            var retVal = "";
            var retVal = '  <a onclick="edit_customer('+rowObject.id+');" href="javascript:void(0);"><i class="fa fa-pencil-square-o" style="color:blue;" aria-hidden="true"></i></a>   <a onclick="delete_customer('+rowObject.id+')"; href="javascript:void(0);"><i class="fa fa-trash" style="color:red;" aria-hidden="true"></i></a>';
            return retVal;
          }},
       ],

rowNum:20,
        rowTotal: 2000,
        rowList : [20,30],
        rownumbers: true,
        //rownumWidth: 60,
        pager:"#yearpager2", 
        sortname:'id', 
        viewrecords: true,
        gridview: true,
        autowidth: true,
        sortorder:"asc",
        shrinkToFit: true,
        loadonce:true,
        autoencode: true,
        caption:"Customer List",
        //Subgrid1...
        subGrid: false,

});

}

$("#list2").jqGrid("setLabel", "rn", "SL");
    $("#list2").jqGrid('filterToolbar',{searchOperators : false}); //for multisearch code,remove if not required

$("#list2").jqGrid('navGrid','#pager2',
      {edit:false,add:false,del:false,search:false,refreshstate:"current"},
      { },
      { },
      { }, 
      {
        sopt:['eq', 'ne', 'lt', 'gt', 'cn', 'bw', 'ew'],
        closeOnEscape: true, 
        multipleSearch: true, 
        closeAfterSearch: true,
        closeAfterDelete:true,
        closeAfterEdit:true
      },
    );
    
  });

function edit_customer(id)
{
    $.ajax({
    type : 'post',
    url  : "<?php echo site_url('edit-customer-details');?>",
    data : {'customer_id':id},
    success:function(response) {
      response=jQuery.parseJSON(response);
      console.log(response);
      if(response.result==1)
      {
        $('#edit_modal').modal('show');
        $('.customer_id').val(response.message.id);
        $('.customer_name').val(response.message.name);
        $('.customer_phone').val(response.message.phone);
        $('.customer_email').val(response.message.email);
        $('.address').val(response.message.address);
        $('.remarks').val(response.message.remarks);
        $('.edit_ref_type').val(response.message.ref_type);
        $('.ref_from').val(response.message.ref_from);
        $('.site_number').val(response.message.site_number);
      }

}
  });
  
}

$('.update_form').submit(function(e)
 	{    
        e.preventDefault();

$("#loading").show();

formdata = new FormData($(this)[0]);

$(".update").attr('disabled', 'disabled');
        $(".update").text("Updating...");

$.ajax({

type   : 'post',
            url    : '<?php echo site_url("update-customer-details")?>',
            data   : formdata,
            contentType: false,
            processData: false,
                                      
              success:function(response){
              response=jQuery.parseJSON(response);
              console.log(response);

if(response.result==1)
                {
                  $("#edit_modal").modal("hide");
                  toastr["success"](response.message);
                  $('.update_form')[0].reset();
                  $(".update").text("Submit");    
                  $(".update").removeAttr('disabled');   
                  location.reload();      
                }
                else if(response.result == 2)
                {
                  toastr["error"](response.message);                       
                  $(".update").text("Submit"); 
                  $(".update").removeAttr('disabled');                      
                }
                else 
                {
                  toastr["error"](response.message);                       
                  $(".update").text("Submit"); 
                  $(".update").removeAttr('disabled');                      
                }
               
            }
            
     	});
             
    });

function delete_customer(id)
{
    swal({

title: "Are you sure?",
    text: "You will not be able to recover this customer data !",
    type: "warning",   showCancelButton: true,
    confirmButtonColor: "#DD6B55",
    confirmButtonText: "Yes, delete it!",
    cancelButtonText: "No, cancel plz!",
    closeOnConfirm: false,
    closeOnCancel: false 
    },
    function(isConfirm){

if (isConfirm) 
        { 
            $(".sweet-alert").hide();
            $(".sweet-overlay").hide();
            $.ajax({
				type : 'post',
				url  : "<?php echo site_url('delete-customer-details');?>",
				data : {'customer_id':id},
				success:function(response) {
					response=jQuery.parseJSON(response);
					console.log(response);
					if(response.result==1)
					{

toastr["success"](response.message);
						//$("#list2").setGridParam({datatype:'json', page:1}).trigger('reloadGrid');
						$("#list0").setGridParam({datatype:'json', page:1}).trigger('reloadGrid');
                        $("#datelist1").setGridParam({datatype:'json', page:1}).trigger('reloadGrid');
                        $("#monthlist2").setGridParam({datatype:'json', page:1}).trigger('reloadGrid');
                        $("#yearlist3").setGridParam({datatype:'json', page:1}).trigger('reloadGrid');

}

}
    		});

} 
        else 
        {
			$(".sweet-alert").hide();
            $(".sweet-overlay").hide();
        }
	});
       
}

</script>

<?php $this->load->view('includes/footer.php')?>