@extends('layouts.master')

@push('css')
    <link rel="stylesheet" href="{{ asset('css/journal-voucher-create.css') }}">
@endpush

@section('content')
    <div class="jv-create-page">
        <!-- Breadcrumb & Header -->
        <div class="az-content-breadcrumb">
            <span>Journal Voucher</span>
            <span>Add Journal Voucher</span>
        </div>

        <div class="jv-page-header">
            <div class="jv-header-title">
                <div class="jv-header-icon">
                    <i class="fa-solid fa-file-invoice-dollar"></i>
                </div>
                <div class="jv-header-text">
                    <h2>Add New Journal Voucher</h2>
                    <div class="jv-subtitle">
                        <span>Record double-entry journal transactions</span>
                        <span class="jv-urdu">نیا روزنامچہ واؤچر درج کریں</span>
                    </div>
                </div>
            </div>
            <a href="{{ route('voucher.list') }}" class="jv-btn-back">
                <i class="fa-solid fa-arrow-left"></i> Back to Journal Vouchers
            </a>
        </div>

        <!-- Main Form Card -->
        <div class="jv-main-card">
            <form id="myForm" method="post" action="{{ route('voucher.store') }}">
                @csrf

                <!-- Error Display -->
                @if (isset($errors) && count($errors) > 0)
                    <div class="p-3">
                        @foreach ($errors->all() as $error)
                            <div class="alert alert-danger fade show mb-2" role="alert">
                                <i class="fa-solid fa-circle-exclamation mr-2"></i> {{ $error }}
                                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                        @endforeach
                    </div>
                @endif

                <!-- SECTION 1: Voucher Header & Payment Source -->
                <div class="jv-section-header">
                    <h6 class="jv-section-title">
                        <i class="fa-solid fa-sliders"></i> Voucher Configuration & Source Account
                        <span class="jv-urdu" style="margin-left: auto;">واؤچر اور کھاتے کی بنیادی تفصیلات</span>
                    </h6>
                </div>
                <div class="jv-section-body">
                    <div class="row align-items-start">
                        <!-- Voucher Date -->
                        <div class="col-lg-4 col-md-6 col-12">
                            <div class="jv-field-group">
                                <label class="jv-label" for="voucher_date">
                                    <span>Voucher Date <span class="text-danger">*</span></span>
                                    <span class="label-urdu">تاریخ واؤچر</span>
                                </label>
                                <div class="jv-input-icon-wrap">
                                    <i class="fa-regular fa-calendar-days jv-input-icon"></i>
                                    <input type="text" id="voucher_date" name="voucher_date" class="jv-input"
                                        placeholder="YYYY-MM-DD" readonly required />
                                </div>
                            </div>
                        </div>

                        <!-- Payment Method (Cash / Bank) -->
                        <div class="col-lg-4 col-md-6 col-12">
                            <div class="jv-field-group">
                                <label class="jv-label">
                                    <span>Payment Method <span class="text-danger">*</span></span>
                                    <span class="label-urdu">طریقہ ادائیگی</span>
                                </label>
                                <div class="jv-method-switch">
                                    <label class="jv-method-option" for="cash">
                                        <input type="radio" id="cash" name="payment_method" value="cash" required>
                                        <span class="jv-method-label">
                                            <i class="fa-solid fa-money-bill-wave"></i> Cash (کیش)
                                        </span>
                                    </label>
                                    <label class="jv-method-option" for="bank">
                                        <input type="radio" id="bank" name="payment_method" value="bank" required>
                                        <span class="jv-method-label">
                                            <i class="fa-solid fa-building-columns"></i> Bank (بینک)
                                        </span>
                                    </label>
                                </div>
                            </div>
                        </div>

                        <!-- Source Account Selection -->
                        <div class="col-lg-4 col-md-12 col-12">
                            <div class="jv-field-group">
                                <label class="jv-label" for="account_select">
                                    <span>Source Cash / Bank Account <span class="text-danger">*</span></span>
                                    <span class="label-urdu">کھاتہ منتخب کریں</span>
                                </label>
                                <select id="account_select" name="account" class="form-control select2" required>
                                    <option value="">- Select Account -</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- SECTION 2: Business Partner & Transaction Account -->
                <div class="jv-section-header">
                    <h6 class="jv-section-title">
                        <i class="fa-solid fa-handshake"></i> Business Partner & Ledger Account
                        <span class="jv-urdu" style="margin-left: auto;">بزنس پارٹنر اور جنرل لیجر کھاتہ</span>
                    </h6>
                </div>
                <div class="jv-section-body">
                    <div class="row align-items-start">
                        <!-- Business Partner Type -->
                        <div class="col-lg-3 col-md-6 col-12">
                            <div class="jv-field-group">
                                <label class="jv-label" for="business_partner">
                                    <span>Partner Type <span class="text-danger">*</span></span>
                                    <span class="label-urdu">پارٹنر کی قسم</span>
                                </label>
                                <select onchange="getPartnerData();" id="business_partner" name="business_partner"
                                    class="form-control select2" required>
                                    <option value="">- Select Type -</option>
                                    <option value="employee">Employee (ملازم)</option>
                                    <option value="customer">Customer (گاہک)</option>
                                    <option value="suppliers">Supplier (سپلائر)</option>
                                    <option value="other">Other (دیگر / وینڈر)</option>
                                </select>
                            </div>
                        </div>

                        <!-- Partner Name -->
                        <div class="col-lg-3 col-md-6 col-12">
                            <div class="jv-field-group">
                                <div class="d-flex align-items-center justify-content-between mb-2" style="min-height: 22px;">
                                    <label class="jv-label mb-0" for="partner_name">
                                        <span>Partner Name <span class="text-danger">*</span></span>
                                    </label>
                                    <span id="addVendorButtonContainer" style="display: none;">
                                        <button type="button" class="btn btn-xs btn-outline-primary py-0 px-2"
                                            data-toggle="modal" data-target="#addVendorModal">
                                            <i class="fa-solid fa-plus"></i> New Vendor
                                        </button>
                                    </span>
                                </div>
                                <select id="partner_name" name="partner_name" class="form-control select2" required>
                                    <option value="">- Select Partner -</option>
                                </select>
                            </div>
                        </div>

                        <!-- Payment Mode -->
                        <div class="col-lg-3 col-md-6 col-12">
                            <div class="jv-field-group">
                                <label class="jv-label" for="payment_mode">
                                    <span>Payment Mode</span>
                                    <span class="label-urdu">طریقہ</span>
                                </label>
                                <select name="payment_mode" class="form-control jv-select" id="payment_mode" style="padding-left: 14px;">
                                    <option value="Cash">Cash</option>
                                    <option value="Cheque">Cheque</option>
                                    <option value="Pay Order">Pay Order</option>
                                    <option value="Credit Card">Credit Card</option>
                                    <option value="Other">Other</option>
                                </select>
                            </div>
                        </div>

                        <!-- Transaction Account -->
                        <div class="col-lg-3 col-md-6 col-12">
                            <div class="jv-field-group">
                                <label class="jv-label" for="transaction_account">
                                    <span>Transaction Account <span class="text-danger">*</span></span>
                                    <span class="label-urdu">کھاتہ</span>
                                </label>
                                <select name="transaction_account" class="form-control select2" id="transaction_account" required>
                                    <option value="">- Select Account -</option>
                                    @foreach ($accounts as $acc)
                                        <option value="{{ $acc->id_transaction_account }}">
                                            {{ $acc->id_transaction_account }} | {{ $acc->transaction_account_name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <!-- Hidden Transaction Type (preserved for form compatibility) -->
                        <select name="transaction_type" class="d-none" id="transaction_type">
                            <option value="Credit" selected>Credit</option>
                            <option value="Debit">Debit</option>
                        </select>
                    </div>

                    <!-- Entry Pad / Amount & Add Row -->
                    <div class="jv-entry-bar">
                        <div class="row align-items-end">
                            <div class="col-lg-4 col-md-5 col-12 mb-3 mb-md-0">
                                <div class="jv-field-group mb-0">
                                    <label class="jv-label" for="amount">
                                        <span>Amount (PKR) <span class="text-danger">*</span></span>
                                        <span class="label-urdu">رقم درج کریں</span>
                                    </label>
                                    <div class="jv-input-icon-wrap">
                                        <i class="fa-solid fa-coins jv-input-icon text-warning"></i>
                                        <input type="number" step="any" id="amount" name="amount" class="jv-input font-weight-bold"
                                            placeholder="0.00" style="font-size: 16px; color: #4f46e5;" />
                                    </div>
                                </div>
                            </div>

                            <div class="col-lg-5 col-md-4 col-12 mb-3 mb-md-0">
                                <div class="jv-field-group mb-0">
                                    <label class="jv-label" for="instrument">
                                        <span>Instrument / Ref No. (Optional)</span>
                                        <span class="label-urdu">چیک نمبر / ریفرنس</span>
                                    </label>
                                    <div class="jv-input-icon-wrap">
                                        <i class="fa-solid fa-receipt jv-input-icon"></i>
                                        <input type="text" id="instrument" name="instrument" class="jv-input"
                                            placeholder="e.g. Chq # 482910 or Ref No." />
                                    </div>
                                </div>
                            </div>

                            <div class="col-lg-3 col-md-3 col-12">
                                <button type="button" id="addButton" class="jv-btn-add-entry w-100">
                                    <i class="fa-solid fa-plus-circle"></i> Add Entry Row
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- SECTION 3: Journal Voucher Entries Table -->
                <div class="jv-section-header">
                    <h6 class="jv-section-title">
                        <i class="fa-solid fa-table-list"></i> Voucher Entries (Credit & Debit Ledger)
                        <span class="jv-urdu" style="margin-left: auto;">اندراج شدہ رقوم کی تفصیلات</span>
                    </h6>
                </div>
                <div class="jv-section-body">
                    <div class="jv-table-card">
                        <div class="table-responsive">
                            <table id="example2" class="table jv-table align-middle">
                                <thead>
                                    <tr>
                                        <th class="text-center" style="width: 50px;">#</th>
                                        <th>Account No</th>
                                        <th>Account Title</th>
                                        <th>Payment Mode</th>
                                        <th>Partner Name</th>
                                        <th>Instrument</th>
                                        <th class="text-right text-end">Net Amount</th>
                                        <th class="text-center">Date</th>
                                        <th class="text-right text-end">Credit (PKR)</th>
                                        <th class="text-right text-end">Debit (PKR)</th>
                                        <th class="text-center" style="width: 70px;">Action</th>
                                    </tr>
                                </thead>
                                <tbody id="voucherTableBody">
                                    <!-- Dynamic rows are inserted here -->
                                </tbody>
                                <tfoot>
                                    <tr>
                                        <td colspan="8" class="text-right text-end text-uppercase">
                                            <strong>Total Ledger Amounts:</strong>
                                        </td>
                                        <td class="text-right text-end">
                                            <span class="jv-pill-credit">
                                                Rs. <span id="totalCredit">0.00</span>
                                            </span>
                                        </td>
                                        <td class="text-right text-end">
                                            <span class="jv-pill-debit">
                                                Rs. <span id="totalDebit">0.00</span>
                                            </span>
                                        </td>
                                        <td></td>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>

                        <!-- Real-time Balance Status Bar -->
                        <div class="jv-balance-bar">
                            <div class="d-flex align-items-center gap-2">
                                <span class="text-muted">Ledger Balance Status:</span>
                                <span id="balanceStatusBadge" class="jv-status-badge balanced">
                                    <i class="fa-solid fa-scale-balanced"></i> Ready
                                </span>
                            </div>
                            <small class="text-muted">Debits and Credits must balance before posting.</small>
                        </div>
                    </div>
                </div>

                <!-- Action Footer -->
                <div class="jv-form-footer">
                    <div class="text-muted small">
                        <i class="fa-solid fa-circle-info mr-1"></i> Ensure at least one entry is added before saving the voucher.
                    </div>
                    <div class="jv-footer-actions">
                        <a href="{{ route('voucher.list') }}" class="jv-btn-cancel">
                            <i class="fa-solid fa-xmark"></i> Cancel
                        </a>
                        <button type="submit" class="jv-btn-save">
                            <i class="fa-solid fa-floppy-disk"></i> Save Journal Voucher
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- Modal: Add Vendor -->
    <div class="modal fade" id="addVendorModal" tabindex="-1" role="dialog" aria-labelledby="addVendorModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addVendorModalLabel">
                        <i class="fa-solid fa-user-plus text-primary mr-2"></i> Add New Vendor
                    </h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="addVendorForm">
                        <meta name="csrf-token" content="{{ csrf_token() }}">
                        <div class="jv-field-group mb-0">
                            <label for="vendorName" class="jv-label">
                                <span>Vendor Name <span class="text-danger">*</span></span>
                            </label>
                            <input type="text" class="jv-input" id="vendorName" name="vendor_name"
                                placeholder="Enter Vendor Name" required>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Cancel</button>
                    <button type="button" class="jv-btn-save" onclick="saveVendor()">Save Vendor</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Error Notification Popup -->
    <div id="errorNotification" class="alert alert-danger position-fixed top-0 end-0 m-3" style="display: none; z-index: 9999;">
        <strong>Error!</strong> <span id="errorMessage">Empty Field(s) Found.</span>
    </div>
@endsection

@push('scripts')
    <script>
        $(document).ready(function() {
            // Setup CSRF header
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            // Initialize Date
            var today = new Date();
            var formattedDate = today.getFullYear() + '-' + ('0' + (today.getMonth() + 1)).slice(-2) + '-' + ('0' + today.getDate()).slice(-2);
            if (!$("#voucher_date").val()) {
                $("#voucher_date").val(formattedDate);
            }
            $("#voucher_date").datepicker({
                dateFormat: "yy-mm-dd"
            });

            // Select2 Initializations
            $('#account_select').select2({
                placeholder: "- Select Account -",
                width: '100%'
            });

            $('#business_partner').select2({
                placeholder: "- Select Type -",
                width: '100%'
            });

            $('#partner_name').select2({
                placeholder: "- Select Partner -",
                width: '100%'
            });

            $('#transaction_account').select2({
                placeholder: "- Select Account -",
                width: '100%'
            });

            // Payment Method Change Event
            $('input[name="payment_method"]').on('change', function() {
                var selectedMethod = $(this).val();
                updateAccountDropdown(selectedMethod);

                if (selectedMethod === 'cash') {
                    $('#payment_mode').val('Cash').trigger('change');
                } else if (selectedMethod === 'bank') {
                    $('#payment_mode').val('Cheque').trigger('change');
                }
            });

            // Default Select Cash
            $('#cash').prop('checked', true).trigger('change');

            // Form Submit on Ctrl+S
            document.addEventListener('keydown', function(event) {
                if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 's') {
                    event.preventDefault();
                    document.getElementById('myForm').submit();
                }
            });

            // Prevent enter submission except inside textareas
            $('#myForm').on('keydown', function(e) {
                if (e.key === 'Enter' && e.target.tagName !== 'TEXTAREA') {
                    e.preventDefault();
                }
            });
        });

        // Function to update Account Dropdown via AJAX
        function updateAccountDropdown(paymentMethod) {
            $.ajax({
                url: '{{ route('get-transaction-accounts') }}',
                type: 'GET',
                data: { type: paymentMethod },
                dataType: 'json',
                success: function(data) {
                    var $accountSelect = $('#account_select');
                    $accountSelect.empty();
                    $accountSelect.append('<option value="">- Select Account -</option>');

                    $.each(data, function(key, value) {
                        $accountSelect.append('<option value="' + key + '">' + key + ' | ' + value + '</option>');
                    });

                    $accountSelect.trigger('change');
                },
                error: function(xhr, status, error) {
                    console.error("An error occurred: " + xhr.responseText);
                }
            });
        }

        // Function to fetch Partner Data
        function getPartnerData() {
            var selectedPartnerType = $('#business_partner').val();

            if (selectedPartnerType === 'employee' || selectedPartnerType === 'customer' || selectedPartnerType === 'suppliers') {
                $.ajax({
                    url: '{{ route('get-partner-data') }}',
                    type: 'GET',
                    data: { type: selectedPartnerType },
                    dataType: 'json',
                    success: function(data) {
                        $('#partner_name').empty().append('<option value="">- Select Partner -</option>');

                        if (data && Object.keys(data).length > 0) {
                            $.each(data, function(key, value) {
                                $('#partner_name').append('<option value="' + key + '">' + value + '</option>');
                            });
                        }
                        $('#addVendorButtonContainer').hide();
                        $('#partner_name').trigger('change');
                    },
                    error: function(xhr, status, error) {
                        console.error("An error occurred: " + xhr.responseText);
                    }
                });
            } else if (selectedPartnerType === 'other') {
                $('#addVendorButtonContainer').show();
                $('#partner_name').empty().append('<option value="">- Select Partner -</option>');

                $.ajax({
                    url: '{{ route('get-partner-data') }}',
                    type: 'GET',
                    data: { type: 'other' },
                    dataType: 'json',
                    success: function(data) {
                        $.each(data, function(key, value) {
                            $('#partner_name').append('<option value="' + key + '">' + value + '</option>');
                        });
                        $('#partner_name').trigger('change');
                    },
                    error: function(xhr, status, error) {
                        console.error("An error occurred: " + xhr.responseText);
                    }
                });
            } else {
                $('#addVendorButtonContainer').hide();
                $('#partner_name').empty().append('<option value="">- Select Partner -</option>').trigger('change');
            }
        }

        // Save Vendor AJAX
        function saveVendor() {
            var vendorName = $('#vendorName').val();

            if (vendorName.trim() === "") {
                alert("Vendor Name cannot be empty.");
                return;
            }

            $.ajax({
                url: '{{ route('save-vendor') }}',
                type: 'POST',
                data: {
                    name: vendorName,
                    _token: $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    if (response.success) {
                        $('#addVendorModal').modal('hide');
                        $('#partner_name').append('<option value="' + response.vendor_id + '" selected>' + vendorName + '</option>').trigger('change');
                        $('#vendorName').val('');
                    } else {
                        alert("Failed to add the vendor. Please try again.");
                    }
                },
                error: function(xhr, status, error) {
                    console.error(xhr.responseText);
                    alert("An error occurred while adding the vendor.");
                }
            });
        }

        // Dynamic Table Row Logic
        $(document).ready(function() {
            let counter = 1;
            let totalCredit = 0;
            let totalDebit = 0;
            let hasAddedRows = false;
            let debitRow;

            $('#addButton').click(function() {
                let voucherDate = $('#voucher_date').val().trim();
                let PartnerName = $('select[name="partner_name"] option:selected').text().trim();
                let accountid = $('select[name="account"] option:selected').val();
                let accountname = $('select[name="account"] option:selected').text().split('|')[1]?.trim() || $('select[name="account"] option:selected').text();
                let transactionAccountId = $('select[name="transaction_account"] option:selected').val();
                let transactionAccountName = $('select[name="transaction_account"] option:selected').text().split('|')[1]?.trim() || $('select[name="transaction_account"] option:selected').text();
                let paymentMode = $('select[name="payment_mode"] option:selected').text().trim();
                let instrument = $('#instrument').val().trim();
                let amount = parseFloat($('#amount').val().trim());
                let transactionType = $('select[name="transaction_type"] option:selected').val()?.trim() || 'Credit';

                // Validation
                let errorMessages = [];
                if (!voucherDate) errorMessages.push('Voucher Date');
                if (!accountid) errorMessages.push('Source Account');
                if (!transactionAccountId) errorMessages.push('Transaction Account');
                if (!PartnerName || PartnerName === '- Select Partner -') errorMessages.push('Partner Name');
                if (!amount || isNaN(amount) || amount <= 0) errorMessages.push('Valid Amount');

                if (errorMessages.length > 0) {
                    showErrorNotification(errorMessages);
                    return;
                }

                if (!hasAddedRows) {
                    addRow(transactionAccountId, transactionAccountName, PartnerName, paymentMode, instrument, amount, voucherDate, 'Credit');
                    debitRow = addRow(accountid, accountname, PartnerName, paymentMode, instrument, amount, voucherDate, 'Debit');
                    hasAddedRows = true;
                } else {
                    let newCreditRow = addRow(transactionAccountId, transactionAccountName, PartnerName, paymentMode, instrument, amount, voucherDate, 'Credit');
                    $(newCreditRow).insertBefore(debitRow);
                }

                totalDebit = totalCredit;
                updateDebitRow();

                // Clear amount & instrument for next entry
                $('#amount').val('');
                $('#instrument').val('');
            });

            function addRow(accountNo, accountTitle, PartnerName, paymentMode, instrument, amount, created, transactionType) {
                let debitAmount = transactionType === 'Debit' ? amount.toFixed(2) : '';
                let creditAmount = transactionType === 'Credit' ? amount.toFixed(2) : '';

                if (transactionType === 'Credit') {
                    totalCredit += parseFloat(creditAmount);
                }

                let rowHtml = `
                <tr>
                    <td class="text-center font-weight-bold text-muted">${counter++}</td>
                    <td><input type="hidden" name="accountNo[]" value="${accountNo}"><span class="badge badge-light border text-dark">${accountNo}</span></td>
                    <td><input type="hidden" name="accountName[]" value="${accountTitle}"><span class="font-weight-bold text-dark">${accountTitle}</span></td>
                    <td><input type="hidden" name="paymentMode[]" value="${paymentMode}"><span class="badge badge-secondary">${paymentMode}</span></td>
                    <td><input type="hidden" name="PartnerName[]" value="${PartnerName}">${PartnerName}</td>
                    <td><input type="hidden" name="instrumentAmount[]" value="${instrument}">${instrument || '—'}</td>
                    <td class="text-right text-end font-weight-bold"><input type="hidden" name="netAmount[]" value="${amount}">${amount.toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2})}</td>
                    <td class="text-center small text-muted"><input type="hidden" name="voucherDate[]" value="${created}">${created}</td>
                    <td class="text-right text-end font-weight-bold text-primary"><input type="hidden" name="creditAmount[]" value="${creditAmount}">${creditAmount ? parseFloat(creditAmount).toLocaleString('en-US', {minimumFractionDigits: 2}) : '—'}</td>
                    <td class="text-right text-end font-weight-bold text-success"><input type="hidden" name="debitAmount[]" value="${debitAmount}">${debitAmount ? parseFloat(debitAmount).toLocaleString('en-US', {minimumFractionDigits: 2}) : '—'}</td>
                    <td class="text-center">
                        <button type="button" class="btn btn-outline-danger btn-sm delete-row py-1 px-2" title="Remove Entry">
                            <i class="fas fa-trash-alt"></i>
                        </button>
                    </td>
                </tr>
                `;

                let $row = $(rowHtml);

                if (!hasAddedRows) {
                    $('#voucherTableBody').append($row);
                } else {
                    $('#voucherTableBody').prepend($row);
                }

                return $row;
            }

            function updateDebitRow() {
                $(debitRow).find('input[name="debitAmount[]"]').val(totalDebit.toFixed(2));
                let debitAmountTd = $(debitRow).find('td').eq(9);
                debitAmountTd.html(
                    `<input type="hidden" name="debitAmount[]" value="${totalDebit.toFixed(2)}">${totalDebit.toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2})}`
                );
                updateTotals();
            }

            function updateTotals() {
                $('#totalDebit').text(totalDebit.toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2}));
                $('#totalCredit').text(totalCredit.toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2}));

                let badge = $('#balanceStatusBadge');
                if (Math.abs(totalDebit - totalCredit) < 0.01 && totalDebit > 0) {
                    badge.removeClass('unbalanced').addClass('balanced').html('<i class="fa-solid fa-check-circle"></i> Balanced');
                } else if (totalDebit === 0 && totalCredit === 0) {
                    badge.removeClass('unbalanced').addClass('balanced').html('<i class="fa-solid fa-scale-balanced"></i> Ready');
                } else {
                    badge.removeClass('balanced').addClass('unbalanced').html('<i class="fa-solid fa-triangle-exclamation"></i> Unbalanced');
                }
            }

            // Delete row handler
            $(document).on('click', '.delete-row', function() {
                let row = $(this).closest('tr');
                let debitAmount = parseFloat(row.find('input[name="debitAmount[]"]').val());
                let creditAmount = parseFloat(row.find('input[name="creditAmount[]"]').val());

                totalDebit -= debitAmount || 0;
                totalCredit -= creditAmount || 0;

                row.remove();

                if ($('#voucherTableBody tr').length === 0) {
                    hasAddedRows = false;
                    totalDebit = 0;
                    totalCredit = 0;
                    updateTotals();
                } else if (debitRow.is(row)) {
                    debitRow = $('#voucherTableBody tr:last-child');
                    totalDebit = parseFloat(debitRow.find('input[name="debitAmount[]"]').val()) || 0;
                    updateDebitRow();
                } else {
                    updateTotals();
                }
            });

            // Error notification
            function showErrorNotification(errors) {
                let errorMessage = 'Please fill required field(s): ' + errors.join(', ');
                $('#errorMessage').text(errorMessage);
                $('#errorNotification').fadeIn(200).delay(3500).fadeOut(200);
            }
        });
    </script>
@endpush