@extends('layouts.app')
@section('title', 'Client')
@section('content')
    <div class="container-fluid mt-1">
        @include('settings.common_tabs')
            <div class="col-lg-12">
                <div class="card ">
                    <div class="card-body">
                    <div class="p-0">
                        <table id="datatable" class="table table-bordered mb-0" style="border-collapse: collapse; border-spacing: 0; width: 100%;">
                            <thead>
                                <tr>
                                    <th>Sl No&nbsp;&nbsp;</th>
                                    @if(auth()->user()->user_role_id != 3 && auth()->user()->user_role_id != 4)
                                    <th>Customer</th>
                                    @endif
                                    <th>Client Unique Id</th>
                                    <th>Client Name</th>
                                    <th>Address</th>
                                    <th>State</th>
                                    <th>City</th>
                                    <th>Email</th>
									<th>Contact Number</th>
									<th>Status</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
															@foreach($clientData as $client)
									<tr>
										<td>{{ $i++ }}</td>
                                        @if(auth()->user()->user_role_id != 3 && auth()->user()->user_role_id != 4)
                                        <td>{{ (isset($client->getCustomer['customer_name']))? $client->getCustomer['customer_name'] : '' }}</td> 
                                        @endif
										<td>{{ $client->client_unique_id }}</td>
										<td>{{ $client->client_name }}</td>
										<td>{{ $client->address }}</td>
										<td>{{ $client->state }}</td>
										<td>{{ $client->city }}</td>
										<td>{{ $client->email_id }}</td>
										<td>{{ $client->phone_no }}</td>
										<td>
									<div class="custom-control custom-switch">
										<input type="checkbox"  class="custom-control-input" id="customSwitch{{ $client->id }}"  value="{{ $client->id }}" onclick="clientStatus(this.value)" @if($client->is_active==1) checked @endif>
										<label class="custom-control-label" for="customSwitch{{ $client->id }}">@if($client->is_active==1) Active @else Inactive @endif</label>
									</div>
									</td>
									<td> <span   class="edit_user ml-2"  data-id="{{ $client->id }}" onclick="editClient({{ $client->id }})"><img class="menuicon tbl_editbtn" src="{{asset('app-assets/assets/images/edit.svg')}}" >&nbsp;</span>
									</td>
									<!--<td>
									<span="javascript:void(0);" onclick="editClient({{ $client->id }})" style="cursor:pointer"><img class="menuicon" src="{{asset('app-assets/assets/images/edit.svg')}}" height="20" width="20">&nbsp;</span></td>-->
                                
									</tr>
								@endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
