{% extends "base.html" %}

{% block content %}

<div class="page-hero">
    <div>
        <h2><i class="bi bi-people text-primary"></i> {{ t('customers') }}</h2>
        <p class="page-subtitle">{{ l('Manage customer contacts, sales history, ledgers and dues', 'গ্রাহকের তথ্য, বিক্রয় ও বকেয়া পরিচালনা করুন') }}</p>
    </div>
    <div class="page-hero-actions">
        <a href="/export/customers/csv" class="btn btn-outline-success btn-sm fw-semibold"><i class="bi bi-filetype-csv me-1"></i> CSV</a>
        <a href="/export/customers/excel" class="btn btn-outline-success btn-sm fw-semibold"><i class="bi bi-file-earmark-excel me-1"></i> Excel</a>
        <a href="/export/customers/pdf" class="btn btn-outline-success btn-sm fw-semibold"><i class="bi bi-file-earmark-pdf me-1"></i> PDF</a>
    </div>
</div>

<div class="stat-grid">
    <div class="stat-card">
        <div class="stat-icon" style="background:#eef2ff;color:#4f46e5;"><i class="bi bi-people"></i></div>
        <div class="stat-label">{{ l('Total Customers', 'মোট গ্রাহক') }}</div>
        <div class="stat-value">{{ customers|length }}</div>
    </div>
    <div class="stat-card">
        <div class="stat-icon" style="background:#fee2e2;color:#dc2626;"><i class="bi bi-wallet2"></i></div>
        <div class="stat-label">{{ l('Total Due', 'মোট বাকি') }}</div>
        <div class="stat-value text-danger">৳ {{ '%.2f'|format(total_due_all) }}</div>
    </div>
    <div class="stat-card">
        <div class="stat-icon" style="background:#fef9c3;color:#a16207;"><i class="bi bi-exclamation-triangle"></i></div>
        <div class="stat-label">{{ l('Customers with Due', 'বাকি আছে এমন গ্রাহক') }}</div>
        <div class="stat-value text-warning-emphasis">{{ customers|selectattr('total_due','gt',0)|list|length }}</div>
    </div>
</div>

<!-- ADD NEW CUSTOMER FORM (CLEAN 2-COLUMN BALANCED LAYOUT) -->
<div class="card border-0 shadow-sm rounded-4 mb-4">
    <div class="card-header bg-white border-bottom py-3 px-4">
        <h5 class="fw-bold mb-0 text-dark"><i class="bi bi-person-plus text-primary me-2"></i>{{ l('Add New Customer', 'নতুন গ্রাহক যোগ করুন') }}</h5>
    </div>
    <div class="card-body p-4">
        <form method="POST" action="/add-customer">
        <input type="hidden" name="_csrf_token" value="{{ csrf_token }}">

        <div class="row g-4">
            <!-- LEFT COLUMN: Name & Phone -->
            <div class="col-md-6 border-end-md pe-md-4">
                <div class="d-flex align-items-center mb-3 text-primary fw-bold">
                    <i class="bi bi-person-vcard me-2 fs-5"></i>
                    <span>{{ l('1. Customer Contact Details', '১. গ্রাহকের নাম ও ফোন নম্বর') }}</span>
                </div>

                <div class="mb-3">
                    <label class="form-label fw-semibold text-dark small">{{ l('Customer Name', 'গ্রাহকের নাম') }} <span class="text-danger">*</span></label>
                    <input class="form-control form-control-lg fs-6" name="name" placeholder="{{ l('e.g. Karim Uddin, Rahim Mobile', 'যেমন: করিম উদ্দিন') }}" required>
                </div>

                <div class="mb-3">
                    <label class="form-label fw-semibold text-dark small">{{ l('Phone Number', 'ফোন নম্বর') }}</label>
                    <input class="form-control form-control-lg fs-6" name="phone" placeholder="01XXXXXXXXX">
                </div>
            </div>

            <!-- RIGHT COLUMN: Address & Notes -->
            <div class="col-md-6 ps-md-4">
                <div class="d-flex align-items-center mb-3 text-success fw-bold">
                    <i class="bi bi-geo-alt me-2 fs-5"></i>
                    <span>{{ l('2. Location & Notes', '২. যোগাযোগের ঠিকানা') }}</span>
                </div>

                <div class="mb-3">
                    <label class="form-label fw-semibold text-dark small">{{ l('Customer Address', 'ঠিকানা') }}</label>
                    <textarea class="form-control form-control-lg fs-6" name="address" rows="3" placeholder="{{ l('Enter customer detailed address...', 'গ্রাহকের বিস্তারিত ঠিকানা...') }}"></textarea>
                </div>
            </div>
        </div>

        <div class="d-flex justify-content-end align-items-center mt-4 pt-3 border-top">
            <button type="submit" class="btn btn-primary btn-lg px-5 fw-bold shadow-sm">
                <i class="bi bi-person-plus me-1"></i> {{ l('Add Customer', 'গ্রাহক সেভ করুন') }}
            </button>
        </div>

        </form>
    </div>
