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

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

{% block extra_css %}
<link rel="stylesheet" href="{% static 'css/reports-enhanced.css' %}">
<style>
.registration-hero {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    position: relative;
    overflow: hidden;
}

.registration-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="hexagons" width="30" height="26" patternUnits="userSpaceOnUse"><polygon points="15,2 25,8 25,18 15,24 5,18 5,8" stroke="white" stroke-width="0.5" fill="none" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23hexagons)"/></svg>');
}

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

.metric-card-registration::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #8b5cf6 0%, #7c3aed 100%);
}

.metric-card-registration:hover {
    transform: translateY(-10px);
    box-shadow: 0 30px 60px rgba(139, 92, 246, 0.2);
}

.registration-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);
}

.registration-table-header {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    color: white;
    padding: 2rem;
    position: relative;
}

.registration-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="diamonds" width="20" height="20" patternUnits="userSpaceOnUse"><polygon points="10,2 18,10 10,18 2,10" stroke="white" stroke-width="0.5" fill="none" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23diamonds)"/></svg>');
}

.payment-method-badge {
    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
    color: #374151;
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.registration-amount {
    font-weight: 700;
    color: #7c3aed;
    font-size: 1.1rem;
}

.client-info {
    display: flex;
    flex-direction: column;
}

.client-name {
    font-weight: 600;
    color: #1f2937;
}

.client-type {
    font-size: 0.75rem;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
</style>
{% endblock %}

{% block content %}
<div class="min-h-screen bg-gradient-to-br from-purple-50 to-violet-100">
<div class="container mx-auto px-4 sm:px-6 lg:px-8 py-8">

    <!-- Enhanced Hero Section -->
    <div class="registration-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">
                            <i class="fas fa-file-invoice-dollar text-3xl"></i>
                        </div>
                        <div>
                            <h1 class="text-4xl lg:text-5xl font-bold mb-2">Registration Fees Report</h1>
                            <p class="text-xl opacity-90">
                                {% if report_data.period.period_display == 'All Time' %}
                                    All client registration fees collected since system launch
                                {% else %}
                                    Registration fees for {{ report_data.period.period_display }}
                                {% endif %}
                            </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="{% url 'users:client_create' %}"
                       class="inline-flex items-center px-6 py-3 bg-blue-500 hover:bg-blue-600 rounded-xl font-medium transition-all duration-200 shadow-lg">
                        <span>👤+</span> Add Client
                    </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>
                </div>
            </div>
        </div>
    </div>

    <!-- Enhanced Filters -->
    <div class="bg-white rounded-2xl shadow-xl p-8 mb-8 border border-purple-100">
        <h2 class="text-2xl font-bold text-gray-900 mb-6 flex items-center">
            <span>🔍</span>
            Advanced Filters
            {% if report_data.period.period_display == 'All Time' %}
            <span class="ml-4 inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">
                Showing All Time Data
            </span>
            {% endif %}
        </h2>
        <form method="GET" class="grid grid-cols-1 md:grid-cols-4 gap-6">
            <div>
                <label class="block text-sm font-semibold text-gray-700 mb-3">Start Date</label>
                <input type="date" name="start_date" value="{{ filters.start_date|date:'Y-m-d' }}"
                    class="w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:ring-4 focus:ring-purple-100 focus:border-purple-500 transition-all duration-200"
                    placeholder="Leave empty for all-time">
                <p class="text-xs text-gray-500 mt-1">Leave empty for all-time data</p>
            </div>
            <div>
                <label class="block text-sm font-semibold text-gray-700 mb-3">End Date</label>
                <input type="date" name="end_date" value="{{ filters.end_date|date:'Y-m-d' }}"
                    class="w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:ring-4 focus:ring-purple-100 focus:border-purple-500 transition-all duration-200"
                    placeholder="Leave empty for all-time">
                <p class="text-xs text-gray-500 mt-1">Leave empty for all-time data</p>
            </div>
            <div>
                <label class="block text-sm font-semibold text-gray-700 mb-3">Payment Status</label>
                <select name="payment_status"
                    class="w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:ring-4 focus:ring-purple-100 focus:border-purple-500 transition-all duration-200">
                    <option value="">All Statuses</option>
                    <option value="paid" {% if filters.payment_status == 'paid' %}selected{% endif %}>Paid Only</option>
                    <option value="unpaid" {% if filters.payment_status == 'unpaid' %}selected{% endif %}>Unpaid Only</option>
                </select>
            </div>
            <div class="flex items-end">
                <button type="submit" class="w-full px-6 py-3 bg-gradient-to-r from-purple-600 to-violet-600 hover:from-purple-700 hover:to-violet-700 text-white rounded-xl font-semibold transition-all duration-200 shadow-lg hover:shadow-xl transform hover:-translate-y-1">
                    <span>🔍</span> Apply Filters
                </button>
            </div>
        </form>
        
        {% if filters.start_date or filters.end_date %}
        <div class="mt-6 flex items-center justify-between bg-blue-50 rounded-xl p-4">
            <div class="text-sm text-blue-700">
                <span>ℹ️</span>
                Filtered results are shown. 
            </div>
            <a href="{% url 'reports:registration_fees_report' %}" 
               class="text-sm text-blue-600 hover:text-blue-800 font-medium">
                <span>✕</span>Clear filters (show all-time)
            </a>
        </div>
        {% endif %}
    </div>

    <!-- Enhanced Metrics Cards -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-12">
        <div class="metric-card-registration group">
            <div class="w-16 h-16 bg-gradient-to-br from-purple-500 to-violet-600 rounded-2xl flex items-center justify-center mb-4 group-hover:scale-110 transition-transform duration-300">
                <i class="fas fa-file-invoice-dollar text-white text-2xl"></i>
            </div>
            <h3 class="text-sm font-semibold text-gray-600 mb-2 uppercase tracking-wide">Total Registration Income</h3>
            <p class="text-3xl font-bold text-gray-900 mb-2">
                KES {{ report_data.summary.total_registration_income|default:0|floatformat:2|intcomma }}
            </p>
            <div class="flex items-center text-sm text-purple-600">
                <span>↑</span>
                <span>Total revenue</span>
            </div>
        </div>

        <div class="metric-card-registration group">
            <div class="w-16 h-16 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-2xl flex items-center justify-center mb-4 group-hover:scale-110 transition-transform duration-300">
                <span>👥</span>
            </div>
            <h3 class="text-sm font-semibold text-gray-600 mb-2 uppercase tracking-wide">Total Registrations</h3>
            <p class="text-3xl font-bold text-gray-900 mb-2">
                {{ report_data.summary.total_registrations|default:0 }}
            </p>
            <div class="flex items-center text-sm text-blue-600">
                <span>👤+</span>
                <span>Client registrations</span>
            </div>
        </div>

        <div class="metric-card-registration group">
            <div class="w-16 h-16 bg-gradient-to-br from-green-500 to-emerald-600 rounded-2xl flex items-center justify-center mb-4 group-hover:scale-110 transition-transform duration-300">
                <span>🧮</span>
            </div>
            <h3 class="text-sm font-semibold text-gray-600 mb-2 uppercase tracking-wide">Average Fee</h3>
            <p class="text-3xl font-bold text-gray-900 mb-2">
                KES {{ report_data.summary.average_registration_fee|default:0|floatformat:2|intcomma }}
            </p>
            <div class="flex items-center text-sm text-green-600">
                <span>🧮</span>
                <span>Mean fee amount</span>
            </div>
        </div>

        <div class="metric-card-registration group">
            <div class="w-16 h-16 bg-gradient-to-br from-yellow-500 to-orange-600 rounded-2xl flex items-center justify-center mb-4 group-hover:scale-110 transition-transform duration-300">
                <i class="fas fa-percentage text-white text-2xl"></i>
            </div>
            <h3 class="text-sm font-semibold text-gray-600 mb-2 uppercase tracking-wide">Payment Rate</h3>
            <p class="text-3xl font-bold text-gray-900 mb-2">
                {{ additional_analytics.payment_rate|default:0|floatformat:1 }}%
            </p>
            <div class="flex items-center text-sm text-yellow-600">
                <span>✓</span>
                <span>Completion rate</span>
            </div>
        </div>
    </div>

    <!-- Performance Metrics Section (Requirements 8.2, 8.3, 8.4, 8.5) -->
    <div class="bg-white rounded-2xl shadow-xl p-8 mb-12 border border-purple-100">
        <h2 class="text-2xl font-bold text-gray-900 mb-6 flex items-center">
            <span class="w-10 h-10 bg-gradient-to-br from-purple-500 to-violet-600 rounded-xl flex items-center justify-center mr-3">
                <i class="fas fa-chart-line text-white"></i>
            </span>
            Performance Metrics
        </h2>
        
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            <!-- Growth vs Last Period (Requirement 8.2) -->
            <div class="bg-gradient-to-br from-blue-50 to-indigo-50 rounded-xl p-6 border border-blue-200">
                <div class="flex items-center justify-between mb-3">
                    <h3 class="text-sm font-semibold text-gray-700 uppercase tracking-wide">Growth vs Last Period</h3>
                    <span class="text-2xl">📈</span>
                </div>
                <p class="text-2xl font-bold mb-2 {% if report_data.summary.growth_vs_last_period >= 0 %}text-green-600{% else %}text-red-600{% endif %}">
                    {% if report_data.summary.growth_vs_last_period >= 0 %}+{% endif %}{{ report_data.summary.growth_rate|default:0|floatformat:1 }}%
                </p>
                <p class="text-sm text-gray-600">
                    {% if report_data.summary.growth_vs_last_period >= 0 %}
                        <span class="text-green-600">↑</span> KES {{ report_data.summary.growth_vs_last_period|default:0|floatformat:2|intcomma }}
                    {% else %}
                        <span class="text-red-600">↓</span> KES {{ report_data.summary.growth_vs_last_period|default:0|floatformat:2|intcomma }}
                    {% endif %}
                </p>
                <div class="mt-3 pt-3 border-t border-blue-200">
                    <div class="flex justify-between text-xs text-gray-600">
                        <span>Current:</span>
                        <span class="font-semibold">KES {{ report_data.summary.current_period_total|default:0|floatformat:2|intcomma }}</span>
                    </div>
                    <div class="flex justify-between text-xs text-gray-600 mt-1">
                        <span>Previous:</span>
                        <span class="font-semibold">KES {{ report_data.summary.previous_period_total|default:0|floatformat:2|intcomma }}</span>
                    </div>
                </div>
            </div>

            <!-- Highest Single Fee (Requirement 8.3) -->
            <div class="bg-gradient-to-br from-purple-50 to-pink-50 rounded-xl p-6 border border-purple-200">
                <div class="flex items-center justify-between mb-3">
                    <h3 class="text-sm font-semibold text-gray-700 uppercase tracking-wide">Highest Single Fee</h3>
                    <span class="text-2xl">💎</span>
                </div>
                <p class="text-2xl font-bold text-purple-600 mb-2">
                    KES {{ report_data.summary.highest_single_fee|default:0|floatformat:2|intcomma }}
                </p>
                <p class="text-sm text-gray-600">
                    Maximum registration fee collected
                </p>
            </div>

            <!-- Average Days to Pay (Requirement 8.4) -->
            <div class="bg-gradient-to-br from-green-50 to-emerald-50 rounded-xl p-6 border border-green-200">
                <div class="flex items-center justify-between mb-3">
                    <h3 class="text-sm font-semibold text-gray-700 uppercase tracking-wide">Average Days to Pay</h3>
                    <span class="text-2xl">⏱️</span>
                </div>
                <p class="text-2xl font-bold text-green-600 mb-2">
                    {{ report_data.summary.average_days_to_pay|default:0|floatformat:1 }} days
                </p>
                <p class="text-sm text-gray-600">
                    Mean time from registration to payment
                </p>
            </div>

            <!-- Period Comparison (Requirement 8.5) -->
            <div class="bg-gradient-to-br from-yellow-50 to-orange-50 rounded-xl p-6 border border-yellow-200">
                <div class="flex items-center justify-between mb-3">
                    <h3 class="text-sm font-semibold text-gray-700 uppercase tracking-wide">Period Difference</h3>
                    <span class="text-2xl">🔄</span>
                </div>
                <p class="text-2xl font-bold mb-2 {% if report_data.summary.growth_vs_last_period >= 0 %}text-green-600{% else %}text-red-600{% endif %}">
                    {% if report_data.summary.growth_vs_last_period >= 0 %}+{% endif %}KES {{ report_data.summary.growth_vs_last_period|default:0|floatformat:2|intcomma }}
                </p>
                <p class="text-sm text-gray-600">
                    Arithmetic difference between periods
                </p>
            </div>
        </div>
    </div>

    <!-- Registration Fees Table -->
    <div class="registration-table">
        <div class="registration-table-header">
            <div class="relative z-10 flex justify-between items-center">
                <div>
                    <h2 class="text-2xl font-bold mb-2">Registration Fees Details</h2>
                    {% if report_data.fees %}
                    <p class="opacity-90">{{ report_data.fees|length }} fee payment{{ 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 class="w-full">
                <thead>
                    <tr class="bg-gradient-to-r from-purple-600 to-violet-600 text-white">
                        <th class="px-6 py-4 text-left font-semibold"><span>👤</span>Client Name</th>
                        <th class="px-6 py-4 text-left font-semibold"><span>🧾</span>Registration Fee</th>
                        <th class="px-6 py-4 text-left font-semibold"><span>💵</span>Amount</th>
                        <th class="px-6 py-4 text-left font-semibold"><span>💳</span>Payment Method</th>
                        <th class="px-6 py-4 text-left font-semibold"><span>📅</span>Date Paid</th>
                        <th class="px-6 py-4 text-left font-semibold"><span>✓</span>Status</th>
                    </tr>
                </thead>
                <tbody>
                    {% for fee in report_data.fees %}
                    <tr class="hover:bg-gradient-to-r hover:from-purple-50 hover:to-violet-50 transition-all duration-200 border-b border-gray-100">
                        <td class="px-6 py-4">
                            <div class="client-info">
                                <div class="client-name">{{ fee.customer_name }}</div>
                                {% if fee.source == 'Client Registration' %}
                                <div class="client-type">Client Registration</div>
                                {% endif %}
                            </div>
                        </td>
                        <td class="px-6 py-4">
                            <div class="font-medium text-gray-900">{{ fee.fee_name }}</div>
                            {% if fee.product_type != 'client_registration' %}
                            <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-800 mt-1">
                                {{ fee.product_type|title }}
                            </span>
                            {% endif %}
                        </td>
                        <td class="px-6 py-4">
                            <span class="registration-amount">KES {{ fee.amount|floatformat:2|intcomma }}</span>
                        </td>
                        <td class="px-6 py-4">
                            <span class="payment-method-badge">{{ fee.payment_method|title }}</span>
                        </td>
                        <td class="px-6 py-4">
                            <div class="text-gray-900 font-medium">{{ fee.payment_date|date:"M d, Y" }}</div>
                            <div class="text-xs text-gray-500">{{ fee.payment_date|date:"H:i" }}</div>
                        </td>
                        <td class="px-6 py-4">
                            <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">
                                <span>✓</span>
                                {{ fee.payment_status }}
                            </span>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>

        <!-- Data Source Breakdown -->
        {% if report_data.breakdown_by_source %}
        <div class="bg-purple-50 p-6 border-t">
            <h4 class="text-lg font-semibold text-gray-900 mb-4">Data Sources Breakdown</h4>
            <div class="grid grid-cols-2 gap-6">
                <div class="bg-white rounded-xl p-4 shadow-sm">
                    <div class="flex justify-between items-center">
                        <span class="text-gray-600 font-medium">Client Registration Fees:</span>
                        <span class="font-bold text-purple-600 text-lg">
                            KES {{ report_data.breakdown_by_source.user_registration_fees|floatformat:2|intcomma }}
                        </span>
                    </div>
                </div>
                <div class="bg-white rounded-xl p-4 shadow-sm">
                    <div class="flex justify-between items-center">
                        <span class="text-gray-600 font-medium">Separate Fee Payments:</span>
                        <span class="font-bold text-purple-600 text-lg">
                            KES {{ report_data.breakdown_by_source.registration_fee_payments|floatformat:2|intcomma }}
                        </span>
                    </div>
                </div>
            </div>
        </div>
        {% endif %}

        {% else %}
        <div class="text-center py-20">
            <div class="w-24 h-24 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-6">
                <i class="fas fa-file-invoice-dollar text-4xl text-purple-500"></i>
            </div>
            <h3 class="text-2xl font-bold text-gray-900 mb-4">No Registration Fees Found</h3>
            <p class="text-gray-600 mb-8 max-w-md mx-auto">
                {% if filters.start_date or filters.end_date %}
                    No registration fees match the selected date range.
                {% else %}
                    No registration fees have been recorded yet.
                {% endif %}
            </p>
            <div class="flex justify-center space-x-4">
                <a href="{% url 'reports:record_registration_fee_payment' %}" 
                   class="inline-flex items-center px-6 py-3 bg-purple-600 hover:bg-purple-700 text-white rounded-xl font-medium transition-colors shadow-lg">
                    <span>+</span> Record Fee Payment
                </a>
                <a href="{% url 'users:client_create' %}" 
                   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> Add New Client
                </a>
            </div>
        </div>
        {% endif %}
    </div>
</div>
</div>
{% endblock %}