@extends('layouts.master')
@section('content')
    <style>
        .disabled-row {
            background-color: #f0f0f0;
            /* Light grey background */
            color: #999;
            /* Grey text to indicate it's disabled */
            pointer-events: none;
            /* Disable any interaction */
        }

        .no-border {
            border: none;
            /* Remove border */
            outline: none;
            /* Remove outline when focused */
            background: transparent;
            /* Optional: make background transparent */
            width: 100%;
            /* Optional: full width */
            padding: 0;
            /* Optional: adjust padding if needed */
        }
    </style>
    <div class="az-content-breadcrumb">
        <span>Service Voucher</span>
        <span>Edit Service Voucher </span>
        {{-- <span>Forms</span> --}}
        {{-- <span>Form Layouts</span> --}}
    </div>
    <h2 class="az-content-title" style="display: inline">Edit New Service Voucher
        <span>
            <a href="{{ route('voucher.list') }}" class="btn border" style="float: right"><i
                    class="fa-solid fa-bars-staggered"></i>
                Back to Service Voucher
            </a>
        </span>
    </h2>

    <div class="row">
        <div class="col-md-12 col-lg-12 col-xl-12">
            <div class="card card-body pd-40">
                <h5 class="card-title mg-b-20">Create Service Voucher</h5>
                <hr>
                <form method="post" id="myForm"
                    action="{{ route('service_voucher.update', ['id' => Crypt::encrypt($vouchersNumber->id_vouchers_unique_number)]) }}">
                    @csrf
                    @method('PUT')
                    @if (count($errors) > 0)
                        <div class="p-1">
                            @foreach ($errors->all() as $error)
                                <div class="alert alert-warning alert-danger fade show" role="alert">{{ $error }}
                                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                </div>
                            @endforeach
                        </div>
                    @endif



                    <div class="row">
                        <!-- Left Column -->
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="voucher_date" class="form-label">Service Voucher Date <span
                                        style="color:red;">*</span></label>
                                <input type="text" id="voucher_date" name="voucher_date" class="form-control"
                                    placeholder="Enter Service Voucher Date" readonly />
                            </div>

                            <div class="mb-4 text-center">
                                <label class="form-label d-block mb-2">Payment Method <span
                                        style="color:red;">*</span></label>
                                <div class="d-flex justify-content-center">
                                    <div class="me-4 text-center">
                                        <input class="form-check-input" type="radio" id="cash" name="payment_method"
                                            value="cash" required>
                                        <label class="form-check-label" for="cash">Cash</label>
                                    </div>
                                    <div class="text-center">
                                        <input class="form-check-input" type="radio" id="bank" name="payment_method"
                                            value="bank" required>
                                        <label class="form-check-label" for="bank">Bank</label>
                                    </div>
                                </div>
                                <div class="mt-3">
                                    <select id="account_select" name="account" class="form-control select2">
                                        {{-- <option value="">Select Account</option> --}}
                                    </select>
                                </div>
                            </div>
                            {{-- <div class="mb-3">
                                <label for="description" class="form-label">Description </label>
                                <textarea id="description" name="description" class="form-control" placeholder="Enter Description"
                                    value="{{ old('description') }}"></textarea>
                            </div> --}}
                        </div>

                        <!-- Right Column -->
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="business_partner" class="form-label">Business Partner <span
                                        style="color:red;">*</span></label>
                                @if (!isset($vou_other_detail->business_partner_type))
                                    <select onchange="getPartnerData();" id="business_partner" name="business_partner"
                                        class="form-control select2" tabindex="-1" aria-hidden="true">
                                        <option value="">Select</option>
                                        <option value="employee">Employee</option>
                                        <option value="customer">Customer</option>
                                        <option value="suppliers">Supplier</option>
                                        <option value="other">Other</option>

                                        </option>
                                    </select>
                                @else
                                    <div style="position: relative;">

                                        <select onchange="getPartnerData();" id="business_partner" name="business_partner"
                                            class="form-control select2" tabindex="-1" aria-hidden="true">
                                            <option value="{{ $vou_other_detail->business_partner_type }}">
                                                {{ $vou_other_detail->business_partner_type }}
                                            </option>
                                        </select>
                                        <!-- Overlay to block clicks -->
                                        <div
                                            style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: transparent; cursor: not-allowed;">
                                        </div>
                                    </div>
                                @endif
                            </div>
                            <div class="mb-3">
                                <label for="payment_mode" class="form-label">Payment Mode</label>
                                <select name="payment_mode" class="form-control" id="payment_mode">
                                    <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 class="mb-3" hidden>
                                <label for="transaction_type" class="form-label">Transaction Type <span
                                        style="color:red;">*</span></label>
                                <select name="transaction_type" class="form-control" id="transaction_type">
                                    <option value="Credit">Credit</option>
                                    <option value="Debit">Debit</option>
                                </select>
                            </div>

                            {{-- <div class="mb-3" id="addVendorButtonContainer" style="display: none;">
                                <button type="button" class="btn btn-primary" data-bs-toggle="modal"
                                    data-bs-target="#addVendorModal">
                                    Add Vendor
                                </button>
                            </div> --}}
                        </div>

                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="partner_name" class="form-label">Partner Name <span
                                        style="color:red;">*</span></label>
                                {{-- {{ dd(isset($vou_other_detail->partner_name)) }} --}}
                                @if (!isset($vou_other_detail->business_partner_type))
                                    <select id="partner_name" name="partner_name" class="form-control select2"
                                        tabindex="-1" aria-hidden="true">

                                        </option>
                                    </select>
                                @else
                                    <div style="position: relative;">
                                        <select id="partner_name" name="partner_name" class="form-control select2"
                                            tabindex="-1" aria-hidden="true">
                                            <option value="{{ $vou_other_detail->partner_name }}">
                                                {{ $vou_other_detail->partner_name }}
                                            </option>
                                        </select>
                                        <!-- Overlay to block clicks -->
                                        <div
                                            style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: transparent; cursor: not-allowed;">
                                        </div>
                                    </div>
                                @endif
                            </div>

                            <div class="mb-3">
                                <label for="transaction_account" class="form-label">Transaction Account <span
                                        style="color:red;">*</span></label>
                                <select name="transaction_account" name="account" class="form-control select2"
                                    id="transaction_account" required>
                                    <option value="">- Select -</option>
                                    @foreach ($accounts as $acc)
                                        <option value="{{ $acc->id_transaction_account }}">
                                            {{ $acc->id_transaction_account }} |
                                            {{ $acc->transaction_account_name }}</option>
                                    @endforeach
                                </select>
                            </div>

                            {{-- <div class="mb-3">
                                <label for="tax_debit" class="form-label">Tax Debit <span
                                        style="color:red;">*</span></label>
                                <select name="tax_debit" class="form-control" id="tax_debit">
                                    <option value="No">No</option>
                                    <option value="Yes">Yes</option>
                                </select>
                            </div> --}}
                        </div>
                    </div>

                    <!-- Bottom Row -->
                    <div class="row  ">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="amount" class="form-label">Amount <span style="color:red;">*</span></label>
                                <input type="text" id="amount" name="amount" class="form-control"
                                    placeholder="Enter Amount" required />
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="instrument" class="form-label">Instrument </label>
                                <input type="text" id="instrument" name="instrument" class="form-control"
                                    placeholder="Enter Instrument" />
                            </div>
                        </div>
                        {{-- <div class="col-md-3">
                            <div class="mb-3">
                                <label for="remarks" class="form-label">Remarks </label>
                                <textarea id="remarks" name="remarks" class="form-control" placeholder="Enter Remarks"></textarea>
                            </div>
                        </div> --}}
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <button type="button" id="addButton" class="btn btn-success text-white mt-2 float-end">
                                Add <i class="fas fa-arrow-down"></i>
                            </button>
                        </div>
                    </div>


                    <br>
                    <div class="row mt-4">
                        <div class="col-12">
                            <table id="example2" class="table table-hover table-bordered align-middle">
                                <thead class="table-light">
                                    <tr>
                                        <th class="text-center">#</th>
                                        <th>Account No</th>
                                        <th>Account Title</th>
                                        <th>Payment Mode</th>
                                        <th>Partner Name</th>
                                        <th>Instrument</th>
                                        <th>Amount</th>
                                        <th>Created</th>
                                        <th>Credit</th>
                                        <th>Debit</th>
                                        <th class="text-center">Actions</th>
                                    </tr>
                                </thead>
                                <tbody id="voucherTableBody">
                                    <input type="hidden" name="deletedVouchers" id="deletedVouchers">
                                    @foreach ($vouchersNumber->vouchers as $index => $voucher)
                                        <tr data-voucher-id="{{ $voucher->id_vouchers }}"
                                            data-credit="{{ $voucher->credit }}" data-debit="{{ $voucher->debit }}"
                                            class="disabled-ro">
                                            <td>{{ $loop->iteration }}</td>

                                            <td>
                                                <span>{{ $voucher->account_no }}</span>
                                                <input type="hidden" name="accountNo[]"
                                                    value="{{ $voucher->account_no }}">
                                            </td>
                                            <td>
                                                <span>{{ $voucher->account_title }}</span>
                                                <input type="hidden" name="accountName[]"
                                                    value="{{ $voucher->account_title }}">
                                            </td>
                                            <td>
                                                <span>{{ $voucher->payment_mode }}</span>
                                                <input type="hidden" name="paymentMode[]"
                                                    value="{{ $voucher->payment_mode }}">
                                            </td>
                                            <td>
                                                <span>{{ $voucher->partner_name }}</span>
                                                <input type="hidden" name="PartnerName[]"
                                                    value="{{ $voucher->partner_name }}">
                                            </td>
                                            <td>
                                                <span>{{ $voucher->instrument }}</span>
                                                <input type="hidden" name="instrumentAmount[]"
                                                    value="{{ $voucher->instrument }}">
                                            </td>
                                            <td>
                                                <input type="text" class="no-border amount" name="netAmount[]"
                                                    value="{{ $voucher->amount }}">
                                            </td>
                                            {{-- <td>
                                                <span>{{ $voucher->remarks }}</span>
                                                <input type="hidden" name="noteRemarks[]"
                                                    value="{{ $voucher->remarks }}">
                                            </td> --}}
                                            {{-- <td>
                                                <span>{{ $voucher->tax_debit }}</span>
                                                <input type="hidden" name="taxDebitYesNo[]"
                                                    value="{{ $voucher->tax_debit }}">
                                            </td> --}}
                                            <td>
                                                <span>{{ $voucher->date }}</span>
                                                <input type="hidden" name="voucherDate[]" value="{{ $voucher->date }}">
                                            </td>

                                            <td>
                                                <input type="number" class="no-border creditAmount"
                                                    name="creditAmount[]" value="{{ $voucher->credit }}">
                                            </td>
                                            <td>
                                                <input type="number" class="no-border debitAmount" name="debitAmount[]"
                                                    value="{{ $voucher->debit }}">
                                            </td>
                                            <td>
                                                <button type="button" class="  btn btn-danger btn-sm delete-row">
                                                    <i class="fas fa-trash"></i>
                                                </button>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                                <tfoot>
                                    <tr>
                                        <td colspan="8" class="text-end"><strong>Total:</strong></td>
                                        <td><strong><span id="totalCredit">0.00</span></strong></td>
                                        <td><strong><span id="totalDebit">0.00</span></strong></td>
                                        <td></td>
                                    </tr>
                                </tfoot>
                            </table>

                        </div>
                    </div>

                    <button type="submit" class="btn btn-az-primary btn-block mt-2" style="float: right">
                        <i class="fa fa-save"></i> Update
                    </button>
                </form>
                <!-- col -->
            </div>
        </div>
    </div>

    <!-- Edit Vendor Modal -->
    <div class="modal fade" id="addVendorModal" tabindex="-1" aria-labelledby="addVendorModalLabel"
        aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addVendorModalLabel">Edit Vendor</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="addVendorForm">
                        <meta name="csrf-token" content="{{ csrf_token() }}">
                        <div class="mb-3">
                            <label for="vendorName" class="form-label">Vendor Name</label>
                            <input type="text" class="form-control" id="vendorName" name="vendor_name"
                                placeholder="Enter Vendor Name" required>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" onclick="saveVendor()">Save</button>
                </div>
            </div>
        </div>
    </div>

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

