@extends('layouts.app')

@section('content')
<div class="container margin-top-25">
    <div class="row justify-content-center">
        <div class="col-md-12">
            <div class="card">
							<div class="card-header">
								<a href="{{ URL::to('admin/area/create') }}" class="button pull-right">Add Area</a>
							<div style="padding: 0px 0px 0px 0px; width: 450px;">
					<form action="{{ URL::to('admin/search/area') }}" method="POST" role="search" target="_self">
						{{ csrf_field() }}
						<div class="input-group">
							<input type="text" class="form-control" name="q"
								placeholder="search..." /> 
							<span class="input-group-btn">
								<button type="submit" class="button">
									<span class="fa fa-search"></span>
								</button>
							</span>
						</div>
					</form>
				</div>
				</div>
				
                <div class="card-body" style="padding: 0">
                    @if (session('status'))
                        <div class="alert alert-success" role="alert">
                            {{ session('status') }}
                        </div>
                    @endif

            <table class="basic-table">
						<thead class="thead-light">
								<th>Areas</th>
								<th>Status</th>
								<th width="120px">Action</th>
						</thead>
						<tbody>
						@foreach($data['areas'] as $area)
							<tr>
								<td>{{ $area->area }} </td>
								<td>{{ $area->status?'Active':'Inactive' }}</td>
								<td>
									<a href="{{ URL::to('admin/areas/edit',$area->id) }}" class="button"><i class="fa fa-edit"></i></a>
									<!-- <a href="{{ URL::to('',$area->id) }}" class="btn btn-info btn-sm"><i class="fa fa-eye"></i></a> -->
									<!-- <a onclick="view_audit('{{ $area->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['areas']) > 0)
				   {{ $data['areas']->links() }}
					@endif
					</div>
                </div>
            </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