@extends('layouts.app')
@section('title', 'User Client Mapping')

@section('content')
<div class="container-fluid mt-1">
	<x-setting_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"  >
                        <thead>
                            <tr>
                                <th>Sl No</th>
                                <th>User</th>

                                <th>Client</th>
                                <!-- <th>Status</th> -->
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                                                         @forelse($tble_list as $u_row)

                            @php $rows = $all_list->where('user_id',$u_row->user_id);
                            	$row_cnt = count($rows);

                            @endphp
                            <tr>
                        		
                                <td  width="5%">{{$i++}}</td>
                                <td>{{ isset($u_row->getUser) ?$u_row->getUser['first_name'].' '.$u_row->getUser['last_name']: " " }}</td>
                                <td >
                            	@foreach($rows as $list)
                            		@if(!$loop->last)
                            			<div class="row border-bottom px-2">
                            		@else
                            			<div class="row  px-2">
                            		@endif
                        		{{ isset($list->getClient) ?$list->getClient['client_name']: " " }}
                            	</div>	
                           	 	@endforeach
                        		</td>
                             <td><img class="menuicon" onclick="edit('{{ $u_row->user_id }}')" src="{{asset('app-assets/assets/images/edit.svg')}}" ></td>
                            </tr>
                            @empty
                            @endforelse

                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="addformModel">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
    	        <form method="post" name="adduserclientmapping" id="adduserclientmapping" role="form" enctype="multipart/form-data" autocomplete="off" data-parsley-validate>
    	            @csrf
                    <!-- Modal Header -->
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Add User Client Mapping</h5>
    					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
    						<span aria-hidden="true">&times;</span>
    					</button>
                    </div>
                    <!-- Modal body -->
                    <div class="modal-body">
                    	<div class="row">
                        	<div class="col-lg-1">
                                <label for="name-input" class="col-form-label">User <span class="mandatory"> * </span></label>
                            </div>
                            <div class="col-lg-3">
                                 <select required class="form-control" name="user_id" id="user_id">
                                    <option value="">Select User</option>
                                    @foreach($user_list as $userlst)
                                    <option value="{{$userlst->id}}">{{$userlst->first_name}} {{$userlst->last_name}}</option>
                                    @endforeach
                                </select>
                            </div>
                      	</div>
                        <div class="row">
							<div class="col-12" id="editClientDta">			
								<select multiple="multiple" size="10" id="client_ids" name="client_ids[]" title="client_ids[]" >
									@forelse($client_list as $clts)
									<option value="{{$clts->id}}" >{{$clts->client_name}}</option>
									@empty
									@endforelse
								</select>
							</div>

						</div>
                    </div>
                    <div class="modal-footer">
                        <input type="submit" value="Submit" name="submit" id="submit" class="btn btn-primary" >
                        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                    </div>
    	        </form>
            </div>
        </div>
    </div>

     <div class="modal fade" id="histotyModel">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
            	<div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">User Client Mapping History</h5>
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
                </div>
                <div class="modal-body">
	    	        <table id="historytable" class="table table-bordered mb-0"  >
	                    <thead>
	                        <tr>
	                            <th>Sl No</th>
	                            <th>User</th>
	                            <th>Client</th>
	                            <th>Status</th>
	                            <th>Added By</th>
	                            <th>Date Time</th>
	                        </tr>
	                    </thead>
	                    @forelse($map_histry as $k=>$hist)
	                    	<tr>
	                    		<td>{{++$k}}</td>
	                            <td>{{ isset($hist->getUser) ?$hist->getUser['first_name'].' '.$hist->getUser['last_name']: " " }}</td>
	                            <td>{{ isset($hist->getClient) ?$hist->getClient['client_name']: " " }}</td>
	                            <td>{{ ($hist->is_active ==1) ?'Active': "Inactive" }}</td>
	                             <td>{{ isset($hist->getupdatedBy) ?$hist->getupdatedBy['first_name'].' '.$hist->getUser['last_name']: " " }}</td>
	                            <td>{{ $hist->date_time}}</td>
	                        </tr>
	                    @empty
	                    @endforelse
	                    <tbody>
	                    </tbody>
	                </table>
	            </div>
            </div>
        </div>
    </div>



</div>
@endsection
@section('script')
<x-alert/>
<script type="text/javascript">
	
$(document).ready(function() {
		$(".odtabs").not("#tab5").addClass('btn-outline-secondary');
		$("#tab5").addClass('btn-secondary');
	

	 
	var demo1 = $('select[name="client_ids[]"]').bootstrapDualListbox({
		nonSelectedListLabel: 'Non-selected Client',
		selectedListLabel: 'Selected Client',
		moveOnSelect: false,
		moveAllLabel:"",
		removeAllLabel:"",
		removeSelectedLabel:""
	});

	 $("#user_id").change(function()
    {
        var user_id = $(this).val();
      

        if(user_id != "")
        {
            changeUser(user_id);
        }
        else
        {
        	$('[name="client_ids[]"] option').prop('selected', false);
        	$('[name="client_ids[]"]').bootstrapDualListbox('refresh', true);
        }
    });

});

   
var table = $('#datatable').DataTable({
		responsive: true,
		dom: 'l<"toolbar">Bfrtip',
        buttons: 
        [
            'excel'
        ],
		initComplete: function()
		{
		    $("div.toolbar").html('<button id="addlenderUser" type="button" class="ml-2 tble_btn btn btn-primary" data-toggle="modal" data-target="#addformModel"><img class="menuicon" src="{{asset("app-assets/assets/images/add.svg")}}">&nbsp;Add User Client Mapping</button><span class="px-2 menuicon" data-toggle="modal" data-target="#histotyModel" data-bs-toggle="tooltip" data-bs-placement="top" title="View History"><i class="fa-solid fa-eye"></i></span>');
		}
    });
	var table = $('#historytable').DataTable({
		responsive: true,
		 bFilter: false,
		 // bInfo: false,
		 "bLengthChange": false
		
    });
    $('#adduserclientmapping').on('submit', function(event)
	{
		event.preventDefault();

		$role_id=$('#client_ids').val();
		if( $role_id == "")
		{
			new PNotify({
					title: 'Error',
					text:  "Please select at least one client",
					type: 'error'
					});
		}
		else
		{
		var url = '{{ route("addUserClients") }}';
		$.ajax({
			type: "post",
			url: url,
			data: $(this).serialize(),
			success: function(response)
			{
				if(response.data =='success')
				{
					new PNotify({
						title: 'Success',
						text:  response.msg,
						type: 'success'
						});
				}
				else
				{
					new PNotify({
					title: 'Error',
					text:  response.msg,
					type: 'error'
					});
				}
				setTimeout(function(){  location.reload(); }, 1000);

			},
			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'
					});

				},
			});
		}

	});
    function edit(id)
    {
      	$("#addformModel").modal('show');
      	$("#user_id").val(id).change();
        changeUser(id);
        return false;
    }
    function changeUser(id)
    {
    	var url = '/userclientEdit/'+id;
        $.ajax({
            url:url,
            dataType:'json',
            success:function(response) 
            {	

                $('[name="client_ids[]"] option').prop('selected', false);
                if(response.length === 0 )
                {
                    $('[name="client_ids[]"] option').prop('selected', false);
                }
                else
                {
                    $.each(response.data, function (i, item) 
                    {
                        $('[name="client_ids[]"] option[value="'+item.client_id+'"]').prop('selected', true);

                    });
                }
                $('[name="client_ids[]"]').bootstrapDualListbox('refresh', true);
            }
        });

    }
</script>
@endsection