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

@section('section')
<div class="title">
	<h3 class="font-weight-bold d-inline-block">Profiles</h3>
	<span class="float-right">
		<a class="btn btn-{{request()->input('layout')=='card'?'primary':'light'}} btn-sm" href="{{route('admin.profiles',[
			'layout'=>'card', 
			'search' => request()->input('search'),
			'page' => request()->input('page') ?? 1,
			'filter' => request()->filter,
			'order' => request()->order
			])}}">
			<i class="fas fa-th"></i>
		</a>
		<a class="btn btn-{{request()->input('layout')!=='card'?'primary':'light'}} btn-sm mr-3" href="{{route('admin.profiles',[
			'layout'=>'list', 
			'search' => request()->input('search'),
			'page' => request()->input('page') ?? 1,
			'filter' => request()->filter,
			'order' => request()->order
			])}}">
			<i class="fas fa-list"></i>
		</a>
		<div class="dropdown d-inline-block">
			<button class="btn btn-light btn-sm dropdown-toggle font-weight-bold" type="button" id="filterDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
				<i class="fas fa-filter"></i>
			</button>
			<div class="dropdown-menu dropdown-menu-right" aria-labelledby="filterDropdown" style="width: 300px;">
				<div class="dropdown-item">
					<form>
						<input type="hidden" name="layout" value="{{request()->input('layout')}}"></input>
						<input type="hidden" name="page" value="{{request()->input('page')}}"></input>
						<div class="input-group input-group-sm">
							<input class="form-control" name="search" placeholder="Filter by username" autocomplete="off" value="{{request()->input('search')}}">
							<div class="input-group-append">
								<button class="btn btn-outline-primary" type="submit">Filter</button>
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>
	</span>
</div>
<hr>
@if(request()->input('layout') !== 'card')
<div class="mb-3 bulk-actions d-none">
	<div class="d-flex justify-content-between">
		<span>
			<span class="bulk-count font-weight-bold" data-count="0">
				0
			</span>
			<span class="bulk-desc"> items selected</span>
		</span>
		<span class="d-inline-flex">
			<select class="custom-select custom-select-sm font-weight-bold bulk-action">
				<option selected disabled="">Select Bulk Action</option>
				<option value="1" disabled="">Review (Coming in v0.9.0)</option>
				<option value="2">Add C/W</option>
				<option value="3">Unlist from timelines</option>
				<option value="4">No Autolinking</option>
				<option value="5">Suspend</option>
				<option value="6">Delete</option>
			</select>
			<a class="btn btn-outline-primary btn-sm ml-3 font-weight-bold apply-bulk" href="#">
				Apply
			</a>
		</span>
	</div>
