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

{% block title %}Processing Fees Report{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'css/reports-enhanced.css' %}">
<style>
/* Additional specific styling for processing fees report */
.processing-fees-hero {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    position: relative;
    overflow: hidden;
}

.processing-fees-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="dots" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="10" cy="10" r="1.5" fill="white" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23dots)"/></svg>');
}

.metric-card-enhanced {
    background: white;
    border-radius: 20px;
    padding: 2rem;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.metric-card-enhanced::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
}

.metric-card-enhanced:hover {
    transform: translateY(-10px);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15);
}

.metric-icon {
    width: 80px;
    height: 80px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin-bottom: 1.5rem;
}

.metric-icon.green {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    box-shadow: 0 10px 20px rgba(16, 185, 129, 0.3);
}

.metric-icon.blue {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    color: white;
    box-shadow: 0 10px 20px rgba(59, 130, 246, 0.3);
}

.metric-icon.purple {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    color: white;
    box-shadow: 0 10px 20px rgba(139, 92, 246, 0.3);
}

.enhanced-table {
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.enhanced-table-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 2rem;
    position: relative;
}

.enhanced-table-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="lines" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M0,10 L10,0" stroke="white" stroke-width="0.5" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23lines)"/></svg>');
}

.enhanced-table table {
    width: 100%;
    border-collapse: collapse;
}

.enhanced-table th {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 1.5rem;
    text-align: left;
    font-weight: 600;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: none;
}

.enhanced-table td {
    padding: 1.5rem;
    border-bottom: 1px solid #f3f4f6;
    font-size: 0.875rem;
    color: #374151;
    transition: all 0.2s ease;
}

.enhanced-table tbody tr {
    transition: all 0.3s ease;
}

