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

{% block title %}Reports & Statements Dashboard{% endblock %}

{% block extra_css %}
<style>
    .dashboard-container {
        max-width: 1400px;
        margin: 0 auto;
        padding: 20px;
    }
    
    .dashboard-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 30px;
        border-radius: 15px;
        margin-bottom: 30px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    }
    
    .metric-card {
        background: white;
        border-radius: 12px;
        padding: 25px;
        box-shadow: 0 4px 20px rgba(0,0,0,0.08);
        transition: all 0.3s ease;
        border-left: 4px solid #667eea;
        height: 100%;
    }
    
    .metric-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 30px rgba(0,0,0,0.15);
    }
    
    .metric-value {
        font-size: 2.5rem;
        font-weight: bold;
        color: #2d3748;
        margin-bottom: 8px;
    }
    
    .metric-label {
        color: #718096;
        font-size: 0.9rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    
    .metric-icon {
        width: 50px;
        height: 50px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 15px;
    }
    
    .icon-blue { background: linear-gradient(135deg, #667eea, #764ba2); }
    .icon-green { background: linear-gradient(135deg, #48bb78, #38a169); }
    .icon-orange { background: linear-gradient(135deg, #ed8936, #dd6b20); }
    .icon-red { background: linear-gradient(135deg, #f56565, #e53e3e); }
    .icon-purple { background: linear-gradient(135deg, #9f7aea, #805ad5); }
    .icon-cyan { background: linear-gradient(135deg, #4fd1c7, #38b2ac); }
    
    .report-section {
        background: white;
        border-radius: 12px;
        padding: 25px;
        margin-bottom: 25px;
        box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    }
    
    .section-title {
        font-size: 1.4rem;
        font-weight: 600;
        color: #2d3748;
        margin-bottom: 20px;
        display: flex;
        align-items: center;
        gap: 10px;
    }
    
    .report-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 20px;
    }
    
    .report-card {
        background: #f7fafc;
        border: 1px solid #e2e8f0;
        border-radius: 10px;
        padding: 20px;
        transition: all 0.3s ease;
    }
    
    .report-card:hover {
        background: white;
        border-color: #667eea;
        transform: translateY(-2px);
    }
    
    .report-title {
        font-weight: 600;
        color: #2d3748;
        margin-bottom: 10px;
    }
    
    .report-description {
        color: #718096;
        font-size: 0.9rem;
        margin-bottom: 15px;
    }
    
    .report-actions {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
    }
    
    .btn {
        padding: 8px 16px;
        border-radius: 6px;
        font-size: 0.85rem;
        font-weight: 500;
        text-decoration: none;
        transition: all 0.2s ease;
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }
    
    .btn-primary {
        background: #667eea;
        color: white;
    }
    
    .btn-primary:hover {
        background: #5a67d8;
        color: white;
    }
    
    .btn-secondary {
        background: #e2e8f0;
        color: #4a5568;
    }
    
    .btn-secondary:hover {
        background: #cbd5e0;
        color: #2d3748;
    }
    
    .quick-stats {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 15px;
        margin-top: 20px;
    }
    
    .quick-stat {
        background: rgba(255,255,255,0.1);
        padding: 15px;
        border-radius: 8px;
        text-align: center;
    }
    
    .quick-stat-value {
        font-size: 1.5rem;
        font-weight: bold;
        margin-bottom: 5px;
    }
    
    .quick-stat-label {
        font-size: 0.8rem;
        opacity: 0.9;
    }
    
    @media (max-width: 768px) {
        .dashboard-container {
            padding: 15px;
        }
        
        .dashboard-header {
            padding: 20px;
        }
        
        .metric-value {
            font-size: 2rem;
        }
        
        .report-grid {
            grid-template-columns: 1fr;
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="dashboard-container">
    <!-- Header Section -->
    <div class="dashboard-header">
        <h1 style="margin: 0; font-size: 2.5rem; font-weight: 300;">Reports & Statements</h1>
        <p style="margin: 10px 0 0 0; opacity: 0.9; font-size: 1.1rem;">Comprehensive analytics and reporting dashboard</p>
        
        <div class="quick-stats">
            <div class="quick-stat">
                <div class="quick-stat-value">{{ dashboard_data.summary_metrics.total_active_loans|default:0 }}</div>
                <div class="quick-stat-label">Active Loans</div>
            </div>
            <div class="quick-stat">
                <div class="quick-stat-value">KES {{ dashboard_data.summary_metrics.total_portfolio_value|default:0|intcomma }}</div>
                <div class="quick-stat-label">Portfolio Value</div>
            </div>
            <div class="quick-stat">
                <div class="quick-stat-value">{{ dashboard_data.summary_metrics.collection_rate|default:0|floatformat:1 }}%</div>
                <div class="quick-stat-label">Collection Rate</div>
            </div>
            <div class="quick-stat">
                <div class="quick-stat-value">{{ dashboard_data.summary_metrics.loans_due_today|default:0 }}</div>
                <div class="quick-stat-label">Due Today</div>
            </div>
        </div>
    </div>

    <!-- Client Growth & Loan Officer Analytics Section -->
    <div style="margin-bottom: 40px;">
        <div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border-radius: 15px; padding: 30px; box-shadow: 0 10px 30px rgba(0,0,0,0.1);">
            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px;">
                <div>
                    <h2 style="margin: 0; font-size: 1.8rem; font-weight: 600;">
                        <i class="fas fa-users-cog"></i>
                        Client Growth & Loan Officer Performance
                    </h2>
                    <p style="margin: 5px 0 0 0; opacity: 0.9;">Track client acquisition and loan officer productivity</p>
                </div>
                <a href="{% url 'users:client_performance_ranking' %}" class="btn" style="background: white; color: #667eea; padding: 12px 24px; border-radius: 8px; text-decoration: none; font-weight: 600; box-shadow: 0 4px 15px rgba(0,0,0,0.1);">
                    <span>📈</span> View Detailed Report
                </a>
            </div>
            
            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px;">
                <div style="background: rgba(255,255,255,0.2); padding: 20px; border-radius: 10px; text-align: center;">
                    <div style="font-size: 2rem; font-weight: bold;" id="total-clients-count">
                        <span>⟳</span>
                    </div>
                    <div style="font-size: 0.9rem; opacity: 0.9; margin-top: 5px;">Total Active Clients</div>
                </div>
                <div style="background: rgba(255,255,255,0.2); padding: 20px; border-radius: 10px; text-align: center;">
                    <div style="font-size: 2rem; font-weight: bold;" id="new-clients-this-month">
                        <span>⟳</span>
                    </div>
                    <div style="font-size: 0.9rem; opacity: 0.9; margin-top: 5px;">New Clients This Month</div>
                </div>
                <div style="background: rgba(255,255,255,0.2); padding: 20px; border-radius: 10px; text-align: center;">
                    <div style="font-size: 2rem; font-weight: bold;" id="active-loan-officers">
                        <span>⟳</span>
                    </div>
                    <div style="font-size: 0.9rem; opacity: 0.9; margin-top: 5px;">Active Loan Officers</div>
                </div>
                <div style="background: rgba(255,255,255,0.2); padding: 20px; border-radius: 10px; text-align: center;">
                    <div style="font-size: 2rem; font-weight: bold;" id="avg-clients-per-officer">
                        <span>⟳</span>
                    </div>
                    <div style="font-size: 0.9rem; opacity: 0.9; margin-top: 5px;">Avg Clients/Officer</div>
                </div>
            </div>
        </div>
    </div>

    <!-- Key Metrics Grid -->
    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 25px; margin-bottom: 40px;">
        <!-- Portfolio Overview -->
        <div class="metric-card">
            <div class="metric-icon icon-blue">
                <span>📊</span>
            </div>
            <div class="metric-value">{{ dashboard_data.summary_metrics.total_active_loans|default:0 }}</div>
            <div class="metric-label">Active Loans</div>
        </div>

        <!-- Portfolio Value -->
        <div class="metric-card">
            <div class="metric-icon icon-green">
                <span>🪙</span>
            </div>
            <div class="metric-value">KES {{ dashboard_data.summary_metrics.total_portfolio_value|default:0|intcomma }}</div>
            <div class="metric-label">Portfolio Value</div>
        </div>

        <!-- Outstanding Amount -->
        <div class="metric-card">
            <div class="metric-icon icon-orange">
                <span>⚠️</span>
            </div>
            <div class="metric-value">KES {{ dashboard_data.summary_metrics.total_outstanding|default:0|intcomma }}</div>
            <div class="metric-label">Outstanding</div>
        </div>

        <!-- Overdue Loans -->
        <div class="metric-card">
            <div class="metric-icon icon-red">
                <i class="fas fa-calendar-times" style="color: white; font-size: 1.5rem;"></i>
            </div>
            <div class="metric-value">{{ dashboard_data.summary_metrics.overdue_loans|default:0 }}</div>
            <div class="metric-label">Overdue Loans</div>
        </div>
    </div>

    <!-- Loan Reports Section -->
    <div class="report-section">
        <h2 class="section-title">
            <span>📄</span>
            Loan Reports
        </h2>
        
        <div class="report-grid">
            <div class="report-card">
                <div class="report-title">Loans Due Report</div>
                <div class="report-description">View loans due today, tomorrow, and upcoming due dates with borrower contact information.</div>
                <div class="report-actions">
                    <a href="{% url 'reports:enhanced_loans_due_report' %}" class="btn btn-primary">
                        <i class="fas fa-calendar-day"></i> View Report
                    </a>
                    <a href="{% url 'reports:enhanced_loans_due_report' %}?today_only=true" class="btn btn-secondary">
                        <span>⏰</span> Due Today
                    </a>
                </div>
            </div>

            <div class="report-card">
                <div class="report-title">Delinquent Loans</div>
                <div class="report-description">Track overdue loans categorized by severity (1-30, 31-60, 60+ days overdue).</div>
                <div class="report-actions">
                    <a href="{% url 'reports:delinquent_loans_report' %}" class="btn btn-primary">
                        <span>⚠️</span> View Report
                    </a>
                </div>
            </div>

            <div class="report-card">
                <div class="report-title">Loans in Arrears</div>
                <div class="report-description">Detailed analysis of loans with missed payments and arrears calculations.</div>
                <div class="report-actions">
                    <a href="{% url 'reports:loans_in_arrears_report' %}" class="btn btn-primary">
                        <span>📈</span> View Report
                    </a>
                </div>
            </div>

            <div class="report-card">
                <div class="report-title">Portfolio Details</div>
                <div class="report-description">Comprehensive portfolio overview with detailed loan metrics and performance.</div>
                <div class="report-actions">
                    <a href="{% url 'reports:portfolio_details' %}" class="btn btn-primary">
                        <i class="fas fa-briefcase"></i> View Details
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Financial Reports Section -->
    <div class="report-section">
        <h2 class="section-title">
            <span>📊</span>
            Financial Reports
        </h2>
        
        <div class="report-grid">
            <div class="report-card">
                <div class="report-title">Processing Fees Report</div>
                <div class="report-description">
                    Total processing fees: KES {{ dashboard_data.processing_fees_current_month.summary.total_processing_fees|default:0|intcomma }}
                    <br>Loans processed: {{ dashboard_data.processing_fees_current_month.summary.total_loans_processed|default:0 }}
                </div>
                <div class="report-actions">
                    <a href="{% url 'reports:processing_fees_report' %}" class="btn btn-primary">
                        <span>🪙</span> View Report
                    </a>
                </div>
            </div>

            <div class="report-card">
                <div class="report-title">Interest Income Report</div>
                <div class="report-description">
                    Total interest income: KES {{ dashboard_data.interest_income_current_month.summary.total_interest_income|default:0|intcomma }}
                    <br>Interest bearing loans: {{ dashboard_data.interest_income_current_month.summary.total_loans|default:0 }}
                </div>
                <div class="report-actions">
                    <a href="{% url 'reports:interest_income_report' %}" class="btn btn-primary">
                        <i class="fas fa-percentage"></i> View Report
                    </a>
                </div>
            </div>

            <div class="report-card">
                <div class="report-title">Registration Fees</div>
                <div class="report-description">
                    Total registration income: KES {{ dashboard_data.registration_fees_current_month.summary.total_registration_income|default:0|intcomma }}
                    <br>Registrations: {{ dashboard_data.registration_fees_current_month.summary.total_registrations|default:0 }}
                </div>
                <div class="report-actions">
                    <a href="{% url 'reports:registration_fees_report' %}" class="btn btn-primary">
                        <i class="fas fa-file-invoice-dollar"></i> View Report
                    </a>
                    <a href="{% url 'reports:registration_fees_settings' %}" class="btn btn-secondary">
                        <span>⚙️</span> Settings
                    </a>
                </div>
            </div>

            <div class="report-card">
                <div class="report-title">Collection Performance</div>
                <div class="report-description">Monthly collection rates, payment trends, and recovery performance metrics.</div>
                <div class="report-actions">
                    <a href="{% url 'reports:collection_details' %}" class="btn btn-primary">
                        <span>💰</span> View Details
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Customer Service Section -->
    <div class="report-section">
        <h2 class="section-title">
            <i class="fas fa-headset" style="color: #ed8936;"></i>
            Customer Service
        </h2>
        
        <div class="report-grid">
            <div class="report-card">
                <div class="report-title">Customer Requests</div>
                <div class="report-description">
                    Pending: {{ dashboard_data.customer_requests_current_month.summary.pending_requests|default:0 }} | 
                    In Progress: {{ dashboard_data.customer_requests_current_month.summary.in_progress_requests|default:0 }} | 
                    Resolved: {{ dashboard_data.customer_requests_current_month.summary.resolved_requests|default:0 }}
                </div>
                <div class="report-actions">
                    <a href="{% url 'reports:customer_requests_list' %}" class="btn btn-primary">
                        <span>📋</span> Manage Requests
                    </a>
                    <a href="{% url 'reports:create_customer_request' %}" class="btn btn-secondary">
                        <span>+</span> Create New
                    </a>
                </div>
            </div>

            <div class="report-card">
                <div class="report-title">Customer Requests Report</div>
                <div class="report-description">Comprehensive analytics on customer service requests, resolution times, and performance metrics.</div>
                <div class="report-actions">
                    <a href="{% url 'reports:customer_requests_report' %}" class="btn btn-primary">
                        <span>📊</span> View Report
                    </a>
                </div>
            </div>

            <div class="report-card">
                <div class="report-title">Record Fee Payment</div>
                <div class="report-description">Record registration fee payments and generate receipts for customer transactions.</div>
                <div class="report-actions">
                    <a href="{% url 'reports:record_registration_fee_payment' %}" class="btn btn-primary">
                        <span>🧾</span> Record Payment
                    </a>
                </div>
            </div>

            <div class="report-card">
                <div class="report-title">Outstanding Loans</div>
                <div class="report-description">Detailed view of all loans with outstanding balances and payment tracking.</div>
                <div class="report-actions">
                    <a href="{% url 'reports:outstanding_loans' %}" class="btn btn-primary">
                        <span>💵</span> View Outstanding
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Quick Actions -->
    <div class="report-section">
        <h2 class="section-title">
            <span>⚡</span>
            Quick Actions
        </h2>
        
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px;">
            <a href="{% url 'reports:api_dashboard' %}" class="btn btn-primary" style="padding: 15px; text-align: center; justify-content: center;">
                <i class="fas fa-tachometer-alt"></i> API Dashboard
            </a>
            <a href="{% url 'reports:legacy_dashboard' %}" class="btn btn-secondary" style="padding: 15px; text-align: center; justify-content: center;">
                <i class="fas fa-history"></i> Legacy Dashboard
            </a>
            <a href="{% url 'loans:analytics_dashboard' %}" class="btn btn-primary" style="padding: 15px; text-align: center; justify-content: center;">
                <span>📊</span> Loan Analytics
            </a>
            <a href="{% url 'admin:index' %}" class="btn btn-secondary" style="padding: 15px; text-align: center; justify-content: center;">
                <span>⚙️</span> Admin Panel
            </a>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Add loading states to buttons
    const buttons = document.querySelectorAll('a.btn');
    buttons.forEach(button => {
        button.addEventListener('click', function(e) {
            const icon = this.querySelector('i');
            if (icon && !this.href.includes('#')) {
                const originalClass = icon.className;
                icon.className = 'fas fa-spinner fa-spin';
                
                // Reset after 3 seconds in case of navigation issues
                setTimeout(() => {
                    icon.className = originalClass;
                }, 3000);
            }
        });
    });
    
    // Add smooth scrolling for internal links
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
            e.preventDefault();
            const target = document.querySelector(this.getAttribute('href'));
            if (target) {
                target.scrollIntoView({
                    behavior: 'smooth',
                    block: 'start'
                });
            }
        });
    });
});
</script>
{% endblock %}