@extends('layouts.app')

@section('title', 'Abstractor User')
@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</th>
                                    <th>Abstractor</th>
                                    <th>First Name</th>
                                    <th>Last Name</th>
                                    <th>Email</th>
                                    <th>User Role</th>
                                    <th>Status</th>
									<th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
																@foreach($abstractorsusers as $absusers)
									<tr>
										<td>{{ $i++ }}</td>
										<td>{{ $absusers->abstractor_name}}</td>
										<td>{{ $absusers->first_name}}</td>
										<td>{{ $absusers->last_name}}</td>
										<td>{{ $absusers->email}}</td>
										<td>{{ $absusers->user_roles}}</td>
										<td>
									<div class="custom-control custom-switch">
										<input type="checkbox"  class="custom-control-input" id="customSwitch{{ $absusers->id }}"  value="{{ $absusers->id }}" onclick="usersStatus(this.value)" @if($absusers->is_active==1) checked @endif>
										<label class="custom-control-label" for="customSwitch{{ $absusers->id }}">@if($absusers->is_active==1) Active @else Inactive @endif</label>
									</div>
									</td>
									<td> <span  class="edit_user ml-2 "  data-id="{{ $absusers->id }}" onclick="editUsers({{ $absusers->id }})"><img class="menuicon tbl_editbtn" src="{{asset('app-assets/assets/images/edit.svg')}}" >&nbsp;</span>
									</td>
									<!--<td>
									<span="javascript:void(0);" onclick="editUsers({{ $absusers->id }})" style="cursor:pointer"><img class="menuicon" src="{{asset('app-assets/assets/images/edit.svg')}}" height="30" 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">
    <form id="userForm" name="userForm" method="post" role="form" enctype="multipart/form-data">
    @csrf  
    <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">Add Abstractor Users</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>

      <!-- Modal body -->
      <div class="modal-body">
        <div class="row">
				<div class="col-lg-4">
                        <label for="name-input" class="col-form-label">Abstractor <span class="text-danger"> * <span></label>
                            <select id="abstractor_id" name="abstractor_id" type="text" class="form-control" autocomplete="off" required>
								<option value="">Select Abstractor </option>
								@foreach($abstractorsmasters as $absmaster)
								<option value="{{ $absmaster->id }}">{{ $absmaster->abstractor_name }}</option>
								@endforeach
							</select>
                </div>
                <div class="col-lg-4">
                    <label for="name-input" class="col-form-label">First Name<span class="text-danger"> * <span></label>
                    <input id="firstname" name="firstname" type="text" class="form-control" autocomplete="off" placeholder="Enter Firstname"  required 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">Last Name</label>
                    <input id="lastname" name="lastname" type="text" class="form-control" autocomplete="off" placeholder="Enter Lastname"  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">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 class="col-lg-4">
                <label for="name-input" class="col-form-label">Password<span class="text-danger"> * <span></label>
                <input id="password" name="password" type="password" class="form-control" autocomplete="off" placeholder="Enter Password" required>
			</div> 
			 <div class="col-lg-4">
                <label for="name-input" class="col-form-label">User Role<span class="text-danger"> * <span></label>
                <select type="text" name="user_role_id" id="user_role_id" class="form-control" required> 
                    <option value="5">Abstractor</option>
                </select>
            </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="isactive" />
			</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="UserVal();">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 Abstractor Users</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>

      <!-- Modal body -->
      <div class="modal-body">
      <form id="usersUpdateForm" name="usersUpdateForm" method="post" role="form" enctype="multipart/form-data">
		@csrf
		<div id="ramalist"></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="usersUpdate();">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=  'tab13';
			$(".odtabs").not("#tab13").addClass('btn-outline-secondary');
			$("#tab13").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="addUsers" 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 Abstractor Users</button><br />');           
                }
            });
        });
        function getCompany(){
            window.location.href = "/company";
        }
        function UserVal(){
            if ($("#userForm").parsley()) {
                if ($("#userForm").parsley().validate()) {
                    event.preventDefault();
                    if ($(userForm).parsley().isValid()) {
                        $.ajax({	
                        type: "POST",
                        cache:false,
                        async: false,
                        url: "{{ url('/userInsert') }}",
                        data: new FormData($("#userForm")[0]),
                        processData: false,
                        contentType: false,
                        success: function(response) {
							if(response.msg=="Abstractor Users Added Successfully!"){
                                new PNotify({
                                title: 'Success',
                                text:  response.msg,
                                type: 'success'
                                });
                                setTimeout(function(){  location.reload(); }, 1000);
                            } else {
								new PNotify({
                                title: 'Error',
                                text:  response.msg,
                                type: 'error'
                                });
								return false;
							}
                        },
                        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 usersStatus(value) 
    {
        window.location.href = '/usersStatus/' + value;
    }
    function editUsers(usersId){
        $("#removeData").remove();
        $.ajax({
            url: "/editUsers/" + usersId,
            success: function(data) {
                $("#ramalist").empty();
                $("#ramalist").append(data.data);
                $('#myModalEdit').modal('show'); 
            }
        })
    }
    function usersUpdate(){
        if ($("#usersUpdateForm").parsley()) {
        if ($("#usersUpdateForm").parsley().validate()) {
            event.preventDefault();
            if ($(usersUpdateForm).parsley().isValid()) {
			$.ajax({	
			type: "POST",
			cache:false,
			async: false,
			url: "{{ url('/updateUsers') }}",
			data: new FormData($("#usersUpdateForm")[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