@extends('printlayout')
@section('content')
    <div style="text-align: center;">
        <h2 style="margin-top: 0">{{ __('sitelabel.LedgerEntries') }}</h2>
    </div>

    <div class="transaction-info">
        <ul style="display: flex; list-style:none; justify-content:space-between; padding: 0px;">
            <li><strong>{{ __('sitelabel.LedgerNo') }}: </strong>{{ $ledgerentries->first()->TransactionId }}
            </li>
            <li><strong>{{ __('sitelabel.BookingDate') }}:
                </strong>{{ \Carbon\Carbon::parse($ledgerentries->first()->BookingDate)->format('d-F-Y') }}</li>
            <li><strong>{{ __('sitelabel.DocNo') }}: </strong>{{ $ledgerentries->first()->DocNo }}</li>
            <li><strong>{{ __('sitelabel.Notes') }}: </strong>{{ $ledgerentries->first()->Notes ?? 'N/A' }}</li>
        </ul>
    </div>

    <!-- Table Section -->
    <div class="table-responsive">
        <table id="ledgerTable" class="table table-bordered table-striped">
            <thead>
                <tr>
                    <th>{{ __('sitelabel.SerialNumber') }}</th>
                    <th>{{ __('sitelabel.coAccountNames') }}</th>
                    <th class="text-right">{{ __('sitelabel.Debit') }}</th>
                    <th class="text-right">{{ __('sitelabel.Credit') }}</th>
                </tr>
            </thead>
            <tbody>
                @foreach ($ledgerentries as $index => $entry)
                    <tr>
                        <td>{{ $index + 1 }}</td>
                        <td>{{ $coAccountName[$entry->AccountId] ?? 'Unknown' }}</td>
                        <td class="text-right">{{ number_format($entry->DebitAmount, 2) }}</td>
                        <td class="text-right">{{ number_format($entry->CreditAmount, 2) }}</td>
                    </tr>
                @endforeach
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="2" class="text-right">
                        <strong>{{ __('sitelabel.Total') }}:</strong>
                    </td>
                    <td id="totalDebit" class="text-right">0.00</td>
                    <td id="totalCredit" class="text-right">0.00</td>
                </tr>
            </tfoot>
        </table>
    </div>

    @include('sign-subview.signandbuttons')
@endsection

@section('script')
    <script>
        function calculateTotals() {
            let totalDebit = 0.00;
            let totalCredit = 0.00;

            // Debug: Log number of rows found
            const rows = document.querySelectorAll('#ledgerTable tbody tr');

            rows.forEach(row => {
                // Get the debit and credit cells
                const debitCell = row.querySelector('td:nth-child(3)');
                const creditCell = row.querySelector('td:nth-child(4)');

                // Parse debit amount
                const debitValue = debitCell ? parseFloat(debitCell.innerText.replace(/[,]/g, '')) || 0 : 0;
                totalDebit += debitValue;

                // Parse credit amount
                const creditValue = creditCell ? parseFloat(creditCell.innerText.replace(/[,]/g, '')) || 0 : 0;
                totalCredit += creditValue;
            });

            // Update the total cells, formatting with two decimal places
            const totalDebitElement = document.getElementById('totalDebit');
            const totalCreditElement = document.getElementById('totalCredit');

            if (totalDebitElement) {
                totalDebitElement.innerText = totalDebit.toLocaleString(undefined, {
                    minimumFractionDigits: 2,
                    maximumFractionDigits: 2
                });
            }

            if (totalCreditElement) {
                totalCreditElement.innerText = totalCredit.toLocaleString(undefined, {
                    minimumFractionDigits: 2,
                    maximumFractionDigits: 2
                });
            }
        }

        // Ensure the script runs after the DOM is fully loaded
        document.addEventListener('DOMContentLoaded', calculateTotals);
    </script>
@endsection