Files
streamline-emr/docker/statistics/Modules/Budgets/Resources/views/budgets/edit.blade.php
T
2025-03-31 03:46:05 +03:00

1153 lines
51 KiB
PHP

@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 class="active"><i class="fa fa-file"></i> {{ __('budgets.budgets') }}</li>
</ol>
</div>
</div>
@include('budgets::budgets.menu')
@include('flash::message')
<div class="row">
<div class="col-md-12">
<div class="white-box">
{{ Form::model($budget, ['method' => 'PUT', 'route' => ['budgets.update', $budget], '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', $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', $budget->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>
<hr />
<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' style="overflow-x:auto;"></div>
</div>
</div>
<br />
<div class='row'>
<div class='col-md-9'>
</div>
<div class='col-md-3'>
<button class="btn btn-rounded waves-effect waves-ripple" title='Clear all fields.'
onclick="resetForm()"><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'>Update Budget</button>
</div>
<input type="hidden" name="accountsNumber" id="accountsNumber" />
</div>
{{ 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 = "", second_col = "Account", end_col = "Budget Total", 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);
// console.log("columns", columns)
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 = "", second_col = "Account", end_col = "Budget Total", 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 year = parseInt(new Date($("#period_start").val()).getFullYear());
var period_count_months = parseInt($("#period_count_months").val());
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 < 21) {
var first_col = "#", second_col = "Account", end_col = "Budget Total", 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 = "#", second_col = "Account", end_col = "Budget Total", 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) {
// console.log(response);
var allcolumns = response.columns;
var allData = response.data;
colLength = allcolumns.length;
var budget_entries = <?php echo json_encode($entries) ?>;
var cell_values = [],
size = parseInt( <?php echo json_encode($budget->period_count, JSON_HEX_TAG) ?>);
for (let i = 0; i < budget_entries.length; i += size) cell_values.push(budget_entries.slice(i, i + size));
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 = '',
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}' data-container="body" data-size="5" style='min-width: 180px !important;' id='account_${j}_${i}' 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;' onchange="calculateBudgetTotals()" name='budget_entry_row_${row_counter}[]' id='budget_entry_${row_counter}_${i}' 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;' onchange="calculateBudgetTotals()" name='budget_entry_row_${row_counter}[]' 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 = ``;
console
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>
<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>
</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}[]' onchange="calculateBudgetTotals()" style='min-width: 180px !important;' id='budget_entry_${x}_${i}' value ='0' 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()
});
/* This method will delete a row */
function deleteRow(ele){
ele.parentNode.parentNode.remove();
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();
}
})
});
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;
$('#expense_column_total_' + j).val(ugandan_shillings(expenseTotal, currency_code));
columnTotal_expense.push(expenseTotal)
}
$('#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);
var allInputsProvided = $(".budget_entry,.selectpicker").filter(function() {
return $.trim($(this).val()).length == 0
}).length === 0;
$('#accountsNumber').val(actual_ids);
if (allInputsProvided) {
if (confirm('Are you sure you want to update this budget?') == true)
$("#budgetForm").submit(); // submit bypassing the jQuery bound event
} else {
alert('Please ensure you have filled in all the required fields!');
}
});
function resetForm() {
// e.preventDefault();
let text = 'Are you sure you want to clear all fields?';
if (confirm(text) == 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