@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="\groups">
                        <i class="breadcrumb-icon fa fa-angle-left mr-2"></i>{{ __('Groups') }}</a>
                    </li>
                  </ol>
                </nav>
                <!-- /.breadcrumb -->
                <!-- title and toolbar -->
                <div class="d-md-flex align-items-md-start">
                  <h1 class="page-title mr-sm-auto"> {{ $group->groupname }}</h1>
                    <button type="button" class="btn btn-light"  data-toggle="modal" data-target="#exportModal">
                      <i class="oi oi-data-transfer-download"></i>
                      <span class="ml-1">{{ __('Export') }}</span>
                    </button>
			    </div>
                <!-- /title and toolbar -->
              </header>
              <!-- /.page-title-bar -->
			  <!-- Export modal -->
              <div class="modal fade" id="exportModal" tabindex="-1" role="dialog" aria-labelledby="ExportLabel" aria-hidden="true">
              	<!-- .modal-dialog -->
                	<div class="modal-dialog" role="document">
                 	<!-- .modal-content -->
                 	<div class="modal-content">
                			<!-- .modal-header -->
                   		<div class="modal-header">
                      		<h5 class="modal-title">{{ __('Export Users') }}</h5>
                    		</div>
                        <!-- /.modal-header -->
                       	<!-- .modal-body -->
                        	<div class="modal-body">
                              <p>{{ __('Please indicate in which format you would like the Users to be exported.') }}</p>
                              <p>{{ __('Exports are available in Excel and CSV.') }}</p>
                      	</div>
                      	<!-- /.modal-body -->
                  		<!-- .modal-footer -->
                   		<div class="modal-footer">
                      		<button type="button" class="btn btn-primary" data-dismiss="modal" onclick="javascript:window.location='/downloadGroupUsers/{{ $group->id }}/xlsx'">Excel</button>
							<button type="button" class="btn btn-primary" data-dismiss="modal" onclick="javascript:window.location='/downloadGroupUsers/{{ $group->id }}/csv'">CSV</button>
                      		<button type="button" class="btn btn-light" data-dismiss="modal">{{ __('Close') }}</button>
                	    		</div>
                    		<!-- /.modal-footer -->
           			</div>
                   	<!-- /.modal-content -->
              	</div>
              	<!-- /.modal-dialog -->
              </div>
              <!-- /.modal -->
			  <!-- .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="#mygroup">{{ __('Details') }}</a>
                      </li>
					  <li class="nav-item">
                        <a class="nav-link {{$focustab2}}" role="tab" data-toggle="tab" href="#myusers">{{ __('Users') }}</a>
                      </li>
					  <li class="nav-item">
                        <a class="nav-link {{$focustab3}}" role="tab" data-toggle="tab" href="#myemails">{{ __('Emails') }}</a>
                      </li>
					  <li class="nav-item">
                        <a class="nav-link {{$focustab4}}" role="tab" data-toggle="tab" href="#myreports">{{ __('Reports') }}</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="mygroup">
							<form method="POST" action="/groups/{{ $group->id }}">
								{{ csrf_field() }}
								{{ method_field('PATCH') }}
                                @role('admin|orgadmin')
									<div class="form-group">
										<!-- .form-group -->
				                          <label for="facilitator">{{ __('Facilitator') }}</label>
				                          <select class="custom-select" id="facilitator" name="facilitator" required="">
											@foreach ($facilitators as $facilitator)
	                            					<option value="{{ $facilitator->id }}" @if ($facilitator->id === $group->userID ) selected @endif > {{ $facilitator->name }} ({{ $facilitator->email }})</option>
	                          				@endforeach
				                          </select>
				                        <!-- /.form-group -->
									</div>
								@endrole
               	        			<!-- .form-group -->
                       			<div class="form-group">
                          			<label for="name">{{ __('Name') }}</label>
                          			<input type="text" class="form-control" id="name" name="name" value="{{ $group->groupname }}" required="">
                        			</div>
                       			<!-- /.form-group -->
                        			<!-- .form-group -->
                        			<div class="form-group">
                          			<label for="profile">{{ __('Profile') }}</label>
                         			<select class="custom-select" id="profile" name="profile" required="">
			                          @foreach ($profiles as $profile)
											<option value="{{ $profile->id }}" @if ($group->profileID == $profile->id) selected @endif>{{ $profile->trans('profilename') }}</option>
									  @endforeach
                          			</select>
									<small id="profileHelp" class="form-text text-muted">{{ __('Warning: the group will be saved as a new group if you change the profile!') }}</small>
                        			</div>
                        			<!-- .form-group -->
                        			<div class="form-group">
									<button type="submit" class="btn btn-primary">{{ __('Save') }}</button>
                       			 </div>
                       			<!-- .form-group -->
							</form>
						</div>

						<div role="tabpanel" class="tab-pane {{$focustab2}}" id="myusers" style="height: 440px">
                				<!-- grid row -->
                				<div class="row">
                  				<!-- grid column -->
                  				<div class="col-xl-6">
                      				<form method="POST" action="/groups/{{ $group->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 -->
                        					<div class="scrollable">
										<!-- .table -->
                        					<table class="table table-hover"  id="table_dest">
                          					<!-- tbody -->
                         					<tbody>
												@foreach ($groupusers 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 -->
										</div>	
									</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 -->
                        				<div class="scrollable">
									<!-- .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>	
                  				</div>
                  				<!-- /grid column -->
               				</div>
                				<!-- /grid row -->
						</div>

   						<div role="tabpanel" class="tab-pane {{$focustab3}}" id="myemails">
							<form method="POST" action="/groups/email/{{ $group->id }}">
								{{ csrf_field() }}
								<div class="row">
									<div class="col-sm-12 col-md-4">
				                        <!-- .form-group -->
				                        <div class="form-group">
					                          <label for="emailtemplate">{{ __('Email template') }}</label>
					                          <select class="custom-select" id="emailtemplate" name="emailtemplate">
											  <option value="">{{ __('Choose ...') }}</option>
											  @foreach ($mytemplates as $template)
						                            <option value={{ $template->id }}  > {{ $template->templatename }} </option>
											  @endforeach
					                          </select>
				                        </div>
										<!-- /.form-group -->
									</div>
									<div class="col-sm-12 col-md-6">
										<!-- .form-group -->
				                        <div class="form-group">
											<label  class="d-block">{{ __('Send to Users') }}</label>
											<div class="custom-control custom-control-inline custom-radio">
												<input type="radio" class="custom-control-input" name="sendtousers" id="rd1" value=1 checked>
												<label class="custom-control-label" for="rd1">{{ __('All') }}</label>
											</div>
											<div class="custom-control custom-control-inline custom-radio">
												<input type="radio" class="custom-control-input" name="sendtousers" id="rd2" value=2 >
												<label class="custom-control-label" for="rd2">{{ __('Profile not completed') }}</label>
											</div>
											<div class="custom-control custom-control-inline custom-radio">
												<input type="radio" class="custom-control-input" name="sendtousers" id="rd3" value=3 >
												<label class="custom-control-label" for="rd3">{{ __('Permission not granted') }}</label>
											</div>
				                        </div>
				                        <!-- /.form-group -->
									</div>
									<div class="col-sm-4 col-md-2">
										<!-- .form-group -->
				                        <div class="form-group">
											<label  class="d-block">{{ __('Send now') }}</label>
											<button type="submit" class="btn btn-primary" name="sendnow" value="on"><span class="oi oi-envelope-open"></span></button>
										</div>
				                        <!-- /.form-group -->
									</div>
								</div>
                       			<!-- .form-group -->
							</form>
  				 	 	</div>

   						<div role="tabpanel" class="tab-pane {{$focustab4}}" id="myreports">

							<form target="_blank" method="POST" action="/reports" id="reportform">
							{{ csrf_field() }}
								<input type="hidden" name="profile" value="{{ $group->profileID }}">
								<input type="hidden" name="name" value="{{ $group->groupname }}">
								<input type="hidden" name="groupid" value="{{ $group->id }}">
								@if ($group->profileID == 4)
	                				<!-- grid row -->
	                				<div class="row">
										<!-- grid column -->
										<div class="col-3">
		                        				<h2 class="section-title">{{ __('Team reports') }}</h2>
										</div>
										<div class="col-3">
											<!-- .form-group -->
	                        					<div class="form-group">
												<button type="submit" class="tile tile-lg bg-white" name="reporttype" value="8"><div class="figure-img"><img class="img-fluid" src="/assets/images/report_icon_teamscan.png"></div></button>
											</div>
	                       					<!-- /form-group -->
	                  					</div>
	                  					<!-- /grid column -->
               						</div>
                					<!-- /grid row -->
									<!-- grid row -->
	                				<div class="row">	
										<!-- grid column -->
										<div class="col-2">
                                        		<h2 class="section-title"> </h2>
                                        </div>
										<div class="col-4">
                                            <!-- .form-group -->
                                            <div class="custom-control custom-control-inline custom-checkbox">
                                                <input type="checkbox" class="custom-control-input" id="powerpoint" name="powerpoint">
                                                <label class="custom-control-label" for="powerpoint">{{ __('Generate PowerPoint') }}</label>
                                            </div>
                                            <!-- /form-group -->
                                        </div>
	                  					<!-- /grid column -->
               						</div>
                					<!-- /grid row -->
								@elseif ($group->profileID == 7)
	                				<!-- grid row -->
	                				<div class="row">
										<!-- grid column -->
										<div class="col-2">
		                        				<h2 class="section-title">{{ __('Profiler report') }}</h2>
										</div>
										<div class="col-2">
											<!-- .form-group -->
	                        					<div class="form-group">
												<button type="submit" class="tile tile-lg bg-white" name="reporttype" value="10"><div class="figure-img"><img class="img-fluid" src="/assets/images/report_icon_book.png"></div></button>
											</div>
	                       					<!-- /form-group -->
	                  					</div>
	                  					<!-- /grid column -->								
										<!-- grid column -->
										<div class="col-2">
		                        				<h2 class="section-title">{{ __('Profile adjustment') }}</h2>
										</div>
										<div class="col-2">
											<!-- .form-group -->
	                        					<div class="form-group">
												<button type="submit" class="tile tile-lg bg-white" name="reporttype" value="11"><div class="figure-img"><img class="img-fluid" src="/assets/images/report_icon_profile.png"></div></button>
											</div>
	                       					<!-- /form-group -->
	                  					</div>
	                  					<!-- /grid column -->								
										<!-- grid column -->
										<div class="col-2">
		                        				<h2 class="section-title">{{ __('Search report') }}</h2>
										</div>
										<div class="col-2">
											<!-- .form-group -->
	                        					<div class="form-group">
												<button type="submit" class="tile tile-lg bg-white" name="reporttype" value="9"><div class="figure-img"><img class="img-fluid" src="/assets/images/report_icon_book.png"></div></button>
											</div>
	                       					<!-- /form-group -->
	                  					</div>
	                  					<!-- /grid column -->								
							
               						</div>
                					<!-- /grid row -->
								@elseif ($group->profileID == 8)
	                				<!-- grid row -->
	                				<div class="row">
										<!-- grid column -->
										<div class="col-2">
		                        				<h2 class="section-title">{{ __('Vacancy report') }}</h2>
										</div>
										<div class="col-2">
											<!-- .form-group -->
	                        					<div class="form-group">
												<button type="submit" class="tile tile-lg bg-white" name="reporttype" value="15"><div class="figure-img"><img class="img-fluid" src="/assets/images/report_icon_book.png"></div></button>
											</div>
	                       					<!-- /form-group -->
	                  					</div>
	                  					<!-- /grid column -->								
               						</div>
                					<!-- /grid row -->
								@else
							        <!-- grid row -->
                				    <div class="row">
	                  					<!-- grid column -->
	                  					<div class="col-2">
											<h2 class="section-title">{{ __('Combined report') }}</h2>
										</div>
										<div class="col-4">
											<!-- .form-group -->
	                        				<div class="form-group">
												<button type="submit" class="tile tile-lg bg-white" name="reporttype" value="16"><div class="figure-img"><img class="img-fluid" src="/assets/images/report_icon_pdf.png"></div></button>
												<button type="submit" class="tile tile-lg bg-white" name="reporttype" value="17"><div class="figure-img"><img class="img-fluid" src="/assets/images/report_icon_powerpoint.png"></div></button>
	                       			 		</div>
											<!-- /form-group -->
	                  					</div>
	                  					@if ($group->userID === 0)
                                            <div class="col-2">
    											<h2 class="section-title">{{ __('Leadership report') }}</h2>
    										</div>
    										<div class="col-4">
    											<!-- .form-group -->
    	                        				<div class="form-group">
    												<button type="submit" class="tile tile-lg bg-white" name="reporttype" value="18"><div class="figure-img"><img class="img-fluid" src="/assets/images/report_icon_pdf.png"></div></button>
    	                       			 		    <button type="submit" class="tile tile-lg bg-white" name="reporttype" value="19"><div class="figure-img"><img class="img-fluid" src="/assets/images/report_icon_powerpoint.png"></div></button>
    	                       			 		</div>
    											<!-- /form-group -->
    	                  					</div>
                                        @endif
               						</div>
                					<!-- /grid row -->
	                				<!-- grid row -->
	                				<div class="row">
	                  					<!-- grid column -->
	                  					<div class="col-2">
											<h2 class="section-title">{{ __('Individual reports') }}</h2>
										</div>
										<div class="col-4">
											<!-- .form-group -->
	                        				<div class="form-group">
												<button type="submit" class="tile tile-lg bg-white" name="reporttype" value="1"><div class="figure-img"><img class="img-fluid" src="/assets/images/report_icon_profile.png"></div></button>
												<button type="submit" class="tile tile-lg bg-white" name="reporttype" value="13"><div class="figure-img"><img class="img-fluid" src="/assets/images/report_icon_profile_s.png"></div></button>
												<button type="submit" class="tile tile-lg bg-white" name="reporttype" value="14"><div class="figure-img"><img class="img-fluid" src="/assets/images/report_icon_profile_e.png"></div></button>
												<button type="submit" class="tile tile-lg bg-white" name="reporttype" value="12"><div class="figure-img"><img class="img-fluid" src="/assets/images/report_icon_summary.png"></div></button>
												<button type="submit" class="tile tile-lg bg-white" name="reporttype" value="3"><div class="figure-img"><img class="img-fluid" src="/assets/images/report_icon_book.png"></div></button>
	                       			 		</div>
											<!-- /form-group -->
	                  					</div>
	                  					<div class="col-2">
	                        					<h2 class="section-title">{{ __('Team reports') }}</h2>
										</div>
										<div class="col-4">
											<!-- .form-group -->
	                        					<div class="form-group">
												<button type="submit" class="tile tile-lg bg-white" name="reporttype" value="4"><div class="figure-img"><img class="img-fluid" src="/assets/images/report_icon_profile.png"></div></button>
												<button type="submit" class="tile tile-lg bg-white" name="reporttype" value="2"><div class="figure-img"><img class="img-fluid" src="/assets/images/report_icon_multi.png"></div></button>
												<button type="submit" class="tile tile-lg bg-white" name="reporttype" value="5"><div class="figure-img"><img class="img-fluid" src="/assets/images/report_icon_pie.png"></div></button>
												<button type="submit" class="tile tile-lg bg-white" name="reporttype" value="6"><div class="figure-img"><img class="img-fluid" src="/assets/images/report_icon_plot.png"></div></button>
												<button type="submit" class="tile tile-lg bg-white" name="reporttype" value="7"><div class="figure-img"><img class="img-fluid" src="/assets/images/report_icon_book.png"></div></button>
                       			 			</div>
                       						<!-- /form-group -->
                  						</div>
                  						<!-- /grid column -->
               						</div>
                					<!-- /grid row -->
								   	<!-- grid row -->
                                    <div class="row">
                                        <!-- grid column -->
                                        <div class="col-2">
                                        		<h2 class="section-title"> </h2>
                                        </div>
                                        <div class="col-4">
                                            <!-- .form-group -->
                                            <div class="custom-control custom-control-inline custom-checkbox">
                                                <input type="checkbox" class="custom-control-input" id="powerpoint" name="powerpoint">
                                                <label class="custom-control-label" for="powerpoint">{{ __('Generate PowerPoint') }}</label>
                                            </div>
                                            <!-- /form-group -->
                                        </div>
                                        <div class="col-2">
                                            @if ($group->userID === 6608)
                                            	<!-- .form-group -->
                                                <div class="custom-control custom-control-inline custom-checkbox">
                                                    <input type="checkbox" class="custom-control-input" id="normalise" name="normalise">
                                                    <label class="custom-control-label" for="normalise">{{ __('Normalise') }}</label>
                                                </div>
                                                <!-- /form-group -->
                                            @endif
                                        </div>
                                        <div class="col-4">
                                            <!-- .form-group -->
                                            <div class="form-group">
                                              {{ __('Base team reports on') }}
                                              <div class="custom-control custom-control-inline custom-radio">
                                                <input type="radio" class="custom-control-input" name="stressenergy" id="stress" value="1"> <label class="custom-control-label" for="stress">{{ __('Stress') }}</label>
                                              </div>
                                              <div class="custom-control custom-control-inline custom-radio">
                                                <input type="radio" class="custom-control-input" name="stressenergy" id="energy" value="2"> <label class="custom-control-label" for="energy">{{ __('Energy') }}</label>
                                              </div>
                                            </div>
                                            <!-- /form-group -->
                                        </div>                                        
                                        <!-- /grid column -->
                                    </div>
                                    <!-- /grid row -->
								@endif
								<!-- .table -->
                      			<table id="reports-table" class="table">
                      				<!-- thead -->
                      				<thead>
                       					<tr>
											<th style="min-width: 50px;">
                              						<span class="custom-control custom-control-nolabel custom-checkbox">
                                							<input type="checkbox" class="custom-control-input" id="check-handle" checked>
                                							<label class="custom-control-label" for="check-handle"></label>
                              						</span>
                          					</th>
								 			<th>{{ __('User') }}</th>
											<th>{{ __('Profile completed') }}</th>
                				 				<th>{{ __('Permission granted') }}</th>
											<th style="width:100px; min-width:100px;">{{ __('Report') }}</th>
                        					</tr>
                      				</thead>
                      				<!-- /thead -->
                      			</table>
                      			<!-- /.table -->
							  </div>
							</form>
						  </div>
  				 	 	</div>
					  </div>
 					  <!-- /.tab-content -->
				  </div>
                  <!-- /.card-body -->
                </section>
                <!-- /.card -->
              </div>
              <!-- /.page-section -->
            </div>
            <!-- /.page-inner -->
          </div>
          <!-- /.page -->
@endsection

@push('scripts')
    <script src="{{ asset('assets/vendor/datatables/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('assets/javascript/pages/dataTables.bootstrap.js') }}"></script>
	<script>
	$(function() {
		$('#reports-table').DataTable({
	  		dom: "<'row'<'col-sm-12 col-md-6'i><'col-sm-12 col-md-6'f>>" +
"<'row'<'col-sm-12'tr>>" +
"<'row'<'col-sm-12 col-md-5'l><'col-sm-12 col-md-7'p>>",
      		buttons: ['copyHtml5', { extend: 'print', autoPrint: false }],
      		language: {
        			paginate: {
          			previous: '<i class="fa fa-lg fa-angle-left"></i>',
          			next: '<i class="fa fa-lg fa-angle-right"></i>'
        			}
      		},
			lengthMenu: [[-1, 10, 25, 50], ["All", 10, 25, 50]],
      		autoWidth: false,
	  		ajax: '/groupUsersData/{{ $group->id }}',
      		deferRender: true,
      		order: [1, 'asc'],
      		columns: [
				{ data: 'id', name: 'user_profiles.id', orderable: false, searchable: false },
           		{ data: 'name', name: 'users.name' },
            	{ data: 'profileDate', 'type': 'num', 'render': { '_': 'display', 'sort': 'timestamp' } },
				{ data: 'permissionView', name: 'user_profiles.permissionView' },
				{ data: 'id2', name: 'user_profiles.id', orderable: false, searchable: false }
       		],
			columnDefs: [{
        			targets: 0,
       			render: function render(data, type, row, meta) {
         			return '<div class="custom-control custom-control-nolabel custom-checkbox">\n            <input type="checkbox" class="custom-control-input" name="selectedRow[]" id="p' + row.id + '" value="' + row.id + '" checked>\n            <label class="custom-control-label" for="p' + row.id + '"></label>\n          </div>';
        			}
      		}]
    		});
  	});

	$(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