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

{% block title %}POS Dashboard - Ghana Wholesale{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h2><i class="fas fa-cash-register"></i> POS Dashboard</h2>
    <div class="btn-group">
        <a href="{% url 'create_sale' %}" class="btn btn-success">
            <i class="fas fa-bolt"></i> New Sale
        </a>
        <a href="{% url 'sale_list' %}" class="btn btn-info">
            <i class="fas fa-list"></i> All Sales
        </a>
    </div>
</div>

<!-- Shop Info -->
{% if shop %}
<div class="card mb-4">
    <div class="card-header bg-primary text-white">
        <h5 class="mb-0"><i class="fas fa-store"></i> {{ shop.name }} ({{ shop.code }})</h5>
    </div>
    <div class="card-body">
        <div class="row">
            <div class="col-md-3">
                <div class="card text-center">
                    <div class="card-body">
                        <h6 class="text-muted">Today's Sales</h6>
                        <h3 class="text-success">{{ today_summary.total_sales }}</h3>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card text-center">
                    <div class="card-body">
                        <h6 class="text-muted">Today's Revenue</h6>
                        <h3 class="text-primary">GH₵ {{ today_summary.total_amount|floatformat:2 }}</h3>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card text-center">
                    <div class="card-body">
                        <h6 class="text-muted">Cash Sales</h6>
                        <h3 class="text-success">GH₵ {{ today_summary.total_cash|floatformat:2 }}</h3>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card text-center">
                    <div class="card-body">
                        <h6 class="text-muted">Mobile Money</h6>
                        <h3 class="text-info">GH₵ {{ today_summary.total_momo|floatformat:2 }}</h3>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endif %}

<div class="row">
    <!-- Quick Actions -->
    <div class="col-lg-4">
        <div class="card mb-4">
            <div class="card-header bg-success text-white">
                <h5 class="mb-0"><i class="fas fa-bolt"></i> Quick Actions</h5>
            </div>
            <div class="card-body">
                <div class="d-grid gap-2">
                    <a href="{% url 'create_sale' %}" class="btn btn-success btn-lg">
                        <i class="fas fa-cart-plus"></i> Create New Sale
                    </a>
                    <a href="{% url 'daily_sales_report' %}" class="btn btn-info">
                        <i class="fas fa-chart-bar"></i> Daily Report
                    </a>
                    <a href="{% url 'customer_list' %}" class="btn btn-warning">
                        <i class="fas fa-users"></i> Customers
                    </a>
                </div>
                
                <div class="mt-4">
                    <h6>Cash Drawer</h6>
                    <div class="input-group mb-2">
                        <span class="input-group-text">Opening</span>
                        <input type="number" class="form-control" placeholder="0.00" step="0.01">
                    </div>
                    <div class="input-group">
                        <span class="input-group-text">Closing</span>
                        <input type="number" class="form-control" placeholder="0.00" step="0.01">
                    </div>
                </div>
            </div>
        </div>

        <!-- Popular Products -->
        <div class="card">
            <div class="card-header bg-info text-white">
                <h5 class="mb-0"><i class="fas fa-fire"></i> Popular Today</h5>
            </div>
            <div class="card-body">
                {% if popular_products %}
                <div class="list-group list-group-flush">
                    {% for product in popular_products %}
                    <div class="list-group-item">
                        <div class="d-flex justify-content-between">
                            <div>
                                <strong>{{ product.product__name|truncatechars:20 }}</strong>
                                <br>
                                <small class="text-muted">Sold: {{ product.total_sold|floatformat:0 }}</small>
                            </div>
                            <div class="text-end">
                                <small class="text-success">GH₵ {{ product.total_revenue|floatformat:2 }}</small>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </div>
                {% else %}
                <p class="text-muted text-center py-3">No sales today yet</p>
                {% endif %}
            </div>
        </div>
    </div>

    <!-- Recent Sales -->
    <div class="col-lg-8">
        <div class="card">
            <div class="card-header bg-primary text-white">
                <div class="d-flex justify-content-between align-items-center">
                    <h5 class="mb-0"><i class="fas fa-history"></i> Recent Sales</h5>
                    <a href="{% url 'sale_list' %}" class="btn btn-sm btn-light">View All</a>
                </div>
            </div>
            <div class="card-body">
                {% if recent_sales %}
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>Invoice #</th>
                                <th>Time</th>
                                <th>Customer</th>
                                <th>Items</th>
                                <th>Total</th>
                                <th>Payment</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for sale in recent_sales %}
                            <tr>
                                <td>
                                    <strong>{{ sale.invoice_number }}</strong>
                                    {% if sale.vat_invoice %}
                                    <span class="badge bg-success">VAT</span>
                                    {% endif %}
                                </td>
                                <td>{{ sale.created_at|time:"H:i" }}</td>
                                <td>
                                    {% if sale.customer %}
                                    {{ sale.customer.name|truncatechars:15 }}
                                    {% else %}
                                    <span class="text-muted">Walk-in</span>
                                    {% endif %}
                                </td>
                                <td>{{ sale.items_count }}</td>
                                <td class="text-success">GH₵ {{ sale.total_amount|floatformat:2 }}</td>
                                <td>
                                    <span class="badge bg-{% if sale.payment_method == 'cash' %}success{% elif sale.payment_method == 'mobile_money' %}info{% else %}warning{% endif %}">
                                        {{ sale.get_payment_method_display }}
                                    </span>
                                </td>
                                <td>
                                    <a href="{% url 'sale_detail' sale.pk %}" class="btn btn-sm btn-outline-primary">
                                        <i class="fas fa-eye"></i>
                                    </a>
                                    <a href="{% url 'print_receipt' sale.pk %}" class="btn btn-sm btn-outline-success">
                                        <i class="fas fa-print"></i>
                                    </a>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                {% else %}
                <div class="text-center py-5">
                    <i class="fas fa-cash-register fa-3x text-muted mb-3"></i>
                    <h5>No recent sales</h5>
                    <p class="text-muted">Start making sales to see them here</p>
                    <a href="{% url 'create_sale' %}" class="btn btn-success">
                        <i class="fas fa-cart-plus"></i> Create First Sale
                    </a>
                </div>
                {% endif %}
            </div>
        </div>

        <!-- Quick Stats -->
        <div class="row mt-4">
            <div class="col-md-4">
                <div class="card text-center">
                    <div class="card-body">
                        <h6 class="text-muted">Card Sales</h6>
                        <h3 class="text-warning">GH₵ {{ today_summary.total_card|floatformat:2 }}</h3>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card text-center">
                    <div class="card-body">
                        <h6 class="text-muted">Credit Sales</h6>
                        <h3 class="text-danger">GH₵ {{ today_summary.total_credit|floatformat:2 }}</h3>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card text-center">
                    <div class="card-body">
                        <h6 class="text-muted">VAT Today</h6>
                        <h3 class="text-primary">GH₵ 0.00</h3>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Quick Barcode Scanner -->
