<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 id="invoice" class="col-lg-12 " >
    <div class="row ">
        <div class="col-12   title">
            <span class="head text-center">
                <h2>TAX INVOICE</h2>
            </span>
        </div>
    </div>
    <div class="row ">
        <div class="col-4   logo">
            <!-- [Logo]<span>7<span> -->
            <small>Logo</small>
        </div>
        <div class="col-4   Address">
            <span class="C_name">XXX Company Name XXX </span><br />
            <span class="C_addr">Address Line 1</span><br />
            <span class="C_addr">Address Line 2</span><br />
            <span class="C_addr">Address Line 3</span><br />
            <span class="C_addr">Address Line 4</span><br />
            <span class="gstin">GSTIN : XXXXXXXXXXXXX</span><br />
            <span class="pan">PAN : XXXXXXXXXX</span><br />
        </div>
        <div class="col-4 qrCode ">
            <img src="qr/temp/testa06811ffd49a0edec164affb0124b57e.png" alt="Invoice qr_image" title="Invoice qr_image"></img>
        </div>        
    </div>
    <br/>        
    <div class="row ">
        <div class="col-6  ">
            <div class="ex_address">
                <h4>Billed to</h4>
                <span class="ex_name">Buyer Name</span><br />
                <span class="ex_addr">Address Line 1</span><br />
                <span class="ex_addr">Address Line 2</span><br />
                <span class="ex_addr">Address Line 3</span><br />
                <span class="ex_addr">Address Line 4</span><br />
            </div>
        </div>
        <div class="col-6 ">
            <div class="row ">
                <div class="col-6 invd_left">
                    Invoice No:
                </div>
                <div class="col-6 invd_right">
                    < Invoice No >
                </div>
            </div>
            <div class="row ">
                <div class="col-6 invd_left">
                    Invoice Date:
                </div>
                <div class="col-6 invd_right">
                    31-Jul-2020
                </div>
            </div>
            <div class="row ">
                <div class="col-6  invd_left">
                    Service Code (Tariff)
                </div>
                <div class="col-6  invd_right">
                    9985
                </div>
            </div>
            <div class="row ">
                <div class="col-6  invd_left">
                    Place of Supply
                </div>
                <div class="col-6  invd_right">
                    
                </div>
            </div>
            <div class="row ">
                <div class="col-6  invd_left">
                    State Code
                </div>
                <div class="col-6  invd_right">
                    N.A
                </div>
            </div>
            <div class="row ">
                <div class="col-6  invd_left">
                    Country of Destination
                </div>
                <div class="col-6  invd_right">
                    
                </div>
            </div>


        </div>
    </div>
    <br/> 
    <div class="row head_below">
        <div class="col-12  ">
            <div class="row import_code">
                <div class="col-5  import_code " style="border: solid 1px;">
                    Import Export Code : 
                </div>
                <div class="col-7 " style="border: solid 1px;">
                    Contract/Purchase Order No.and Date : 
                </div>
            </div>
            <div class="row  in_irn" style="border: solid 1px;">
                <div class="col-12  irn ">
                    Irn No : 
                </div>
            </div>
            <div class="row " style="border: solid 1px;">
                <div class="col-12  ln21 ">
                    short details
                </div>
            </div>
            <div class="row " style="border: solid 1px;">
                <div class="col-12  ln22 ">
                    short description
                </div>
            </div>
        </div>
    </div>
    <div class="row product">
        <div class="col-12 " style="border: solid 1px;">
            <div class="row">
                <div class="col-1 " style="border: solid 1px;">
                    SL.No.
                </div>
                <div class="col-5  text-center" style="border: solid 1px;">
                    Particulars
                </div>
                <div class="col-1 " style="border: solid 1px;">
                    HSN / SAC
                </div>
                <div class="col-1 " style="border: solid 1px;">Currency</div>
                <div class="col-2 " style="border: solid 1px;">Amount In USD</div>
                <div class="col-2 " style="border: solid 1px;">Amount In INR</div>                
                <!-- <div class="col-2 " style="border: solid 1px;">Total Amount</div> -->
            </div>
            <div class="row">
                <div class="col-1 " style="border-right: solid 1px;">
                    1.
                </div>
                <div class="col-5  text-left" style="border-right: solid 1px;">
                    particulars of Product/Service

                </div>
                <div class="col-1 " style="border-right: solid 1px; text-align:center;">
                    <div class="row text-center">9985</div>
                </div>
                <div class="col-1 " style="border-right: solid 1px; text-align:center;">
                    <div class="row text-center">USD</div>                    
                </div>
                <div class="col-2 " style="border-right: solid 1px; text-align:right;">
                    <div class="row float-right">4,377,809.00  </div>
                    
                </div>
                <div class="col-2 " style="border-right: solid 1px; text-align:right;">
                    <div class="row float-right">31,95,80,057.00  </div>                    
                </div>
                
                <!-- <div class="col-2  " style="border-right: solid 1px;">
                    <div class="col-12 text-right"> 4,377,809.00
                    </div>                    
                </div> -->
            </div>
            <div class="row">
                <div class="col-1 " style="border-right: solid 1px;">
                    <br/>
                </div>
                <div class="col-5 text-center" style="border-right: solid 1px;">
                <br/>
                </div>
                <div class="col-1 " style="border-right: solid 1px;">

                </div>
                <div class="col-1 " style="border-right: solid 1px;"><br/></div>
                <div class="col-2 " style="border-right: solid 1px;"><br/></div>
                <div class="col-2 " style="border-right: solid 1px;"><br/></div>
                
                <!-- <div class="col-2 text-right" style="border-right: solid 1px;"><br/></div> -->
            </div>
            <div class="row">
                <div class="col-1 " style="border-right: solid 1px;">
                    <br/>
                </div>
                <div class="col-5 text-center" style="border-right: solid 1px;">
                <br/>
                </div>
                <div class="col-1 " style="border-right: solid 1px;">

                </div>
                <div class="col-1 " style="border-right: solid 1px;"><br/></div>
                <div class="col-2 " style="border-right: solid 1px;"><br/></div>
                <div class="col-2 " style="border-right: solid 1px;"><br/></div>                
                <!-- <div class="col-2 text-right" style="border-right: solid 1px;"><br/></div> -->
            </div>
            <div class="row">
                <div class="col-1 " style="border-right: solid 1px;">
                    <br/>
                    <br/>
                    <br/>
                    <br/>
                    <br/>
                    <br/>
                    <br/>
                    <br/>
                    <br/>
                    
                </div>
                <div class="col-5 text-center" style="border-right: solid 1px;">
                <br/>
                </div>
                <div class="col-1 " style="border-right: solid 1px;">

                </div>
                <div class="col-1 " style="border-right: solid 1px;"><br/></div>
                <div class="col-2 " style="border-right: solid 1px;"><br/></div>
                <div class="col-2 " style="border-right: solid 1px;"><br/></div>
                
                <!-- <div class="col-2 text-right" style="border-right: solid 1px;"><br/></div> -->
            </div>
            <div class="row lastB4">
                <div class="col-1 " style="border-right: solid 1px;">
                    <br/>
                </div>
                <div class="col-4  text-center" > <!--style="border-right: solid 1px;" -->
                <br/>
                </div>
                <div class="col-1 " style="border-right: solid 1px;">

                </div>
                <div class="col-4 text-center" style="border: solid 1px;">
                NET TAXABLE VALUE
                </div>
                <div class="col-2 text-right" style="border: solid 1px;"> 31,95,80,057.00</div>
            </div>
            <div class="row last">
                <div class="col-1 " style="border-right: solid 1px;">
                    <br/>
                </div>
                <div class="col-4 text-center" > <!--style="border-right: solid 1px;" -->
                <br/>
                </div>
                <div class="col-1 " style="border-right: solid 1px;">

                </div>
                <div class="col-4 text-center" style="border: solid 1px;">
                GST (Zero Rated) 0% 
                </div>
                <div class="col-2 text-center" style="border: solid 1px;">-</div>
            </div>
            <div class="row lastNext">
                <div class="col-6  text-justify" style="border: solid 1px;">
                Amount In Words: Thirty One Crore Ninety five lakhs eighty thousand and fifty seven rupees only.
                </div>
                <div class="col-4  text-center" style="border: solid 1px;" >
                Total
                </div>
                <div class="col-2  text-right" style="border: solid 1px;"> 31,95,80,057.00 </div>
            </div>
        </div>
    </div>
    <div class="row " style="border: solid 1px;">
        <div class="col-12">
    Whether Tax payable under Reverse Charge : No </div>
    </div>

    <div class="row">
        <div class="col-12">        <br/>
            <div class="row d-flex justify-content-center">
                <div class="col-11  center" style="border : solid 1px; border-radius: 15px;">
                    <div class="row">
                        <div class="col-12 payment_heading">
                        Payment Instructions: 
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12 payment_DetailRow">
                        1. Payment Terms :  30 days
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12 payment_DetailRow">
                        2. Payment should be made to XXX Company Name XXX;
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12 payment_DetailRow">
                        3. The remittance should specifically indicate that payment is being made for this invoice.
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12 payment_DetailRow">
                        4. Wire Transfer: XXX Company Bank XXX, Company Address
                        </div>
                    </div>
                    <div class="row ">
                        <div class="col-12 payment_DetailRow text-cener">
                        Authorised Dealers Code No.:XXXX – XXXX;  EEFC A/C No.XXXX.
                        </div>
                    </div>
                    
                </div>                
            </div>
            <div class="col-12 text-right bottom_signHead">
            XXX Company Name XXX
            </div>
            <div class="col-12 text-left ">
                <div class="col-6">
                All transactions covered by this Invoice are subject to the terms and conditions which have been agreed by the parties to the transaction.
                <br/>
                <br/>
                <br/>
                <br/>
                </div>
                <div class="col-6">

                </div>
            </div>
            <div class="col-12 ">
                <div class="col-6 text-left ">
                    <span>Place : XXXXXXXXXXXX</span><br/>
                    <span>Date  : 31-Jul-2020</span>
                </div>
                <div class="col-6 text-right float-right">
                    <span></span>
                    <span>Authorized Signatory</span>
                </div>
            </div>
        </div>
    </div>

    <div class="row d-flex justify-content-center" style="border: solid 1px; border-radius:5px;">
        <div class="col-10 text-center">
        Registered Office: XXX Company Name XXX; Footer Address.<br/><br/>
        </div>
    </div>

