@push('savingsAccountBalance')
    <div id="savingsAccountBalance">
        <div class="form-group">
            <div class="col-sm-4 col-sm-offset-4">
                <label>Principal Amount</label>
            </div>
            <div class="col-sm-4">
                <label>Interest Amount</label>
            </div>
        </div>

        <div class="form-group">
            <label for="authorizedDeposit" class="col-sm-4 control-label">Authorized Deposit:</label>
            <div class="col-sm-4">
                <input type="text" name="authorizedDeposit" class="form-control " id="authorizedDeposit" autocomplete="off"
                    readonly="readonly" value="{{number_format(@$accountBalance['authorizedDeposit'],2)}}">
            </div>
            <div class="col-sm-4">
                <input type="text" name="authorizedDepositInterest" class="form-control " id="authorizedDepositInterest"
                    autocomplete="off" readonly="readonly" value="{{number_format(@$accountBalance['authorizedDepositInterest'],2)}}">
            </div>
        </div>


        <div class="form-group">
            <label for="unauthorizedDeposit" class="col-sm-4 control-label">Unauthorized Deposit:</label>
            <div class="col-sm-4">
                <input type="text" name="unauthorizedDeposit" class="form-control " id="unauthorizedDeposit"
                    autocomplete="off" readonly="readonly" value="{{number_format(@$accountBalance['unauthorizedDeposit'],2)}}">
            </div>
            <div class="col-sm-4">
                <input type="text" name="unauthorizedDepositInterest" class="form-control "
                    id="unauthorizedDepositInterest" autocomplete="off" readonly="readonly" value="{{number_format(@$accountBalance['unauthorizedDepositInterest'],2)}}">
            </div>
        </div>


        <div class="form-group">
            <label for="totalDeposit" class="col-sm-4 control-label">Total Deposit:</label>
            <div class="col-sm-4">
                <input type="text" name="totalDeposit" class="form-control " id="totalDeposit" autocomplete="off"
                    readonly="readonly" value="{{number_format(@$accountBalance['totalDeposit'],2)}}">
            </div>
            <div class="col-sm-4">
                <input type="text" name="totalDepositInterest" class="form-control " id="totalDepositInterest"
                    autocomplete="off" readonly="readonly" value="{{number_format(@$accountBalance['totalDepositInterest'],2)}}">
            </div>
        </div>

        <div class="form-group">
            <label for="authorizedWithdraw" class="col-sm-4 control-label">Authorized Withdraw:</label>
            <div class="col-sm-4">
                <input type="text" name="authorizedWithdraw" class="form-control " id="authorizedWithdraw"
                    autocomplete="off" readonly="readonly" value="{{number_format(@$accountBalance['authorizedWithdraw'],2)}}">
            </div>
            <div class="col-sm-4">
                <input type="text" name="authorizedWithdrawInterest" class="form-control "
                    id="authorizedWithdrawInterest" autocomplete="off" readonly="readonly" value="{{number_format(@$accountBalance['authorizedWithdrawInterest'],2)}}">
            </div>
        </div>

        <div class="form-group">
            <label for="unauthorizedWithdraw" class="col-sm-4 control-label">Unauthorized Withdraw:</label>
            <div class="col-sm-4">
                <input type="text" name="unauthorizedWithdraw" class="form-control " id="unauthorizedWithdraw"
                    autocomplete="off" readonly="readonly" value="{{number_format(@$accountBalance['unauthorizedWithdraw'],2)}}">
            </div>
            <div class="col-sm-4">
                <input type="text" name="unauthorizedWithdrawInterest" class="form-control "
                    id="unauthorizedWithdrawInterest" autocomplete="off" readonly="readonly" value="{{number_format(@$accountBalance['unauthorizedWithdrawInterest'],2)}}">
            </div>
        </div>

        <div class="form-group">
            <label for="totalWithdraw" class="col-sm-4 control-label">Total Withdraw:</label>
            <div class="col-sm-4">
                <input type="text" name="totalWithdraw" class="form-control " id="totalWithdraw" autocomplete="off"
                    readonly="readonly" value="{{number_format(@$accountBalance['totalWithdraw'],2)}}">
            </div>
            <div class="col-sm-4">
                <input type="text" name="totalWithdrawInterest" class="form-control " id="totalWithdrawInterest"
                    autocomplete="off" readonly="readonly" value="{{number_format(@$accountBalance['totalWithdrawInterest'],2)}}">
            </div>
        </div>

        <div class="form-group">
            <label for="actualBalance" class="col-sm-4 control-label">Balance Up To [<span class="balUpToDate">
                    {{ @$softwareDate }}</span>]:</label>
            <div class="col-sm-4">
                <input type="text" name="actualBalance" class="form-control " id="actualBalance" autocomplete="off"
                    readonly="readonly" value="{{number_format(@$accountBalance['balance'],2)}}">
            </div>
            <div class="col-sm-4">
                <input type="text" name="actualBalanceInterest" class="form-control " id="actualBalanceInterest"
                    autocomplete="off" readonly="readonly" value="{{number_format(@$accountBalance['balanceInterest'],2)}}">
            </div>
        </div>

    </div>