@endsection
@push('scripts')
    <script>
        document.addEventListener('keydown', function(event) {
            if ((event.ctrlKey || event.metaKey) && event.key === 's') {
                event.preventDefault();

                document.getElementById('myForm').submit();
            }

            if (event.key === 'Enter') {
                event.preventDefault();
            }
        });
        $(document).ready(function() {
            $('#transaction_account').select2();
        });

        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.select2();
                },
                error: function(xhr, status, error) {
                    console.error("An error occurred: " + xhr.responseText);
                    alert("An error occurred while fetching accounts. Please try again.");
                }
            });
        }

        $('input[name="payment_method"]').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');
            }
        });

        $(document).ready(function() {
            $('#account_select').select2();
        });
    </script>

    <script>
        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();
                        $('#partner_name').append('<option value="">Select</option>');

                        if (data && Object.keys(data).length > 0) {
                            $.each(data, function(key, value) {
                                $('#partner_name').append('<option value="' + value + '">' + value +
                                    '</option>');
                            });
                        } else {
                            alert("No partners found for the selected type.");
                        }

                        $('#addVendorButtonContainer').hide();
                    },
                    error: function(xhr, status, error) {
                        console.error("An error occurred: " + xhr.responseText);
                        alert("An error occurred while fetching partner data. Please try again.");
                    }
                });
            } else if (selectedPartnerType === 'other') {
                $('#addVendorButtonContainer').show();
                $('#partner_name').empty();
                $('#partner_name').append('<option value="">Select</option>');

                // Load existing vendors to the partner_name dropdown
                $.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>');
                        });
                    },
                    error: function(xhr, status, error) {
                        console.error("An error occurred: " + xhr.responseText);
                        alert("An error occurred while fetching vendor data. Please try again.");
                    }
                });
            } else {
                $('#addVendorButtonContainer').hide();
                $('#partner_name').empty();
                $('#partner_name').append('<option value="">Select</option>');
            }
        }

        function saveVendor() {
            var vendorName = $('#vendorName').val();

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

            $.ajax({
                url: '{{ route('save-vendor') }}', // Use Laravel's route helper to generate the correct URL
                type: 'POST',
                data: {
                    name: vendorName,
                    _token: $('meta[name="csrf-token"]').attr('content') // Add CSRF token
                },
                success: function(response) {
                    if (response.success) {
                        // alert("Vendor added successfully!");
                        $('#addVendorModal').modal('hide');

                        // Optionally, update the partner_name dropdown to include the new vendor
                        $('#partner_name').append('<option value="' + response.vendor_id + '">' + vendorName +
                            '</option>');
                    } 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.");
                }
            });
        }
    </script>

