@extends('admin.partial.template-full')

@section('section')
<div class="title d-flex justify-content-between align-items-center">
	<h3 class="font-weight-bold">Users</h3>
	<form method="get">
		<input type="hidden" name="a" value="search">
		<div class="input-group">
			<input class="form-control" name="q" placeholder="Search usernames" value="{{request()->input('q')}}">
			<div class="input-group-append">
				<button type="submit" class="btn btn-primary">
					<i class="fas fa-search"></i>
				</button>
			</div>
		</div>
	</form>
</div>
<hr>
<div v-if="selectedAll">
	<button class="btn btn-danger font-weight-bold mb-3" id="selectedAllInput" @@click="deleteSelected">Delete selected accounts</button>
</div>
<div class="table-responsive">
	<table class="table">
		<thead class="bg-light">
			<tr class="text-center">
				<th scope="col" class="border-0" width="1%">
					<div class="custom-control custom-checkbox account-select-check">
						<input type="checkbox" class="custom-control-input" id="allCheck" v-model="selectedAll">
						<label class="custom-control-label" for="allCheck"></label>
					</div>
				</th>
				<th scope="col" class="border-0" width="5%">
					<span>ID</span> 
				</th>
				<th scope="col" class="border-0" width="40%">
					<span>Username</span>
				</th>
				<th scope="col" class="border-0" width="5%">
					<span>Statuses</span>
				</th>
				<th scope="col" class="border-0" width="5%">
					<span>Followers</span>
				</th>
				<th scope="col" class="border-0" width="5%">
					<span>Following</span>
				</th>
				<th scope="col" class="border-0" width="30%">
					<span>Actions</span>
				</th>
			</tr>
		</thead>
		<tbody>
			@foreach($users as $key => $user)
			@if($user->status == 'deleted')
			<tr class="font-weight-bold text-center user-row">
				<th scope="row">
					<div class="custom-control custom-checkbox account-select-check">
						<input type="checkbox" class="custom-control-input" disabled>
						<label class="custom-control-label"></label>
					</div>
				</th>
				<td>
					<span class="text-danger" class="text-monospace">{{$user->id}}</span>
				</td>
				<td class="text-left">
					<img src="/storage/avatars/default.jpg" width="20" height="20" class="rounded-circle mr-1" />

					<span title="{{$user->username}}" data-toggle="tooltip" data-placement="bottom">
						<span class="text-danger">{{$user->username}}</span>
					</span>
				</td>
				<td>0</td>
				<td>0</td>
				<td>0</td>
				<td>
					<span class="font-weight-bold small">
						<span class="text-danger">Account Deleted</span>
					</span>
				</td>
			</tr>
			@else 
			<tr class="font-weight-bold text-center user-row">
				<th scope="row">
					<div class="custom-control custom-checkbox account-select-check">
						<input type="checkbox" id="{{$key}}" class="custom-control-input action-check" data-id="{{$user->id}}" data-username="{{$user->username}}">
						<label class="custom-control-label" for="{{$key}}"></label>
					</div>
				</th>
				<td>
					<span class="text-monospace">{{$user->id}}</span>
				</td>
				<td class="d-flex align-items-center">
					@if($user->account)
					<img src="{{$user->account['avatar']}}" width="20" height="20" class="rounded-circle mr-2" onerror="this.src='/storage/avatars/default.jpg';this.onerror=null;" />
					@endif
					<span title="{{$user->username}}" data-toggle="tooltip" data-placement="bottom">
						<span>{{$user->username}}</span>
						@if($user->is_admin)
						<i class="text-danger fas fa-certificate" title="Admin"></i>
						@endif
					</span>
				</td>
				<td>
					@if($user->account)
					 {{$user->account['statuses_count']}}
					@else
					0
					@endif
				</td>
				<td>
					@if($user->account)
					 {{$user->account['followers_count']}}
					@else
					0
					@endif
				</td>
				<td>
					@if($user->account)
					 {{$user->account['following_count']}}
					@else
					0
					@endif
				</td>
				<td>
					<span class="action-row font-weight-lighter">
						<a href="/{{$user->username}}" class="pr-2 text-muted small font-weight-bold" title="View Profile" data-toggle="tooltip" data-placement="bottom">
							Profile
						</a>

						<a href="/i/admin/users/show/{{$user->id}}" class="pr-2 text-muted small font-weight-bold" title="Profile Review" data-toggle="tooltip" data-placement="bottom">
							Review
						</a>

						<a href="/i/admin/users/modtools/{{$user->id}}" class="pr-2 text-muted small font-weight-bold" title="Moderation Logs" data-toggle="tooltip" data-placement="bottom">
							Mod Tools
						</a>
						@if($user->status !== 'deleted' && !$user->is_admin)
						<a href="/i/admin/users/delete/{{$user->id}}" class="pr-2 text-muted small font-weight-bold" title="Delete account" data-toggle="tooltip" data-placement="bottom" onclick="deleteAccount({{$user->id}})">
							Delete
						</a>
						@endif
					</span>
				</td>
			</tr>
			@endif
			@endforeach
		</tbody>
	</table>
