<td >
  <div style="display: flex; gap: 2px;">
    <button
      type="button"
      class="btn btn-sm btn-primary edit-category-btn"
      data-id="{{ $category->id }}"
      data-toggle="modal"
      data-target="#modal-edit-category"
    >
      Edit
    </button>
    <button
      type="button"
      class="btn btn-sm btn-danger"
      data-toggle="modal"
      data-target="#modal-confirm-delete"
      data-id="{{ $category->id }}"
    >
      Delete
    </button>
  </div>
</td>

<!-- Confirm Delete Modal -->
<div class="modal fade" id="modal-confirm-delete" tabindex="-1" role="dialog" aria-labelledby="modalConfirmDeleteLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modalConfirmDeleteLabel">Confirm Deletion</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        Are you sure you want to delete this category? This action will also remove all associated items, including sliders and videos under this category.
      </div>
      <div class="modal-footer">
        <form action="{{ route('admin.categories.delete', $category->id) }}" method="POST">
          @csrf
          @method('DELETE')
          <button type="submit" class="btn btn-danger">Delete</button>
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
        </form>
      </div>
    </div>
  </div>
</div>
