@extends('backEnd.layouts.master')
@section('title', 'Categories Tree')

@section('content')
<div class="container-fluid py-3">
    <div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
        <div>
            <h4 class="mb-0 fw-bold"><i class="fas fa-sitemap me-2 text-success"></i>Categories Tree</h4>
            <small class="text-muted">Hierarchical view of all product categories</small>
        </div>
        <div class="d-flex gap-2">
            <a href="{{ route('admin.categories.index') }}" class="btn btn-outline-secondary btn-sm">
                <i class="fas fa-list me-1"></i> Table View
            </a>
            <a href="{{ route('admin.categories.create') }}" class="btn btn-success btn-sm">
                <i class="fas fa-plus me-1"></i> Add Category
            </a>
        </div>
    </div>

    <div class="card shadow-sm border-0">
        <div class="card-body">
            @forelse($categories as $parent)
                @include('backEnd.category.partials.tree-node', ['category' => $parent, 'level' => 0])
            @empty
                <div class="text-center py-5 text-muted">
                    <i class="fas fa-folder-open fs-1 mb-3 d-block"></i>
                    No categories yet. <a href="{{ route('admin.categories.create') }}">Create one</a>.
                </div>
            @endforelse
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
.cat-tree-node { border-left: 2px solid #e5e7eb; margin-left: 12px; padding-left: 16px; margin-bottom: 8px; }
.cat-tree-root { border-left: none; margin-left: 0; padding-left: 0; }
.cat-tree-card {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px; padding: 12px 16px;
}
.cat-tree-card:hover { background: #f0fdf4; border-color: #86efac; }
</style>
@endpush