{% extends "base.html" %}
{% block title %}Manage Customers{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-3">
    <h2>Manage Customers</h2>
    <a href="{{ url_for('add_customer') }}" class="btn btn-primary"><i class="fas fa-user-plus"></i> Add New Customer</a>
</div>

<!-- NEW: Search Form for Manage Customers -->
<form method="GET" action="{{ url_for('customers_list') }}" class="form-inline mb-3">
    <div class="input-group">
        <input type="text" class="form-control" name="search_customers" placeholder="Search Name, STB, Address, Phone" value="{{ search_query_customers if search_query_customers }}" style="width: 300px;">
        <div class="input-group-append">
            <button class="btn btn-outline-secondary" type="submit"><i class="fas fa-search"></i></button>
        </div>
    </div>
    {% if search_query_customers %}
        <a href="{{ url_for('customers_list') }}" class="btn btn-outline-info ml-2">Clear Search</a>
    {% endif %}
</form>
<!-- END NEW: Search Form -->


{% if customers %}
<div class="table-responsive">
    <table class="table table-striped table-hover">
        <thead>
            <tr>
                <th>Name</th>
                <th>Address</th>
                <th>Phone</th>
                <th>Plan</th>
                <th>Charge (₹)</th>
                <th>STB No.</th>
                <th>Status</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            {% for customer in customers %}
            <tr>
                <td>{{ customer.name }}</td>
                <td>{{ customer.address }}</td>
                <td>{{ customer.phone_number }}</td>
                <td>{{ customer.plan_details }}</td>
                <td>{{ "%.2f"|format(customer.monthly_charge) }}</td>
                <td>{{ customer.set_top_box_number }}</td>
                <td>
                    <span class="badge badge-{% if customer.status == 'Active' %}success{% elif customer.status == 'Inactive' %}secondary{% else %}warning{% endif %}">
                        {{ customer.status }}
                    </span>
                </td>
                <td>
                    <a href="{{ url_for('edit_customer', customer_id=customer.id) }}" class="btn btn-sm btn-info mr-1" title="Edit"><i class="fas fa-edit"></i></a>
                    <form action="{{ url_for('delete_customer', customer_id=customer.id) }}" method="POST" style="display:inline;" onsubmit="return confirm('Are you sure you want to delete {{customer.name}}? This will also delete their payments.');">
                        <button type="submit" class="btn btn-sm btn-danger" title="Delete"><i class="fas fa-trash-alt"></i></button>
                    </form>
                    <a href="{{ url_for('record_payment', customer_id_prefill=customer.id) }}" class="btn btn-sm btn-success ml-1 mt-1 mt-md-0" title="Add Payment"><i class="fas fa-dollar-sign"></i></a>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% else %}
    {% if search_query_customers %}
        <p>No customers found matching "<strong>{{ search_query_customers }}</strong>". <a href="{{ url_for('customers_list') }}">Clear search</a>.</p>
    {% else %}
        <p>No customers found. <a href="{{ url_for('add_customer') }}">Add one now!</a></p>
    {% endif %}
{% endif %}
{% endblock %}