</div>
<div class="table-responsive">
	<table class="table">
		<thead class="bg-light">
			<tr>
				<th class="border-0" width="5%">
					<div class="custom-control custom-checkbox table-check">
						<input type="checkbox" class="custom-control-input row-check-item row-check-all" id="row-check-all">
						<label class="custom-control-label" for="row-check-all"></label>
					</div>
				</th>
				<th scope="col" class="border-0" width="10%">
					<span>
						ID
						@if(request()->filter && request()->filter == 'id' && request()->order == 'asc')
						<a href="#" class="col-ord" data-col="id" data-dir="desc"><i class="fas fa-chevron-down"></i></a>
						@else
						<a href="#" class="col-ord" data-col="id" data-dir="asc"><i class="fas fa-chevron-up"></i></a>
						@endif
					</span> 
				</th>
				<th scope="col" class="border-0" width="15%">
					<span>
						Username
						@if(request()->filter && request()->filter == 'username' && request()->order == 'asc')
						<a href="#" class="col-ord" data-col="username" data-dir="desc"><i class="fas fa-chevron-down"></i></a>
						@else
						<a href="#" class="col-ord" data-col="username" data-dir="asc"><i class="fas fa-chevron-up"></i></a>
						@endif
					</span>
				</th>
				<th scope="col" class="border-0" width="20%">
					<span>
						Followers
						@if(request()->filter && request()->filter == 'followers_count' && request()->order == 'asc')
						<a href="#" class="col-ord" data-col="followers_count" data-dir="desc"><i class="fas fa-chevron-down"></i></a>
						@else
						<a href="#" class="col-ord" data-col="followers_count" data-dir="asc"><i class="fas fa-chevron-up"></i></a>
						@endif
					</span>
				</th>
				<th scope="col" class="border-0" width="20%">
					<span>
						Likes
						@if(request()->filter && request()->filter == 'likes_count' && request()->order == 'asc')
						<a href="#" class="col-ord" data-col="likes_count" data-dir="desc"><i class="fas fa-chevron-down"></i></a>
						@else
						<a href="#" class="col-ord" data-col="likes_count" data-dir="asc"><i class="fas fa-chevron-up"></i></a>
						@endif
					</span>
				</th>
				<th scope="col" class="border-0" width="20%">
					<span>
						Statuses
						@if(request()->filter && request()->filter == 'statuses_count' && request()->order == 'asc')
						<a href="#" class="col-ord" data-col="statuses_count" data-dir="desc"><i class="fas fa-chevron-down"></i></a>
						@else
						<a href="#" class="col-ord" data-col="statuses_count" data-dir="asc"><i class="fas fa-chevron-up"></i></a>
						@endif
					</span>
				</th>
				<th scope="col" class="border-0" width="10%">
					<span>
						Storage
					</span>
				</th>
				<th scope="col" class="border-0" width="10%">
					<span>Actions</span>
				</th>
			</tr>
		</thead>
		@foreach($profiles as $profile)
		<tr class="font-weight-bold text-center user-row">
			<th scope="">
				<div class="custom-control custom-checkbox">
					<input type="checkbox" class="custom-control-input row-check-item" id="row-check-{{$profile->id}}" data-id="{{$profile->id}}">
					<label class="custom-control-label" for="row-check-{{$profile->id}}"></label>
				</div>
			</th>
			<td>
				{{$profile->id}}
			</td>
			<td class="text-truncate" data-toggle="tooltip" data-placement="bottom" title="{{$profile->username}}" style="max-width: 150px;">
				{{$profile->username}}
			</td>
			<td>
				{{$profile->followers()->count()}}
			</td>
			<td>
				{{$profile->likes()->count()}}
			</td>
			<td>
				{{$profile->statuses()->count()}}
			</td>
			<td>
				<div class="filesize" data-size="{{$profile->media()->sum('size')}}">{{$profile->media()->sum('size')}} bytes</div>
				
			</td>
			<td>
				<a class="btn btn-outline-secondary btn-sm py-0 mr-3" href="/i/admin/profiles/edit/{{$profile->id}}">Edit</a>
			</td>
		</tr>
		@endforeach
	</tbody>
</table>
</div>
<div class="d-flex justify-content-center mt-5 small">
	{{$profiles->appends([
		'layout'=>request()->layout,
		'search'=>request()->search,
		'filter'=>request()->filter,
		'order'=>request()->order
		])->links()}}
</div>
@else
<div class="row">
	@foreach($profiles as $profile)
	<div class="col-12 col-md-4 mb-4">
		<div class="card">
			<div class="card-header bg-white text-center" style="min-height: 80px">
				<img class="box-shadow rounded-circle mb-3" src="{{$profile->avatarUrl()}}" width="64px" height="64px">
				<p class="font-weight-bold mb-0 text-truncate">{{$profile->username}}</p>
			</div>
			<ul class="list-group list-group-flush small">
				<li class="list-group-item d-flex justify-content-between text-center">
					<div>
						<p class="font-weight-bold mb-0 h5">{{$profile->statuses()->count()}}</p>
						<span class="font-weight-bold text-muted" data-toggle="tooltip" title="Total Statuses"><i class="fas fa-sm fa-camera-retro"></i></span>
					</div>
					<div>
						<p class="font-weight-bold mb-0 h5 filesize" data-size="{{$profile->media()->sum('size')}}">0</p>
						<span class="font-weight-bold text-muted" data-toggle="tooltip" title="Storage space used"><i class="fas fa-sm fa-cloud-upload-alt"></i></span>
					</div>
					<div>
						<p class="font-weight-bold mb-0 h5">{{$profile->followers()->count()}}</p>
						<span class="font-weight-bold text-muted" data-toggle="tooltip" title="Total Followers"><i class="fas fa-sm fa-user-plus"></i></span>	
					</div>
				</li>
				<li class="list-group-item text-center">
					<a class="btn btn-outline-primary btn-sm py-0" href="{{$profile->url()}}">View</a>
					<a class="btn btn-outline-secondary btn-sm py-0" href="/i/admin/profiles/edit/{{$profile->id}}">Edit</a>
				</li>
			</ul>
		</div>
	</div>
	@endforeach
