{% extends 'base.html' %}
{% load static %}

{% block title %}Send Payment Email - {{ receipt_number }} - Hospital Management{% endblock %}

{% block content %}
<div class="content">
    <div class="container-fluid">
        <!-- Page Header -->
        <div class="row">
            <div class="col-12">
                <div class="page-header">
                    <div class="page-title">
                        <h4>Send Payment Confirmation Email</h4>
                        <h6>Receipt Number: {{ receipt_number }}</h6>
                    </div>
                    <div class="page-btn">
                        <a href="{% url 'billing:payment_detail' payment.pk %}" class="btn btn-secondary">
                            <i class="fas fa-arrow-left me-1"></i>Back to Payment
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <div class="row justify-content-center">
            <div class="col-lg-8">
                <!-- Payment Information -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="card-title">
                            <i class="fas fa-info-circle me-2"></i>Payment Information
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="info-group">
                                    <label class="form-label">Patient Name:</label>
                                    <p class="fw-bold">{{ patient.get_full_name }}</p>
                                </div>
                                <div class="info-group">
                                    <label class="form-label">Bill Number:</label>
                                    <p>{{ bill.bill_number }}</p>
                                </div>
                                <div class="info-group">
                                    <label class="form-label">Payment Date:</label>
                                    <p>{{ payment.payment_date|date:"M d, Y H:i" }}</p>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="info-group">
                                    <label class="form-label">Receipt Number:</label>
                                    <p class="fw-bold">{{ receipt_number }}</p>
                                </div>
                                <div class="info-group">
                                    <label class="form-label">Amount Paid:</label>
                                    <p class="fw-bold text-success">${{ payment.amount|floatformat:2 }}</p>
                                </div>
                                <div class="info-group">
                                    <label class="form-label">Payment Method:</label>
                                    <p><span class="badge bg-info">{{ payment.get_payment_method_display }}</span></p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Email Form -->
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title">
                            <i class="fas fa-envelope me-2"></i>Email Details
                        </h5>
                    </div>
                    <div class="card-body">
                        <form method="post" id="emailForm">
                            {% csrf_token %}
                            
                            <!-- Primary Recipient -->
                            <div class="form-group mb-3">
                                <label class="form-label">Primary Recipient:</label>
                                {% if patient.email %}
                                <div class="recipient-info">
                                    <div class="d-flex align-items-center">
                                        <i class="fas fa-user me-2 text-primary"></i>
                                        <div>
                                            <strong>{{ patient.get_full_name }}</strong>
                                            <br>
                                            <span class="text-muted">{{ patient.email }}</span>
                                        </div>
                                        <span class="badge bg-success ms-auto">Primary</span>
                                    </div>
                                </div>
                                {% else %}
                                <div class="alert alert-warning">
                                    <i class="fas fa-exclamation-triangle me-2"></i>
                                    Patient email not found. Please add additional email addresses below.
                                </div>
                                {% endif %}
                            </div>

                            <!-- Additional Recipients -->
                            <div class="form-group mb-3">
                                <label for="additional_emails" class="form-label">
                                    Additional Recipients (optional):
                                </label>
                                <textarea class="form-control" id="additional_emails" name="additional_emails" 
                                          rows="3" placeholder="Enter additional email addresses separated by commas&#10;Example: family@email.com, guardian@email.com"></textarea>
                                <div class="form-text">
                                    <i class="fas fa-info-circle me-1"></i>
                                    Separate multiple email addresses with commas
                                </div>
                            </div>

                            <!-- Email Preview -->
                            <div class="form-group mb-4">
                                <label class="form-label">Email Preview:</label>
                                <div class="email-preview">
                                    <div class="email-header">
                                        <div class="email-field">
                                            <strong>Subject:</strong> Payment Confirmation - Receipt #{{ receipt_number }}
                                        </div>
                                        <div class="email-field">
                                            <strong>From:</strong> {{ hospital_info.name|default:"Hospital" }} &lt;{{ hospital_info.email|default:"noreply@hospital.com" }}&gt;
                                        </div>
                                        <div class="email-field">
                                            <strong>To:</strong> 
                                            <span id="recipientPreview">
                                                {% if patient.email %}{{ patient.email }}{% else %}No primary email{% endif %}
                                            </span>
                                        </div>
                                    </div>
                                    <div class="email-content">
                                        <h6>Email Content Preview:</h6>
                                        <div class="preview-content">
                                            <p><strong>Dear {{ patient.get_full_name }},</strong></p>
                                            <p>Thank you for your payment. This email confirms that we have received your payment of <strong>${{ payment.amount|floatformat:2 }}</strong> for bill #{{ bill.bill_number }}.</p>
                                            <p>Your payment receipt is attached to this email and can also be viewed online.</p>
                                            <p>If you have any questions, please contact our billing department.</p>
                                            <p>Best regards,<br>{{ hospital_info.name|default:"Hospital" }} Billing Department</p>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Email Options -->
                            <div class="form-group mb-4">
                                <label class="form-label">Email Options:</label>
                                <div class="email-options">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="includeReceipt" checked disabled>
                                        <label class="form-check-label" for="includeReceipt">
                                            <i class="fas fa-file-pdf me-1"></i>Include receipt link
                                        </label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="sendCopy">
                                        <label class="form-check-label" for="sendCopy">
                                            <i class="fas fa-copy me-1"></i>Send copy to billing department
                                        </label>
                                    </div>
                                </div>
                            </div>

                            <!-- Action Buttons -->
                            <div class="d-flex justify-content-between">
                                <a href="{% url 'billing:payment_detail' payment.pk %}" class="btn btn-secondary">
                                    <i class="fas fa-times me-1"></i>Cancel
                                </a>
                                <div>
                                    <button type="button" class="btn btn-outline-primary me-2" onclick="previewEmail()">
                                        <i class="fas fa-eye me-1"></i>Preview Email
                                    </button>
                                    <button type="submit" class="btn btn-primary" id="sendButton">
                                        <i class="fas fa-paper-plane me-1"></i>Send Email
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Email Preview Modal -->
<div class="modal fade" id="emailPreviewModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="fas fa-envelope me-2"></i>Email Preview
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div id="emailPreviewContent">
                    <!-- Email preview will be loaded here -->
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" onclick="sendEmailFromPreview()">
                    <i class="fas fa-paper-plane me-1"></i>Send Email
                </button>
            </div>
        </div>
    </div>
