<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Estimate from {{ company }}</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: Arial, Helvetica, sans-serif;
            background-color: #f4f4f4;
        }
        .email-container {
            max-width: 600px;
            margin: 0 auto;
            background-color: #ffffff;
        }
        .letterhead {
            text-align: center;
            padding: 30px 20px;
            background-color: #ffffff;
            border-bottom: 3px solid #0066cc;
        }
        .letterhead img {
            max-width: 250px;
            height: auto;
        }
        .company-name {
            font-size: 28px;
            font-weight: bold;
            color: #333333;
            margin: 10px 0;
        }
        .content {
            padding: 40px 30px;
        }
        .greeting {
            font-size: 18px;
            color: #333333;
            margin-bottom: 20px;
        }
        .intro-text {
            font-size: 16px;
            color: #555555;
            line-height: 1.6;
            margin-bottom: 30px;
        }
        .estimate-box {
            background-color: #f8f9fa;
            border: 2px solid #e0e0e0;
            border-radius: 8px;
            padding: 25px;
            margin: 30px 0;
        }
        .estimate-label {
            font-size: 14px;
            color: #666666;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 5px;
        }
        .estimate-value {
            font-size: 16px;
            color: #333333;
            margin-bottom: 20px;
            line-height: 1.5;
        }
        .estimate-value:last-child {
            margin-bottom: 0;
        }
        .price-section {
            background-color: #0066cc;
            color: #ffffff;
            padding: 20px;
            border-radius: 8px;
            margin-top: 20px;
            text-align: center;
        }
        .price-label {
            font-size: 14px;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 10px;
        }
        .price-amount {
            font-size: 36px;
            font-weight: bold;
        }
        .additional-section {
            background-color: #fff9e6;
            border-left: 4px solid #ffc107;
            padding: 20px;
            margin: 30px 0;
            border-radius: 4px;
        }
        .additional-label {
            font-size: 14px;
            color: #856404;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 10px;
            font-weight: bold;
        }
        .additional-text {
            font-size: 15px;
            color: #333333;
            line-height: 1.6;
            white-space: pre-wrap;
        }
        .action-buttons {
            text-align: center;
            margin: 40px 0;
            padding: 20px;
        }
        .btn {
            display: inline-block;
            padding: 14px 28px;
            margin: 8px;
            text-decoration: none;
            border-radius: 6px;
            font-size: 16px;
            font-weight: bold;
            transition: opacity 0.3s;
        }
        .btn:hover {
            opacity: 0.85;
        }
        .btn-accept {
            background-color: #28a745;
            color: #ffffff;
        }
        .btn-decline {
            background-color: #dc3545;
            color: #ffffff;
        }
        .btn-call {
            background-color: #ffc107;
            color: #333333;
        }
        .closing-text {
            font-size: 16px;
            color: #555555;
            line-height: 1.6;
            margin-top: 30px;
        }
        .contact-info {
            font-size: 15px;
            color: #0066cc;
            font-weight: bold;
            margin-top: 15px;
        }
        .footer {
            background-color: #f8f9fa;
            padding: 30px;
            text-align: center;
            border-top: 1px solid #e0e0e0;
        }
        .footer-text {
            font-size: 14px;
            color: #666666;
            line-height: 1.6;
        }
        @media only screen and (max-width: 600px) {
            .content {
                padding: 30px 20px;
            }
            .estimate-box {
                padding: 20px;
            }
            .price-amount {
                font-size: 28px;
            }
            .company-name {
                font-size: 24px;
            }
            .btn {
                display: block;
                margin: 10px auto;
                max-width: 250px;
            }
        }
    </style>
</head>
<body>
    <div class="email-container">
        <!-- Letterhead Section -->
        <div class="letterhead">
            {% if letterhead_image %}
            <img src="{{ letterhead_image }}" alt="{{ company }} Logo">
            {% else %}
            <div class="company-name">{{ company }}</div>
            {% endif %}
        </div>

        <!-- Main Content -->
        <div class="content">
            <div class="greeting">Hello {{ customer_name }},</div>
            
            <div class="intro-text">
                Thank you for considering {{ company }} for your project. We are pleased to provide you with the following estimate for the services requested.
            </div>

            <!-- Estimate Details Box -->
            <div class="estimate-box">
                <div class="estimate-label">Service Location</div>
                <div class="estimate-value">{{ address }}</div>

                <!-- Price Section -->
                <div class="price-section">
                    <div class="price-label">Total Estimate</div>
                    <div class="price-amount">{{ price }}</div>
                </div>
            </div>

            <!-- Additional Notes (Conditional) -->
            {% if additional %}
            <div class="additional-section">
                <div class="additional-label">Additional Notes</div>
                <div class="additional-text">{{ additional }}</div>
            </div>
            {% endif %}

            <!-- Action Buttons -->
            <div class="action-buttons">
                <a href="{{ base_url }}/api/method/custom_ui.api.public.estimates.update_response?name={{ estimate_name }}&response=Accepted" class="btn btn-accept">Accept</a>
                <a href="{{ base_url }}/api/method/custom_ui.api.public.estimates.update_response?name={{ estimate_name }}&response=Rejected" class="btn btn-decline">Decline</a>
                <a href="{{ base_url }}/api/method/custom_ui.api.public.estimates.update_response?name={{ estimate_name }}&response=Requested%20call" class="btn btn-call">Request a Call</a>
            </div>

            <!-- Closing -->
            <div class="closing-text">
                This estimate is valid for 30 days from the date of this email. If you have any questions or would like to proceed with this estimate, please don't hesitate to contact us.
                {% if company_phone %}
                <div class="contact-info">Call us at: {{ company_phone }}</div>
                {% endif %}
                <br>
                We look forward to working with you!
            </div>
        </div>

        <!-- Footer -->
        <div class="footer">
            <div class="footer-text">
                <strong>{{ company }}</strong><br>
                This is an automated message. Please do not reply directly to this email.
            </div>
        </div>
    </div>
</body>
</html>
