<?php $__template->layout('Layout.main'); ?>

<?php $__template->section('title'); ?>دليل الحسابات<?php $__template->endSection(); ?>

<?php $__template->section('page_actions'); ?>
<?php if (can('accounting.coa.manage')): ?>
<a href="/accounting/chart-of-accounts/create" class="btn btn-primary">+ حساب جديد</a>
<?php endif; ?>
<?php $__template->endSection(); ?>

<?php $__template->section('content'); ?>
<div class="card" style="margin-bottom:15px;">
    <div style="padding:15px 20px;">
        <div style="display:flex;gap:10px;flex-wrap:wrap;align-items:end;">
            <div style="flex:2;">
                <label class="form-label" style="font-size:12px;">بحث</label>
                <input type="text" id="coa-search" class="form-input" value="<?= e($search ?? '') ?>" placeholder="كود الحساب، الاسم، الوصف...">
            </div>
            <div>
                <label class="form-label" style="font-size:12px;">النوع</label>
                <select id="coa-type-filter" class="form-select">
                    <option value="">الكل</option>
                    <option value="asset" <?= ($type ?? '') === 'asset' ? 'selected' : '' ?>>أصول</option>
                    <option value="liability" <?= ($type ?? '') === 'liability' ? 'selected' : '' ?>>خصوم</option>
                    <option value="equity" <?= ($type ?? '') === 'equity' ? 'selected' : '' ?>>حقوق ملكية</option>
                    <option value="revenue" <?= ($type ?? '') === 'revenue' ? 'selected' : '' ?>>إيرادات</option>
                    <option value="expense" <?= ($type ?? '') === 'expense' ? 'selected' : '' ?>>مصروفات</option>
                </select>
            </div>
        </div>
    </div>
</div>

<div class="card">
    <div style="padding:15px 20px;border-bottom:1px solid #E5E7EB;">
        <h3 style="margin:0;">دليل الحسابات (شجرة الحسابات) <span id="coa-count" style="font-size:13px;color:#6B7280;font-weight:400;"></span></h3>
    </div>
    <div style="padding:15px 20px;" id="coa-tree">
        <?php if (empty($tree)): ?>
            <p style="color:#6B7280;text-align:center;padding:40px 0;">لا توجد حسابات — <a href="/accounting/chart-of-accounts/create">أضف حساباً جديداً</a></p>
        <?php else: ?>
            <?php
            function renderAccountTree(array $accounts, int $depth = 0): void {
                foreach ($accounts as $acc) {
                    $indent = $depth * 25;
                    $isHeader = (int)($acc['is_header'] ?? 0);
                    $weight = $isHeader ? '700' : '400';
                    $color = match($acc['account_type']) {
                        'asset' => '#0D7377',
                        'liability' => '#DC2626',
                        'equity' => '#7C3AED',
                        'revenue' => '#059669',
                        'expense' => '#F59E0B',
                        default => '#374151',
                    };
                    $typeLabel = match($acc['account_type']) {
                        'asset' => 'أصول',
                        'liability' => 'خصوم',
                        'equity' => 'حقوق ملكية',
                        'revenue' => 'إيرادات',
                        'expense' => 'مصروفات',
                        default => '',
                    };
                    ?>
                    <div class="coa-row" data-code="<?= e($acc['account_code']) ?>" data-name="<?= e($acc['name_ar'] . ' ' . ($acc['name_en'] ?? '')) ?>" data-type="<?= e($acc['account_type']) ?>" data-desc="<?= e(($acc['description_ar'] ?? '') . ' ' . ($acc['description_en'] ?? '')) ?>" style="display:flex;align-items:center;padding:8px 0;border-bottom:1px solid #F3F4F6;margin-right:<?= $indent ?>px;">
                        <span style="width:80px;direction:ltr;text-align:right;color:<?= $color ?>;font-weight:600;font-size:13px;"><?= e($acc['account_code']) ?></span>
                        <span style="flex:1;margin:0 15px;font-weight:<?= $weight ?>;"><?= e($acc['name_ar']) ?></span>
                        <span style="width:80px;font-size:12px;color:#6B7280;"><?= $typeLabel ?></span>
                        <span style="width:100px;direction:ltr;text-align:left;font-size:13px;"><?= !$isHeader ? money($acc['current_balance'] ?? '0.00') : '' ?></span>
                        <?php if (can('accounting.coa.manage')): ?><a href="/accounting/chart-of-accounts/<?= (int)$acc['id'] ?>/edit" style="font-size:12px;color:#0D7377;">تعديل</a><?php endif; ?>
                    </div>
                    <?php
                    if (!empty($acc['children'])) {
                        renderAccountTree($acc['children'], $depth + 1);
                    }
                }
            }
            renderAccountTree($tree);
            ?>
        <?php endif; ?>
    </div>
</div>

<script>
(function() {
    var searchEl = document.getElementById('coa-search');
    var typeEl = document.getElementById('coa-type-filter');
    var countEl = document.getElementById('coa-count');
    var rows = document.querySelectorAll('.coa-row');
    function filter() {
        var q = (searchEl.value || '').toLowerCase();
        var t = typeEl.value;
        var shown = 0;
        rows.forEach(function(row) {
            var code = (row.getAttribute('data-code') || '').toLowerCase();
            var name = (row.getAttribute('data-name') || '').toLowerCase();
            var desc = (row.getAttribute('data-desc') || '').toLowerCase();
            var type = row.getAttribute('data-type') || '';
            var matchSearch = !q || code.indexOf(q) !== -1 || name.indexOf(q) !== -1 || desc.indexOf(q) !== -1;
            var matchType = !t || type === t;
            if (matchSearch && matchType) { row.style.display = ''; shown++; }
            else { row.style.display = 'none'; }
        });
        countEl.textContent = q || t ? '(' + shown + ' نتيجة)' : '';
    }
    if (searchEl) searchEl.addEventListener('input', filter);
    if (typeEl) typeEl.addEventListener('change', filter);
    filter();
})();
</script>
<?php $__template->endSection(); ?>