.enhanced-table tbody tr:hover {
    background: linear-gradient(90deg, #f8fafc 0%, #f1f5f9 100%);
    transform: scale(1.01);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}

.enhanced-table tbody tr:nth-child(even) {
    background-color: #fafbfc;
}

.amount-highlight {
    font-weight: 700;
    color: #059669;
    font-size: 1rem;
}

.loan-number {
    font-weight: 600;
    color: #1f2937;
    font-family: 'Monaco', 'Menlo', monospace;
}

.borrower-name {
    font-weight: 500;
    color: #374151;
}

.date-display {
    color: #6b7280;
    font-size: 0.8125rem;
}

.percentage-display {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #92400e;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-weight: 500;
    font-size: 0.75rem;
}
</style>
{% endblock %}

{% block content %}
<div class="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100">
<div class="container mx-auto px-4 sm:px-6 lg:px-8 py-8">
    <!-- Enhanced Hero Section -->
    <div class="processing-fees-hero text-white py-16 mb-8 rounded-3xl shadow-2xl">
        <div class="relative z-10">
            <div class="flex flex-col lg:flex-row justify-between items-start lg:items-center gap-6">
                <div class="flex-1">
                    <div class="flex items-center mb-4">
                        <div class="w-16 h-16 bg-white bg-opacity-20 rounded-2xl flex items-center justify-center mr-4">
                            <span>🪙</span>
                        </div>
                        <div>
                            <h1 class="text-4xl lg:text-5xl font-bold mb-2">Processing Fees Report</h1>
                            <p class="text-xl opacity-90">Comprehensive analysis of processing fees collected</p>
                        </div>
                    </div>
                    <div class="flex items-center text-lg opacity-80">
                        <span>📅</span>
                        <span>Generated on {{ "now"|date:"F d, Y" }} at {{ "now"|date:"g:i A" }}</span>
                    </div>
                </div>
                <div class="flex flex-wrap gap-3">
                    <a href="{% url 'reports:reports_dashboard' %}" 
                       class="inline-flex items-center px-6 py-3 bg-white bg-opacity-20 hover:bg-opacity-30 rounded-xl font-medium transition-all duration-200 backdrop-blur-sm">
                        <span>←</span> Back to Dashboard
                    </a>
                    <a href="?format=pdf" 
                       class="inline-flex items-center px-6 py-3 bg-red-500 hover:bg-red-600 rounded-xl font-medium transition-all duration-200 shadow-lg">
                        <span>📄</span> Export PDF
                    </a>
                    <a href="?format=csv" 
                       class="inline-flex items-center px-6 py-3 bg-green-500 hover:bg-green-600 rounded-xl font-medium transition-all duration-200 shadow-lg">
                        <i class="fas fa-file-csv mr-2"></i> Export CSV
                    </a>
                </div>
            </div>
        </div>
    </div>

        <!-- Enhanced Filters -->
        <div class="filter-section slide-up">
            <h2 class="filter-title">
                <span>🔍</span>
                Advanced Filters
            </h2>
            <form method="GET" class="filter-grid">
                <div class="filter-group">
                    <label class="filter-label">Start Date</label>
                    <input type="date" name="start_date" value="{{ filters.start_date|date:'Y-m-d' }}" class="filter-input">
                </div>
                <div class="filter-group">
                    <label class="filter-label">End Date</label>
                    <input type="date" name="end_date" value="{{ filters.end_date|date:'Y-m-d' }}" class="filter-input">
                </div>
                <div class="filter-group">
                    <label class="filter-label">Period</label>
                    <select name="period" class="filter-input">
                        <option value="current_month" {% if filters.period == 'current_month' %}selected{% endif %}>Current Month</option>
                        <option value="last_month" {% if filters.period == 'last_month' %}selected{% endif %}>Last Month</option>
                        <option value="current_year" {% if filters.period == 'current_year' %}selected{% endif %}>Current Year</option>
                        <option value="custom" {% if filters.period == 'custom' %}selected{% endif %}>Custom Range</option>
                    </select>
                </div>
                <div class="filter-group">
                    <label class="filter-label">&nbsp;</label>
                    <button type="submit" class="filter-button">
                        <span>🔍</span> Apply Filters
                    </button>
                </div>
            </form>
        </div>

    <!-- Enhanced Metrics Cards -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-12">
        <div class="metric-card-enhanced group">
            <div class="metric-icon green group-hover:scale-110 transition-transform duration-300">
                <span>🪙</span>
            </div>
            <h3 class="text-sm font-medium text-gray-600 mb-2 uppercase tracking-wide">Total Processing Fees</h3>
            <p class="text-3xl font-bold text-gray-900 mb-1">
                KES {{ report_data.summary.total_processing_fees|default:0|floatformat:2|intcomma }}
            </p>
            <div class="flex items-center text-sm text-green-600">
                <span>↑</span>
                <span>Revenue generated from loan processing</span>
            </div>
        </div>

        <div class="metric-card-enhanced group">
            <div class="metric-icon blue group-hover:scale-110 transition-transform duration-300">
                <span>🧾</span>
            </div>
            <h3 class="text-sm font-medium text-gray-600 mb-2 uppercase tracking-wide">Loans Processed</h3>
            <p class="text-3xl font-bold text-gray-900 mb-1">
                {{ report_data.summary.total_loans_processed|default:0 }}
            </p>
            <div class="flex items-center text-sm text-blue-600">
                <span>📈</span>
                <span>Total loans with processing fees</span>
            </div>
        </div>

        <div class="metric-card-enhanced group">
            <div class="metric-icon purple group-hover:scale-110 transition-transform duration-300">
                <span>🧮</span>
            </div>
            <h3 class="text-sm font-medium text-gray-600 mb-2 uppercase tracking-wide">Average Fee</h3>
            <p class="text-3xl font-bold text-gray-900 mb-1">
                KES {{ report_data.summary.average_processing_fee|default:0|floatformat:2|intcomma }}
            </p>
            <div class="flex items-center text-sm text-purple-600">
                <i class="fas fa-percentage mr-1"></i>
                <span>Mean processing fee per loan</span>
            </div>
        </div>
    </div>

    <!-- Enhanced Data Table -->
    <div class="enhanced-table">
        <div class="enhanced-table-header">
            <div class="relative z-10 flex justify-between items-center">
                <div>
                    <h2 class="text-2xl font-bold mb-2">Processing Fees Details</h2>
                    {% if report_data.fees %}
                    <p class="opacity-90">{{ report_data.fees|length }} processing fee record{{ report_data.fees|length|pluralize }} found</p>
                    {% endif %}
                </div>
                <div class="flex items-center space-x-4">
                    <div class="bg-white bg-opacity-20 px-4 py-2 rounded-lg">
                        <i class="fas fa-table mr-2"></i>
                        <span class="font-medium">Detailed View</span>
                    </div>
                </div>
            </div>
        </div>
        
        {% if report_data.fees %}
        <div class="overflow-x-auto">
            <table>
                <thead>
                    <tr>
                        <th><i class="fas fa-hashtag mr-2"></i>Loan Number</th>
                        <th><span>👤</span>Borrower</th>
                        <th><span>🪙</span>Processing Fee</th>
                        <th><span>💵</span>Loan Amount</th>
                        <th><i class="fas fa-percentage mr-2"></i>Fee Percentage</th>
                        <th><span>📅</span>Date Processed</th>
                    </tr>
                </thead>
                <tbody>
                    {% for fee in report_data.fees %}
                    <tr>
                        <td>
                            <span class="loan-number">{{ fee.loan_number }}</span>
                        </td>
                        <td>
                            <div class="borrower-name">{{ fee.borrower_name }}</div>
                        </td>
                        <td>
                            <span class="amount-highlight">KES {{ fee.processing_fee|floatformat:2|intcomma }}</span>
                        </td>
                        <td>
                            <span class="text-gray-700 font-medium">KES {{ fee.loan_amount|floatformat:2|intcomma }}</span>
                        </td>
                        <td>
                            <span class="percentage-display">{{ fee.fee_percentage|floatformat:1 }}%</span>
                        </td>
                        <td>
                            <div class="date-display">
                                <div class="font-medium text-gray-700">{{ fee.date_processed|date:"M d, Y" }}</div>
                                <div class="text-xs">{{ fee.date_processed|date:"g:i A" }}</div>
                            </div>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        
        <!-- Table Footer with Summary -->
        <div class="bg-gray-50 px-6 py-4 border-t">
            <div class="flex justify-between items-center text-sm">
                <span class="text-gray-600">
                    Showing {{ report_data.fees|length }} of {{ report_data.fees|length }} records
                </span>
                <div class="flex items-center space-x-6">
                    <div class="text-gray-600">
                        <span class="font-medium">Total Fees:</span>
                        <span class="text-green-600 font-bold ml-1">KES {{ report_data.summary.total_processing_fees|default:0|floatformat:2|intcomma }}</span>
                    </div>
                </div>
            </div>
        </div>
        
        {% else %}
        <div class="text-center py-20">
            <div class="w-24 h-24 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-6">
                <span>📥</span>
            </div>
            <h3 class="text-2xl font-bold text-gray-900 mb-4">No Processing Fees Found</h3>
            <p class="text-gray-600 mb-8 max-w-md mx-auto">
                No processing fees match the selected criteria. Try adjusting your filters or create new loans to generate processing fees.
            </p>
            <div class="flex justify-center space-x-4">
                <a href="{% url 'loans:new_application' %}" 
                   class="inline-flex items-center px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white rounded-xl font-medium transition-colors shadow-lg">
                    <span>+</span> Create New Loan
                </a>
                <a href="{% url 'reports:reports_dashboard' %}" 
                   class="inline-flex items-center px-6 py-3 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-xl font-medium transition-colors">
                    <span>←</span> Back to Reports
                </a>
            </div>
        </div>
        {% endif %}
    </div>
</div>
</div>
</div>
{% endblock %}