</div>

<script>
$(document).ready(function(){    
    // $("div").click(divClicked);
    
});

function divClicked() {    
    var divHtml = $(this).html();
    var editableText = $("<textarea />");
    editableText.val(divHtml);
    $(this).replaceWith(editableText);
    editableText.focus();
    // setup the blur event for this new textarea
    editableText.blur(editableTextBlurred);
}

$(editableText).blur(function() {
    // Preserve the value of textarea
    var html = $(this).val();
    // create a dynamic div
    var viewableText = $("<div>");
    // set it's html 
    viewableText.html(html);
    // replace out the textarea
    $(this).replaceWith(viewableText);
});

function editableTextBlurred() {
    var html = $(this).val();
    var viewableText = $("<div>");
    viewableText.html(html);
    $(this).replaceWith(viewableText);
    // setup the click event for this new div
    $(viewableText).click(divClicked);
}
</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');
    //     }
    // });
    
}
</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>
<style>
.head>h2 {
    color: blue;
    font-family: Times New Roman;
    font-size: 20pt;
}

.logo {
    font-family: Arial;
    font-size: 82pt;
    font-weight: bold;
    padding-left: 5%;
}

.logo>span {
    color: orange;
    font-family: Arial;
    font-size: 82pt;
    font-weight: bold;
}