</div>

<script>
$(document).ready(function() {
    // Update recipient preview when additional emails are added
    $('#additional_emails').on('input', function() {
        updateRecipientPreview();
    });

    // Form validation
    $('#emailForm').on('submit', function(e) {
        const primaryEmail = '{{ patient.email|default:"" }}';
        const additionalEmails = $('#additional_emails').val().trim();
        
        if (!primaryEmail && !additionalEmails) {
            e.preventDefault();
            alert('Please provide at least one email address.');
            $('#additional_emails').focus();
            return false;
        }

        // Validate additional email format
        if (additionalEmails) {
            const emails = additionalEmails.split(',').map(email => email.trim());
            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            
            for (let email of emails) {
                if (email && !emailRegex.test(email)) {
                    e.preventDefault();
                    alert(`Invalid email format: ${email}`);
                    $('#additional_emails').focus();
                    return false;
                }
            }
        }

        // Show loading state
        $('#sendButton').prop('disabled', true).html('<i class="fas fa-spinner fa-spin me-1"></i>Sending...');
    });
});

function updateRecipientPreview() {
    const primaryEmail = '{{ patient.email|default:"" }}';
    const additionalEmails = $('#additional_emails').val().trim();
    
    let recipients = [];
    if (primaryEmail) {
        recipients.push(primaryEmail);
    }
    if (additionalEmails) {
        const additional = additionalEmails.split(',').map(email => email.trim()).filter(email => email);
        recipients = recipients.concat(additional);
    }
    
    const preview = recipients.length > 0 ? recipients.join(', ') : 'No recipients';
    $('#recipientPreview').text(preview);
}

