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

{% block title %}Delete Receipt - Branch System{% endblock %}

{% block content %}
<div class="min-h-screen bg-gray-50 py-8">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
        <!-- Header -->
        <div class="bg-white rounded-lg shadow-sm border border-gray-200 mb-6">
            <div class="px-6 py-4 border-b border-gray-200">
                <div class="flex items-center justify-between">
                    <div>
                        <h1 class="text-2xl font-bold text-gray-900">
                            <i class="fas fa-trash-alt text-red-600 mr-3"></i>
                            Delete Receipt
                        </h1>
                        <p class="text-gray-600 mt-1">Confirm deletion of payment receipt</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Confirmation Card -->
        <div class="bg-white rounded-lg shadow-sm border border-gray-200">
            <div class="px-6 py-8">
                <!-- Warning Message -->
                <div class="bg-red-50 border border-red-200 rounded-lg p-6 mb-6">
                    <div class="flex items-start">
                        <div class="flex-shrink-0">
                            <span>⚠️</span>
                        </div>
                        <div class="ml-3">
                            <h3 class="text-lg font-semibold text-red-800 mb-2">Warning: This action cannot be undone</h3>
                            <p class="text-red-700">
                                Deleting this receipt will also delete the associated repayment record and recalculate the loan balance. 
                                This action is permanent and cannot be reversed.
                            </p>
                        </div>
                    </div>
                </div>

                <!-- Receipt Details -->
                <div class="bg-gray-50 rounded-lg p-6 mb-6">
                    <h3 class="text-lg font-semibold text-gray-900 mb-4">Receipt Details</h3>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Receipt Number</label>
                            <div class="text-lg font-semibold text-gray-900">{{ receipt.receipt_number }}</div>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Amount Paid</label>
                            <div class="text-lg font-semibold text-green-600">KES {{ receipt.amount_paid|floatformat:2 }}</div>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Payment Method</label>
                            <div class="text-gray-900">{{ receipt.get_payment_method_display }}</div>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Payment Date</label>
                            <div class="text-gray-900">{{ receipt.payment_date|date:"M d, Y g:i A" }}</div>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Client</label>
                            <div class="text-gray-900">{{ receipt.borrower.get_full_name }}</div>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Loan Number</label>
                            <div class="text-gray-900">{{ receipt.loan.loan_number }}</div>
                        </div>
                    </div>
                </div>

                <!-- Confirmation Form -->
                <form method="post" class="space-y-6">
                    {% csrf_token %}
                    
                    <div class="flex justify-between items-center pt-6 border-t border-gray-200">
                        <a href="{% url 'utils:receipts_list' %}" 
                           class="px-6 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors">
                            <span>←</span>Cancel
                        </a>
                        
                        <button type="submit" 
                                class="px-6 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors">
                            <i class="fas fa-trash-alt mr-2"></i>Delete Receipt
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}