.C_name {
    color: blue;
    font-family: Times New Roman;
    font-size: 16pt;
    font-weight: bold;

}

.C_addr {
    font-family: Times New Roman;
    font-size: 14pt;
    
}

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

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

.ex_address>.ex_name {
    color: blue;
    font-family: Times New Roman;
    font-size: 14pt;
    font-weight: bold;
    padding-left: 8%;
}

.ex_address>.ex_addr {
    font-family: Times New Roman;
    font-size: 12pt;
    padding-left: 8%;
}

.ex_address {
    border: 1px solid;
    margin-top: 5px;
    border-radius: 15px;
}

.ex_address > h4 {

    font-family: Bookman Old Style;
    font-weight: bold;
    font-size: 7 pt;
    padding-left: 10%;
    color: blue;
}

.invd_right {
    font-family: Times New Roman;
    font-size: 12pt;
    padding-left: 5%;
    border : solid 1px;
}

.invd_left {
    font-family: Times New Roman;
    font-size: 12pt;
    font-weight: bold;
    padding-left: 5%;
    border-left: solid 1px;
    border-top: solid 1px;
    border-bottom: solid 1px;

}

/* .ln21 ,.irn ,.import_code{
    border : solid 1px;
} */

.head_below{
    font-family: Times New Roman;
    font-size: 13pt;
}

.product{
    font-family: Times New Roman;
    font-size: 12pt;
}

.payment_heading{    
    color: blue;
    font-family: Times New Roman;
    font-size: 12pt;
    font-weight : bold;
}
.payment_DetailRow{
    
    font-family: Times New Roman;
    font-size: 12pt;
    
}
.bottom_signHead{
    font-family : ;Book Antiqua;
    font-size: 12pt;
    font-weight : bold;
}

.border-right{
    border-right : solid 1px;
}
#invoice{
    border : solid 1px;
    border-radius : 10px;
}
</style>