{% extends "partials/dashboard-base.html" %}
{% load static %}
{% load humanize %}

{% block content %}
<section class="dashboard-section body-collapse pay step step-2 step-3 receive-3">
    <div class="overlay pt-120">
        <div class="container-fluid">
            <div class="main-content">
                <div class="head-area d-flex align-items-center justify-content-between">
                    <h4>Transaction Receipt</h4>
                    <div class="icon-area">
                        <!-- Optional: Add a support icon or other elements if needed -->
                    </div>
                </div>

                <div class="card shadow-sm mt-4 receipt-card">
                    <div class="card-body">
                        <div class="text-center mb-4">
                            <img src="{% static 'assets1/images/icon/submitted-icon.png' %}" alt="icon" class="mb-3" style="width: 60px;">
                            <h3>Transaction Receipt</h3>
                            <p class="text-muted">Thank you for your transfer. Below are the details of your transaction.</p>
                        </div>

                        <hr>

                        <div class="row">
                            <div class="col-md-6">
                                <p><strong>Transaction ID:</strong> {{ transaction.id }}</p>
                                <p><strong>Date:</strong> {{ transaction.created_at|date:"Y-m-d H:i:s" }}</p>
                                <p><strong>Amount:</strong> ${{ transaction.amount|floatformat:2|intcomma }}</p>
                                <p><strong>Beneficiary:</strong> {{ transaction.beneficiary_name }}</p>
                                <p><strong>Account Number:</strong> {{ transaction.account_number }}</p>
                                <p><strong>Account Type:</strong> {{ transaction.get_account_type_display }}</p>
                            </div>
                            <div class="col-md-6">
                                <p><strong>Bank Name:</strong> {{ transaction.bank_name }}{% if transaction.custom_bank_name %} ({{ transaction.custom_bank_name }}){% endif %}</p>
                                <p><strong>Country:</strong> {{ transaction.country }}</p>
                                <p><strong>SWIFT Code:</strong> {{ transaction.swift_code|default:"N/A" }}</p>
                                <p><strong>Routing Number:</strong> {{ transaction.routing_number|default:"N/A" }}</p>
                                <p><strong>Narration:</strong> {{ transaction.narration|default:"N/A" }}</p>
                                <p><strong>Status:</strong> 
                                    <span class="badge 
        {% if transaction.status == 'completed' %}bg-success
        {% elif transaction.status == 'pending' %}bg-warning
        {% elif transaction.status == 'declined' %}bg-danger
        {% else %}bg-secondary{% endif %}">
        {{ transaction.status|capfirst }}
    </span>
                                </p>
                            </div>
                        </div>

                        <hr>

                        <div class="text-center mt-4">
                            <button class="btn btn-success" onclick="printReceipt()">Print Receipt</button> 
                            <button class="btn btn-info" onclick="downloadPDF()">Download PDF</button>
                            <a href="{% url 'account:dashboard' %}" class="btn btn-primary">Back to Dashboard</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<style>
    /* Ensure the receipt looks good when printed */
    @media print {
        body {
            background: none;
        }
        .dashboard-section, .overlay, .container-fluid, .main-content {
            padding: 0 !important;
            margin: 0 !important;
            width: 100% !important;
        }
        .head-area, .sidebar, .navbar, .btn {
            display: none !important; /* Hide navigation and buttons when printing */
        }
        .receipt-card {
            box-shadow: none !important;
            border: 1px solid #ddd;
        }
        .card-body {
            padding: 20px !important;
        }
    }

    /* Style for the receipt card */
    .receipt-card {
        border-radius: 10px;
        background: #fff;
    }
    .badge {
        font-size: 0.9rem;
        padding: 0.5em 1em;
    }
</style>

<script>
    function printReceipt() {
        window.print();
    }
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script>
    function downloadPDF() {
        const { jsPDF } = window.jspdf;
        const doc = new jsPDF();
        doc.text("Transaction Receipt", 20, 20);
        doc.text(`Transaction ID: {{ transaction.id }}`, 20, 30);
        doc.text(`Date: {{ transaction.created_at|date:"Y-m-d H:i:s" }}`, 20, 40);
        doc.text(`Amount: $${{ transaction.amount|floatformat:2|intcomma }}`, 20, 50);
        doc.text(`Beneficiary: {{ transaction.beneficiary_name }}`, 20, 60);
        doc.text(`Account Number: {{ transaction.account_number }}`, 20, 70);
        doc.text(`Bank Name: {{ transaction.bank_name }}{% if transaction.custom_bank_name %} ({{ transaction.custom_bank_name }}){% endif %}`, 20, 80);
        doc.text(`Country: {{ transaction.country }}`, 20, 90);
        doc.text(`SWIFT Code: {{ transaction.swift_code|default:"N/A" }}`, 20, 100);
        doc.text(`Routing Number: {{ transaction.routing_number|default:"N/A" }}`, 20, 110);
        doc.text(`Account Type: {{ transaction.get_account_type_display }}`, 20, 120);
        doc.text(`Narration: {{ transaction.narration|default:"N/A" }}`, 20, 130);
        doc.text(`Status: {{ transaction.status|capfirst }}`, 20, 140);
        doc.save("transaction_receipt_{{ transaction.id }}.pdf");
    }
</script>

{% endblock %}