<div class="card mt-4">
    <div class="card-header bg-dark text-white">
        <h5 class="mb-0"><i class="fas fa-barcode"></i> Quick Scanner</h5>
    </div>
    <div class="card-body">
        <div class="input-group input-group-lg">
            <input type="text" class="form-control" placeholder="Enter product code or SKU..." 
                   id="quickBarcode" autofocus>
            <button class="btn btn-success" type="button" onclick="quickSearch()">
                <i class="fas fa-search"></i> Search
            </button>
        </div>
        <div id="quickResult" class="mt-3"></div>
    </div>
</div>

{% endblock %}

{% block extra_js %}
<script>
function quickSearch() {
    const barcode = document.getElementById('quickBarcode').value;
    if (!barcode) return;
    
    // Clear previous result
    document.getElementById('quickResult').innerHTML = `
        <div class="text-center">
            <div class="spinner-border text-primary" role="status">
                <span class="visually-hidden">Loading...</span>
            </div>
            <p class="mt-2">Searching...</p>
        </div>
    `;
    
    // In a real app, this would search for the product
    // For now, just show a message
    setTimeout(() => {
        document.getElementById('quickResult').innerHTML = `
            <div class="alert alert-info">
                <i class="fas fa-info-circle"></i>
                Product search would happen here. Go to <a href="{% url 'create_sale' %}">Create Sale</a> for full scanning.
            </div>
        `;
        document.getElementById('quickBarcode').value = '';
    }, 1000);
}

// Auto-focus on barcode input
document.addEventListener('DOMContentLoaded', function() {
    document.getElementById('quickBarcode').focus();
});

// Handle Enter key
document.getElementById('quickBarcode').addEventListener('keypress', function(e) {
    if (e.key === 'Enter') {
        e.preventDefault();
        quickSearch();
    }
});
</script>
{% endblock %}