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

1000 lines
42 KiB
PHP
Executable File

@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> {{ __('finance.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::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="" selected>{{ __('budgets.select') }}</option>
<option value="months">{{ __('budgets.months') }}</option>
<option value="quarters">{{ __('budgets.quarters') }}</option>
<option value="years">{{ __('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', '', ['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', '', ['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', '', ['class' => 'form-control compulsory', 'required',
'data-error' => '', 'min' => 1, 'max' => 10]) }}
</div>
</div>
@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>
<hr />
<div class='row'>
<div class='col-md-12'>
@php
$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>";
@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 btn-primary pull-right' type='submit' id='budget_action'
name='budget_action'>Save 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() {
$('#period_start').datepicker({
autoclose: true,
todayHighlight: true,
format: 'yyyy-mm-dd',
minDate: '-1y',
maxDate: '+1y',
});
$("#divPeriodMonths").hide();
$("#divPeriodQuarters").hide();
$("#divPeriodYears").hide();
$("#divStartMonth").hide();
$("#divStartQuarter").hide();
$("#divStartYear").hide();
$("#divCalcTotals").hide();
$("#divRemoveItems").hide();
$("#budget_action").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", months_data =[], start_index = month_selected;
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);
// console.log("columns", columns)
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');
// else if (month_selected < 1) alert('Please add a Start Month');
}
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 = "#", 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 = "#"
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) {
// console.log(response);
var allcolumns = response.columns;
var allData = response.data;
colLength = allcolumns.length;
// 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,
columnTotal_income = [],
row_counter = 0;
income_data = `<tbody class='input_fields_wrap_income'><tr><td colspan='${colLength}'><h5><strong>Income</strong></h5></td></tr>`;
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) {
tBodyRowData = `
<td></td>`
}
// Account
else if (i == 1) {
tBodyRowData = `
<td>
<select data-live-search="true" data-header="Select Income account" data-show-subtext="true" name='account_id_row_${row_counter}' data-size="5" style='min-width: 180px !important;' id='account_${row_counter}_${i}' data-container="body" class='item_select selectpicker' required>
<option value='' selected>-Select- </option> <?php echo json_encode($option_accounts_income) ?>
</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>`
}
// Income 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}' value ='0' class='form-control compulsory required budget_entry column_${i}' onchange="calculateBudgetTotals()" 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 ='0' 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
}
tBodyRow += `</tr>`;
income_data += tBodyRow;
row_counter++;
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 = `<tbody class='input_fields_wrap_expense'><tr><td colspan='${colLength}'><h5><strong>Expenses</strong></h5></td></tr>`;
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) {
tBodyRowData = `
<td></td>`
}
// Account
else if (i == 1) {
tBodyRowData = `
<td>
<select data-live-search="true" data-header="Select Expense account" data-show-subtext="true" name='account_id_row_${row_counter}'data-container="body" data-size="5" style='min-width: 180px !important;' id='account_${row_counter}_${i}' class='item_select selectpicker' required>
<option value='' selected>-Select- </option><?php echo json_encode($option_accounts_expenses) ?> ;
</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>`
}
// Expense 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}' value ='0' class='form-control compulsory required budget_entry expense_column_${i}' onchange="calculateBudgetTotals()" 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 ='0' 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++;
let 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>`
}
// Expense 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>`
}
// Expense entry totals
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 = `<tbody class='input_fields_wrap_cost_of_goods'><tr><td colspan='${colLength}'><h5><strong>Cost of Goods</strong></h5></td></tr>`;
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) {
tBodyRowData = `
<td></td>`
}
// Account
else if (i == 1) {
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-container="body" data-size="5" style='min-width: 180px !important;' id='account_${row_counter}_${i}' class='item_select selectpicker' required>
<option value='' selected>-Select- </option><?php echo json_encode($option_accounts_cost_of_goods) ?> ;
</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>`
}
// Cost of Goods 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}' value ='0' onchange="calculateBudgetTotals()" 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 ='0' 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++;
let 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>`
}
// cost_of_goods entry totals
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);
// Show action buttons
$("#divCalcTotals").show();
$("#divRemoveItems").show();
$("#budget_action").show();
$(".selectpicker").selectpicker('refresh');
// Init Wrappers
wrapper = $(".input_fields_wrap"); // Fields wrapper
footer_wrapper = $(".footer_input_fields_wrap");
calculateBudgetTotals()
}
var max_rows = 500;
var x = 3; // 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" style='min-width: 180px !important;' id='account_${x}_${i}' data-container="body" 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}[]' 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++;
}
}
/* This method will delete a row */
function deleteRow(ele){
ele.parentNode.parentNode.remove();
calculateBudgetTotals();
}
// 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")) {
console.log("found item");
$(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);
$('#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 this budget?') == true)
$("#budgetForm").submit(); // submit bypassing the jQuery bound event
} else {
alert('Please ensure you have filled in all the required fields!');
}
});
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