@extends('layouts.master')


@section('title', 'Receive Voucher')


@section('page-header')
    <i class="fa fa-plus-circle"></i> Receive Voucher
@stop


@push('style')
    <link rel="stylesheet" href="{{ asset('assets/css/chosen.min.css') }}" />
    <link rel="stylesheet" href="{{ asset('assets/css/bootstrap-datepicker3.min.css') }}" />
    <link rel="stylesheet" href="{{ asset('assets/custom_css/chosen-required.css') }}" />


    <style>
        td {
            padding-bottom: 3px !important;
            padding-top: 3px !important;
        }

        table {
            counter-reset: section;
        }

        .count:before {
            counter-increment: section;
            content: counter(section);
        }

        select:invalid {
            height: 0px !important;
            opacity: 0 !important;
            position: absolute !important;
            display: flex !important;
        }

        select:invalid[multiple] {
            margin-top: 15px !important;
        }

    </style>
@endpush





@section('content')
    <div class="row">
        <div class="col-sm-12">

            @include('partials._alert_message')

            <div class="widget-box widget-color-white ui-sortable-handle clearfix" id="widget-box-7">

                <!-- heading -->
                <div class="widget-header widget-header-small">
                    <h3 class="widget-title smaller text-primary">
                        @yield('page-header')
                    </h3>
                    <div class="widget-toolbar">
                        <a href="{{ route('voucher-receives.index') }}"><i class="fa fa-list-alt"></i> List</a>
                    </div>
                </div>
                <!-- Form  -->
                <form id="form" action="{{ route('voucher-receives.store') }}" method="post" enctype="multipart/form-data">
                    @csrf


                    <input type="hidden" name="voucher_type" value="Receive">


                    <div class="row mt-1">

                        <div class="col-sm-12 px-3">
                            <!-- Filter -->
                            <div class="row">
                                <!-- Company -->
                                <div class="col-sm-3 my-1">
                                    <div class="input-group">
                                        <span class="input-group-addon">Company <strong
                                                class="text-danger">*</strong></span>

                                        <select required name="company_id" id="account_id" class="chosen-select-100-percent"
                                            data-placeholder="- Select Company -">
                                            <option></option>

                                            @foreach ($companies as $id => $name)

                                                @if (count($companies) > 1)
                                                    <option value="{{ $id }}"
                                                        {{ old('company_id') == $id ? 'selected' : '' }}>
                                                        {{ $name }}</option>
                                                @else
                                                    <option value="{{ $id }}" selected>{{ $name }}
                                                    </option>
                                                @endif
                                            @endforeach
                                        </select>

                                        @error('date')
                                            <span class="text-danger"> {{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-sm-4 my-1">
                                    <div class="input-group"> <span class="input-group-addon">Transaction Type <strong class="text-danger">*</strong></span>
                                        <select required name="v_payment_type" id="v_payment_typeaccount_id" class="chosen-select-100-percent" data-placeholder="- Transaction Type -">
                                            <option></option>
                                            <option value="Cash">Cash</option>
                                            <option value="Bank">Bank</option>
                                        </select>

                                        @error('date')
                                        <span class="text-danger"> {{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                                <!-- Reference -->
                                <div class="col-sm-3 my-1">
                                    <div class="input-group">
                                        <span class="input-group-addon">
                                            Reference
                                        </span>
                                        <input name="reference" value="{{ old('reference') }}" class="form-control"
                                            type="text">
                                    </div>
                                </div>
                                <!-- Date -->
                                <div class="col-sm-2 my-1">
                                    <div class="input-group">
                                        <span class="input-group-addon">
                                            Date
                                        </span>
                                        <input name="date" class="form-control date-picker text-center" type="text"
                                            value="{{ old('date', date('Y-m-d')) }}" data-date-format="yyyy-mm-dd">

                                        @error('date')
                                            <span class="text-danger"> {{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                            <!-- Item Detail -->
                            <div class="row mt-2">
                                <div class="col-sm-12">
                                    <table id="myTable" class="table table-bordered order-list">

                                        <!-- Table Header -->
                                        <thead>
                                            <tr>
                                                <td width="40px;">SL.</td>
                                                <td width="9%">DR / CR</td>
                                                <td width="10%" >Account Name<span class="text-danger">*</span></td>
                                                <td class="text-center" width="45%">Description</td>
                                                <td class="text-right" width="150px;">Debit</td>
                                                <td class="text-right" width="150px;">Credit</td>
                                                <td width="50px;"></td>
                                            </tr>
                                        </thead>





                                        <!-- Item Detail Table Body -->
                                        <tbody>
                                            @if (old('account_ids'))
                                                @foreach (old('account_ids') as $key => $value)
                                                    <tr>
                                                        <td class="count text-center"></td>
                                                        <td>
                                                            <select name="selection[]" class="dr-cr-select form-control" required>
                                                                <option value="dr">DR</option>
                                                                <option value="cr">CR</option>
                                                            </select>
                                                        </td>
                                                        <td>
                                                            <div class="col-sm-12">
                                                                <select required="required" name="account_ids[]"
                                                                    id="account_id"
{{--                                                                        class="chosen-select-100-percent"--}}
                                                                        class=""
                                                                    data-placeholder="- Select Account -">
                                                                    <option></option>
                                                                    @foreach ($accounts as $id => $value)
                                                                        <option value="{{ $value->id }}">
                                                                            {{ $value->name }}</option>
                                                                    @endforeach
                                                                </select>
                                                                @error('account_ids')
                                                                    <span class="text-danger"> {{ $message }}</span>
                                                                @enderror
                                                            </div>
                                                        </td>

                                                        <td>
                                                            <div class="col-sm-12">
                                                                <input name="voucher_description[]" value="{{ old('voucher_description')[$key] }}" type="text" class="form-control "/>
                                                                @error('voucher_description')
                                                                <span class="text-danger"> {{ $message }}</span>
                                                                @enderror
                                                            </div>
                                                        </td>
                                                        <td width="20%">
                                                            <input name="debit[]" value="{{ old('debit')[$key] }}"
                                                                type="text" onclick="enableMe(this)"
                                                                onkeyup="disabledReverse('input-credit', this)"
                                                                class="form-control only-number text-right input-debit calculate-total input-sm" />
                                                            @error('debit')
                                                                <span class="text-danger"> {{ $message }}</span>
                                                            @enderror
                                                        </td>
                                                        <td width="20%">
                                                            <input name="credit[]" value="{{ old('credit')[$key] }}"
                                                                type="text" onclick="enableMe(this)"
                                                                onkeyup="disabledReverse('input-debit', this)"
                                                                class="form-control only-number text-right input-credit calculate-total input-sm" />
                                                            @error('credit')
                                                                <span class="text-danger"> {{ $message }}</span>
                                                            @enderror
                                                        </td>
                                                        <td class="text-center"><a class="btn btn-sm btn-danger"
                                                                disabled="disabled"><i class="fa fa-trash"></i></a></td>
                                                    </tr>
                                                @endforeach
                                            @else
                                                <tr>
                                                    <td class="count text-center"></td>
                                                    <td>
                                                        <select name="selection[]" class="dr-cr-select form-control" required>
                                                            <option value="dr">DR</option>
                                                            <option value="cr">CR</option>
                                                        </select>
                                                    </td>
                                                    <td>
                                                        <div class="col-sm-12">
                                                            <select required="required" name="account_ids[]"
                                                                id="account_ids"
{{--                                                                    class="chosen-select-100-percent"--}}
                                                                    class=""
                                                                data-placeholder="- Select Account -">
                                                                <option></option>
                                                                @foreach ($accounts as $id => $value)
                                                                    <option value="{{ $value->id }}">
                                                                        {{ $value->name }}</option>
                                                                @endforeach
                                                            </select>
                                                            @error('account_ids')
                                                                <span class="text-danger"> {{ $message }}</span>
                                                            @enderror
                                                        </div>
                                                    </td>

                                                    <td>
                                                        <div class="col-sm-12">
{{--                                                            <input name="voucher_description[]" value="{{ old('voucher_description') }}" type="text" class="form-control "/>--}}
                                                            <input name="voucher_description[]" value="{{ old('voucher_description') }}" type="text" class="form-control "/>
                                                            @error('voucher_description')
                                                            <span class="text-danger"> {{ $message }}</span>
                                                            @enderror
                                                        </div>
                                                    </td>
                                                    <td width="20%">
                                                        <input name="debit[]" type="text" onclick="enableMe(this)"
                                                            onkeyup="disabledReverse('input-credit', this)"
                                                            class="form-control only-number text-right input-debit calculate-total input-sm" />
                                                        @error('debit')
                                                            <span class="text-danger"> {{ $message }}</span>
                                                        @enderror
                                                    </td>
                                                    <td width="20%">
                                                        <input name="credit[]" type="text" onclick="enableMe(this)"
                                                            onkeyup="disabledReverse('input-debit', this)"
                                                            class="form-control only-number text-right input-credit calculate-total input-sm" />
                                                        @error('credit')
                                                            <span class="text-danger"> {{ $message }}</span>
                                                        @enderror
                                                    </td>
                                                    <td class="text-center"><a class="btn btn-sm btn-danger"
                                                            disabled="disabled"><i class="fa fa-trash"></i></a></td>
                                                </tr>
{{--                                                <tr>--}}
{{--                                                    <td class="count text-center"></td>--}}
{{--                                                    <td>--}}
{{--                                                        <div class="col-sm-12">--}}
{{--                                                            <select required id="account_ids" name="account_ids[]"--}}
{{--                                                                class="chosen-select-100-percent"--}}
{{--                                                                data-placeholder="- Select Account -">--}}
{{--                                                                <option value=""></option>--}}
{{--                                                                @foreach ($accounts as $id => $value)--}}
{{--                                                                    <option value="{{ $value->id }}">--}}
{{--                                                                        {{ $value->name }}</option>--}}
{{--                                                                @endforeach--}}
{{--                                                            </select>--}}
{{--                                                            @error('account_ids')--}}
{{--                                                                <span class="text-danger"> {{ $message }}</span>--}}
{{--                                                            @enderror--}}
{{--                                                        </div>--}}
{{--                                                    </td>--}}
{{--                                                    <td>--}}
{{--                                                        <div class="col-sm-12">--}}
{{--                                                            <input name="voucher_description[]" value="{{ old('voucher_description') }}" type="text" class="form-control "/>--}}
{{--                                                            @error('voucher_description')--}}
{{--                                                            <span class="text-danger"> {{ $message }}</span>--}}
{{--                                                            @enderror--}}
{{--                                                        </div>--}}
{{--                                                    </td>--}}
{{--                                                    <td>--}}
{{--                                                        <input name="debit[]" type="text" onclick="enableMe(this)"--}}
{{--                                                            onkeyup="disabledReverse('input-credit', this)"--}}
{{--                                                            class="form-control only-number text-right calculate-total input-debit input-sm" />--}}
{{--                                                        @error('debit')--}}
{{--                                                            <span class="text-danger"> {{ $message }}</span>--}}
{{--                                                        @enderror--}}
{{--                                                    </td>--}}
{{--                                                    <td>--}}
{{--                                                        <input name="credit[]" type="text" onclick="enableMe(this)"--}}
{{--                                                            onkeyup="disabledReverse('input-debit', this)"--}}
{{--                                                            class="form-control only-number text-right input-credit calculate-total input-sm" />--}}
{{--                                                        @error('credit')--}}
{{--                                                            <span class="text-danger"> {{ $message }}</span>--}}
{{--                                                        @enderror--}}
{{--                                                    </td>--}}
{{--                                                    <td class="text-center"><a class="btn btn-sm btn-danger"--}}
{{--                                                            disabled="disabled"><i class="fa fa-trash"></i></a></td>--}}
{{--                                                </tr>--}}
                                            @endif
                                        </tbody>



                                        <!-- Table Footer -->
                                        <tfoot>
                                            <tr>
                                                <td></td>
                                                <td class="text-right item-serial" colspan="3">Total</td>
                                                <td>
                                                    <input name="total_debit" readonly value="{{ old('total_debit') }}"
                                                        disabled class="total-debit text-right form-control"
                                                        style="border: none;">
                                                </td>
                                                <td>
                                                    <input name="total_credit" readonly disabled
                                                        value="{{ old('total_credit') }}"
                                                        class="total-credit text-right form-control" style="border: none;">
                                                </td>
                                                <td>
                                                    <button type="button" class="btn btn-sm btn-success" id="addrow">
                                                        +
                                                    </button>
                                                </td>
                                            </tr>
                                        </tfoot>
                                    </table>
                                </div>
                            </div>
                        </div>


                        <div class="col-sm-12 px-4 mt-2 mb-2">

                            <div class="row">
                                <div class="input-group " style="width: 100%!important; float: left; ">
                                    <label class="input-group-addon">Narration/Description</label>
                                    <input type="text" required class="form-control" name="description"
                                        value="{{ old('description') }}" onclick="fillBlankFields()" placeholder="Narration / Description">

                                    @error('description')
                                        <span class="text-danger"> {{ $message }}</span>
                                    @enderror
                                </div>

                                <div class="input-group input-group-sm"
                                    style="width: 80%!important; height: 40%!important; float: left; margin-top: 10px;">
                                    <div class="col-xs-6" style="padding-left: 0px;;">
                                        <label class="ace-file-input ace-file-multiple"></label>
                                            <input type="file" name="attachment" id="id-input-file-3" />
                                    </div>
                                </div>





                                <!-- Action -->
                                <div class="pull-right mt-5">
                                    <div class="btn-group">
                                        <button type="button" id="draft" class="btn btn-sm btn-primary save-btn" disabled>
                                            <i class="fa fa-file"></i>
                                            Draft
                                            <input type="hidden" name="draft" class="draft-value" value="0">
                                        </button>
                                        <button type="submit" class="btn btn-sm btn-success save-btn" disabled>
                                            <i class="fa fa fa-save"></i>
                                            Save
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>

            </div>
        </div>
    </div>

@endsection





@section('js')


    <script src="{{ asset('assets/js/chosen.jquery.min.js') }}"></script>
    <script src="{{ asset('assets/js/bootstrap-datepicker.min.js') }}"></script>
    <script src="{{ asset('assets/custom_js/chosen-box.js') }}"></script>
    <script src="{{ asset('assets/custom_js/date-picker.js') }}"></script>

    <script>




        const saveButton = $('.save-btn')
        const inputDebit = $('.input-debit')
        const inputCredit = $('.input-credit')


        {{--const rowItem = `<tr>--}}
        {{--                    <td class="count"></td>--}}
        {{--                    <td>--}}
        {{--                        <div class="col-sm-12">--}}
        {{--                            <select id="account_id" name="account_ids[]" class="chosen-select-100-percent" data-placeholder="- Select Account -">--}}
        {{--                                <option value=""></option>--}}
        {{--                                @foreach ($accounts as $account)--}}
        {{--                                    <option value="{{ $account->id }}">{{ $account->name }}</option>--}}
        {{--                                @endforeach--}}
        {{--                            </select>--}}
        {{--                            @error('account_ids')--}}
        {{--                                <span class="text-danger"> {{ $message }}</span>--}}
        {{--                            @enderror--}}
        {{--                        </div>--}}
        {{--                    </td>--}}
        {{--                    <td>--}}
        {{--                                        <div class="col-sm-12">--}}
        {{--                                            <input name="voucher_description[]" value="{{ old('voucher_description') }}" type="text" class="form-control "/>--}}
        {{--                                            @error('voucher_description')--}}
        {{--                                                 <span class="text-danger"> {{ $message }}</span>--}}
        {{--                                            @enderror--}}
        {{--                                        </div>--}}
        {{--                    </td>--}}
        {{--                    <td>--}}
        {{--                        <input name="debit[]" type="text" onkeypress="return checkOnlyNumber(event)" onclick="enableMe(this)" onkeyup="disabledReverse('input-credit', this)" class="form-control text-right calculate-total input-debit input-sm" />--}}
        {{--                        @error('debit')--}}
        {{--                            <span class="text-danger"> {{ $message }}</span>--}}
        {{--                        @enderror--}}
        {{--                    </td>--}}
        {{--                    <td>--}}
        {{--                        <input name="credit[]" type="text" onkeypress="return checkOnlyNumber(event)" onclick="enableMe(this)" onkeyup="disabledReverse('input-debit', this)" class="form-control text-right input-credit calculate-total input-sm" />--}}
        {{--                        @error('credit')--}}
        {{--                            <span class="text-danger"> {{ $message }}</span>--}}
        {{--                        @enderror--}}
        {{--                    </td>--}}
        {{--                    <td><a class="ibtnDel btn btn-sm btn-danger"><i class="fa fa-trash"></i></a></td>--}}
        {{--                </tr>`--}}


        jQuery(function($) {
            $('#id-input-file-3').ace_file_input({
                style: 'well',
                btn_choose: 'Drop files here or click to choose',
                btn_change: null,
                no_icon: 'ace-icon fa fa-cloud-upload',
                droppable: true,
                thumbnail: 'small' //large | fit

            }).on('change', function() {
                //console.log($(this).data('ace_input_files'));
                //console.log($(this).data('ace_input_method'));
            });

            // Start header, footer
            $('#header').ace_file_input({
                style: 'well',
                btn_choose: 'Drop files here or click to choose',
                btn_change: null,
                no_icon: 'ace-icon fa fa-cloud-upload',
                droppable: true,
                thumbnail: 'small' //large | fit
            });
            $('#footer').ace_file_input({
                style: 'well',
                btn_choose: 'Drop files here or click to choose',
                btn_change: null,
                no_icon: 'ace-icon fa fa-cloud-upload',
                droppable: true,
                thumbnail: 'small' //large | fit
            });
            // End header, footer
        });



        $('select').chosen({
            allow_single_deselect: true
        });

        $("#draft").click(function() {

            $(".draft-value").val(1);

            $('#form').submit();
        })

        $(document).on("keyup", ".calculate-total", function() {
            calculateAmount()
        });

        function checkOnlyNumber(evnt) {
            let keyCode = evnt.charCode

            let str = evnt.target.value
            let n = str.includes(".")

            if (keyCode == 13) {
                evnt.preventDefault();
            }

            if (keyCode == 46 && n) {
                return false
            }

            if (str.length > 12) {
                showAlertMessage('Number length out of range', 3000)
                calculateAmount()
                return false
            }
            return (keyCode >= 48 && keyCode <= 57) || keyCode == 13 || keyCode == 46
        }

        function calculateAmount() {
            var debitTotal = 0;
            $(".input-debit").each(function() {
                debitTotal += Number($(this).val());
            });

            var creditTotal = 0;
            $(".input-credit").each(function() {
                creditTotal += Number($(this).val());
            });

            $(".total-debit").val(debitTotal);
            $(".total-credit").val(creditTotal);

            if (debitTotal === creditTotal && debitTotal > 0) {
                saveButton.attr('disabled', false)
            } else {
                saveButton.attr('disabled', true)
            }

        }

        function fillBlankFields() {
            console.log("fillBlankFields function triggered");

            setTimeout(() => {
                // Recalculate totals to ensure they are up-to-date
                calculateAmount();

                // Loop through each row in the table
                $("table.order-list tbody tr").each(function() {
                    var debitInput = $(this).find(".input-debit");
                    var creditInput = $(this).find(".input-credit");

                    // Initialize row-specific totals
                    var rowDebitTotal = 0;
                    var rowCreditTotal = 0;

                    // Calculate row-specific totals by summing inputs
                    $(this).find(".input-debit").each(function() {
                        rowDebitTotal += Number($(this).val()) || 0; // Default to 0 if value is NaN
                    });
                    $(this).find(".input-credit").each(function() {
                        rowCreditTotal += Number($(this).val()) || 0; // Default to 0 if value is NaN
                    });

                    // Get the total debit and credit from the `.total-debit` and `.total-credit` fields
                    var totalDebit = parseFloat($(".total-debit").val()) || 0;
                    var totalCredit = parseFloat($(".total-credit").val()) || 0;

                    var rest_total_debit = totalDebit > totalCredit ?  totalDebit - totalCredit: 0
                    var rest_total_credit = totalDebit < totalCredit ?  totalCredit - totalDebit: 0

                    // Fill blank debit fields with the total credit value if blank
                    if (debitInput.val().trim() === "") {
                        console.log("Filling Debit Input with:", totalCredit);
                        debitInput.val(rest_total_credit);
                    }

                    // Fill blank credit fields with the total debit value if blank
                    if (creditInput.val().trim() === "") {
                        console.log("Filling Credit Input with:", totalDebit);
                        creditInput.val(rest_total_debit);
                    }
                });

                // Recalculate amounts to ensure totals are correct
                calculateAmount();
            }, 100); // Delay to ensure values are updated
        }




        //old code
        // function disabledReverse($class_name, object) {
        //     let disableItem = $(object).closest('tr').find('.' + $class_name)
        //     disableItem.attr('readonly', true).val('0')
        // }
        // function disableReverseFields(selection, row) {
        //     if (selection === 'dr') {
        //         row.find('.input-credit').attr('readonly', true).val('0'); // Disable credit field
        //         row.find('.input-debit').attr('readonly', false); // Enable debit field
        //     } else {
        //         row.find('.input-debit').attr('readonly', true).val('0'); // Disable debit field
        //         row.find('.input-credit').attr('readonly', false); // Enable credit field
        //     }
        // }
        //
        // $(document).on('change', '.dr-cr-select', function() {
        //     let selectedValue = $(this).val();
        //     let currentRow = $(this).closest('tr');
        //     disableReverseFields(selectedValue, currentRow);
        // });
        //
        // // Initial setup for all rows on page load
        // $(document).ready(function() {
        //     $('.dr-cr-select').each(function() {
        //         let selectedValue = $(this).val();
        //         let currentRow = $(this).closest('tr');
        //         disableReverseFields(selectedValue, currentRow);
        //     });
        // });


        // function enableMe(object) {
        //     $(object).attr('readonly', false)
        // }

    </script>


    <script type="text/javascript">

        $(document).ready(function () {
            var lastSelectedValue = 'dr'; // Default to 'dr'

            function disableReverseFields(selection, row) {
                if (selection === 'dr') {
                    row.find('.input-credit').attr('readonly', true).val('0'); // Disable credit field
                    row.find('.input-debit').attr('readonly', false).val('');          // Enable debit field
                } else {
                    row.find('.input-debit').attr('readonly', true).val('0');  // Disable debit field
                    row.find('.input-credit').attr('readonly', false).val('');         // Enable credit field
                }
            }

            // Event listener for DR/CR select change
            $(document).on('change', '.dr-cr-select', function () {
                lastSelectedValue = $(this).val(); // Update the last selected value
                let currentRow = $(this).closest('tr');
                disableReverseFields(lastSelectedValue, currentRow);
            });

            // Initial setup for all rows on page load
            $('.dr-cr-select').each(function () {
                let selectedValue = $(this).val();
                let currentRow = $(this).closest('tr');
                disableReverseFields(selectedValue, currentRow);
            });

            function handleEnterKey(e) {
                if (e.which === 13) { // Check if Enter key is pressed
                    e.preventDefault(); // Prevent default form submission

                    let $currentElement = $(e.target);
                    let $currentRow = $currentElement.closest('tr');
                    let $nextElement;
                    let selectedValue = $currentRow.find('.dr-cr-select').val(); // Determine the selected value for 'DR' or 'CR'


                    // Determine the next element based on the current focus element
                    if ($currentElement.is('select[name="selection[]"]')) {
                        // Move to voucher_description input
                        $nextElement = $currentRow.find('select[name="account_ids[]"]');
                    }else if ($currentElement.is('select[name="account_ids[]"]')) {
                        // Move to voucher_description input
                        $nextElement = $currentRow.find('input[name="voucher_description[]"]');
                    } else if ($currentElement.is('input[name="voucher_description[]"]')) {
                        // // Move to debit or credit input
                        // $nextElement = $currentRow.find('input.input-debit, input.input-credit').first();

                        if (selectedValue === 'dr') {
                            $nextElement = $currentRow.find('input.input-debit');
                        } else {
                            $nextElement = $currentRow.find('input.input-credit');
                        }
                    } else if ($currentElement.is('input.input-debit, input.input-credit')) {
                        // Trigger add_row function and move to new row's account_ids select
                        $nextElement = null; // We will handle this after appending the new row
                        $("#addrow").click(); // Call your function to append a new row
                    }

                    if ($nextElement) {
                        $nextElement.focus();
                    } else {
                        requestAnimationFrame(() => {
                            let $newRow = $("table.order-list tr").last();
                            let $newAccountSelect = $newRow.find('select[name="selection[]"]');
                            $newAccountSelect.focus();
                        });
                    }
                }
            }

            $(document).on('keypress', 'select[name="selection[]"], select[name="account_ids[]"], input[name="voucher_description[]"], input.input-debit, input.input-credit', handleEnterKey);


            // Append a new row with inherited DR/CR selection
            $("#addrow").on("click", function () {
                var rowItem = `<tr>
            <td class="count"></td>
            <td>
                <select name="selection[]" class="dr-cr-select form-control" required>
                    <option value="dr" ${lastSelectedValue === 'dr' ? 'selected' : ''}>DR</option>
                    <option value="cr" ${lastSelectedValue === 'cr' ? 'selected' : ''}>CR</option>
                </select>
            </td>
            <td>
                <div class="col-sm-12">
                    <select id="account_id" name="account_ids[]" class="chosen-select-100-percent" data-placeholder="- Select Account -">
                        <option value=""></option>
                        @foreach ($accounts as $account)
                <option value="{{ $account->id }}">{{ $account->name }}</option>
                        @endforeach
                </select>
@error('account_ids')
                <span class="text-danger"> {{ $message }}</span>
                                @enderror
                </div>
            </td>
            <td>
                <div class="col-sm-12">
                    <input name="voucher_description[]" value="{{ old('voucher_description') }}" type="text" class="form-control"/>
                                @error('voucher_description')
                <span class="text-danger"> {{ $message }}</span>
                                @enderror
                </div>
            </td>
            <td width="20%">
                <input name="debit[]" type="text" onkeypress="return checkOnlyNumber(event)" onclick="enableMe(this)" onkeyup="disabledReverse('input-credit', this)" class="form-control text-right input-debit calculate-total input-sm"/>
@error('debit')
                <span class="text-danger"> {{ $message }}</span>
                            @enderror
                </td>
                <td width="20%">
                    <input name="credit[]" type="text" onkeypress="return checkOnlyNumber(event)" onclick="enableMe(this)" onkeyup="disabledReverse('input-debit', this)" class="form-control text-right input-credit calculate-total input-sm"/>
@error('credit')
                <span class="text-danger"> {{ $message }}</span>
                        @enderror
                </td>
            <td><a class="ibtnDel btn btn-sm btn-danger"><i class="fa fa-trash"></i></a></td>
        </tr>`;

                var $newRow = $(rowItem);
                disableReverseFields(lastSelectedValue, $newRow); // Apply the correct disabling logic
                $("table.order-list").append($newRow);
                chosenSelectInit(); // Reinitialize chosen select for the new row
                // requestAnimationFrame(() => {
                //     let $newAccountSelect = $newRow.find('select[name="account_ids[]"]');
                //     $newAccountSelect.focus();
                // });

                requestAnimationFrame(function () {
                    console.log('Appending new row to table');
                    $newRow.find('select[name="selection[]"]').on('focus', function () {
                        console.log('Focus event triggered on new row\'s account_ids select element');
                    });
                    console.log($newRow.length); // Should output 1 if the element is found
                    console.log($newRow.find('select[name="selection[]"]').length); // Should output 1 if the select element is found
                    $newRow.find('select[name="selection[]"]').focus();
                });

            });

            // Delete row functionality
            $("table.order-list").on("click", ".ibtnDel", function () {
                $(this).closest("tr").remove();
                calculateAmount();
            });

            function chosenSelectInit() {
                $(".chosen-select-100-percent").chosen({
                    width: "100%"
                });
            }
        });

    </script>
@endsection