{% extends "base.html" %}

{% block title %}Presupuesto - {{ clinic_name }}{% endblock %}

{% block content %}
<h2>Hola {{ patient_name }},</h2>

<p>Te enviamos el presupuesto detallado para tu tratamiento dental.</p>

<div class="info-box">
    <div class="info-row">
        <div style="flex: 1;">
            <div class="label">N° Presupuesto</div>
            <div class="value">{{ budget_number }}</div>
        </div>
        <div style="flex: 1;">
            <div class="label">Fecha</div>
            <div class="value">{{ budget_date }}</div>
        </div>
    </div>
</div>

{% if treatments %}
<table style="width: 100%; border-collapse: collapse; margin: 20px 0;">
    <thead>
        <tr style="border-bottom: 2px solid #e4e4e7;">
            <th style="text-align: left; padding: 12px 0; font-size: 12px; font-weight: 600; text-transform: uppercase; color: #71717a;">Tratamiento</th>
            <th style="text-align: right; padding: 12px 0; font-size: 12px; font-weight: 600; text-transform: uppercase; color: #71717a;">Importe</th>
        </tr>
    </thead>
    <tbody>
        {% for treatment in treatments %}
        <tr style="border-bottom: 1px solid #f4f4f5;">
            <td style="padding: 12px 0;">
                <div style="font-weight: 500;">{{ treatment.name }}</div>
                {% if treatment.tooth %}
                <div style="font-size: 14px; color: #71717a;">Pieza: {{ treatment.tooth }}</div>
                {% endif %}
            </td>
            <td style="text-align: right; padding: 12px 0;">{{ treatment.price }} €</td>
        </tr>
        {% endfor %}
    </tbody>
    <tfoot>
        {% if subtotal and total != subtotal %}
        <tr>
            <td style="padding: 12px 0; text-align: right; font-weight: 500;">Subtotal:</td>
            <td style="padding: 12px 0; text-align: right;">{{ subtotal }} €</td>
        </tr>
        {% endif %}
        {% if discount_amount %}
        <tr>
            <td style="padding: 12px 0; text-align: right; font-weight: 500; color: #22c55e;">Descuento:</td>
            <td style="padding: 12px 0; text-align: right; color: #22c55e;">-{{ discount_amount }} €</td>
        </tr>
        {% endif %}
        <tr style="border-top: 2px solid #18181b;">
            <td style="padding: 16px 0; text-align: right; font-size: 18px; font-weight: 600;">Total:</td>
            <td style="padding: 16px 0; text-align: right; font-size: 18px; font-weight: 600;">{{ total }} €</td>
        </tr>
    </tfoot>
</table>
{% endif %}

{% if validity_days %}
<div class="alert alert-info">
    <strong>Validez:</strong> Este presupuesto es válido por {{ validity_days }} días a partir de la fecha de emisión.
</div>
{% endif %}

{% if notes %}
<p><strong>Observaciones:</strong> {{ notes }}</p>
{% endif %}

<p>Si tienes alguna pregunta sobre el presupuesto o deseas agendar tu tratamiento, no dudes en contactarnos.</p>

{% if clinic_phone %}
<div class="button-container">
    <a href="tel:{{ clinic_phone }}" class="button">Contactar</a>
</div>
{% endif %}

<p>Quedamos a tu disposición.</p>
{% endblock %}