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

<div class="container-xxl flex-grow-1 container-p-y">
    <div class="row">
        <div class="col-12">
            <div class="card mb-4">
                <div class="card-body">
                    <div class="d-flex align-items-center justify-content-between">
                        <div>
                            <h4 class="fw-bold mb-1">Branch Wise Performance Report</h4>
                            <p class="text-muted mb-0">Detailed analysis of performance across all branches</p>
                        </div>
                        <div class="d-flex gap-2">
                            <a href="{% url 'dashboard' %}" class="btn btn-outline-secondary">
                                <i class="fas fa-arrow-left me-1"></i> Back to Dashboard
                            </a>
                            <button type="button" class="btn btn-primary" onclick="window.print()">
                                <i class="fas fa-print me-1"></i> Print Report
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Filter Bar -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card shadow-sm border-0">
                <div class="card-body py-3">
                    <form method="GET" class="row g-3 align-items-center">
                        <div class="col-md-4">
                            <label class="form-label small fw-bold text-uppercase">Time Period</label>
                            <select name="period" class="form-select border-light shadow-none" onchange="this.form.submit()">
                                <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>
                        <div class="col-md-4">
                            <label class="form-label small fw-bold text-uppercase">Specific Branch</label>
                            <select name="branch_id" class="form-select border-light shadow-none" onchange="this.form.submit()">
                                <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 == branch.id|stringformat:"s" %}selected{% endif %}>{{ branch.name }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="col-md-4 d-flex align-items-end">
                            <button type="submit" class="btn btn-primary w-100">
                                <i class="fas fa-filter me-2"></i> Apply Filters
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Charts Row -->
    <div class="row mb-4">
        <div class="col-md-8">
            <div class="card h-100 shadow-sm border-0">
                <div class="card-header bg-white py-3">
                    <h5 class="card-title m-0 fw-bold">Revenue & Profit by Branch</h5>
                </div>
                <div class="card-body">
                    <div id="branchPerformanceChart"></div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card h-100 shadow-sm border-0">
                <div class="card-header bg-white py-3">
                    <h5 class="card-title m-0 fw-bold">Revenue Share (%)</h5>
                </div>
                <div class="card-body d-flex align-items-center">
                    <div id="revenueShareChart" style="width: 100%;"></div>
                </div>
            </div>
        </div>
    </div>

    <!-- Branch Summary Table -->
    <div class="row">
        <div class="col-12">
            <div class="card shadow-sm border-0">
                <div class="card-header bg-white py-3 d-flex align-items-center justify-content-between">
                    <h5 class="card-title m-0 fw-bold">Detailed Branch Performance</h5>
                    <span class="badge bg-label-primary">{{ total_stores }} Active Branches</span>
                </div>
                <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0">
                        <thead class="table-light">
                            <tr>
                                <th class="ps-4">Branch Name</th>
                                <th class="text-end">Sales (₹)</th>
                                <th class="text-center">Orders</th>
                                <th class="text-end">Expenses (₹)</th>
                                <th class="text-end">Net Profit (₹)</th>
                                <th class="text-center">Margin (%)</th>
                                <th class="pe-4" style="width: 200px;">Performance</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for branch in branch_summary %}
                            <tr>
                                <td class="ps-4">
                                    <div class="d-flex align-items-center">
                                        <div class="avatar avatar-sm me-3">
                                            <span class="avatar-initial rounded-circle bg-label-primary">
                                                {{ branch.name|slice:":1" }}
                                            </span>
                                        </div>
                                        <span class="fw-bold">{{ branch.name }}</span>
                                    </div>
                                </td>
                                <td class="text-end fw-bold">₹{{ branch.sales|floatformat:2 }}</td>
                                <td class="text-center">
                                    <span class="badge bg-label-secondary">{{ branch.orders }}</span>
                                </td>
                                <td class="text-end text-danger">₹{{ branch.expenses|floatformat:2 }}</td>
                                <td class="text-end {% if branch.profit >= 0 %}text-success{% else %}text-danger{% endif %} fw-bold">
                                    ₹{{ branch.profit|floatformat:2 }}
                                </td>
                                <td class="text-center">
                                    <span class="badge {% if branch.margin > 15 %}bg-label-success{% elif branch.margin > 5 %}bg-label-info{% else %}bg-label-warning{% endif %}">
                                        {{ branch.margin|floatformat:1 }}%
                                    </span>
                                </td>
                                <td class="pe-4">
                                    <div class="d-flex align-items-center">
                                        <div class="progress w-100 me-2" style="height: 8px;">
                                            <div class="progress-bar bg-primary" role="progressbar" 
                                                 style="width: {{ branch.performance_pct }}%" 
                                                 aria-valuenow="{{ branch.performance_pct }}" aria-valuemin="0" aria-valuemax="100"></div>
                                        </div>
                                        <small class="text-muted">{{ branch.performance_pct|floatformat:0 }}%</small>
                                    </div>
                                </td>
                            </tr>
                            {% empty %}
                            <tr>
                                <td colspan="7" class="text-center py-5">
                                    <i class="fas fa-store-slash fa-3x text-light mb-3 d-block"></i>
                                    <span class="text-muted">No branch data available for this period</span>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                        <tfoot class="table-light fw-bold">
                            <tr>
                                <td class="ps-4">TOTALS</td>
                                <td class="text-end">₹{{ total_sales|floatformat:2 }}</td>
                                <td class="text-center">{{ total_orders }}</td>
                                <td class="text-end">₹{{ total_expenses|floatformat:2 }}</td>
                                <td class="text-end {% if net_profit >= 0 %}text-success{% else %}text-danger{% endif %}">
                                    ₹{{ net_profit|floatformat:2 }}
                                </td>
                                <td class="text-center">
                                    {{ total_margin|floatformat:1 }}%
                                </td>
                                <td class="pe-4"></td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // 1. Branch Performance Chart (Bar & Line)
    const performanceOptions = {
        series: [{
            name: 'Sales',
            type: 'column',
            data: {{ chart_data.sales|safe }}
        }, {
            name: 'Net Profit',
            type: 'column',
            data: {{ chart_data.profit|safe }}
        }, {
            name: 'Margin %',
            type: 'line',
            data: {{ chart_data.margin|safe }}
        }],
        chart: {
            height: 350,
            type: 'line',
            toolbar: { show: false }
        },
        stroke: {
            width: [0, 0, 3],
            curve: 'smooth'
        },
        colors: ['#696cff', '#71dd37', '#ff3e1d'],
        dataLabels: {
            enabled: true,
            enabledOnSeries: [2]
        },
        labels: {{ chart_data.labels|safe }},
        xaxis: {
            type: 'category'
        },
        yaxis: [{
            title: { text: 'Amount (₹)' },
        }, {
            opposite: true,
            title: { text: 'Margin (%)' }
        }],
        legend: {
            position: 'top',
            horizontalAlign: 'left'
        }
    };

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

    // 2. Revenue Share Chart (Donut)
    const shareOptions = {
        series: {{ chart_data.sales|safe }},
        chart: {
            type: 'donut',
            height: 350
        },
        labels: {{ chart_data.labels|safe }},
        legend: {
            position: 'bottom'
        },
        dataLabels: {
            enabled: true,
            formatter: function (val) {
                return val.toFixed(1) + "%"
            }
        },
        responsive: [{
            breakpoint: 480,
            options: {
                chart: { width: 200 },
                legend: { position: 'bottom' }
            }
        }]
    };

    const shareChart = new ApexCharts(document.querySelector("#revenueShareChart"), shareOptions);
    shareChart.render();
});
</script>

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