{% extends 'email/base.html.twig' %}

{% block title %}Quote Request Received - KitsCo{% endblock %}

{% block content %}
<div class="icon-badge icon-info">
    <span>&#128203;</span>
</div>

<h2 class="text-center">Quote Request Received</h2>
<p class="text-center text-muted">
    Thank you, {{ customer.name }}. We've received your quote request and will respond shortly.
</p>

<div class="alert alert-info">
    <h4>Request #{{ requestNumber|default('QR-' ~ 'now'|date('YmdHis')) }}</h4>
    <p>Our team is reviewing your request and will prepare a detailed quotation for you.</p>
</div>

<div class="info-box">
    <table>
        <tr>
            <td class="label">Request Date</td>
            <td class="value">{{ 'now'|date('F d, Y') }}</td>
        </tr>
        <tr>
            <td class="label">Contact Name</td>
            <td class="value">{{ customer.name }}</td>
        </tr>
        {% if customer.organization is defined and customer.organization %}
        <tr>
            <td class="label">Organization</td>
            <td class="value">{{ customer.organization }}</td>
        </tr>
        {% endif %}
        <tr>
            <td class="label">Email</td>
            <td class="value">{{ customer.contactEmail }}</td>
        </tr>
    </table>
</div>

{% if items is defined and items|length > 0 %}
<h3>Items Requested</h3>
<table class="data-table">
    <thead>
        <tr>
            <th>Product</th>
            <th class="amount">Qty</th>
        </tr>
    </thead>
    <tbody>
        {% for item in items %}
        <tr>
            <td>
                <strong>{{ item.product.name }}</strong>
                {% if item.product.sku %}<br><span style="color: #666; font-size: 12px;">SKU: {{ item.product.sku }}</span>{% endif %}
            </td>
            <td class="amount">{{ item.quantity }}</td>
        </tr>
        {% endfor %}
    </tbody>
</table>
{% endif %}

{% if notes is defined and notes %}
<h3>Additional Notes</h3>
<div style="background-color: #f8f9fa; border-radius: 8px; padding: 20px; border-left: 4px solid #1a1a2e;">
    <p style="margin: 0; white-space: pre-wrap;">{{ notes }}</p>
</div>
{% endif %}

<div class="steps">
    <h4>What Happens Next?</h4>
    <ol>
        <li>Our sales team will review your request</li>
        <li>We'll check product availability and pricing</li>
        <li>You'll receive a detailed quotation via email</li>
        <li>Quotations are typically sent within 24-48 hours</li>
    </ol>
</div>

<hr class="divider">

<p class="text-center text-muted">
    Need this quote urgently? Contact our sales team directly.
</p>

<div class="info-box" style="text-align: center;">
    <p style="margin: 0;">
        <strong>Email:</strong> <a href="mailto:sales@kits.co.tz" style="color: #e94560;">sales@kits.co.tz</a>
        {% if company.phone is defined and company.phone %}
        <br><strong>Phone:</strong> {{ company.phone }}
        {% endif %}
    </p>
</div>
{% endblock %}