{% extends 'layout/master.html' %}
{% block addcss %}

{% endblock addcss %}
{% block layout %}
<center>Loading</center>
<div id="exportContent" hidden>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>	
        .kbw-signature {
        display: inline-block;
        border: 1px solid #a0a0a0;
        -ms-touch-action: none;
        }
        .kbw-signature-disabled {
        opacity: 0.35;
        }
        .text-gray{
        /*color:rgb(173,185,202);*/
        color:#717171;
        }
        .text-blue{
        font-family: "Century Gothic Bold";
        color: rgba(5, 5, 5, 0.692);
        font-weight: bold;
        /*font-size: 11.0000pt;*/
        font-size:20px;
        line-height:30px;
        }
        h6{
        font-family: "Century Gothic";
        font-weight:700;
        }
        h6..text-blue{
        font-family: "Century Gothic";
        font-weight:700;
        }
        p{
        font-family: "Century Gothic";
        }
        p{
        margin-bottom:7px;
        }
        h6{
        margin-bottom:13px;
        }
        a.clear_sign.btn.btn-border.btn-round.border-active {
            padding: 8px 25px;
            font-size: 14px !important;
            text-transform: uppercase;
            color: #000;
            border: 1px solid #000 !important;
            border-radius: 50px;
            margin: 0 10px 0 0;
            /* box-shadow: none !important; */
            line-height: 20px;
        }
        a.save-signature{
            border-radius:50px;
            padding:8px 25px !important;
            font-size:14px;
            line-height:20px;
            background:#0b9cda !important;
            border:1px solid #0b9cda !important;
            color:#fff !important;
            outline:none !important;
            box-shadow: none !important;
        }
        input.btn.btn-sm.btn-danger {
        border-radius: 50px;
        padding: 9px 30px;
        font-size: 15px;
        text-transform: uppercase;
        background: #000 !important;
        border: 1px solid #000 !important;
        outline: none !important;
        font-weight: 600;
        letter-spacing: 1px;
        box-shadow: none !important;
        }
        
        input.btn.btn-sm.btn-danger:hover,
        input.btn.btn-sm.btn-danger:focus{
            background:#000 !important;
        }
        
        .fsize-18{
            font-size:18px;
        }
        
        table.tablepdf tr th{
            background:#9e9d9c !important;
            color:#fff !important;
        }
        
        table.tablepdf{
            border-collapse:collapse;
            border:1px solid #9e9d9c;
        }
        
        table.tablepdf tr.subtotal{
            border-top:2px solid #333;
        }
        
        table.tablepdf tr.gtotal{
            border-bottom:2px solid #333;
        }
        
        table.tablepdf tr.gtotal td{
            background:#333;
            color:#fff !important;
        }
        
        table.table.border-zero{
            border:0 !important;
        }
        
        .auth-page{
            background:#fff;
        }
        
        @media  screen and (max-width:991px){
        .colwrap{
        padding:0;
        }
        .logorow img{
        max-width:200px;
        height:auto;
        }
        .headingrow h2 {
        font-size: 20px;
        padding: 10px !important;
        line-height: 30px;
        }
        .sign-date .canwrap{
        width:100%;
        }
        .sign-date .canwrap > div{
        width:100% !important;
        }
        .sign-date .canwrap > div > canvas{
        width:100% !important;
        }
        }
        @media  screen and (max-width:991px) and (min-width:767px){
        .logorow > .col-md-5{
        width:50%;
        flex:unset;
        max-width:50%;
        }
        .logorow .col-md-1{
        width:0;
        flex:unset;
        max-width:0;
        padding:0;
        }
        .logorow > .col-md-5 > .row > .col-md-5{
        width:40%;
        flex:unset;
        max-width:40%;
        padding-right: 0;
        }
        .logorow > .col-md-5 > .row > .col-md-7{
        width:60%;
        flex:unset;
        max-width:60%;
        }
        }
        @media  screen and (max-width:600px){
        .headingrow h2 {
        font-size: 18px;
        padding: 10px !important;
        line-height: 30px;
        }
        .row.mb-4.pararow{
        width:100%;
        display:flex;
        align-items:center;
        }
        .logorow img {
        max-width: 200px;
        height: auto;
        display: block;
        margin: auto;
        }
        .row.mb-4.pararow .col-sm-4 {
        width: 45%;
        }
        .row.mb-4.pararow .col-sm-8{
        width:55%;
        }
        .row.mb-4.pararow .col-sm-8 p{
        margin:0;
        }
        .row.mb-4.mainformrow .text-gray {
        margin:0 0 10px;
        }
        .colwrap {
        padding: 0 15px;
        }
        .mainformrow .my-auto {
        margin: 35px 0 35px!important;
        text-align: center;
        }
        .row.mb-4.mainformrow ul {
        padding: 0 0 0 25px;
        }
        .logorow .col-md-1{
        margin:20px 0 0;
        }
        .logorow .col-md-5 .col-md-5 p{
        margin:0;
        }
        .logorow .col-md-5 .row .col-md-5{
        width: 38%;
        padding-right: 0;
        margin:0 0 10px;
        }
        .logorow .col-md-5 .row .col-md-7{
        width:62%;
        margin:0 0 10px;
        }
        }
        @page {
        size: letter portrait;
        @frame header_frame {           /* Static frame */
        -pdf-frame-content: header_content;
        left: 50pt; width: 512pt; top: 50pt; height: 40pt;
        }
        @frame content_frame {         
        left: 50pt; width: 512pt; top: 90pt; height: 632pt;
        }
        @frame footer_frame {          
        -pdf-frame-content: footer_content;
        left: 50pt; width: 512pt; top: 772pt; height: 20pt;
        }
        }
    </style>
    <div class="d-flex flex-column flex-root" id="kt_app_root">
        <div class="d-flex flex-column flex-lg-row flex-column-fluid">
            <div class="d-flex flex-column flex-lg-row-fluid w-lg-50 p-10 order-2 order-lg-1">
                <div class="d-flex  flex-column flex-lg-row-fluid" style="align-items: center;">
                    <div class="w-lg-1000px p-5">
                        <div class="auth-page">
                            {% comment %}
                            <div class="alert alert-{{class}}">
                            </div>
                            {% endcomment %}
                            {% if messages %}
                            <div class="alert alert-danger" role="alert">
                                {% for message in messages %}
                                {{ message }}
                                {% endfor %}
                            </div>
                            {% endif %}
                            <div class="table-responsive cust-table mt-2 prod-table">
                                    <table class="table table-row-dashed align-middle gs-0 gy-3 my-0 border-active tablepdf" width=""100%>
                                        <thead>
                                            <tr class="fsize-18 fw-bold text-gray-400 border-bottom-0"
                                                style="background-color:#9e9d9c">                                   
                                                <th class="p-3 fw-bold text-end" colspan="6" >
                                                    <span style="width:230px; background:#fff; padding:6px 15px;"><img  src="{{ request.scheme }}://{{ request.get_host }}/assets/media/logos/EXCITECH-AUS-50.png"  alt="Product Image" width="197" height="50"> </span>   
                                                </th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr></tr>
                                            <tr></tr>
                                            <tr></tr>
                                            <tr></tr>
                                            <tr>
                                                <td class="pe-0 " width="50%">
                                                    <span class="text-black-600 fw-bold fs-6">Excitech Australia Pty Ltd
                                                    </span>
                                                </td>                                                
                                            </tr>
                                            <tr>
                                                <td class="pe-0 " width="50%">
                                                    <span class="text-black-600 fw-bold fs-6"">30/10 Yato rd, Prestons, 2170
                                                    </span>
                                                </td>                                                
                                            </tr>
                                            <tr>
                                                <td class="pe-0 " width="50%">
                                                    <span class="text-black-600 fw-bold fs-6"><strong>Mob: </strong> 0424 362 088 
                                                    </span>
                                                </td>                                                
                                            </tr>
                                            <tr>
                                                <td class="pe-0 " width="50%">
                                                    <span class="text-black-600 fw-bold fs-6"><strong>Email: </strong> <a heref="mailto:jose@excitechaustralia.au">jose@excitechaustralia.au</a>
                                                    </span>
                                                </td>                                                
                                            </tr>
                                            <tr>
                                                <td class="pe-0 " width="50%">
                                                    <span class="text-black-600 fw-bold fs-6"><strong>Quote Date: </strong> {{quotation.quote_date}}
                                                    </span>
                                                </td>                                                
                                            </tr>
                                            <tr>
                                                <td class="pe-0 " width="50%">
                                                    <span class="text-black-600 fw-bold fs-6"><strong>Quote Number: </strong> {{ quotation.id}}
                                                    </span>
                                                </td>                                                
                                            </tr>
                                            <tr>
                                                <td class="pe-0 " width="50%">
                                                    <span class="text-black-600 fw-bold fs-6"><strong>Quote For: </strong> {{quotation.customer}}
                                                    </span>
                                                </td>                                                
                                            </tr>
                                            <tr></tr>
                                            <tr></tr>
                                            <tr></tr>
                                            <tr></tr> <tr></tr>
                                            <tr></tr>
                                            <tr></tr>
                                            <tr></tr> <tr></tr>
                                            <tr></tr>
                                            <tr></tr>
                                            <tr>
                                                <td>
                                                    <span class="text-black-600 fw-bold fs-6"><strong>{{quotation.quote_title}}</strong> </span>
                                                </td>
                                            </tr>
                                            <tr></tr>
                                            <tr></tr>
                                            <tr></tr>
                                            <tr></tr> <tr></tr>
                                            <tr></tr>
                                            <tr></tr>
                                            <tr></tr> <tr></tr>
                                            <tr></tr>
                                            <tr></tr>
                                            <tr>
                                                <td class="pe-0 " width="50%">
                                                    <span class="text-black-600 fw-bold fs-6">Regards
                                                    </span>
                                                </td>                                                
                                            </tr>
                                            <tr>
                                                <td class="pe-0 " width="50%">
                                                    <span class="text-black-600 fw-bold fs-6">Jose Ojeda
                                                    </span>
                                                </td>                                                
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                               
						

                                <br><br>
                                <div class="table-responsive cust-table mt-2 prod-table">
                                    {% for quotationitem in quotationitems %}
                                    <table class="table border-zero">
                                        <tbody>
                                            <tr>
                                                <td width="40%"><img
                                                        src="{{ request.scheme }}://{{ request.get_host }}/media/{{quotationitem.product.product_image_main}}"
                                                        style="width:100%" width="352" height="184"></td>
                                                <td width="60%" style="vertical-align:middle">
                                                    <h4 class="fs-2x fw-bold">{{quotationitem.product.product_name}}
                                                        ({{quotationitem.product.sku}})</h4>
                                                    <p class="fs-2x fw-normal">${{quotationitem.product.product_price}}
                                                    </p>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td colspan="2">
                                                    <p class="fs-3 mb-2 fw-bold">Description</p>
                                                    <p class="fs-5 fw-normal">
                                                        {% autoescape off %}{{quotationitem.product.product_description}}{% endautoescape %}
                                                    </p>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td colspan="2">
                                                </td>
                                            </tr>
                                            <tr>
                                                <td colspan="2">
                                                    <p class="fs-3 mb-2 fw-bold">Specifications</p>
                                                    <p class="fs-5 fw-normal"> {% autoescape off %}{{quotationitem.product.product_specification_contents}}{% endautoescape %}</p>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                    {% endfor %}
                                </div>
                                <br>
                                <br>
                                <div class="table-responsive cust-table mt-2 prod-table">
                                    <table
                                        class="table table-row-dashed align-middle gs-0 gy-3 my-0 border-active tablepdf">
                                        <thead>
                                            <tr class="fsize-18 fw-bold text-gray-400 border-bottom-0"
                                                style="background-color:#9e9d9c">
                                                <th class="p-3 fw-bold text-center" width="10%">Sr.No.</th>
                                                <th class="p-3 fw-bold text-start" width="20%">Item</th>
                                                <th class="p-3 fw-bold text-center" width="15%">SKU</th>
                                                <th class="p-3 fw-bold text-center" width="15%">Rate</th>
                                                <th class="p-3 fw-bold text-center" width="15%">Quantity</th>
                                                <th class="p-3 fw-bold text-end" width="25%">Total</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            {% for quotationitem in quotationitems %}
                                            <tr>
                                                <td class="pe-0 text-center" width="10%">
                                                    <span class="text-black-600 fw-bold fs-6">{{forloop.counter}}
                                                    </span>
                                                </td>
                                                <td class="pe-0 text-start" width="20%">
                                                    <span
                                                        class="text-black-600 fw-bold fs-6">{{quotationitem.product.product_name}}</span>
                                                </td>
                                                <td class="pe-0 text-center" width="15%">
                                                    <span
                                                        class="text-black-600 fw-bold fs-6">{{quotationitem.product.sku}}</span>
                                                </td>
                                                <td class="pe-0 text-center" width="15%">
                                                    <span
                                                        class="text-black-600 fw-bold fs-6">${{quotationitem.cost_per_unit}}</span>
                                                </td>
                                                <td class="pe-0 text-center" width="15%">
                                                    <span class="text-black-600 fw-bold fs-6">{{quotationitem.qty  }}</span>
                                                </td>
                                                <td class="pe-0 text-end" width="25%">
                                                    <span class="text-black-600 fw-bold fs-6">${% widthratio quotationitem.qty 1 quotationitem.cost_per_unit %}</span>
                                                </td>
                                            </tr>
                                            {% endfor %}
                                            <tr class="subtotal">
                                                <td class="text-end pe-0" colspan="5">
                                                    <span class="text-black-600 fw-bold fs-6">Sub Total
                                                    </span>
                                                </td>
                                                <td class="text-end pe-0">
                                                    <span
                                                        class="text-black-600 fw-bold fs-6">${{quotation.subtotal}}</span>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="text-end pe-0" colspan="5">
                                                    <span class="text-black-600 fw-bold fs-6">Discount {% if quotation.discount_type == '%' and quotation.discount > 0  %}({{quotation.discount_percent}}%) {% endif %}
                                                    </span>
                                                </td>
                                                <td class="text-end pe-0">
                                                    <span
                                                        class="text-black-600 fw-bold fs-6">${{quotation.discount}}</span>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="text-end pe-0" colspan="5">
                                                    <span
                                                        class="text-black-600 fw-bold fs-6">GST({{quotation.gst_percent}}%)
                                                    </span>
                                                </td>
                                                <td class="text-end pe-0">
                                                    <span class="text-black-600 fw-bold fs-6">${{quotation.gst}}</span>
                                                </td>
                                            </tr>
                                            <tr class="gtotal" style="background-color:#9e9d9c">
                                                <td class="text-end pe-0" colspan="5">
                                                    <span class="text-white-600 fw-bold fs-6">Grand Total
                                                    </span>
                                                </td>
                                                <td class="text-end pe-0">
                                                    <span
                                                        class="text-white-600 fw-bold fs-6">${{quotation.total}}</span>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <br>
                                <br>
                                <div class="table-responsive cust-table mt-2 prod-table">
                                    <table class="table border-zero">
                                        <tbody>
                                            <tr>
                                                <td colspan="2" class="text-center">
                                                    <p class="fs-3 m-0 fw-bold">CONTRACT OF SALE</p>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <div class="table-responsive cust-table mt-2 prod-table">
                                    {{contracts.content|safe}}
                                </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{% block jsscript %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/signature_pad/1.5.3/signature_pad.min.js"></script>
<script type='text/javascript'
    src="https://github.com/niklasvh/html2canvas/releases/download/0.4.1/html2canvas.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#REPLACE_GRANDTOTAL').html("$" + {{ quotation.total }});
    Export2Word('exportContent', '{{quotation.id}}.docx');
	});
    function Export2Word(element, filename = '') {
        var preHtml = "<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:w='urn:schemas-microsoft-com:office:word' xmlns='http://www.w3.org/TR/REC-html40'><head><meta charset='utf-8'><title>Export HTML To Doc</title></head><body>";
        var postHtml = "</body></html>";
        var html = preHtml + document.getElementById(element).innerHTML + postHtml;

        var blob = new Blob(['\ufeff', html], {
            type: 'application/msword'
        });

        // Specify link url
        var url = 'data:application/vnd.ms-word;charset=utf-8,' + encodeURIComponent(html);

        // Specify file name
        filename = filename ? filename + '.doc' : 'document.doc';

        // Create download link element
        var downloadLink = document.createElement("a");

        document.body.appendChild(downloadLink);

        if (navigator.msSaveOrOpenBlob) {
            navigator.msSaveOrOpenBlob(blob, filename);
        } else {
            // Create a link to the file
            downloadLink.href = url;

            // Setting the file name
            downloadLink.download = filename;

            //triggering the function
            downloadLink.click();
            window.location.replace("{% url 'quotation:list_quotation' %}");
        }

        document.body.removeChild(downloadLink);

    }

</script>

{% endblock jsscript %}
{% endblock layout %}