{% extends "base.html" %}

{% block title %}Dashboard - AsapLoads POS{% endblock %}

{% block header_title %}Dashboard{% endblock %}

{% block content %}
<div class="row">
    <!-- Sales Summary Cards -->
    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card border-left-primary h-100 py-2">
            <div class="card-body">
                <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                        <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
                            Today's Sales</div>
                        <div class="h5 mb-0 font-weight-bold text-gray-800">{{ today_sales_total|floatformat:2 }}</div>
                        <div class="text-xs text-muted">{{ today_sales_count }} transaction(s)</div>
                    </div>
                    <div class="col-auto">
                        <i class="fas fa-calendar fa-2x text-gray-300"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card border-left-success h-100 py-2">
            <div class="card-body">
                <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                        <div class="text-xs font-weight-bold text-success text-uppercase mb-1">
                            Weekly Sales</div>
                        <div class="h5 mb-0 font-weight-bold text-gray-800">{{ week_sales_total|floatformat:2 }}</div>
                        <div class="text-xs text-muted">{{ week_sales_count }} transaction(s)</div>
                    </div>
                    <div class="col-auto">
                        <i class="fas fa-dollar-sign fa-2x text-gray-300"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card border-left-info h-100 py-2">
            <div class="card-body">
                <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                        <div class="text-xs font-weight-bold text-info text-uppercase mb-1">
                            Monthly Sales</div>
                        <div class="h5 mb-0 font-weight-bold text-gray-800">{{ month_sales_total|floatformat:2 }}</div>
                        <div class="text-xs text-muted">{{ month_sales_count }} transaction(s)</div>
                    </div>
                    <div class="col-auto">
                        <i class="fas fa-chart-bar fa-2x text-gray-300"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {% if user.role == 'cashier' %}
    <div class="col-xl-3 col-md-6 mb-4">
        <a href="/reports/cashiers/{{ user.id }}/" class="text-decoration-none">
            <div class="card border-left-warning h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">
                                My Sales Report</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ user_sales_total|floatformat:2 }}</div>
                            <div class="text-xs text-muted">{{ user_sales_count }} transaction(s)</div>
                            <div class="mt-2">
                                <span class="badge bg-warning text-dark">
                                    <i class="fas fa-chart-line"></i> View Details
                                </span>
                            </div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-user fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </a>
    </div>
    {% else %}
    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card border-left-danger h-100 py-2">
            <div class="card-body">
                <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                        <div class="text-xs font-weight-bold text-danger text-uppercase mb-1">
                            Low Stock Items</div>
                        <div class="h5 mb-0 font-weight-bold text-gray-800">{{ low_stock_products.count }}</div>
                        <div class="text-xs text-muted">Need attention</div>
                    </div>
                    <div class="col-auto">
                        <i class="fas fa-exclamation-triangle fa-2x text-gray-300"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% endif %}
</div>

<!-- Content Row -->
<div class="row">
    <!-- Sales Chart -->
    <div class="col-xl-8 col-lg-7">
        <div class="card shadow mb-4">
            <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                <h6 class="m-0 font-weight-bold text-primary">Sales Overview (Last 7 Days)</h6>
            </div>
            <div class="card-body">
                <div class="chart-area">
                    <canvas id="salesChart"></canvas>
                </div>
            </div>
        </div>
    </div>

    <!-- Top Products Pie Chart -->
    <div class="col-xl-4 col-lg-5">
        <div class="card shadow mb-4">
            <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                <h6 class="m-0 font-weight-bold text-primary">Top Selling Products</h6>
            </div>
            <div class="card-body">
                {% if top_products %}
                <div class="chart-pie">
                    <canvas id="topProductsChart"></canvas>
                </div>
                {% else %}
                <div class="text-center py-4">
                    <p class="text-muted">No sales data available</p>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<!-- Content Row -->