<!-- The Modal -->
<div class="modal fade" id="myModal">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">

      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">Add Client</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>
	  <form method="post" id="clientForm" name="clientForm">
	  @csrf
      <!-- Modal body -->
      <div class="modal-body">
        <div class="row" >
            @if(auth()->user()->user_role_id != 3 && auth()->user()->user_role_id != 4)
            <div class="col-lg-4">
			    <label for="name-input" class="col-form-label">Customer Name<span class="text-danger"> * <span></label>
				<select id="customer_id" name="customer_id" type="text" class="form-control" autocomplete="off" required >
                    <option value="">Select Customer</option>
					@forelse($customerData as $customer)
					<option value="{{ $customer->id}}">{{ $customer->customer_name}}</option>
                    @empty
                   
					@endforelse
				</select>
			</div>
            @endif
			<div class="col-lg-4">
			    <label for="name-input" class="col-form-label">Client Name<span class="text-danger"> * <span></label>
				<input id="client_name" name="client_name" type="text" class="form-control" autocomplete="off" placeholder="Enter Client Name" required data-parsley-trigger="focusout" data-parsley-trigger="keyup" data-parsley-pattern="^[A-Za-z . _]*$">
			</div>
            <div class="col-lg-4">
			    <label for="name-input" class="col-form-label">City<span class="text-danger">  <span></label>
				<input id="city" name="city" type="text" class="form-control" autocomplete="off" placeholder="Enter City"  data-parsley-trigger="focusout" data-parsley-trigger="keyup" data-parsley-pattern="^[A-Za-z ][A-Za-z ]*$">
			</div>
		</div>
		<div class="row mt-1">	
            <div class="col-lg-4">
			    <label for="name-input" class="col-form-label">State<span class="text-danger">  <span></label>
				<input id="state" name="state" type="text" class="form-control" autocomplete="off" placeholder="Enter State"  data-parsley-trigger="focusout" data-parsley-trigger="keyup" data-parsley-pattern="^[A-Za-z ][A-Za-z ]*$">
			</div>
			<div class="col-lg-4">
			    <label for="name-input" class="col-form-label">Zipcode<span class="text-danger">  <span></label>
				<input id="zipcode" name="zipcode" type="text" class="form-control" autocomplete="off" placeholder="Enter Zipcode" data-parsley-type="integer" data-parsley-trigger="keyup" data-parsley-type-message ="This value should be a valid number">
			</div>
            <div class="col-lg-4">
			    <label for="name-input" class="col-form-label">Email<span class="text-danger"> * <span></label>
				<input id="email" name="email" type="email" class="form-control" autocomplete="off" placeholder="Enter Email" required data-parsley-type="email" data-parsley-trigger="focusout" data-parsley-checkemail >
			</div>
		</div>
		<div class="row mt-1">	
			<div class="col-lg-4">
				<label for="name-input" class="col-form-label">Contact Number<span class="text-danger">  <span></label>
				<input id="phone_no" name="phone_no" type="text" class="form-control" autocomplete="off" placeholder="Enter Contact Number" data-parsley-type="number" data-parsley-trigger="change" data-parsley-minlength="10" data-parsley-maxlength="15" data-parsley-minlength-message="This value should have minimum 10 characters" data-parsley-maxlength-message="This value should have maximum 15 characters">
			</div>
			<div class="col-lg-4">
			    <label for="name-input" class="col-form-label">Photo<span class="text-danger">  <span></label>
				<input type="file" name="photo" id="photo" class="form-control" data-height="250" data-parsley-trigger="keyup" accept=".jpg,.png,.svg" data-parsley-fileextension='jpg,png,svg,jpeg' data-parsley-errors-container="#startTimeErrorContainer" data-parsley-trigger="change">			
            </div>
            <div class="col-lg-4">
			    <label for="name-input" class="col-form-label">Address<span class="text-danger">  <span></label>
				<textarea id="address" name="address" type="text" class="form-control" autocomplete="off" placeholder="Enter Address" ></textarea>
			</div>
        </div>
		<div class="row mt-1">	
			<div class="col-lg-4">
				<label for="example-email-input" class="col-form-label">Is Active ?</label><br>
				<input type="checkbox" checked value="1" id="isactive" name="is_active" />
			</div>	
        </div>    
      </div>

      <!-- Modal footer -->
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
		<button type="button" class="btn btn-primary" name="submit" id="submit" onclick="clientVal();">Submit</button>
      </div>
	</form>
    </div>
  </div>
</div>
<div class="modal fade" id="myModalEdit">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
   
    <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">Edit Client</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>

      <!-- Modal body -->
      <div class="modal-body">
      <form id="clientUpdateForm" name="clientUpdateForm" method="post" role="form" enctype="multipart/form-data">
      <input type="hidden" name="id" id="id">
		@csrf
		<div id="ramalist"></div>   

      <!-- Modal footer -->

	  </div>
	  <div class="modal-footer">
	  <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
      <button type="button" class="btn btn-primary" name="submit" id="submit" onclick="clientUpdate();">Update</button> 
      </div>
      </form>
    </div>
  </div>
