<div class="content">
    <div class="col-12">
        <div class="col-4">
            <a class="btn btn-info" onclick="Print_Datas('#invoice')">
                Print Invoice </a>
        </div>
        <div class="col-4">

        </div>
        <div class="col-4">

        </div>
    </div>
    <div class="col-12 domInv" id="invoice">
        <div class="row">
            <div class="col-12 inv_title text-center">
                TAX INVOICE
            </div>
        </div>
        <div class="row " style="padding-bottom:5px;">
            <div class="col-12">
                <div class="row ">
                    <div class="col-4 float-left logo247">
                    <img src="pages/rane/rane.png" id="qrcode" name="qrcode" title="Logo" />
                    </div>
                    <div class="col-4 Seller text-left">
                        <br />
                        <div class="col-12 sel_title">
                            Company Name
                        </div>
                        <div class="col-12 address">Address Line 1
                        </div>
                        <div class="col-12 address">
                        Address Line 2
                        </div>
                        <div class="col-12 address">Address Line 3</div>
                        <div class="col-12 address">Address Line 4</div>
                        <div class="col-12 address"></div>
                        <div class="col-12 gstin">
                            GSTIN : <span> GSTIN</span>
                        </div>
                        <div class="col-12 pan">
                            PAN : <span>PAN</span>
                        </div>
                    </div>
                    <div class="col-4 qrCode float-right">
                        <img src="qr/temp/testa06811ffd49a0edec164affb0124b57e.png" id="qrcode" name="qrcode" title="qrcode" />
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-12 ">
                <div class="row BillerDetails">
                    <div class="header">Billed to</div>
                    <div class="col-6">
                        <div class="row">
                            <div class="col-12 billerInfo">
                                <div class="row">
                                    <div class="col-12 Billername">Billed to Name</div>
                                    <div class="col-12 Address">Billed to Address Line 1</div>
                                    <div class="col-12 Address">Billed to Address Line 2
                                    </div>
                                    <div class="col-12 Address">Billed to Address Line 3</div>
                                    <div class="col-12 Address">Billed to Address Line 4</div>
                                    
                                    <div class="col-12 gstin">GSTIN/Unique code : </div>
                                    <div class="col-12 pan">PAN - </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-6 BillerDetails_Right">
                        <div class="col-12 _right">
                            <table class="invDetailTable" style="">
                                <tr>
                                    <td>
                                        <span class="lbl">Invoice No:</span><br />
                                         Invoice Number
                                    </td>
                                    <td>
                                        <span class="lbl">Invoice Date:</span><br />
                                        Invoice Date
                                    </td>
                                </tr>
                                <tr>
                                    <td class="lbl">Place of Supply </td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td class="lbl">State Code</td>
                                    <td>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="lbl">PO Reference</td>
                                    <td>
                                        <br /><br />
                                    </td>
                                </tr>
                                <tr>
                                    <td></td>
                                    <td>
                                        <br /><br />
                                    </td>
                                </tr>
                            </table>
                        </div>

                    </div>
                </div>
            </div>
        </div>
        <div class="row irn">
            <div class="col-12 " style="font-weight:bold">
                <span>IRN : <span>
            </div>
        </div>
        <div class="row">
            <table class="pr_addressTable col-lg-12">
                <thead>
                    <tr class="text-center">
                        <th width="100">SL. NO</th>
                        <th colspan="7">Particulars</th>
                        <th width="200">HSN /Service Chapter Heading (Tariff)</th>
                        <th width="150">AMOUNT Rs.</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="text-center">1</td>
                        <td colspan="7"> Product / Service Details </td>
                        <td class="text-center"> 9972 </td>
                        <td class="text-right money"> 0.00 </td>
                    </tr>
                    <tr>
                        <td colspan="8" rowspan="6">
                            <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
                        </td>
                    </tr>
                    <tr>
                        <!-- <td colspan="8" >
                            
                        </td> -->
                        <td>NET TAXABLE VALUE</td>
                        <td class="money text-right valxy">0.00</td>
                    </tr>
                    <tr>
                        <td>CGST @ 9%</td>
                        <td class="money text-right valxy">0.00</td>
                    </tr>
                    <tr>
                        <td>SGST @ 9%</td>
                        <td class="money text-right valxy">0.00</td>
                    </tr>
                    <tr>
                        <td>IGST @ 0%</td>
                        <td class="money text-right valxy">0.00</td>
                    </tr>
                    <tr>
                        <td>Round off</td>
                        <td class="money text-right valxy">0.00</td>
                    </tr>
                    <tr>
                        <td colspan="8" class="rsTowrd">
                            amount in words
                        </td>
                        <td>Value</td>
                        <td class="_val money text-right"></td>
                    </tr>
                    <tr>
                        <td colspan="8" class="text-center">
                            Whether Tax payable under Reverse Charge : No
                        </td>
                        <td colspan="2"></td>

                    </tr>
                </tbody>
            </table>
        </div>
        <br />
        <div class="row">
            <div class="col-12 text-right" style="font-weight:bold;padding-right:20px;">
                Company Name
            </div>
        </div>
        <div class="row">
            <div class="col-8 text-center" style="font-weight:bold;padding:10px;">
                All transactions covered by this Invoice are subject to the terms and <br />
                conditions which have been agreed by the parties to the transaction.<br />
                <br />
                <br /><br /><br />
            </div>
            <div class="col-2"></div>
        </div>
        <div class="row">
            <div class="col-12 text-right" style="font-weight:bold;padding-right:20px;">
                Authorized Signatory
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                <div class="row " style="padding:20px;">
                    <div class="col-12 paymen_intro" style="font-family:Book Antiqua;font-size:12pt;">
                        <div class="row" style="padding:10px;">
                            <div class="col-12" style="color:blue;font-weight:bold;padding:5px">Payment Instructions
                            </div>
                            <div class="col-12" style="padding:5px;">1. Payment should be made to < Company Name >;
                            </div>
                            <div class="col-12" style="padding:5px;">2. The remittance should specifically indicate that
                                payment is being made for this invoice.</div>
                            <div class="col-12" style="padding:5px;">3. Wire Transfer: < Bank Name >, Main Branch,
                            < Bank Address ></div>
                            <div class="col-12 text-center">Bank Account Number: 009010XXXXXXXXX; IFSC/RTGS number:
                                UTIXXXXXXXX</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row" style="border:solid 1px;">
            <div class="col-12 text-center"
                style="padding-left:25px; padding-right:25px;font-family:Book Antiqua;font-size:10;">
               Footer Address Line
            </div>
        </div>
    </div>
