{% extends "base.html" %}

{% block title %}Sales Report - AsapLoads POS{% endblock %}

{% block header_title %}Sales Report{% endblock %}

{% block extra_css %}
<style>
    .chart-container {
        height: 300px;
        margin-bottom: 30px;
    }
    .summary-box {
        background-color: #f8f9fa;
        border-radius: 5px;
        padding: 15px;
        margin-bottom: 20px;
        transition: all 0.3s ease;
    }
    .summary-box:hover {
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    }
    .summary-box h5 {
        margin-bottom: 0;
    }
    .summary-value {
        font-size: 24px;
        font-weight: 600;
    }
    .status-indicator {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        display: inline-block;
        margin-right: 5px;
    }
    .status-positive {
        background-color: #28a745;
    }
    .status-negative {
        background-color: #dc3545;
    }
</style>
{% endblock %}

{% block content %}
<div class="row mb-4">
    <div class="col-md-12">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="card-title mb-0">Sales Report</h5>
                <div>
                    <a href="{% url 'export_sales_report' %}?start_date={{ start_date|date:'Y-m-d' }}&end_date={{ end_date|date:'Y-m-d' }}" class="btn btn-sm btn-outline-primary">
                        <i class="fas fa-download"></i> Export to CSV
                    </a>
                </div>
            </div>
            <div class="card-body">
                <form method="get" class="mb-4">
                    <div class="row g-3">
                        <div class="col-md-4">
                            <label for="start_date" class="form-label">Start Date</label>
                            <input type="date" id="start_date" name="start_date" class="form-control" value="{{ start_date|date:'Y-m-d' }}">
                        </div>
                        <div class="col-md-4">
                            <label for="end_date" class="form-label">End Date</label>
                            <input type="date" id="end_date" name="end_date" class="form-control" value="{{ end_date|date:'Y-m-d' }}">
                        </div>
                        <div class="col-md-3">
                            <label for="group_by" class="form-label">Group By</label>
                            <select id="group_by" name="group_by" class="form-select">
                                <option value="day" {% if group_by == 'day' %}selected{% endif %}>Day</option>
                                <option value="month" {% if group_by == 'month' %}selected{% endif %}>Month</option>
                                <option value="year" {% if group_by == 'year' %}selected{% endif %}>Year</option>
                            </select>
                        </div>
                        <div class="col-md-1 d-flex align-items-end">
                            <button type="submit" class="btn btn-primary w-100">Apply</button>
                        </div>
                    </div>
                </form>
                
                <!-- Summary Cards -->
                <div class="row mb-4">
                    <div class="col-md-3">
                        <div class="summary-box text-center">
                            <p class="text-muted mb-1">Total Sales</p>
                            <h3 class="summary-value">{{ summary.total_sales }}</h3>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="summary-box text-center">
                            <p class="text-muted mb-1">Revenue</p>
                            <h3 class="summary-value">{{ company_settings.currency_symbol }}{{ summary.total_amount|floatformat:2 }}</h3>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="summary-box text-center">
                            <p class="text-muted mb-1">Average Sale</p>
                            <h3 class="summary-value">{{ company_settings.currency_symbol }}{{ summary.average_sale|floatformat:2 }}</h3>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="summary-box text-center">
                            <p class="text-muted mb-1">Items Sold</p>
                            <h3 class="summary-value">{{ summary.total_items_sold }}</h3>
                        </div>
                    </div>
                </div>
                
                <!-- Sales Over Time Chart -->
                <div class="row mb-4">
                    <div class="col-md-12">
                        <div class="card">
                            <div class="card-header">
                                <h5 class="card-title mb-0">Sales Over Time</h5>
                            </div>
                            <div class="card-body">
                                <div class="chart-container">
                                    <canvas id="salesOverTimeChart"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Detail Charts -->
                <div class="row">
                    <div class="col-md-6 mb-4">
                        <div class="card h-100">
                            <div class="card-header">
                                <h5 class="card-title mb-0">Sales by Payment Method</h5>
                            </div>
                            <div class="card-body">
                                <div class="chart-container">
                                    <canvas id="paymentMethodChart"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 mb-4">
                        <div class="card h-100">
                            <div class="card-header">
                                <h5 class="card-title mb-0">Sales by Category</h5>
                            </div>
                            <div class="card-body">
                                <div class="chart-container">
                                    <canvas id="categoryChart"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="row">
                    <div class="col-md-6 mb-4">
                        <div class="card h-100">
                            <div class="card-header">
                                <h5 class="card-title mb-0">Top Selling Products</h5>
                            </div>
                            <div class="card-body">
                                <div class="table-responsive">
                                    <table class="table table-striped">
                                        <thead>
                                            <tr>
                                                <th>Product</th>
                                                <th class="text-end">Quantity</th>
                                                <th class="text-end">Revenue</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            {% for product in top_products %}
                                            <tr>
                                                <td>{{ product.product__name }}</td>
                                                <td class="text-end">{{ product.total_quantity }}</td>
                                                <td class="text-end">{{ company_settings.currency_symbol }}{{ product.total_amount|floatformat:2 }}</td>
                                            </tr>
                                            {% empty %}
                                            <tr>
                                                <td colspan="3" class="text-center">No data available</td>
                                            </tr>
                                            {% endfor %}
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 mb-4">
                        <div class="card h-100">
                            <div class="card-header">
                                <h5 class="card-title mb-0">Sales by Cashier</h5>
                            </div>
                            <div class="card-body">
                                <div class="table-responsive">
                                    <table class="table table-striped">
                                        <thead>
                                            <tr>
                                                <th>Cashier</th>
                                                <th class="text-end">Sales</th>
                                                <th class="text-end">Revenue</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            {% for cashier in sales_by_cashier %}
                                            <tr>
                                                <td>{{ cashier.cashier__first_name }} {{ cashier.cashier__last_name }}</td>
                                                <td class="text-end">{{ cashier.total_sales }}</td>
                                                <td class="text-end">{{ company_settings.currency_symbol }}{{ cashier.total_amount|floatformat:2 }}</td>
                                            </tr>
                                            {% empty %}
                                            <tr>
                                                <td colspan="3" class="text-center">No data available</td>
                                            </tr>
                                            {% endfor %}
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        // Sales Over Time Chart
        const salesCtx = document.getElementById('salesOverTimeChart').getContext('2d');
        
        // Parse date strings into JavaScript Date objects
        const salesData = [
            {% for item in sales_over_time %}
                {
                    period: "{{ item.period|date:'Y-m-d' }}",
                    total_sales: {{ item.total_sales }},
                    total_amount: {{ item.total_amount|floatformat:2 }}
                }{% if not forloop.last %},{% endif %}
            {% endfor %}
        ];
        
        // Create arrays for chart data
        const periods = salesData.map(item => item.period);
        const salesCounts = salesData.map(item => item.total_sales);
        const salesAmounts = salesData.map(item => item.total_amount);
        
        new Chart(salesCtx, {
            type: 'line',
            data: {
                labels: periods,
                datasets: [
                    {
                        label: 'Revenue',
                        data: salesAmounts,
                        borderColor: 'rgba(54, 162, 235, 1)',
                        backgroundColor: 'rgba(54, 162, 235, 0.1)',
                        borderWidth: 2,
                        fill: true,
                        tension: 0.4,
                        yAxisID: 'y'
                    },
                    {
                        label: 'Number of Sales',
                        data: salesCounts,
                        borderColor: 'rgba(255, 99, 132, 1)',
                        backgroundColor: 'rgba(255, 99, 132, 0.1)',
                        borderWidth: 2,
                        fill: false,
                        tension: 0.4,
                        yAxisID: 'y1'
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    y: {
                        type: 'linear',
                        display: true,
                        position: 'left',
                        title: {
                            display: true,
                            text: 'Revenue'
                        }
                    },
                    y1: {
                        type: 'linear',
                        display: true,
                        position: 'right',
                        title: {
                            display: true,
                            text: 'Number of Sales'
                        },
                        grid: {
                            drawOnChartArea: false
                        }
                    }
                }
            }
        });
        
        // Payment Method Chart
        const paymentCtx = document.getElementById('paymentMethodChart').getContext('2d');
        
        const paymentData = [
            {% for item in sales_by_payment %}
                {
                    method: "{{ item.payment_method|title }}",
                    total: {{ item.total|floatformat:2 }}
                }{% if not forloop.last %},{% endif %}
            {% endfor %}
        ];
        
        const paymentMethods = paymentData.map(item => item.method);
        const paymentAmounts = paymentData.map(item => item.total);
        
        new Chart(paymentCtx, {
            type: 'doughnut',
            data: {
                labels: paymentMethods,
                datasets: [{
                    data: paymentAmounts,
                    backgroundColor: [
                        'rgba(54, 162, 235, 0.7)',
                        'rgba(255, 99, 132, 0.7)',
                        'rgba(255, 206, 86, 0.7)',
                        'rgba(75, 192, 192, 0.7)',
                        'rgba(153, 102, 255, 0.7)'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'bottom'
                    }
                }
            }
        });
        
        // Category Chart
        const categoryCtx = document.getElementById('categoryChart').getContext('2d');
        
        const categoryData = [
            {% for item in sales_by_category %}
                {
                    category: "{{ item.product__category__name|default:'Uncategorized' }}",
                    total: {{ item.total_amount|floatformat:2 }}
                }{% if not forloop.last %},{% endif %}
            {% endfor %}
        ];
        
        const categories = categoryData.map(item => item.category);
        const categoryAmounts = categoryData.map(item => item.total);
        
        new Chart(categoryCtx, {
            type: 'bar',
            data: {
                labels: categories,
                datasets: [{
                    label: 'Sales by Category',
                    data: categoryAmounts,
                    backgroundColor: 'rgba(75, 192, 192, 0.7)',
                    borderColor: 'rgba(75, 192, 192, 1)',
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    y: {
                        beginAtZero: true,
                        title: {
                            display: true,
                            text: 'Revenue'
                        }
                    }
                }
            }
        });
    });
</script>
{% endblock %}