@extends('printlayout')
@section('content')
    <div style="text-align: center;">
        <h2 style="margin-top: 0">Journal Voucher</h2>
    </div>

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

    <!-- Table Section -->
    <div class="table-responsive">
        <table id="voucherTable" class="table table-bordered table-striped">
            <thead>
                <tr>
                    <th>{{ __('sitelabel.SerialNumber') }}</th>
                    <th>{{ __('sitelabel.coAccountNames') }}</th>
                    <th>{{ __('sitelabel.Notes') }}</th>
                    <th class="text-right">{{ __('sitelabel.Debit') }}</th>
                    <th class="text-right">{{ __('sitelabel.Credit') }}</th>
                </tr>
            </thead>
            <tbody>
                @foreach ($journalVoucher as $index => $entry)
                    <tr>
                        <td>{{ $index + 1 }}</td>
                        <td>{{ $coAccountName[$entry->AccountId] ?? 'Unknown' }}</td>
                        <td>{{ $entry->Notes }}</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="3" 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;

            // Loop through all rows in the table body
            document.querySelectorAll('#voucherTable tbody tr').forEach(row => {
                // Extract Debit and Credit values, parse them as numbers, and add them to totals
                const debit = parseFloat(row.querySelector('td:nth-child(4)').innerText.replace(/,/g, '')) || 0;
                const credit = parseFloat(row.querySelector('td:nth-child(5)').innerText.replace(/,/g, '')) || 0;

                totalDebit += debit;
                totalCredit += credit;
            });

            // Update the footer with calculated totals
            document.getElementById('totalDebit').innerText = totalDebit.toLocaleString(undefined, {
                minimumFractionDigits: 2,
                maximumFractionDigits: 2
            });
            document.getElementById('totalCredit').innerText = totalCredit.toLocaleString(undefined, {
                minimumFractionDigits: 2,
                maximumFractionDigits: 2
            });
        }

        // Ensure totals are calculated on page load
        document.addEventListener('DOMContentLoaded', calculateTotals);
    </script>
@endsection