@extends('layouts.app')
@section('title', 'General Ledger')

@section('content')

<!-- Content Header (Page header) -->
<section class="content-header">
    <h1 class="tw-text-xl md:tw-text-3xl tw-font-bold tw-text-black">General Ledger</h1>
</section>

<!-- Main content -->
<section class="content">
    <div class="row no-print">
        <div class="col-sm-12">
            @component('components.filters', ['title' => __('report.filters')])
            <div class="col-md-3">
                <div class="form-group">
                    {!! Form::label('location_id', __('purchase.business_location') . ':') !!}
                    {!! Form::select('location_id', $business_locations, null, ['class' => 'form-control select2', 'style' => 'width:100%']); !!}
                </div>
            </div>
            <div class="col-md-2">
                <div class="form-group">
                    <label for="account_filter">Filter by Account:</label>
                    <select id="account_filter" class="form-control select2" style="width:100%">
                        <option value="">All Accounts</option>
                        <option value="Asset">Assets</option>
                        <option value="Liability">Liabilities</option>
                        <option value="Equity">Equity</option>
                        <option value="Income">Income</option>
                        <option value="Expense">Expenses</option>
                        <option value="Non-Current Asset">Non-Current Assets</option>
                        <option value="Contra Revenue">Contra Revenue</option>
                    </select>
                </div>
            </div>
            <div class="col-md-2">
                <div class="form-group">
                    <label for="date_range">Date Range:</label>
                    <select id="date_range" class="form-control select2" style="width:100%;">
                        <option value="all">All Transactions</option>
                        <option value="today" selected>Today</option>
                        <option value="yesterday">Yesterday</option>
                        <option value="this_week">This Week</option>
                        <option value="this_month">This Month</option>
                        <option value="this_year">This Year</option>
                        <option value="last_year">Last Year</option>
                        <option value="custom">Custom Range</option>
                    </select>
                </div>
            </div>
            <div class="col-md-2" id="custom_date_range" style="display:none;">
                <div class="form-group">
                    <label for="start_date">Start Date:</label>
                    <input type="text" id="start_date" class="form-control" readonly>
                </div>
            </div>
            <div class="col-md-2" id="custom_date_range_end" style="display:none;">
                <div class="form-group">
                    <label for="end_date_custom">End Date:</label>
                    <input type="text" id="end_date_custom" class="form-control" readonly>
                </div>
            </div>
            @endcomponent
        </div>
    </div>
    <br>
    
    <!-- Per Page Selection -->
    <div class="row no-print" style="margin-bottom: 10px;">
        <div class="col-sm-12">
            <div class="pull-left">
                <label for="per_page">Show entries:</label>
                <select id="per_page" class="form-control" style="width: auto; display: inline-block; margin-left: 5px;">
                    <option value="25">25</option>
                    <option value="50">50</option>
                    <option value="100">100</option>
                    <option value="200">200</option>
                    <option value="500">500</option>
                    <option value="1000">1000</option>
                    <option value="all">All</option>
                </select>
            </div>
        </div>
    </div>
    
    <!-- General Ledger Content -->
    <div id="ledger_container">
        <div class="text-center">
            <i class="fas fa-sync fa-spin fa-fw fa-2x"></i> Loading...
        </div>
    </div>
</section>
@stop

