@props(['category'])

<tr>
    <td>
        <div class="form-check">
            <!-- <input type="checkbox" class="form-check-input" name="ids[]" value="{{ $category->id }}" /> -->
            <label class="form-check-label" for=""></label>
        </div>
    </td>
    <td>
        <div class="d-flex align-items-center gap-2 col-md-6">
            <div class="rounded bg-light avatar-md d-flex align-items-center justify-content-center">
                <img src="{{ asset($category->image ? 'storage/images/categories/' . $category->image : 'storage/images/noimg.jpg') }}" alt="" class="avatar-md">
            </div>
            <p class="text-dark fw-medium fs-15 mb-0">{{ $category->name }}</p>
        </div>

    </td>
    <td>{{ $category->id }}</td>
    <td style="text-align:center; vertical-align:middle">{{ $category->parent_id }}</td>
    <td>
        <div class="d-flex justify-content-end gap-2">
            <a href="{{ route('admin.category.edit', [ 'category' => $category->id]) }}" class="btn btn-soft-primary btn-sm"><iconify-icon icon="solar:pen-2-broken" class="align-middle fs-18"></iconify-icon></a>

            <form action="{{ route('admin.category.destroy', [ 'category' => $category->id]) }}" method="POST" style="display:inline-block;">
                @csrf
                @method('DELETE')
                <button type="submit" class="btn btn-soft-danger btn-sm"><iconify-icon icon="solar:trash-bin-minimalistic-2-broken" class="align-middle fs-18"></iconify-icon></button>
            </form>
        </div>
    </td>
</tr>

@foreach($category->childrenRecursive as $child)
    <!-- unlimited nested child category -->
    <x-admin.category-item :category="$child" />
@endforeach