@extends('layouts.main')

@push('styles')
<link href="{{ asset('elite/bower_components/bootstrap-datepicker/bootstrap-datepicker.min.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ asset('elite/bower_components/bootstrap-select/bootstrap-select.min.css') }}" rel="stylesheet" />
@endpush

@section('content')
<div class="row bg-title">
    <div class="col-lg-3 col-md-3 col-sm-4 col-xs-12">
        <h4 class="page-title">{{ __('finance.budgets') }}</h4>
    </div>
    <div class="col-lg-9 col-sm-8 col-md-8 col-xs-12">
        <ol class="breadcrumb">
            <li><a href="{{ route('home') }}"><i class="fa fa-home"></i> Home</a></li>
            <li><a href="{{ route('finance') }}"><i class="fa fa-money"></i> Finance Home</a></li>
            <li><a href="{{ route('budgets.index') }}"><i class="fa fa-book"></i> {{ __('finance.budgets') }}</a></li>
            <li class="active"><i class="fa fa-file"></i> Clone Budget </li>
        </ol>
    </div>
</div>

@include('budgets::budgets.menu')
@include('flash::message')
<div class="row">
    <div class="col-md-12">
        <div class="white-box">
            {{ Form::open(['method' => 'POST', 'route' => 'budgets.store', 'data-toggle' => 'validator', 'id' =>
            'budgetForm']) }}
            <div class="row">

                <div class='col-md-3'>
                    <div class='form-group'>
                        {{ Form::label('budget_name', __('budgets.budget_name')) }}
                        {{ Form::text('budget_name', '', ['class' => 'form-control
                        compulsory','required','data-error'=> '']) }}
                    </div>
                </div>

                <div class="col-md-3">
                    <div class="form-group">
                        {{ Form::label('period', 'Budget Breakdown') }}
                        <div class="input-group">
                            <select class="form-control compulsory required" id="period" name="period" required>
                                {{-- <option value="" disabled>{{ __('budgets.select') }}</option> --}}
                                <option value="months" @if($budget->period == "months") selected @endif>{{
                                    __('budgets.months') }}</option>
                                <option value="quarters" @if($budget->period == "quarters") selected @endif>{{
                                    __('budgets.quarters') }}</option>
                                <option value="years" @if($budget->period == "years") selected @endif>{{
                                    __('budgets.years') }}</option>
                            </select>
                        </div>
                    </div>
                </div>

                <div class="col-md-3">
                    <div class="form-group">
                        {{ Form::label('period_start', 'Budget Start Date') }}
                        <div class="input-group">
                            {{ Form::text('period_start','',['class' => 'form-control compulsory', 'required','readonly','id'=>'period_start']) }}
                            <span class="input-group-addon"><i class="icon-calender"></i></span>
                        </div>
                    </div>
                </div>

                <div class='col-md-3'>
                    <div class='form-group' id="divPeriodMonths" name="divPeriodMonths">
                        {{ Form::label('period_count_months', __('budgets.period_count_months')) }}
                        {{ Form::number('period_count_months', ($budget->period == "months") ?
                        $budget->period_count : '', ['class' => 'form-control compulsory', 'required', 'data-error' =>
                        '', 'min' => 1, 'max' => 12]) }}
                    </div>

                    <div class='form-group' id="divPeriodQuarters" name="divPeriodQuarters">
                        {{ Form::label('period_count_quarters', __('budgets.period_count_quarters')) }}
                        {{ Form::number('period_count_quarters',($budget->period == "quarters") ? $budget->period_count
                        : '', ['class' => 'form-control compulsory', 'required', 'data-error' => '', 'min' => 1, 'max'
                        => 20]) }}
                    </div>

                    <div class='form-group' id="divPeriodYears" name="divPeriodYears">
                        {{ Form::label('period_count_years', __('budgets.period_count_years')) }}
                        {{ Form::number('period_count_years',($budget->period == "years") ? $budget->period_count :'',
                        ['class' => 'form-control compulsory', 'required', 'data-error' => '', 'min' => 1, 'max' => 5])
                        }}
                    </div>
                </div>

                {{-- <div class='col-md-3'>
                    @php
                    $period_months = getMonthsList();
                    $months_select = array_merge(array(__('budgets.select')), $period_months);

                    $period_quarters = array("First", "Second", "Third", "Fourth");
                    $quarters_select = array_merge(array(__('budgets.select')), $period_quarters);
                    @endphp

                    <div class='form-group' id="divStartMonth" name="divStartMonth">
                        {{ Form::label('period_start_month', __('budgets.period_start_month')) }}
                        {{ Form::select('period_start_month', $months_select, ($budget->period == "months") ?
                        $budget->period_start : '', ['class' =>'form-control compulsory required'])}}
                    </div>

                    <div class='form-group' id="divStartQuarter" name="divStartQuarter">
                        {{ Form::label('period_start_quarter', __('budgets.period_start_quarter')) }}
                        {{ Form::select('period_start_quarter', $quarters_select, ($budget->period == "quarters") ?
                        $budget->period_start : '', ['class' => 'form-control compulsory required'])}}
                    </div>

                    <div class='form-group' id="divStartYear" name="divStartYear">
                        {{ Form::label('period_start_year', __('budgets.period_start_year')) }}
                        {{ Form::number('period_start_year', ($budget->period == "years") ? $budget->period_start :
                        $this_year, ['class' => 'form-control compulsory','required', 'data-error' => '', 'min' =>
                        $this_year]) }}
                    </div>
                </div> --}}
            </div>

            <hr />
            {{-- <div class="row">

                <div class='col-md-3'>
                    <div id="divCalcTotals" class='form-group' style='margin-top: 10px;'>
                        <button id="calc_totals" class='btn btn-sm btn-rounded btn-success' style='color: white;'
                            type='button'><i class='fa fa-calculator'></i></button> Calculate totals
                    </div>
                </div>

                <div class='col-md-3'>
                    <div id="divRemoveItems" class='form-group' style='margin-top: 10px;'>
                        <button id="remove_items" class='btn btn-sm btn-rounded btn-danger' style='color: white;'
                            type='button'><i class='fa fa-trash'></i></button> Remove rows
                    </div>
                </div>

                <div class='col-md-6'></div>
            </div> --}}

            <div class='row'>
                <div class='col-md-12'>
                    @php
                    $period_months = getMonthsList();
                    $period_quarters = array("First", "Second", "Third", "Fourth");
                    $option_accounts = "<option value='' selected disabled>-select-</option>";
                    $option_accounts_income=''; $option_accounts_expenses='';$option_accounts_cost_of_goods = '';
                    foreach ($accounts as $account) {
                    $value=$account->id.'~'.$account->name.'~'.$account->type.'~'.$account->sub_account_of;
                    if($account->type == 'Income'){
                    $option_accounts_income .= "<option value='$value' data-subtext='$account->type'>$account->name</option>";
                    } 
                    else if($account->type == 'Expense') $option_accounts_expenses .= "<option value='$value' data-subtext='$account->type'>$account->name</option>";
                    else $option_accounts_cost_of_goods .= "<option value='$value' data-subtext='$account->type'>$account->name</option>";
                    }
                    $option_accounts .= "<optgroup label='Income'>" . $option_accounts_income . "</optgroup>
                    <optgroup label='Expenses'>" . $option_accounts_expenses . "</optgroup>";

                    $new_accn_arr = count(explode(',', $budget->accounts));
                    @endphp

                    <div class="table-responsive" id='budget_table'></div>
                </div>
            </div>

            <br />
            <div class='row'>
                <div class='col-md-9'>
                </div>
                <div class='col-md-3'>
                    <button type="submit" id='reset' class="btn btn-rounded waves-effect waves-light"
                        title='Clear all fields.'><i class="fa fa-undo"></i> Clear</button>
                    <button class='btn btn-rounded btn-primary pull-right' type='submit' id='budget_action'
                        name='budget_action'>Create Budget</button>
                </div>
            </div>
            <input type="hidden" name="accountsNumber" id="accountsNumber" />
            {{ Form::close() }}
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script src="{{ asset('elite/bower_components/bootstrap-datepicker/bootstrap-datepicker.min.js') }}"></script>
<script src="{{ asset('js/streamline_functions.js') }}"></script>
<script src="{{ asset('elite/bower_components/bootstrap-select/bootstrap-select.min.js') }}"></script>
<script type = "text/javascript" >
    $(function() {
        var budget = <?php echo json_encode($budget->accounts, JSON_HEX_TAG) ?>;
        var period_input = <?php echo json_encode($budget->period, JSON_HEX_TAG) ?>;
        var response = null;
        $('#period_start').datepicker({
            autoclose: true,
            todayHighlight: true,
            format: 'yyyy-mm-dd',
            minDate: '-1y',
            maxDate: '+1y',
        });
        if (period_input == "months") {
            $("#divPeriodMonths").show();
            $("#divStartMonth").show();

            $("#divPeriodQuarters").hide();
            $("#divStartQuarter").hide();

            $("#divPeriodYears").hide();
            $("#divStartYear").hide();

            var month_selected = parseInt(new Date({!! json_encode($budget->period_start) !!}).getMonth());
            var year = parseInt(new Date({!! json_encode($budget->period_start) !!}).getFullYear());
            var period_count_months = {!! json_encode($budget->period_count) !!};
            if (month_selected > 0 && period_count_months > 0) {
                var first_col = "", second_col = "Account", end_col = "Budget Total", start_index = month_selected, months_data = [];
                for (let i=0; i < period_count_months; i++){
                    let col_data = months[start_index] + '-' +year;
                    months_data.push(col_data);
                    start_index++;
                    if (start_index > 11){
                        start_index = 0;
                        year++;
                    }

                }

                var columns = [first_col, second_col];
                columns.push.apply(columns, months_data);
                columns.push(end_col);

                response = {
                    "columns": columns,
                    "data": []
                };
            }

            if (response != null) {
                formDataTable(response);
            }
        } else if (period_input == "quarters") {
            $("#divPeriodMonths").hide();
            $("#divStartMonth").hide();

            $("#divPeriodQuarters").show();
            $("#divStartQuarter").show();

            $("#divPeriodYears").hide();
            $("#divStartYear").hide();
            var month = parseInt(new Date(<?php echo json_encode($budget->period_start) ?>).getMonth());
            var year = parseInt(new Date(<?php echo json_encode($budget->period_start) ?>).getFullYear());
            var quarter_selected =Math.floor((month + 3) / 3);
            var period_count_quarters = {!! json_encode($budget->period_count) !!};
            if (quarter_selected > 0 && period_count_quarters > 0) {
                var first_col = ""
                var second_col = "Account"
                var end_col = "Budget Total"

                var start_index = quarter_selected - 1, quarters_data = [];
                for (let i=0; i < period_count_quarters; i++){
                    let col_data = year +'(' + quarters[start_index] + ')';
                    quarters_data.push(col_data);
                    start_index++;
                    if (start_index > 3){
                        start_index = 0;
                        year++;
                    }

                }

                var columns = [first_col, second_col];
                columns.push.apply(columns, quarters_data);
                columns.push(end_col);

                response = {
                    "columns": columns,
                    "data": []
                };
            }

            if (response != null) {
                formDataTable(response);
            }
        } else if (period_input == "years") {
            $("#divPeriodMonths").hide();
            $("#divStartMonth").hide();

            $("#divPeriodQuarters").hide();
            $("#divStartQuarter").hide();

            $("#divPeriodYears").show();
            $("#divStartYear").show();
            var year_selected = parseInt(new Date(<?php echo json_encode($budget->period_start) ?>).getFullYear());
            var period_count_years = {!! json_encode($budget->period_count) !!};
            let sec = parseInt(year_selected.toString().substr(-2));
            if (year_selected > 0 && period_count_years > 0) {
                var first_col = ""
                var second_col = "Account"
                var end_col = "Budget Total"

                var years_data = [];
                for (var i = 0; i < period_count_years; i++) {
                    let col_data = year_selected + i + '/' + ++sec;
                    years_data.push(col_data);
                }

                var columns = [first_col, second_col];
                columns.push.apply(columns, years_data);
                columns.push(end_col);

                response = {
                    "columns": columns,
                    "data": []
                };
            }

            if (response != null) {
                formDataTable(response);
            }
        } else {
            $("#divPeriodMonths").hide();
            $("#divStartMonth").hide();

            $("#divPeriodQuarters").hide();
            $("#divStartQuarter").hide();

            $("#divPeriodYears").hide();
            $("#divStartYear").hide();
        }

    });


$("#period").change(function() {
    var period_selected = $(this).children("option:selected").val();

    if (period_selected == "months") {
        $("#divPeriodMonths").show();
        $("#divStartMonth").show();

        $("#divPeriodQuarters").hide();
        $("#divStartQuarter").hide();

        $("#divPeriodYears").hide();
        $("#divStartYear").hide();
    } else if (period_selected == "quarters") {
        $("#divPeriodMonths").hide();
        $("#divStartMonth").hide();

        $("#divPeriodQuarters").show();
        $("#divStartQuarter").show();

        $("#divPeriodYears").hide();
        $("#divStartYear").hide();
    } else if (period_selected == "years") {
        $("#divPeriodMonths").hide();
        $("#divStartMonth").hide();

        $("#divPeriodQuarters").hide();
        $("#divStartQuarter").hide();

        $("#divPeriodYears").show();
        $("#divStartYear").show();
    } else {
        $("#divPeriodMonths").hide();
        $("#divStartMonth").hide();

        $("#divPeriodQuarters").hide();
        $("#divStartQuarter").hide();

        $("#divPeriodYears").hide();
        $("#divStartYear").hide();
    }
});


var months = <?php echo json_encode($period_months) ?>;
$("#period_start, #period_count_months").change(function() {
    var month_selected = parseInt(new Date($("#period_start").val()).getMonth());
    var period_count_months = parseInt($("#period_count_months").val());
    var year = parseInt(new Date($("#period_start").val()).getFullYear());

    var response = null;
    if (month_selected > 0 && period_count_months > 0 && period_count_months < 13) {
        var first_col = "#", second_col = "Account", end_col = "Budget Total", start_index = month_selected, months_data =[];
        for (let i=0; i < period_count_months; i++){
            let col_data = months[start_index] + '-' +year;
            months_data.push(col_data);
            start_index++;
            if (start_index > 11){
                start_index = 0;
                year++;
            }

        }

        var columns = [first_col, second_col];
        columns.push.apply(columns, months_data);
        columns.push(end_col);

        response = {
            "columns": columns,
            "data": []
        };
    } else {
        if (period_count_months > 12) alert('Please ensure that the Number of Months is utmost 12');
        else if (period_count_months < 1) alert('Please ensure that the Number of Months is atleast 1');
    }

    if (response != null) {
        formDataTable(response);
    }
});


var quarters = <?php echo json_encode($period_quarters) ?>;
$("#period_start, #period_count_quarters").change(function() {
    var month = parseInt(new Date($("#period_start").val()).getMonth());
    var year = parseInt(new Date($("#period_start").val()).getFullYear());
    var quarter_selected =Math.floor((month + 3) / 3);
    var period_count_quarters = parseInt($("#period_count_quarters").val());

    var response = null;
    if (quarter_selected > 0 && period_count_quarters > 0 && period_count_quarters <= 20) {
        var first_col = "#"
        var second_col = "Account"
        var end_col = "Budget Total"

        var start_index = quarter_selected - 1, quarters_data = [];
        for (let i=0; i < period_count_quarters; i++){
            let col_data = year +'(' + quarters[start_index] + ')';
            quarters_data.push(col_data);
            start_index++;
            if (start_index > 3){
                start_index = 0;
                year++;
            }

        }

        var columns = [first_col, second_col];
        columns.push.apply(columns, quarters_data);
        columns.push(end_col);

        response = {
            "columns": columns,
            "data": []
        };
    } else {
        if (period_count_quarters > 20) alert('Please ensure that the Number of Quarters is utmost 20');
        else if(period_count_quarters < 1) alert('Please ensure that the Number of Quarters is atleast 1');
    }

    if (response != null) {
        formDataTable(response);
    }
});


$("#period_start, #period_count_years").change(function() {
    var year_selected = parseInt(new Date($("#period_start").val()).getFullYear());
    var period_count_years = parseInt($("#period_count_years").val());
    let sec = parseInt(year_selected.toString().substr(-2));

    var response = null;
    if (year_selected > 0 && period_count_years > 0 && period_count_years < 11) {
        var first_col = "#"
        var second_col = "Account"
        var end_col = "Budget Total"

        var years_data = [];
        for (var i = 0; i < period_count_years; i++) {
            let col_data = year_selected + i + '/' + ++sec;
            years_data.push(col_data);
        }

        var columns = [first_col, second_col];
        columns.push.apply(columns, years_data);
        columns.push(end_col);

        response = {
            "columns": columns,
            "data": []
        };
    } else {
        if (period_count_years > 10) alert('Please ensure that the Number of Years is utmost 10');
        else if (period_count_years < 1) alert('Please ensure that the Number of Years is atleast 1');
    }

    if (response != null) {
        formDataTable(response);
    }
});


var colLength = 0;
var wrapper;
var footer_wrapper
/**
 * Dynamic table based on https://stackoverflow.com/questions/50544381/create-a-table-dynamically-in-a-div
 */
function formDataTable(response) {
    var allcolumns = response.columns;
    var allData = response.data;
    colLength = allcolumns.length;
    var size = parseInt(<?php echo json_encode($budget->period_count, JSON_HEX_TAG) ?>);
    var new_entries = JSON.parse( <?php echo json_encode($budget->entries) ?> );
    var income_options = new_entries.filter(function(item) {
        return item.type == "Income";
    });
    var expense_options = new_entries.filter(function(item) {
        return item.type == "Expense";
    });
    var cost_of_goods_options = new_entries.filter(function(item) {
        return item.type == "Cost Of Goods";
    });
    // Unlike innerHTML, insertAdjacentHTML doesn't overwrite content. It will insert strings:
    // - in front of an element.........: "beforebegin" .insertAdjacentHTML("beforeBegin", ...) //$('...').before(...)
    // - inside an element as 1st child.: "afterbegin" .insertAdjacentHTML("afterBegin", ...) //$('...').prepend(...)
    // - inside an element as last child: "beforeend" .insertAdjacentHTML("beforeEnd", ...) //$('...').append(...)
    // - behind an element..............: "afterend" .insertAdjacentHTML("afterEnd", ...) //$('...').after(...)


    // Start
    var table = '';
    var tableStart = `<table class="table color-bordered-table success-bordered-table">`
    table += tableStart


    // Header
    var tHeadStart = `<thead><tr>`
    var tHeadRows = '';
    // Build rows with Template Literals
    for (let i = 0; i < colLength; i++) {
        tHeadRows += `<th>${allcolumns[i]}</th>`
    }
    var tHeadEnd = `</tr></thead>`
    var header = tHeadStart + tHeadRows + tHeadEnd;
    table += header


    // Body
    var tBodyStart = `<tbody class='input_fields_wrap'>`
    //Income
    let income_data = '',
        total_income = '',
        budget_total_income = 0,
        row_counter = 0;
    if (income_options.length > 0) {
        income_data = `<tbody class='input_fields_wrap_income'><tr><td colspan='${colLength}'><h5><strong>Income</strong></h5></td></tr>`;
        for (let j = 0; j < income_options.length; j++) {
            var tBodyRow = `<tr class='entry_rows' id='${row_counter}'>`
            // Build rows with Template Literals
            for (let i = 0; i < colLength; i++) {
                let tBodyRowData = ``

                // Checkboxes
                if (i == 0) {
                    let del = (j == 0)? '':'<button onclick="deleteRow(this)" class="btn btn-sm btn-rounded btn-danger" title="Delete this row" style="color: white;" type="button"><i class="fa fa-trash"></i></button>'
                    tBodyRowData = `
                    <td>
                        ${del}
                    </td>`
                }
                // Account
                else if (i == 1) {
                    let value = income_options[j].account_id + '~' + income_options[j].name + '~' + income_options[j].type + '~' + income_options[j].sub_account;
                    let option = `<option value='${value}'>${income_options[j].name } (${income_options[j].type})</option>`,
                        list_options = <?php echo json_encode($option_accounts_income) ?>;
                    let dropdown = list_options.replace(option, '');
                    tBodyRowData = `
                        <td>
                            <select data-live-search="true" data-header="Select Income account" data-show-subtext="true" name='account_id_row_${j}' id='account_${j}_${i}' data-size="5" data-container="body" class='item_select selectpicker' required>
                                <option value='${value}' data-subtext='${income_options[j].type}' selected>${income_options[j].name} </option> ${dropdown}
                            </select>                                
                        </td>`

                }
                // Budget Total
                else if (i == colLength - 1) {
                    tBodyRowData = `
                <td>
                    <div class='form-group'>
                        <div class='controls'>
                            <input type='text' name='budget_total_row_${j}' style='min-width: 180px !important;' id='budget_total_${row_counter}_${i}' class='form-control' readonly>
                        </div>
                    </div>
                </td>`
                }
                // Budget Entries
                else {
                    if (i == colLength - 2) {
                        tBodyRowData = `
                <td>
                    <div class='input-group'>                        
                            <input type='number' style='min-width: 180px !important;' name='budget_entry_row_${row_counter}[]' id='budget_entry_${row_counter}_${i}'  onchange="calculateBudgetTotals()" value ='${income_options[j].account_entries[i-2]}'  class='form-control compulsory required budget_entry column_${i}' required min='0'>                        
                    </div>
                </td>`

                    } else {
                        tBodyRowData = `
                <td>
                    <div class='input-group'>                        
                            <input type='number' name='budget_entry_row_${row_counter}[]' style='min-width: 180px !important;' id='budget_entry_${row_counter}_${i}' data-cell='budget_entry_${row_counter}_${i}' value ='${income_options[j].account_entries[i-2]}'  class='form-control compulsory required budget_entry column_${i}' onchange="showCopyAcross(this)" required min='0'>
                        <div id='show_${row_counter}_${i}' class='input-group-append' style='display:none;'>
                            <span class="input-group-text">                               
                                    <a href='javascript:void(0);' title='Click to copy cell value across row' data-href='budget_entry_${row_counter}_${i}' onclick='copyAcrossRow(this)'>
                                        <i class="fa fa-angle-right fa-2x" Style='margin-left: -2px; z-index: 2;' aria-hidden='true'></i>
                                    </a>                                
                            </span>
                        </div>
                    </div>
                </td>`
                    }
                }
                tBodyRow += tBodyRowData
            }
            row_counter++;
            tBodyRow += `</tr>`;
            income_data += tBodyRow;
        }
        total_income = `<tr><td colspan='${colLength}'><a data-section="input_fields_wrap_income" class="btn btn-rounded btn-info" onclick='add_row(this)' role="button" aria-pressed="true">Add Income Row</a></td></tr><tr>`
        for (let i = 0; i < colLength; i++) {
            let tBodyRowData = ``

            // Checkboxes
            if (i == 0) {
                tBodyRowData = `<td></td>`
            }
            // Account
            else if (i == 1) {
                tBodyRowData = `
                <td class="font-weight-bold">
                    <div class='form-group'>
                        <div class='controls' style='padding: 10px 5px !important; font-size: 14px; color: #565656;'>
                            Income Total
                        </div>
                    </div>
                </td>`

            }
            // Budget Total
            else if (i == colLength - 1) {
                tBodyRowData = `
                <td>
                    <div class='form-group'>
                        <div class='controls'>
                            <input type='text' name='income_total' id='income_total' class='form-control' readonly>
                        </div>
                    </div>
                </td>`
            }
            // Budget Entries
            else {
                tBodyRowData = `
                <td>
                    <div class='form-group'>
                        <div class='controls'>
                            <input type='text' name='income_column_total[]' id='income_column_total_${i}' class='form-control' readonly>
                        </div>
                    </div>
                </td>`
            }
            total_income += tBodyRowData
        }
        total_income += `</tr>`;

    }

    //Expenses
    let expense_data = '',
        total_expense = '';
    if (expense_options.length > 0) {
        expense_data = `<tbody class='input_fields_wrap_expense'><tr><td colspan='${colLength}'><h5><strong>Expenses</strong></h5></td></tr>`;
        for (let j = 0; j < expense_options.length; j++) {
            var tBodyRow = `<tr class='entry_rows' id='${row_counter}'>`
            // Build rows with Template Literals
            for (let i = 0; i < colLength; i++) {
                let tBodyRowData = ``

                // Checkboxes
                if (i == 0) {
                    let del = (j == 0)? '':'<button onclick="deleteRow(this)" class="btn btn-sm btn-rounded btn-danger" title="Delete this row" style="color: white;" type="button"><i class="fa fa-trash"></i></button>'
                    tBodyRowData = `
                    <td>
                        ${del}
                    </td>`
                }
                // Account
                else if (i == 1) {
                    let value = expense_options[j].account_id + '~' + expense_options[j].name + '~' + expense_options[j].type + '~' + expense_options[j].sub_account;
                    let option = `<option value='${value}'>${expense_options[j].name } (${expense_options[j].type})</option>`,
                        list_options = <?php echo json_encode($option_accounts_expenses) ?>;
                    let dropdown = list_options.replace(option, '');
                    tBodyRowData = `
                        <td>
                            <select data-live-search="true" data-header="Select Expense Account" data-show-subtext="true" name='account_id_row_${row_counter}' data-size="5"data-container="body" style='min-width: 180px !important;' id='account_${row_counter}_${i}' class='item_select selectpicker' required>
                                <option value='${value}' data-subtext='${expense_options[j].type}' selected>${expense_options[j].name} </option>${dropdown}
                            </select>
                        </td>`

                }
                // Budget Total
                else if (i == colLength - 1) {
                    tBodyRowData = `
                <td>
                    <div class='form-group'>
                        <div class='controls'>
                            <input type='text' name='budget_total_row_${row_counter}' style='min-width: 180px !important;' id='budget_total_${row_counter}_${i}' class='form-control' readonly>
                        </div>
                    </div>
                </td>`
                }
                // Budget Entries
                else {
                    if (i == colLength - 2) {
                        tBodyRowData = `
                <td>
                    <div class='input-group'>                        
                            <input type='number' style='min-width: 180px !important;' name='budget_entry_row_${row_counter}[]'  onchange="calculateBudgetTotals()" id='budget_entry_${row_counter}_${i}' value ='${expense_options[j].account_entries[i-2]}'  class='form-control compulsory required budget_entry expense_column_${i}' required min='0'>                        
                    </div>
                </td>`

                    } else {
                        tBodyRowData = `
                <td>
                    <div class='input-group'>                        
                            <input type='number' name='budget_entry_row_${row_counter}[]' style='min-width: 180px !important;' id='budget_entry_${row_counter}_${i}' data-cell='budget_entry_${row_counter}_${i}' value ='${expense_options[j].account_entries[i-2]}'  class='form-control compulsory required budget_entry expense_column_${i}' onchange="showCopyAcross(this)" required min='0'>
                        <div id='show_${row_counter}_${i}' class='input-group-append' style='display:none;'>
                            <span class="input-group-text">                               
                                    <a href='javascript:void(0);' title='Click to copy cell value across row' data-href='budget_entry_${row_counter}_${i}' onclick='copyAcrossRow(this)'>
                                        <i class="fa fa-angle-right fa-2x" Style='margin-left: -2px; z-index: 2;' aria-hidden='true'></i>
                                    </a>                                
                            </span>
                        </div>
                    </div>
                </td>`
                    }
                }
                tBodyRow += tBodyRowData
            }
            tBodyRow += `</tr>`;
            expense_data += tBodyRow;
            row_counter++;
        }
        total_expense = `<tr><td colspan='${colLength}'><a data-section="input_fields_wrap_expense" class="btn btn-rounded btn-info" role="button"  onclick='add_row(this)' aria-pressed="true">Add Expense Row</a></td></tr><tr>`
        for (let i = 0; i < colLength; i++) {
            let tBodyRowData = ``

            // Checkboxes
            if (i == 0) {
                tBodyRowData = `<td></td>`
            }
            // Account
            else if (i == 1) {
                tBodyRowData = `
                <td class="font-weight-bold">
                    <div class='form-group'>
                        <div class='controls' style='padding: 10px 5px !important; font-size: 14px; color: #565656;'>
                             Total Expenses
                        </div>
                    </div>
                </td>`

            }
            // Budget Total
            else if (i == colLength - 1) {
                tBodyRowData = `
                <td>
                    <div class='form-group'>
                        <div class='controls'>
                            <input type='text' name='expense_total' id='expense_total' class='form-control' readonly>
                        </div>
                    </div>
                </td>`
            }
            // Budget Entries
            else {
                tBodyRowData = `
                <td>
                    <div class='form-group'>
                        <div class='controls'>
                            <input type='text' name='expense_column_total[]' id='expense_column_total_${i}' class='form-control' readonly>
                        </div>
                    </div>
                </td>`
            }
            total_expense += tBodyRowData
        }
        total_expense += `</tr>`;
    }

    //Cost of Goods
    let cost_of_goods_data = '',
        total_cost_of_goods = '';
    if (cost_of_goods_options.length > 0) {
        cost_of_goods_data = `<tbody class='input_fields_wrap_cost_of_goods'><tr><td colspan='${colLength}'><h5><strong>Cost of Goods</strong></h5></td></tr>`;
        for (let j = 0; j < cost_of_goods_options.length; j++) {
            var tBodyRow = `<tr class='entry_rows' id='${row_counter}'>`
            // Build rows with Template Literals
            for (let i = 0; i < colLength; i++) {
                let tBodyRowData = ``

                // Checkboxes
                if (i == 0) {
                    let del = (j == 0)? '':'<button onclick="deleteRow(this)" class="btn btn-sm btn-rounded btn-danger" title="Delete this row" style="color: white;" type="button"><i class="fa fa-trash"></i></button>'
                    tBodyRowData = `
                    <td>
                        ${del}
                    </td>`
                }
                // Account
                else if (i == 1) {
                    let value = cost_of_goods_options[j].account_id + '~' + cost_of_goods_options[j].name + '~' + cost_of_goods_options[j].type + '~' + cost_of_goods_options[j].sub_account;
                    let option = `<option value='${value}'>${cost_of_goods_options[j].name } (${cost_of_goods_options[j].type})</option>`,
                        list_options = <?php echo json_encode($option_accounts_cost_of_goods) ?>;
                    let dropdown = list_options.replace(option, '');
                    tBodyRowData = `
                    <td>                   
                        <select data-live-search="true" data-header="Select Cost of Goods Account" data-show-subtext="true" name='account_id_row_${row_counter}' data-size="5" data-container="body" style='min-width: 180px !important;' id='account_${row_counter}_${i}' class='item_select selectpicker' required>
                            <option value='${value}' data-subtext='${cost_of_goods_options[j].type}' selected>${cost_of_goods_options[j].name} </option>${dropdown}
                        </select>                            
                    </td>`

                }
                // Cost of Goods Total
                else if (i == colLength - 1) {
                    tBodyRowData = `
                <td>
                    <div class='form-group'>
                        <div class='controls'>
                            <input type='text' name='budget_total_row_${row_counter}' style='min-width: 180px !important;' id='budget_total_${row_counter}_${i}' class='form-control' readonly>
                        </div>
                    </div>
                </td>`
                }
                // Budget Entries
                else {
                    if (i == colLength - 2) {
                        tBodyRowData = `
                <td>
                    <div class='input-group'>                        
                            <input type='number' style='min-width: 180px !important;'  onchange="calculateBudgetTotals()" name='budget_entry_row_${row_counter}[]' id='budget_entry_${row_counter}_${i}' value ='${cost_of_goods_options[j].account_entries[i-2]}'  class='form-control compulsory required budget_entry cost_of_goods_column_${i}' required min='0'>                        
                    </div>
                </td>`

                    } else {
                        tBodyRowData = `
                <td>
                    <div class='input-group'>                        
                            <input type='number' name='budget_entry_row_${row_counter}[]' style='min-width: 180px !important;' id='budget_entry_${row_counter}_${i}' data-cell='budget_entry_${row_counter}_${i}' value ='${cost_of_goods_options[j].account_entries[i-2]}'  class='form-control compulsory required budget_entry cost_of_goods_column_${i}' onchange="showCopyAcross(this)" required min='0'>
                        <div id='show_${row_counter}_${i}' class='input-group-append' style='display:none;'>
                            <span class="input-group-text">                               
                                    <a href='javascript:void(0);' title='Click to copy cell value across row' data-href='budget_entry_${row_counter}_${i}' onclick='copyAcrossRow(this)'>
                                        <i class="fa fa-angle-right fa-2x" Style='margin-left: -2px; z-index: 2;' aria-hidden='true'></i>
                                    </a>                                
                            </span>
                        </div>
                    </div>
                </td>`
                    }
                }
                tBodyRow += tBodyRowData
            }
            tBodyRow += `</tr>`;
            cost_of_goods_data += tBodyRow;
            row_counter++;
        }
        total_cost_of_goods = `<tr><td colspan='${colLength}'><a data-section="input_fields_wrap_cost_of_goods" class="btn btn-rounded btn-info" role="button"  onclick='add_row(this)' aria-pressed="true">Add Cost of Goods Row</a></td></tr><tr>`
        for (let i = 0; i < colLength; i++) {
            let tBodyRowData = ``

            // Checkboxes
            if (i == 0) {
                tBodyRowData = `
                    <td></td>`
            }
            // Account
            else if (i == 1) {
                tBodyRowData = `
                <td class="font-weight-bold">
                    <div class='form-group'>
                        <div class='controls' style='padding: 10px 5px !important; font-size: 14px; color: #565656;'>
                             Cost of Goods Total
                        </div>
                    </div>
                </td>`

            }
            // Cost of Goods Total
            else if (i == colLength - 1) {
                tBodyRowData = `
                <td>
                    <div class='form-group'>
                        <div class='controls'>
                            <input type='text' name='cost_of_goods_total' id='cost_of_goods_total' class='form-control' readonly>
                        </div>
                    </div>
                </td>`
            }
            // Budget Entries
            else {
                tBodyRowData = `
                <td>
                    <div class='form-group'>
                        <div class='controls'>
                            <input type='text' name='cost_of_goods_column_total[]' id='cost_of_goods_column_total_${i}' class='form-control' readonly>
                        </div>
                    </div>
                </td>`
            }
            total_cost_of_goods += tBodyRowData
        }
        total_cost_of_goods += `</tr>`;
    }

    let total_projection = `<tr>`
    for (let i = 0; i < colLength; i++) {

        let tBodyRowData = ``

        // Checkboxes
        if (i == 0) {
                tBodyRowData = `<td></td>`
        }
            // Account
        else if (i == 1) {
                tBodyRowData = `
                <td class="font-weight-bold">
                    <div class='form-group'>
                        <div class='controls' style='padding: 10px 5px !important; font-size: 14px; color: #565656;'>
                            Projected Net Income
                        </div>
                    </div>
                </td>`

        }
        // Projected Total
        else if (i == colLength - 1) {
            tBodyRowData = `
                    <td>                        
                        <div class='form-group'>
                            <div class='controls'>
                                <input type='text' name='projected_total' id='projected_total' class='form-control' readonly>
                            </div>
                        </div>                     
                    </td>`
        }
        // Projected Entries
        else {
            tBodyRowData = `
                    <td>
                        <div class='form-group'>
                            <div class='controls'>
                                <input type='text' name='projected_column_total[]' id='projected_column_total_${i}' class='form-control' readonly>
                            </div>
                        </div>
                    </td>`

        }
        total_projection += tBodyRowData
    }
    total_projection += `</tr>`;

    var tBodyEnd = `</tbody>`
    var body = income_data + tBodyEnd + total_income + cost_of_goods_data + tBodyEnd + total_cost_of_goods + expense_data + tBodyEnd + total_expense + total_projection;
    table += body


    // Footer
    var tFooterStart = `<tfoot class="footer_input_fields_wrap"><tr>`
    var tFooterRows = ``;
    // Build rows with Template Literals
    for (let i = 0; i < colLength; i++) {
        tFooterRows += `<th>${allcolumns[i]}</th>`
    }
    var tFooterEnd = `</tr></tfoot>`
    var footer = tFooterStart + tFooterRows + tFooterEnd;
    table += footer


    // End
    var tableEnd = `</table>`
    table += tableEnd


    // Display
    $("#budget_table").empty(); // clear the div
    $("#budget_table").append(table);$(".selectpicker").selectpicker('refresh');
    // Init Wrappers
    wrapper = $(".input_fields_wrap"); // Fields wrapper
    footer_wrapper = $(".footer_input_fields_wrap");
    calculateBudgetTotals();
}


var max_rows = 500;
var x = <?php echo json_encode($new_accn_arr) ?>; // initial row count

// on add button click
function add_row(data) {
    // e.preventDefault();
    var cell = '.' + data.getAttribute('data-section'), dropdown ='', header ='', column_class = '';
    wrapper = $(cell);
    if (data.getAttribute('data-section') == 'input_fields_wrap_income') {
        dropdown = <?php echo json_encode($option_accounts_income) ?>;
        header = 'Select Income Account';
        column_class = 'column';
    } 
    else if(data.getAttribute('data-section') == 'input_fields_wrap_expense') {
        dropdown = <?php echo json_encode($option_accounts_expenses) ?>;
        header = 'Select Expense Account';
        column_class = 'expense_column';
    } 
    else {
        dropdown = <?php echo json_encode($option_accounts_cost_of_goods) ?>;
        header = 'Select Cost of Goods Account';
        column_class = 'cost_of_goods_column';
    }
    if (x < max_rows) {
        var tBodyRow = ``;
        for (let i = 0; i < colLength; i++) {
            let tBodyRowData = ``

            if (i == 0) {
                tBodyRowData = `
                    <td>
                        <button onclick="deleteRow(this)" class="btn btn-sm btn-rounded btn-danger" title="Delete this row" style="color: white;" type="button"><i class="fa fa-trash"></i></button>
                    </td>`
            } else if (i == 1) {
                tBodyRowData = `
                    <td>
                        <div class='control-group'>
                            <div class='btn-group'>
                                <select data-live-search="true" data-header="${header}" data-show-subtext="true" name='account_id_row_${x}' data-size="5" data-container="body" style='min-width: 180px !important;' id='account_${x}_${i}' class='item_select selectpicker' required>
                                    <option value='' selected disabled>-select-</option>${dropdown}
                                </select>
                            </div>
                        </div>
                    </td>`
            } else if (i == colLength - 1) {
                tBodyRowData = `
                    <td>
                        <div class='form-group'>
                            <div class='controls'>
                                <input type='text' style='min-width: 180px !important;' name='budget_total[]' id='budget_total_${x}_${i}' class='form-control' readonly>
                            </div>
                        </div>
                    </td>`
            } else {
                if (i == colLength - 2) {
                    tBodyRowData = `
                <td>
                    <div class='input-group'>                        
                            <input type='number' name='budget_entry_row_${x}[]' style='min-width: 180px !important;' id='budget_entry_${x}_${i}' value ='0'  onchange="calculateBudgetTotals()" class='form-control compulsory required budget_entry ${column_class}_${i}' required min='0'>                        
                    </div>
                </td>`

                } else {
                    tBodyRowData = `
                <td>
                    <div class='input-group'>                        
                            <input type='number' name='budget_entry_row_${x}[]' style='min-width: 180px !important;' id='budget_entry_${x}_${i}' data-cell='budget_entry_${x}_${i}' value ='0'  class='form-control compulsory required budget_entry ${column_class}_${i}' onchange="showCopyAcross(this)" required min='0'>
                        <div id='show_${x}_${i}' class='input-group-append' style='display:none;'>
                            <span class="input-group-text">                               
                                    <a href='javascript:void(0);' title='Click to copy cell value across row' data-href='budget_entry_${x}_${i}' onclick='copyAcrossRow(this)'>
                                        <i class="fa fa-angle-right fa-2x" Style='margin-left: -2px; z-index: 2;' aria-hidden='true'></i>
                                    </a>                                
                            </span>
                        </div>
                    </div>
                </td>`
                }
            }

            tBodyRow += tBodyRowData
        }

        $(wrapper).append(`<tr class='entry_rows' id='${x}'>` + tBodyRow + `</tr>`); // add row
        $(".selectpicker").selectpicker('refresh');
        x++;
    }
}


// on calculate totals button click
$("#calc_totals").click(function(e) {
    e.preventDefault();

    calculateBudgetTotals()
});


// on remove items button click
$("#remove_items").click(function(e) {
    $("input.chk").each(function() {
        if ($(this).is(":checked")) {
            $(this).parent('td').parent('tr').remove();
        }
    })
});

/* This method will delete a row */
function deleteRow(ele){
    ele.parentNode.parentNode.remove();
    calculateBudgetTotals();
}


function calculateBudgetTotals() {
    let projected_columnTotal =0, columnTotal_expense = [], columnTotal_income = [],
      columnTotal_cost_of_goods=[];
    var table_rows = document.getElementById("budget_table").getElementsByClassName('entry_rows');
    var currency_code = "<?php echo getCurrencyCode(); ?>";
    for (let x = 0; x < table_rows.length; x++) {
        var budget_total = 0;
        var row_id = document.getElementById("budget_table").getElementsByClassName('entry_rows')[x].id;
        for (let i = 0; i < colLength - 1; i++) {
            var budget = $("#budget_entry_" + row_id + "_" + i).val()
            if (budget != null) {
                budget_total += Number(budget);
            }
        }
        $("#budget_total_" + row_id + "_" + (colLength - 1)).val(ugandan_shillings(budget_total, currency_code));

    }
    // Column Totals-income
    let income_total = 0;
    for (var j = 2; j < colLength - 1; j++) {
        var columnTotal = 0;
        var arr = document.getElementsByClassName('column_' + j);
        for (var i = 0; i < arr.length; i++) {
            if (parseInt(arr[i].value)) columnTotal += Number(arr[i].value);
        }
        income_total += columnTotal;columnTotal_income.push(columnTotal);
        $('#income_column_total_' + j).val(ugandan_shillings(columnTotal, currency_code));
    }
    $('#income_total').val(ugandan_shillings(income_total, currency_code));

    //// Column Totals-Expenses
    let expense_total = 0;
    for (var j = 2; j < colLength - 1; j++) {
        var expenseTotal = 0;
        var arr = document.getElementsByClassName('expense_column_' + j);
        for (var i = 0; i < arr.length; i++) {
            if (parseInt(arr[i].value)) expenseTotal += Number(arr[i].value);
        }
        expense_total += expenseTotal;columnTotal_expense.push(expenseTotal)
        $('#expense_column_total_' + j).val(ugandan_shillings(expenseTotal, currency_code));
    }
    $('#expense_total').val(ugandan_shillings(expense_total, currency_code));
    
    //// Column Totals-Cost of Goods
    let cost_of_goods_total = 0;
    for (var j = 2; j < colLength - 1; j++) {
        var cost_of_goodsTotal = 0;
        var arr = document.getElementsByClassName('cost_of_goods_column_' + j);
        for (var i = 0; i < arr.length; i++) {
            if (parseInt(arr[i].value)) cost_of_goodsTotal += Number(arr[i].value);
        }
        cost_of_goods_total += cost_of_goodsTotal;
        $('#cost_of_goods_column_total_' + j).val(ugandan_shillings(cost_of_goodsTotal, currency_code));
        columnTotal_cost_of_goods.push(cost_of_goodsTotal)
    }
    $('#cost_of_goods_total').val(ugandan_shillings(cost_of_goods_total, currency_code));

    let projected_total = income_total - expense_total - cost_of_goods_total;
    $('#projected_total').val(ugandan_shillings(projected_total, currency_code));
    if(columnTotal_income.length > 0 || columnTotal_expense.length > 0 || columnTotal_cost_of_goods.length > 0){
    for (var i = 2; i < colLength - 1; i++) {
    if (columnTotal_income.length == columnTotal_expense.length && columnTotal_income.length == columnTotal_cost_of_goods.length) projected_columnTotal = columnTotal_income[i - 2] - columnTotal_expense[i - 2] - columnTotal_cost_of_goods[i-2];
    else projected_columnTotal = (columnTotal_expense.length == 0) ? columnTotal_income[i - 2] : columnTotal_expense[i - 2];
    $('#projected_column_total_' + i).val(ugandan_shillings(projected_columnTotal, currency_code));
    }
    }
}

$("#budget_action").click(function(e) {
    e.preventDefault();calculateBudgetTotals();
    var table_rows = document.getElementById("budget_table").getElementsByClassName('entry_rows'), actual_ids = [];
    for (let x = 0; x < table_rows.length; x++) actual_ids.push(document.getElementById("budget_table").getElementsByClassName('entry_rows')[x].id);
    $('#accountsNumber').val(actual_ids);

    var allInputsProvided = $(".budget_entry,.selectpicker").filter(function() {
        return $.trim($(this).val()).length == 0
    }).length === 0;

    if (allInputsProvided) {
        if (confirm('Are you sure you want to save the budget?') == true)
            $("#budgetForm").submit(); // submit bypassing the jQuery bound event
    } else {
        alert('Please ensure you have filled in all the required fields!');
    }
});



$("#reset").click(function(e) {
    e.preventDefault();
    if (confirm('Are you sure you want to clear all fields?') == true) {
        $("#budgetForm").find(':input').val('');
    }
    calculateBudgetTotals();
});

function copyAcrossRow(data) {
    var cell = data.getAttribute('data-href').split("_");
    var budget_entry_value = $("#budget_entry_" + cell[2] + "_" + cell[3]).val();
    for (let i = Number(cell[3]) + 1; i < colLength - 1; i++) {
        $("#budget_entry_" + cell[2] + "_" + i).val(budget_entry_value);
    }
    $('#show_' + cell[2] + '_' + cell[3]).hide();
    calculateBudgetTotals();
}

function showCopyAcross(data) {
    var cell = data.getAttribute('data-cell').split("_");
    $('#show_' + cell[2] + '_' + cell[3]).show();
    calculateBudgetTotals();
} 
</script>
@endpush