@extends('layouts/acc_layout')
@section('title', '| Daily Fund Plan')
@section('content')
    @include('successMsg')
    <style>
        .custom-date-input {
            padding-right: 1px !important;
        }


        .custom-date-label {
            width: 5%;
        }


        .custom-gap {
            margin-right: 2px;
        }

        .custom-branch-input {
            padding-left: 1px !important;

        }


        .custom-branch-label {
            width: 5.8%;

        }

        .custom-branch-input-field {
            width: 10%;

        }

        .custom-gap {
            margin-right: 2px;
        }

        .fixed-height {
            height: 45px;
            /* Adjust the height as needed */
        }
    </style>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/numeral.js/2.0.6/numeral.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
    <script src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/number-to-words@latest/dist/number-to-words.min.js"></script>
    </head>


    @if ((now()->format('H:i') >= '17:00' && now()->format('H:i') <= '23:59') || $isHoliday == 1)
        <div class="row add-data-form">

            <div class="col-md-3"></div>

            <div class="viewTitle" style="border-bottom: 1px solid white;">
                <a href="{{ url('fundDemandRegister/') }}" class="btn btn-info pull-right addViewBtn"><i
                        class="glyphicon glyphicon-th-list viewIcon">
                    </i>View Fund Demand</a>
            </div>
            <div class="panel panel-default panel-border col-md-12">
                <div class="panel-heading">
                    <div class="panel-title">Daily Fund Plan</div>
                </div>
                {!! Form::open(['url' => '#', 'role' => 'form', 'class' => 'form-horizontal form-groups']) !!}
                <div class="panel-body">
                    <div class="row">
                        <div class="col-md-10 row">
                            {!! Form::label('branch', 'Branch:', ['class' => 'control-label col-sm-1 custom-branch-label custom-gap']) !!}
                            <div class="col-sm-2 custom-branch-input-field">

                                {!! Form::text('branch', $branch->nameWithCode, [
                                    'id' => 'branch',
                                    'class' => 'form-control custom-gap',
                                    'readonly',
                                ]) !!}
                                {!! Form::hidden('branch_id', $branch->branchId) !!}
                            </div>
                        </div>


                        <div class="row justify-content-end">
                            <div class="col-sm-1 text-right">
                                {!! Form::label('collectionDate', 'Date:', ['class' => 'control-label ']) !!}
                            </div>
                            <div class="col-sm-1 custom-date-input-field">
                                {!! Form::text('date', $date, ['class' => 'form-control', 'readonly']) !!}
                            </div>
                        </div>

                    </div>



                </div>




                <div class="col-md-10" style="text-align: left; text-decoration: underline; font-size: 17px;">
                    {{-- <strong>Cash And Bank:</strong> --}}
                </div><br><br>



                {{-- <div class="panel-title">Cash in Hand:</div> --}}

                <table class="table table-striped table-bordered" id="viewFundRegister" style="color:black;">
                    {{-- @foreach ($vaultRegisters as $vaultRegister) --}}
                    <thead>
                        <tr>
                            <th colspan="2">Cash & Bank Balance<br></th>
                            <th rowspan="3"> Loan Disbursement Request (HO)</th>
                            <th rowspan="3"> DDI Request (HO)</th>
                            {{-- <th width="170" rowspan="2">Total Amount</th> --}}
                            <th colspan="3">Branch Office Payment Information<br></th>
                            <th rowspan="3">ESTIMA</th>
                            <th rowspan="3">FUND DEMAND</th>
                            <th rowspan="3" style="width: 110px">Balance</th>

                        </tr>
                        <tr>
                            <th> Cash</th>
                            <th> Bank Name</th>
                            <th> Loan Disbursment</th>
                            <th> SAVINGS REFUND</th>
                            <th>OTHERS EXP.</th>


                        </tr>

                    </thead>
                    <tbody>
                        <tr>
                            <td>
                                {!! Form::text('cashInHand', null, [
                                    'class' => 'form-control fixed-height',
                                    'style' => 'text-align:right',
                                    'id' => 'cashInHand',
                                    'data-allow-decimal' => 'true', // New attribute for cashInHand
                                ]) !!}
                            </td>
                            <td>
                                {!! Form::text('cashInBank', null, [
                                    'class' => 'form-control fixed-height',
                                    'style' => 'text-align:right',
                                    'id' => 'cashInBank',
                                    'data-allow-decimal' => 'true', // New attribute for cashInBank
                                ]) !!}
                            </td>
                            <td>
                                {!! Form::text('loanDisbursmentRequest', null, [
                                    'class' => 'form-control fixed-height',
                                    'id' => 'loanDisbursmentRequest',
                                    'style' => 'direction: rtl;',
                                ]) !!}

                            </td>
                            <td style="padding-right: 5px">
                                {!! Form::text('DDIrequest', null, [
                                    'class' => 'form-control fixed-height',
                                    'id' => 'DDIrequest',
                                    'style' => 'direction: rtl;',
                                ]) !!}
                            </td>
                            <td>
                                {!! Form::text('loanDisbursment', null, [
                                    'class' => 'form-control fixed-height',
                                    'id' => 'loanDisbursment',
                                    'style' => 'direction: rtl;',
                                ]) !!}
                            </td>
                            <td>
                                {!! Form::text('savingsRefund', null, [
                                    'class' => 'form-control fixed-height',
                                    'id' => 'savingsRefund',
                                    'style' => 'direction: rtl;',
                                ]) !!}
                            </td>
                            <td>
                                {!! Form::text('othersExp', null, [
                                    'class' => 'form-control fixed-height',
                                    'id' => 'othersExp',
                                    'style' => 'direction: rtl;',
                                ]) !!}
                            </td>
                            <td>
                                {!! Form::text('estima', null, [
                                    'class' => 'form-control fixed-height',
                                    'id' => 'estima',
                                    'style' => 'direction: rtl;',
                                ]) !!}
                            </td>
                            <td>
                                {!! Form::text('fundDemand', null, [
                                    'class' => 'form-control fixed-height',
                                    'id' => 'fundDemand',
                                    'style' => 'direction: rtl;',
                                ]) !!}
                            </td>
                            <td>
                                {!! Form::text('balance', null, [
                                    'class' => 'form-control fixed-height',
                                    'readonly',
                                    'style' => 'text-align:right',
                                    'id' => 'balance',
                                ]) !!}
                            </td>

                        </tr>
                    </tbody>

                    <thead>
                        <tr>


                            <th style="text-align: left;" id="displayBalances" colspan="9"></th>

                            <th {!! Form::text('balance', null, ['class' => 'form-control', 'readonly', 'id' => 'balance']) !!}></th>
                        </tr>
                    </thead>
                    {{-- @endforeach --}}
                </table>










                <br><br>
                <div class="form-group">
                    {!! Form::label('submit', ' ', ['class' => 'col-sm-5 control-label']) !!}
                    <div class="col-sm-5">
                        {!! Form::submit('Submit', ['id' => 'add', 'class' => 'btn btn-info']) !!}
                        <a href="{{ url('/') }}" class="btn btn-danger closeBtn">Close</a>
                        <span id="success" style="color:green; font-size:20px;" class="pull-right"></span>
                    </div>
                </div>
            </div>

            {!! Form::close() !!}


        </div>

        <div class=" row viewTitle" style="border-bottom: 1px solid white;">


            <div class="col-md-2"></div>
        </div>
    @else
        <h1>Your Fund Plan time is during 5PM to 12 AM </h1>
    @endif


    <script>
        $(document).ready(function() {
            calculateBalance();
            @if (Session::has('toastrMessage'))
                toastr.{{ Session::get('toastrType') }}('{{ Session::get('toastrMessage') }}');
            @endif

            function validateInput(input) {
                // Get the current value of the input
                let value = input.value;

                // Check if the input allows decimals
                const allowDecimal = input.dataset.allowDecimal === 'true';

                // If decimals are allowed, use a regular expression to validate the input
                if (allowDecimal) {
                    // Remove any characters that are not digits or a dot
                    value = value.replace(/[^0-9.]/g, '');

                    // Enforce that only one dot is allowed
                    const parts = value.split('.');
                    if (parts.length > 2) {
                        value = parts[0] + '.' + parts[1]; // Keep only the first dot and discard extra characters
                    }

                    // Enforce only two decimal places
                    if (parts[1] && parts[1].length > 2) {
                        value = parts[0] + '.' + parts[1].slice(0, 2); // Limit to two decimal places
                    }
                } else {
                    // If decimals are not allowed, remove any characters that are not digits
                    value = value.replace(/[^0-9]/g, '');
                }

                // Set the validated value back to the input field
                input.value = value;
            }

            function formatNumber(inputField) {
                // Remove existing commas (optional, if you want to allow manual comma input)
                const amount = +inputField.val().replace(/,/g, ''); // Remove commas for proper formatting

                // Format the number with commas using the appropriate locale
                const formattedAmount = amount.toLocaleString("en-IN");

                // Set the formatted value back to the input field
                inputField.val(formattedAmount);
            }

            // Attach the event listener to all input elements
            document.querySelectorAll(
                '#cashInHand,#cashInBank,#loanDisbursmentRequest,#DDIrequest,#loanDisbursment, #savingsRefund, #othersExp, #estima, #fundDemand, #balance'
            ).forEach(function(element) {
                // Validate input on each keystroke
                element.addEventListener('input', function(e) {
                    validateInput(e.target);
                });

                // Format number on blur (when the user leaves the field)
                element.addEventListener('blur', function(e) {
                    formatNumber($(this));
                });
            });



            function parseNumber(value) {
                if (!value || isNaN(value)) {
                    return 0;
                }
                return parseFloat(value.replace(/,/g, ''));
            }



            function calculateBalance() {
                let cashInHand = numeral($('#cashInHand').val()).value();



                let cashInBank = numeral($('#cashInBank').val()).value();

                let estima = parseNumber($('#estima').val());
                // console.log(ho);
                let fundDemand = parseNumber($('#fundDemand').val());

                let totalFunds = cashInHand + cashInBank + estima + fundDemand;

                let loanDisbursment = parseNumber($('#loanDisbursment').val());
                let savingsRefund = parseNumber($('#savingsRefund').val());
                let othersExp = parseNumber($('#othersExp').val());
                let DDIrequest = parseNumber($('#DDIrequest').val());

                let totalPayments = loanDisbursment + savingsRefund + othersExp + DDIrequest;

                let balance = totalFunds - totalPayments;
                // formatNumber($(this));
                $('#displayBalance').html(balance.toFixed(2));
                $('#balance').val(balance.toFixed(2));

                formatNumber($('#balance'));

            }

            $('#cashInHand,#cashInBank,#estima, #fundDemand,#DDIrequest, #loanDisbursment, #savingsRefund,#DDIrequest, #othersExp')
                .on(
                    'input',
                    function() {
                        calculateBalance();

                    });



            // Initial calculation on page load
            calculateBalance();
            $('form').submit(function(event) {
                event.preventDefault();
                var form = $(this).serialize();
                var csrfToken = "{{ csrf_token() }}";
                var submitButton = $(this).find('input[type="submit"]');
                submitButton.prop('disabled', true);

                $.ajax({
                    url: "{{ route('storeFundDemand') }}",
                    type: "POST",
                    data: form,
                    headers: {
                        'X-CSRF-Token': csrfToken
                    },
                    success: function(response) {
                        toastr.success('Success: ' + response.message);
                        submitButton.prop('disabled', false);
                        window.location.href =
                            "{{ url('fundDemandRegister/') }}";
                        setTimeout(function() {
                            window.location.href =
                                "{{ url('fundDemandRegister/') }}";
                        }, 2000);
                    },
                    error: function(xhr, status, error) {
                        if (xhr.status === 400) {
                            var response = xhr.responseJSON;
                            toastr.warning(response.responseTitle + ": " + response
                                .responseText);
                        } else {
                            alert(error);
                        }
                        submitButton.prop('disabled', false);
                    }
                });
            });

        });
    </script>
@endsection