@@ -0,0 +1,160 @@
var EditableTable = function () {

return {

//main function to initiate the module
init: function () {
function restoreRow(oTable, nRow) {
var aData = oTable.fnGetData(nRow);
var jqTds = $('>td', nRow);

for (var i = 0, iLen = jqTds.length; i < iLen; i++) {
oTable.fnUpdate(aData[i], nRow, i, false);
}

oTable.fnDraw();
}


function newRow(oTable, nRow) {
var aData = oTable.fnGetData(nRow);
var jqTds = $('>td', nRow);
jqTds[0].innerHTML = '<input type="text" class="form-control small" value="' + aData[0] + '">';
jqTds[1].innerHTML = '<input type="text" class="form-control small" value="' + aData[1] + '">';
jqTds[2].innerHTML = '<input type="text" class="form-control small" value="' + aData[2] + '">';
jqTds[3].innerHTML = '<input type="text" class="form-control small" value="' + aData[3] + '">';
jqTds[4].innerHTML = '<input type="text" class="form-control small" value="' + aData[4] + '">';
jqTds[5].innerHTML = '<input type="text" class="form-control small" value="' + aData[5] + '">';
jqTds[6].innerHTML = '<a class="edit" href="">Save</a>';
jqTds[7].innerHTML = '<a class="delete" href="">Cancel</a>';
}




function editRow(oTable, nRow) {
var aData = oTable.fnGetData(nRow);
var jqTds = $('>td', nRow);

jqTds[1].innerHTML = '<input type="text" class="form-control small" value="' + aData[1] + '">';
jqTds[2].innerHTML = '<input type="text" class="form-control small" value="' + aData[2] + '">';
jqTds[3].innerHTML = '<input type="text" class="form-control small" value="' + aData[3] + '">';
jqTds[4].innerHTML = '<input type="text" class="form-control small" value="' + aData[4] + '">';
jqTds[5].innerHTML = '<input type="text" class="form-control small" value="' + aData[5] + '">';
jqTds[6].innerHTML = '<a class="edit" href="">Save</a>';
jqTds[7].innerHTML = '<a class="cancel" href="">Cancel</a>';
}

function saveRow(oTable, nRow) {
var jqInputs = $('input', nRow);
oTable.fnUpdate(jqInputs[0].value, nRow, 0, false);
oTable.fnUpdate(jqInputs[1].value, nRow, 1, false);
oTable.fnUpdate(jqInputs[2].value, nRow, 2, false);
oTable.fnUpdate(jqInputs[3].value, nRow, 3, false);
oTable.fnUpdate(jqInputs[4].value, nRow, 4, false);
oTable.fnUpdate(jqInputs[5].value, nRow, 5, false);
oTable.fnUpdate('<a class="edit" href="">Edit</a>', nRow, 6, false);
oTable.fnUpdate('<a class="delete" href="">Delete</a>', nRow, 7, false);
oTable.fnDraw();
}

function cancelEditRow(oTable, nRow) {
var jqInputs = $('input', nRow);
oTable.fnUpdate(jqInputs[0].value, nRow, 0, false);
oTable.fnUpdate(jqInputs[1].value, nRow, 1, false);
oTable.fnUpdate(jqInputs[2].value, nRow, 2, false);
oTable.fnUpdate(jqInputs[3].value, nRow, 3, false);
oTable.fnUpdate(jqInputs[4].value, nRow, 4, false);
oTable.fnUpdate(jqInputs[5].value, nRow, 5, false);
oTable.fnUpdate('<a class="edit" href="">Edit</a>', nRow, 4, false);
oTable.fnDraw();
}

var oTable = $('#editable-sample').dataTable({
"aLengthMenu": [
[5, 15, 20, -1],
[5, 15, 20, "All"] // change per page values here
],
// set the initial value
"iDisplayLength": 5,
"sDom": "<'row'<'col-lg-6'l><'col-lg-6'f>r>t<'row'<'col-lg-6'i><'col-lg-6'p>>",
"sPaginationType": "bootstrap",
"oLanguage": {
"sLengthMenu": "_MENU_ records per page",
"oPaginate": {
"sPrevious": "Prev",
"sNext": "Next"
}
},
"aoColumnDefs": [{
'bSortable': false,
'aTargets': [0]
}
]
});

jQuery('#editable-sample_wrapper .dataTables_filter input').addClass("form-control medium"); // modify table search input
jQuery('#editable-sample_wrapper .dataTables_length select').addClass("form-control xsmall"); // modify table per page dropdown

var nEditing = null;

$('#editable-sample_new').click(function (e) {
e.preventDefault();
var aiNew = oTable.fnAddData(['', '', '', '','','',
'<a class="edit" href="">Edit</a>', '<a class="cancel" data-mode="new" href="">Cancel</a>'
]);
var nRow = oTable.fnGetNodes(aiNew[0]);
newRow(oTable, nRow);
nEditing = nRow;
});

$('#editable-sample a.delete').live('click', function (e) {
e.preventDefault();

if (confirm("Are you sure to delete this row ?") == false) {
return;
}

var nRow = $(this).parents('tr')[0];
oTable.fnDeleteRow(nRow);
alert("Deleted! Do not forget to do some ajax to sync with backend :)");
});

$('#editable-sample a.cancel').live('click', function (e) {
e.preventDefault();
if ($(this).attr("data-mode") == "new") {
var nRow = $(this).parents('tr')[0];
oTable.fnDeleteRow(nRow);
} else {
restoreRow(oTable, nEditing);
nEditing = null;
}
});

$('#editable-sample a.edit').live('click', function (e) {
e.preventDefault();

/* Get the row as a parent of the link that was clicked on */
var nRow = $(this).parents('tr')[0];

if (nEditing !== null && nEditing != nRow) {
/* Currently editing - but not this row - restore the old before continuing to edit mode */
restoreRow(oTable, nEditing);
editRow(oTable, nRow);
nEditing = nRow;
} else if (nEditing == nRow && this.innerHTML == "Save") {
/* Editing this row and want to save it */
saveRow(oTable, nEditing);
nEditing = null;
alert("Updated! Do not forget to do some ajax to sync with backend :)");
} else {
/* No edit in progress - let's start one */
editRow(oTable, nRow);
nEditing = nRow;
}
});
}

};

}();
@@ -0,0 +1,134 @@
var EditableTable = function () {

return {

//main function to initiate the module
init: function () {
function restoreRow(oTable, nRow) {
var aData = oTable.fnGetData(nRow);
var jqTds = $('>td', nRow);

for (var i = 0, iLen = jqTds.length; i < iLen; i++) {
oTable.fnUpdate(aData[i], nRow, i, false);
}

oTable.fnDraw();
}

function editRow(oTable, nRow) {
var aData = oTable.fnGetData(nRow);
var jqTds = $('>td', nRow);
jqTds[0].innerHTML = '<input type="text" class="form-control small" value="' + aData[0] + '">';
jqTds[1].innerHTML = '<input type="text" class="form-control small" value="' + aData[1] + '">';
jqTds[2].innerHTML = '<input type="text" class="form-control small" value="' + aData[2] + '">';
jqTds[3].innerHTML = '<a class="edit" href="">Save</a>';
jqTds[4].innerHTML = '<a class="delete" href="">Cancel</a>';
}

function saveRow(oTable, nRow) {
var jqInputs = $('input', nRow);
oTable.fnUpdate(jqInputs[0].value, nRow, 0, false);
oTable.fnUpdate(jqInputs[1].value, nRow, 1, false);
oTable.fnUpdate(jqInputs[2].value, nRow, 2, false);
oTable.fnUpdate('<a class="edit" href="">Edit</a>', nRow, 3, false);
oTable.fnUpdate('<a class="delete" href="">Delete</a>', nRow, 4, false);
oTable.fnDraw();
}

function cancelEditRow(oTable, nRow) {
var jqInputs = $('input', nRow);
oTable.fnUpdate(jqInputs[0].value, nRow, 0, false);
oTable.fnUpdate(jqInputs[1].value, nRow, 1, false);
oTable.fnUpdate(jqInputs[2].value, nRow, 2, false);
oTable.fnUpdate('<a class="edit" href="">Edit</a>', nRow, 3, false);
oTable.fnDraw();
}

var oTable = $('#editable-sample').dataTable({
"aLengthMenu": [
[5, 15, 20, -1],
[5, 15, 20, "All"] // change per page values here
],
// set the initial value
"iDisplayLength": 5,
"sDom": "<'row'<'col-lg-6'l><'col-lg-6'f>r>t<'row'<'col-lg-6'i><'col-lg-6'p>>",
"sPaginationType": "bootstrap",
"oLanguage": {
"sLengthMenu": "_MENU_ records per page",
"oPaginate": {
"sPrevious": "Prev",
"sNext": "Next"
}
},
"aoColumnDefs": [{
'bSortable': false,
'aTargets': [0]
}
]
});

jQuery('#editable-sample_wrapper .dataTables_filter input').addClass("form-control medium"); // modify table search input
jQuery('#editable-sample_wrapper .dataTables_length select').addClass("form-control xsmall"); // modify table per page dropdown

var nEditing = null;

$('#editable-sample_new').click(function (e) {
e.preventDefault();
var aiNew = oTable.fnAddData(['', '', '',
'<a class="edit" href="">Edit</a>', '<a class="cancel" data-mode="new" href="">Cancel</a>'
]);
var nRow = oTable.fnGetNodes(aiNew[0]);
editRow(oTable, nRow);
nEditing = nRow;
});

$('#editable-sample a.delete').live('click', function (e) {
e.preventDefault();

if (confirm("Are you sure to delete this row ?") == false) {
return;
}

var nRow = $(this).parents('tr')[0];
oTable.fnDeleteRow(nRow);
alert("Deleted! Do not forget to do some ajax to sync with backend :)");
});

$('#editable-sample a.cancel').live('click', function (e) {
e.preventDefault();
if ($(this).attr("data-mode") == "new") {
var nRow = $(this).parents('tr')[0];
oTable.fnDeleteRow(nRow);
} else {
restoreRow(oTable, nEditing);
nEditing = null;
}
});

$('#editable-sample a.edit').live('click', function (e) {
e.preventDefault();

/* Get the row as a parent of the link that was clicked on */
var nRow = $(this).parents('tr')[0];

if (nEditing !== null && nEditing != nRow) {
/* Currently editing - but not this row - restore the old before continuing to edit mode */
restoreRow(oTable, nEditing);
editRow(oTable, nRow);
nEditing = nRow;
} else if (nEditing == nRow && this.innerHTML == "Save") {
/* Editing this row and want to save it */
saveRow(oTable, nEditing);
nEditing = null;
alert("Updated! Do not forget to do some ajax to sync with backend :)");
} else {
/* No edit in progress - let's start one */
editRow(oTable, nRow);
nEditing = nRow;
}
});
}

};

}();
@@ -0,0 +1,146 @@
var EditableTable = function () {

return {

//main function to initiate the module
init: function () {
function restoreRow(oTable, nRow) {
var aData = oTable.fnGetData(nRow);
var jqTds = $('>td', nRow);

for (var i = 0, iLen = jqTds.length; i < iLen; i++) {
oTable.fnUpdate(aData[i], nRow, i, false);
}

oTable.fnDraw();
}


function newRow(oTable, nRow) {
var aData = oTable.fnGetData(nRow);
var jqTds = $('>td', nRow);
jqTds[0].innerHTML = '<input type="text" class="form-control small" value="' + aData[0] + '">';
jqTds[1].innerHTML = '<input type="text" class="form-control small" value="' + aData[1] + '">';
jqTds[2].innerHTML = '<input type="text" class="form-control small" value="' + aData[2] + '">'
jqTds[3].innerHTML = '<a class="delete" href="">Cancel</a>';
}




function editRow(oTable, nRow) {
var aData = oTable.fnGetData(nRow);
var jqTds = $('>td', nRow);

jqTds[0].innerHTML = '<input type="text" class="form-control small" value="' + aData[0] + '">';
jqTds[1].innerHTML = '<input type="text" class="form-control small" value="' + aData[1] + '">';
jqTds[2].innerHTML = '<input type="text" class="form-control small" value="' + aData[2] + '">'
jqTds[3].innerHTML = '<a class="delete" href="">Cancel</a>';
}

function saveRow(oTable, nRow) {
var jqInputs = $('input', nRow);
oTable.fnUpdate(jqInputs[0].value, nRow, 0, false);
oTable.fnUpdate(jqInputs[1].value, nRow, 1, false);
oTable.fnUpdate(jqInputs[2].value, nRow, 2, false);
oTable.fnUpdate('<a class="delete" href="">Delete</a>', nRow, 3, false);
oTable.fnDraw();
}

function cancelEditRow(oTable, nRow) {
var jqInputs = $('input', nRow);
oTable.fnUpdate(jqInputs[0].value, nRow, 0, false);
oTable.fnUpdate(jqInputs[1].value, nRow, 1, false);
oTable.fnUpdate(jqInputs[2].value, nRow, 2, false);
oTable.fnUpdate('<a class="edit" href="">Edit</a>', nRow, 3, false);
oTable.fnDraw();
}

var oTable = $('#editable-sample').dataTable({
"aLengthMenu": [
[5, 15, 20, -1],
[5, 15, 20, "All"] // change per page values here
],
// set the initial value
"iDisplayLength": 5,
"sDom": "<'row'<'col-lg-6'l><'col-lg-6'f>r>t<'row'<'col-lg-6'i><'col-lg-6'p>>",
"sPaginationType": "bootstrap",
"oLanguage": {
"sLengthMenu": "_MENU_ records per page",
"oPaginate": {
"sPrevious": "Prev",
"sNext": "Next"
}
},
"aoColumnDefs": [{
'bSortable': false,
'aTargets': [0]
}
]
});

jQuery('#editable-sample_wrapper .dataTables_filter input').addClass("form-control medium"); // modify table search input
jQuery('#editable-sample_wrapper .dataTables_length select').addClass("form-control xsmall"); // modify table per page dropdown

var nEditing = null;

$('#editable-sample_new').click(function (e) {
e.preventDefault();
var aiNew = oTable.fnAddData(['', '', '',
,'<a class="cancel" data-mode="new" href="">Cancel</a>'
]);
var nRow = oTable.fnGetNodes(aiNew[0]);
newRow(oTable, nRow);
nEditing = nRow;
});

$('#editable-sample a.delete').live('click', function (e) {
e.preventDefault();

if (confirm("Are you sure to delete this row ?") == false) {
return;
}

var nRow = $(this).parents('tr')[0];
oTable.fnDeleteRow(nRow);
alert("Deleted! Do not forget to do some ajax to sync with backend :)");
});

$('#editable-sample a.cancel').live('click', function (e) {
e.preventDefault();
if ($(this).attr("data-mode") == "new") {
var nRow = $(this).parents('tr')[0];
oTable.fnDeleteRow(nRow);
} else {
restoreRow(oTable, nEditing);
nEditing = null;
}
});

$('#editable-sample a.edit').live('click', function (e) {
e.preventDefault();

/* Get the row as a parent of the link that was clicked on */
var nRow = $(this).parents('tr')[0];

if (nEditing !== null && nEditing != nRow) {
/* Currently editing - but not this row - restore the old before continuing to edit mode */
restoreRow(oTable, nEditing);
editRow(oTable, nRow);
nEditing = nRow;
} else if (nEditing == nRow && this.innerHTML == "Save") {
/* Editing this row and want to save it */
saveRow(oTable, nEditing);
nEditing = null;
alert("Updated! Do not forget to do some ajax to sync with backend :)");
} else {
/* No edit in progress - let's start one */
editRow(oTable, nRow);
nEditing = nRow;
}
});
}

};

}();
@@ -0,0 +1,140 @@
var EditableTable = function () {

return {

//main function to initiate the module
init: function () {
function restoreRow(oTable, nRow) {
var aData = oTable.fnGetData(nRow);
var jqTds = $('>td', nRow);

for (var i = 0, iLen = jqTds.length; i < iLen; i++) {
oTable.fnUpdate(aData[i], nRow, i, false);
}

oTable.fnDraw();
}

function editRow(oTable, nRow) {
var aData = oTable.fnGetData(nRow);
var jqTds = $('>td', nRow);
jqTds[0].innerHTML = '<input type="text" class="form-control small" value="' + aData[0] + '">';
jqTds[1].innerHTML = '<input type="text" class="form-control small" value="' + aData[1] + '">';
jqTds[2].innerHTML = '<input type="text" class="form-control small" value="' + aData[2] + '">';
jqTds[3].innerHTML = '<input type="text" class="form-control small" value="' + aData[3] + '">';
jqTds[4].innerHTML = '<input type="text" class="form-control small" value="' + aData[4] + '">';
jqTds[5].innerHTML = '<a class="edit" href="">Save</a>';
jqTds[6].innerHTML = '<a class="delete" href="">Cancel</a>';
}

function saveRow(oTable, nRow) {
var jqInputs = $('input', nRow);
oTable.fnUpdate(jqInputs[0].value, nRow, 0, false);
oTable.fnUpdate(jqInputs[1].value, nRow, 1, false);
oTable.fnUpdate(jqInputs[2].value, nRow, 2, false);
oTable.fnUpdate(jqInputs[3].value, nRow, 3, false);
oTable.fnUpdate(jqInputs[4].value, nRow, 4, false);
oTable.fnUpdate('<a class="edit" href="">Edit</a>', nRow, 5, false);
oTable.fnUpdate('<a class="delete" href="">Delete</a>', nRow, 6, false);
oTable.fnDraw();
}

function cancelEditRow(oTable, nRow) {
var jqInputs = $('input', nRow);
oTable.fnUpdate(jqInputs[0].value, nRow, 0, false);
oTable.fnUpdate(jqInputs[1].value, nRow, 1, false);
oTable.fnUpdate(jqInputs[2].value, nRow, 2, false);
oTable.fnUpdate(jqInputs[3].value, nRow, 3, false);
oTable.fnUpdate(jqInputs[4].value, nRow, 4, false);
oTable.fnUpdate('<a class="edit" href="">Edit</a>', nRow, 5, false);
oTable.fnDraw();
}

var oTable = $('#editable-sample').dataTable({
"aLengthMenu": [
[5, 15, 20, -1],
[5, 15, 20, "All"] // change per page values here
],
// set the initial value
"iDisplayLength": 5,
"sDom": "<'row'<'col-lg-6'l><'col-lg-6'f>r>t<'row'<'col-lg-6'i><'col-lg-6'p>>",
"sPaginationType": "bootstrap",
"oLanguage": {
"sLengthMenu": "_MENU_ records per page",
"oPaginate": {
"sPrevious": "Prev",
"sNext": "Next"
}
},
"aoColumnDefs": [{
'bSortable': false,
'aTargets': [0]
}
]
});

jQuery('#editable-sample_wrapper .dataTables_filter input').addClass("form-control medium"); // modify table search input
jQuery('#editable-sample_wrapper .dataTables_length select').addClass("form-control xsmall"); // modify table per page dropdown

var nEditing = null;

$('#editable-sample_new').click(function (e) {
e.preventDefault();
var aiNew = oTable.fnAddData(['', '', '','','',
'<a class="edit" href="">Edit</a>', '<a class="cancel" data-mode="new" href="">Cancel</a>'
]);
var nRow = oTable.fnGetNodes(aiNew[0]);
editRow(oTable, nRow);
nEditing = nRow;
});

$('#editable-sample a.delete').live('click', function (e) {
e.preventDefault();

if (confirm("Are you sure to delete this row ?") == false) {
return;
}

var nRow = $(this).parents('tr')[0];
oTable.fnDeleteRow(nRow);
alert("Deleted! Do not forget to do some ajax to sync with backend :)");
});

$('#editable-sample a.cancel').live('click', function (e) {
e.preventDefault();
if ($(this).attr("data-mode") == "new") {
var nRow = $(this).parents('tr')[0];
oTable.fnDeleteRow(nRow);
} else {
restoreRow(oTable, nEditing);
nEditing = null;
}
});

$('#editable-sample a.edit').live('click', function (e) {
e.preventDefault();

/* Get the row as a parent of the link that was clicked on */
var nRow = $(this).parents('tr')[0];

if (nEditing !== null && nEditing != nRow) {
/* Currently editing - but not this row - restore the old before continuing to edit mode */
restoreRow(oTable, nEditing);
editRow(oTable, nRow);
nEditing = nRow;
} else if (nEditing == nRow && this.innerHTML == "Save") {
/* Editing this row and want to save it */
saveRow(oTable, nEditing);
nEditing = null;
alert("Updated! Do not forget to do some ajax to sync with backend :)");
} else {
/* No edit in progress - let's start one */
editRow(oTable, nRow);
nEditing = nRow;
}
});
}

};

}();

