@extends('adminlte::page')

@section('title', 'Manage Categories')

@section('plugins.Datatables', true)

@section('content_header')
    <div class="d-flex justify-content-between align-items-center">
        <h1 class="font-weight-bold text-dark">Category Management</h1>
        @can('create categories')
            <a class="btn btn-primary shadow-sm" href="{{ route('categories.create') }}">
                <i class="fas fa-plus mr-2"></i> Create New Category
            </a>
        @endcan
    </div>
@stop

@section('content')
    @if ($message = Session::get('success'))
    <div class="alert alert-success alert-dismissible fade show shadow-sm" role="alert">
        <i class="fas fa-check-circle mr-2"></i> {{ $message }}
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
             <span aria-hidden="true">&times;</span>
        </button>
    </div>
    @endif

    <div class="card shadow-md border-0 rounded-lg">
        <div class="card-body">
            <table id="categories-table" class="table table-hover table-striped w-100">
                <thead class="bg-light text-muted">
                    <tr>
                        <th class="py-3 border-0">No</th>
                        <th class="py-3 border-0">Name</th>
                        <th class="py-3 border-0">Code</th>
                        <th class="py-3 border-0">Parent Category</th>
                        <th class="py-3 border-0 text-right">Action</th>
                    </tr>
                </thead>
                <tbody>
                    @php
                        $roots = $categories->whereNull('parent_id');
                        $children = $categories->whereNotNull('parent_id')->groupBy('parent_id');
                        $sortedCategories = collect();
                        
                        $traverse = function ($items, $depth) use (&$traverse, $children, &$sortedCategories) {
                            foreach ($items as $category) {
                                $category->depth = $depth;
                                $sortedCategories->push($category);
                                if ($children->has($category->id)) {
                                    $traverse($children[$category->id], $depth + 1);
                                }
                            }
                        };
                        $traverse($roots, 0);

                        // Fallback for any orphans (should not happen in valid tree)
                        $processedIds = $sortedCategories->pluck('id');
                        $orphans = $categories->whereNotIn('id', $processedIds);
                        
                        foreach($orphans as $orphan) {
                            $orphan->depth = 0;
                            $sortedCategories->push($orphan);
                        }
                    @endphp

                    @foreach ($sortedCategories as $index => $category)
                    <tr>
                        <td class="align-middle">{{ $index + 1 }}</td>
                        <td class="align-middle font-weight-bold">
                            @if($category->depth > 0)
                                <span style="padding-left: {{ $category->depth * 25 }}px;">
                                    <i class="fas fa-level-up-alt fa-rotate-90 mr-2 text-muted"></i>
                                </span>
                            @endif
                            {{ $category->name }}
                        </td>
                        <td class="align-middle"><span class="badge badge-info">{{ $category->code }}</span></td>
                        <td class="align-middle">{{ $category->parent ? $category->parent->name : 'N/A' }}</td>
                        <td class="align-middle text-right">
                             <div class="btn-group">
                                <a class="btn btn-sm btn-info shadow-sm" href="{{ route('categories.show',$category->id) }}" data-toggle="tooltip" title="Show">
                                    <i class="fas fa-eye"></i>
                                </a>
                                @can('edit categories')
                                    <a class="btn btn-sm btn-warning shadow-sm ml-1" href="{{ route('categories.edit',$category->id) }}" data-toggle="tooltip" title="Edit">
                                        <i class="fas fa-pen"></i>
                                    </a>
                                @endcan
                                @can('delete categories')
                                    <form action="{{ route('categories.destroy', $category->id) }}" method="POST" style="display:inline" class="ml-1">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="btn btn-sm btn-danger shadow-sm" data-toggle="tooltip" title="Delete" onclick="return confirm('Are you sure?')">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </form>
                                @endcan
                            </div>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
@stop

@section('css')
@stop

@section('js')
<script>
    $(document).ready(function() {
        $('#categories-table').DataTable({
            responsive: true,
            autoWidth: false,
            "columnDefs": [
                { "orderable": false, "targets": 4 }
            ]
        });
    });
</script>
@stop