</div>
<div class="d-flex justify-content-center mt-5 small">
	{{$profiles->appends([
		'layout'=>request()->layout,
		'search'=>request()->search,
		'filter'=>request()->filter,
		'order'=>request()->order
		])->links()}}
</div>
@endif
@endsection

@push('styles')
<style type="text/css">

.user-row .action-row {
	display: none;
}

.user-row:hover,
.user-row-active {
	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">
	$('.filesize').each(function(k,v) {
		$(this).text(filesize(v.getAttribute('data-size'), {unix:true, round:0}))
	});
	$('.col-ord').on('click', function(e) {
		e.preventDefault();
		let el = $(this);
		let ord = el.data('dir');
		let col = el.data('col');
		let wurl = new URL(window.location.href);
		let query_string = wurl.search;
		let search_params = new URLSearchParams(query_string); 

		if(ord == 'asc') {
			search_params.set('filter', col);
			search_params.set('order', ord);
			wurl.search = search_params.toString();
			el.find('i').removeClass('fa-chevron-up').addClass('fa-chevron-down');
			el.data('dir', 'desc');
		} else {
			search_params.set('filter', col);
			search_params.set('order', ord);
			wurl.search = search_params.toString();
			el.find('i').removeClass('fa-chevron-down').addClass('fa-chevron-up');
			el.data('dir', 'asc');
		}
		window.location.href = wurl.toString();
	});


	$(document).on('click', '#row-check-all', function(e) {
		return;
		let el = $(this);
		let attr = el.attr('checked');

		if (typeof attr !== typeof undefined && attr !== false) {
			$('tbody .user-row').removeClass('user-row-active');
			$('.bulk-actions').addClass('d-none');
			$('.row-check-item').removeAttr('checked').prop('checked', false);
			el.removeAttr('checked').prop('checked', false);
		} else {
			$('tbody .user-row').addClass('user-row-active');
			$('.bulk-actions').removeClass('d-none');
			el.attr('checked', '').prop('checked', true);
			$('.row-check-item').attr('checked', '').prop('checked', true);
		}

		let len = $('.row-check-item:checked').length;
		if(attr == true) {
			len--;
		}
		$('.bulk-count').text(len).attr('data-count', len);
	});


	$(document).on('click', '.row-check-item', function(e) {
		return;
		var el = $(this)[0];
		let len = $('.row-check-item:checked').length;
		if($('#row-check-all:checked').length > 0) {
			len--;
		}
		if($(this).hasClass('row-check-all')) {
			return;
		};
		if(el.checked == true) {
			$(this).parents().eq(2).addClass('user-row-active');
			$('.bulk-actions').removeClass('d-none');
			$('.bulk-count').text(len).attr('data-count', len);
		} else {
			$(this).parents().eq(2).removeClass('user-row-active');
			if(len == 0) {
				$('.bulk-actions').addClass('d-none');
			} else {
				$('.bulk-count').text(len).attr('data-count', len);   
			}
		}
		if(len == 0) {
			$('.bulk-actions').addClass('d-none');
			$('#row-check-all').prop('checked', false);
		} else {
			$('.bulk-actions').removeClass('d-none');
		}
	});

	$(document).on('click', '.apply-bulk', function(e) {
		return;
		e.preventDefault();
		let len = $('.row-check-item:checked').length;
		if($('#row-check-all:checked').length > 0) {
			len--;
		}
		if(len == 0) {
			return;
		}
		let action = $('.bulk-action').val();
		let ids = $('.row-check-item:checked').get().filter(i => {
			let el = $(i);
			if(el.hasClass('row-check-all')) {
				return false;
			}
			return true;
		}).map(i => {
			return $(i).data('id');
		});
		let actions = [
			'',
			'review',
			'cw',
			'unlist',
			'noautolink',
			'suspend',
			'delete'
		];
		action = actions[action];
		if(!action) {
			return;
		}
		swal(
			'Confirm', 
			'Are you sure you want to perform this action?',
			'warning'
		).then(res => {
			console.log(action);
			console.log(ids);
		})
	});
</script>
@endpush