</div>
    <script type="text/javascript">
	$(function () {
				@if(Session::has('success'))
				new PNotify({
				title: 'Success',
				delay: 500,
				text:  "{{Session::get('success')}}",
				type: 'success'
				});
						
				@endif
				@if ($errors->any())
				var err = "";
				@foreach ($errors->all() as $error)
				
					new PNotify({
					title: 'Error',
					text: "{{$error}}",
					delay: 800,
					type: 'error'
					});
					@endforeach
				@endif
			});
       $(document).ready(function()
        {
			var $tabid=  'tab4';
			$(".odtabs").not("#tab4").addClass('btn-outline-secondary');
			$("#tab4").addClass('btn-secondary');

            $('.modal').on('hidden.bs.modal', function() {
                $(this).find('form')[0].reset();
                $(this).find('form').parsley().reset();
            });

			window.ParsleyValidator
			.addValidator('fileextension', function (value, requirement) {
			var tagslistarr = requirement.split(',');
            var fileExtension = value.split('.').pop();
            var arr=[];
            $.each(tagslistarr,function(i,val){
            arr.push(val);
            });
            if(jQuery.inArray(fileExtension, arr)!='-1') {
              return true;
            } else {
              return false;
            }
        }, 32)
        .addMessage('en', 'fileextension', 'The extension doesn\'t match the required');
		$("form").parsley();

            var table = $('#datatable').DataTable({
                responsive: true,
               dom: 'l<"toolbar">Bfrtip',
				buttons: [
					'excel'
				],
                initComplete: function(){
                    $("div.toolbar").html('<button id="addClient" type="button" class="ml-2 btn btn-primary" data-toggle="modal" data-target="#myModal"><img class="menuicon" src="{{asset("app-assets/assets/images/add.svg")}}">&nbsp;Add Client</button><br />');           
                } 
            });
        });
        function getCompany(){
            window.location.href = "/company";
        }
        function getClient(){
            window.location.href = "/client";
        }
		function clientVal(){
            if ($("#clientForm").parsley()) {
                if ($("#clientForm").parsley().validate()) {
                    event.preventDefault();
                    if ($(clientForm).parsley().isValid()) {
                        $.ajax({	
                        type: "POST",
                        cache:false,
                        async: false,
                        url: "{{ url('/clientInsert') }}",
                        data: new FormData($("#clientForm")[0]),
                        processData: false,
                        contentType: false,
                        success: function(response) {
                            if(response.msg=="Client Name Already Exists!"){
                                new PNotify({
                                title: 'Error',
                                text:  response.msg,
                                type: 'error'
                                });
                                return false;
                            } else if(response.msg=="Only Image Allowed!"){
								new PNotify({
                                title: 'Error',
                                text:  response.msg,
                                type: 'error'
                                });
                                return false;
							}else if(response.msg=="Client Added Successfully!"){
                                new PNotify({
                                title: 'Success',
                                text:  response.msg,
                                type: 'success'
                                });
                                setTimeout(function(){  location.reload(); }, 1000);
                            }
                        },
                        error:function(response) {
                            var err = "";
                            $.each(response.responseJSON.errors,function(field_name,error){
                                err = err+error;
                            });
                            new PNotify({
                                title: 'Error',
                                text:err,
                                type: 'error',
                                delay: 1000
                            });
                        }
                        });
                    }
                }
            }
        }
		function clientStatus(value){
			window.location.href = '/clientStatus/' + value;
		}
		function editClient(clientId){
        $("#removeData").remove();
        $.ajax({
            url: "/editClient/" + clientId,
            success: function(data) {
                $("#ramalist").empty();
                $("#ramalist").append(data.data);
                $('#myModalEdit').modal('show'); 
            }
        })
    }
	function clientUpdate(){
        if ($("#clientUpdateForm").parsley()) {
            if ($("#clientUpdateForm").parsley().validate()) {
                event.preventDefault();
                if ($(clientUpdateForm).parsley().isValid()) {
			        $.ajax({	
                        type: "POST",
                        cache:false,
                        async: false,
                        url: "{{ url('/updateClient') }}",
                        data: new FormData($("#clientUpdateForm")[0]),
                        processData: false,
                        contentType: false,
                        success: function(response) {
                            new PNotify({
                                title: 'Success',
                                text:  response.msg,
                                type: 'success'
                            });
                            setTimeout(function(){  location.reload(); }, 800);
                        },
                        error:function(response) {
                            var err = "";
                            $.each(response.responseJSON.errors,function(field_name,error){
                                err = err +'<br>' + error;
                            });
                            new PNotify({
                                title: 'Error',
                                text:err,
                                type: 'error',
                                delay: 2000
                            });
                        }
                        
                    });
			    }
		    }
	    }
	    return false;
    }
    </script>
@endsection