@extends('layouts.backend-app')
@push('styles')
<link rel="stylesheet" type="text/css" href="{{asset('backend-assets/plugins/iziToast/iziToast.min.css')}}">
<style>
    .modal-confirm {
      color: #636363;
      width: 400px;
    }

    .modal-confirm .modal-content {
      padding: 20px;
      border-radius: 5px;
      border: none;
      text-align: center;
      font-size: 14px;
    }

    .modal-confirm .modal-header {
      border-bottom: none;
      position: relative;
    }

    .modal-confirm h4 {
      text-align: center;
      font-size: 26px;
      margin: 30px 0 -10px;
    }

    .modal-confirm .close {
      position: absolute;
      top: -5px;
      right: -2px;
    }

    .modal-confirm .modal-body {
      color: #999;
    }

    .modal-confirm .modal-footer {
      border: none;
      text-align: center;
      border-radius: 5px;
      font-size: 13px;
      padding: 10px 15px 25px;
    }

    .modal-confirm .modal-footer a {
      color: #999;
    }

    .modal-confirm .icon-box {
      width: 80px;
      height: 80px;
      margin: 0 auto;
      border-radius: 50%;
      z-index: 9;
      text-align: center;
      border: 3px solid #f15e5e;
    }

    .modal-confirm .icon-box i {
      color: #f15e5e;
      font-size: 46px;
      display: inline-block;
      margin-top: 13px;
    }

    .modal-confirm .btn {
      border-radius: 4px;
      background: #60c7c1;
      text-decoration: none;
      transition: all 0.4s;
      line-height: normal;
      min-width: 120px;
      border: none;
      min-height: 40px;
      border-radius: 3px;
      margin: 0 5px;
    }

    .modal-confirm .btn-secondary {
      /* background: #c1c1c1; */
      background-color: #ECECEC;
    }

    .modal-confirm .btn-secondary:hover,
    .modal-confirm .btn-secondary:focus {
      /* background: #a8a8a8; */
      background-color: #ECECEC;
      color: #636363;
    }

    .modal-confirm .btn-danger {
      background: #f15e5e;
    }

    .modal-confirm .btn-danger:hover,
    .modal-confirm .btn-danger:focus {
      background: #ee3535;
    }

    .trigger-btn {
      display: inline-block;
      margin: 100px auto;
    }

    .btn-cancel {
      color: #636363;
    }

    .btn-del {
      color: white;
    }
	label.error{
		color: red;
	}
	input.error{
		border: 1px solid red;
	}

  </style>
@endpush
@section('content')
<!-- BEGIN: Content-->
<div class="page-body">
	<div class="container-fluid">        
		<div class="page-title">
			<div class="row">
				<div class="col-6">
					<h3>Users</h3>
				</div>
				<div class="col-6">
					<ol class="breadcrumb">
					<li class="breadcrumb-item"><a href="{{url('dashboard')}}"> <i data-feather="home"></i></a></li>
					<li class="breadcrumb-item active">Users</li>
					</ol>
				</div>
			</div>
		</div>
	</div>
	<div class="container-fluid">

		<div class="row">
			<div class="col-12">
				<div class="card">
					<div class="card-content collapse show">
						<div class="card-body">
								<div class="row">
									<div class="col-12">
										<div class="card">
											<div class="card-header">
												<h5 class="mb-0">Users</h5>
												<div class="media-body text-end">
													<button id="create_button" class="btn btn-primary" type="button" data-bs-toggle="modal" data-bs-target="#add-user"  data-bs-original-title="" title=""><i data-feather="plus-square"></i> Add New</button>    
												</div>        
											</div>
											<div class="card-content collapse show">
												<div class="table-responsive">
													<table class="service-table table table-hover mb-0">
														<thead>
															<tr class="table-header">
																<th>S.no</th>
																<th>Name</th>
																<th>Email</th>
																<th>Phone</th>
																<th>Role</th>
																<th>Status</th>
																<th class="last-text text-right">Action</th>
															</tr>
														</thead>														
													</table>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