Large diffs are not rendered by default.

@@ -30,7 +30,7 @@ a, a:hover, a:focus {
}
::selection {

background: #FF6C60;
#ff6c60
color: #fff;
}
::-moz-selection {

Large diffs are not rendered by default.

@@ -489,41 +489,14 @@

<!--modal start-->
<section class="panel">
<header class="panel-heading">
Default Modal Dialogs
</header>

<div class="panel-body">
<a class="btn btn-success" data-toggle="modal" href="#myModal">
Default
</a>

<a class="btn btn-warning" data-toggle="modal" href="#myModal2">
Large
</a>
<a class="btn btn-danger" data-toggle="modal" href="#myModal3">
Small
</a>
<!-- Modal -->
<div class="modal fade " id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title">Default Modal Tittle</h4>
</div>
<div class="modal-body">

Body goes here...

</div>
<div class="modal-footer">
<button data-dismiss="modal" class="btn btn-default" type="button">Close</button>
<button class="btn btn-success" type="button">Save changes</button>
</div>
</div>
</div>
</div>
<!-- modal -->
<!-- Modal -->


<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
@@ -533,7 +506,152 @@ <h4 class="modal-title">Modal Tittle</h4>
</div>
<div class="modal-body">

Body goes here...
<section class="wrapper">
<!-- invoice start-->
<section>
<div class="panel panel-primary">
<!--<div class="panel-heading navyblue"> INVOICE</div>-->
<div class="panel-body">
<div class="row invoice-list">
<div class="text-center corporate-id">
<img src="img/vector-lab.jpg" alt="">
<h1>Sales Delivery Receipt</h1>
</div>
<div class="col-lg-4 col-sm-4">
<h4>BILLING AND DELIVERY INFORMATION</h4>
<p>Payment Terms :
<strong>Cash</strong>
<br>Delivery Address:
<b>Dream Land
<br>Road 1, House 2, Sector 3
<br>ABC, Dreamland 1230</b>
<br>Delivery Date:
<b>2-2-12</b>
<br>
</p>
</div>
<div class="col-lg-4 col-sm-4">
<h4>CUSTOMER INFORMATION</h4>
<p>Customer Name :
<strong>Kim</strong>
<br>Customer Address:
<b>Manila Lab
<br>Road 1, House 2, Sector 3
<br>ABC, Dreamland 1230</b>
<br>Contact Number:
<b>+38 (123) 456-7890</b>
<br>
</p>
</div>
<div class="col-lg-4 col-sm-4">
<h4>DELIVERY RECEIPT INFORMATION</h4>
<ul class="unstyled">
<li>Delivery Receipt Number :
<strong>69626</strong>
</li>
<li>Sales Order Number :
<strong>123456</strong>
</li>
<li>Prepared By :
<b>John Fisher</b>
</li>
</ul>
</div>
</div>
<table class="table table-striped table-hover">
<thead>
<tr>
<th>#</th>
<th>Material</th>
<th class="">Size</th>
<th class="">Unit</th>
<th class="">Quantity</th>
<th class="">B/F</th>
<th class="">Unit Price</th>
<th class="">Discount</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>LCD Monitor</td>
<td class="hidden-phone">22-12-10</td>
<td class="">$ 1000</td>
<td class="" width="30px">3</td>
<td>$ 2000</td>
<td>$ 2000</td>
<td>$ 2000</td>
<td>$ 2000</td>
</tr>
<tr>
<td>2</td>
<td>Laptop</td>
<td class="hidden-phone">22-12-10</td>
<td class="">$1750</td>
<td class="">50</td>
<td>$1750</td>
<td>$ 2000</td>
<td>$ 2000</td>
<td>$ 2000</td>
</tr>
<tr>
<td>3</td>
<td>Mouse</td>
<td class="hidden-phone">22-12-10</td>
<td class="">$90</td>
<td class="">13</td>
<td>$270</td>
<td>$ 2000</td>
<td>$ 2000</td>
<td>$ 2000</td>
</tr>
<tr>
<td>4</td>
<td>Personal Computer</td>
<td class="hidden-phone">22-12-10</td>
<td class="">$1200</td>
<td class="">12</td>
<td>$2400</td>
<td>$ 2000</td>
<td>$ 2000</td>
<td>$ 2000</td>
</tr>
<tr>
<td>5</td>
<td>Printer</td>
<td class="hidden-phone">22-12-10</td>
<td class="">$200</td>
<td class="">10</td>
<td>$400</td>
<td>$ 2000</td>
<td>$ 2000</td>
<td>$ 2000</td>
</tr>
</tbody>
</table>
<div class="row">
<div class="col-lg-4 invoice-block pull-right">
<ul class="unstyled amounts">
<li>
<strong>Sub - Total amount :</strong>$6820</li>
<li>
<strong>Discount :</strong>10%</li>
<li>
<strong>VAT :</strong>-----</li>
<li>
<strong>Grand Total :</strong>$6138</li>
</ul>
</div>
</div>
<div class="text-center invoice-btn">
<a class="btn btn-danger btn-lg"><i class="fa fa-check"></i> Back </a>
</div>
</div>
</div>
</section>
<!-- invoice end-->
</section>

</div>
<div class="modal-footer">
@@ -545,24 +663,7 @@ <h4 class="modal-title">Modal Tittle</h4>
</div>
<!-- modal -->
<!-- Modal -->
<div class="modal fade" id="myModal3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title">Modal Tittle</h4>
</div>
<div class="modal-body">

Body goes here...

</div>
<div class="modal-footer">
<button class="btn btn-danger" type="button"> Ok</button>
</div>
</div>
</div>
</div>

<!-- modal -->

</div>
@@ -40,6 +40,7 @@
@endif
<div class="row">
{!!Form::open(['action' => 'BusinessControllers\ProcurementFormController@inputPurchaseOrder'])!!}

<div class="row" id="newUserRow">
<div class="form-group ">
<label class="control-label col-md-1">Requested Delivery Date</label>
@@ -163,6 +164,52 @@
</thead>

<tbody>
<tr>
<td>
<select name="WoodType[]" class="form-control columnAdjust10p" required">
<option></option>
<option value="1">Kiln Dry</option>
<option value="2">Sun Dry</option>
</select>
</td>
<td>
<input name="Thickness[]" autocomplete="on" type="number" step="any" min=0 required class="form-control columnAdjust9p" />
</td>
<td>
<input name="Width[]" autocomplete="on" type="number" step="any" min=0 required class="form-control columnAdjust9p" />
</td>
<td>
<input name="Length[]" autocomplete="on" type="number" step="any" min=0 required class="form-control columnAdjust9p" />
</td>
<td>
<input name="Length[]" autocomplete="on" type="number" step="any" min=0 required class="form-control columnAdjust9p" />
</td>
<td>
<input name="Quantity[]" autocomplete="on" type="number" step="1" min=0 required class="form-control columnAdjust9p" />
</td>
<td>
piece
</td>
<td>
<input name="UnitPrice[]" autocomplete="on" type="number" step="any" min=0 required class="form-control columnAdjust9p" />
</td>
<td>
<input name="Unused[]" autocomplete="on" min=0 type="number" step="any" class="form-control columnAdjust9p" />
</td>
<td>
</td>
</tr>
</tbody>
</table>
</div>
@@ -176,7 +223,7 @@
<strong>Sub - Total amount :</strong>$6820
</li>
<li>
<strong>Discount :</strong>10%
<strong>Discount :</strong><input name="discount" type="number" step="any" min=0.0 max=1.0 value=0.0 />
</li>
<li>
<strong>VAT :</strong>-----
@@ -199,28 +246,32 @@
@endsection
@push('javascript')
<script type="text/javascript" src="/assets/fuelux/js/spinner.min.js"></script>
<script type="text/javascript" src="/assets/bootstrap-fileupload/bootstrap-fileupload.js"></script>
<script type="text/javascript" src="/assets/bootstrap-wysihtml5/wysihtml5-0.3.0.js"></script>
<script type="text/javascript" src="/assets/bootstrap-wysihtml5/bootstrap-wysihtml5.js"></script>
<script type="text/javascript" src="/assets/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
<script type="text/javascript" src="/assets/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js"></script>
<script type="text/javascript" src="/assets/bootstrap-daterangepicker/moment.min.js"></script>
<script type="text/javascript" src="/assets/bootstrap-daterangepicker/daterangepicker.js"></script>
<script type="text/javascript" src="/assets/bootstrap-colorpicker/js/bootstrap-colorpicker.js"></script>
<script type="text/javascript" src="/assets/bootstrap-timepicker/js/bootstrap-timepicker.js"></script>
<script type="text/javascript" src="/assets/jquery-multi-select/js/jquery.quicksearch.js"></script>
<script type="text/javascript" src="/assets/data-tables/jquery.dataTables.js"></script>
<script type="text/javascript" src="/assets/data-tables/DT_bootstrap.js"></script>
<script type="text/javascript" src="/assets/jquery-multi-select/js/jquery.quicksearch.js"></script>
<script src="/js/dynamic_table_init.js"></script>
<!--script for this page only-->
<script src="/js/editable-table.js"></script>
<script type="text/javascript" src="/assets/bootstrap-fileupload/bootstrap-fileupload.js"></script>
<script type="text/javascript" src="/assets/bootstrap-wysihtml5/wysihtml5-0.3.0.js"></script>
<script type="text/javascript" src="/assets/bootstrap-wysihtml5/bootstrap-wysihtml5.js"></script>
<script type="text/javascript" src="/assets/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
<script type="text/javascript" src="/assets/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js"></script>
<script type="text/javascript" src="/assets/bootstrap-daterangepicker/moment.min.js"></script>
<script type="text/javascript" src="/assets/bootstrap-daterangepicker/daterangepicker.js"></script>
<script type="text/javascript" src="/assets/bootstrap-colorpicker/js/bootstrap-colorpicker.js"></script>
<script type="text/javascript" src="/assets/bootstrap-timepicker/js/bootstrap-timepicker.js"></script>
<script type="text/javascript" src="/assets/jquery-multi-select/js/jquery.quicksearch.js"></script>
<script type="text/javascript" src="/assets/data-tables/jquery.dataTables.js"></script>
<script type="text/javascript" src="/assets/data-tables/DT_bootstrap.js"></script>
<script type="text/javascript" src="/assets/jquery-multi-select/js/jquery.quicksearch.js"></script>
<script src="/js/advanced-form-components.js"></script>
<script type="text/javascript" src="/js/bootstrap-multiselect.js"></script>
<script src="/js/dynamic_table_init.js"></script>
<!--script for this page only-->
<script src="/js/editable-table.js"></script>
<!--this page script only-->
<!--right slidebar-->
<script src="/js/slidebars.min.js"></script>
<!--common script for all pages-->
<script src="/js/common-scripts.js"></script>
<script src="/js/advanced-form-components.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
@@ -8,24 +8,20 @@
@include('procurement.sidebar', ['active' => 'DeliveryReceipt']);
@endsection

@push('css')
<link href="/assets/advanced-datatable/media/css/demo_page.css" rel="stylesheet">
<link href="/assets/advanced-datatable/media/css/demo_table.css" rel="stylesheet">
<link rel="stylesheet" href="/assets/data-tables/DT_bootstrap.css">
@endpush

@section('main-content')
<!-- page start-->
@if(isset($success))
<div class="row">
<div class="alert alert-success">
<strong>Success!</strong> {!!$success!!}
</div>
</div>
@endif
<div class="row">
<div class="col-sm-12">
<section class="panel">
<header class="panel-heading">
<h1>Pending Purchase Orders</h1>
<span class="tools pull-right">
<a href="javascript:;" class="fa fa-chevron-down"></a>
<a href="javascript:;" class="fa fa-times"></a>
</span>

</header>
<div class="panel-body">
<div class="adv-table">
@@ -39,29 +35,163 @@
</tr>
</thead>
<tbody>
<?php $count = 0; ?>
@foreach($pendingPO as $PO)
<?php $POID = $PO->POID; ?>
<tr>
<td>
<a href="/procurement/PurchaseOrderSpecific/{!!$POID!!}">{!!$POID!!}</a>
</td>
<td>
{!!$PO->DateCreated!!}
</td>
<td>
{!!$PO->SupplierName!!}
</td>
<td>
<a href="/procurement/DeliveryReceiptSpecific/{!!$POID!!}" class="btn btn-success" >Encode Delivery Receipt</a>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
<?php $POID = $PO->POID; ?>
<tr>
<td>
<a data-toggle="modal" href="#myModal{!!$count!!}">{!!$POID!!}</a>
<div class="modal fade" id="myModal{!!$count!!}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>

</div>

<div class="modal-body">
<section class="wrapper">
<!-- invoice start-->
<section>
<div class="panel panel-primary">
<!--<div class="panel-heading navyblue"> INVOICE</div>-->
<div class="panel-body">
<div class="row invoice-list">
<div class="text-center corporate-id">
<img src="img/vector-lab.jpg" alt="">
<h1>Purchase Order</h1>
</div>
<div class="col-lg-4 col-sm-4">
<h4>BILLING AND DELIVERY INFORMATION</h4>
<p>Payment Terms :
<b>{!!$pendingPODetails[$POID]->Terms!!}</b>
<br>Delivery Address:
<b>{!!$pendingPODetails[$POID]->DeliveryAddress!!}</b>
</p>
</div>
<div class="col-lg-4 col-sm-4">
<h4>SUPPLIER INFORMATION</h4>
<p>Supplier :
<strong>{!!$pendingPODetails[$POID]->SupplierName!!}</strong>
<br>Address:
<b>{!!$pendingPODetails[$POID]->SupplierAddress!!}</b>
<br>Contact Number:
<b>{!!$pendingPODetails[$POID]->Landline!!}</b>
<br>
</p>
</div>
<div class="col-lg-4 col-sm-4">
<h4>PURCHASE ORDER INFORMATION</h4>
<ul class="unstyled">
<li>Purchase Order # : <b>{!!$POID!!}</b></li>
<li>Order Date : <b>{!!$pendingPODetails[$POID]->DateCreated!!}</b></li>
<li>Requested Delivery Date : <strong>{!!$pendingPODetails[$POID]->RequestedDeliveryDate!!}</strong></li>
<!--
<li>Prepared By :
<b>John Fisher</b>
</li>
-->
</ul>
</div>
</div>
<table class="table table-striped table-hover">
<thead>
<tr>
<th>#</th>
<th>Material</th>
<th class="">Size</th>
<th class="">Unit</th>
<th class="">Quantity</th>
<th class="">B/F</th>
<th class="">Unit Price (Ph₱) </th>
<th>Total (Ph₱)</th>
</tr>
</thead>
<tbody>
<?php
$count = 1;
$total = 0;
?>
@foreach($pendingPODetails[$POID]->items as $item)

<tr>
<td>{!!$count++!!}</td>

<td>{!!$item->Material!!}</td>

<td>{!!$item->Size!!}</td>

<td>piece</td>

<td>{!!$item->Quantity!!}</td>

<td>{!!$item->BoardFeet!!}</td>

<td>{!!$item->UnitPrice!!}</td>

<td>
{!!($total = $item->UnitPrice*$item->Quantity)!!}
</td>

</tr>
@endforeach
</tbody>
</table>
<div class="row">
<div class="col-lg-4 invoice-block pull-right">
<ul class="unstyled amounts">
<li>
<strong>Subtotal:</strong> ₱ {!!$total!!}
</li>
<li>
<strong>Discount: </strong> {!!$pendingPODetails[$POID]->Discount!!} %
</li>
<li>
<strong>Grand Total :</strong> ₱ {!!$total*(1 - $pendingPODetails[$POID]->Discount)!!}
</li>
</ul>
</div>
</div>

</div>
</div>
</section>
<!-- invoice end-->
</section>
</div>
<div class="modal-footer">
<button data-dismiss="modal" class="btn btn-default" type="button">Close</button>
</div>
</div>
</div>
</div>
</td>
<td>
{!!$PO->DateCreated!!}
</td>
<td>
{!!$PO->SupplierName!!}
</td>
<td>
<a href="/procurement/DeliveryReceiptSpecific/{!!$POID!!}" class="btn btn-success" >Receive Purchase Order</a>
</td>
</tr>
<?php $count++; ?>
@endforeach
</tbody>
</table>
</div>
</section>
</div>
</section>
</div>
</div>
<!-- page end-->
@endsection
@endsection

@push('javascript')
<script type="text/javascript" language="javascript" src="/assets/advanced-datatable/media/js/jquery.dataTables.js"></script>
<script type="text/javascript" src="/assets/data-tables/DT_bootstrap.js"></script>
<!--dynamic table initialization -->
<script src="/js/dynamic_table_init.js"></script>
<script src="/js/dynamic_table_init2.js "></script>
@endpush
@@ -5,7 +5,6 @@
@endsection

@push('css')
<link href="/assets/jquery-easy-pie-chart/jquery.easy-pie-chart.css" rel="stylesheet" type="text/css" media="screen">
<link href="/css/highchars.css" />
@endpush

@@ -27,7 +26,7 @@
<div class="col-lg-3 col-sm-6">
<section class="panel">
<div class="symbol blue">
<i class="fa fa-user"></i>
<i class="fa fa-file"></i>
</div>
<div class="value">
<h1>{!!$countProductNeedProcurement!!}</h1>
@@ -38,7 +37,7 @@
<div class="col-lg-3 col-sm-6">
<section class="panel">
<div class="symbol blue">
<i class="fa fa-user"></i>
<i class="fa fa-file-text-o"></i>
</div>
<div class="value">
<!-- count -->
@@ -61,7 +60,7 @@
<div class="col-lg-6">
<section class="panel">
<div class="panel-body">
<div id="graph2" class="chart"></div>
<div style="height: 400;" id="graph2" class="chart"></div>


</div>
@@ -202,4 +201,4 @@
</script>
-->
@endpush
@endpush
@@ -81,7 +81,9 @@

<!--common script for all pages-->
<script src="/js/common-scripts.js"></script>

<script src="/js/respond.min.js"></script>
<script src="/js/slidebars.min.js"></script>

@stack('javascript')

<!-- Mirrored from thevectorlab.net/flatlab/index.html by HTTrack
@@ -13,15 +13,18 @@
<li>
<a @if($active == 'DeliveryReceipt') class="active" @endif href="\procurement\DeliveryReceipt">
<i class="fa fa-file-text"></i>
Encode Supplier Delivery Receipt
Receive Purchase Order
</a>
</li>
<!--
<li>
<a @if($active == 'PurchaseList') class="active" @endif href="\procurement\PurchaseList">
<i class="fa fa-file-text"></i>
<span>Purchase List</span>
</a>
</li>
-->

<li>
<a @if($active == 'SupplierList') class="active"@endif href="\procurement\SupplierList">
<i class="fa fa-file-text"></i>
@@ -31,13 +34,14 @@
<li>
<a @if($active == 'PurchaseReport') class="active" @endif href="\procurement\PurchaseReport">
<i class="fa fa-file"></i>
<span>Purchase Report</span>
<span>Purchase History</span>
</a>
</li>
<!--
<li>
<a @if($active == 'ProductPurchaseReport') class="active" @endif href="\procurement\ProductPurchaseReport">
<i class="fa fa-file-text"></i>
<span><font size="2.2%">Product Purchase Report</font></span>
</a>
</li>

-->