<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Invoice Template</title>

<div style="max-width: 800px; margin: auto; border: 1px solid #ccc; padding: 20px;">
     <table style="width: 100%; border-collapse: collapse; font-size: 1rem; margin-bottom: 40px; border: 0;">
        <tbody><tr style="border: 0;">
            <td style="border: 0;   vertical-align: top; padding-bottom: 20px;">
              <div style="margin-bottom: 20px; vertical-align: top !important;">
                <img src="{{logo}}" style="height: 80px;" alt="logo">
              </div>
            <h1 style="margin: 0; background-color: #FF008A; padding: 10px; font-size: 24px; 
    color: #fff;">{{company_name}}</h1>
<p style="color: #6c757d; font-size: 1rem;">Thank you for your business!</p>
            
        </td>
        <td style="border: 0; vertical-align: top; padding-bottom: 20px; padding-top: 80px;">
            <p style="margin: 0; text-align: right;">Date: {{date}}<br>
                Invoice Number: {{id}}<br>Invoice&nbsp;For: Booking</p>
         </td>
       </tr>
    </tbody>
   </table>

    <table style="width: 100%; border-collapse: collapse; font-size: 1rem; margin-bottom: 40px; border: 0;">
        <tbody><tr style="border: 0;">
            <td style="border: 0;   vertical-align: top; padding-bottom: 20px;">
                <h4 style="margin-bottom: 10px;  background-color: #FF008A; color: #fff; padding: 10px; font-size: 1.25rem;">From:</h4>
                <p style="margin: 0;  padding: 10px; font-size: 1rem;">
                    <strong>{{company_name}}</strong><br>
                    {{company_address}}<br>
                    Email: {{company_email}}<br>
                    Phone: {{company_phone}}
                </p>
            </td>
            <td style="border: 0; vertical-align: top; padding-bottom: 20px;">
                <h4 style="margin-bottom: 10px;  background-color: #FF008A; color: #fff; padding: 10px; font-size: 1.25rem;">To:</h4>
                <p style="margin: 0; font-size: 1rem;">
                    <strong>{{user_name}}</strong><br>
                    {{user_address}}<br>
                    Email: {{user_email}}<br>
                    Phone: {{user_phone}}
                </p>
            </td>
        </tr>
    </tbody></table>


    <table style="width: 100%; border-collapse: collapse; margin-bottom: 20px;">
        <thead>
            <tr style="background-color: #FF008A; color: #fff;">
                <th style="padding: 10px; text-align: left; border: 1px solid #ccc;">Description</th>
                <th style="padding: 10px; text-align: right; border: 1px solid #ccc;">Unit Cost</th>
                <th style="padding: 10px; text-align: right; border: 1px solid #ccc;">Rate/Hr $</th>
                <th style="padding: 10px; text-align: right; border: 1px solid #ccc;">Total</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td style="padding: 10px; border: 1px solid #ccc;">{{category}}</td>
                <td style="padding: 10px; text-align: right; border: 1px solid #ccc;">${{service_amount}}</td>
                <td style="padding: 10px; text-align: right; border: 1px solid #ccc;">{{ratehour}}</td>
                <td style="padding: 10px; text-align: right; border: 1px solid #ccc;">${{service_amount}}</td>
            </tr>
           
        </tbody>
    </table>

    <div style="margin-bottom: 20px; ">
        <h4 style="margin: 0; background-color: #FF008A; color: #fff; padding: 10px;">Notes</h4>
        <p style="margin: 5px 0;">It was a pleasure working with you.</p>
    </div>

   <table style="width: 50%; text-align: right; border-collapse: collapse; margin-left: auto; margin-right: 0;">
        <tbody>
            <tr>
                <td style="padding: 10px; text-align: right; border: 1px solid #ccc;">Subtotal</td>
                <td style="padding: 10px; text-align: right; border: 1px solid #ccc;">${{service_amount}}</td>
            </tr>          
            <tr>
                <td style="padding: 10px; text-align: right; border: 1px solid #ccc;">Tax rate</td>
                <td style="padding: 10px; text-align: right; border: 1px solid #ccc;">${{amount_tax}}</td>
            </tr>
            <tr>
                <td style="padding: 10px; text-align: right; border: 1px solid #ccc;">Total tax</td>
                <td style="padding: 10px; text-align: right; border: 1px solid #ccc;">${{amount_tax}}</td>
            </tr>
            <tr>
                <td style="padding: 10px; text-align: right; font-weight: bold; border: 1px solid #ccc;">Total estimate</td>
                <td style="padding: 10px; text-align: right; border: 1px solid rgb(204, 204, 204);"><span style="font-weight: bold;">${{quote}}</span></td>
            </tr>
        </tbody>
    </table>

    <footer style="text-align: center; margin-top: 20px; color: #555;">
        <p><br></p>
    </footer>
</div>