<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Invoice</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<section>
<!-- Page content-->
<div class="content-wrapper">
<div class="content-heading">
Proposals
</div>
<div class="row">
<div class="col-md-12">
<div class="row mb">
<!--div class="col-sm-12 mb">
<div class="pull-left">
Copy Unique URL </div>
<div class="col-sm-10">
<input style="width: 100%"
value="https://project.primacyinfotech.com/cube-web/portal/frontend/proposals/czoyOiIzMCI7"
type="text" id="foo"/>
</div>
</div-->
<script type="text/javascript">
var textBox = document.getElementById("foo");
textBox.onfocus = function () {
textBox.select();
// Work around Chrome's little problem
textBox.onmouseup = function () {
// Prevent further mouseup intervention
textBox.onmouseup = null;
return false;
};
};
</script>
<div class="col-sm-8">
<a data-toggle="modal" data-target="#myModal_lg" href="#" title="" class="btn btn-xs btn-primary">
<i class="fa fa-pencil text-white"></i> Add Items</a>
<div class="btn-group">
<button class="btn btn-xs btn-purple dropdown-toggle" data-toggle="dropdown">
Convert to <span class="caret"></span></button>
<ul class="dropdown-menu animated zoomIn">
<li>
<a data-toggle="modal" data-target="#myModal_large" href="#" title="Invoice">Invoice</a>
</li>
<!--<li>
<a data-toggle="modal" data-target="#myModal_large"
href="https://project.primacyinfotech.com/cube-web/portal/admin/proposals/convert_to/estimate/30">Estimate</a>
</li>-->
</ul>
</div>
<!--<span data-toggle="tooltip" data-placement="top" title="Clone Proposal">
<a data-toggle="modal" data-target="#myModal" title="Clone Proposal"
href="https://project.primacyinfotech.com/cube-web/portal/admin/proposals/clone_proposal/30"
class="btn btn-xs btn-green">
<i class="fa fa-copy"></i> Clone</a>
</span>-->
<div class="btn-group">
<button class="btn btn-xs btn-default dropdown-toggle" data-toggle="dropdown">
More Actions <span class="caret"></span></button>
<ul class="dropdown-menu animated zoomIn">
<li>
<a href="<?=base_url();?>index.php/admin/proposalMail/<?=$proposal->id?>">Email Proposal</a>
</li>
<li>
<a href="">Proposal History</a>
</li>
<li>
<a href="<?=base_url();?>index.php/admin/proposalView/<?=$proposal->id?>/Draft">Mark as Draft</a>
</li>
<li>
<a href="<?=base_url();?>index.php/admin/proposalView/<?=$proposal->id?>/Sent">Mark as Send</a>
</li>
<li>
<a href="<?=base_url();?>index.php/admin/proposalView/<?=$proposal->id?>/Revised">Mark as Revised</a>
</li>
<li>
<a href="<?=base_url();?>index.php/admin/proposalView/<?=$proposal->id?>/Open">Mark as Open</a>
</li>
<li>
<a href="<?=base_url();?>index.php/admin/proposalView/<?=$proposal->id?>/Declined">Declined</a>
</li>
<li>
<a href="<?=base_url();?>index.php/admin/proposalView/<?=$proposal->id?>/Accepted">Accepted</a>
</li>
<hr>
<li>
<a href="<?=base_url();?>index.php/admin/testingProposal/<?=$proposal->lead_id?>/<?=$proposal->id?>">Edit Proposal</a>
</li>
</ul>
</div>
<!--<a class="btn btn-xs btn-green" data-toggle="modal" data-target="#myModal_lg"
href="https://project.primacyinfotech.com/cube-web/portal/admin/invoice/reminder/proposal/30">Reminder </a>-->
</div>
<div class="col-sm-4 pull-right my-right">
<a href="<?=base_url();?>index.php/admin/proposalMail/<?=$proposal->id?>" data-toggle="tooltip" data-placement="top" title="" class="btn btn-xs btn-primary pull-right" data-original-title="Send Email">
<i class="fa fa-envelope-o"></i>
</a>
<a onclick="print_proposals('print_proposals')" href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="Print" class="mr-sm btn btn-xs btn-danger pull-right">
<i class="fa fa-print"></i>
</a>
<a href="" data-toggle="tooltip" data-placement="top" title="" data-original-title="PDF" class="btn btn-xs btn-success pull-right mr-sm">
<i class="fa fa-file-pdf-o"></i>
</a>
</div>
</div>
<!-- Start Display Details -->
<!-- Main content -->
<div class="panel" id="print_proposals">
<!-- info row -->
<div class="panel-body">
<style>
.invoice-box {
max-width: 100%;
margin: auto;
padding: 10px;
border: 1px solid #eee;
font-size: 15px;
line-height:20px;
color: #000;
}
.invoice-box table {
width: 100%;
line-height: inherit;
text-align: left;
}
.invoice-box table td {
padding: 5px;
vertical-align: top;
}
.invoice-box table tr td:nth-child(2) {
text-align: left;
}
.invoice-box table tr.top table td {
padding-bottom: 20px;
}
.invoice-box table tr.top table td.title {
font-size: 45px;
line-height: 45px;
color: #333;
}
.invoice-box table tr.top table td.title2 {
float:right;
width: 240px;
}
.invoice-box table tr.top table td.title3 {
float:left;
}
.invoice-box table tr.information table td.title2 {
float: right;
}
.invoice-box table tr.information table td {
padding-bottom: 40px;
}
.invoice-box table tr.heading td {
background: #eee;
border-bottom: 1px solid #ddd;
font-weight: bold;
}
.invoice-box table tr.details td {
padding-bottom: 20px;
}
.invoice-box table tr.item td{
border-bottom: 1px solid #eee;
}
.invoice-box table tr.item.last td {
border-bottom: none;
}
.invoice-box table tr.total td:nth-child(2) {
border-top: 2px solid #eee;
font-weight: bold;
}
h3.heading2 {
background-color: #eee;
width: 312px;
color: #000;
padding: 4px 11px;
font-weight: 500;
}
p{
margin-bottom: 8px;
}
@media only screen and (max-width: 600px) {
.invoice-box table tr.top table td {
width: 100%;
display: block;
text-align: center;
}
.invoice-box table tr.information table td {
width: 100%;
display: block;
text-align: center;
}
.invoice-box {
padding: 0px;
}
.invoice-box table tr.top table td.title2 {
margin:auto;
float:none;
width: 50%;
}
}
/** RTL **/
.rtl {
direction: rtl;
font-family: Tahoma, 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
}
.rtl table {
text-align: right;
}
.rtl table tr td:nth-child(2) {
text-align: left;
}
</style>
<div class="invoice-box">
<table cellpadding="0" cellspacing="0">
<tr class="top">
<td colspan="4">
<table>
<tr>
<td class="">
<img style="width: 233px;height: 120px;" src="https://primacyinfotech.com/assets/images/logo-p.png" alt="logo">
</td>
<td class="title2">
<h4 class="mb0"><b>Proposals : 3456464646</b></h4>
Proposals date: 24-8-2020<br>Due Date: 24-12-2021<br>Sales Agent: demo name <br>Proposals Status: <button class="btn btn-danger btn-sm">Open</mt-5>
</td>
</tr>
</table>
</td>
</tr>
<tr class="information">
<td colspan="6">
<table>
<tr>
<td>
<h3 class="heading2">Our Info:</h3>
<h4 class="mb0"><b>Primacy Solution Pvt. Ltd.</b></h4>
147,Demoi,Dumdum, Kolkata-700079<br/>
GSTIN/UIN:6454546456456456 <br/>
State Name: West Bengal,Cod: 19 <br/>
CIN:5645645645645645646465465 <br/>
Contact :8448440506 / 03346048896<br/>
E mail:info@demo.org<br/>
www.demo.org
</td>
<td class="title2">
<h3 class="heading2">
Customer Info:
</h3>
<div class="pl-sm">
<h4 class="mb0"><b>Demoo Name</b></h4>
ABCD<br>Arizona, 0000<br>United States of America <br>Phone : 6024487880<br>Vat Number : 554545454
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
<div style="overflow-x:auto">
<table class="table table-striped" style="width:100%">
<thead>
<tr>
<th>#</th> <th>Items</th> <th>Qty</th> <th>Price</th> <th>Tax</th> <th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td><center>1</center></td>
<td width="400">
White Level Branding, Custom icon,Logo, Splash screen
Leads Website , APP, Admin & Multi- Store & Delivery App
COD, Credit, Debit, Net transfer,UP!
Free Payment Gateway Setup,Stock Management
Free SMS Getaway Setup ,Notifications
Tickets Bulk Import ,Society/Services Area
Coupons, Deal products,Order limit set
</td>
<td><center>11</center></td><td><center>600</center> </td><td><center>1.0</center></td><td><center>2500.00</center></td>
</tr>
<tr>
<td><center>2</center></td><td>dsdfdfsfdsfds</td><td><center>11</center></td><td><center>600</center> </td><td><center>1.0</center></td><td><center>2500.00</center></td>
</tr>
<tr>
<td><center>3</center></td><td>dsdfdfsfdsfds</td><td><center>11</center></td><td><center>600</center> </td><td><center>1.0</center></td><td><center>2500.00</center></td>
</tr>
</tbody>
</table>
</div>
<br/>
<table cellpadding="0" cellspacing="0">
<tr class="top">
<td colspan="6">
<table>
<tr>
<td class="">
<h5 class="well well-sm mt">
Check payment (including tax) are payable to
</h5>
<h6 class="well well-sm mt">
Primacy Infotech Private Limited
</h6>
<h6 class="well well-sm mt">
BF 79, BF Block Sector 1,Salt Lake,700064 Kalkata, West Bengal
</h6>
<h6 class="well well-sm mt">
Payment by transfer on the following bank account:
</h6>
<h6 class="well well-sm mt">
ICICI BANK,Account number:25645456456456
Salt Lake Sector 3 Branch,IFSC:0001103
</h6>
<h6 class="well well-sm mt">
In Account owner name:PRIMACY INFOTECH PRIVATE LIMITED
</h6>
<h6 class="well well-sm mt">
UPIID : primacyl@icici
</h6>
<h6 class="well well-sm mt">
Hey Looking forward in doing business with you.
</h6>
</td>
<td class="title2">
<p><span><b>Sub Total</b></span> <span style="margin-left:100px">456545<span> </p>
<p><span><b>Discount</b></span><span style="margin-left:100px">4555</span> </p>
<p><span><b>Sub Total</b></span> <span style="margin-left:100px">456545<span> </p>
<p><span><b>Discount</b></span><span style="margin-left:100px">4555</span> </p>
<p><span><b>Adjustment</b></span><span style="margin-left:100px">2255</span></p>
<p><span ><b>Total</b></span><span style="margin-left:100px">Rs 455556</span> </p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<div class="table-responsive mb-lg " style="margin-top: 25px">
<table class="table table-striped" style="width:100%">
<thead>
<tr>
<td colspan="5"><h5>Tax Summary</h5></td>
</tr>
<tr>
<th class="text-left">Items</th> <th class="text-left">Qty</th> <th class="text-left">Price</th> <th class="text-left">Tax</th> <th class="text-left">Total</th>
</tr>
</thead>
<tbody>
<tr>
<td width="400">
Monthly Grocery Package
</td><td>11</td>
<td>600 </td><td>1.0</td><td>2500.00</td>
</tr>
<tr>
<td width="400">
Monthly Grocery Package
</td><td>11</td>
<td>600 </td><td>1.0</td><td>2500.00</td>
</tr>
<tr>
<td width="400">
Monthly Grocery Package
</td><td>11</td>
<td>600 </td><td>1.0</td><td>2500.00</td>
</tr>
<tr>
<td width="400">
Monthly Grocery Package
</td><td>11</td>
<td>600 </td><td>1.0</td><td>2500.00</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<div id="elementH"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.22/pdfmake.min.js"></script>
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
<script type="text/javascript">
var textBox = document.getElementById("foo");
textBox.onfocus = function () {
textBox.select();
// Work around Chrome's little problem
textBox.onmouseup = function () {
// Prevent further mouseup intervention
textBox.onmouseup = null;
return false;
};
};
</script>
<script>
function printDiv(e1) {
var restorepage=document.body.innerHTML;
var printcontent=document.getElementById(e1).innerHTML;
document.body.innerHTML=printcontent;
window.print();
document.body.innerHTML=restorepage;
}
</script>
<script>
function pdfSave() {
/*var doc = new jsPDF();
var elementHTML = $('#GFG').html();
var specialElementHandlers = {
'#elementH': function (element, renderer) {
return true;
}
};
doc.fromHTML(elementHTML, 15, 15, {
'width': 170,
'elementHandlers': specialElementHandlers
});
// Save the PDF
doc.save('sample-document.pdf'); */
html2canvas($('#GFG')[0], {
onrendered: function (canvas)
{
var data = canvas.toDataURL();
var docDefinition = {
content: [{
image: data,
width: 500
}]
};
pdfMake.createPdf(docDefinition).download("sample-file.pdf");
}
});
}
</script>
<script>
function printDiv(e1) {
var restorepage=document.body.innerHTML;
var printcontent=document.getElementById(e1).innerHTML;
document.body.innerHTML=printcontent;
window.print();
document.body.innerHTML=restorepage;
}
function print_proposals(print_proposals) {
var printContents = document.getElementById(print_proposals).innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
}
</script>
<!-- </body>
</html> -->
</body>
</html>
/* .body-sec{
background-color:red;
padding:15px 20px;
margin:0px 0px;
color: #333;
border:1px solid #f9f9f9;
}
.bg-items {
background: #515151;
color: #FFFFFF;
padding: 8px;
}
.table tr td{
font-size: 16px;
color: #656565;
font-weight: 600;
}
.table tr th{
text-align:center;
background:#515151 !important;
color:#fff;
padding: 8px;
}
.right-print>a {
margin-right: 6px;
}
ul.dropdown-menu li a {
padding-left: 11px;
color: #333;
text-decoration: none;
}
ul.dropdown-menu li a:hover {
background-color:#ccc;
}
.dropdown-menu{
min-width: 9rem;
margin-left:2px;
}
.dropdown-menu.show {
display: block;
margin-left: -5px;
}
.content-wrapper {
padding: 15px;
width: 100%;
border-top: 1px solid rgba(0,0,0,.15);
margin-top: -1px;
}*/
.content-wrapper>.content-heading, .content-wrapper>h3 {
font-size: 24px;
line-height: .5;
color: #929292;
padding: 15px;
font-weight: 400;
background-color: #fafbfc;
border-bottom: 1px solid #cfdbe2;
margin-bottom: 10px;
}
@media only screen and (min-width: 768px)
{
.content-wrapper>.content-heading, .content-wrapper>h3 {
margin: -20px -20px 15px;
padding: 10px;
}
.content-wrapper {
padding: 15px;
width: 100%;
border-top: 1px solid rgba(0,0,0,.15);
margin-top: 21px;
}
.text-sm {
font-size: 11.9px;
}
.mb {
margin-bottom: 10px!important;
}
.btn-purple {
color: #fff;
background-color: #7266ba;
border-color: transparent;
}
.btn {
font-size: 13px;
border-color: transparent;
-webkit-appearance: none;
-webkit-transition: all .1s;
-o-transition: all .1s;
transition: all .1s;
}
.pl-lg {
padding-left: 15px!important;
}
.pr-lg {
padding-right: 15px!important;
}
.mb0 {
margin-bottom: 0!important;
}
.bg-items {
background: #515151;
color: #FFFFFF;
}
.mr-15 {
margin-right: -15px !important;
}
.pl-sm {
padding-left: 5px!important;
}
.mb-lg {
margin-bottom: 15px!important;
}
.panel .table {
border: 0;
}
.bg-items {
background: #515151;
color: #FFFFFF;
}
.table tr th{
text-align:center;
background:#515151 !important;
color:#fff;
padding: 8px;
}
.p-md {
padding: 12px !important;
}
}
@media only screen and (min-width: 768px){
.content-wrapper {
padding: 20px;
}
.my-right>a {
margin-right: 6px;
}
}
