@extends('admin.admin_dashboard')
@section('admin')

<div class="page-content">
    <!-- Breadcrumb -->
    <div class="page-breadcrumb d-flex flex-column flex-sm-row align-items-center justify-content-between mb-3 p-3 bg-primary text-white rounded shadow-sm">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-0 p-0">
                <li class="breadcrumb-item">
                    <a href="{{ route('admin.dashboard') }}" class="text-white">
                        <i class="bx bx-home-alt"></i>
                    </a>
                </li>
                <li class="breadcrumb-item active text-white" aria-current="page">Chart of Accounts</li>
            </ol>
        </nav>
        @can('account.add')
        <a href="{{ route('add.account.form') }}" class="btn btn-light d-flex align-items-center shadow-sm rounded-pill"> 
            <i class="bx bx-plus-circle me-2"></i> New Account
        </a>
        @endcan
    </div>

    <!-- Search Input -->
    <div class="mb-3">
        <input type="text" id="accountSearch" class="form-control shadow-sm rounded-pill" placeholder="Search by code or name...">
    </div>

    <!-- Accounts Tree Table -->
    @can('accounts.view')
    <div class="card shadow border-0 rounded">
        <div class="card-body p-4">
            <div class="table-responsive">
                <table class="table table-hover table-bordered align-middle" id="accountsTable">
                    <thead class="table-success">
                        <tr>
                            <th style="width:60px;" class="text-center">#</th>
                            <th style="width:120px;" class="text-center">Code</th>
                            <th>Name</th>
                            <th style="width:120px;" class="text-center">Type</th>
                            <th style="width:120px;" class="text-center">Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @php
                            $rowNumber = 1;
                            function renderAccountRows($accounts, &$rowNumber, $level = 0) {
                                foreach ($accounts as $acct) {
                                    $hasChildren = $acct->childrenRecursive->count() > 0;
                                    $indent = str_repeat('&nbsp;&nbsp;&nbsp;&nbsp;', $level);
                                    
                                    echo '<tr data-id="'.$acct->id.'" data-parent="'.$acct->parent_id.'" data-level="'.$level.'" class="account-row">';
                                    echo '<td class="fw-bold text-center">'.$rowNumber++.'</td>';
                                    echo '<td class="text-center">'.$acct->code.'</td>';
                                    
                                    echo '<td>';
                                    if ($hasChildren) {
                                        echo $indent.'<i class="bx bx-plus-circle toggle-row me-2 text-primary" style="cursor:pointer;"></i>';
                                    } else {
                                        echo $indent.'<i class="bx bx-circle me-2 text-muted small"></i>';
                                    }
                                    echo '<span class="fw-semibold"';
                                    if(auth()->user()->can('account.view')) {
                                        echo ' data-href="'.route('view.account', $acct->id).'" style="cursor:pointer;"';
                                    }
                                    echo '>'.$acct->name.'</span>';
                                    echo '</td>';
                                    
                                    echo '<td class="text-center"><span class="badge bg-light text-dark">'.ucfirst($acct->type).'</span></td>';
                                    
                                    echo '<td class="text-center">
                                            <div class="dropdown" onclick="event.stopPropagation();">
                                                <a href="#" class="btn btn-sm btn-outline-secondary rounded-circle" data-bs-toggle="dropdown">
                                                    <i class="bx bx-dots-vertical-rounded"></i>
                                                </a>
                                                <ul class="dropdown-menu dropdown-menu-end shadow-sm">';
                                                    if(auth()->user()->can('account.edit')) {
                                                        echo '<li><a class="dropdown-item" href="'.route('edit.account', $acct->id).'"><i class="bx bx-edit-alt me-2"></i>Edit</a></li>';
                                                    }
                                                    if(auth()->user()->can('account.delete')) {
                                                        echo '<li><a class="dropdown-item text-danger delete-account" href="'.route('delete.account', $acct->id).'"><i class="bx bx-trash me-2"></i>Delete</a></li>';
                                                    }
                                    echo        '</ul>
                                            </div>
                                          </td>';
                                    echo '</tr>';

                                    if ($hasChildren) {
                                        renderAccountRows($acct->childrenRecursive, $rowNumber, $level + 1);
                                    }
                                }
                            }
                            renderAccountRows($accounts, $rowNumber);
                        @endphp
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    @endcan
</div>

{{-- SweetAlert2 + Expand/Collapse + Search --}}
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
    // Hide all children initially
    document.querySelectorAll('tr[data-parent]').forEach(function(row) {
        if (row.dataset.parent !== '') row.style.display = 'none';
    });

    // Expand/collapse toggle
    document.querySelectorAll('.toggle-row').forEach(function(icon) {
        icon.addEventListener('click', function(e) {
            e.stopPropagation();
            const tr = this.closest('tr');
            const accountId = tr.dataset.id;
            const isExpanded = this.classList.contains('bx-minus-circle');

            if (isExpanded) {
                this.classList.remove('bx-minus-circle');
                this.classList.add('bx-plus-circle');
                hideChildren(accountId);
            } else {
                this.classList.remove('bx-plus-circle');
                this.classList.add('bx-minus-circle');
                showChildren(accountId);
            }
        });
    });

    function showChildren(parentId) {
        document.querySelectorAll('tr[data-parent="'+parentId+'"]').forEach(function(row) {
            row.style.display = '';
        });
    }

    function hideChildren(parentId) {
        document.querySelectorAll('tr[data-parent="'+parentId+'"]').forEach(function(row) {
            row.style.display = 'none';
            const id = row.dataset.id;
            const icon = row.querySelector('.toggle-row');
            if (icon) {
                icon.classList.remove('bx-minus-circle');
                icon.classList.add('bx-plus-circle');
            }
            hideChildren(id);
        });
    }

    // Row click navigation
    document.querySelectorAll('span[data-href]').forEach(function(span) {
        span.addEventListener('click', function() {
            window.location = this.dataset.href;
        });
    });

    // Delete confirmation
    document.querySelectorAll('.delete-account').forEach(function(el) {
        el.addEventListener('click', function(e) {
            e.preventDefault();
            const url  = this.getAttribute('href');
            const row  = this.closest('tr');
            const code = row.cells[1].textContent.trim();
            const name = row.cells[2].textContent.trim();

            Swal.fire({
                title: `Delete "${code} – ${name}"?`,
                text: "This action cannot be undone!",
                icon: 'warning', 
                showCancelButton: true,
                confirmButtonColor: '#d33',
                cancelButtonColor: '#3085d6',
                confirmButtonText: 'Yes, delete it'
            }).then((result) => {
                if (result.isConfirmed) {
                    window.location.href = url;
                }
            });
        });
    });

    // Hover effect
    document.querySelectorAll('tr.account-row').forEach(function(tr){
        tr.addEventListener('mouseenter', function(){
            this.style.backgroundColor = '#f1f3f6';
        });
        tr.addEventListener('mouseleave', function(){
            this.style.backgroundColor = '';
        });
    });

    // Search filter
    document.querySelector('#accountSearch').addEventListener('keyup', function() {
        const filter = this.value.toLowerCase();
        document.querySelectorAll('tr.account-row').forEach(function(row) {
            const code = row.cells[1].textContent.toLowerCase();
            const name = row.cells[2].textContent.toLowerCase();
            if (code.includes(filter) || name.includes(filter)) {
                row.style.display = '';
            } else {
                row.style.display = 'none';
            }
        });
    });
});
</script>

@endsection