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

{% block title %}Loan Analytics Dashboard{% endblock %}

{% block content %}
<div class="container mx-auto px-4 py-8">
    <div class="mb-8">
        <div class="bg-gradient-to-r from-blue-600 to-purple-600 rounded-lg p-6 text-white shadow-lg">
            <h1 class="text-3xl font-bold mb-3">
                <span>📈</span>
                Enhanced Loan Analytics Dashboard
            </h1>
            <p class="text-blue-100">
                Generate comprehensive loan portfolio reports with advanced visualizations including bar charts, 
                pie charts, and trend analysis. View reports in browser or download as PDF.
            </p>
        </div>
    </div>

    <div class="mb-8">
        <div class="bg-white rounded-lg shadow-lg p-6">
            <h4 class="text-xl font-bold mb-4 text-gray-800">
                <span>🔍</span>
                Report Filters
            </h4>
            
            <form id="analyticsForm" method="GET" action="{% url 'reports:loan_analytics_report' %}">
                <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
                    <div>
                        <label for="start_date" class="block text-sm font-medium text-gray-700 mb-2">Start Date</label>
                        <input type="date" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" id="start_date" name="start_date">
                    </div>
                    <div>
                        <label for="end_date" class="block text-sm font-medium text-gray-700 mb-2">End Date</label>
                        <input type="date" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" id="end_date" name="end_date">
                    </div>
                    <div>
                        <label for="borrower_id" class="block text-sm font-medium text-gray-700 mb-2">Borrower (Optional)</label>
                        <select class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" id="borrower_id" name="borrower_id">
                            <option value="">All Borrowers</option>
                            {% for borrower in borrowers %}
                            <option value="{{ borrower.id }}">{{ borrower.get_full_name|default:borrower.username }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div>
                        <label for="loan_product_id" class="block text-sm font-medium text-gray-700 mb-2">Loan Product (Optional)</label>
                        <select class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" id="loan_product_id" name="loan_product_id">
                            <option value="">All Products</option>
                            {% for product in loan_products %}
                            <option value="{{ product.id }}">{{ product.name }}</option>
                            {% endfor %}
                        </select>
                    </div>
                </div>
                
                <div class="text-center">
                    <button type="submit" class="bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-4 rounded mr-4" name="action" value="view">
                        <i class="fas fa-eye mr-2"></i>
                        View Report
                    </button>
                    <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded" name="action" value="download">
                        <span>⬇️</span>
                        Download PDF
                    </button>
                </div>
            </form>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <div class="bg-white rounded-lg shadow-lg p-6">
            <h5 class="text-lg font-bold mb-4 text-gray-800">
                <span>📊</span>
                What's Included
            </h5>
            <ul class="space-y-2">
                <li class="flex items-center"><span>✓</span>Executive Summary Dashboard</li>
                <li class="flex items-center"><span>✓</span>Portfolio Overview Analysis</li>
                <li class="flex items-center"><span>✓</span>Risk Analysis Dashboard</li>
                <li class="flex items-center"><span>✓</span>Profitability Analysis</li>
                <li class="flex items-center"><span>✓</span>Client Analysis Dashboard</li>
                <li class="flex items-center"><span>✓</span>Operational Metrics</li>
                <li class="flex items-center"><span>✓</span>Loan Performance Analysis</li>
                <li class="flex items-center"><span>✓</span>Portfolio Composition Analysis</li>
                <li class="flex items-center"><span>✓</span>Seasonal and Trend Analysis</li>
            </ul>
        </div>
        
        <div class="bg-white rounded-lg shadow-lg p-6">
            <h5 class="text-lg font-bold mb-4 text-gray-800">
                <span>📊</span>
                Chart Types
            </h5>
            <ul class="space-y-2">
                <li class="flex items-center"><span>📊</span>Bar Charts - Performance trends</li>
                <li class="flex items-center"><span>📊</span>Pie Charts - Portfolio composition</li>
                <li class="flex items-center"><span>📈</span>Line Charts - Time series analysis</li>
                <li class="flex items-center"><span>📈</span>Area Charts - Cumulative data</li>
                <li class="flex items-center"><i class="fas fa-chart-scatter text-red-500 mr-2"></i>Scatter Plots - Risk correlation</li>
                <li class="flex items-center"><i class="fas fa-chart-gauge text-gray-500 mr-2"></i>Gauge Charts - Performance indicators</li>
            </ul>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Set default date range (last 6 months)
    const today = new Date();
    const sixMonthsAgo = new Date();
    sixMonthsAgo.setMonth(today.getMonth() - 6);
    
    document.getElementById('end_date').value = today.toISOString().split('T')[0];
    document.getElementById('start_date').value = sixMonthsAgo.toISOString().split('T')[0];
    
    // Form submission handling
    document.getElementById('analyticsForm').addEventListener('submit', function(e) {
        const startDate = document.getElementById('start_date').value;
        const endDate = document.getElementById('end_date').value;
        
        if (startDate && endDate && startDate > endDate) {
            e.preventDefault();
            alert('Start date cannot be after end date.');
            return false;
        }
    });
});
</script>
{% endblock %}