@extends('layouts.master')

@section('title', 'Inter Company Transactions')

@section('page-header')
    <i class="fa fa-plus-circle"></i> Create Inter Company Transactions 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')

            <!-- heading -->
            <div class="widget-box widget-color-white ui-sortable-handle clearfix" id="widget-box-7">
                <div class="widget-header widget-header-small">
                    <h3 class="widget-title smaller text-primary">
                        @yield('page-header')
                    </h3>

                    <div class="widget-toolbar border smaller" style="padding-right: 0 !important">
                        <div class="pull-right tableTools-container" style="margin: 0 !important">
                            <div class="dt-buttons btn-overlap btn-group">
                                <a href="{{ route('voucher-contras.index') }}"
                                   class="dt-button btn btn-white btn-info btn-bold" title="List" data-toggle="tooltip"
                                   tabindex="0" aria-controls="dynamic-table">
                                    <span>
                                        <i class="fa fa-list bigger-110"></i>
                                    </span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="space"></div>





                <!-- INPUTS -->
                <form id="form" action="{{ route('voucher-inter-companies.store') }}" method="post" enctype="multipart/form-data">
                    @csrf
                    <input type="hidden" name="voucher_type" value="Inter Company">
                    <div class="row">
                        <div class="col-sm-12 px-4">

                            <div class="row">
                                <div class="col-md-12" style="padding-left: 0px;">
                                    <div class="form-group">
                                        <div class="row">
                                            <div class="col-xs-4 col-sm-4">
                                                <div class="input-group">
                                                    <span class="input-group-addon input-sm">
                                                      HO
                                                    </span>
                                                    <select required name="from_company_id" class="chosen-select-100-percent"
                                                            data-placeholder="- Select Company -">
                                                        <option value=""></option>
                                                        @foreach ($company as $key=>$all_company)
                                                            <option value="{{ $key }}">
                                                                {{ $all_company }}</option>
                                                        @endforeach
                                                    </select>
                                                    @error('account_ids')
                                                    <span class="text-danger"> {{ $message }}</span>
                                                    @enderror
                                                </div>
                                            </div>
                                            <div class="col-xs-4 col-sm-4">
                                                <div class="input-group">
                                                    <span class="input-group-addon input-sm">
                                                        Transfer Type
                                                    </span>
                                                    <select required name="transfer_type" class="chosen-select-100-percent"
                                                            data-placeholder="- Select Transfer Type -">
                                                        <option value="company_to_branch">Company to Branch</option>
                                                        <option value="company_to_company">Company to Company</option>
                                                        <option value="branch_to_branch">Branch to Branch</option>
                                                    </select>
                                                    @error('account_ids')
                                                    <span class="text-danger"> {{ $message }}</span>
                                                    @enderror
                                                </div>
                                            </div>

                                            <div class="col-xs-4 col-sm-4">
                                                <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_type" class="chosen-select-100-percent" data-placeholder="- Select Payment Type -">
                                                        <option></option>
                                                        <option value="Cash">Cash</option>
                                                        <option value="Bank" selected>Bank</option>
                                                    </select>

                                                    @error('date')
                                                    <span class="text-danger"> {{ $message }}</span>
                                                    @enderror
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-9" style="padding-left: 0px;">
                                    <div class="form-group">
                                        <div class="row">
                                            <div class="col-xs-4 col-sm-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon">
                                                        Reference
                                                    </span>
                                                    <input name="reference" value="{{ old('reference') }}"
                                                           class="form-control" type="text">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-3" style="padding-right: 0px;">
                                    <div class="form-group">
                                        <div class="row">
                                            <div class="col-xs-4 col-sm-12">
                                                <div class="input-group">
                                                    <input name="date" class="form-control date-picker text-center"
                                                           id="id-date-picker-1" type="text"
                                                           value="{{ old('date') ?: date('Y-m-d') }}"
                                                           data-date-format="yyyy-mm-dd">
                                                    <span class="input-group-addon">
                                                        Date
                                                    </span>
                                                    @error('date')
                                                    <span class="text-danger"> {{ $message }}</span>
                                                    @enderror
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-12">
                                    <table id="myTable" class="table table-bordered order-list">
                                        <thead>
                                        <tr>
                                            <td width="40px;">SL.</td>
                                            <td width="9%">DR/CR</td>
                                            <td width="9%">Companies</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>


                                        <tbody>
                                        @if (old('account_ids'))
                                            @foreach (old('account_ids') as $key => $value)
                                                <tr>
                                                    <td class="count"></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>
                                                        <select required="required" name="transfer_company_ids[]"
                                                                id="account_id"
                                                                class="chosen-select-100-percent"
                                                                data-placeholder="- Select Companies -">
                                                            <option></option>
                                                            @foreach ($company as  $key_company=>$all_company)
                                                                <option value="{{ $key_company }}">
                                                                    {{ $all_company }}</option>
                                                            @endforeach
                                                        </select>
                                                        @error('account_ids')
                                                        <span class="text-danger"> {{ $message }}</span>
                                                        @enderror
                                                    </td>
                                                    <td>
                                                        <div class="col-sm-12">
                                                            <select required="required" name="account_ids[]"
                                                                    id="account_id"
                                                                    class="chosen-select-100-percent"
                                                                    data-placeholder="- Select Account -">
                                                                <option></option>
                                                                @foreach ($accounts as $account)
                                                                    <option value="{{ $account->id }}"
                                                                        {{ old('account_ids')[$key] == $account->id ? 'selected' : '' }}>
                                                                        {{ $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="" type="text" class="form-control "/>
                                                            @error('voucher_description')
                                                            <span class="text-danger"> {{ $message }}</span>
                                                            @enderror
                                                        </div>
                                                    </td>
                                                    <td width="20%">
                                                        <input name="debit[]" value=""
                                                               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[]" value=""
                                                               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 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"></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>
                                                    <select required="required" name="transfer_company_ids[]"
                                                            id="account_id"
                                                            class="chosen-select-100-percent"
                                                            data-placeholder="- Select Companies -">
                                                        <option></option>
                                                        @foreach ($company as  $key_company=>$all_company)
                                                            <option value="{{ $key_company }}">
                                                                {{ $all_company }}</option>
                                                        @endforeach
                                                    </select>
                                                    @error('account_ids')
                                                    <span class="text-danger"> {{ $message }}</span>
                                                    @enderror
                                                </td>
                                                <td>
                                                    <div class="col-sm-12">
                                                        <select required="required" name="account_ids[]"
                                                                id="account_id"
                                                                class="chosen-select-100-percent"
                                                                data-placeholder="- Select Account -">
                                                            <option></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="" 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 class="text-center"><a class="btn btn-sm btn-danger"
                                                                           disabled="disabled"><i class="fa fa-trash"></i></a></td>
                                            </tr>
                                        @endif
                                        </tbody>



                                        <tfoot>
                                        <tr>
                                            <td></td>
                                            <td class="text-right item-serial" colspan="4">Total</td>
                                            <td>
                                                <input name="total_debit" readonly disabled
                                                       class="total-debit text-right form-control" style="border: none;">
                                            </td>
                                            <td>
                                                <input name="total_credit" readonly disabled
                                                       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 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>

                                <div class="pull-right mt-5">
                                    <button type="button" id="draft" class="btn btn-sm btn-primary save-btn" disabled>
                                        Draft
                                        <i class="fa fa-file"></i>
                                        <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>
                </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')

        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
        }

    </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>
                <select id="account_id" name="transfer_company_ids[]" class="chosen-select-100-percent" data-placeholder="- Select Companies -">
                <option value=""></option>
                        @foreach ($company as  $key_company=>$all_company)
                        <option value="{{ $key_company }}">{{ $all_company }}</option>
                        @endforeach
                </select>
                @error('account_ids')
                <span class="text-danger"> {{ $message }}</span>
                @enderror
            </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="" 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 input-debit calculate-total 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>`;

                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(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