@endpush

@push('formStyleScript')
    <style type="text/css">
        #rootwizard,
        #rootwizard .form-control {
            font-size: 11px !important;
        }

        #rootwizard input[type='text'],
        #rootwizard input[type='number'],
        #rootwizard input[type='file'],
        #rootwizard select {
            height: 28px !important;
        }

        #rootwizard label {
            margin-bottom: 0 !important;
            color: #555 !important;
            /* text-transform: uppercase; */
            /* font-size: 9px !important; */
        }
    </style>

    @push('memberSearch')
        @if (isset($members))
            <div id="memberList" class="container" style="display: none;position: absolute;">
                <table id="memberListTable" class="table table-fixed" style="font-size: 10px;">
                    <tbody id="memberListTableBody"
                        style=" display:block;height: 120px;overflow-y: auto !important;overflow-x: hidden;float:left;">
                        @foreach ($members as $member)
                            <tr>
                                <td memberId="{{ $member->id }}" style="text-align: left;">
                                    <span class="memberName"
                                        style="font-size: 11;font-weight: bold;">{{ $member->name }}</span>
                                    -
                                    <span class="memberCode"
                                        style="font-size: 11;font-weight: bold;">{{ $member->code }}</span><br>
                                    {{ 'Branch: ' . $member->branchName }}<br>
                                    {{ 'Samity: ' . $member->samityName }}<br>
                                    {{ 'Working Area: ' . $member->workingArea }}
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @endif

        <script>
            $(document).ready(function() {

                //Branch Wise Member(Start)
                $("#branch").change(function(event) {
                    var branchId = $(this).val();
                    $("#memberListTableBody").empty();
                    $.ajax({
                            url: "{{ url('getBranchWiseMemeberDropDownList') }}",
                            type: 'POST',
                            dataType: 'json',
                            data: {
                                branchId: branchId
                            },
                        })
                        .done(function(concatString) {
                            $("#memberListTableBody").append(concatString);
                            setMemberListTableSize();
                        })
                        .fail(function() {
                            console.log("error");
                        });

                });
                //Branch Wise Member(End)


                /*set the memberList position*/
                function setMemberListTableSize() {
                    var top = $('#member').offset().top - 85;
                    var left = $('#member').offset().left - 15;
                    var width = $('#member').width() + 42;
                    $("#memberList").css({
                        top: top
                    });
                    $("#memberList").css({
                        left: left
                    });
                    $("#memberList, #memberListTable tbody tr td").width(width);
                }
                setMemberListTableSize();
                //Show Member List(Start)
                $("#member").click(function(event) {
                    $("#memberList").show('slow/400/fast');
                });
                //Show Member List(End)

                $(document).mouseup(function(e) {
                    var container = $("#memberList");
                    // if the target of the click isn't the container nor a descendant of the container
                    if (!container.is(e.target) && container.has(e.target).length === 0) {
                        container.hide('slow/400/fast', function() {

                        });
                    }
                });

                /*on select td set the valus of hidden field for the member*/
                $(document).on("click", "#memberListTable tbody tr td", function(e) {
                    $("#memberId").val($(this).attr('memberId'));
                    $("#member").val($(this).find('.memberName').text() + ' - ' + $(this).find('.memberCode')
                        .text());
                    $("#memberList").hide('slow/400/fast');
                    // $("#product").trigger('change');
                    $("#memberId").trigger('change');
                });
                /*end on select td set the valus of hidden field for the member*/

                /*make search throgh table of member*/
                $("#member").on('input', function(event) {
                    // Reset the values
                    $("#memberId").val('');
                    var inputValue = $(this).val().toLowerCase();
                    $("#memberList").show('slow/400/fast');
                    matchedIndex = [];

                    $("#memberListTable tbody tr td").each(function(index, el) {
                        var memberName = $(el).find('.memberName').text().toLowerCase();
                        var memberCode = $(el).find('.memberCode').text().toLowerCase();
                        var fullText = memberName + ' - ' + memberCode;

                        if (memberName.indexOf(inputValue) !== -1 || memberCode.indexOf(inputValue) !==
                            -1 || fullText.indexOf(inputValue) !== -1) {
                            $(el).show();
                            matchedIndex.push($(el).closest('tr').index());
                        } else {
                            $(el).hide();
                        }
                    });
                    /* Act on the event */
                });
                /*end make search throgh table of member*/
            });
        </script>
    @endpush
    @push('formJavaScript')


        <script>
            function num(argument) {
                return argument.toLocaleString('en-US', {
                    minimumFractionDigits: 2,
                    maximumFractionDigits: 2
                });
            }
        </script>
    @endpush