<div class="row">
    <!-- Recent Sales -->
    <div class="col-lg-6 mb-4">
        <div class="card shadow">
            <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-primary">Recent Sales</h6>
            </div>
            <div class="card-body">
                {% if recent_sales %}
                <div class="table-responsive">
                    <table class="table table-bordered table-sm" width="100%" cellspacing="0">
                        <thead>
                            <tr>
                                <th>Invoice</th>
                                <th>Customer</th>
                                <th>Total</th>
                                <th>Date</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for sale in recent_sales %}
                            <tr>
                                <td>{% if modules_enabled.sales %}<a href="{% url 'sale_detail' sale.id %}">{{ sale.invoice_number }}</a>{% else %}{{ sale.invoice_number }}{% endif %}</td>
                                <td>{{ sale.customer.full_name|default:"Walk-in" }}</td>
                                <td>{{ sale.total_amount|floatformat:2 }}</td>
                                <td>{{ sale.created_at|date:"M d, Y" }}</td>
                                <td>
                                    <span class="badge bg-{% if sale.payment_status == 'paid' %}success{% elif sale.payment_status == 'partial' %}warning{% elif sale.payment_status == 'cancelled' %}danger{% else %}secondary{% endif %}">
                                        {{ sale.payment_status|title }}
                                    </span>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                {% else %}
                <p class="text-center py-3">No recent sales.</p>
                {% endif %}
                {% if modules_enabled.sales %}
                <div class="text-center mt-3">
                    <a href="{% url 'sale_list' %}" class="btn btn-sm btn-primary">View All Sales</a>
                </div>
                {% endif %}
            </div>
        </div>
    </div>

    <!-- Low Stock Products -->
    <div class="col-lg-6 mb-4">
        <div class="card shadow">
            <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-primary">Low Stock Products</h6>
            </div>
            <div class="card-body">
                {% if low_stock_products %}
                <div class="table-responsive">
                    <table class="table table-bordered table-sm" width="100%" cellspacing="0">
                        <thead>
                            <tr>
                                <th>Product</th>
                                <th>Quantity</th>
                                <th>Threshold</th>
                                {% if modules_enabled.sales %}<th>Action</th>{% endif %}
                            </tr>
                        </thead>
                        <tbody>
                            {% for product in low_stock_products %}
                            <tr>
                                <td>{% if modules_enabled.sales %}<a href="{% url 'product_detail' product.id %}">{{ product.name }}</a>{% else %}{{ product.name }}{% endif %}</td>
                                <td class="text-danger">{{ product.quantity }}</td>
                                <td>{{ product.low_stock_threshold }}</td>
                                {% if modules_enabled.sales %}
                                <td>
                                    <a href="{% url 'adjust_stock' product.id %}" class="btn btn-sm btn-warning">
                                        <i class="fas fa-plus"></i> Stock
                                    </a>
                                </td>
                                {% endif %}
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                {% else %}
                <p class="text-center py-3">No low stock products.</p>
                {% endif %}
                {% if modules_enabled.sales %}
                <div class="text-center mt-3">
                    <a href="{% url 'product_list' %}" class="btn btn-sm btn-primary">View All Products</a>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<!-- License Management Section (System Owner Only) -->
{% if user.is_system_owner %}
<div class="row mt-4">
    <div class="col-12">
        <div class="card shadow border-left-primary">
            <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                <h6 class="m-0 font-weight-bold text-primary">License Management</h6>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <div class="card mb-3">
                            <div class="card-body">
                                <h5 class="card-title">Manage Licenses</h5>
                                <p class="card-text">View, create, and manage licenses for all business branches.</p>
                                <a href="{% url 'license_list' %}" class="btn btn-primary">
                                    <i class="fas fa-key"></i> View Licenses
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="card mb-3">
                            <div class="card-body">
                                <h5 class="card-title">Create Business</h5>
                                <p class="card-text">Create a new business with branch, license, and admin user.</p>
                                <a href="{% url 'admin_create_business' %}" class="btn btn-success">
                                    <i class="fas fa-plus"></i> New Business
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endif %}
{% endblock %}

{% block extra_js %}
<script>
// Sales Chart
document.addEventListener('DOMContentLoaded', function() {
    const salesData = {{ daily_sales|safe }};
    
    if (salesData && salesData.length > 0) {
        const labels = salesData.map(item => {
            const date = new Date(item.period);
            return date.toLocaleDateString();
        });
        const values = salesData.map(item => item.total_amount);
        
        const ctx = document.getElementById('salesChart').getContext('2d');
        new Chart(ctx, {
            type: 'line',
            data: {
                labels: labels,
                datasets: [{
                    label: 'Sales Amount',
                    lineTension: 0.3,
                    backgroundColor: "rgba(78, 115, 223, 0.05)",
                    borderColor: "rgba(78, 115, 223, 1)",
                    pointRadius: 3,
                    pointBackgroundColor: "rgba(78, 115, 223, 1)",
                    pointBorderColor: "rgba(78, 115, 223, 1)",
                    pointHoverRadius: 3,
                    pointHoverBackgroundColor: "rgba(78, 115, 223, 1)",
                    pointHoverBorderColor: "rgba(78, 115, 223, 1)",
                    pointHitRadius: 10,
                    pointBorderWidth: 2,
                    data: values,
                }],
            },
            options: {
                maintainAspectRatio: false,
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });
    }
    
    // Top Products Chart
    const topProducts = {{ top_products|safe }};
    
    if (topProducts && topProducts.length > 0) {
        const productLabels = topProducts.map(item => item.product__name);
        const productValues = topProducts.map(item => item.total_sold);
        
        const bgColors = [
            '#4e73df', '#1cc88a', '#36b9cc', '#f6c23e', '#e74a3b'
        ];
        
        const ctx2 = document.getElementById('topProductsChart').getContext('2d');
        new Chart(ctx2, {
            type: 'doughnut',
            data: {
                labels: productLabels,
                datasets: [{
                    data: productValues,
                    backgroundColor: bgColors,
                    hoverBackgroundColor: bgColors.map(color => color + 'dd'),
                    hoverBorderColor: "rgba(234, 236, 244, 1)",
                }],
            },
            options: {
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'bottom'
                    }
                },
                cutout: '70%'
            }
        });
    }
});
</script>
{% endblock %}