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

{% block title %}Reports Dashboard{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <h1 class="h3 mb-0">Reports Dashboard</h1>
                <div>
                    <a href="{% url 'dashboard' %}" class="btn btn-outline-secondary">
                        <i class="fas fa-arrow-left"></i> Back to Dashboard
                    </a>
                </div>
            </div>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{% url 'dashboard' %}">Dashboard</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Reports</li>
                </ol>
            </nav>
        </div>
    </div>

    <div class="row">
        <!-- Sales Reports -->
        <div class="col-md-6 col-lg-4 mb-4">
            <div class="card h-100">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0"><i class="fas fa-chart-line me-2"></i> Sales Reports</h5>
                </div>
                <div class="list-group list-group-flush">
                    <a href="{% url 'reports:sales' %}" class="list-group-item list-group-item-action">
                        <div class="d-flex w-100 justify-content-between">
                            <h6 class="mb-1">Sales Report</h6>
                            <i class="fas fa-chevron-right"></i>
                        </div>
                        <p class="mb-1 small text-muted">View detailed sales reports by date range, product, and more</p>
                    </a>
                    <a href="{% url 'reports:cashiers' %}" class="list-group-item list-group-item-action">
                        <div class="d-flex w-100 justify-content-between">
                            <h6 class="mb-1">Cashier Performance</h6>
                            <i class="fas fa-chevron-right"></i>
                        </div>
                        <p class="mb-1 small text-muted">Analyze cashier performance and sales metrics</p>
                    </a>
                </div>
            </div>
        </div>

        <!-- Inventory Reports -->
        <div class="col-md-6 col-lg-4 mb-4">
            <div class="card h-100">
                <div class="card-header bg-success text-white">
                    <h5 class="mb-0"><i class="fas fa-boxes me-2"></i> Inventory Reports</h5>
                </div>
                <div class="list-group list-group-flush">
                    <a href="{% url 'reports:inventory' %}" class="list-group-item list-group-item-action">
                        <div class="d-flex w-100 justify-content-between">
                            <h6 class="mb-1">Stock Levels</h6>
                            <i class="fas fa-chevron-right"></i>
                        </div>
                        <p class="mb-1 small text-muted">View current stock levels and inventory valuation</p>
                    </a>
                    <a href="{% url 'reports:low-stock' %}" class="list-group-item list-group-item-action">
                        <div class="d-flex w-100 justify-content-between">
                            <h6 class="mb-1">Low Stock Alerts</h6>
                            <i class="fas fa-chevron-right"></i>
                        </div>
                        <p class="mb-1 small text-muted">Products that need to be reordered</p>
                    </a>
                </div>
            </div>
        </div>

        <!-- Financial Reports -->
        <div class="col-md-6 col-lg-4 mb-4">
            <div class="card h-100">
                <div class="card-header bg-warning text-dark">
                    <h5 class="mb-0"><i class="fas fa-money-bill-wave me-2"></i> Financial Reports</h5>
                </div>
                <div class="list-group list-group-flush">
                    <a href="{% url 'reports:expenses' %}" class="list-group-item list-group-item-action">
                        <div class="d-flex w-100 justify-content-between">
                            <h6 class="mb-1">Expenses Report</h6>
                            <i class="fas fa-chevron-right"></i>
                        </div>
                        <p class="mb-1 small text-muted">Track and analyze business expenses</p>
                    </a>
                    <a href="{% url 'reports:profit-loss' %}" class="list-group-item list-group-item-action">
                        <div class="d-flex w-100 justify-content-between">
                            <h6 class="mb-1">Profit & Loss</h6>
                            <i class="fas fa-chevron-right"></i>
                        </div>
                        <p class="mb-1 small text-muted">View profit and loss statements</p>
                    </a>
                </div>
            </div>
        </div>

        <!-- Purchasing & Suppliers -->
        <div class="col-md-6 col-lg-4 mb-4">
            <div class="card h-100">
                <div class="card-header bg-info text-white">
                    <h5 class="mb-0"><i class="fas fa-shopping-cart me-2"></i> Purchasing</h5>
                </div>
                <div class="list-group list-group-flush">
                    <a href="{% url 'reports:purchases' %}" class="list-group-item list-group-item-action">
                        <div class="d-flex w-100 justify-content-between">
                            <h6 class="mb-1">Purchases Report</h6>
                            <i class="fas fa-chevron-right"></i>
                        </div>
                        <p class="mb-1 small text-muted">View purchase history and trends</p>
                    </a>
                    <a href="{% url 'reports:suppliers' %}" class="list-group-item list-group-item-action">
                        <div class="d-flex w-100 justify-content-between">
                            <h6 class="mb-1">Suppliers Report</h6>
                            <i class="fas fa-chevron-right"></i>
                        </div>
                        <p class="mb-1 small text-muted">Analyze supplier performance and spending</p>
                    </a>
                </div>
            </div>
        </div>

        <!-- Customer & Quotations -->
        <div class="col-md-6 col-lg-4 mb-4">
            <div class="card h-100">
                <div class="card-header bg-purple text-white">
                    <h5 class="mb-0"><i class="fas fa-users me-2"></i> Customers & Quotations</h5>
                </div>
                <div class="list-group list-group-flush">
                    <a href="{% url 'reports:customers' %}" class="list-group-item list-group-item-action">
                        <div class="d-flex w-100 justify-content-between">
                            <h6 class="mb-1">Customer Analytics</h6>
                            <i class="fas fa-chevron-right"></i>
                        </div>
                        <p class="mb-1 small text-muted">Customer purchase history and behavior</p>
                    </a>
                    <a href="{% url 'reports:quotations' %}" class="list-group-item list-group-item-action">
                        <div class="d-flex w-100 justify-content-between">
                            <h6 class="mb-1">Quotations Report</h6>
                            <i class="fas fa-chevron-right"></i>
                        </div>
                        <p class="mb-1 small text-muted">Track and analyze quotations and conversions</p>
                    </a>
                </div>
            </div>
        </div>

        <!-- System Reports -->
        <div class="col-md-6 col-lg-4 mb-4">
            <div class="card h-100">
                <div class="card-header bg-secondary text-white">
                    <h5 class="mb-0"><i class="fas fa-cog me-2"></i> System Reports</h5>
                </div>
                <div class="list-group list-group-flush">
                    <a href="{% url 'reports:audit-logs' %}" class="list-group-item list-group-item-action">
                        <div class="d-flex w-100 justify-content-between">
                            <h6 class="mb-1">Audit Logs</h6>
                            <i class="fas fa-chevron-right"></i>
                        </div>
                        <p class="mb-1 small text-muted">System activity and user actions</p>
                    </a>
                    <a href="{% url 'reports:user-activity' %}" class="list-group-item list-group-item-action">
                        <div class="d-flex w-100 justify-content-between">
                            <h6 class="mb-1">User Activity</h6>
                            <i class="fas fa-chevron-right"></i>
                        </div>
                        <p class="mb-1 small text-muted">User login history and activity</p>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .bg-purple {
        background-color: #6f42c1 !important;
    }
    .card {
        border: none;
        box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
        transition: transform 0.2s;
    }
    .card:hover {
        transform: translateY(-5px);
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    }
    .list-group-item {
        border-left: none;
        border-right: none;
    }
    .list-group-item:first-child {
        border-top: none;
    }
    .list-group-item:last-child {
        border-bottom: none;
    }
    .list-group-item:hover {
        background-color: #f8f9fa;
    }
    .card-header {
        font-weight: 600;
    }
</style>
{% endblock %}