{% extends "base.html" %}

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

{% block header_title %}Customers Report{% endblock %}

{% block extra_css %}
<style>
    .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-value {
        font-size: 24px;
        font-weight: 600;
    }
    .customer-status {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        display: inline-block;
        margin-right: 5px;
    }
    .status-active {
        background-color: #28a745;
    }
    .status-inactive {
        background-color: #ffc107;
    }
    .status-vip {
        background-color: #7952b3;
    }
</style>
{% endblock %}

{% block content %}
<div class="row mb-4">
    <div class="col-md-12">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0">Customer Analytics</h5>
            </div>
            <div class="card-body">
                <!-- Summary Cards -->
                <div class="row mb-4">
                    <div class="col-md-4">
                        <div class="summary-box text-center">
                            <p class="text-muted mb-1">Total Customers</p>
                            <h3 class="summary-value">{{ total_customers }}</h3>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="summary-box text-center">
                            <p class="text-muted mb-1">Total Revenue from Customers</p>
                            <h3 class="summary-value">{{ company_settings.currency_symbol }}{{ total_revenue|floatformat:2 }}</h3>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="summary-box text-center">
                            <p class="text-muted mb-1">Average Customer Value</p>
                            <h3 class="summary-value">{{ company_settings.currency_symbol }}{{ average_customer_value|floatformat:2 }}</h3>
                        </div>
                    </div>
                </div>
                
                <!-- Customer Search -->
                <div class="row mb-4">
                    <div class="col-md-12">
                        <div class="input-group">
                            <span class="input-group-text"><i class="fas fa-search"></i></span>
                            <input type="text" id="customerSearch" class="form-control" placeholder="Search customers by name, email, or phone...">
                        </div>
                    </div>
                </div>
                
                <!-- Customers Table -->
                <div class="row">
                    <div class="col-md-12">
                        <div class="table-responsive">
                            <table class="table table-striped" id="customersTable">
                                <thead>
                                    <tr>
                                        <th>Customer</th>
                                        <th>Contact</th>
                                        <th class="text-end">Purchases</th>
                                        <th class="text-end">Total Spent</th>
                                        <th class="text-end">Average Purchase</th>
                                        <th>Last Purchase</th>
                                        <th class="text-end">Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for customer in customer_metrics %}
                                    <tr>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                {% if customer.total_spent > 5000 %}
                                                <span class="customer-status status-vip" title="VIP Customer"></span>
                                                {% elif customer.last_purchase_date|date:'Y-m-d' > '2025-02-01'|date:'Y-m-d' %}
                                                <span class="customer-status status-active" title="Recently Active"></span>
                                                {% else %}
                                                <span class="customer-status status-inactive" title="Inactive"></span>
                                                {% endif %}
                                                {{ customer.name }}
                                            </div>
                                        </td>
                                        <td>
                                            {% if customer.email %}
                                            <div><i class="fas fa-envelope fa-sm text-muted me-1"></i> {{ customer.email }}</div>
                                            {% endif %}
                                            {% if customer.phone %}
                                            <div><i class="fas fa-phone fa-sm text-muted me-1"></i> {{ customer.phone }}</div>
                                            {% endif %}
                                        </td>
                                        <td class="text-end">{{ customer.total_purchases }}</td>
                                        <td class="text-end">{{ company_settings.currency_symbol }}{{ customer.total_spent|floatformat:2 }}</td>
                                        <td class="text-end">{{ company_settings.currency_symbol }}{{ customer.average_purchase|floatformat:2 }}</td>
                                        <td>{{ customer.last_purchase_date|date:"M d, Y" }}</td>
                                        <td class="text-end">
                                            <div class="btn-group">
                                                <a href="{% url 'customer_detail' customer.id %}" class="btn btn-sm btn-outline-primary">
                                                    <i class="fas fa-eye"></i>
                                                </a>
                                                <a href="{% url 'customer_edit' customer.id %}" class="btn btn-sm btn-outline-secondary">
                                                    <i class="fas fa-edit"></i>
                                                </a>
                                            </div>
                                        </td>
                                    </tr>
                                    {% empty %}
                                    <tr>
                                        <td colspan="7" class="text-center">No customer data available</td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                
                <!-- Customer Segments -->
                <div class="row mt-4">
                    <div class="col-md-12">
                        <div class="card">
                            <div class="card-header">
                                <h5 class="card-title mb-0">Customer Segments</h5>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-4">
                                        <div class="card">
                                            <div class="card-body">
                                                <h5 class="card-title"><i class="fas fa-crown text-warning me-2"></i> VIP Customers</h5>
                                                <p class="card-text">Customers who have spent over {{ company_settings.currency_symbol }}5,000</p>
                                                <div class="text-center mb-3">
                                                    <h3>{{ customer_metrics|slice:":5"|length }}</h3>
                                                </div>
                                                <div class="list-group small">
                                                    {% for customer in customer_metrics|slice:":5" %}
                                                    <div class="list-group-item d-flex justify-content-between align-items-center">
                                                        <span>{{ customer.name }}</span>
                                                        <span class="badge bg-primary rounded-pill">{{ company_settings.currency_symbol }}{{ customer.total_spent|floatformat:0 }}</span>
                                                    </div>
                                                    {% endfor %}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="col-md-4">
                                        <div class="card">
                                            <div class="card-body">
                                                <h5 class="card-title"><i class="fas fa-shopping-cart text-success me-2"></i> Most Frequent Buyers</h5>
                                                <p class="card-text">Customers with the most purchases</p>
                                                <div class="text-center mb-3">
                                                    <h3>{{ customer_metrics|slice:":5"|length }}</h3>
                                                </div>
                                                <div class="list-group small">
                                                    {% for customer in customer_metrics|slice:":5" %}
                                                    <div class="list-group-item d-flex justify-content-between align-items-center">
                                                        <span>{{ customer.name }}</span>
                                                        <span class="badge bg-success rounded-pill">{{ customer.total_purchases }} purchases</span>
                                                    </div>
                                                    {% endfor %}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="col-md-4">
                                        <div class="card">
                                            <div class="card-body">
                                                <h5 class="card-title"><i class="fas fa-tag text-info me-2"></i> Highest Average Orders</h5>
                                                <p class="card-text">Customers with highest average purchase value</p>
                                                <div class="text-center mb-3">
                                                    <h3>{{ customer_metrics|slice:":5"|length }}</h3>
                                                </div>
                                                <div class="list-group small">
                                                    {% for customer in customer_metrics|slice:":5" %}
                                                    <div class="list-group-item d-flex justify-content-between align-items-center">
                                                        <span>{{ customer.name }}</span>
                                                        <span class="badge bg-info rounded-pill">{{ company_settings.currency_symbol }}{{ customer.average_purchase|floatformat:0 }}</span>
                                                    </div>
                                                    {% endfor %}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    document.addEventListener('DOMContentLoaded', function () {
        // Customer search functionality
        const searchInput = document.getElementById('customerSearch');
        const table = document.getElementById('customersTable');
        const rows = table.querySelectorAll('tbody tr');
        
        searchInput.addEventListener('keyup', function() {
            const searchTerm = searchInput.value.toLowerCase();
            
            rows.forEach(row => {
                const customerName = row.querySelector('td:first-child').textContent.toLowerCase();
                const contactInfo = row.querySelector('td:nth-child(2)').textContent.toLowerCase();
                
                if (customerName.includes(searchTerm) || contactInfo.includes(searchTerm)) {
                    row.style.display = '';
                } else {
                    row.style.display = 'none';
                }
            });
        });
    });
</script>
{% endblock %}