{{-- mainLayouts extends --}}
@extends('layouts.contentLayoutMaster')

{{-- Page title --}}
@section('title', 'Usage Area List')

@section('content')
<section class="users-list-wrapper section">
    <div class="users-list-table">
      <div class="card">
		<div class="row pl-1 pr-1">
			<h5 class="col s6"><b>Usage Area</b></h5>
			<div class="input-field col s6">
				<a href="{{ route('admin.usage-area.create') }}" class="btn waves-effect waves-light right p3 border-radius-button"><i class="material-icons left">list</i>Add Usage Area</a>
			</div>
		</div>
        <div class="card-content">
          <!-- datatable start -->
          <div class="responsive-table">
            <table id="users-list-datatable" class="table responsive-table striped">
              <thead class="grey lighten-2">
                <tr>
                  <th></th>
                  <th>#</th>
				  <th>Usage Area Name</th>
				  <th>Created</th>
				  <th>Created By</th>
                  <th></th>
                </tr>
              </thead>
              <tbody>
                  @forelse ($usage_areas as $key => $usage_area)
                  <tr>
                    <td></td>
                    <td>{{$key + $usage_areas->firstItem()}}</td>
					<td>{{$usage_area->name}}</td>
					<td>{{ $usage_area->created_time }}</td>
					<td>Admin</td>
                    <td>
						<div class="right">
							<i class="material-icons left mt-1">
								<a class="blue lighten-4 border-radius-button" href="{{ route('admin.usage-area.edit', $usage_area->id) }}" style="padding: 6px 10px;">edit</a>
							</i>
							<form action="{{ route('admin.usage-area.destroy', $usage_area->id) }}" method="POST" onsubmit="return confirm('Are You Sure?');" style="display: inline-block;">
								@csrf
								@method('DELETE')
								<button class="btn waves-effect waves-light red darken-2 border-radius-button" type="submit" name="action"><i class="material-icons left">delete_forever</i>Delete</button>
							</form>
						</div>
                    </td>
                  </tr>
                  @empty

                  @endforelse
              </tbody>
            </table>
        </div>
          <!-- datatable ends -->
        </div>
      </div>
    </div>
  </section>
@endsection