@section('javascript')
<script type="text/javascript">
    var currentPage = 1;
    var totalPages = 1;
    var perPage = 100;
    var currentData = null;
    var currentAccountFilter = '';
    
    $(document).ready(function(){
        // Initialize datepickers
        $('#start_date, #end_date_custom').datepicker({
            autoclose: true,
            format: 'dd/mm/yyyy'
        });
        
        // Get default per page from business settings
        $.ajax({
            url: "{{ action([\App\Http\Controllers\AccountReportsController::class, 'getBusinessSettings']) }}",
            async: false,
            success: function(settings) {
                if (settings.default_datatable_page_entries) {
                    perPage = parseInt(settings.default_datatable_page_entries);
                    $('#per_page').val(perPage.toString());
                } else {
                    perPage = 100;
                    $('#per_page').val('100');
                }
            },
            error: function() {
                perPage = 100;
                $('#per_page').val('100');
            }
        });
        
        $('#account_filter').select2({
            placeholder: "Select account type",
            allowClear: true
        });
        
        // Handle date range change
        $('#date_range').change(function() {
            var value = $(this).val();
            if (value === 'custom') {
                $('#custom_date_range').show();
                $('#custom_date_range_end').show();
                // Set default custom dates
                var today = new Date();
                var start = new Date(today.getFullYear(), today.getMonth(), 1);
                $('#start_date').datepicker('update', formatDateDMY(start));
                $('#end_date_custom').datepicker('update', formatDateDMY(today));
            } else {
                $('#custom_date_range').hide();
                $('#custom_date_range_end').hide();
                $('#start_date').val('');
                $('#end_date_custom').val('');
            }
            loadGeneralLedger(1);
        });
        
        $('#start_date, #end_date_custom').change(function() {
            if ($('#date_range').val() === 'custom') {
                loadGeneralLedger(1);
            }
        });
        
        $('#per_page').change(function() {
            perPage = $(this).val();
            loadGeneralLedger(1);
        });
        
        $('#location_id, #account_filter').change(function() {
            loadGeneralLedger(1);
        });
        
        loadGeneralLedger(1);
    });
    
    function formatDateDMY(date) {
        var day = date.getDate().toString().padStart(2, '0');
        var month = (date.getMonth() + 1).toString().padStart(2, '0');
        var year = date.getFullYear();
        return day + '/' + month + '/' + year;
    }
    
    function formatDateYMD(dateStr) {
        if (!dateStr) return '';
        var parts = dateStr.split('/');
        if (parts.length === 3) {
            return parts[2] + '-' + parts[1] + '-' + parts[0];
        }
        return dateStr;
    }
    
    function getDateRange() {
        var rangeType = $('#date_range').val();
        var today = new Date();
        var start_date = null;
        var end_date = null;
        
        switch(rangeType) {
            case 'all':
                start_date = null;
                end_date = null;
                break;
            case 'today':
                start_date = today;
                end_date = today;
                break;
            case 'yesterday':
                start_date = new Date(today);
                start_date.setDate(today.getDate() - 1);
                end_date = start_date;
                break;
            case 'this_week':
                var day = today.getDay();
                start_date = new Date(today);
                start_date.setDate(today.getDate() - day);
                end_date = today;
                break;
            case 'this_month':
                start_date = new Date(today.getFullYear(), today.getMonth(), 1);
                end_date = today;
                break;
            case 'this_year':
                start_date = new Date(today.getFullYear(), 0, 1);
                end_date = today;
                break;
            case 'last_year':
                start_date = new Date(today.getFullYear() - 1, 0, 1);
                end_date = new Date(today.getFullYear() - 1, 11, 31);
                break;
            case 'custom':
                start_date = $('#start_date').val() ? new Date(formatDateYMD($('#start_date').val())) : null;
                end_date = $('#end_date_custom').val() ? new Date(formatDateYMD($('#end_date_custom').val())) : null;
                break;
        }
        
        if (start_date && end_date) {
            return {
                start_date: formatDateYMD(formatDateDMY(start_date)),
                end_date: formatDateYMD(formatDateDMY(end_date))
            };
        } else if (rangeType === 'all') {
            return { start_date: null, end_date: null };
        } else if (end_date) {
            return { end_date: formatDateYMD(formatDateDMY(end_date)) };
        }
        return null;
    }
    