<script>
    function updateDebit2(creditInput) {
        // Find the debit input in the same row
        const row = creditInput.closest('tr');
        const debitInput = row.querySelector('#debitforeach');

        // Set the debit value based on credit (example logic: set debit to 0 if credit is filled)
        if (creditInput.value > 0) {
            debitInput.value = 0;
        } else {
            debitInput.value = creditInput.value;
        }
    }
    $('#business_partner').select2({
        theme: 'default'
    });
    $('#partner_name').select2({
        theme: 'default'
    });
    var today = new Date();
    var formattedDate = today.getFullYear() + '-' + ('0' + (today.getMonth() + 1)).slice(-2) + '-' + ('0' + today
        .getDate()).slice(-2);

    $("#voucher_date").val(formattedDate);

    // Initialize datepicker with custom format
    $("#voucher_date").datepicker({
        dateFormat: "yy-mm-dd" // Customize the date format here
    });
    let totalCredit2 = {{ $totalCredit }};
    let totalDebit2 = {{ $totalDebit }};
    $(document).ready(function() {
        let counter = 1; // Counter for serial numbers
        let totalCredit = 0;
        let totalDebit = 0;
        let hasAddedRows = false; // Flag to track if rows have been added
        let debitRow; // Variable to store the debit row

        function updateforeach() {
            let totalCredit2 = 0;
            let totalDebit2 = 0;

            $('#voucherTableBody tr').each(function() {
                let credit = parseFloat($(this).data('credit')) || 0;
                let debit = parseFloat($(this).data('debit')) || 0;

                totalCredit2 += credit;
                totalDebit2 += debit;
            });

            $('#totalCredit').text(totalCredit2.toFixed(2));
            $('#totalDebit').text(totalDebit2.toFixed(2));

            // Call updateTotals to perform any additional updates if needed
            updateTotals();
        }
        updateforeach();
        $('#addButton').click(function() {
            // Get form data
            let voucherDate = $('#voucher_date').val().trim();
            let PartnerName = $('select[name="partner_name"] option:selected').text();
            let accountid = $('select[name="account"] option:selected').val();
            let accountname = $('select[name="account"] option:selected').text().split('|')[1]
                ?.trim() || '';
            let transactionAccountId = $('select[name="transaction_account"] option:selected').val();
            let transactionAccountName = $('select[name="transaction_account"] option:selected').text()
                .split('|')[1]?.trim() || '';
            let paymentMode = $('select[name="payment_mode"] option:selected').text().trim();
            let instrument = $('#instrument').val().trim();
            let amount = parseFloat($('#amount').val().trim());
            // let remarks = $('#remarks').val().trim();
            let transactionType = $('select[name="transaction_type"] option:selected').val().trim();
            let taxDebit = $('select[name="tax_debit"] option:selected').text().trim();

            // Validation and error messages
            let errorMessages = [];
            if (!voucherDate) errorMessages.push('Service Voucher Date');
            if (!accountid) errorMessages.push('Account');
            if (!paymentMode) errorMessages.push('Payment Mode');
            if (!amount || isNaN(amount)) errorMessages.push('Amount');
            if (!transactionType) errorMessages.push('Transaction Type');

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

            if (!hasAddedRows) {
                // Add the first Credit row and Debit row
                addRow(transactionAccountId, transactionAccountName, PartnerName, paymentMode,
                    instrument, amount,
                    voucherDate, 'Credit');
                debitRow = addRow(accountid, accountname, PartnerName, paymentMode, instrument, amount,
                    voucherDate, 'Debit');
                hasAddedRows = true;
            } else {
                // Add new Credit row
                let newCreditRow = addRow(transactionAccountId, transactionAccountName, PartnerName,
                    paymentMode,
                    instrument, amount, voucherDate, 'Credit');
                $(newCreditRow).insertBefore(debitRow); // Insert new credit row above debit row
            }

            // Update the debit row amount
            totalDebit = totalCredit;
            updateDebitRow();

            $('#voucherForm').trigger('reset'); // Reset form after adding row
        });

        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); // Add to total credit
            }

            let rowHtml = `
    <tr>
        <td class="text-center">${counter++}</td>
        <td><input type="hidden" name="accountNo[]" value="${accountNo}">${accountNo}</td>
        <td><input type="hidden" name="accountName[]" value="${accountTitle}">${accountTitle}</td>
        <td><input type="hidden" name="paymentMode[]" value="${paymentMode}">${paymentMode}</td>
        <td><input type="hidden" name="PartnerName[]" value="${PartnerName}">${PartnerName}</td>
        <td><input type="hidden" name="instrumentAmount[]" value="${instrument}">${instrument}</td>
        <td><input type="hidden" name="netAmount[]" value="${amount}">${amount.toFixed(2)}</td>
        <td><input type="hidden" name="voucherDate[]" value="${created}">${created}</td>
        <td><input type="hidden" name="creditAmount[]" value="${creditAmount}">${creditAmount}</td>
        <td><input type="hidden" name="debitAmount[]" value="${debitAmount}">${debitAmount}</td>

        <td class="text-center">
            <button type="button" class="btn btn-danger btn-sm delete-row">
                <i class="fas fa-trash"></i>
            </button>
        </td>
    </tr>
    `;

            let $row = $(rowHtml);

            // Append the row initially if rows haven't been added yet
            if (!hasAddedRows) {
                $('#voucherTableBody').append($row);
            } else {
                $('#voucherTableBody').prepend($row); // Append above the debit row
            }

            return $row; // Return row so it can be inserted or manipulated
        }
        // Function to update the debit row amount
        function updateDebitRow() {
            $(debitRow).find('input[name="debitAmount[]"]').val(totalDebit.toFixed(2));
            $(debitRow).find('td').eq(9).text(totalDebit.toFixed(2)); // Update the displayed debit amount
            let debitAmountTd = $(debitRow).find('td').eq(9);
            debitAmountTd.html(
                `<input type="hidden" name="debitAmount[]" value="${totalDebit.toFixed(2)}">${totalDebit.toFixed(2)}`
            );

            updateTotals();
        }
        // Function to update total displays
        // function updateTotals() {
        //     totalD = totalDebit + totalDebit2;
        //     totalT = totalCredit + totalCredit2;
        //     $('#totalDebit').text(totalD.toFixed(2)); // Update total debit
        //     $('#totalCredit').text(totalT.toFixed(2)); // Update total credit
        //     if (totalD > totalT) {
        //         $('#totalDebit').css('color', 'red');
        //     } else {
        //         $('#totalDebit').css('color', ''); // Reset to default
        //     }
        // }
        $('#voucherTableBody').on('input', 'input[name="creditAmount[]"], input[name="debitAmount[]"]',
            function() {
                // Update totals and net amounts whenever credit or debit input changes
                updateTotals();
            });

        function updateTotals() {
            let totalCredit = 0;
            let totalDebit = 0;

            // Iterate over each row and calculate totals
            $('#voucherTableBody tr').each(function() {
                const $row = $(this); // Cache the row for reuse
                const credit = parseFloat($row.find('input[name="creditAmount[]"]').val()) || 0;
                const debit = parseFloat($row.find('input[name="debitAmount[]"]').val()) || 0;

                // Update net amount based on credit and debit values
                const netAmount = debit - credit; // Calculate the net amount
                const absoluteNetAmount = Math.abs(netAmount); // Convert net amount to positive

                $row.find('input[name="netAmount[]"]').val(absoluteNetAmount.toFixed(
                    2)); // Update netAmount input

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

            // Update total fields
            $('#totalCredit').text(totalCredit.toFixed(2)); // Update total credit
            $('#totalDebit').text(totalDebit.toFixed(2)); // Update total debit

            // Change color if debit is greater than credit
            if (totalDebit > totalCredit) {
                $('#totalDebit').css('color', 'red');
            } else {
                $('#totalDebit').css('color', ''); // Reset to default
            }
        }

        // Initialize totals on page load
        updateTotals();
        // Delete row functionality
        $(document).on('click', '.delete-row', function() {
            // Get the row to be deleted
            let row = $(this).closest('tr');

            // Get debit and credit amounts from the row
            let debitAmount = parseFloat(row.find('input[name="debitAmount[]"]').val());
            let creditAmount = parseFloat(row.find('input[name="creditAmount[]"]').val());

            // Update total amounts
            totalDebit -= debitAmount || 0;
            totalCredit -= creditAmount || 0;

            // Update totals
            updateTotals();

            // Remove the row
            row.remove();

            // Check if debitRow is removed, reset hasAddedRows if no more rows left
            if ($('#voucherTableBody tr').length === 0) {
                hasAddedRows = false;
                totalDebit = 0; // Reset totalDebit
                totalCredit = 0; // Reset totalCredit
                $('#totalDebit').text('0.00'); // Reset display
                $('#totalCredit').text('0.00'); // Reset display
            } else if (debitRow.is(row)) {
                // If the deleted row was the debit row, reset debitRow
                debitRow = $('#voucherTableBody tr:last-child'); // Update debitRow to the last row
                totalDebit = parseFloat(debitRow.find('input[name="debitAmount[]"]').val()) ||
                    0; // Get new totalDebit from the last row
                updateDebitRow(); // Update the new debit row
            }
        });

        // Function to show error notification
        function showErrorNotification(errors) {
            let errorMessage = errors.join(', ');
            $('#errorMessage').text(errorMessage);
            $('#errorNotification').fadeIn().delay(3000).fadeOut();
        }
    });
</script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const deletedVouchersInput = document.getElementById('deletedVouchers');
        const deleteButtons = document.querySelectorAll('.delete-row');

        deleteButtons.forEach(button => {
            button.addEventListener('click', function() {
                const row = this.closest('tr');
                const voucherId = row.getAttribute('data-voucher-id');

                // Append deleted voucher ID to the hidden input field
                let deletedVouchers = deletedVouchersInput.value ? deletedVouchersInput.value
                    .split(',') : [];
                deletedVouchers.push(voucherId);
                deletedVouchersInput.value = deletedVouchers.join(',');

                // Remove the row from the DOM
                row.remove();
            });
        });
    });
</script>
@endpush