{% extends 'extends/layout.html' %}
{% load static %}
{% load humanize %}
{% load mathfilters %}

{% block content %}
    {% block scripts %}
        <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
        <script type="text/javascript">
            google.charts.load("current", {packages: ["corechart", "bar"]});
            google.charts.setOnLoadCallback(drawCharts);

            function drawCharts() {
                // Original charts from single business view
                let individuals = parseInt("{{ individuals.count }}");
                let groups = parseInt("{{ groups.count }}");
                let male = parseInt("{{ male.count }}");
                let female = parseInt("{{ female.count }}");
                let unknown = parseInt("{{ unknown.count }}");
                let sold = parseInt("{{ shares_sold }}");
                let share_balance = parseInt("{{ share_balance }}");

                // Original pie charts data and options
                const IGdata = google.visualization.arrayToDataTable([
                    ['Clients', 'Client Categories'],
                    ['Individual Clients', individuals],
                    ['Group Clients', groups]
                ]);

                const FMdata = google.visualization.arrayToDataTable([
                    ['Clients', 'Client By Gender'],
                    ['Male Clients', male],
                    ['Female Clients', female],
                    ['Unknown Clients', unknown]
                ]);

                const SBdata = google.visualization.arrayToDataTable([
                    ['Shares', 'Sold Shares'],
                    ['Sold Shares', sold],
                    ['Remaining Shares', share_balance]
                ]);

                // Business comparison chart data
                const businessData = google.visualization.arrayToDataTable([
                    ['Business', 'Clients', 'Active Loans', 'Savings (Millions)'],
                    {% for metric in business_metrics %}
                        ['{{ metric.name }}',
                            {{ metric.total_clients }},
                            {{ metric.total_loans }},
                            {{ metric.total_savings }}],
                    {% endfor %}
                ]);

                // Chart options
                const IGOptions = {
                    title: 'Total Individuals Vs Groups Clients',
                    pieStartAngle: 180,
                };
                const FMOptions = {
                    title: 'Total Males Vs Females Clients',
                    pieStartAngle: 180,
                };
                const SBOptions = {
                    title: 'Total Sold Vs Remaining Shares',
                    pieStartAngle: 180,
                };
                const businessComparisonOptions = {
                    title: 'Business Comparison',
                    chartArea: {width: '50%'},
                    hAxis: {
                        title: 'Metrics',
                        minValue: 0
                    },
                    vAxis: {
                        title: 'Business'
                    }
                };

                // Draw charts
                new google.visualization.PieChart(document.getElementById('IndividualsGroups')).draw(IGdata, IGOptions);
                new google.visualization.PieChart(document.getElementById('MaleFemale')).draw(FMdata, FMOptions);
                new google.visualization.PieChart(document.getElementById('SoldBalance')).draw(SBdata, SBOptions);
                new google.visualization.BarChart(document.getElementById('BusinessComparison')).draw(businessData, businessComparisonOptions);
            }
        </script>
    {% endblock %}

    <!-- Start row -->
    <div class="row">
        <!-- Aggregate Stats Section -->
        <div class="col-lg-12">
            <h4 class="mb-4">Aggregate Statistics</h4>
        </div>

        <!-- Total Members Card -->
        <div class="col-lg-4 col-xl-4">
            <div class="card m-b-15 border border-dark">
                <div class="card-body">
                    <div class="float-end">
                        <i class="fa fa-users fa-3x"></i>
                    </div>
                    <h5 class="text-muted fw-normal mt-0">Total Members(All Businesses)</h5>
                    <h4 class="mt-1 mb-1">{{ clients.count }}</h4>
                    <p class="pt-2 border-top">
                        <span class="text-nowrap">Updated {% now "jS F Y H:i" %}</span>
                    </p>
                </div>
            </div>
        </div>

        <!-- Individuals vs Groups Card -->
        <div class="col-lg-4 col-xl-4">
            <div class="card m-b-15 border border-dark">
                <div class="card-body">
                    <div class="float-end">
                        <i class="fa fa-chart-pie fa-3x"></i>
                    </div>
                    <h5 class="text-muted fw-normal mt-0">Total Individuals : Groups</h5>
                    <h4 class="mt-1 mb-1">{{ individuals.count }} : {{ groups.count }}</h4>
                    <p class="pt-2 border-top">
                        <span class="text-nowrap">Updated {% now "jS F Y H:i" %}</span>
                    </p>
                </div>
            </div>
        </div>

        <!-- Active Loans Card -->
        <div class="col-lg-4 col-xl-4">
            <div class="card m-b-15 border border-dark">
                <div class="card-body">
                    <div class="float-end">
                        <i class="fa fa-money-bill fa-3x"></i>
                    </div>
                    <h5 class="text-muted fw-normal mt-0">Total Active Loans</h5>
                    <h4 class="mt-1 mb-1">{{ active_loans.count }}</h4>
                    <p class="pt-2 border-top">
                        <span class="text-nowrap">Updated {% now "jS F Y H:i" %}</span>
                    </p>
                </div>
            </div>
        </div>

        <!-- Charts Section -->
        <div class="col-lg-12">
            <h4 class="mb-4 mt-4">Visual Analytics</h4>
        </div>

        <!-- Original Charts -->
        <div class="col-lg-6">
            <div class="card m-b-15 border border-dark">
                <div class="card-body p-0">
                    <div id="IndividualsGroups" style="height: 300px;"></div>
                </div>
            </div>
        </div>

        <div class="col-lg-6">
            <div class="card m-b-15 border border-dark">
                <div class="card-body p-0">
                    <div id="MaleFemale" style="height: 300px;"></div>
                </div>
            </div>
        </div>

        <!-- Sold Balance Chart -->
        <div class="col-lg-12">
            <div class="card m-b-15 border border-dark">
                <div class="card-body p-0">
                    <div id="SoldBalance" style="height: 400px;"></div>
                </div>
            </div>
        </div>

        <!-- Business Comparison Chart -->
        <div class="col-lg-12">
            <div class="card m-b-15 border border-dark">
                <div class="card-body p-0">
                    <div id="BusinessComparison" style="height: 400px;"></div>
                </div>
            </div>
        </div>

        <!-- Business Specific Metrics Table -->
        <div class="col-lg-12">
            <div class="card m-b-15 border border-dark">
                <div class="card-header">
                    <h5 class="card-title mb-0">Business-wise Metrics</h5>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table">
                            <thead>
                            <tr>
                                <th>Business Name</th>
                                <th>Total Clients</th>
                                <th>Active Loans</th>
                                <th>Total Savings</th>
                            </tr>
                            </thead>
                            <tbody>
                            {% for metric in business_metrics %}
                                <tr>
                                    <td>{{ metric.name }}</td>
                                    <td>{{ metric.total_clients }}</td>
                                    <td>{{ metric.total_loans }}</td>
                                    <td>{{ metric.total_savings|floatformat:2|intcomma }}</td>
                                </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}