@extends('admin.layouts.app')
@section('content')
          <div class="page-inner">
            <div class="page-header">
              <h3 class="fw-bold mb-3">DataTables.Net</h3>
              <ul class="breadcrumbs mb-3">
                <li class="nav-home">
                  <a href="#">
                    <i class="icon-home"></i>
                  </a>
                </li>
                <li class="separator">
                  <i class="icon-arrow-right"></i>
                </li>
                <li class="nav-item">
                  <a href="#">Categories</a>
                </li>                
              </ul>
            </div>
            <div class="row">   

              <div class="col-md-12">
                @if(session('success'))
                  <div class="alert alert-success">{{session('success')}}</div>
                @endif
                <div class="card">
                  <div class="card-header">
                    <div class="d-flex align-items-center">
                      <h4 class="card-title">Categories</h4>
                      <a href="{{route('admin.category.create')}}"
                        class="btn btn-primary btn-round ms-auto">
                        <i class="fa fa-plus"></i>
                        Add Category
</a>
                    </div>
                  </div>
                  <div class="card-body">                   

                    <div class="table-responsive">
                      <table
                        id="add-row"
                        class="display table table-striped table-hover"
                      >
                        <thead>
                          <tr>
                            <th>Name</th>
                            <th>Description</th>
                            <th>Image</th>
                            <th style="width: 10%">Action</th>
                          </tr>
                        </thead>
                        <tfoot>                          
                          <tr>
                            <th>Name</th>
                            <th>Description</th>
                            <th>Image</th>
                            <th>Action</th>
                          </tr>
                        </tfoot>
                        <tbody>
                          @foreach($categories as $category)
                          <tr>
                            <td>{{$category->name}}</td>
                            <td>{{$category->description}}</td>
                            <td><img src="{{$category->image}}" alt=""></td>
                            <td>
                              <div class="form-button-action">
                                <button
                                  type="button"
                                  data-bs-toggle="tooltip"
                                  title=""
                                  class="btn btn-link btn-primary btn-lg"
                                  data-original-title="Edit Task"
                                >
                                  <i class="fa fa-edit"></i>
                                </button>
                                <button
                                  type="button"
                                  data-bs-toggle="tooltip"
                                  title=""
                                  class="btn btn-link btn-danger"
                                  data-original-title="Remove"
                                >
                                  <i class="fa fa-times"></i>
                                </button>
                              </div>
                            </td>
                          </tr>
                          @endforeach
                        
                        </tbody>
                      </table>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <script src="{{asset('assets/admin/js/core/jquery-3.7.1.min.js')}}"></script>
          <script src="{{asset('assets/admin/js/plugin/datatables/datatables.min.js')}}"></script>
          <script>
            $(document).ready(function () {

                // Add Row
                $("#add-row").DataTable({
                pageLength: 5,
                });
            });
            </script>
          @endsection