<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <title>{{title}}</title>

    <style>

    </style>
    <style type="text/css">
        @import url('https://fonts.googleapis.com/css2?family=Wix+Madefor+Display:wght@400;500;600;700;800&display=swap');
    </style>

</head>

<body
    style="background-color:#F2F2F2; margin-top: 0px; margin-bottom: 0px; font-family: 'Wix Madefor Display', sans-serif;">

    <table style="font-size: 16px; max-width: 600px; margin: auto; height: 100vh;">
        <tbody>
            <tr>
                <td class="container">
                    <div class="content" style="margin: 0 auto;  display: block;  padding: 32px; background: 
                    #ffffff;">
                        <table class="main" cellpadding="0" cellspacing="0"
                            style="border-radius: 8px; margin:auto; background-clip: padding-box;">
                            <tbody>

                                <tr>
                                    <td class="aligncenter content-block"
                                        style="text-align: center; font-size: 12px; padding-block: 28px;">
                                         <a href="#" style="color: #999; list-style: none; text-decoration: none;"><img
                                                src="http://goodliving.nyc3.digitaloceanspaces.com/image/original/email_logo_1763718451650.png"
                                                alt="log" style="max-width: 40%; margin-bottom: 10px;" >
                                        </a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <h5
                                            style="font-size: 18px ;font-weight: 800; margin: 0; margin-bottom: 24px; text-decoration: underline; text-align: center;">
                                            Tax Invoice</h5>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                        <table
                            style="border: 1px solid #E5E5E5; border-radius: 8px; width: 800px; margin: auto; margin-bottom: 20px;">
                            <tbody>
                                <tr>
                                    <td
                                        style="width: 50%; padding: 10px 14px; border-right: 1px solid #E5E5E5; border-bottom: 1px solid #E5E5E5;">
                                        <label for="" style="font-weight: 600; color: #828282;">Client:</label>
                                        <span
                                            style="color: #121212; font-weight: 600; margin-bottom: 0; margin-left: auto; float: right;">{{client_full_name}}</span>
                                    </td>
                                    <td style="width: 50%; padding: 10px 14px; border-bottom: 1px solid #E5E5E5;">
                                        <label for="" style="font-weight: 600; color: #828282;">Order No:</label>
                                        <span
                                            style="color: #121212; font-weight: 600; margin-bottom: 0; margin-left: auto; float: right;">{{order_id}}</span>
                                    </td>
                                </tr>
                                <tr>
                                    <td
                                        style="width: 50%; padding: 10px 14px; border-right: 1px solid #E5E5E5; border-bottom: 1px solid #E5E5E5;">
                                        <label for="" style="font-weight: 600; color: #828282;">Address:</label>
                                        <span
                                            style="color: #121212; font-weight: 600; margin-bottom: 0; margin-left: auto; float: right;">
                                            {{address}}</span>
                                    </td>
                                    <td style="width: 50%; padding: 10px 14px; border-bottom: 1px solid #E5E5E5;">
                                        <label for="" style="font-weight: 600; color: #828282;">Invoice No:</label>
                                        <span
                                            style="color: #121212; font-weight: 600; margin-bottom: 0; margin-left: auto; float: right;">{{invoice_no}}</span>
                                    </td>
                                </tr>
                                <tr>
                                    <td
                                        style="width: 50%; padding: 10px 14px; border-right: 1px solid #E5E5E5; border-bottom: 1px solid #E5E5E5;">
                                        <label for="" style="font-weight: 600; color: #828282;">Mobile No:</label>
                                        <span
                                            style="color: #121212; font-weight: 600; margin-bottom: 0; margin-left: auto; float: right;">
                                            {{phone_no}}</span>
                                    </td>
                                    <td style="width: 50%; padding: 10px 14px; border-bottom: 1px solid #E5E5E5;">
                                        <label for="" style="font-weight: 600; color: #828282;">Date:</label>
                                        <span
                                            style="color: #121212; font-weight: 600; margin-bottom: 0; margin-left: auto; float: right;">{{date}}</span>
                                    </td>
                                </tr>
                                <tr>
                                    {{!-- <td style="width: 50%; padding: 10px 14px; border-right: 1px solid #E5E5E5; ">
                                        <label for="" style="font-weight: 600; color: #828282;">TRN:</label>
                                        <span
                                            style="color: #121212; font-weight: 600; margin-bottom: 0; margin-left: auto; float: right;">{{email}}</span>
                                    </td> --}}
                                    <td style="width: 50%; padding: 10px 14px; ">
                                        <label for="" style="font-weight: 600; color: #828282;">Email:</label>
                                        <span
                                            style="color: #121212; font-weight: 600; margin-bottom: 0; margin-left: auto; float: right;">{{email}}</span>
                                    </td>
                                </tr>
                                {{!-- <tr>
                                    <td colspan="4" style=" padding: 10px 14px; border-top: 1px solid #E5E5E5; ">
                                        <label for="" style="font-weight: 600; color: #828282;">Subject:</label>
                                        <span
                                            style="color: #121212; font-weight: 600; margin-bottom: 0; margin-left: 5px; ">Lorem
                                            ipsum dolor sit amet, consectetur adipiscing elit.</span>
                                    </td>
                                </tr> --}}

                            </tbody>
                        </table>
                        <table
                            style="border: 1px solid #E5E5E5; border-radius: 8px; width: 800px; margin: auto; margin-top: 50px; margin-bottom: 20px;">
                            <tbody>
                                <tr>
                                    <td
                                        style=" padding: 10px 14px; border-right: 1px solid #E5E5E5; border-bottom: 1px solid #E5E5E5;">
                                        <label for="" style="font-weight: 600; color: #828282;">Sr.No.</label>
                                    </td>
                                    <td
                                        style="width: 300px; padding: 10px 14px; border-right: 1px solid #E5E5E5; border-bottom: 1px solid #E5E5E5;">
                                        <label for="" style="font-weight: 600; color: #828282;">Description</label>

                                    </td>
                                    <td
                                        style=" padding: 10px 14px;border-right: 1px solid #E5E5E5; border-bottom: 1px solid #E5E5E5;">
                                        <label for="" style="font-weight: 600; color: #828282;">Qty
                                    </td>
                                    <td
                                        style=" padding: 10px 14px; border-right: 1px solid #E5E5E5; border-bottom: 1px solid #E5E5E5;">
                                        <label for="" style="font-weight: 600; color: #828282;">Unit Price(AED)
                                    </td>
                                    <td style=" padding: 10px 14px; border-bottom: 1px solid #E5E5E5;">
                                        <label for="" style="font-weight: 600; color: #828282;">Amount(AED)
                                    </td>
                                </tr>
                                {{#each scope}}
                                <tr>
                                    <td
                                        style=" padding: 10px 14px; border-right: 1px solid #E5E5E5; border-bottom: 1px solid #E5E5E5;">
                                        <label for="" style="font-weight: 600; color: #000;">{{inc @index}}</label>
                                    </td>
                                    <td
                                        style=" padding: 10px 14px; border-right: 1px solid #E5E5E5; border-bottom: 1px solid #E5E5E5;">
                                        <label for=""
                                            style="font-weight: 600; color: #000;">{{this.sub_service_name}}</label>

                                    </td>
                                    <td
                                        style=" padding: 10px 14px;border-right: 1px solid #E5E5E5; border-bottom: 1px solid #E5E5E5;">
                                        <label for="" style="font-weight: 600; color: #000;">{{this.quantity}}
                                    </td>
                                    <td
                                        style=" padding: 10px 14px; border-right: 1px solid #E5E5E5; border-bottom: 1px solid #E5E5E5;">
                                        <label for="" style="font-weight: 600; color: #000;">{{this.unit_amount}}
                                    </td>
                                    <td style="padding: 10px 14px; border-bottom: 1px solid #E5E5E5;">
                                        <label for="" style="font-weight: 600; color: #000;">AED {{this.amount}}
                                    </td>
                                </tr>
                                {{/each}}
                                 {{#if not_is_quotation_based}}
                                <tr>
                                    <td
                                        style=" padding: 10px 14px; border-right: 1px solid #E5E5E5; border-bottom: 1px solid #E5E5E5;">
                                        <label for="" style="font-weight: 600; color: #000;">1</label>
                                    </td>
                                    <td
                                        style=" padding: 10px 14px; border-right: 1px solid #E5E5E5; border-bottom: 1px solid #E5E5E5;">
                                        <label for=""
                                            style="font-weight: 600; color: #000;">{{sub_service_name}}</label>

                                    </td>
                                    <td
                                        style=" padding: 10px 14px;border-right: 1px solid #E5E5E5; border-bottom: 1px solid #E5E5E5;">
                                        <label for="" style="font-weight: 600; color: #000;">1
                                    </td>
                                    <td
                                        style=" padding: 10px 14px; border-right: 1px solid #E5E5E5; border-bottom: 1px solid #E5E5E5;">
                                        <label for="" style="font-weight: 600; color: #000;">{{subtotal}}
                                    </td>
                                    <td style="padding: 10px 14px; border-bottom: 1px solid #E5E5E5;">
                                        <label for="" style="font-weight: 600; color: #000;">AED {{subtotal}}
                                    </td>
                                </tr>
                                {{/if}}
                                {{#if is_quotation_based}}
                                <tr>
                                    <td colspan="4"
                                        style="text-align: end; padding: 10px 14px; border-right: 1px solid #E5E5E5; border-bottom: 1px solid #E5E5E5;">
                                        <label for="" style="font-weight: 600; color: #828282;">Total Amount
                                    </td>
                                    <td style="padding: 10px 14px; border-bottom: 1px solid #E5E5E5;">
                                        <label for="" style="font-weight: 600; color: #000;">AED {{subtotal}}
                                    </td>
                                </tr>
                                {{/if}}
                                {{#if not_is_quotation_based}}
                                <tr>
                                    <td colspan="4"
                                        style="text-align: end; padding: 10px 14px; border-right: 1px solid #E5E5E5; border-bottom: 1px solid #E5E5E5;">
                                        <label for="" style="font-weight: 600; color: #828282;">Subtotal
                                    </td>
                                    <td style="padding: 10px 14px; border-bottom: 1px solid #E5E5E5;">
                                        <label for="" style="font-weight: 600; color: #000;">AED {{subtotal}}
                                    </td>
                                </tr>
                                {{/if}}
                                {{#if promo_discount}}
                                <tr>
                                    <td colspan="4"
                                        style="text-align: end; padding: 10px 14px; border-right: 1px solid #E5E5E5; border-bottom: 1px solid #E5E5E5;">
                                        <label for="" style="font-weight: 600; color: #828282;">Coupons {{promo_name}}
                                    </td>
                                    <td style="padding: 10px 14px; border-bottom: 1px solid #E5E5E5;">
                                        <label for="" style="font-weight: 600; color:  #000;">AED {{promo_discount}}
                                    </td>
                                </tr>
                                {{/if}}
                                {{#if total_before_tax}}
                                <tr>
                                    <td colspan="4"
                                        style="text-align: end; padding: 10px 14px; border-right: 1px solid #E5E5E5; border-bottom: 1px solid #E5E5E5;">
                                        <label for="" style="font-weight: 600; color: #828282;">Total before tax
                                    </td>
                                    <td style="padding: 10px 14px; border-bottom: 1px solid #E5E5E5;">
                                        <label for="" style="font-weight: 600; color:  #000;">AED {{total_before_tax}}
                                    </td>
                                </tr>
                                {{/if}}
                                {{#if service_fee}}
                                <tr>
                                    <td colspan="4"
                                        style="text-align: end; padding: 10px 14px; border-right: 1px solid #E5E5E5; border-bottom: 1px solid #E5E5E5;">
                                        <label for="" style="font-weight: 600; color: #828282;">Service Fee
                                    </td>
                                    <td style="padding: 10px 14px; border-bottom: 1px solid #E5E5E5;">
                                        <label for="" style="font-weight: 600; color:  #000;">AED {{service_fee}}
                                    </td>
                                </tr>
                                {{/if}}
                                <tr>
                                    <td colspan="4"
                                        style="text-align: end; padding: 10px 14px; border-right: 1px solid #E5E5E5;border-bottom: 1px solid #E5E5E5">
                                        <label for="" style="font-weight: 600; color: #828282;">VAT
                                    </td>
                                    <td style="padding: 10px 14px; border-bottom: 1px solid #E5E5E5">
                                        <label for="" style="font-weight: 600; color:  #000;">AED {{vat}}
                                    </td>
                                </tr>
                                {{#if is_quotation_based}}
                                <tr>
                                    <td colspan="4"
                                        style="text-align: end; padding: 10px 14px; border-right: 1px solid #E5E5E5; ">
                                        <label for="" style="font-weight:800; color: #828282; ">Total(Amount+VAT)
                                    </td>
                                    <td style="padding: 10px 14px; ">
                                        <label for="" style="font-weight: 800; color:  #000;">AED {{total_amount}}
                                    </td>
                                </tr>
                                {{/if}}

                                {{#if points_used_amount}}
                                <tr>
                                    <td colspan="4"
                                        style="text-align: end; padding: 10px 14px; border-right: 1px solid #E5E5E5; ">
                                        <label for="" style="font-weight:800; color: #828282; ">Clickspert Point
                                    </td>
                                    <td style="padding: 10px 14px; ">
                                        <label for="" style="font-weight: 800; color:  #000;">AED {{points_used_amount}}
                                    </td>
                                </tr>
                                {{/if}}

                                {{#if wallets_used}}
                                <tr>
                                    <td colspan="4"
                                        style="text-align: end; padding: 10px 14px; border-right: 1px solid #E5E5E5; ">
                                        <label for="" style="font-weight:800; color: #828282; ">Wallet
                                    </td>
                                    <td style="padding: 10px 14px; ">
                                        <label for="" style="font-weight: 800; color:  #000;">AED {{wallets_used}}
                                    </td>
                                </tr>
                                {{/if}}

                                {{#if not_is_quotation_based}}
                                <tr>
                                    <td colspan="4"
                                        style="text-align: end; padding: 10px 14px; border-right: 1px solid #E5E5E5; ">
                                        <label for="" style="font-weight:800; color: #828282; ">Total
                                    </td>
                                    <td style="padding: 10px 14px; ">
                                        <label for="" style="font-weight: 800; color:  #000;">AED {{total_amount}}
                                    </td>
                                </tr>
                                {{/if}}

                            </tbody>
                        </table>
                        {{#if is_accpted_ewq}}
                        <table
                            style="border: 1px solid #E5E5E5; border-radius: 8px; width: 800px; margin: auto; margin-top: 50px; margin-bottom: 20px;">
                            <tbody>

                                <tr>
                                    <td
                                        style=" padding: 10px 14px; border-right: 1px solid #E5E5E5; border-bottom: 1px solid #E5E5E5;">
                                        <label for="" style="font-weight: 600; color: #828282;">Sr.No.</label>
                                    </td>
                                    <td
                                        style="width: 500px; padding: 10px 14px; border-right: 1px solid #E5E5E5; border-bottom: 1px solid #E5E5E5;">
                                        <label for="" style="font-weight: 600; color: #828282;">Extra Work
                                            Description</label>

                                    </td>
                                    <td style=" padding: 10px 14px; border-bottom: 1px solid #E5E5E5;">
                                        <label for="" style="font-weight: 600; color: #828282;">Amount(AED)
                                    </td>
                                </tr>
                                <tr>
                                    <td
                                        style=" padding: 10px 14px; border-right: 1px solid #E5E5E5; border-bottom: 1px solid #E5E5E5;">
                                        <label for="" style="font-weight: 600; color: #000;">01</label>
                                    </td>
                                    <td
                                        style=" padding: 10px 14px; border-right: 1px solid #E5E5E5; border-bottom: 1px solid #E5E5E5;">
                                        <label for=""
                                            style="font-weight: 600; color: #000;">{{sub_service_name}}</label>

                                    </td>
                                    <td style=" padding: 10px 14px; border-bottom: 1px solid #E5E5E5;">
                                        <label for="" style="font-weight: 600; color: #000;">AED {{work_quotation_subtotal}}
                                    </td>
                                </tr>
                                <tr>
                                    <td colspan="2"
                                        style="text-align: end; padding: 10px 14px; border-right: 1px solid #E5E5E5; border-bottom: 1px solid #E5E5E5;">
                                        <label for="" style="font-weight: 600; color: #828282;">Total Amount
                                    </td>
                                    <td style="padding: 10px 14px; border-bottom: 1px solid #E5E5E5;">
                                        <label for="" style="font-weight: 600; color: #000;">AED
                                            {{work_quotation_subtotal}}
                                    </td>
                                </tr>
                                <tr>
                                    <td colspan="2"
                                        style="text-align: end; padding: 10px 14px; border-right: 1px solid #E5E5E5;border-bottom: 1px solid #E5E5E5">
                                        <label for="" style="font-weight: 600; color: #828282;">VAT
                                    </td>
                                    <td style="padding: 10px 14px; border-bottom: 1px solid #E5E5E5">
                                        <label for="" style="font-weight: 600; color:  #000;">AED {{work_quotation_vat}}
                                    </td>
                                </tr>
                                <tr>
                                    <td colspan="2"
                                        style="text-align: end; padding: 10px 14px; border-right: 1px solid #E5E5E5; border-bottom: 1px solid #E5E5E5;">
                                        <label for="" style="font-weight: 600; color: #828282;">Extra work
                                            Total(Amount+VAT)
                                    </td>
                                    <td style="padding: 10px 14px; border-bottom: 1px solid #E5E5E5;">
                                        <label for="" style="font-weight: 600; color:  #000;">AED
                                            {{work_quotation_total}}
                                    </td>
                                </tr>
                                <tr>
                                    <td colspan="2"
                                        style="text-align: end; padding: 10px 14px; border-right: 1px solid #E5E5E5; ">
                                        <label for="" style="font-weight:800; color: #828282; ">Grand Total(Total+Extra
                                            work)
                                    </td>
                                    <td style="padding: 10px 14px; ">
                                        <label for="" style="font-weight: 800; color:  #000;">AED {{grand_total}}
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                        {{/if}}
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
    <script>
        const div = document.getElementById('termcondition')
        div.innerHTML = "{{terms_and_conditions}}"
    </script>
</body>

</html>