@extends('layouts.app')
@section('title', 'User State 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>State</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']: " " }}</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->getState) ?$list->getState['state_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="adduserstatemapping" id="adduserstatemapping" 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 State 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="state_id" name="state_id[]" title="state_id[]" >
									@forelse($state_list as $clts)
									<option value="{{$clts->id}}" >{{$clts->state_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 State 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>State</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->getState) ?$hist->getState['state_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("#tab6").addClass('btn-outline-secondary');
		$("#tab6").addClass('btn-secondary');
	

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

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

        if(user_id != "")
        {
            changeUser(user_id);
        }
        else
        {
        	$('[name="state_id[]"] option').prop('selected', false);
        	$('[name="state_id[]"]').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 State 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>');
		},
	   'columnDefs': [ {
			'targets': [3],
			'orderable': false,
		}]
    });
var table = $('#historytable').DataTable({
		responsive: true,
		 bFilter: false,
		 // bInfo: false,
		 "bLengthChange": false

		
    });
    $('#adduserstatemapping').on('submit', function(event)
	{
		event.preventDefault();

		$role_id=$('#state_id').val();
		if( $role_id == "")
		{
			new PNotify({
					title: 'Error',
					text:  "Please select at least one state",
					type: 'error'
					});
		}
		else
		{
		var url = '{{ route("addUserStates") }}';
		$.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 = '/userStateEdit/'+id;
        $.ajax({
            url:url,
            dataType:'json',
            success:function(response) 
            {	

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

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

    }
</script>
@endsection