</div>
<div class="d-flex justify-content-center mt-5 small">
	<ul class="pagination">
		@if($pagination['prev'] !== null || $pagination['prev'] == 1)
		<li class="page-item"><a class="page-link pagination__prev" href="?page={{$pagination['prev']}}{{$pagination['query']}}" rel="prev">« Previous</a></li>
		@else
		<li class="page-item disabled"><span class="page-link" >« Previous</span></li>
		@endif
		<li class="page-item"><a class="page-link pagination__next" href="?page={{$pagination['next']}}{{$pagination['query']}}" rel="next">Next »</a></li>
	</ul>
</div>
@endsection

@push('styles')
<style type="text/css">
	.user-row:hover {
		background-color: #eff8ff;
	}
	.user-row:hover .action-row {
		display: block;
	}
	.user-row:hover .last-active {
		display: none;
	}
</style>
@endpush
@push('scripts')
<script type="text/javascript">
	$(document).ready(function() {
		$('.human-size').each(function(d,a) {
			let el = $(a);
			let size = el.data('bytes');
			el.text(filesize(size, {round: 0}));
		});
	});

	function deleteAccount(id) {
		event.preventDefault();
		if(!window.confirm('Are you sure you want to delete this account?')) {
			return;
		}

		axios.post('/i/admin/users/delete/' + id)
		.then(res => {
			swal('Account Deleted', 'Successfully deleted this account! This page will refresh once you press OK.', 'success')
			.then(res => {
				window.location.reload();
			});
		})
	}

	let app = new Vue({
		el: '#panel',

		data() {
			return {
				selectedAll: false
			}
		},

		watch: {
			selectedAll(val) {
				if(val) {
					if(document.querySelectorAll('.action-check').length == 0) {
						this.selectedAll = false;
						return;
					}
					document.querySelectorAll('.action-check').forEach(v => v.checked = true)
				} else {
					document.querySelectorAll('.action-check').forEach(v => v.checked = false)
				}
			}
		},

		methods: {
			async deleteSelected() {
				let usernames = [...document.querySelectorAll('.action-check:checked')].map(el => el.dataset.username);
				let ids = [...document.querySelectorAll('.action-check:checked')].map(el => el.dataset.id);

				swal({
					title: 'Confirm mass deletion',
					text: "Are you sure you want to delete the following accounts: \n\n" + usernames.join(" \n"),
					icon: 'warning',
					dangerMode: true,
					buttons: {
						cancel: {
							text: "Cancel",
							value: false,
							closeModal: true,
							visible: true,
						},
						delete: {
							text: "Delete",
							value: "delete",
							className: "btn-danger"
						}
					}
				})
				.then(async (res) => {
					if(res !== 'delete') {
						swal('Mass delete cancelled', '', 'success');
					} else {
						swal({
							title: 'Processing mass deletes',
							text: 'Do not close or navigate away from this page while we process this request',
							icon: 'warning',
							timer: 4000
						})

						await axios.all(ids.map((acct) => this.deleteAccountById(acct)))
						.finally(() => {
							swal({
								title: 'Accounts successfully deleted!',
								text: 'This page will refresh shortly!',
								icon: 'success',
								timer: 1000
							})
							setTimeout(() => {
								window.location.reload();
							}, 10000)
						})
					}
				})
			},

			async deleteAccountById(id) {
				await axios.post('/i/admin/users/delete/' + id)
			}
		}
	});

</script>
@endpush