@extends('layouts.app')

@section('styles')
@endsection

@section('content')	   
		   <!-- .page -->
          <div class="page">
            <!-- .page-inner -->
            <div class="page-inner">
              <!-- .page-title-bar -->
              <header class="page-title-bar">
                <!-- .breadcrumb -->
                <nav aria-label="breadcrumb">
                  <ol class="breadcrumb">
                    <li class="breadcrumb-item active">
                      <a href="\">
                        <i class="breadcrumb-icon fa fa-angle-left mr-2"></i>{{ __('Dashboard') }}</a>
					  <a href="\roles">
                        <i class="breadcrumb-icon fa fa-angle-left mr-2"></i>{{ __('Roles') }}</a>
                    </li>
                  </ol>
                </nav>
                <!-- /.breadcrumb -->
                <!-- title and toolbar -->
                <div class="d-md-flex align-items-md-start">
                  <h1 class="page-title mr-sm-auto"> {{ $role->name }}</h1>
                </div>
                <!-- /title and toolbar -->
              </header>
              <!-- /.page-title-bar -->
              <!-- .page-section -->
              <div class="page-section">
                <!-- .card -->
                <section class="card card-fluid">
                  <!-- .card-header -->
                  <header class="card-header">
                    <!-- .nav-tabs -->
                    <ul class="nav nav-tabs card-header-tabs">
                      <li class="nav-item">
                        <a class="nav-link" role="tab" data-toggle="tab" href="#myrole">{{ __('Details') }}</a>
                      </li>
					  <li class="nav-item">
                        <a class="nav-link active show" role="tab" data-toggle="tab" href="#myusers">{{ __('Users') }}</a>
                      </li>
                    </ul>
                    <!-- /.nav-tabs -->
                  </header>
                  <!-- /.card-header -->
                  <!-- .card-body -->
                  <div class="card-body">
				  
				  	<div class="tab-content">
					
						<div role="tabpanel" class="tab-pane" id="myrole">
							<form method="POST" action="/roles/{{ $role->id }}">
								{{ csrf_field() }}
								{{ method_field('PATCH') }}
               	        			<!-- .form-group -->
                       			<div class="form-group">
                          			<label for="name">{{ __('Name') }}</label>
                          			<input type="text" class="form-control" id="name" name="name" value="{{ $role->name }}" required="">
                        			</div>
                       			<!-- /.form-group -->
		                        <!-- .form-group -->
		                        <div class="form-group">
		                          <label for="slug">{{ __('Coding reference') }}</label>
		                          <input type="text" class="form-control" id="slug" name="slug" value="{{ $role->slug }}" required="">
		                        </div>
                       			<!-- /.form-group -->
		                        <!-- .form-group -->
		                        <div class="form-group">
		                          <label for="description">{{ __('Description') }}</label>
		                          <input type="text" class="form-control" id="description" name="description" value="{{ $role->description }}" >
		                        </div>
                       			<!-- /.form-group -->
                        			@role('admin')
									<!-- .form-group -->
										<div class="form-group">                        
										<button type="submit" class="btn btn-primary">{{ __('Save') }}</button>
	                       			 </div>
	                       			<!-- .form-group -->
								@endrole
							</form>
						</div>
   						
						<div role="tabpanel" class="tab-pane active show" id="myusers">
                				<!-- grid row -->
                				<div class="row">
                  				<!-- grid column -->
                  				<div class="col-xl-6">
                      				<form method="POST" action="/roles/{{ $role->id }}">
										{{ csrf_field() }}
										<!-- .card-header -->
                      					<header class="card-header border-0">
                        						<div class="d-flex align-items-center">
                          						<span class="mr-auto">{{ __('Users in this Group') }}</span>
												<button type="submit" class="btn btn-primary">{{ __('Save') }}</button>
                        						</div>
                      					</header>
                      					<!-- /.card-header -->
                        					<!-- .table -->
                        					<table class="table table-hover"  id="table_dest">
                          					<!-- tbody -->
                         					<tbody>
												@foreach ($roleusers as $user)
        												<tr>
														<td><div class="move-row"><span class="oi oi-chevron-right text-primary"></span></div></td>
														<td><div class='move-row'>{{ $user->name }} ({{ $user->email }})</div></td>
														<input type="hidden" name="id[]" value="{{ $user->id }}">
        												</tr>
					  							@endforeach
                          					</tbody>
                          					<!-- /tbody -->
                        					</table>
                        					<!-- /.table -->
									</form>
                  				</div>
                  				<!-- /grid column -->
                   				<!-- grid column -->
                  				<div class="col-xl-6">
                      				<!-- .card-header -->
                      				<header class="card-header border-0">
										<!-- grid row -->
                							<div class="row">
                  							<!-- grid column -->
                  							<div class="col-xl-6">
                        							<div class="d-flex align-items-center">
                          							<span class="mr-auto">{{ __('My Users') }}</span>
												</div>
											</div>
                  							<!-- grid column -->
                  							<div class="col-xl-6">
												<div class="input-group">
                           							<div class="input-group-prepend">
                               							<span class="input-group-text">
                                 							<span class="oi oi-magnifying-glass">
															</span>
                                							</span>
                             						</div>
                             						<input type="text" class="form-control" id="allusersearch" placeholder="Search">
												</div>
											</div>		
										</div>															
                      				</header>
                      				<!-- /.card-header --> 
                        				<!-- .table -->
                        				<table class="table table-hover" id="table_source">
                          				<!-- tbody -->
                         				<tbody>
											@foreach ($myusers as $user)
        											<tr>
													<td><div class="move-row"><span class="oi oi-chevron-left text-primary"></span></div></td>
													<td><div class="move-row">{{ $user->name }} ({{ $user->email }})</div></td>
													<input type="hidden" name="id[]"  value="{{ $user->id }}">
        											</tr>
					  						@endforeach										
                          				</tbody>
                          				<!-- /tbody -->
                        				</table>
                        				<!-- /.table -->
                  				</div>
                  				<!-- /grid column -->
               				</div>
                				<!-- /grid row -->
						</div>

				  </div>
                  <!-- /.card-body -->
                </section>
                <!-- /.card -->
              </div>
              <!-- /.page-section -->
            </div>
            <!-- /.page-inner -->
          </div>
          <!-- /.page -->
