000

@extends('layout.master')
@section('title','Customer')
@push('plugin-styles')

{!! Html::style('//cdn.datatables.net/1.10.23/css/jquery.dataTables.min.css') !!} 
  {!! Html::style('//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.css') !!}
    <style type="text/css">
    .table th, .table td {
      white-space: break-spaces !important;
  }
  </style>
@endpush
@section('content')

<div class="main-content">
	<div class="main-content-inner">
		<div class="breadcrumbs ace-save-state" id="breadcrumbs">
			<ul class="breadcrumb">
				<li>
					<i class="ace-icon fa fa-home home-icon"></i>
					<a href="{{url('')}}">Home</a>
				</li>
				/<li class="active">Customers</li>
			</ul>
		</div>

<div class="row">
				<div class="col-12">
					<h3 class="header smaller lighter blue">Customers</h3>

<div class="clearfix">
						<div class="pull-right tableTools-container">
					    </div>
					</div>
					<div class="table-header">
						Results for "Latest Registered Customers"
						<div class="widget-toolbar no-border">
							<a class="btn btn-xs bigger btn-danger dropdown-toggle"  data-toggle="modal" href='#addCustomerModal'>
								Add
								<i class="ace-icon fa fa-plus icon-on-right"></i>
							</a>
						</div>

</div>

<div class="card">
        				<div class="card-body">
        					<div class="table-responsive">
        						<table id="dynamic_table" class="table table-striped table-bordered table-hover">
        							<thead>
        								<tr>
        									<th>ID</th>
        									<th>Circle</th>
        									<th>Customer Code</th>
        									<th>Customer Name</th>        									
        								</tr>
        							</thead>
        
        							<tbody>
        								@foreach($customers as $customer)
        								<tr id="tr_{{$customer->id}}">
        								  <td>{{$customer->id}}</td>
        									<td>{{$customer->Circle}}</td>
        									<td>{{$customer->Cust_Code}}</td>
        									<td>{{$customer->Cust_Name}}</td>        									
        									{{--<td>
        										<div class="hidden-sm hidden-xs btn-group">
        										
        												<a class="btn btn-xs btn-info" onclick="getEdit({{$customer->id}})" >
        													<i class="ace-icon fa fa-pencil bigger-120"></i>
        												</a>
        
        												<button class="btn btn-xs btn-danger" onclick="deleteGstSlab({{$customer->id}})" >
        													<i class="ace-icon fa fa-trash-o bigger-120"></i>
        												</button>
        											</div>
        										</td>--}}
        								</tr>
        								@endforeach
        							</tbody>
        						</table>
        					</div>
        				</div>
        			</div>
                </div>
            </div>
	    </div>
	</div>
</div>

<div class="modal fade" id="addCustomerModal">
	<div class="modal-dialog modal-sm">
		<div class="modal-content">
			<div class="modal-header">
			    <h4 class="modal-title">Add New Customer</h4>
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
			</div>
			<form action="" role="form" id="addCustomerForm">
			    <div class="modal-body">
					<div class="row">
						<div class="col-md-12">
							<div class="form-group">
								<label for="login_id">Circle</label>
								    <input type="text" class="form-control" name="circle" id="circle" placeholder="Enter Circle">
								<span class="text text-danger error" id="add_circle_error" style="display: none;"></span>
							</div>
						</div>
						<div class="col-md-12">
							<div class="form-group">
								<label for="customer_code">Customer Code</label>
								    <input type="text" class="form-control" name="customer_code" id="customer_code" placeholder="Enter Customer Code">
								<span class="text text-danger error" id="add_customer_code_error" style="display: none;"></span>
							</div>
						</div>
						<div class="col-md-12">
							<div class="form-group">
								<label for="customer_name">Customer Name</label>
								    <input type="text" class="form-control" name="customer_name" id="customer_name" placeholder="Enter Customer Name">
								<span class="text text-danger error" id="add_customer_name_error" style="display: none;"></span>
							</div>
						</div>
					</div>					
				</div>
				<div class="modal-footer" id="modal_footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
					<button type="button" id="addCustomerBtn" class="btn btn-primary">Submit</button>
				</div>
			</form>
		</div>
	</div>
</div>

@endsection

@push('custom-scripts')

{!! Html::script('js/app.js') !!}

{!! Html::script('/assets/js/dashboard.js') !!}
		 
    {!! Html::script('//cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js') !!}
    
    <script>
    
        jQuery(function($) {
		
			$('#dynamic_table').DataTable( {
				bAutoWidth: false,
				"aaSorting": [],
			});
		});
	   </script>

$(document).ready(function(){
				$('#addCustomerBtn').click(function(e){		
					e.preventDefault();					
			    $.ajaxSetup({
						headers: {
							'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
						}
					});

$.ajax({
						url: "{{ url('admin/add-customer')}}",
						method: 'POST',
						data: $('#addCustomerForm').serialize(),
						success: function(data){
					    if(data.errors){
					        handleError(data);
							} else{
								swal({
									title: "Success!",
									text: data.message,
									type: "success"
								}).then(function() {
									window.location.reload();
								});
							}
						}
					});
				});
			});			
			   
	
		
		
		
		
			function showError(id,error){
				if(typeof(error) === "undefined"){
					$('#'+id).hide();
				}else{
					$('#'+id).show();
					$('#'+id).text(error);
				}
			}
		
			function handleError(data) {
		    if(data.status == 1) { 
		        $.each(data.errors, function(key, error){
    		        $('#add_'+key+'_error').show();
    		        $('#add_'+key+'_error').text(error);
    		    });    
		    } else {
		       swal({
					title: "Error!",
					text: data.errors,
					type: "error"
				}).then(function() {
					window.location.reload();
				});  
		    }			    
			}

</script>
    
    
    
@endpush