@extends('layouts.admin_panel')

@section('content')
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
  <!-- Content Header (Page header) -->
  <div class="content-header">
    <div class="container">
      <div class="row mb-2">
        <div class="col-sm-6">
          <h1 class="m-0 text-dark"><a href="{{ URL('a/categories/create') }}"><span class="badge bg-success"><i class="nav-icon fas fa-plus"></i> Add Category</span></a> <a href="{{ URL('a/categories-trash') }}"><span class="badge bg-success"><i class="nav-icon fas fa-trash"></i> Trash</span></a></h1>
        </div><!-- /.col -->
        
      </div><!-- /.row -->
    </div><!-- /.container-fluid -->
  </div>
  <!-- /.content-header -->

  <!-- Main content -->
  <div class="content">
    <div class="container">
          <table id="example1" class="table table-bordered table-striped">
            <thead class="thead-dark">
            <tr>
              <th>Category ID</th>              
              <th>Name</th>
              <th>Edit</th>
              <th>Delete</th>
            </tr>
            </thead>
            <tbody>
            @foreach($categories as $category)
              <tr>
                <td>{{ $category->id }}</td>
                <td>{{ $category->name }}</td>
                <td>
                  <a class="btn btn-block btn-sm btn-success" href="categories/"><i class="nav-icon fas fa-edit"></i> Edit</a>
                </td>
                <td>
                    <form method="post" id="delete_category_form" action="categories/">
                        {{ method_field('DELETE') }}
                        {{ csrf_field() }}
                    </form>
                    <a class="btn btn-block btn-sm btn-danger" href="javascript:delete_category()" form="delete_category_form"><i class="nav-icon fas fa-trash"></i> Delete</a>
                </td>
              </tr>
            @endforeach
            </tfoot>
          </table>
    </div><!-- /.container-fluid -->
  </div>
  <!-- /.content -->
</div>
<!-- /.content-wrapper --> 
@endsection

@section('bottom-scripts')
<script>
  function delete_category(x) {
    if(confirm('Are you sure?'))
    {
      var form_name = "delete_category_form" + x;
      document.getElementById(form_name).submit();
    }
}
</script>
@endsection