@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>
                    </li>
                  </ol>
                </nav>
                <!-- /.breadcrumb -->
                @if(!$user->hasRole('jumbo'))
                <!-- floating action -->
                <button type="button" class="btn btn-primary btn-floated" id="button">
                  <span class="fa fa-plus"></span>
                </button>
                <!-- /floating action -->
                @endif
                <!-- title and toolbar -->
                <div class="d-md-flex align-items-md-start">
                  <h1 class="page-title mr-sm-auto">{{ __('Groups') }}</h1>
                  <!-- .btn-toolbar -->
                  @if(!$user->hasRole('jumbo'))
                  <div class="btn-toolbar">
                    <button type="button" class="btn btn-light" data-toggle="modal" data-target="#importModal">
                      <i class="oi oi-data-transfer-upload"></i>
                      <span class="ml-1">{{ __('Import') }}</span>
                    </button>
                    <button type="button" class="btn btn-primary" id="button1">{{ __('Add Group') }}</button>
                  </div>
                  @endif
                  <!-- /.btn-toolbar -->
                </div>
                <!-- /title and toolbar -->
              </header>
              <!-- /.page-title-bar -->
  			  <!-- Import modal -->
              <div class="modal fade" id="importModal" tabindex="-1" role="dialog" aria-labelledby="ImportLabel" aria-hidden="true">
              	<!-- .modal-dialog -->
                	<div class="modal-dialog" role="document">
                 	<!-- .modal-content -->
                 	<div class="modal-content">
						<form method="POST" action="importUsers" enctype="multipart/form-data">
						{{ csrf_field() }}
                			<!-- .modal-header -->
                   		<div class="modal-header">
                      		<h5 class="modal-title">{{ __('Import Users') }}</h5>
                    		</div>
                        <!-- /.modal-header -->
                       	<!-- .modal-body -->
                        	<div class="modal-body">
                              <p>{{ __('Please locate your import file below.') }}</p>
                              <p>{{ __('Imports are available in Excel and CSV.') }}</p>
							  <p>{{ __('If you want you can download an example file here:') }} <a href="{{ asset('assets/MMI_upload_file.xlsx') }}">MMI upload file</a></p>
							  <div class="custom-file">
                            			<input type="file" class="custom-file-input" id="import_file" name="import_file" multiple>
                           			<label class="custom-file-label" for="import_file">{{ __('Choose file') }}</label>
                          	  </div>
						</div>
                      	<!-- /.modal-body -->
                  		<!-- .modal-footer -->
                   		<div class="modal-footer">
								<button type="submit" class="btn btn-primary">{{ __('Upload') }}</button>
                      			<button type="button" class="btn btn-light" data-dismiss="modal">{{ __('Close') }}</button>
                	    		</div>
                    		<!-- /.modal-footer -->
           				</form>
					</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 active show" role="tab" data-toggle="tab" href="#mygroups">{{ __('My Groups') }}</a>
                      </li>
					  @role('admin')
	                      <li class="nav-item">
	                        <a class="nav-link" role="tab" data-toggle="tab" href="#allgroups" >{{ __('All Groups') }}</a>
	                      </li>
					  @endrole
                    </ul>
                    <!-- /.nav-tabs -->
                  </header>
                  <!-- /.card-header -->
                  <!-- .card-body -->
                  <div class="card-body">
				  	<div class="tab-content">

						<!-- .tabpanel -->
						<div role="tabpanel" class="tab-pane active" id="mygroups">
                     		<!-- .table -->
                      		<table id="mygroups-table" class="table">
                      			<!-- thead -->
                      			<thead>
                       				<tr>
						 				<th>{{ __('Name') }}</th>
             			  				<th>{{ __('Profile') }}</th>
                			  				<th>{{ __('Updated At') }}</th>
						  				<th style="width:170px; min-width:170px;">{{ __('Actions') }}</th>
                        				</tr>
                      			</thead>
                      			<!-- /thead -->
                      		</table>
                      		<!-- /.table -->
						</div>						
                  		<!-- /.tabpanel -->	

						@role('admin')
						<!-- .tabpanel -->
						<div role="tabpanel" class="tab-pane" id="allgroups">
                     		<!-- .table -->
                      		<table id="allgroups-table" class="table">
                      			<!-- thead -->
                      			<thead>
                       				<tr>
						 				<th>{{ __('Name') }}</th>
             			  				<th>{{ __('Profile') }}</th>
										<th>{{ __('Facilitator') }}</th>
                			  				<th>{{ __('Updated At') }}</th>
						  				<th style="width:170px; min-width:170px;">{{ __('Actions') }}</th>
                        				</tr>
                      			</thead>
                      			<!-- /thead -->
                      		</table>
                      		<!-- /.table -->
						</div>						
                  		<!-- /.tabpanel -->	
						@endrole					

				  	</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() {
	$('#mygroups-table').DataTable({
	  processing: true,
      serverSide: true,
	  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>>",
      language: {
        paginate: {
          previous: '<i class="fa fa-lg fa-angle-left"></i>',
          next: '<i class="fa fa-lg fa-angle-right"></i>'
        }
      },
      lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
	  autoWidth: false,
	  ajax: '{!! route('groups.mygroups') !!}',
      deferRender: true,
      order: [2, 'desc'],
      columns: [
            { data: 'groupname', name: 'groups.groupname' },
            { data: 'profilename', name: 'profiles.profilename' },
			{ data: 'updated_at', 'type': 'num', 'render': { '_': 'display', 'sort': 'timestamp' } },
			{ data: 'id', name: 'groups.id', orderable: false, searchable: false }
       ],
    });
  });
  
  @role('admin')
  $(function() {
  	$('#allgroups-table').DataTable({
      processing: true,
      serverSide: true,
	  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>>",
      language: {
        paginate: {
          previous: '<i class="fa fa-lg fa-angle-left"></i>',
          next: '<i class="fa fa-lg fa-angle-right"></i>'
        }
      },
      lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
	  autoWidth: false,
	  ajax: '{!! route('groups.allgroups') !!}',
      deferRender: true,
      order: [3, 'desc'],
      columns: [
            { data: 'groupname', name: 'groups.groupname' },
            { data: 'profilename', name: 'profiles.profilename' },
			{ data: 'name', name: 'users.name' },
			{ data: 'updated_at', 'type': 'num', 'render': { '_': 'display', 'sort': 'timestamp' } },
			{ data: 'id', name: 'groups.id', orderable: false, searchable: false }
       ],
    });
  });
  @endrole
 
// onclick event is assigned to the #button element.
document.getElementById("button").onclick = function() {
  window.location.href = "/groups/create";
};
document.getElementById("button1").onclick = function() {
  window.location.href = "/groups/create";
};
</script>
@endpush