@extends('admin.admin_dashboard')

@section('title', 'Accounting - Chart of Accounts')

@section('customcss')
<style>
    .account-tree-container {
        background: #fff;
        padding: 20px;
        min-height: 500px;
    }
    
    .tree-node {
        margin: 5px 0;
        padding-left: 20px;
    }
    
    .tree-item {
        display: flex;
        align-items: center;
        padding: 8px 12px;
        border-radius: 4px;
        cursor: pointer;
        transition: background 0.2s;
    }
    
    .tree-item:hover {
        background: #f8f9fa;
    }
    
    .tree-toggle {
        width: 20px;
        height: 20px;
        margin-right: 5px;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        color: #666;
    }
    
    .tree-icon {
        margin-right: 8px;
        color: #ffc107;
    }
    
    .account-code {
        color: #999;
        font-size: 12px;
        margin-right: 8px;
        min-width: 80px;
    }
    
    .account-name {
        flex: 1;
        font-weight: 500;
    }
    
    .account-balance {
        font-weight: bold;
        margin-left: 15px;
        min-width: 120px;
        text-align: right;
    }
    
    .balance-debit {
        color: #28a745;
    }
    
    .balance-credit {
        color: #dc3545;
    }
    
    .tree-children {
        display: none;
        padding-left: 20px;
    }
    
    .tree-children.show {
        display: block;
    }
    
    /* Context Menu */
    .custom-context-menu {
        position: absolute;
        background: #fff;
        border: 1px solid #ccc;
        border-radius: 4px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.2);
        z-index: 10000;
        min-width: 200px;
        padding: 5px 0;
        display: none;
    }
    
    .custom-context-menu ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    
    .custom-context-menu li {
        padding: 10px 20px;
        cursor: pointer;
        transition: background 0.2s;
    }
    
    .custom-context-menu li:hover {
        background: #f0f0f0;
    }
    
    .custom-context-menu li i {
        margin-right: 10px;
        width: 20px;
    }
    
    .modal-xl {
        max-width: 1200px;
    }
    
    .journal-table {
        font-size: 13px;
    }
    
    .journal-table th {
        background: #f8f9fa;
        font-weight: 600;
    }
</style>
@endsection

@section('admin')
<div class="content-body">
    <div class="container-fluid">
        <div class="row page-titles">
            <div class="col-md-12">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item active"><a href="javascript:void(0)">Home</a></li>
                    <li class="breadcrumb-item"><a href="javascript:void(0)">Accounting</a></li>
                </ol>
            </div>
        </div>
        
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header d-flex align-items-center justify-content-between">
                        <h4 class="card-title mb-0">Chart of Accounts</h4>
                        <button class="btn btn-primary btn-sm" id="refreshTreeBtn">
                            <i class="fa fa-refresh"></i> Refresh
                        </button>
                    </div>
                    <div class="card-body">
                        <div class="account-tree-container">
                            <div id="account-tree"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Context Menu -->
<div id="customContextMenu" class="custom-context-menu" style="display: none;">
    <ul>
        <li id="contextAddSubAccount">
            <i class="fa fa-plus-circle text-success"></i> Add Sub-Account
        </li>
        <li id="contextViewEntries">
            <i class="fa fa-list text-primary"></i> View Journal Entries
        </li>
    </ul>
</div>

