{% extends 'base.html' %}
{% load static i18n %}

{% block title %}{% trans "Smart Dashboard" %} - {{ site_settings.business_name }}{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- Header -->
    <div class="row mb-4 align-items-center">
        <div class="col">
            <h1 class="h3 fw-bold mb-0">{% trans "Overview" %}</h1>
            <p class="text-muted small mb-0">{% trans "Welcome back! Here's what's happening with your business today." %}</p>
        </div>
        <div class="col-auto">
            <a href="{% url 'pos' %}" class="btn btn-primary shadow-sm">
                <i class="bi bi-plus-lg me-2"></i> {% trans "New Sale" %}
            </a>
        </div>
    </div>

    <!-- Stats Cards -->
    <div class="row g-3 mb-4">
        <div class="col-md-3">
            <div class="card glass-card border-0 p-3 stat-card">
                <div class="d-flex align-items-center">
                    <div class="stat-icon bg-primary text-white bg-opacity-10 text-primary rounded-3 p-3 me-3">
                        <i class="bi bi-cash-stack fs-4 text-primary"></i>
                    </div>
                    <div>
                        <h6 class="text-muted small mb-1">{% trans "Total Revenue" %}</h6>
                        <h4 class="fw-bold mb-0">{{ site_settings.currency_symbol }}{{ total_sales_amount|floatformat:3 }}</h4>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card glass-card border-0 p-3 stat-card">
                <div class="d-flex align-items-center">
                    <div class="stat-icon bg-success bg-opacity-10 rounded-3 p-3 me-3">
                        <i class="bi bi-cart-check fs-4 text-success"></i>
                    </div>
                    <div>
                        <h6 class="text-muted small mb-1">{% trans "Total Sales" %}</h6>
                        <h4 class="fw-bold mb-0">{{ total_sales_count }}</h4>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card glass-card border-0 p-3 stat-card">
                <div class="d-flex align-items-center">
                    <div class="stat-icon bg-info bg-opacity-10 rounded-3 p-3 me-3">
                        <i class="bi bi-box-seam fs-4 text-info"></i>
                    </div>
                    <div>
                        <h6 class="text-muted small mb-1">{% trans "Total Products" %}</h6>
                        <h4 class="fw-bold mb-0">{{ total_products }}</h4>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card glass-card border-0 p-3 stat-card">
                <div class="d-flex align-items-center">
                    <div class="stat-icon bg-warning bg-opacity-10 rounded-3 p-3 me-3">
                        <i class="bi bi-people fs-4 text-warning"></i>
                    </div>
                    <div>
                        <h6 class="text-muted small mb-1">{% trans "Total Customers" %}</h6>
                        <h4 class="fw-bold mb-0">{{ total_customers }}</h4>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row g-4 mb-4">
        <!-- Sales Chart -->
        <div class="col-lg-8">
            <div class="card border-0 shadow-sm p-4 h-100">
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <h5 class="fw-bold mb-0">{% trans "Sales Revenue" %}</h5>
                    <span class="badge bg-primary bg-opacity-10 text-primary">{% trans "Last 7 Days" %}</span>
                </div>
                <canvas id="salesChart" height="300"></canvas>
            </div>
        </div>

        <!-- Inventory Status -->
        <div class="col-lg-4">
            <div class="card border-0 shadow-sm p-4 h-100">
                <h5 class="fw-bold mb-4">{% trans "Low Stock Alerts" %}</h5>
                {% if low_stock_products %}
                    <ul class="list-group list-group-flush">
                        {% for product in low_stock_products %}
                        <li class="list-group-item px-0 border-0 d-flex justify-content-between align-items-center">
                            <div class="d-flex align-items-center">
                                <div class="bg-light rounded p-2 me-3">
                                    <i class="bi bi-box"></i>
                                </div>
                                <div>
                                    <p class="mb-0 fw-semibold">
                                        {% if LANGUAGE_CODE == 'ar' %}{{ product.name_ar }}{% else %}{{ product.name_en }}{% endif %}
                                    </p>
                                    <small class="text-muted">
                                        {% if LANGUAGE_CODE == 'ar' %}{{ product.category.name_ar }}{% else %}{{ product.category.name_en }}{% endif %}
                                    </small>
                                </div>
                            </div>
                            <span class="badge bg-danger rounded-pill">{{ product.stock_quantity }}</span>
                        </li>
                        {% endfor %}
                    </ul>
                {% else %}
                    <div class="text-center py-5">
                        <i class="bi bi-check-circle text-success display-4"></i>
                        <p class="mt-3 text-muted">{% trans "All stock levels are healthy!" %}</p>
                    </div>
                {% endif %}
                <h5 class="fw-bold mb-4 mt-4">{% trans "Expired Items Alert" %}</h5>
                {% if expired_count > 0 %}
                    <div class="alert alert-danger border-0 rounded-4 d-flex align-items-center mb-0">
                        <i class="bi bi-exclamation-triangle-fill fs-4 me-3"></i>
                        <div>
                            <p class="mb-0 fw-bold">{{ expired_count }} {% trans "Items have expired!" %}</p>
                            <a href="{% url 'inventory' %}#expired-list" class="alert-link small">{% trans "View and manage expired stock" %}</a>
                        </div>
                    </div>
                {% else %}
                    <div class="text-center py-4">
                        <i class="bi bi-shield-check text-success display-6"></i>
                        <p class="mt-2 text-muted small">{% trans "No expired items in stock." %}</p>
                    </div>
                {% endif %}

                <div class="mt-auto pt-3 border-top">
                    <a href="{% url 'inventory' %}" class="btn btn-light btn-sm w-100 fw-bold">{% trans "View Full Inventory" %}</a>
                </div>
            </div>
        </div>
    </div>

    <!-- Recent Transactions -->
    <div class="row g-4">
        <div class="col-12">
            <div class="card border-0 shadow-sm p-4">
                <h5 class="fw-bold mb-4">{% trans "Recent Sales" %}</h5>
                <div class="table-responsive">
                    <table class="table table-hover align-middle">
                        <thead class="table-light">
                            <tr>
                                <th>{% trans "Sale ID" %}</th>
                                <th>{% trans "Customer" %}</th>
                                <th>{% trans "Date" %}</th>
                                <th>{% trans "Total Amount" %}</th>
                                <th>{% trans "User" %}</th>
                                <th>{% trans "Status" %}</th>
                                <th>{% trans "Action" %}</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for sale in recent_sales %}
                            <tr>
                                <td class="fw-bold">#{{ sale.id }}</td>
                                <td>{{ sale.customer.name|default:"Guest" }}</td>
                                <td>{{ sale.created_at|date:"M d, Y H:i" }}</td>
                                <td class="fw-bold">{{ site_settings.currency_symbol }}{{ sale.total_amount|floatformat:3 }}</td>
                                <td>
                                    <span class="text-muted small">
                                        <i class="bi bi-person me-1"></i>{{ sale.created_by.username|default:"System" }}
                                    </span>
                                </td>
                                <td><span class="badge bg-success bg-opacity-10 text-success">{% trans "Completed" %}</span></td>
                                <td>
                                    <a href="{% url 'invoice_detail' sale.id %}" class="btn btn-sm btn-light">
                                        <i class="bi bi-eye"></i>
                                    </a>
                                </td>
                            </tr>
                            {% empty %}
                            <tr>
                                <td colspan="7" class="text-center py-4 text-muted">{% trans "No recent sales found." %}</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    const ctx = document.getElementById('salesChart').getContext('2d');
    const salesChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: {{ chart_labels|safe }},
            datasets: [{
                label: '{% trans "Revenue" %} ({{ site_settings.currency_symbol }})',
                data: {{ chart_data|safe }},
                borderColor: '#2E5BFF',
                backgroundColor: 'rgba(46, 91, 255, 0.1)',
                borderWidth: 3,
                tension: 0.4,
                fill: true,
                pointBackgroundColor: '#fff',
                pointBorderColor: '#2E5BFF',
                pointBorderWidth: 2,
                pointRadius: 4,
                pointHoverRadius: 6
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    display: false
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    grid: {
                        drawBorder: false,
                        color: 'rgba(0, 0, 0, 0.05)'
                    }
                },
                x: {
                    grid: {
                        display: false
                    }
                }
            }
        }
    });
</script>
{% endblock %}