@extends('layouts.app')

@section('content')
<div class="container margin-top-25">
	<div class="row justify-content-center">
		<div class="col-md-12">
      
				<a href="{{ URL::to('admin/areas/create') }}" class="button pull-right">Add Area</a>
				<a href="{{ URL::to('admin/hubs/create') }}" class="button pull-right margin-right-5">Add Hub</a>
			
			<div style="padding: 0px 0px 0px 0px; width: 450px;">
				<form action="{{ URL::to('admin/search/hubs') }}" method="POST" role="search" target="_self">
					{{ csrf_field() }}
					<div class="submit-field">
						<div class="input-with-icon">
							<div id="autocomplete-container">
								<input type="text" class="with-border" name="q" placeholder="search..." /> 
							</div>
							<i class="icon-material-outline-search"></i>
						</div>
					</div>
				</form>
			</div>
		
			<table class="basic-table">
				<thead class="thead-light">
						<th>Hub (areas)</th>
						<th>Status</th>
						<th width="120px">Action</th>
				</thead>
				<tbody>
				@foreach($data['hubs'] as $hub)
					<tr>
						<td>{{ $hub->suburb }} ( <a href="{{ URL::to('admin/hubs/edit',$hub->id) }}" title="Areas in hub" data-tippy-placement="right"> {{ $hub->areas_count }}</a> ) </td>
						<td>{{ $hub->status?'Active':'Inactive' }}</td>
						<td>
							<a href="{{ URL::to('admin/hubs/edit',$hub->id) }}" class="button small ripple-effect" title="Edit Hub" data-tippy-placement="left"><i class="icon-feather-edit"></i></a>
							<!-- <a href="{{ URL::to('',$hub->id) }}" class="btn btn-info btn-sm"><i class="fa fa-eye"></i></a> -->
							<!-- <a onclick="view_audit('{{ $hub->id }}')" class="btn btn-light btn-sm"><i class="fa fa-list"></i></a> -->
						</td>
					</tr>
				@endforeach
				</tbody>
			</table>
				  
			<div class="pull-right">
				@if(count($data['hubs']) > 0)
					{{ $data['hubs']->links() }}
				@endif
			</div>
               
		</div>
	</div>
</div>

<div class="modal" id="myModal" aria-hidden="true" tab-index="-1" role="dialog"></div>

@endsection
@section('scripts')
<script  type="application/javascript">
  function view_audit(id){
     	$('#myModal').load('/audit_data/services/'+id, function(response) {
			  $('#myModal').modal( {backdrop:'static'} );
	    });
	}
</script>
@endsection