{% extends "base.html" %}

{% block content %}
<h2 class="mb-4 text-gradient">
    <i class="fas fa-chart-pie me-2"></i> Business Analytics & Reports
</h2>

<!-- Year and Month Filter -->
<div class="row mb-4">
    <div class="col-md-8">
        <div class="garments-card">
            <div class="card-body">
                <form method="GET" action="{{ url_for('analytics') }}" class="row align-items-end">
                    <div class="col-md-4">
                        <label class="form-label"><i class="fas fa-calendar-alt me-2"></i>Select Year</label>
                        <select name="year" class="form-select" id="yearFilter">
                            <option value="">All Years</option>
                            {% for year in available_years %}
                            <option value="{{ year }}" {% if selected_year == year %}selected{% endif %}>
                                {{ year }}
                            </option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label"><i class="fas fa-calendar me-2"></i>Select Month (Optional)</label>
                        <select name="month" class="form-select" id="monthFilter">
                            <option value="">All Months</option>
                            <option value="1" {% if selected_month == '1' %}selected{% endif %}>January</option>
                            <option value="2" {% if selected_month == '2' %}selected{% endif %}>February</option>
                            <option value="3" {% if selected_month == '3' %}selected{% endif %}>March</option>
                            <option value="4" {% if selected_month == '4' %}selected{% endif %}>April</option>
                            <option value="5" {% if selected_month == '5' %}selected{% endif %}>May</option>
                            <option value="6" {% if selected_month == '6' %}selected{% endif %}>June</option>
                            <option value="7" {% if selected_month == '7' %}selected{% endif %}>July</option>
                            <option value="8" {% if selected_month == '8' %}selected{% endif %}>August</option>
                            <option value="9" {% if selected_month == '9' %}selected{% endif %}>September</option>
                            <option value="10" {% if selected_month == '10' %}selected{% endif %}>October</option>
                            <option value="11" {% if selected_month == '11' %}selected{% endif %}>November</option>
                            <option value="12" {% if selected_month == '12' %}selected{% endif %}>December</option>
                        </select>
                    </div>
                    <div class="col-md-4">
                        <button type="submit" class="btn btn-primary w-100">
                            <i class="fas fa-search me-1"></i> Apply Filter
                        </button>
                        <a href="{{ url_for('analytics') }}" class="btn btn-outline-secondary w-100 mt-2">
                            <i class="fas fa-times me-1"></i> Clear
                        </a>
                    </div>
                </form>
                {% if selected_year or selected_month %}
                <div class="mt-3">
                    <strong>Active Filter:</strong>
                    {% if selected_year and selected_month %}
                    <span class="badge bg-info ms-2">Year: {{ selected_year }} | Month: {{ ['', 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'][selected_month|int] }}</span>
                    {% elif selected_year %}
                    <span class="badge bg-info ms-2">Year: {{ selected_year }} (Full Year)</span>
                    {% endif %}
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-8">
        <div class="garments-card">
            <div class="card-header">
                <h5><i class="fas fa-chart-line me-2"></i> Monthly Sales Revenue</h5>
            </div>
            <div class="card-body">
                <canvas id="salesChart" width="400" height="200"></canvas>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="garments-card">
            <div class="card-header">
                <h5><i class="fas fa-chart-bar me-2"></i> Financial Summary{% if selected_year or selected_month %} ({{ period_label }}){% endif %}</h5>
            </div>
            <div class="card-body">
                <div class="mb-3">
                    <strong>💰 Total Revenue:</strong> 
                    <span class="float-end text-success">
                        AED {{ "{:,.2f}".format(total_revenue) }}
                    </span>
                </div>
                <div class="mb-3">
                    <strong>📦 Product Cost:</strong> 
                    <span class="float-end text-warning">
                        AED {{ "{:,.2f}".format(product_cost) }}
                    </span>
                </div>
                <div class="mb-3">
                    <strong>💸 Total Expenses:</strong> 
                    <span class="float-end text-danger">
                        AED {{ "{:,.2f}".format(total_expenses) }}
                    </span>
                </div>
                <hr>
                <div class="mb-3">
                    <strong>📊 Total Cost:</strong> 
                    <span class="float-end text-danger">
                        AED {{ "{:,.2f}".format(total_cost) }}
                    </span>
                </div>
                <div class="mb-3">
                    <strong>💵 Net Profit:</strong> 
                    <span class="float-end {% if net_profit >= 0 %}text-success{% else %}text-danger{% endif %}">
                        AED {{ "{:,.2f}".format(net_profit) }}
                    </span>
                </div>
                <div class="mb-3">
                    <strong>📈 Profit Margin:</strong> 
                    <span class="float-end text-info">
                        {{ profit_margin }}%
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Expense Charts -->
<div class="row mt-4">
    <div class="col-md-6">
        <div class="garments-card">
            <div class="card-header">
                <h5><i class="fas fa-money-bill-wave me-2"></i> Monthly Expenses</h5>
            </div>
            <div class="card-body">
                <canvas id="expenseChart" width="400" height="200"></canvas>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="garments-card">
            <div class="card-header">
                <h5><i class="fas fa-pie-chart me-2"></i> Expense Breakdown by Category</h5>
            </div>
            <div class="card-body">
                {% if expense_breakdown %}
                <canvas id="expensePieChart" width="400" height="200"></canvas>
                {% else %}
                <div class="text-center text-muted py-4">
                    <i class="fas fa-inbox fa-3x mb-3"></i>
                    <p>No expense data available</p>
                    <a href="{{ url_for('expenses') }}" class="btn btn-primary">
                        <i class="fas fa-plus me-1"></i> Add Expenses
                    </a>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<!-- Expense Breakdown Table -->
{% if expense_breakdown %}
<div class="row mt-4">
    <div class="col-12">
        <div class="garments-card">
            <div class="card-header">
                <h5><i class="fas fa-list me-2"></i> Expense Category Details{% if selected_year or selected_month %} ({{ period_label }}){% endif %}</h5>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-striped table-hover">
                        <thead>
                            <tr>
                                <th>🏷️ Category</th>
                                <th>💸 Total Amount</th>
                                <th>📊 Percentage</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% set total_expense_sum = expense_breakdown | sum(attribute='total_amount') %}
                            {% for expense in expense_breakdown %}
                            <tr>
                                <td><strong>{{ expense.category }}</strong></td>
                                <td><span class="text-danger">AED {{ "{:,.2f}".format(expense.total_amount or 0) }}</span></td>
                                <td>
                                    {% if total_expense_sum > 0 %}
                                    {% set percentage = (expense.total_amount / total_expense_sum * 100) %}
                                    <div class="progress" style="height: 20px;">
                                        <div class="progress-bar bg-danger" role="progressbar" data-percentage="{{ "%.1f"|format(percentage) }}">
                                            {{ "%.1f"|format(percentage) }}%
                                        </div>
                                    </div>
                                    {% else %}
                                    <span class="badge bg-secondary">0%</span>
                                    {% endif %}
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
{% endif %}

<div class="row mt-4">
    <div class="col-12">
        <div class="garments-card">
            <div class="card-header">
                <h5><i class="fas fa-chart-bar me-2"></i> Product Profitability Analysis{% if selected_year or selected_month %} ({{ period_label }}){% endif %}</h5>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-striped table-hover">
                        <thead>
                            <tr>
                                <th>📦 Product</th>
                                <th>🛒 Total Sold</th>
                                <th>💰 Total Revenue</th>
                                <th>💸 Total Cost</th>
                                <th>💵 Profit</th>
                                <th>📈 Margin</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for product in profit_analysis %}
                            <tr>
                                <td>{{ product.product_name }}</td>
                                <td>{{ product.total_sold }}</td>
                                <td>AED {{ "{:,.2f}".format(product.total_revenue or 0) }}</td>
                                <td>AED {{ "{:,.2f}".format(product.total_cost or 0) }}</td>
                                <td>
                                    <span class="{% if (product.profit or 0) > 0 %}text-success{% else %}text-danger{% endif %}">
                                        AED {{ "{:,.2f}".format(product.profit or 0) }}
                                    </span>
                                </td>
                                <td>
                                    {% if product.total_revenue and product.total_cost and product.total_cost > 0 %}
                                    {% set margin = ((product.total_revenue - product.total_cost) / product.total_cost * 100) %}
                                    <span class="badge {% if margin > 50 %}bg-success{% elif margin > 20 %}bg-warning{% else %}bg-danger{% endif %} glow">
                                        {{ "%.1f"|format(margin) }}%
                                    </span>
                                    {% elif product.total_revenue and product.total_cost == 0 %}
                                    <span class="badge bg-info glow">N/A</span>
                                    {% else %}
                                    <span class="badge bg-secondary glow">0.0%</span>
                                    {% endif %}
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script id="sales-data" type="application/json">{{ monthly_sales|tojson|safe }}</script>
<script id="expense-data" type="application/json">{{ monthly_expenses|tojson|safe }}</script>
<script id="expense-breakdown-data" type="application/json">{{ expense_breakdown|default([], true)|tojson|safe }}</script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('[data-percentage]').forEach(bar => {
        const value = parseFloat(bar.dataset.percentage) || 0;
        bar.style.width = `${value}%`;
    });

    const salesData = JSON.parse(document.getElementById('sales-data').textContent || '[]');
    const months = salesData.map(item => item.month);
    const revenues = salesData.map(item => parseFloat(item.revenue) || 0);
    const ctx = document.getElementById('salesChart').getContext('2d');
    const salesChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: months,
            datasets: [{
                label: 'Monthly Revenue (AED)',
                data: revenues,
                backgroundColor: 'rgba(99, 102, 241, 0.8)',
                borderColor: 'rgba(99, 102, 241, 1)',
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: {
                        callback: function(value) {
                            return 'AED ' + value.toLocaleString();
                        }
                    }
                }
            }
        }
    });
    
    const expenseData = JSON.parse(document.getElementById('expense-data').textContent || '[]');
    const expenseMonths = expenseData.map(item => item.month);
    const expenses = expenseData.map(item => parseFloat(item.total_expense) || 0);
    const expenseCtx = document.getElementById('expenseChart').getContext('2d');
    const expenseChart = new Chart(expenseCtx, {
        type: 'bar',
        data: {
            labels: expenseMonths,
            datasets: [{
                label: 'Monthly Expenses (AED)',
                data: expenses,
                backgroundColor: 'rgba(239, 68, 68, 0.8)',
                borderColor: 'rgba(239, 68, 68, 1)',
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: {
                        callback: function(value) {
                            return 'AED ' + value.toLocaleString();
                        }
                    }
                }
            }
        }
    });
    
    const expenseBreakdown = JSON.parse(document.getElementById('expense-breakdown-data').textContent || '[]');
    if (expenseBreakdown.length > 0) {
        const categories = expenseBreakdown.map(item => item.category);
        const amounts = expenseBreakdown.map(item => parseFloat(item.total_amount) || 0);
        const colors = [
            'rgba(239, 68, 68, 0.8)',
            'rgba(99, 102, 241, 0.8)',
            'rgba(16, 185, 129, 0.8)',
            'rgba(245, 158, 11, 0.8)',
            'rgba(139, 92, 246, 0.8)',
            'rgba(14, 165, 233, 0.8)',
            'rgba(236, 72, 153, 0.8)',
            'rgba(34, 197, 94, 0.8)',
            'rgba(251, 146, 60, 0.8)',
            'rgba(168, 85, 247, 0.8)'
        ];
        const pieCtx = document.getElementById('expensePieChart').getContext('2d');
        const pieChart = new Chart(pieCtx, {
            type: 'doughnut',
            data: {
                labels: categories,
                datasets: [{
                    data: amounts,
                    backgroundColor: colors.slice(0, categories.length),
                    borderColor: colors.slice(0, categories.length).map(c => c.replace('0.8', '1')),
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    legend: {
                        position: 'bottom'
                    },
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                const value = context.raw;
                                const total = context.dataset.data.reduce((a, b) => a + b, 0);
                                const percentage = ((value / total) * 100).toFixed(1);
                                return `AED ${value.toLocaleString()} (${percentage}%)`;
                            }
                        }
                    }
                }
            }
        });
    }
});
</script>
{% endblock %}