<!-- END: Content-->
	<!-- The Modal -->
	<div class="modal fade" id="add-user" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
          	<div class="modal-content" style="padding:10px;">
            	<div class="modal-header">
              		<h5 class="modal-title" id="exampleModalLabel2">Add User</h5>
              		<button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"></button>
            	</div>
				<form id="TestForm" name="TestForm" class="form-horizontal">
					@csrf
					<input type="hidden" name="user_id" id="user_id">

					<div class="row">
                  <div class="col-lg-6">
                    <div class="mb-3">
                      <label class="col-form-label" for="name">Name :</label>
                      <input class="form-control" type="text" name="name" id="name" value="">
                    </div>  
                  </div> 
                  <div class="col-lg-6">
                    <div class="mb-3">
                      <label class="col-form-label" for="email">Email  :</label>
                      <input class="form-control" type="email" name="email" id="email"  value="">
                    </div>  
                  </div>                                     
                  <div class="col-lg-6">
                    <div class="mb-3">
                      <label class="col-form-label" for="mobile">Mobile Number :</label>
                      <input class="form-control" type="text" name="mobile" id="mobile" value="">
                    </div>  
                  </div> 
                  <div class="col-lg-6">
                      <div class="mb-3">
                        <label class="col-form-label" for="user_role"> User Role   :</label>
                        <select class="custom-select form-control" id="user_role" name="user_role">
							<option value="">Select a user role</option>
							@if(count($user_roles))
								@foreach($user_roles as $user_role)
									<option value="{{$user_role->id}}">{{$user_role->name}}</option>
								@endforeach
							@endif
						</select>
                      </div>  
                  </div> 

                  <div class="col-lg-6" id="password_box">
                        <div class="mb-3">
                          <label class="col-form-label" for="password">Password  :</label>
                          <input class="form-control" type="password" name="password" id="password" value="">
                        </div>  
                  </div> 

                  <div class="col-lg-6" id="cpassword_box">
                        <div class="mb-3">
                          <label class="col-form-label" for="password_confirm">Confirm Password  :</label>
                          <input class="form-control" type="password" value="" id="password_confirm" name="password_confirm">
                        </div>  
                  </div> 


                  <div class="col-lg-6">
                        <div class="mb-3">
                          <label class="col-form-label" for="recipient-name">Status  :</label>
                          <select class="form-control" id="status" name="status">
						  	<option value="1">Active</option><option value="0">In-active</option>
						</select>
                        </div>  
                  </div> 
                </div>
					<div class="modal-footer">
						<button class="btn btn-primary" id="savebtn" type="submit">Submit</button>
						<button class="btn btn-light" type="button" data-bs-dismiss="modal">Close</button>             
					</div>
				</form>
			</div>
		</div>
    </div>
	<!-- End Modal -->
</div>

@endsection
@push('javascript')
<!-- BEGIN : Validation Scripts -->
	<script src="{{asset('backend-assets/js/validation/jquery.validate.min.js')}}" type="text/javascript"></script>
	<script src="{{asset('backend-assets/js/validation/additional-methods.min.js')}}" type="text/javascript"></script>
	<script src="{{asset('backend-assets/plugins/iziToast/iziToast.min.js')}}" type="text/javascript"></script>
<!-- END:Validation Scripts -->
<script>
let dTable = '';
$(function () {
	$.ajaxSetup({
		headers: {
			'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
		}
	});
	fetchTable();
});
function fetchTable(){
	var table=$(".service-table");
	if(dTable!=''){
		table.DataTable().clear().destroy();
	}
	var dTable = table.DataTable({
		processing: true,
		serverSide: true,
		stateSave: true,
		order:[[0,'desc']],
		ajax: {
			url: "{{ route('admin.user.index') }}",
			type: 'GET',
			data:{_token: '{{csrf_token()}}'},
		},
		columns: [
				{data: 'DT_RowIndex', name: 'DT_RowIndex'},
				{data: 'name', name: 'name'},
                {data: 'email', name: 'email'},
                {data: 'mobile', name: 'mobile'},
                {data: 'role', name: 'role'},
                {data: 'status', name: 'status'},
				{data: 'action', name: 'action',searchable:true,orderable:false},
		
		],
		"drawCallback": function( settings ) {
        	feather.replace();
    	}
	}).draw();
}

