<!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">
    <title>Document</title>
    <script src="/header/jquery.min.js"></script>
</head>

<body>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #FAFAFA;
            font: 12pt "Tahoma";
        }

        * {
            box-sizing: border-box;
            -moz-box-sizing: border-box;
        }

        #mail_devis {
            width: 21cm;
            min-height: 29.7cm;
            padding: 2cm;
            margin: 1cm auto;
            border: 1px #D3D3D3 solid;
            border-radius: 5px;
            background: white;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
        }

        @page {
            size: A4;
            margin: 0;
        }

        @media print {
            #mail_devis {
                margin: 0;
                border: initial;
                border-radius: initial;
                width: initial;
                min-height: initial;
                box-shadow: initial;
                background: initial;
                page-break-after: always;
            }
        }
    </style>

    <!--a href="/home"><img style="width: 15vmax;margin: auto;display: block;" src="/images/logopng.png" alt=""></a-->
    <hr>
    <div id="mail_devis" style="width: 100%;margin: auto;position: relative;">
        <h2 style="text-align: center; color: #3F3C3C;">SUMMARY OF YOUR QUOTE</h2>
        <div id="my_header" style="overflow: auto;height: 100%;margin: auto;min-width: 50vw;">
            <ul style="list-style: none;float: left;vertical-align: top;padding-left: 0;">
                <li><a href="/"><img style="width: 10vmax;" src="/images/futuretech.png" alt=""></a></li>
                <li>Al WAHDA, N°115</li>
                <li>Tanger 90000</li>
                <li>06 94 35 49 84</li>
            </ul>
            <div style="float: right;margin-right: 1%;">
                <ul style="list-style: none;display:inline-block;">
                    <h3 style="text-align: left;">Shipping adress:</h3>
                    <li>
                        <%=client_infos.fname%>
                            <%=client_infos.lname%>
                    </li>
                    <li>
                        <%=client_infos.adress%>
                    </li>
                    <li>
                        <%=client_infos.city%>, <%=client_infos.zip%>
                    </li>
                    <li>
                        <%=client_infos.phone%>
                    </li>
                </ul>
                <ul style="list-style: none;display:inline-block;">
                    <h3 style="">Billing adress:</h3>
                    <li>
                        <%=client_infos.billing_fname%>
                            <%=client_infos.billing_lname%>
                    </li>
                    <li>
                        <%=client_infos.billing_adress%>
                    </li>
                    <li>
                        <%=client_infos.billing_city%>, <%=client_infos.billing_zip%>
                    </li>
                    <li>
                        <%=client_infos.billing_phone%>
                    </li>
                </ul>
            </div>
        </div>

        <br>

        <div style="width: 50%;margin: auto;">
            <!-------- mail table -->
            <table border="1" style="width: 100%;min-width:max-content;">
                <thead>
                    <th>Product</th>
                    <th>Quantity</th>
                    <th>Price</th>
                </thead>
                <tbody">
                    <% full_products_cart.forEach(function(f_product){ %>
                        <tr>
                            <td>
                                <%=f_product.product.name%>
                            </td>
                            <td>
                                <%=f_product.qty%>
                            </td>
                            <td>
                                <%=f_product.product.price%> DH
                            </td>
                        </tr>
                        <% }); %>
                            <tr style="border: none;text-align: right;">
                                <td style="border: none;"></td>
                                <td style="border: none;">SubTotal:</td>
                                <td style="border: none;">
                                    <%=total%> DH
                                </td>
                            </tr>
                            <tr style="border: none;text-align: right;">
                                <td style="border: none;"></td>
                                <td style="border: none;">Shipping:</td>
                                <td style="border: none;">
                                    <%=shipping%> DH
                                </td>
                            </tr>
                            <tr style="border: none;text-align: right;">
                                <td style="border: none;"></td>
                                <td style="border: none;font-weight: bold;">Total HT:</td>
                                <td style="border: none;font-weight: bold;">
                                    <%=parseFloat(total)+parseFloat(shipping)%> DH
                                </td>
                            </tr>
                            <!--tr style="border: none;text-align: right;">
                                    <td style="border: none;"></td>
                                    <td style="border: none;font-weight: bold;">Total TTC:</td>
                                    <td style="border: none;font-weight: bold;"><%=parseFloat(TTC)+parseFloat(shipping)%> DH</td>
                                </tr-->
                            </tbody>
            </table>
            <!-------- mail table -->
        </div>
        <br>
        <div id="footer" style="position: absolute;bottom: 0;width: 100%;left: 0;">
            <hr>
            <p style="text-align: center;">RC :96449 / Patente :57110798 / IF : 34436253/ CNSS: 1406202 / ICE:
                002224966000055</p>
        </div>
    </div>
    <br>
    <!--div>
        we have emailed this to the adress you provided, you can <button>Download</button> it from here as well.
    </div-->
    <div id="editor"></div>

    <span id="user_email" style="display: none;">
        <%=client_infos.email%>
    </span>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.4.1/jspdf.min.js"></script>
    <script src="http://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
    <script>
        html2canvas(document.querySelector("#mail_devis")).then(function (canvas) {

            Context = canvas.getContext("2d");
            var imgData = canvas.toDataURL('image/png');
            var pdf = new jsPDF('l', "pt", [canvas.width, canvas.height]);
            pdf.addImage(imgData, 'PNG', 0, 0, canvas.width, canvas.height);
            pdf.save('quote.pdf');


            var mailBody = document.querySelector("#mail_devis").innerHTML;
            var client_email = document.querySelector("#user_email").textContent;
            fetch("/send/devis", {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({ client_email, mailBody })
            }).then(response => response.json())
                .then(data => {
                    if (data.message == "success") {
                        window.location.href = "/quote/submitted";
                    }
                });
        });

    </script>

</body>

</html>