function loadGeneralLedger(page) {
    currentPage = page;
    var location_id = $('#location_id').val();
    var account_filter = $('#account_filter').val();
    currentAccountFilter = account_filter;
    
    var dateRange = getDateRange();
    var start_date = dateRange ? dateRange.start_date : null;
    var end_date = dateRange ? dateRange.end_date : null;
    
    $('#ledger_container').html('<div class="text-center"><i class="fas fa-sync fa-spin fa-fw fa-2x"></i> Loading...</div>');
    
    $.ajax({
        url: "{{ action([\App\Http\Controllers\AccountReportsController::class, 'generalLedger']) }}",
        data: {
            start_date: start_date,
            end_date: end_date,
            location_id: location_id,
            account_filter: account_filter,
            page: page,
            per_page: perPage === 'all' ? 999999 : perPage
        },
        dataType: "json",
        success: function(result) {
            currentData = result;
            totalPages = result.total_pages || 1;
            renderGeneralLedger(result, account_filter);
        },
        error: function(xhr) {
            $('#ledger_container').html('<div class="alert alert-danger">Error loading general ledger. Please try again.</div>');
            console.log(xhr.responseText);
        }
    });
}
    
function renderGeneralLedger(data, account_filter) {
    var html = '';
    var entries = data.entries || [];
    
    // Group entries by account name for better presentation
    var grouped_entries = {};
    entries.forEach(function(entry) {
        if (!grouped_entries[entry.account_name]) {
            grouped_entries[entry.account_name] = [];
        }
        grouped_entries[entry.account_name].push(entry);
    });
    
    // Get unique account names sorted
    var account_names = Object.keys(grouped_entries).sort();
    
    html += '<div class="box box-solid">';
    html += '<div class="box-header print_section text-center">';
    html += '<h2><strong>' + (data.business_name || '').toUpperCase() + '</strong></h2>';
    html += '<h3>General Ledger</h3>';
    html += '<h4>For Period: ' + (data.period || (data.start_date + ' To ' + data.end_date)) + '</h4>';
    html += '</div>';
    html += '<div class="box-body">';
    
    if (entries.length === 0) {
        html += '<div class="alert alert-info text-center">No transactions found for the selected period.</div>';
    } else {
        // Loop through each account and display its ledger
        for (var i = 0; i < account_names.length; i++) {
            var account_name = account_names[i];
            var account_entries = grouped_entries[account_name];
            var account_type = account_entries[0].account_type;
            
            // Calculate total debits and credits for this account
            var account_debits = 0;
            var account_credits = 0;
            account_entries.forEach(function(entry) {
                account_debits += entry.debit;
                account_credits += entry.credit;
            });
            var account_balance = account_debits - account_credits;
            var balance_type = account_balance >= 0 ? 'Dr' : 'Cr';
            
            html += '<div class="ledger-account" style="margin-bottom: 30px; page-break-inside: avoid;">';
            html += '<div class="account-header" style="background-color: #3c8dbc; color: white; padding: 8px 12px; margin-bottom: 10px;">';
            html += '<h4 style="margin: 0; color: white;">' + escapeHtml(account_name) + ' <small style="color: white;">(' + account_type + ')</small></h4>';
            html += '</div>';
            
            html += '<div class="table-responsive">';
            html += '<table class="table table-bordered table-striped ledger-table">';
            html += '<thead>';
            html += '<tr style="background-color: #f5f5f5;">';
            html += '<th style="width: 12%">Date</th>';
            html += '<th style="width: 15%">Reference No.</th>';
            html += '<th style="width: 25%">Description</th>';
            html += '<th class="text-right" style="width: 15%">Debit</th>';
            html += '<th class="text-right" style="width: 15%">Credit</th>';
            html += '<th class="text-right" style="width: 15%">Balance</th>';
            html += '</tr>';
            html += '</thead>';
            html += '<tbody>';
            
            var running_balance = 0;
            for (var j = 0; j < account_entries.length; j++) {
                var entry = account_entries[j];
                running_balance += entry.debit - entry.credit;
                
                var date = entry.date ? entry.date.split(' ')[0] : '';
                
                html += '<tr>';
                html += '<td>' + formatDisplayDate(date) + '</td>';
                html += '<td>' + escapeHtml(entry.reference_no || '-') + '</td>';
                html += '<td>' + escapeHtml(entry.description) + '</td>';
                html += '<td class="text-right">' + (entry.debit > 0 ? formatNumber(entry.debit) : '-') + '</td>';
                html += '<td class="text-right">' + (entry.credit > 0 ? formatNumber(entry.credit) : '-') + '</td>';
                html += '<td class="text-right ' + (running_balance < 0 ? 'text-danger' : '') + '">' + formatNumber(Math.abs(running_balance)) + ' ' + (running_balance < 0 ? 'Cr' : 'Dr') + '</td>';
                html += '</tr>';
            }
            
            html += '</tbody>';
            html += '<tfoot>';
            html += '<tr style="background-color: #e1f0fa; font-weight: bold;">';
            html += '<td colspan="3"><strong>Account Totals</strong></td>';
            html += '<td class="text-right"><strong>' + formatNumber(account_debits) + '</strong></td>';
            html += '<td class="text-right"><strong>' + formatNumber(account_credits) + '</strong></td>';
            html += '<td class="text-right"><strong>' + formatNumber(Math.abs(account_balance)) + ' ' + balance_type + '</strong></td>';
            html += '</tr>';
            html += '</tfoot>';
            html += '</table>';
            html += '</div>';
            html += '</div>';
        }
        
        // Pagination controls
        if (data.total_pages > 1) {
            html += '<div class="row no-print" style="margin-top: 20px;">';
            html += '<div class="col-sm-12 text-center">';
            html += '<ul class="pagination">';
            
            if (data.current_page > 1) {
                html += '<li><a href="#" onclick="loadGeneralLedger(' + (data.current_page - 1) + '); return false;">&laquo; Previous</a></li>';
            } else {
                html += '<li class="disabled"><span>&laquo; Previous</span></li>';
            }
            
            // Show limited page numbers
            var start_page = Math.max(1, data.current_page - 5);
            var end_page = Math.min(data.total_pages, data.current_page + 5);
            
            if (start_page > 1) {
                html += '<li><a href="#" onclick="loadGeneralLedger(1); return false;">1</a></li>';
                if (start_page > 2) html += '<li class="disabled"><span>...</span></li>';
            }
            
            for (var i = start_page; i <= end_page; i++) {
                if (i === data.current_page) {
                    html += '<li class="active"><span>' + i + '</span></li>';
                } else {
                    html += '<li><a href="#" onclick="loadGeneralLedger(' + i + '); return false;">' + i + '</a></li>';
                }
            }
            
            if (end_page < data.total_pages) {
                if (end_page < data.total_pages - 1) html += '<li class="disabled"><span>...</span></li>';
                html += '<li><a href="#" onclick="loadGeneralLedger(' + data.total_pages + '); return false;">' + data.total_pages + '</a></li>';
            }
            
            if (data.current_page < data.total_pages) {
                html += '<li><a href="#" onclick="loadGeneralLedger(' + (data.current_page + 1) + '); return false;">Next &raquo;</a></li>';
            } else {
                html += '<li class="disabled"><span>Next &raquo;</span></li>';
            }
            
            html += '</ul>';
            html += '</div>';
            html += '</div>';
            
            html += '<div class="row no-print">';
            html += '<div class="col-sm-12 text-center">';
            var start = (data.current_page - 1) * data.per_page + 1;
            var end = Math.min(data.current_page * data.per_page, data.total_entries);
            html += '<small>Showing ' + start + ' to ' + end + ' of ' + data.total_entries + ' entries</small>';
            html += '</div>';
            html += '</div>';
        }
        
        // Summary Section
        html += '<div class="summary-section" style="margin-top: 30px; page-break-before: avoid;">';
        html += '<h4 class="text-left"><strong>Summary</strong></h4>';
        html += '<div class="table-responsive">';
        html += '<table class="table table-bordered" style="width: 50%;">';
        html += '<tr class="bg-gray">';
        html += '<td><strong>Total Debits</strong></td>';
        html += '<td class="text-right"><strong>' + formatNumber(data.total_debits) + '</strong></td>';
        html += '</tr>';
        html += '<tr class="bg-gray">';
        html += '<td><strong>Total Credits</strong></td>';
        html += '<td class="text-right"><strong>' + formatNumber(data.total_credits) + '</strong></td>';
        html += '</tr>';
        
        if (!data.is_balanced) {
            html += '<tr class="bg-yellow">';
            html += '<td><strong>Difference (Out of Balance)</strong></td>';
            html += '<td class="text-right"><strong class="text-danger">' + formatNumber(data.difference) + '</strong></td>';
            html += '</tr>';
        } else {
            html += '<tr class="bg-green">';
            html += '<td><strong>Status</strong></td>';
            html += '<td class="text-right"><strong class="text-green">Balanced</strong></td>';
            html += '</tr>';
        }
        
        html += '</table>';
        html += '</div>';
        html += '</div>';
    }
    
    html += '</div>';
    
    // Print button
    html += '<div class="box-footer no-print">';
    html += '<button type="button" class="tw-dw-btn tw-dw-btn-primary tw-text-white pull-right" onclick="window.print()">';
    html += '<i class="fa fa-print"></i> @lang("messages.print")</button>';
    html += '</div>';
    
    html += '</div>';
    
    $('#ledger_container').html(html);
}
    
    function formatNumber(amount) {
        if (amount === undefined || amount === null) amount = 0;
        return 'KES ' + parseFloat(amount).toLocaleString('en-KE', {
            minimumFractionDigits: 2,
            maximumFractionDigits: 2
        });
    }
    
    function formatDisplayDate(dateString) {
        if (!dateString) return '-';
        var parts = dateString.split('-');
        if (parts.length === 3) {
            return parts[2] + '/' + parts[1] + '/' + parts[0];
        }
        return dateString;
    }
    
    function escapeHtml(text) {
        if (!text) return '';
        return text
            .replace(/&/g, '&amp;')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;')
            .replace(/"/g, '&quot;')
            .replace(/'/g, '&#39;');
    }
</script>

<style>
    @media print {
        .no-print {
            display: none !important;
        }
        .box {
            border: none !important;
        }
        .box-header {
            text-align: center !important;
        }
        .ledger-account {
            page-break-inside: avoid;
            margin-bottom: 20px;
        }
        .text-right {
            text-align: right !important;
        }
        .table-responsive {
            overflow: visible !important;
        }
    }
    
    .text-right {
        text-align: right;
    }
    .text-danger {
        color: #a94442;
    }
    .text-green {
        color: #3c763d;
    }
    .bg-gray {
        background-color: #f5f5f5;
    }
    .bg-yellow {
        background-color: #fcf8e3;
    }
    .bg-green {
        background-color: #dff0d8;
    }
    .ledger-account {
        margin-bottom: 30px;
    }
    .account-header {
        border-radius: 4px;
    }
    .ledger-table {
        font-size: 13px;
    }
    .ledger-table th,
    .ledger-table td {
        vertical-align: middle;
    }
    .summary-section {
        margin-top: 30px;
    }
    .pagination {
        margin: 0;
    }
    .pagination li {
        display: inline-block;
        margin: 0 2px;
    }
    .pagination li a, .pagination li span {
        padding: 6px 12px;
        border: 1px solid #ddd;
        border-radius: 4px;
    }
    .pagination li.active span {
        background-color: #3c8dbc;
        border-color: #3c8dbc;
        color: white;
    }
    .pagination li.disabled span {
        color: #ccc;
        cursor: not-allowed;
    }
    #per_page {
        width: auto;
        display: inline-block;
        margin-left: 5px;
    }
    .pull-left {
        float: left !important;
    }
    .table-responsive {
        overflow-x: auto;
    }
</style>
@endsection