@include('accounting::admin.accounting._styles')

<div class="acc-wrap">
    <div class="acc-header">
        <div class="acc-header-left">
            <div class="acc-header-icon" style="background:linear-gradient(135deg,#f59e0b,#d97706)">
                <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/></svg>
            </div>
            <div>
                <h1>Account Groups</h1>
                <div class="acc-header-sub">Tally-style account classification</div>
            </div>
        </div>
        @can('accounting.accounting-account-groups.create')
        <a href="{{ route('admin.accounting.account-groups.create') }}" class="btn-acc-primary">
            <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/></svg>
            New Group
        </a>
        @endcan
    </div>

    <div class="acc-table-wrap">
        <table class="dt-table dt-search dt-export dt-perpage dt-checkbox"
               data-route="{{ route('admin.accounting.account-groups.data') }}"
               data-bulk-route="{{ route('admin.accounting.account-groups.bulk-action') }}">
            <thead>
                <tr>
                    <th data-col="id" style="width:60px">ID</th>
                    <th data-col="name">Group Name</th>
                    <th data-col="nature" data-render="nature" style="width:130px">Nature</th>
                    <th data-col="sort_order" style="width:100px">Sort</th>
                    <th data-render="actions" style="width:150px">Actions</th>
                </tr>
            </thead>
        </table>
    </div>
</div>

<script>
window.dtRenders = window.dtRenders || {};
window.dtRenders.nature = function(data, row) {
    return row.nature === 'debit'
        ? '<span class="acc-badge sent">Debit (Dr)</span>'
        : '<span class="acc-badge paid">Credit (Cr)</span>';
};
window.dtRenders.actions = function(data, row) {
    let html = '';
    if (row._edit_url)   html += `<a href="${row._edit_url}" class="btn btn-sm btn-warning">Edit</a> `;
    if (row._delete_url) html += `<button class="btn btn-sm btn-danger dt-delete-btn" data-url="${row._delete_url}">Delete</button>`;
    return html;
};
</script>

@include('components.datatable')