<ol class="breadcrumb">
    <li><a href="accSetupController.php">نظام المحاسبة</a></li>
    <li class="active">دليل الحسابات</li>
</ol>

<div class="panel panel-default panel-m">
    <div class="panel-heading">
        <h3 class="panel-title">
            <span class="glyphicon glyphicon-list-alt" style="margin-left:8px;"></span> دليل الحسابات
            <div class="pull-left noprint">
                <button class="btn btn-default btn-sm" id="btnExpandAll" style="margin-left:5px;"><span class="glyphicon glyphicon-plus"></span> توسيع الكل</button>
                <button class="btn btn-default btn-sm" id="btnCollapseAll" style="margin-left:5px;"><span class="glyphicon glyphicon-minus"></span> طي الكل</button>
                <a href="accAccountController.php?do=add" class="btn btn-primary btn-sm"><span class="glyphicon glyphicon-plus"></span> إضافة حساب جديد</a>
            </div>
        </h3>
    </div>
    <div class="panel-body" style="padding:20px;">
        {if $accountCount > 0}
        <div class="acc-tree" id="accTree">
            {$treeHTML}
        </div>
        {else}
        <div class="alert alert-info text-center" style="font-size:16px;">
            <span class="glyphicon glyphicon-info-sign"></span> لا توجد حسابات. قم بإعداد الموديول أولاً أو أضف حسابات يدوياً.
        </div>
        {/if}
    </div>
</div>

{literal}
<style>
    .acc-tree {
        font-size: 15px;
        line-height: 1.6;
    }
    .acc-tree-node {
        position: relative;
    }
    .acc-tree-children {
        padding-right: 30px;
        border-right: 2px solid #e8e8e8;
        margin-right: 14px;
    }
    .acc-tree-row {
        display: flex;
        align-items: center;
        padding: 8px 10px;
        border-radius: 6px;
        margin-bottom: 2px;
        transition: background 0.15s;
        cursor: default;
    }
    .acc-tree-row:hover {
        background: #f0f7ff;
    }
    .acc-tree-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 26px;
        height: 26px;
        cursor: pointer;
        border-radius: 4px;
        transition: all 0.2s;
        flex-shrink: 0;
    }
    .acc-tree-toggle:not(.leaf):hover {
        background: #e0e0e0;
    }
    .acc-tree-toggle .glyphicon {
        font-size: 14px;
        color: #555;
        transition: transform 0.25s;
    }
    .acc-tree-toggle.expanded .glyphicon {
        transform: rotate(90deg);
    }
    .acc-tree-toggle.leaf {
        cursor: default;
    }
    .acc-tree-icon {
        margin: 0 8px;
        flex-shrink: 0;
    }
    .acc-tree-code {
        background: #3498db;
        color: #fff;
        padding: 2px 10px;
        border-radius: 12px;
        font-size: 13px;
        font-weight: bold;
        margin-left: 10px;
        flex-shrink: 0;
        letter-spacing: 0.5px;
    }
    .acc-tree-name {
        font-weight: 600;
        color: #2c3e50;
        font-size: 15px;
        flex-grow: 1;
    }
    .acc-tree-type {
        font-size: 12px;
        color: #888;
        background: #f5f5f5;
        padding: 2px 8px;
        border-radius: 10px;
        margin: 0 8px;
        flex-shrink: 0;
    }
    .acc-tree-actions {
        display: flex;
        gap: 4px;
        opacity: 0;
        transition: opacity 0.2s;
        flex-shrink: 0;
    }
    .acc-tree-row:hover .acc-tree-actions {
        opacity: 1;
    }
    .acc-tree-actions a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        border-radius: 6px;
        font-size: 14px;
        text-decoration: none;
        transition: all 0.15s;
    }
    .acc-btn-edit {
        color: #f39c12;
        background: #fef9e7;
    }
    .acc-btn-edit:hover {
        background: #f39c12;
        color: #fff;
    }
    .acc-btn-delete {
        color: #e74c3c;
        background: #fdedec;
    }
    .acc-btn-delete:hover {
        background: #e74c3c;
        color: #fff;
    }
    .acc-btn-add {
        color: #27ae60;
        background: #eafaf1;
    }
    .acc-btn-add:hover {
        background: #27ae60;
        color: #fff;
    }
    /* Level-based color accents */
    .acc-tree-node[data-level="1"] > .acc-tree-row { border-right: 4px solid #3498db; }
    .acc-tree-node[data-level="2"] > .acc-tree-row { border-right: 4px solid #2ecc71; }
    .acc-tree-node[data-level="3"] > .acc-tree-row { border-right: 4px solid #e67e22; }
    .acc-tree-node[data-level="4"] > .acc-tree-row { border-right: 4px solid #9b59b6; }
    .acc-tree-node[data-level="5"] > .acc-tree-row { border-right: 4px solid #e74c3c; }

    @media print {
        .acc-tree-actions { display: none !important; }
        .acc-tree-children { display: block !important; }
        .acc-tree-row { padding: 4px 10px; }
    }
</style>
{/literal}