</div>

<div class="card border-0 shadow-sm rounded-4 overflow-hidden mb-4">
    <div class="card-header bg-light border-bottom py-3 px-4 d-flex align-items-center justify-content-between">
        <h5 class="fw-bold text-dark mb-0"><i class="bi bi-people text-primary me-2"></i>{{ l('Customer List', 'গ্রাহক তালিকা') }}</h5>
        <div style="width:280px;">
            <input type="text" id="customerSearch" class="form-control form-control-sm" placeholder="{{ l('Search by name or phone...', 'নাম বা ফোন দিয়ে খুঁজুন...') }}">
        </div>
    </div>
    <div class="table-responsive">
        <table class="table table-hover align-middle mb-0" id="customerTable">
            <thead class="table-light">
                <tr>
                    <th class="ps-4">{{ l('Name', 'নাম') }}</th>
                    <th>{{ l('Phone', 'ফোন') }}</th>
                    <th>{{ l('Address', 'ঠিকানা') }}</th>
                    <th class="text-end">{{ l('Due', 'বাকি') }}</th>
                    <th class="pe-4 text-end">{{ l('Action', 'কার্যক্রম') }}</th>
                </tr>
            </thead>
            <tbody>
            {% for c in customers %}
                <tr class="customer-row" data-search="{{ (c.name + ' ' + (c.phone or '') + ' ' + (c.address or ''))|lower }}">
                    <td class="ps-4 fw-semibold text-dark">{{ c.name }}</td>
                    <td>{{ c.phone or '—' }}</td>
                    <td class="text-muted">{{ c.address or '—' }}</td>
                    <td class="text-end">
                      {% if c.total_due > 0 %}
                        <span class="badge bg-danger-subtle text-danger rounded-pill px-3 py-1 fw-bold">৳ {{ '%.2f'|format(c.total_due) }}</span>
                      {% else %}
                        <span class="badge bg-success-subtle text-success rounded-pill px-3 py-1 fw-semibold">{{ l('Clear','পরিষ্কার') }}</span>
                      {% endif %}
                    </td>
                    <td class="pe-4 text-end">
                        <div class="btn-group btn-group-sm">
                            <a href="{{ url_for('customer_sales', id=c.id) }}" class="btn btn-outline-primary">
                                <i class="bi bi-receipt me-1"></i> {{ l('Sales', 'বিক্রয়') }}
                            </a>
                            <a href="{{ url_for('customer_ledger', id=c.id) }}" class="btn btn-outline-info">
                                <i class="bi bi-journal-text me-1"></i> {{ l('Ledger / Due', 'হিসাব / বকেয়া') }}
                            </a>
                            <form method="post" action="/delete-customer/{{ c.id }}" class="d-inline" onsubmit="return confirm('{{ l('Delete this customer?', 'এই গ্রাহককে মুছে ফেলবেন?') }}')">
                                <input type="hidden" name="_csrf_token" value="{{ csrf_token }}">
                                <button class="btn btn-outline-danger"><i class="bi bi-trash"></i></button>
                            </form>
                        </div>
                    </td>
                </tr>
            {% else %}
                <tr><td colspan="5" class="text-center text-muted py-5"><i class="bi bi-people fs-1 d-block mb-2 opacity-50"></i>{{ l('No customers added yet.', 'এখনও কোনো গ্রাহক যোগ করা হয়নি।') }}</td></tr>
            {% endfor %}
            <tr id="customerNoResults" style="display:none;">
                <td colspan="5" class="text-center py-5 text-muted">
                    <i class="bi bi-search fs-2 d-block mb-2 opacity-40"></i>
                    {{ l('No customers found matching your search.', 'আপনার সার্চের সাথে মিলে এমন কোনো গ্রাহক পাওয়া যায়নি।') }}
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</div>

<script>
document.getElementById("customerSearch").addEventListener("input", function() {
    let term = this.value.toLowerCase().trim();
    let rows = document.querySelectorAll("#customerTable tbody tr.customer-row");
    let noResults = document.getElementById("customerNoResults");
    let visibleCount = 0;
    rows.forEach(r => {
        let text = r.getAttribute("data-search") || r.innerText.toLowerCase();
        const show = !term || text.includes(term);
        r.style.display = show ? "" : "none";
        if (show) visibleCount++;
    });
    if (noResults) noResults.style.display = visibleCount === 0 ? "" : "none";
});
</script>

{% endblock %}