{% extends "base.html" %}

{% block content %}

<div class="container-fluid">

    <!-- Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">

        <div>

            <h2 class="fw-bold">
                <i class="bi bi-buildings text-primary"></i>
                Customer Management
            </h2>

            <p class="text-muted mb-0">
                Manage all customers in the system
            </p>

        </div>

        <a href="/customers/new" class="btn btn-primary">

            <i class="bi bi-plus-circle"></i>

            New Customer

        </a>

    </div>

    <!-- Stats -->
    <div class="row g-3 mb-4">

        <div class="col-md-3">

            <div class="card shadow-sm">

                <div class="card-body">

                    <small class="text-muted">Total Customers</small>

                    <h2 class="text-primary">{{ customer_count }}</h2>

                </div>

            </div>

        </div>

        <div class="col-md-3">

            <div class="card shadow-sm">

                <div class="card-body">

                    <small class="text-muted">Active</small>

                    <h2 class="text-success">{{ customers|selectattr('is_active', 'equalto', True)|list|length if customers else 0 }}</h2>

                </div>

            </div>

        </div>

        <div class="col-md-3">

            <div class="card shadow-sm">

                <div class="card-body">

                    <small class="text-muted">Inactive</small>

                    <h2 class="text-secondary">{{ customers|rejectattr('is_active', 'equalto', True)|list|length if customers else 0 }}</h2>

                </div>

            </div>

        </div>

        <div class="col-md-3">

            <div class="card shadow-sm">

                <div class="card-body">

                    <small class="text-muted">Total Enquiries</small>

                    <h2 class="text-info">--</h2>

                </div>

            </div>

        </div>

    </div>

    <!-- Search & Filter Bar -->
    <div class="card shadow-sm mb-4">

        <div class="card-body">

            <form method="get" action="/customers" class="row g-3">

                <div class="col-md-5">

                    <div class="input-group">

                        <span class="input-group-text"><i class="bi bi-search"></i></span>

                        <input type="text" class="form-control" name="search" placeholder="Search by name, code, contact, email, city..." value="{{ search or '' }}">

                    </div>

                </div>

                <div class="col-md-3">

                    <select class="form-select" name="sort">

                        <option value="company_name" {% if sort == 'company_name' %}selected{% endif %}>Sort by Company</option>

                        <option value="customer_code" {% if sort == 'customer_code' %}selected{% endif %}>Sort by Code</option>

                        <option value="contact_name" {% if sort == 'contact_name' %}selected{% endif %}>Sort by Contact</option>

                        <option value="city" {% if sort == 'city' %}selected{% endif %}>Sort by City</option>

                    </select>

                </div>

                <div class="col-md-2">

                    <select class="form-select" name="order">

                        <option value="asc" {% if order == 'asc' %}selected{% endif %}>Ascending</option>

                        <option value="desc" {% if order == 'desc' %}selected{% endif %}>Descending</option>

                    </select>

                </div>

                <div class="col-md-2">

                    <button type="submit" class="btn btn-primary w-100">

                        <i class="bi bi-funnel"></i> Filter

                    </button>

                </div>

            </form>

            {% if search %}

            <div class="mt-3">

                <span class="badge bg-info">

                    <i class="bi bi-search"></i> Results for "{{ search }}"

                    <a href="/customers" class="text-white ms-2">

                        <i class="bi bi-x-circle"></i>

                    </a>

                </span>

            </div>

            {% endif %}

        </div>

    </div>

    <!-- Customer Table -->
    <div class="card shadow-sm">

        <div class="card-header bg-primary text-white d-flex justify-content-between">

            <span>

                <i class="bi bi-people"></i>

                Customer List

            </span>

            <span class="badge bg-light text-dark">

                {{ customers|length }} Customers

            </span>

        </div>

        <div class="card-body p-0">

            <div class="table-responsive">

                <table class="table table-hover align-middle mb-0">

                    <thead class="table-light">

                        <tr>

                            <th>Code</th>

                            <th>Company</th>

                            <th>Contact Person</th>

                            <th>Email</th>

                            <th>Phone</th>

                            <th>City</th>

                            <th>Actions</th>

                        </tr>

                    </thead>

                    <tbody>

                    {% for customer in customers %}

                        <tr>

                            <td><code>{{ customer.customer_code }}</code></td>

                            <td>

                                <a href="/customers/{{ customer.id }}" class="text-decoration-none">

                                    {{ customer.company_name }}

                                </a>

                            </td>

                            <td>{{ customer.contact_name or "-" }}</td>

                            <td>{{ customer.email or "-" }}</td>

                            <td>{{ customer.telephone or "-" }}</td>

                            <td>{{ customer.city or "-" }}</td>

                            <td>

                                <a href="/customers/{{ customer.id }}" class="btn btn-sm btn-outline-primary">

                                    <i class="bi bi-eye"></i>

                                </a>

                                <a href="/customers/{{ customer.id }}/edit" class="btn btn-sm btn-outline-warning">

                                    <i class="bi bi-pencil"></i>

                                </a>
                                    <!-- ✅ DELETE BUTTON - ADMIN ONLY -->
                                    {% if current_user.role == "Admin" %}
                                    <button class="btn btn-sm btn-outline-danger" 
                                            onclick="confirmDelete('/customers/{{ customer.id }}/delete', 'Customer: {{ customer.company_name }}')">
                                        <i class="bi bi-trash"></i>
                                    </button>
                                    {% endif %}

                            </td>

                        </tr>

                    {% else %}

                        <tr>

                            <td colspan="7" class="text-center text-muted py-4">

                                <i class="bi bi-inbox fs-1 d-block mb-2"></i>

                                No customers found.

                            </td>

                        </tr>

                    {% endfor %}

                    </tbody>

                </table>

            </div>

        </div>

    </div>

</div>

{% endblock %}