@extends('admin.layouts.master')

@section('style')
    <style>
        .tree-name {
            white-space: nowrap;
        }

        .tree-indent {
            display: inline-block;
            width: 18px;
        }

        .tree-arrow {
            display: inline-block;
            width: 18px;
            color: #6c757d;
        }
    </style>
@endsection

@section('content')
    @php
        /**
         * Render tree rows (đệ quy) trong 1 file blade
         * @param \Illuminate\Support\Collection|array $items
         * @param int $level
         */
        $renderRows = function ($items, $level = 0) use (&$renderRows) {
            $html = '';
            foreach ($items as $item) {
                $indent = str_repeat('<span class="tree-indent"></span>', $level);
                $arrow = $level > 0 ? '<span class="tree-arrow">↳</span>' : '<span class="tree-arrow"></span>';

                $statusHtml =
                    (int) ($item->status ?? 0) === 1
                        ? '<span class="badge bg-success">Đã kích hoạt</span>'
                        : '<span class="badge bg-danger">Chưa kích hoạt</span>';

                $editUrl = route('admin.product_categories.edit', $item->slug);

                $html .=
                    '
                <tr>
                    <td>' .
                    e($item->id) .
                    '</td>
                    <td class="text-start tree-name">' .
                    $indent .
                    $arrow .
                    e($item->name) .
                    '</td>
                    <td>' .
                    $statusHtml .
                    '</td>
                    <td>
                        <a href="' .
                    $editUrl .
                    '" class="btn btn-warning btn-sm">
                            <i class="bx bx-edit"></i>
                        </a>
                    </td>
                </tr>
            ';

                // children
                if (!empty($item->children) && count($item->children) > 0) {
                    $html .= $renderRows($item->children, $level + 1);
                }
            }

            return $html;
        };
    @endphp

    <div class="row">
        <div class="col-12">
            <div class="page-title-box d-flex align-items-center justify-content-between">
                <h4 class="mb-0 fw-bold">Danh sách danh mục</h4>

                <div class="d-flex align-items-center gap-2">
                    {{-- Search theo name --}}
                    <form action="{{ route('admin.product_categories.index') }}" method="GET"
                        class="d-flex align-items-center gap-2">
                        <input type="text" name="search" class="form-control border-primary"
                            placeholder="Tìm theo tên danh mục..." value="{{ request('search') }}" style="min-width: 280px">
                        <button type="submit"
                            class="btn btn-primary d-flex align-items-center px-3 py-2 shadow-sm rounded">
                            <i class="bx bx-search-alt-2 me-1 fs-5"></i> Tìm
                        </button>

                        @if (request()->filled('search'))
                            <a href="{{ route('admin.product_categories.index') }}"
                                class="btn btn-outline-secondary align-items-center px-3 py-2 shadow-sm rounded">
                                Xóa
                            </a>
                        @endif
                    </form>

                    <a href="{{ route('admin.product_categories.create') }}" class="ms-2">
                        <button class="btn btn-success btn-sm d-flex align-items-center shadow-sm px-3 py-2 rounded">
                            <i class="bx bx-plus me-1 fs-5"></i> Thêm mới
                        </button>
                    </a>
                </div>
            </div>
        </div>
    </div>

    {{-- Table --}}
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">

                    <div class="table-responsive">
                        <table class="table table-bordered text-center dt-responsive nowrap w-100 align-middle">
                            <thead class="text-center">
                                <tr>
                                    <th style="width: 90px">ID</th>
                                    <th class="text-start">Tên danh mục</th>
                                    <th style="width: 160px">Trạng thái</th>
                                    <th style="width: 120px">Thao tác</th>
                                </tr>
                            </thead>

                            <tbody>
                                @if (!empty($product_categories) && $product_categories->isNotEmpty())
                                    {!! $renderRows($product_categories, 0) !!}
                                @else
                                    <tr>
                                        <td colspan="4">Không có dữ liệu</td>
                                    </tr>
                                @endif
                            </tbody>
                        </table>
                    </div>

                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
@endsection