@endsection

@push('scripts')
	<script>
	$(document).ready(function(){
  		$("#allusersearch").on("keyup", function() {
   			var value2 = $(this).val().toLowerCase();
    			$("#table_source tr").filter(function() {
     	 		$(this).toggle($(this).text().toLowerCase().indexOf(value2) > -1)
   	 		});
	  	});
		
 	   $("#table_source").on("click","div.move-row", function() {
 	       var tr = $(this).closest("tr").remove().clone();
	        tr.find("span")
 	           .attr("class", "oi oi-chevron-right text-primary");
			$("#table_dest tbody").append(tr);
  	  	});
		
  		$("#table_dest").on("click"," div.move-row", function() {
   	    		var tr = $(this).closest("tr").remove().clone();
        		tr.find("span")
            		.attr("class", "oi oi-chevron-left text-primary");
        		$("#table_source tbody").append(tr);
    		});
			
    		$(document).on('change', '#check-handle', function () {
      		var isChecked = $(this).prop('checked');
      		$('input[name="selectedRow[]"]').prop('checked', isChecked);

     		// get info
      		self.getSelectedInfo();
   	 	}).on('change', 'input[name="selectedRow[]"]', function () {
      		var $selectors = $('input[name="selectedRow[]"]');
      		var $selectedRow = $('input[name="selectedRow[]"]:checked').length;
     		var prop = $selectedRow === $selectors.length ? 'checked' : 'indeterminate';

     		// reset props
      		$('#check-handle').prop('indeterminate', false).prop('checked', false);

     		if ($selectedRow) {
        			$('#check-handle').prop(prop, true);
      		}

      		// get info
      		self.getSelectedInfo();
    		});

  		getSelectedInfo: function getSelectedInfo() {
    			var $selectedRow = $('input[name="selectedRow[]"]:checked').length;
    			var $info = $('.thead-btn');
    			var $badge = $('<span/>').addClass('selected-row-info text-muted pl-1').text($selectedRow + ' selected');
    			// remove existing info
    			$('.selected-row-info').remove();
    			// add current info
   			if ($selectedRow) {
      			$info.prepend($badge);
   			}
  		};			

	});
</script>
@endpush