<!-- Add Sub-Account Modal -->
<div class="modal fade" id="addSubAccountModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Add Sub-Account</h5>
                <button type="button" class="close" onclick="$('#addSubAccountModal').modal('hide')" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form id="addSubAccountForm">
                <div class="modal-body">
                    <input type="hidden" id="parent_id" name="parent_id">
                    
                    <div class="form-group">
                        <label>Parent Account</label>
                        <input type="text" class="form-control" id="parent_account_name" readonly>
                    </div>
                    
                    <div class="form-group">
                        <label>Account Code</label>
                        <input type="text" class="form-control" name="code" id="account_code" 
                               placeholder="Leave empty for auto-generate">
                    </div>
                    
                    <div class="form-group">
                        <label>Account Name <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" name="name" id="account_name" required>
                    </div>
                    
                    <div class="form-group">
                        <label>Account Type <span class="text-danger">*</span></label>
                        <select class="form-control" name="type" id="account_type" required>
                            <option value="">Select Type</option>
                            <option value="asset">Asset</option>
                            <option value="liability">Liability</option>
                            <option value="equity">Equity</option>
                            <option value="income">Income</option>
                            <option value="expense">Expense</option>
                        </select>
                    </div>
                    
                    <div class="form-group">
                        <label>Sub Type</label>
                        <input type="text" class="form-control" name="subtype" id="account_subtype" 
                               placeholder="e.g., Current Asset, Fixed Asset">
                    </div>
                    
                    <div class="form-group">
                        <div class="custom-control custom-checkbox">
                            <input type="checkbox" class="custom-control-input" id="is_group" name="is_group" value="1">
                            <label class="custom-control-label" for="is_group">
                                This is a group account (can have sub-accounts)
                            </label>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" onclick="$('#addSubAccountModal').modal('hide')">Cancel</button>
                    <button type="submit" class="btn btn-primary">
                        <i class="fa fa-save"></i> Save Account
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Journal Entries Modal -->
<div class="modal fade" id="journalEntriesModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-xl" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    Journal Entries - <span id="modal_account_name"></span>
                    <small class="text-muted" id="modal_account_code"></small>
                </h5>
                <button type="button" class="close" onclick="$('#journalEntriesModal').modal('hide')" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="row mb-3">
                    <div class="col-md-4">
                        <label>From Date</label>
                        <input type="date" class="form-control" id="entry_from_date">
                    </div>
                    <div class="col-md-4">
                        <label>To Date</label>
                        <input type="date" class="form-control" id="entry_to_date">
                    </div>
                    <div class="col-md-4">
                        <label>&nbsp;</label><br>
                        <button class="btn btn-primary" id="filterEntriesBtn">
                            <i class="fa fa-filter"></i> Filter
                        </button>
                        <button class="btn btn-secondary" id="resetEntriesBtn">
                            <i class="fa fa-refresh"></i> Reset
                        </button>
                    </div>
                </div>
                <div class="table-responsive">
                    <table class="table table-bordered table-hover journal-table">
                        <thead>
                            <tr>
                                <th>Entry No</th>
                                <th>Date</th>
                                <th>Description</th>
                                <th>Memo</th>
                                <th class="text-end">Debit</th>
                                <th class="text-end">Credit</th>
                                <th class="text-end">Balance</th>
                                <th>Created By</th>
                            </tr>
                        </thead>
                        <tbody id="journal_entries_tbody">
                            <tr>
                                <td colspan="8" class="text-center">
                                    <i class="fa fa-spinner fa-spin"></i> Loading...
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" onclick="$('#journalEntriesModal').modal('hide')">Close</button>
            </div>
        </div>
    </div>
</div>
<!--**********************************
    Content body end
***********************************-->
@endsection

