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

{% block title %}Loan Receipt - {{ loan.loan_number }}{% endblock %}

{% block extra_css %}
<style>
    body {
        background: #f8fafc;
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    }

    .receipt-container {
        max-width: 800px;
        margin: 2rem auto;
        background: white;
        border-radius: 12px;
        box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
        overflow: hidden;
    }

    .receipt-header {
        background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
        color: white;
        padding: 2rem;
        text-align: center;
    }

    .receipt-title {
        font-size: 2rem;
        font-weight: 800;
        margin-bottom: 0.5rem;
    }

    .receipt-subtitle {
        font-size: 1.1rem;
        opacity: 0.9;
    }

    .receipt-content {
        padding: 2rem;
    }

    .loan-info {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 1.5rem;
        margin-bottom: 2rem;
    }

    .info-card {
        background: #f8fafc;
        padding: 1.5rem;
        border-radius: 8px;
        border-left: 4px solid #3b82f6;
    }

    .info-label {
        font-size: 0.875rem;
        color: #6b7280;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-bottom: 0.5rem;
    }

    .info-value {
        font-size: 1.25rem;
        font-weight: 700;
        color: #1f2937;
    }

    .summary-section {
        background: #f8fafc;
        padding: 1.5rem;
        border-radius: 8px;
        margin-bottom: 2rem;
    }

    .summary-title {
        font-size: 1.5rem;
        font-weight: 700;
        color: #1f2937;
        margin-bottom: 1rem;
        text-align: center;
    }

    .summary-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1rem;
    }

    .summary-item {
        text-align: center;
        padding: 1rem;
        background: white;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    }

    .summary-label {
        font-size: 0.875rem;
        color: #6b7280;
        font-weight: 600;
        margin-bottom: 0.5rem;
    }

    .summary-value {
        font-size: 1.5rem;
        font-weight: 800;
        color: #1f2937;
    }

    .repayments-section {
        margin-bottom: 2rem;
    }

    .section-title {
        font-size: 1.5rem;
        font-weight: 700;
        color: #1f2937;
        margin-bottom: 1rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .repayments-table {
        width: 100%;
        border-collapse: collapse;
        background: white;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    }

    .repayments-table th {
        background: #f8fafc;
        padding: 1rem;
        text-align: left;
        font-weight: 600;
        color: #374151;
        border-bottom: 2px solid #e5e7eb;
        font-size: 0.875rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .repayments-table td {
        padding: 1rem;
        border-bottom: 1px solid #f3f4f6;
        color: #1f2937;
    }

    .repayments-table tbody tr:hover {
        background: #f8fafc;
    }

    .amount {
        font-weight: 700;
        color: #059669;
    }

    .receipt-footer {
        background: #f8fafc;
        padding: 1.5rem;
        text-align: center;
        border-top: 1px solid #e5e7eb;
    }

    .footer-text {
        color: #6b7280;
        font-size: 0.875rem;
    }

    .print-button {
        background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
        color: white;
        border: none;
        padding: 0.75rem 1.5rem;
        border-radius: 8px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s;
        margin-bottom: 1rem;
    }

    .print-button:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
    }

    @media print {
        body {
            background: white;
        }
        
        .receipt-container {
            margin: 0;
            box-shadow: none;
            border-radius: 0;
        }
        
        .print-button {
            display: none;
        }
    }

    @media (max-width: 768px) {
        .receipt-container {
            margin: 1rem;
        }
        
        .receipt-content {
            padding: 1rem;
        }
        
        .loan-info {
            grid-template-columns: 1fr;
        }
        
        .summary-grid {
            grid-template-columns: 1fr;
        }
        
        .repayments-table {
            font-size: 0.75rem;
        }
        
        .repayments-table th,
        .repayments-table td {
            padding: 0.5rem;
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="receipt-container">
    <!-- Receipt Header -->
    <div class="receipt-header">
        <h1 class="receipt-title">Loan Receipt</h1>
        <p class="receipt-subtitle">{{ loan.loan_number }}</p>
    </div>

    <!-- Receipt Content -->
    <div class="receipt-content">
        <!-- Print Button -->
        <div style="text-align: center; margin-bottom: 2rem;">
            <button onclick="window.print()" class="print-button">
                <span>🖨️</span> Print Receipt
            </button>
        </div>

        <!-- Loan Information -->
        <div class="loan-info">
            <div class="info-card">
                <div class="info-label">Borrower Name</div>
                <div class="info-value">{{ loan.borrower.first_name }} {{ loan.borrower.last_name }}</div>
            </div>
            
            <div class="info-card">
                <div class="info-label">Phone Number</div>
                <div class="info-value">{{ loan.borrower.phone_number }}</div>
            </div>
            
            <div class="info-card">
                <div class="info-label">Loan Amount</div>
                <div class="info-value">KSh {{ current_total|intcomma }}</div>
            </div>
            
            <div class="info-card">
                <div class="info-label">Due Date</div>
                <div class="info-value">{{ loan.due_date|date:"M d, Y" }}</div>
            </div>
            
            <div class="info-card">
                <div class="info-label">Loan Status</div>
                <div class="info-value" style="text-transform: capitalize;">{{ loan.status }}</div>
            </div>
            
            <div class="info-card">
                <div class="info-label">Application Date</div>
                <div class="info-value">{{ loan.created_at|date:"M d, Y" }}</div>
            </div>
        </div>

        <!-- Summary Section -->
        <div class="summary-section">
            <h2 class="summary-title">Payment Summary</h2>
            <div class="summary-grid">
                <div class="summary-item">
                    <div class="summary-label">Total Loan Amount</div>
                    <div class="summary-value">KSh {{ current_total|intcomma }}</div>
                </div>
                
                <div class="summary-item">
                    <div class="summary-label">Total Paid</div>
                    <div class="summary-value amount">KSh {{ total_paid|intcomma }}</div>
                </div>
                
                <div class="summary-item">
                    <div class="summary-label">Remaining Balance</div>
                    <div class="summary-value" style="color: #dc2626;">KSh {{ remaining_balance|intcomma }}</div>
                </div>
                
                <div class="summary-item">
                    <div class="summary-label">Payment Progress</div>
                    <div class="summary-value">
                        {% if current_total > 0 %}
                            {% widthratio total_paid current_total 100 as progress %}
                            {{ progress }}%
                        {% else %}
                            0%
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>

        <!-- Repayments Section -->
        <div class="repayments-section">
            <h2 class="section-title">
                <span>📋</span>
                Payment History
            </h2>
            
            {% if repayments %}
            <table class="repayments-table">
                <thead>
                    <tr>
                        <th>Payment Date</th>
                        <th>Amount</th>
                        <th>Payment Method</th>
                        <th>Reference</th>
                        <th>Status</th>
                    </tr>
                </thead>
                <tbody>
                    {% for payment in repayments %}
                    <tr>
                        <td>{{ payment.payment_date|date:"M d, Y" }}</td>
                        <td class="amount">KSh {{ payment.amount|intcomma }}</td>
                        <td>{{ payment.payment_method|default:"N/A" }}</td>
                        <td>{{ payment.reference|default:"N/A" }}</td>
                        <td>
                            <span style="color: #059669; font-weight: 600;">
                                {{ payment.status|default:"Completed" }}
                            </span>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
            {% else %}
            <div style="text-align: center; padding: 2rem; color: #6b7280;">
                <span>ℹ️</span>
                <p>No payments have been recorded for this loan yet.</p>
            </div>
            {% endif %}
        </div>
    </div>

    <!-- Receipt Footer -->
    <div class="receipt-footer">
        <p class="footer-text">
            Generated on {{ generated_at|date:"F d, Y \a\t g:i A" }} | 
            Loan ID: {{ loan.id }} | 
            Receipt ID: {{ loan.id|slice:":8"|upper }}
        </p>
    </div>
</div>
{% endblock %}