function previewEmail() {
    // Load email preview in modal
    const previewContent = `
        <div class="email-preview-full">
            <div class="email-header-full">
                <table class="table table-borderless table-sm">
                    <tr>
                        <td class="fw-bold" style="width: 80px;">Subject:</td>
                        <td>Payment Confirmation - Receipt #{{ receipt_number }}</td>
                    </tr>
                    <tr>
                        <td class="fw-bold">From:</td>
                        <td>{{ hospital_info.name|default:"Hospital" }} &lt;{{ hospital_info.email|default:"noreply@hospital.com" }}&gt;</td>
                    </tr>
                    <tr>
                        <td class="fw-bold">To:</td>
                        <td id="modalRecipientList">${$('#recipientPreview').text()}</td>
                    </tr>
                    <tr>
                        <td class="fw-bold">Date:</td>
                        <td>${new Date().toLocaleString()}</td>
                    </tr>
                </table>
            </div>
            <hr>
            <div class="email-body-full">
                <p><strong>Dear {{ patient.get_full_name }},</strong></p>
                
                <p>Thank you for your payment. This email confirms that we have received your payment of <strong>${{ payment.amount|floatformat:2 }}</strong> for bill #{{ bill.bill_number }}.</p>
                
                <div class="payment-summary" style="background-color: #f8f9fa; padding: 15px; border-radius: 5px; margin: 20px 0;">
                    <h6>Payment Summary:</h6>
                    <ul style="margin-bottom: 0;">
                        <li>Receipt Number: <strong>{{ receipt_number }}</strong></li>
                        <li>Payment Date: <strong>{{ payment.payment_date|date:"M d, Y H:i" }}</strong></li>
                        <li>Amount Paid: <strong>${{ payment.amount|floatformat:2 }}</strong></li>
                        <li>Payment Method: <strong>{{ payment.get_payment_method_display }}</strong></li>
                        <li>Remaining Balance: <strong>${{ bill.balance_amount|floatformat:2 }}</strong></li>
                    </ul>
                </div>
                
                <p>Your payment receipt can be viewed online at: <a href="#">View Receipt</a></p>
                
                <p>If you have any questions about this payment or your account, please contact our billing department at {{ hospital_info.phone|default:"(555) 123-4567" }} or email {{ hospital_info.email|default:"billing@hospital.com" }}.</p>
                
                <p>Thank you for choosing {{ hospital_info.name|default:"our hospital" }} for your healthcare needs.</p>
                
                <p>Best regards,<br>
                <strong>{{ hospital_info.name|default:"Hospital" }} Billing Department</strong></p>
                
                <hr style="margin-top: 30px;">
                <small style="color: #6c757d;">
                    This is an automated message. Please do not reply to this email.<br>
                    {{ hospital_info.name|default:"Hospital" }} | {{ hospital_info.address|default:"Hospital Address" }}
                </small>
            </div>
        </div>
    `;
    
    $('#emailPreviewContent').html(previewContent);
    $('#emailPreviewModal').modal('show');
}

function sendEmailFromPreview() {
    $('#emailPreviewModal').modal('hide');
    $('#emailForm').submit();
}
</script>

<style>
.info-group {
    margin-bottom: 15px;
}

.info-group .form-label {
    font-weight: 600;
    color: #495057;
    margin-bottom: 5px;
}

.info-group p {
    margin-bottom: 0;
    color: #6c757d;
}

.recipient-info {
    background-color: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}

.email-preview {
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 20px;
}

.email-header {
    margin-bottom: 20px;
}

.email-field {
    margin-bottom: 8px;
    font-size: 0.9rem;
}

.email-content {
    border-top: 1px solid #e9ecef;
    padding-top: 15px;
}

.preview-content {
    background-color: white;
    padding: 15px;
    border-radius: 5px;
    border: 1px solid #e9ecef;
    font-size: 0.9rem;
    line-height: 1.5;
}

.email-options {
    background-color: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}

.email-options .form-check {
    margin-bottom: 10px;
}

.email-options .form-check:last-child {
    margin-bottom: 0;
}

.email-preview-full {
    font-family: Arial, sans-serif;
    line-height: 1.6;
}

.email-header-full {
    background-color: #f8f9fa;
    padding: 15px;
    border-radius: 5px;
    margin-bottom: 15px;
}

.email-body-full {
    padding: 0 10px;
}

.payment-summary {
    background-color: #e8f5e8 !important;
    border-left: 4px solid #28a745;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .email-preview {
        padding: 15px;
    }
    
    .preview-content {
        padding: 10px;
        font-size: 0.85rem;
    }
    
    .email-field {
        font-size: 0.85rem;
    }
}
</style>
{% endblock %}