$(document).on('click','#create_button',function () {
	$('#savebtn').html("Submit");
	$('#user_role').val('');
	$('#TestForm').trigger("reset");
	$('#modelHeading').html("Create New User");
	$('#password_box').show();
	$('#cpassword_box').show();
	$('#user_id').val('');
	$('#name').val('');
	$('#email').val('');
	$('#mobile').val('');
	$('#user_role').val(0).trigger('change');
	$('#add-user').modal('show');
});
$(document).on('click','#savebtn',function (e) {
	var formId = "#TestForm";
	var thizSelector = $(this);
	// $(this).html('Sending..');
	$("form"+formId).validate({
		errorElement: "label",
		rules: {
			name:{required:true},
			email:{required:true},
			mobile:{required:true},
			user_role:{required:true},
			password: {
				required: true,
				minlength: 6
			},
			password_confirm: {
				required: true,
				minlength: 6,
				equalTo: "#password"
			}
		},
		messages: {
			name:{required:"Please enter user name"},
			email:{required:"Please enter email"},
			mobile:{required:"Please enter mobile number"},
			user_role:{required:"Please select user role"},
			password : {required: "Please enter password"},
			password_confirm : {required: "Please enter password"},
			
		},
		focusInvalid: true,
		invalidHandler: function() {
			$(this).find(":input.error:first").focus();
		},
		errorPlacement: function(error,element) {
			if(element.is(":radio"))
			{
				error.insertAfter(element.parents('checkboxsequence'));
			}
			else if(element.is(":checkbox")){
				// element.parents('.checkboxsequence').css({"color": "red", "border": "2px solid red"});
				error.appendTo(element.parents('.checkboxsequence'));
			}
			else{
				error.insertAfter(element);
			}
		},
		submitHandler:function(e)
		{
			var formData = new FormData($(formId)[0]);
			$.ajax({
				data: formData,
				url: "{{ route('admin.user.store') }}",
				type: "POST",
				processData: false,
				contentType: false,
				dataType: 'json',
				success: function (response) {
					if(response.success){
						iziToast.success({
							title: 'success',
							message: response.message,
						});
					}else{
						iziToast.error({
							title: 'Warning',
							message: response.message,
						});
					}
					$('#TestForm').trigger("reset");
					$('#add-user').modal('hide');
					fetchTable();
				
				},
				error: function (data) {
					console.log('Error:', data);
					$('#savebtn').html('Save Changes');
				}
			});
		}

	});
});
$(document).on('click', '.editTest', function () {
	var user_id = $(this).data('id');
	$.get("{{ url('admin/user') }}" +'/' + user_id +'/edit', function (data) {
			$('#modelHeading').html("Edit User");
			$('#savebtn').html("Update");
			$('#add-user').modal('show');
			$('#user_id').val(data.id);
			$('#name').val(data.name);
			$('#email').val(data.email);
			$('#mobile').val(data.mobile);
			$('#user_role').val(data.role_id).trigger('change');
			$('#password_box').hide();
			$('#cpassword_box').hide();

			
	})
});

$(document).on('click',".updateStatus",function(){
	var user_id = $(this).data('id');
	var user_status = $(this).data('status');
	let fun = function(){
		var url = "{{route('admin.user.updatestatus',':id') }}";
		url = url.replace(":id",user_id);
		
		$.ajax({
			url: url,
			type: "POST",
			data:{
				_token: '{{csrf_token()}}',
				status:user_status
			},
			success: function (response) {
				if(response.success)
				{
					iziToast.success({
						title: 'success',
						message: response.message,
					});
				}else{
					iziToast.error({
							title: 'Warning',
							message: response.message,
						});
				}
					fetchTable();
			},
			error: function (response) {
					console.log('Error:', response);
			}
		});
	};
	showDynamicModal('confirm','confirmation','Confirmation','Do you really want to update the status?',fun);
})	

function deleteUser(user_id){
	let fun = function(){
		var url = "{{route('admin.user.destroy',':id') }}";
		url = url.replace(":id",user_id);
		$.ajax({
			url: url,
			type: "DELETE",
			data: {_token: '{{csrf_token()}}'},
			success: function (response) {
				if(response.success)
				{
					iziToast.success({
						title: 'success',
						message: response.message,
					});
				}else{
					iziToast.error({
							title: 'Warning',
							message: response.message,
						});
				}
					fetchTable();
			},
			error: function (response) {
					console.log('Error:', response);
			}
		});
	};
	showDynamicModal('confirm','confirmation','Confirmation','Do you really want to delete?',fun);
}
function showDynamicModal(id,type,title,content,cbFn)
{
	let cbBtn = '',okTxt = 'Ok',btnCls='secondary';
	if(type=='confirmation'){
		okTxt = 'No';
		btnCls='light';
		cbBtn = '<button type="button" class="btn btn-primary" id="confirm-ok">Yes</button>';
	}
	var modal = '<div class="modal fade" id="'+id+'" tabindex="-1" role="dialog"  aria-hidden="true">'+
					'<div class="modal-dialog modal-confirm modal-dialog-centered" role="document">'+
						'<div class="modal-content">'+
							'<div class="modal-header modal-header flex-column">'+
								'<button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"></button>'+
								'<h5 class="modal-title">'+title+'</h5>'+								
							'</div>'+
							'<div class="modal-body">'+content+'</div>'+
							'<div class="modal-footer justify-content-center">'+cbBtn+
								'<button type="button" class="btn btn-'+btnCls+'" data-bs-dismiss="modal">'+okTxt+'</button>'+
							'</div>'+
						'</div>'+
						
					'</div>'+
				'</div>';
	$('html>body').append(modal);
	$('#'+id).modal('show');
	$('#'+id).on('hidden.bs.modal', function(e) { $('#'+id).remove(); })
	$('#'+id+' #confirm-ok').click(function(e)
	{
		e.preventDefault();
		$('#'+id).modal('hide');
		return cbFn();
	});
}
</script>
@endpush