{% extends "base.html" %}

{% block title %}Customers{% endblock %}

{% block content %}
<div class="container-fluid px-4">
    <div class="row my-4">
        <div class="col-md-12">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <h2 class="mb-0">👥 Customer List</h2>
                <a href="{{ url_for('add_customer') }}" class="btn btn-success">
                    ➕ Add Customer
                </a>
                <!-- Bulk upload form -->
                <form action="{{ url_for('upload_customers') }}" method="POST" enctype="multipart/form-data" class="d-flex align-items-center gap-2 mb-0">
                    <label class="mb-0">Or upload Excel file:</label>
                    <input type="file" name="excel_file" accept=".xlsx,.xls" required>
                    <button type="submit" class="btn btn-primary">Upload</button>
                </form>
            </div>

            {% with messages = get_flashed_messages(with_categories=true) %}
              {% if messages %}
                {% for category, message in messages %}
                  <div class="alert alert-{{ 'danger' if category == 'error' else category }} alert-dismissible fade show" role="alert">
                    {{ message }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                  </div>
                {% endfor %}
              {% endif %}
            {% endwith %}

            {% if customers %}
                <ul class="list-group shadow-sm">
                    {% for customer in customers %}
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            <div>
                                <strong>{{ customer.first_name }} {{ customer.last_name }}</strong>
                                <small class="text-muted d-block">{{ customer.phone_number }}</small>
                            </div>
                        </li>
                    {% endfor %}
                </ul>
            {% else %}
                <div class="alert alert-info mt-3">
                    No customers found.
                </div>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}