@extends('layouts.assign')

@section('users')
<div class="panel panel-default">
	<div class="panel-heading">Staff List</div>
	<div class="panel-body">
		<ul id="userlist" class="source">
			@foreach ($users as $list)
			<li data-id ="{{$list->id}}">{{ $list->name}}</li>
			@endforeach
		</ul>
	</div>
</div>


@endsection
@section('title')
<h1>Assign Records</h1>
<br>
@endsection


@section('works')
<div class="panel panel-default">
	<div class="panel-heading">Work List</div>
	<div class="panel-body ">
		<ul id="worklist" class="source">
			@foreach ($items as $list)
			<li data-id ="{{$list->id}}">{{$list->title}}</li>
			@endforeach
		</ul>
	</div>
</div>


@endsection


@section('dtable')
<div class="panel panel-default">
	<div class="panel-heading">Assigned Records</div>
	<div class="panel-body previewbody">
	
	</div>
</div>

<style>

  .source .ui-selecting { background: #FECA40; }
  .source .ui-selected { background: #F39814; color: white; }
ul.source, ul.target {
  min-height: 50px;
  margin: 0px 25px 10px 0px;
  padding: 2px;
  border-width: 1px;
  border-style: solid;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  list-style-type: none;
  list-style-position: inside;
}
ul.source {
  border-color: #f8e0b1;
}
ul.target {
  border-color: #add38d;
}
.source li, .target li {
  margin: 5px;
  padding: 5px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
.source li {
  background-color: #fcf8e3;
  border: 1px solid #fbeed5;
  color: #c09853;
}
.target li {
  background-color: #ebf5e6;
  border: 1px solid #d6e9c6;
  color: #468847;
}
.sortable-dragging {
  border-color: #ccc !important;
  background-color: #fafafa !important;
  color: #bbb !important;
}
.sortable-placeholder {
  height: 40px;
}
.source .sortable-placeholder {
  border: 2px dashed #f8e0b1 !important;
  background-color: #fefcf5 !important;
}
.target .sortable-placeholder {
  border: 2px dashed #add38d !important;
  background-color: #f6fbf4 !important;
}
</style>
@endsection