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

{% block title %}Payment Receipt - {{ payment.payment_id }}{% endblock %}

{% block extra_css %}
<style>
    @media print {
        .no-print { display: none !important; }
        .card { border: none !important; box-shadow: none !important; }
    }
    .receipt-header {
        border-bottom: 2px solid #007bff;
        padding-bottom: 20px;
        margin-bottom: 30px;
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    
    <!-- Print Controls -->
    <div class="d-sm-flex align-items-center justify-content-between mb-4 no-print">
        <h1 class="h3 mb-0 text-gray-800">
            <i class="fas fa-receipt"></i> Payment Receipt
        </h1>
        <div>
            <button onclick="window.print()" class="btn btn-primary btn-sm">
                <i class="fas fa-print"></i> Print Receipt
            </button>
            <a href="{% url 'payments:payment_detail' payment.id %}" class="btn btn-secondary btn-sm">
                <i class="fas fa-arrow-left"></i> Back to Payment
            </a>
        </div>
    </div>

    <!-- Receipt -->
    <div class="card shadow">
        <div class="card-body">
            <!-- Company Header -->
            <div class="receipt-header text-center">
                {% if company_logo %}
                    <img src="{{ company_logo }}" alt="Company Logo" style="max-height: 80px;" class="mb-3">
                {% endif %}
                <h2 class="text-primary">{{ company_name|default:"OptiNet Global Links" }}</h2>
                <p class="text-muted">
                    {{ company_address|default:"Nairobi, Kenya" }}<br>
                    Email: {{ company_email|default:"info@optinet.co.ke" }} | Phone: {{ company_phone|default:"+254 XXX XXX XXX" }}
                </p>
                <h4 class="text-success mt-3">PAYMENT RECEIPT</h4>
            </div>

            <!-- Receipt Details -->
            <div class="row">
                <div class="col-md-6">
                    <h5>Receipt Details:</h5>
                    <table class="table table-borderless">
                        <tr>
                            <td><strong>Receipt No:</strong></td>
                            <td>{{ payment.payment_id }}</td>
                        </tr>
                        <tr>
                            <td><strong>Date:</strong></td>
                            <td>{{ payment.created_at|date:"F d, Y" }}</td>
                        </tr>
                        <tr>
                            <td><strong>Time:</strong></td>
                            <td>{{ payment.created_at|date:"H:i" }}</td>
                        </tr>
                        <tr>
                            <td><strong>Payment Method:</strong></td>
                            <td>{{ payment.get_payment_method_display }}</td>
                        </tr>
                        {% if payment.mpesa_reference %}
                        <tr>
                            <td><strong>M-Pesa Ref:</strong></td>
                            <td>{{ payment.mpesa_reference }}</td>
                        </tr>
                        {% endif %}
                        {% if payment.cash_receipt_number %}
                        <tr>
                            <td><strong>Cash Receipt:</strong></td>
                            <td>{{ payment.cash_receipt_number }}</td>
                        </tr>
                        {% endif %}
                    </table>
                </div>
                <div class="col-md-6">
                    <h5>Customer Details:</h5>
                    <table class="table table-borderless">
                        <tr>
                            <td><strong>Customer ID:</strong></td>
                            <td>{{ payment.customer.customer_id }}</td>
                        </tr>
                        <tr>
                            <td><strong>Name:</strong></td>
                            <td>{{ payment.customer.full_name }}</td>
                        </tr>
                        <tr>
                            <td><strong>Email:</strong></td>
                            <td>{{ payment.customer.email }}</td>
                        </tr>
                        <tr>
                            <td><strong>Phone:</strong></td>
                            <td>{{ payment.customer.phone }}</td>
                        </tr>
                        {% if payment.customer.package %}
                        <tr>
                            <td><strong>Package:</strong></td>
                            <td>{{ payment.customer.package.name }}</td>
                        </tr>
                        {% endif %}
                    </table>
                </div>
            </div>

            <!-- Payment Information -->
            <div class="row mt-4">
                <div class="col-12">
                    <h5>Payment Information:</h5>
                    <table class="table table-bordered">
                        <thead class="bg-light">
                            <tr>
                                <th>Description</th>
                                <th>Amount (KES)</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>
                                    {% if payment.invoice %}
                                        Payment for Invoice {{ payment.invoice.invoice_number }}
                                        {% if payment.invoice.description %}
                                            - {{ payment.invoice.description }}
                                        {% endif %}
                                    {% else %}
                                        General Payment
                                        {% if payment.notes %}
                                            - {{ payment.notes }}
                                        {% endif %}
                                    {% endif %}
                                </td>
                                <td class="text-right"><strong>{{ payment.amount }}</strong></td>
                            </tr>
                        </tbody>
                        <tfoot class="bg-light">
                            <tr>
                                <th>Total Amount Paid:</th>
                                <th class="text-right h5 text-success">KES {{ payment.amount }}</th>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>

            <!-- Notes -->
            {% if payment.notes %}
            <div class="row mt-4">
                <div class="col-12">
                    <h6>Notes:</h6>
                    <p class="text-muted">{{ payment.notes }}</p>
                </div>
            </div>
            {% endif %}

            <!-- Footer -->
            <div class="row mt-5 pt-4" style="border-top: 1px solid #dee2e6;">
                <div class="col-md-6">
                    <p class="text-muted">
                        <small>
                            This is a computer-generated receipt.<br>
                            For any queries, please contact our support team.
                        </small>
                    </p>
                </div>
                <div class="col-md-6 text-right">
                    <p class="text-muted">
                        <small>
                            Generated on: {{ "now"|date:"F d, Y H:i" }}<br>
                            Thank you for your business!
                        </small>
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}