{% load static %}
{% include 'includes/header.html' %}
{% include 'includes/sidebar.html' %}
{% include 'includes/navbar.html' %}

<style>
    .filter-bar {
        background: white;
        padding: 0.8rem;
        border-radius: 12px;
        margin-bottom: 1.5rem;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    }

    .kpi-card-mini {
        border: none;
        border-radius: 12px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
        height: 100%;
        background: #fff;
        transition: transform 0.2s;
    }
    .kpi-card-mini:hover {
        transform: translateY(-5px);
    }

    .icon-box {
        width: 42px;
        height: 42px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.2rem;
    }

    .kpi-label {
        font-size: 0.7rem;
        color: #6c757d;
        font-weight: 700;
        margin-bottom: 2px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .kpi-value {
        font-size: 1.15rem;
        font-weight: 800;
        margin-bottom: 2px;
        color: #333;
    }

    .kpi-subtext {
        font-size: 0.65rem;
        color: #888;
        font-weight: 600;
    }

    .section-title {
        font-size: 1rem;
        font-weight: 700;
        color: #444;
        margin-bottom: 1rem;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .scrollable-table {
        max-height: 350px;
        overflow-y: auto;
    }

    .performance-table th {
        font-size: 0.75rem;
        text-transform: uppercase;
        color: #6c757d;
        font-weight: 700;
        background-color: #f8f9fa;
        position: sticky;
        top: 0;
        z-index: 10;
    }
    .performance-table td {
        font-size: 0.85rem;
        vertical-align: middle;
    }
</style>

<div class="container-xxl flex-grow-1 container-p-y">
    <!-- Header & Filter -->
    <div class="filter-bar d-flex align-items-center justify-content-between px-3">
        <div class="d-flex align-items-center gap-3">
            <h5 class="mb-0 fw-bold d-flex align-items-center gap-2">
                <i class="fas fa-chart-pie text-primary"></i> Admin Analytics Command Center
            </h5>
            <a href="{% url 'branch_wise_performance' %}" class="btn btn-sm btn-outline-primary ms-3">
                <i class="fas fa-list-check me-1"></i> Branch Performance Report
            </a>
        </div>
        <div class="d-flex align-items-center gap-3">
            <form method="GET" id="filterForm" class="d-flex align-items-center gap-3">
                <div class="d-flex align-items-center gap-2">
                    <span class="text-muted small fw-bold">BRANCH:</span>
                    <select name="branch_id" onchange="this.form.submit()" class="form-select form-select-sm"
                        style="width: auto; border-radius: 8px; font-weight: 700; border-color: #7367f0;">
                        <option value="all" {% if selected_branch_id == 'all' %}selected{% endif %}>All Branches</option>
                        {% for branch in all_branches %}
                        <option value="{{ branch.id }}" {% if selected_branch_id|add:"0" == branch.id|add:"0" %}selected{% endif %}>{{ branch.name }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="d-flex align-items-center gap-2">
                    <span class="text-muted small fw-bold">PERIOD:</span>
                    <select name="period" onchange="this.form.submit()" class="form-select form-select-sm"
                        style="width: auto; border-radius: 8px; font-weight: 700; border-color: #7367f0;">
                        <option value="today" {% if period == 'today' %}selected{% endif %}>Today</option>
                        <option value="yesterday" {% if period == 'yesterday' %}selected{% endif %}>Yesterday</option>
                        <option value="last_7_days" {% if period == 'last_7_days' %}selected{% endif %}>Last 7 Days</option>
                        <option value="this_month" {% if period == 'this_month' %}selected{% endif %}>This Month</option>
                        <option value="last_month" {% if period == 'last_month' %}selected{% endif %}>Last Month</option>
                        <option value="this_year" {% if period == 'this_year' %}selected{% endif %}>This Year</option>
                        <option value="all" {% if period == 'all' %}selected{% endif %}>All Time</option>
                    </select>
                </div>
            </form>
        </div>
    </div>

    <!-- 6-Column KPI Row 1: Primary Metrics -->
    <div class="row g-3 mb-4">
        <div class="col-md-2">
            <div class="card kpi-card-mini">
                <div class="card-body p-3">
                    <div class="kpi-label">Gross Revenue</div>
                    <div class="kpi-value text-primary">₹{{ total_sales|floatformat:0 }}</div>
                    <div class="kpi-subtext">{{ total_orders }} Sales Invoices</div>
                </div>
            </div>
        </div>
        <div class="col-md-2">
            <div class="card kpi-card-mini">
                <div class="card-body p-3">
                    <div class="kpi-label">Purchase Value</div>
                    <div class="kpi-value text-success">₹{{ total_purchase|floatformat:0 }}</div>
                    <div class="kpi-subtext">{{ purchase_orders }} Inward Bills</div>
                </div>
            </div>
        </div>
        <div class="col-md-2">
            <div class="card kpi-card-mini">
                <div class="card-body p-3">
                    <div class="kpi-label">Operating Exp</div>
                    <div class="kpi-value text-danger">₹{{ total_expenses|floatformat:0 }}</div>
                    <div class="kpi-subtext">Total Cash Outflow</div>
                </div>
            </div>
        </div>
        <div class="col-md-2">
            <div class="card kpi-card-mini">
                <div class="card-body p-3">
                    <div class="kpi-label">Net Profit</div>
                    <div class="kpi-value {% if net_profit >= 0 %}text-success{% else %}text-danger{% endif %}">₹{{ net_profit|floatformat:0 }}</div>
                    <div class="kpi-subtext">After CoS & Expenses</div>
                </div>
            </div>
        </div>
        <div class="col-md-2">
            <div class="card kpi-card-mini">
                <div class="card-body p-3">
                    <div class="kpi-label">Avg Order Value</div>
                    <div class="kpi-value text-info">₹{{ avg_order_value|floatformat:0 }}</div>
                    <div class="kpi-subtext">Per Transaction</div>
                </div>
            </div>
        </div>
        <div class="col-md-2">
            <div class="card kpi-card-mini">
                <div class="card-body p-3">
                    <div class="kpi-label">Active Stores</div>
                    <div class="kpi-value text-dark">{{ total_stores }}</div>
                    <div class="kpi-subtext">Managed Branches</div>
                </div>
            </div>
        </div>
    </div>

    <!-- 6-Column KPI Row 2: Secondary Metrics -->
    <div class="row g-3 mb-4">
        <div class="col-md-2">
            <div class="card kpi-card-mini">
                <div class="card-body p-3">
                    <div class="kpi-label">Sales Returns</div>
                    <div class="kpi-value text-danger">₹{{ total_sales_returns|floatformat:0 }}</div>
                    <div class="kpi-subtext">{{ sales_return_count }} Return Invoices</div>
                </div>
            </div>
        </div>
        <div class="col-md-2">
            <div class="card kpi-card-mini">
                <div class="card-body p-3">
                    <div class="kpi-label">Stock Units</div>
                    <div class="kpi-value">{{ total_stock_qty }}</div>
                    <div class="kpi-subtext">Items across Group</div>
                </div>
            </div>
        </div>
        <div class="col-md-2">
            <div class="card kpi-card-mini">
                <div class="card-body p-3">
                    <div class="kpi-label">Stock Value</div>
                    <div class="kpi-value text-warning">₹{{ total_stock_value|floatformat:0 }}</div>
                    <div class="kpi-subtext">Current Asset Value</div>
                </div>
            </div>
        </div>
        <div class="col-md-2">
            <div class="card kpi-card-mini">
                <div class="card-body p-3">
                    <div class="kpi-label">Gross Margin</div>
                    <div class="kpi-value text-success">₹{{ gross_profit|floatformat:0 }}</div>
                    <div class="kpi-subtext">Sales - Product Cost</div>
                </div>
            </div>
        </div>
        <div class="col-md-2">
            <div class="card kpi-card-mini">
                <div class="card-body p-3">
                    <div class="kpi-label">Total Customers</div>
                    <div class="kpi-value">{{ total_customers }}</div>
                    <div class="kpi-subtext">+{{ new_customers }} New Members</div>
                </div>
            </div>
        </div>
        <div class="col-md-2">
            <div class="card kpi-card-mini">
                <div class="card-body p-3">
                    <div class="kpi-label">Status</div>
                    <div class="kpi-value text-success">ONLINE</div>
                    <div class="kpi-subtext">System Health: Good</div>
                </div>
            </div>
        </div>
    </div>

    <!-- Analytics & Charts Row -->
    <div class="row mb-4">
        <!-- Branch Performance Chart -->
        <div class="col-md-7">
            <div class="card h-100 shadow-sm">
                <div class="card-header d-flex align-items-center justify-content-between bg-white py-3">
                    <h5 class="card-title m-0 fw-bold"><i class="fas fa-chart-bar text-info me-2"></i> Branch Performance Comparison</h5>
                </div>
                <div class="card-body">
                    <div id="branchPerformanceChart" style="min-height: 350px;"></div>
                </div>
            </div>
        </div>
        <!-- Profitability Trends or Margin Analysis -->
        <div class="col-md-5">
            <div class="card h-100 shadow-sm">
                <div class="card-header d-flex align-items-center justify-content-between bg-white py-3">
                    <h5 class="card-title m-0 fw-bold"><i class="fas fa-percentage text-success me-2"></i> Margin Analysis</h5>
                </div>
                <div class="card-body">
                    <div id="marginAnalysisChart" style="min-height: 350px;"></div>
                </div>
            </div>
        </div>
    </div>

    <!-- Analytics & Activity Row 1 -->
    <div class="row g-4 mb-4">
        <!-- Low Stock Alerts -->
        <div class="col-md-4">
            <div class="card h-100 shadow-sm">
                <div class="card-header d-flex align-items-center justify-content-between bg-white py-3">
                    <h5 class="card-title m-0 fw-bold"><i class="fas fa-exclamation-triangle text-danger me-2"></i> Low Stock Alerts</h5>
                </div>
                <div class="table-responsive">
                    <table class="table table-sm table-hover">
                        <thead>
                            <tr class="bg-light">
                                <th class="ps-3">Item</th>
                                <th class="text-center">Qty</th>
                                <th class="ps-2">Branch</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for item in low_stock_items %}
                            <tr>
                                <td class="ps-3 py-2 small fw-bold">{{ item.model_name }}</td>
                                <td class="text-center"><span class="badge bg-label-danger">{{ item.quantity }}</span></td>
                                <td class="ps-2 small">{{ item.branch_name }}</td>
                            </tr>
                            {% empty %}
                            <tr><td colspan="3" class="text-center py-3">No low stock alerts</td></tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- Recent Expenses -->
        <div class="col-md-4">
            <div class="card h-100 shadow-sm">
                <div class="card-header d-flex align-items-center justify-content-between bg-white py-3">
                    <h5 class="card-title m-0 fw-bold"><i class="fas fa-receipt text-warning me-2"></i> Recent Expenses</h5>
                </div>
                <div class="table-responsive">
                    <table class="table table-sm table-hover">
                        <thead>
                            <tr class="bg-light">
                                <th class="ps-3">Category</th>
                                <th class="text-end">Amount</th>
                                <th class="ps-2">Branch</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for exp in recent_expenses %}
                            <tr>
                                <td class="ps-3 py-2 small fw-bold">{{ exp.category_name }}</td>
                                <td class="text-end fw-bold text-danger">₹{{ exp.amount|floatformat:0 }}</td>
                                <td class="ps-2 small">{{ exp.branch_name }}</td>
                            </tr>
                            {% empty %}
                            <tr><td colspan="3" class="text-center py-3">No recent expenses</td></tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- Payment Mode Analysis -->
        <div class="col-md-4">
            <div class="card h-100 shadow-sm">
                <div class="card-header d-flex align-items-center justify-content-between bg-white py-3">
                    <h5 class="card-title m-0 fw-bold"><i class="fas fa-wallet text-success me-2"></i> Payment Modes</h5>
                </div>
                <div class="card-body p-0">
                    <ul class="list-group list-group-flush">
                        {% for pm in payment_modes %}
                        <li class="list-group-item d-flex justify-content-between align-items-center py-3">
                            <div class="d-flex align-items-center">
                                <div class="avatar avatar-sm me-3">
                                    <span class="avatar-initial rounded bg-label-secondary"><i class="fas fa-credit-card"></i></span>
                                </div>
                                <h6 class="mb-0 fw-bold text-uppercase">{{ pm.payment_type }}</h6>
                            </div>
                            <h6 class="mb-0 fw-extrabold text-success">₹{{ pm.total|floatformat:0 }}</h6>
                        </li>
                        {% empty %}
                        <li class="list-group-item text-center py-3">No payment data</li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <!-- Analytics & Activity Row 2 -->
    <div class="row g-4">
        <!-- Top Products -->
        <div class="col-md-6">
            <div class="card h-100">
                <div class="card-header d-flex align-items-center justify-content-between">
                    <h5 class="card-title m-0 fw-bold"><i class="fas fa-trophy text-warning me-2"></i> Top Selling Products</h5>
                </div>
                <div class="table-responsive">
                    <table class="table table-sm table-borderless table-hover">
                        <thead class="border-bottom">
                            <tr>
                                <th class="ps-3">Model Name</th>
                                <th class="text-center">Qty Sold</th>
                                <th class="text-end pe-3">Revenue</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for p in top_products %}
                            <tr>
                                <td class="ps-3 py-2 fw-medium">{{ p.model_name }}</td>
                                <td class="text-center">{{ p.qty }}</td>
                                <td class="text-end pe-3 fw-bold">₹{{ p.revenue|floatformat:0 }}</td>
                            </tr>
                            {% empty %}
                            <tr>
                                <td colspan="3" class="text-center py-3">No product data</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- Recent Transactions -->
        <div class="col-md-6">
            <div class="card h-100">
                <div class="card-header d-flex align-items-center justify-content-between">
                    <h5 class="card-title m-0 fw-bold"><i class="fas fa-history text-info me-2"></i> Recent Group Transactions</h5>
                </div>
                <div class="card-body p-0">
                    <ul class="list-group list-group-flush">
                        {% for sale in recent_sales %}
                        <li class="list-group-item d-flex align-items-center py-3 border-0 border-bottom">
                            <div class="avatar me-3">
                                <span class="avatar-initial rounded-circle bg-label-success"><i class="fas fa-shopping-bag"></i></span>
                            </div>
                            <div class="d-flex w-100 flex-wrap align-items-center justify-content-between">
                                <div class="me-2">
                                    <h6 class="mb-0 fw-bold">#{{ sale.inv_no }}</h6>
                                    <small class="text-muted">{{ sale.created_on|date:"M d, H:i" }}</small>
                                </div>
                                <div class="text-end">
                                    <h6 class="mb-0 fw-extrabold text-primary">₹{{ sale.total_amount|floatformat:0 }}</h6>
                                </div>
                            </div>
                        </li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const chartData = {{ chart_data|safe }};
    
    // 1. Branch Performance Chart (Bar Chart)
    const performanceOptions = {
        series: [{
            name: 'Revenue',
            data: chartData.sales
        }, {
            name: 'Est. Profit',
            data: chartData.profit
        }],
        chart: {
            type: 'bar',
            height: 350,
            toolbar: { show: false }
        },
        plotOptions: {
            bar: {
                horizontal: false,
                columnWidth: '55%',
                borderRadius: 4
            },
        },
        dataLabels: { enabled: false },
        stroke: {
            show: true,
            width: 2,
            colors: ['transparent']
        },
        xaxis: {
            categories: chartData.labels,
        },
        yaxis: {
            title: { text: 'Amount (₹)' }
        },
        fill: { opacity: 1 },
        tooltip: {
            y: {
                formatter: function (val) {
                    return "₹ " + val.toLocaleString()
                }
            }
        },
        colors: ['#7367f0', '#28c76f']
    };

    const performanceChart = new ApexCharts(document.querySelector("#branchPerformanceChart"), performanceOptions);
    performanceChart.render();

    // 2. Margin Analysis Chart (Radar or Bar)
    const marginOptions = {
        series: [{
            name: 'Net Margin %',
            data: chartData.margin
        }],
        chart: {
            height: 350,
            type: 'radar',
            toolbar: { show: false }
        },
        dataLabels: {
            enabled: true,
            background: {
                enabled: true,
                borderRadius: 2,
            }
        },
        plotOptions: {
            radar: {
                size: 140,
                polygons: {
                    strokeColors: '#e9e9e9',
                    fill: {
                        colors: ['#f8f8f8', '#fff']
                    }
                }
            }
        },
        colors: ['#ff9f43'],
        markers: {
            size: 4,
            colors: ['#fff'],
            strokeColor: '#ff9f43',
            strokeWidth: 2,
        },
        tooltip: {
            y: {
                formatter: function(val) {
                    return val + "%"
                }
            }
        },
        xaxis: {
            categories: chartData.labels
        },
        yaxis: {
            tickAmount: 5,
            labels: {
                formatter: function(val, i) {
                    if (i % 2 === 0) return val + "%"
                    return ""
                }
            }
        }
    };

    const marginChart = new ApexCharts(document.querySelector("#marginAnalysisChart"), marginOptions);
    marginChart.render();
});
</script>

{% include 'includes/footer.html' %}