</div>
<style>
.domInv {
    border: solid 2px;
    border-radius: 5px;
}

.inv_title {
    color: blue;
    font-family: Times New Roman;
    font-weight: bold;
    font-size: 20pt;
    padding: 10px;
}

.logo247>span {
    color: orange;
}

.logo247 {
    font-family: Arial;
    font-weight: bold;
    font-size: 72pt;
    /* Bangalore – 560087. */
}

.Seller>.sel_title {
    color: blue;
    font-family: Times New Roman;
    font-weight: bold;
    font-size: 18pt;
    padding: 10px;
}

.Seller>.address {

    font-family: Times New Roman;
    /* font-weight : bold; */
    font-size: 14pt;
}

.gstin,
.pan {
    color: blue;
    font-family: Times New Roman;
    font-weight: bold;
    font-size: 12pt;

}

.qrCode>img {
    width: 300px !important;
    height: 300px !important;
    /* background-image: url('qr/temp/test95ed2d0bad8d676e73cb2ecefeaf5fe3.png'); */
    background-size: cover;
}

.BillerDetails {
    border: solid 1px;
    /* border-radius : 10px; */
    padding: 10px;
}

.billerInfo {
    border: solid 1px;
    border-radius: 5px;

}

.BillerDetails>.header {
    position: absolute;
    margin-top: -25px;
    margin-left: 10px;
    color: blue;
    background: white;
    border-radius: 10px;
    padding: 2px 10px;
    font-family: Bookman Old Style;
    font-weight: bold;
    font-size: 12t;
}

.Billername {
    color: blue;
    font-family: Times New Roman;
    font-weight: bold;
    font-size: 12pt;
}

.billerInfo>.row>.Address {
    font-family: Times New Roman;
    /* font-weight: bold; */
    font-size: 12pt;
}

.BillerDetails_Right {}

._right {
    /* border: solid 1px; */
    /* padding: 5px; */
}

.invDetailTable {
    border-collapse: collapse;
    width: 100%;
    height: 100%;
    font-size: 12pt;
}
 .lbl {
    font-size: 12pt;
    font-weight :bold;
 }

.invDetailTable,
th,
td {
    border: 1px solid black;
}

span .lbl {
    font-family: Times New Roman;
    font-weight: bold;
    font-size: 10pt;
}

.irn {
    border: 1px solid black;
}

.enMoney::before {
    content: "";
}

.money {
    padding-right: 10px;
}

