function get_form_html($form_id, $id)
{
ob_start();
?>
<div id="head_div" style="height: 150px;
width: 320px; background-color: #ECECEC;
border-radius: 5px;margin-left: auto;display: none; ">
</div>
<div style="margin-top: 10px; background-color:transparent;padding-bottom: 30px;">
<style>
div#purchace_items td, div#purchace_items th{
border: 1px solid #21ACD7;
}
div#purchace_items tbody td{
padding: 5px 0 5px 5px;
}
div#purchace_items tbody td input,div#purchace_items tbody td select{
padding: 0;
border: 0;
margin: 0;
height: 100%;
width: 100%;
background-color: transparent;
}
</style>
<input type="text" id="search" placeholder="Enter Search Key here..." style="width: 100%; margin-left: 0px;" onkeyup="search()" />
<style>
img#search{
position: relative;
height: 20px;
width: 20px;
float: right;
top: -29px;
right: 10px;
}
</style>
<img id="search" src="../ui/images/search.png" onclick="search()" />
<div id="purchace_items" style="width: 100%; padding: 10px 0; color: #21ACD7;">
<table id="items_table" style="border-collapse: collapse; width: 100%;
background-color: #fff; border-radius: 10px; color: #21ACD7;">
<thead style="text-align: center;">
<tr status="not_selected">
<th>
#
</th>
<th>
ID
</th>
<th>
ITEM NAME
</th>
<th>
ITEM CODE
</th>
<th style="">
MRP
</th>
<th style="">
UNIT
</th>
<th style="">
PURCHACE RATE
</th>
<th style="">
TAX
</th>
<th style="">
DISCOUNT(%)
</th>
</tr>
</thead>
<tbody style="padding-left: 3px; text-align: center; ">
<?php
$item = new item();
$items = $item->getItems();
$i = 0;
if ($items == NULL || sizeof($items) == 0) {
echo '<tr><td colspan="8"> No Item Found </td></tr>';
} else {
foreach ($items as $item) {
?>
<tr id="<?php
echo $item->id;
?>
" onclick="select_row(this)">
<td style="text-align: center;"><?php
echo ++$i;
?>
</td>
<td id="item_id"><?php
echo 'ITEM-' . $item->id;
?>
</td>
<td id="item_name"><?php
echo $item->item_name;
?>
</td>
<td id="item_code"><?php
echo $item->item_code;
?>
</td>
<td id="mrp"><?php
echo $item->mrp;
?>
</td>
<td id="unit" unit="<?php
echo $item->unit;
?>
"><?php
if ($item->unit == 2) {
echo 'PCS';
} else {
echo 'KGM';
}
?>
</td>
<td id="purchace_rate"><?php
echo $item->purchace_rate;
?>
</td>
<?php
$tax_category = new tax_category();
$tax_category->id = $item->tax_category_id;
$tax_category->getTaxCategory();
?>
<td id="tax_category" tax_category_id="<?php
echo $tax_category->id;
?>
" ><?php
echo $tax_category->tax_category_name;
?>
</td>
<td id="discount_percent"><?php
echo $item->discount_percent;
?>
</td>
</tr>
<?php
}
}
?>
</tbody>
</table>
</div>
</div>
<script type="text/javascript">
function select_row(row) {
var j_row = $(row);
if(j_row.attr('status') == 'selected'){
$('table#items_table tr').attr('status', 'not_selected');
$('table#items_table tr').css('background-color', '#FFF');
$('img#edit').css('display', 'none');
$('img#edit_fade').css('display', 'block');
$('img#delete').css('display', 'none');
$('img#delete_fade').css('display', 'block');
}else{
$('table#items_table tr').attr('status', 'not_selected');
$('table#items_table tr').css('background-color', '#FFF');
j_row.attr('status', 'selected');
j_row.css('background-color', '#C0EFFD');
$('img#edit').css('display', 'block');
$('img#edit_fade').css('display', 'none');
$('img#delete').css('display', 'block');
$('img#delete_fade').css('display', 'none');
}
}
function on_edit_clicked(){
var selected_row = $('tr[status="selected"]');
var item_name = selected_row.find('td#item_name').html();
var id = selected_row.attr('id');
var item_code = selected_row.find('td#item_code').html();
var mrp = selected_row.find('td#mrp').html();
var purchace_rate = selected_row.find('td#purchace_rate').html();
var discount_percent = selected_row.find('td#discount_percent').html();
var tax_category_id = selected_row.find('td#tax_category').attr('tax_category_id');
var unit = selected_row.find('td#unit').attr('unit');
get_form(11, ///item create form
function (html, tools){
$('div#form-body').html(html);
$('div#content-body-action-tools').html(tools);
var form = $('div#form-body').find('form.action_form');
form.attr('operation', 'update');
form.attr('item_id', id);
form.find('input#item_name').val(item_name);
form.find('input#item_code').val(item_code);
form.find('input#mrp').val(mrp);
form.find('input#purchace_rate').val(purchace_rate);
form.find('input#discount_percent').val(discount_percent);
form.find('select#tax_category').find('option#'+tax_category_id).prop('selected', true);
form.find('select#unit').find('option#'+unit).prop('selected', true);
form.find('input[type=submit]').val('UPDATE');
$('div#head_div').html('ID : ITEM-'+id);
$('div#head_div').css('display', 'block');
},
function (message){
$('font#section_heading').empty();
$('div#form-body').empty();
alert(message);
}
);
}
function on_delete_clicked(){
var selected_row = $('tr[status="selected"]');
var id = selected_row.attr('id');
if(confirm('Are you sure you want to delete ITEM-'+id+' ?' )){
var data = {
form_id : 17,
item_id : id
}
delete_form_data(data, function(message) {
get_form(17,
function(html, tools) {
$('div#form-body').html(html);
$('div#content-body-action-tools').html(tools);
}, function(message) {
$('font#section_heading').empty();
$('div#form-body').empty();
alert(message);
});
alert(message);
}, function(message) {
alert(message);
});
}
}
function on_add_clicked(){
get_form(11, ///item create form
function (html, tools){
$('div#form-body').html(html);
$('div#content-body-action-tools').html(tools);
},
function (message){
$('font#section_heading').empty();
$('div#form-body').empty();
alert(message);
}
);
}
function search(){
var search_key = $('input#search').val();
if(search_key !== ''){
console.log("search key "+ search_key);
searchTable(search_key);
}else{
$('#items_table tr').show();
}
}
function searchTable(inputVal)
{
var table = $('#items_table');
table.find('tr').each(function(index, row)
{
var allCells = $(row).find('td');
if(allCells.length > 0)
{
var found = false;
allCells.each(function(index, td)
{
var regExp = new RegExp(inputVal, 'i');
if(regExp.test($(td).text()))
{
found = true;
return false;
}
});
if(found == true)$(row).show();else $(row).hide();
}
});
}
</script>
<?php
$form = ob_get_clean();
return $form;
}
function get_form_html($form_id, $id)
{
ob_start();
?>
<style>
.field_name{
width: 20%;
}
.field{
width: 50%;
}
.field input{
width: 100%;
margin-left: 0px;
}
.field .parent{
padding: 0px 0px;
}
.field select{
width: 100%;
}
</style>
<div id="head_div" style="padding: 5px 0; background-color: #ECECEC; color: #21ACD7;
border-radius: 5px;margin-left: auto; text-align: center; ">
ID : PURCHACE - <input style="padding: 0 0 0 5px;" onchange="load_purchace()" type="number" id="purchace_id" />
</div>
<div style="margin-top: 10px; background-color:transparent;padding-bottom: 100px;">
<form action="#" method="post" onsubmit="return false" class="action_form" operation="update" >
<table style="width:100%;">
<tr>
<td class="field_name">
<font>VENDOR</font>
</td>
<td class="field">
<div class="parent">
<input id="wendor_id" required disabled="disabled" autocomplete="off" style="border: 0;" />
</div>
</td>
</tr>
<tr>
<td class="field_name">
<font>BILL NUMBER</font>
</td>
<td class="field">
<div class="parent">
<input type="text" disabled="disabled" id="bill_number" />
</div>
</td>
</tr>
<tr>
<td colspan="2">
<style>
div#purchace_items td{
border: 1px solid #21ACD7;
}
div#purchace_items tbody td{
padding: 5px 0 5px 5px;
}
div#purchace_items tbody td input,div#purchace_items tbody td select{
padding: 0;
border: 0;
margin: 0;
height: 100%;
width: 100%;
background-color: transparent;
}
</style>
<div id="purchace_items" style="width: 100%; padding: 10px 0; color: #21ACD7;">
<table id="items_table" style="border-collapse: collapse; width: 100%;
background-color: #fff; border-radius: 10px; color: #21ACD7;">
<thead style="text-align: center;">
<tr>
<td>
#
</td>
<td>
ITEM
</td>
<td style="width: 17%;">
QUANTITY
</td>
<td style="width: 17%;">
RATE
</td>
<td style="width: 17%;">
TOTAL
</td>
<td style="width: 10%;">
DELETE
</td>
</tr>
</thead>
<tbody style="padding-left: 3px;">
<datalist id="items">
<?php
$item = new item();
$items = array();
$items = $item->getItems();
foreach ($items as $item) {
echo '<option id="' . $item->id . '"' . 'purchace_rate="' . $item->purchace_rate . '"' . ' value="' . $item->item_name . ' - ' . $item->item_code . ' ( ID : ' . $item->id . ' )" >' . $item->item_name . ' - ' . $item->item_code . ' ( ID : ' . $item->id . ' )' . '</option>';
}
?>
</datalist>
<?php
for ($i = 0; $i < 2; $i++) {
?>
<tr status="active" slno="<?php
echo $i + 1;
?>
">
<td style="text-align: center;">
<?php
echo $i + 1;
?>
</td>
<td>
<input type="text" oninput="update_item_details(this)" onchange="update_item_details(this)" onfocus="$(this).css('border', '0px')" autocomplete="off" list="items" id="item" required />
</td>
<td>
<input type="number" min="0" step="0.001" required onchange="calculate_total(this)" onkeyup="calculate_total(this)" id="quantity"/>
</td>
<td>
<input type="number" min="0" step="0.01" required onchange="calculate_total(this)" onkeyup="calculate_total(this)" id="rate"/>
</td>
<td>
<input type="text" min="0" required id="total" disabled/>
</td>
<td style="width: 20px; text-align: center; padding-right: 5px;">
<img id="delete_button" onclick="delete_this_row(this)" style="color: #f00; cursor: pointer; height: 20px; width: 20px; margin-right: auto; margin-left: auto;" src="../ui/images/cross_button.png"/>
<img id="activate_button" onclick="enable_this_row(this)" style="color: #f00; cursor: pointer; height: 20px; width: 20px; margin-right: auto; margin-left: auto; display: none;" src="../ui/images/tick_button.png" />
</td>
</tr>
<?php
}
?>
</tbody>
</table>
</div>
</td>
</tr>
<tr style="height: 5px;"></tr>
<tr>
<td></td>
<td>
<div style="background-color: #21ACD7; color: #fff; text-align: center; padding-right: 20px;">
<span style="margin-right: 20px;">TOTAL </span>
<span id="total">0</span>
</div>
</td>
</tr>
<tr style="height: 5px;"></tr>
<tr>
<td></td>
<td>
<div style="padding: 0px 12px;">
<div style="width: 100%; margin-left: -12px; padding: 12px;
background-color: #0d92bb; border-radius: 5px; float: left;">
<div style="width: 33.33%; float: right; ">
<input style="width: 100%;" disabled="true" type="submit" value="UPDATE" />
</div>
<div style="width: 33.33%; float: right; ">
<input style="width: 100%;" disabled="true" type="reset" value="CANCEL" />
</div>
<div style="width: 33.33%;">
<input style="width: 100%;" disabled="true" onclick="add_purchace_item()" type="button" value="ADD ITEM" />
</div>
</div>
</div>
</td>
</tr>
</table>
</form>
</div>
<script type="text/javascript">
function update_item_details(item) {
var item_input = $(item);
var item_name = item_input.val();
var item_option_obj = $('datalist#items').find("option[value='" + item_name + "']");
if (item_option_obj.length == "0") {
return;
} else {
var purchace_rate = item_option_obj.attr('purchace_rate');
var row = item_input.parent('td').parent('tr');
row.find('input#rate').val(purchace_rate);
calculate_total(row.find('input#rate').get(0));
}
}
function calculate_total(field) {
var $parent = $(field).closest('tr');
var $quantity = parseFloat($parent.find('input#quantity').val());
var $rate = parseFloat($parent.find('input#rate').val());
var $total = $quantity * $rate;
$total = parseFloat($total).toFixed(2);
if ($.isNumeric($total)) {
$parent.find('input#total').val($total);
} else {
$parent.find('input#total').val(0);
}
calculate_purchace_total();
}
function calculate_purchace_total() {
var items_table = $('#items_table').find('tbody').children();
var total = 0;
items_table.each(function() {
var item_total_input = $(this).find('input#total');
var row_status = $(this).attr('status');
var item_total = item_total_input.val();
if ($.isNumeric(item_total) && row_status == 'active') {
total = parseFloat(total) + parseFloat(item_total);
}
});
total = parseFloat(total).toFixed(2);
$('span#total').html(total);
}
function delete_this_row(delete_btn) {
var row = $(delete_btn).closest('tr');
row.attr('status', 'deativated');
row.css('background-color', '#c0effd');
row.find('input').prop('required', null);
row.find('input').css('border', "0px");
$(delete_btn).css('display', 'none');
$(delete_btn).siblings().first().css('display', 'block');
$(delete_btn).parent('td').css('text-align', 'centre');
calculate_purchace_total();
}
function enable_this_row(enable_btn) {
var row = $(enable_btn).closest('tr');
row.attr('status', 'active');
row.css('background-color', '#fff');
row.find('input').prop('required', 'required');
$(enable_btn).siblings().first().css('display', 'block');
$(enable_btn).css('display', 'none');
$(enable_btn).parent('td').css('text-align', 'centre');
calculate_purchace_total();
}
function add_purchace_item() {
var row = '<tr status="active" slno=""><td style="text-align: center;"></td><td>'
+ '<input type="text" oninput="update_item_details(this)" onchange="update_item_details(this)" onfocus="$(this).css(\'border\', \'0px\')" autocomplete="off" list="items" id="item" required />'
+ '</td><td><input type="number" min="0" required onchange="calculate_total(this)" onkeyup="calculate_total(this)" step="0.001" id="quantity"/>'
+ '</td><td><input type="number" min="0" required onchange="calculate_total(this)" onkeyup="calculate_total(this)" step="0.01" id="rate"/>'
+ '</td><td><input type="text" min="0" required id="total" disabled/></td><td style="width: 20px; text-align: center; padding-right: 5px;">'
+ '<img id="delete_button" onclick="delete_this_row(this)" style="color: #f00; cursor: pointer; height: 20px; width: 20px; margin-right: auto; margin-left: auto;" src="../ui/images/cross_button.png"/>'
+ '<img id="activate_button" onclick="enable_this_row(this)" style="color: #f00; cursor: pointer; height: 20px; width: 20px; margin-right: auto; margin-left: auto; display: none;" src="../ui/images/tick_button.png" />'
+ '</td></tr>';
var lastcount = $('table#items_table tbody tr:last-child').attr('slno');
if (!($.isNumeric(lastcount))) {
lastcount = 0;
}
$('table#items_table tbody').append(row);
lastcount = parseInt(lastcount) + 1;
$('table#items_table tbody tr:last-child').attr('slno', lastcount);
$('table#items_table tbody tr:last-child td:first-child').html(lastcount);
}
function load_purchace() {
var purchace_id = $('input#purchace_id').val();
var data = {
form_id: 8,
purchace_id: purchace_id
}
get_form_data(data,
function(message, purchace) {
//alert(message);
var form = $('form.action_form');
form.find('input#wendor_id').val(purchace.wendor);
form.find('input#bill_number').val(purchace.bill_number);
form.attr('purchace_id', purchace.id);
form.find('span#total').html(purchace.amount);
var items = purchace.items;
$('table#items_table tbody').empty();
for (var i = 0; i < items.length; i++) {
add_purchace_item();
var row = $('table#items_table tbody tr:last-child');
var item = items[i];
row.find('input#item').attr('disabled', 'disabled');
row.find('input#item').val(item.item_name);
row.find('input#quantity').val(item.quantity);
row.find('input#quantity').attr('max', item.quantity);
//row.find('input#quantity').attr('max', item.quantity);
row.find('input#rate').val(item.rate);
row.find('input#total').val(item.rate * item.quantity);
}
//alert(purchace.stocked);
form.find('input#quantity').prop('step', "0.001");
+ form.find('input#rate').prop('step', "0.01");
if (purchace.stocked == 1) {
//form.find('input').prop('disabled', 'true');
form.find('input#quantity').prop('disabled', null);
form.find('input#rate').prop('disabled', 'disabled');
form.find('input[type="button"]').prop('disabled', 'disabled');
form.find('input[type="submit"]').prop('disabled', null);
form.find('input[type="reset"]').prop('disabled', 'disabled');
} else {
form.find('img#delete_button').prop('onclick', false);
form.find('img#activate_button').prop('onclick', false);
form.find('input').prop('disabled', 'disabled');
alert("Purchace not stocked. Use Edit Purchace option to edit a purchace.");
}
}, function(message) {
var form = $('form.action_form');
form.find('input').prop('disabled', 'true');
alert(message);
});
}
$(document).ready(function(e) {
$('form.action_form').on('submit', function(e) {
e.preventDefault();
var items = new Array();
var i = 0;
var items_table = $('#items_table').find('tbody').children();
var invalid_item_precent = false;
items_table.each(function() {
var item_input = $(this).find('input#item');
var item_name = item_input.val();
var item_option_obj = $('datalist#items').find("option[value='" + item_name + "']");
if (item_option_obj.length == "0") {
item_input.css('border', '1px solid #f00');
invalid_item_precent = true;
return;
} else {
var id = item_option_obj.attr('id');
var quantity;
var total = $(this).find('input#total').val();
var rate = $(this).find('input#rate').val();
if ($(this).attr('status') == 'active') {
quantity = $(this).find('input#quantity').val();
} else {
quantity = 0;
total = 0;
}
var item = {
id: id,
quantity: quantity,
rate: rate,
total: total
}
items[i++] = item;
}
});
if (invalid_item_precent) {
//alert("Invalid Item Precent");
return;
}
var id = 30;
var operation = $(this).attr('operation');
var purchace_id = $(this).attr('purchace_id');
var bill_number = $('form input#bill_number').val();
var total = $('span#total').html();
if (items.length == 0) {
items = 'no_items';
}
if (operation == 'update') {
var data = {
form_id: id,
purchace_id: purchace_id,
total: total,
bill_number: bill_number,
items: items
}
update_form_data(data,
function(message) {
get_form(30, function(html, tools) {
$('div#form-body').html(html);
$('div#content-body-action-tools').html(tools);
}, function(message) {
$('font#section_heading').empty();
$('div#content-body-action-tools').empty();
$('div#form-body').empty();
alert(message);
});
alert(message);
}, function(message) {
alert(message);
});
} else {
alert("Invalid Operation " + id + ' - ' + operation);
}
});
});
</script>
<?php
$form = ob_get_clean();
return $form;
}