@section('customjs')
<script>
$(document).ready(function() {
    let selectedNode = null;
    let accountsData = [];
    let currentAccountId = null;
    
    // Load tree data
    function initTree() {
        $.ajax({
            url: '{{ route("admin.accounting.tree") }}',
            type: 'GET',
            success: function(data) {
                accountsData = data;
                renderTree(data, $('#account-tree'));
            },
            error: function() {
                $('#account-tree').html('<p class="text-danger">Failed to load accounts</p>');
            }
        });
    }
    
    // Render tree recursively
    function renderTree(nodes, container) {
        if (!nodes || nodes.length === 0) {
            container.html('<p class="text-muted">No accounts found</p>');
            return;
        }
        
        container.empty();
        
        nodes.forEach(node => {
            const hasChildren = node.children && node.children.length > 0;
            const balanceClass = node.balance_raw >= 0 ? 'balance-debit' : 'balance-credit';
            
            const nodeHtml = `
                <div class="tree-node" data-id="${node.id}" data-code="${node.code}" data-type="${node.type}">
                    <div class="tree-item" data-node='${JSON.stringify(node).replace(/'/g, "&apos;")}'>
                        ${hasChildren ? '<span class="tree-toggle"><i class="fa fa-plus-square"></i></span>' : '<span class="tree-toggle"></span>'}
                        <i class="fa fa-folder tree-icon"></i>
                        <span class="account-code">[${node.code}]</span>
                        <span class="account-name">${node.text}</span>
                        <span class="account-balance ${balanceClass}">৳${node.balance}</span>
                    </div>
                    ${hasChildren ? '<div class="tree-children"></div>' : ''}
                </div>
            `;
            
            const $node = $(nodeHtml);
            container.append($node);
            
            if (hasChildren) {
                renderTree(node.children, $node.find('.tree-children').first());
            }
        });
    }
    
    initTree();
    
    // Refresh button
    $('#refreshTreeBtn').on('click', function() {
        initTree();
    });
    
    // Toggle tree node
    $(document).on('click', '.tree-toggle', function(e) {
        e.preventDefault();
        e.stopPropagation();
        const $icon = $(this).find('i');
        const $children = $(this).closest('.tree-node').find('> .tree-children');
        
        if ($icon.hasClass('fa-plus-square')) {
            $icon.removeClass('fa-plus-square').addClass('fa-minus-square');
            $children.addClass('show');
        } else if ($icon.hasClass('fa-minus-square')) {
            $icon.removeClass('fa-minus-square').addClass('fa-plus-square');
            $children.removeClass('show');
        }
    });
    
    // Double-click to view journal entries
    $(document).on('dblclick', '.tree-item', function(e) {
        e.preventDefault();
        e.stopPropagation();
        try {
            const nodeData = $(this).attr('data-node');
            const node = JSON.parse(nodeData.replace(/&apos;/g, "'"));
            viewJournalEntries(node);
        } catch(err) {
            console.error('Error parsing node data:', err);
        }
    });
    
    // Right-click context menu
    $(document).on('contextmenu', '.tree-item', function(e) {
        e.preventDefault();
        e.stopPropagation();
        try {
            const nodeData = $(this).attr('data-node');
            selectedNode = JSON.parse(nodeData.replace(/&apos;/g, "'"));
            
            $('#customContextMenu').css({
                display: 'block',
                left: e.pageX + 'px',
                top: e.pageY + 'px'
            });
        } catch(err) {
            console.error('Error parsing node data:', err);
        }
        return false;
    });
    
    // Hide context menu on document click
    $(document).on('click', function(e) {
        if (!$(e.target).closest('#customContextMenu').length) {
            $('#customContextMenu').hide();
        }
    });
    
    // Context menu - Add Sub-Account
    $('#contextAddSubAccount').on('click', function(e) {
        e.preventDefault();
        e.stopPropagation();
        $('#customContextMenu').hide();
        if (selectedNode) {
            openAddSubAccountModal(selectedNode);
        }
    });
    
    // Context menu - View Entries
    $('#contextViewEntries').on('click', function(e) {
        e.preventDefault();
        e.stopPropagation();
        $('#customContextMenu').hide();
        if (selectedNode) {
            viewJournalEntries(selectedNode);
        }
    });
    
    // Open Add Sub-Account Modal
    function openAddSubAccountModal(node) {
        $('#customContextMenu').hide();
        $('#parent_id').val(node.id);
        $('#parent_account_name').val(node.text + ' [' + node.code + ']');
        $('#account_type').val(node.type);
        $('#account_name').val('');
        $('#account_code').val('');
        $('#account_subtype').val('');
        $('#is_group').prop('checked', false);
        $('#addSubAccountModal').modal('show');
    }
    
    // Submit Add Sub-Account Form
    $('#addSubAccountForm').on('submit', function(e) {
        e.preventDefault();
        
        const formData = {
            parent_id: $('#parent_id').val(),
            name: $('#account_name').val(),
            code: $('#account_code').val(),
            type: $('#account_type').val(),
            subtype: $('#account_subtype').val(),
            is_group: $('#is_group').is(':checked') ? 1 : 0,
            _token: '{{ csrf_token() }}'
        };
        
        $.ajax({
            url: '{{ route("admin.accounting.store") }}',
            type: 'POST',
            data: formData,
            success: function(response) {
                if (response.success) {
                    $('#addSubAccountModal').modal('hide');
                    initTree();
                    toastr.success(response.message);
                }
            },
            error: function(xhr) {
                const errors = xhr.responseJSON?.errors;
                if (errors) {
                    Object.values(errors).forEach(error => {
                        toastr.error(error[0]);
                    });
                } else {
                    toastr.error('Failed to create account');
                }
            }
        });
    });
    
    // View Journal Entries
    function viewJournalEntries(node) {
        $('#customContextMenu').hide();
        currentAccountId = node.id;
        $('#modal_account_name').text(node.text);
        $('#modal_account_code').text('[' + node.code + ']');
        
        // Set default date range (last 10 days)
        const today = new Date();
        const last10Days = new Date();
        last10Days.setDate(today.getDate() - 10);
        
        $('#entry_to_date').val(formatDate(today));
        $('#entry_from_date').val(formatDate(last10Days));
        
        $('#journalEntriesModal').modal('show');
        loadJournalEntries(node.id);
    }
    
    // Load journal entries with date filter
    function loadJournalEntries(accountId) {
        const fromDate = $('#entry_from_date').val();
        const toDate = $('#entry_to_date').val();
        
        $.ajax({
            url: `/admin/accounting/${accountId}/entries`,
            type: 'GET',
            data: {
                from_date: fromDate,
                to_date: toDate
            },
            beforeSend: function() {
                $('#journal_entries_tbody').html('<tr><td colspan="8" class="text-center"><i class="fa fa-spinner fa-spin"></i> Loading...</td></tr>');
            },
            success: function(response) {
                const tbody = $('#journal_entries_tbody');
                tbody.empty();
                
                if (response.entries.length === 0) {
                    tbody.append('<tr><td colspan="8" class="text-center">No journal entries found</td></tr>');
                    return;
                }
                
                response.entries.forEach(entry => {
                    const row = `
                        <tr>
                            <td>${entry.entry_no}</td>
                            <td>${entry.date}</td>
                            <td>${entry.description}</td>
                            <td>${entry.memo || '-'}</td>
                            <td class="text-end text-success">${entry.debit || '-'}</td>
                            <td class="text-end text-danger">${entry.credit || '-'}</td>
                            <td class="text-end"><strong>${entry.balance}</strong></td>
                            <td>${entry.created_by}</td>
                        </tr>
                    `;
                    tbody.append(row);
                });
            },
            error: function() {
                $('#journal_entries_tbody').html('<tr><td colspan="8" class="text-center text-danger">Failed to load entries</td></tr>');
            }
        });
    }
    
    // Format date to YYYY-MM-DD
    function formatDate(date) {
        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, '0');
        const day = String(date.getDate()).padStart(2, '0');
        return `${year}-${month}-${day}`;
    }
    
    // Filter button click
    $('#filterEntriesBtn').on('click', function(e) {
        e.preventDefault();
        if (currentAccountId) {
            loadJournalEntries(currentAccountId);
        }
    });
    
    // Reset button click
    $('#resetEntriesBtn').on('click', function(e) {
        e.preventDefault();
        const today = new Date();
        const last10Days = new Date();
        last10Days.setDate(today.getDate() - 10);
        
        $('#entry_to_date').val(formatDate(today));
        $('#entry_from_date').val(formatDate(last10Days));
        
        if (currentAccountId) {
            loadJournalEntries(currentAccountId);
        }
    });
});
</script>
@endsection