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

{% block title %}Customers - Ghana Wholesale{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h2><i class="fas fa-users"></i> Customers</h2>
    <div>
        <a href="{% url 'pos_dashboard' %}" class="btn btn-secondary">
            <i class="fas fa-arrow-left"></i> POS Dashboard
        </a>
        <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addCustomerModal">
            <i class="fas fa-plus-circle"></i> Add Customer
        </button>
    </div>
</div>

<!-- Filters -->
<div class="card mb-4">
    <div class="card-body">
        <form method="get" class="row">
            <div class="col-md-6 mb-2">
                <input type="text" class="form-control" name="q" value="{{ search_query }}" 
                       placeholder="Search by name, phone or customer code">
            </div>
            <div class="col-md-4 mb-2">
                <select class="form-select" name="type">
                    <option value="">All Types</option>
                    <option value="retail" {% if selected_type == 'retail' %}selected{% endif %}>Retail</option>
                    <option value="wholesale" {% if selected_type == 'wholesale' %}selected{% endif %}>Wholesale</option>
                    <option value="corporate" {% if selected_type == 'corporate' %}selected{% endif %}>Corporate</option>
                </select>
            </div>
            <div class="col-md-2 mb-2">
                <div class="btn-group w-100">
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-filter"></i> Filter
                    </button>
                    <a href="{% url 'customer_list' %}" class="btn btn-outline-secondary">
                        <i class="fas fa-times"></i> Clear
                    </a>
                </div>
            </div>
        </form>
    </div>
</div>

<!-- Customers Table -->
<div class="card">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h5 class="mb-0">All Customers</h5>
        <span class="badge bg-primary">{{ customers.count }} customers</span>
    </div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover mb-0">
                <thead>
                    <tr>
                        <th>Customer Code</th>
                        <th>Name</th>
                        <th>Phone</th>
                        <th>Type</th>
                        <th class="text-end">Credit Limit</th>
                        <th class="text-end">Balance</th>
                        <th class="text-end">Available</th>
                        <th>Status</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for customer in customers %}
                    <tr>
                        <td><strong>{{ customer.customer_code }}</strong></td>
                        <td>{{ customer.name }}</td>
                        <td>{{ customer.phone }}</td>
                        <td>
                            <span class="badge bg-{% if customer.customer_type == 'wholesale' %}info{% elif customer.customer_type == 'corporate' %}primary{% else %}secondary{% endif %}">
                                {{ customer.get_customer_type_display }}
                            </span>
                        </td>
                        <td class="text-end">GH₵ {{ customer.credit_limit|floatformat:2 }}</td>
                        <td class="text-end">
                            {% if customer.credit_balance > 0 %}
                            <span class="badge bg-warning">GH₵ {{ customer.credit_balance|floatformat:2 }}</span>
                            {% else %}
                            <span class="text-success">GH₵ 0.00</span>
                            {% endif %}
                        </td>
                        <td class="text-end">
                            <span class="badge bg-{% if customer.available_credit > 0 %}success{% else %}danger{% endif %}">
                                GH₵ {{ customer.available_credit|floatformat:2 }}
                            </span>
                        </td>
                        <td>
                            {% if customer.is_active %}
                            <span class="badge bg-success">Active</span>
                            {% else %}
                            <span class="badge bg-secondary">Inactive</span>
                            {% endif %}
                        </td>
                        <td>
                            <div class="btn-group btn-group-sm">
                                <a href="{% url 'customer_detail' customer.pk %}" class="btn btn-outline-primary" title="View">
                                    <i class="fas fa-eye"></i>
                                </a>
                                <button class="btn btn-outline-warning" title="Edit" 
                                        onclick="editCustomer({{ customer.id }})">
                                    <i class="fas fa-edit"></i>
                                </button>
                            </div>
                        </td>
                    </tr>
                    {% empty %}
                    <tr>
                        <td colspan="9" class="text-center py-4">
                            <i class="fas fa-users fa-3x text-muted mb-3"></i>
                            <p class="text-muted">No customers found</p>
                            <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addCustomerModal">
                                <i class="fas fa-plus"></i> Add First Customer
                            </button>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- Add Customer Modal -->
<div class="modal fade" id="addCustomerModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Add New Customer</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form method="post" action="{% url 'customer_list' %}">
                {% csrf_token %}
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Customer Type *</label>
                            <select class="form-select" name="customer_type" required>
                                <option value="retail">Retail Customer</option>
                                <option value="wholesale">Wholesale Customer</option>
                                <option value="corporate">Corporate Customer</option>
                            </select>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Customer Name *</label>
                            <input type="text" class="form-control" name="name" required>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Phone Number *</label>
                            <input type="text" class="form-control" name="phone" required 
                                   placeholder="0241234567">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Email (Optional)</label>
                            <input type="email" class="form-control" name="email">
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">Address (Optional)</label>
                        <textarea class="form-control" name="address" rows="2"></textarea>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Ghana Card ID (Optional)</label>
                            <input type="text" class="form-control" name="ghana_card">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Credit Days</label>
                            <input type="number" class="form-control" name="credit_days" value="30">
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Credit Limit (GH₵)</label>
                            <input type="number" class="form-control" name="credit_limit" value="0" step="0.01">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Status</label>
                            <select class="form-select" name="is_active">
                                <option value="true" selected>Active</option>
                                <option value="false">Inactive</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Save Customer</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Quick Stats -->
<div class="row mt-4">
    <div class="col-md-3">
        <div class="card text-center">
            <div class="card-body">
                <h6 class="text-muted">Total Customers</h6>
                <h3>{{ customers.count }}</h3>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card text-center">
            <div class="card-body">
                <h6 class="text-muted">Active</h6>
                <h3 class="text-success">{{ customers.filter.is_active.count }}</h3>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card text-center">
            <div class="card-body">
                <h6 class="text-muted">Credit Customers</h6>
                <h3 class="text-info">{{ customers.filter.credit_limit__gt=0.count }}</h3>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card text-center">
            <div class="card-body">
                <h6 class="text-muted">Total Credit Balance</h6>
                <h3 class="text-warning">
                    {% with total_balance=customers.aggregate(total=Sum('credit_balance')).total %}
                    GH₵ {{ total_balance|default:0|floatformat:2 }}
                    {% endwith %}
                </h3>
            </div>
        </div>
    </div>
</div>
{% endblock %}