.paymen_intro {
    border: solid 1px;
    border-radius: 10px;
}
</style>
<script>
$(document).ready(function() {
    $('.money').ready(function() {
        $('.money').each(function() {
            var item = $(this).text();
            var num = Number(item).toLocaleString('en-IN');
            if (Number(item) < 0) {
                num = num.replace('-', '');
                $(this).addClass('negMoney');
            } else {
                $(this).addClass('enMoney');
            }

            if(num.indexOf('.') < 0){
                num = num+'.00';
            }

            $(this).text(num);
        });
        setTimeout(() => {
            commaAmmound();
        }, 5000);

    });

});
    

    function escapeRegExp(string) {
        return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
    }

    function replaceAll(str, term, replacement) {
        return str.replace(new RegExp(escapeRegExp(term), 'g'), replacement);
    }

    function commaAmmound() {
        let total = 0;
        $('.valxy').each(function() {
            var num = 0;
            var item = $(this).text();
            if (typeof item !== "undefined") {
                if (item.indexOf(',')) {
                    num = parseFloat(replaceAll(item, ',', ''));
                }
                total = parseFloat(total) + parseFloat(num);
            }
        });
        // alert('called');
        // if(total.indexOf('.') < 0){
        //     total = total+'.00';
        // }
        // alert('called');
        $('._val').text(total.toFixed(2));
        var words = NumberToWords(total.toFixed(2));
        $('.rsTowrd').text(words);
    };
</script>
<script>
function Print_Datas(id){            
    html2canvas($(id),{
        onrendered: function (canvas){
            var data = canvas.toDataURL();
            var docDefinition = {
                content: [
                {
                    image: data,                    
                    width:505,
                },                
                ],
                pageSize: 'A4',
                pageMargins: [ 45, 30, 20, 45 ],
            };
            pdfMake.createPdf(docDefinition).download(id+".pdf");            
        }
    });
    
    // html2canvas($('#invoice'), {
    //     onrendered: function(canvas) {         
    //         var imgData = canvas.toDataURL(
    //             'image/png');              
    //         var doc = new jsPDF('p', 'mm');
    //         doc.addImage(imgData, 'PNG', 10, 10);
    //         doc.save('sample-file.pdf');
    //     }
    // });
    
}
function NumberToWords(amount) {
    var words = new Array();
    words[0] = '';
    words[1] = 'One';
    words[2] = 'Two';
    words[3] = 'Three';
    words[4] = 'Four';
    words[5] = 'Five';
    words[6] = 'Six';
    words[7] = 'Seven';
    words[8] = 'Eight';
    words[9] = 'Nine';
    words[10] = 'Ten';
    words[11] = 'Eleven';
    words[12] = 'Twelve';
    words[13] = 'Thirteen';
    words[14] = 'Fourteen';
    words[15] = 'Fifteen';
    words[16] = 'Sixteen';
    words[17] = 'Seventeen';
    words[18] = 'Eighteen';
    words[19] = 'Nineteen';
    words[20] = 'Twenty';
    words[30] = 'Thirty';
    words[40] = 'Forty';
    words[50] = 'Fifty';
    words[60] = 'Sixty';
    words[70] = 'Seventy';
    words[80] = 'Eighty';
    words[90] = 'Ninety';
    amount = amount.toString();
    var atemp = amount.split(".");
    var number = atemp[0].split(",").join("");
    var n_length = number.length;
    var words_string = "";
    if (n_length <= 9) {
        var n_array = new Array(0, 0, 0, 0, 0, 0, 0, 0, 0);
        var received_n_array = new Array();
        for (var i = 0; i < n_length; i++) {
            received_n_array[i] = number.substr(i, 1);
        }
        for (var i = 9 - n_length, j = 0; i < 9; i++, j++) {
            n_array[i] = received_n_array[j];
        }
        for (var i = 0, j = 1; i < 9; i++, j++) {
            if (i == 0 || i == 2 || i == 4 || i == 7) {
                if (n_array[i] == 1) {
                    n_array[j] = 10 + parseInt(n_array[j]);
                    n_array[i] = 0;
                }
            }
        }
        value = "";
        for (var i = 0; i < 9; i++) {
            if (i == 0 || i == 2 || i == 4 || i == 7) {
                value = n_array[i] * 10;
            } else {
                value = n_array[i];
            }
            if (value != 0) {
                words_string += words[value] + " ";
            }
            if ((i == 1 && value != 0) || (i == 0 && value != 0 && n_array[i + 1] == 0)) {
                words_string += "Crores ";
            }
            if ((i == 3 && value != 0) || (i == 2 && value != 0 && n_array[i + 1] == 0)) {
                words_string += "Lakhs ";
            }
            if ((i == 5 && value != 0) || (i == 4 && value != 0 && n_array[i + 1] == 0)) {
                words_string += "Thousand ";
            }
            if (i == 6 && value != 0 && (n_array[i + 1] != 0 && n_array[i + 2] != 0)) {
                words_string += "Hundred and ";
            } else if (i == 6 && value != 0) {
                words_string += "Hundred ";
            }
        }
        words_string = words_string.split("  ").join(" ");
    }
    return words_string;
}
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js" type="text/javascript"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.22/pdfmake.min.js"></script>  
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js" ></script>