<?php $__template->layout('Layout.main'); ?>
<?php $__template->section('title'); ?>تصنيفات الأصناف<?php $__template->endSection(); ?>
<?php $__template->section('page_actions'); ?>
<a href="/inventory/categories/create" class="btn btn-primary"><i data-lucide="plus" style="width:16px;height:16px;"></i> تصنيف جديد</a>
<?php $__template->endSection(); ?>
<?php $__template->section('content'); ?>

<div class="card" style="margin-bottom:20px;padding:15px;">
    <form method="GET" action="/inventory/categories" style="display:flex;gap:10px;flex-wrap:wrap;align-items:end;">
        <div>
            <label class="form-label" style="font-size:12px;">بحث</label>
            <input type="text" name="q" value="<?= e($filters['q'] ?? '') ?>" placeholder="الكود، الاسم..." class="form-input" style="min-width:200px;">
        </div>
        <div>
            <label class="form-label" style="font-size:12px;">التصنيف الرئيسي</label>
            <select name="parent_id" class="form-select" style="min-width:150px;">
                <option value="">الكل</option>
                <?php foreach ($roots as $root): ?>
                    <option value="<?= (int) $root['id'] ?>" <?= ($filters['parent_id'] ?? '') == $root['id'] ? 'selected' : '' ?>><?= e($root['name_ar']) ?></option>
                <?php endforeach; ?>
            </select>
        </div>
        <button type="submit" class="btn btn-outline">بحث</button>
        <a href="/inventory/categories" class="btn btn-sm btn-outline" style="color:#6B7280;">مسح</a>
    </form>
</div>

<?php if (!empty($tree)): ?>
<div class="card">
    <?php foreach ($tree as $root): ?>
    <div style="border-right:4px solid #0D7377;margin-bottom:0;<?= $root !== end($tree) ? 'border-bottom:1px solid #E5E7EB;' : '' ?>">
        <!-- Root category row -->
        <div style="display:flex;align-items:center;justify-content:space-between;padding:15px 20px;background:#F9FAFB;">
            <div style="display:flex;align-items:center;gap:12px;">
                <i data-lucide="folder" style="width:20px;height:20px;color:#0D7377;"></i>
                <div>
                    <div style="font-weight:700;font-size:15px;color:#1F2937;"><?= e($root['name_ar']) ?></div>
                    <div style="display:flex;gap:10px;margin-top:3px;">
                        <code style="font-size:12px;background:#E5E7EB;padding:1px 6px;border-radius:3px;"><?= e($root['code']) ?></code>
                        <span style="font-size:12px;color:#6B7280;"><?= count($root['children'] ?? []) ?> تصنيف فرعي</span>
                    </div>
                </div>
            </div>
            <div style="display:flex;align-items:center;gap:10px;">
                <?php if ($root['is_active']): ?>
                    <span style="color:#059669;font-weight:600;font-size:13px;">● نشط</span>
                <?php else: ?>
                    <span style="color:#DC2626;font-weight:600;font-size:13px;">● معطل</span>
                <?php endif; ?>
                <a href="/inventory/categories/<?= (int) $root['id'] ?>/edit" class="btn btn-sm btn-outline">
                    <i data-lucide="edit-2" style="width:14px;height:14px;"></i> تعديل
                </a>
            </div>
        </div>

        <!-- Children -->
        <?php if (!empty($root['children'])): ?>
            <?php foreach ($root['children'] as $child): ?>
            <div style="display:flex;align-items:center;justify-content:space-between;padding:12px 20px;padding-right:50px;border-top:1px solid #F3F4F6;">
                <div style="display:flex;align-items:center;gap:10px;">
                    <i data-lucide="corner-down-left" style="width:16px;height:16px;color:#9CA3AF;transform:scaleX(-1);"></i>
                    <i data-lucide="file" style="width:16px;height:16px;color:#6B7280;"></i>
                    <div>
                        <span style="font-weight:600;color:#374151;"><?= e($child['name_ar']) ?></span>
                        <code style="font-size:12px;background:#E5E7EB;padding:1px 6px;border-radius:3px;margin-right:8px;"><?= e($child['code']) ?></code>
                    </div>
                </div>
                <div style="display:flex;align-items:center;gap:10px;">
                    <?php if ($child['is_active']): ?>
                        <span style="color:#059669;font-weight:600;font-size:13px;">● نشط</span>
                    <?php else: ?>
                        <span style="color:#DC2626;font-weight:600;font-size:13px;">● معطل</span>
                    <?php endif; ?>
                    <a href="/inventory/categories/<?= (int) $child['id'] ?>/edit" class="btn btn-sm btn-outline">
                        <i data-lucide="edit-2" style="width:14px;height:14px;"></i> تعديل
                    </a>
                </div>
            </div>
            <?php endforeach; ?>
        <?php endif; ?>
    </div>
    <?php endforeach; ?>

    <?php if (isset($pagination) && ($pagination['last_page'] ?? 1) > 1): ?>
    <div style="padding:15px;">
        <?php $__template->include('Shared.Components.pagination', ['pagination' => $pagination]); ?>
    </div>
    <?php endif; ?>
</div>
<?php else: ?>
<div class="card" style="padding:60px 20px;text-align:center;">
    <i data-lucide="folder-open" style="width:48px;height:48px;color:#D1D5DB;margin:0 auto 15px;display:block;"></i>
    <p style="color:#6B7280;font-size:15px;margin:0;">لا توجد تصنيفات</p>
    <a href="/inventory/categories/create" style="color:#0D7377;font-size:14px;margin-top:10px;display:inline-block;">+ إضافة تصنيف جديد</a>
</div>
<?php endif; ?>

<?php $__template->endSection(); ?>
<script>
document.addEventListener('DOMContentLoaded', function() { lucide.createIcons(); });
</script>
