{% extends "emails/base.html" %}

{% block title %}Payment Confirmed - Attune Heart Therapy{% endblock %}

{% block content %}
<div class="email-header" style="background: linear-gradient(135deg, #10b981, #059669);">
    <h1>💳 Payment Confirmed!</h1>
</div>

<div class="email-body">
    <div class="greeting">
        Dear <strong>{{ booking.full_name }}</strong>,
    </div>

    <div class="section">
        <p>Thank you for your payment! Your <strong>{{ booking.get_appointment_type_display }}</strong> appointment is now fully confirmed and we're looking forward to our session.</p>
    </div>

    <div class="section">
        <h2 class="section-title">Payment Details</h2>
        <div class="info-card" style="background: linear-gradient(135deg, #f0fdf4, #dcfce7); border-left-color: #10b981;">
            <div class="info-item">
                <span class="info-label">Amount Paid:</span>
                <span class="info-value" style="color: #059669; font-size: 18px; font-weight: 700;">${{ booking.amount }}</span>
            </div>
            <div class="info-item">
                <span class="info-label">Payment Date:</span>
                <span class="info-value">{{ booking.paid_at|date:"F d, Y" }} at {{ booking.paid_at|time:"g:i A" }}</span>
            </div>
            <div class="info-item">
                <span class="info-label">Appointment:</span>
                <span class="info-value">{{ booking.get_appointment_type_display }}</span>
            </div>
            <div class="info-item">
                <span class="info-label">Session Date:</span>
                <span class="info-value">{{ booking.confirmed_datetime|date:"l, F d, Y" }} at {{ booking.confirmed_datetime|time:"g:i A" }}</span>
            </div>
        </div>
    </div>

    <div class="section">
        <h2 class="section-title">Your Session Details</h2>
        <div class="info-card">
            <div class="info-item">
                <span class="info-label">Video Meeting:</span>
                <span class="info-value">
                    <a href="{{ booking.jitsi_meet_url }}" style="color: #0ea5e9; text-decoration: none;">
                        {{ booking.jitsi_meet_url }}
                    </a>
                </span>
            </div>
            <div class="info-item">
                <span class="info-label">Therapist:</span>
                <span class="info-value">{{ booking.assigned_therapist.get_full_name }}</span>
            </div>
            <div class="info-item">
                <span class="info-label">Duration:</span>
                <span class="info-value">
                    {% if booking.appointment_type == 'initial-consultation' %}90 minutes
                    {% elif booking.appointment_type == 'individual-therapy' %}60 minutes
                    {% elif booking.appointment_type == 'family-therapy' %}90 minutes
                    {% elif booking.appointment_type == 'couples-therapy' %}75 minutes
                    {% elif booking.appointment_type == 'group-therapy' %}90 minutes
                    {% elif booking.appointment_type == 'follow-up' %}45 minutes
                    {% else %}60 minutes{% endif %}
                </span>
            </div>
        </div>
    </div>

    <div style="text-align: center; margin: 30px 0;">
        <a href="{{ booking.jitsi_meet_url }}" class="button" style="background: linear-gradient(135deg, #10b981, #059669);">
            🎥 Join Video Session
        </a>
    </div>

    <div class="section">
        <div style="background: #f0f9ff; padding: 20px; border-radius: 8px; text-align: center;">
            <h3 style="color: #0369a1; margin-bottom: 10px;">📋 Receipt</h3>
            <p style="margin: 5px 0;">Payment ID: {{ booking.stripe_payment_intent_id|default:booking.id }}</p>
            <p style="margin: 5px 0;">Date: {{ booking.paid_at|date:"Y-m-d" }}</p>
            <p style="margin: 5px 0;">Amount: ${{ booking.amount }}</p>
            <p style="margin: 5px 0; font-size: 12px; color: #64748b;">
                This email serves as your receipt for tax purposes.
            </p>
        </div>
    </div>

    <div class="section">
        <p>If you have any questions about your payment or appointment, please don't hesitate to contact us.</p>
        <div style="text-align: center; margin: 20px 0;">
            <a href="tel:+19548073027" class="button" style="background: linear-gradient(135deg, #64748b, #475569);">
                📞 Call (954) 807-3027
            </a>
        </div>
    </div>
</div>

<div class="footer">
    <p><strong>Attune Heart Therapy</strong></p>
    <p>Thank you for trusting us with your care</p>
    <div class="contact-info">
        📞 (954) 807-3027<br>
        ✉️ hello@attunehearttherapy.com<br>
        🌐 attunehearttherapy.com
    </div>
    <p style="font-size: 12px; color: #9ca3af; margin-top: 15px;">
        Payment ID: {{ booking.stripe_payment_intent_id|default:booking.id }}<br>
        Processed: {{ booking.paid_at|date:"Y-m-d H:i" }}
    </p>
</div>
{% endblock %}