{% extends "base.html" %}

{% block content %}

<div class="d-flex justify-content-between align-items-center mb-3">
    <div>
        <h2 class="fw-bold text-dark mb-0"><i class="bi bi-truck text-primary me-2"></i>{{ l('Supplier Ledger', 'সাপ্লায়ার হিসাব') }}</h2>
        <small class="text-muted">{{ l('Track purchase totals, payments, outstanding dues, and advance balances for each supplier', 'প্রতিটি সাপ্লায়ারের মোট ক্রয়, পরিশোধ, বকেয়া ও অগ্রিম জমার হিসাব রাখুন') }}</small>
    </div>
    <a href="{{ url_for('suppliers') }}" class="btn btn-outline-primary btn-sm"><i class="bi bi-person-lines-fill me-1"></i>{{ l('Manage Suppliers', 'সাপ্লায়ার তালিকা') }}</a>
</div>

<!-- Summary Hero Stat Cards -->
{% set total_purchase_all = ledger | sum(attribute='purchase') %}
{% set total_paid_all = ledger | sum(attribute='paid') %}
{% set total_due_all = ledger | sum(attribute='due') %}
{% set total_advance_all = ledger | sum(attribute='advance') %}

<div class="row g-3 mb-3">
    <div class="col-md-3 col-6">
        <div class="card border-0 shadow-sm rounded-3 p-3">
            <div class="text-muted small fw-semibold uppercase">{{ l('Total Suppliers', 'মোট সাপ্লায়ার') }}</div>
            <div class="fs-4 fw-bold text-dark mt-1">{{ ledger|length }}</div>
        </div>
    </div>
    <div class="col-md-3 col-6">
        <div class="card border-0 shadow-sm rounded-3 p-3">
            <div class="text-muted small fw-semibold uppercase">{{ l('Total Purchase', 'মোট ক্রয়') }}</div>
            <div class="fs-4 fw-bold text-primary mt-1">৳ {{ '%.2f'|format(total_purchase_all) }}</div>
        </div>
    </div>
    <div class="col-md-3 col-6">
        <div class="card border-0 shadow-sm rounded-3 p-3">
            <div class="text-muted small fw-semibold uppercase">{{ l('Total Dues Outstanding', 'মোট বকেয়া') }}</div>
            <div class="fs-4 fw-bold text-danger mt-1">৳ {{ '%.2f'|format(total_due_all) }}</div>
        </div>
    </div>
    <div class="col-md-3 col-6">
        <div class="card border-0 shadow-sm rounded-3 p-3">
            <div class="text-muted small fw-semibold uppercase">{{ l('Total Advance Balance', 'মোট অগ্রিম জমা') }}</div>
            <div class="fs-4 fw-bold text-success mt-1">৳ {{ '%.2f'|format(total_advance_all) }}</div>
        </div>
    </div>
</div>

{% with messages = get_flashed_messages(with_categories=true) %}
  {% if messages %}{% for cat, msg in messages %}
    <div class="alert alert-{{ cat }} alert-dismissible fade show rounded-3 mb-3">{{ msg }}<button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>
  {% endfor %}{% endif %}
{% endwith %}

<!-- Search & Table Card -->
<div class="card border-0 shadow-sm rounded-3">
    <div class="card-header bg-white p-3 border-0">
        <div class="row g-2 align-items-center">
            <div class="col-md-6">
                <div class="input-group">
                    <span class="input-group-text bg-light border-end-0"><i class="bi bi-search text-muted"></i></span>
                    <input type="text" id="supplierSearchInput" class="form-control border-start-0 bg-light" placeholder="{{ l('Search supplier name, phone, code...', 'সাপ্লায়ারের নাম, ফোন বা কোড লিখে খুঁজুন...') }}" onkeyup="filterSupplierLedger()">
                </div>
            </div>
            <div class="col-md-6 text-md-end">
                <div class="btn-group btn-group-sm" role="group">
                    <button type="button" class="btn btn-outline-secondary active" id="btn-filter-all" onclick="setLedgerFilter('all')">{{ l('All', 'সব') }} ({{ ledger|length }})</button>
                    <button type="button" class="btn btn-outline-danger" id="btn-filter-due" onclick="setLedgerFilter('due')">{{ l('Dues Pending', 'বকেয়া আছে') }}</button>
                    <button type="button" class="btn btn-outline-success" id="btn-filter-advance" onclick="setLedgerFilter('advance')">{{ l('Has Advance', 'অগ্রিম জমা') }}</button>
                </div>
            </div>
        </div>
    </div>

    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0" id="supplierLedgerTable">
                <thead class="table-light">
                    <tr>
                        <th class="ps-3">{{ l('Supplier Info', 'সাপ্লায়ারের তথ্য') }}</th>
                        <th class="text-end">{{ l('Total Purchase', 'মোট ক্রয়') }}</th>
                        <th class="text-end">{{ l('Total Paid', 'মোট পরিশোধ') }}</th>
                        <th class="text-end">{{ l('Current Due', 'বর্তমান বাকি') }}</th>
                        <th class="text-end">{{ l('Advance Credit', 'অগ্রিম জমা') }}</th>
                        <th class="text-center">{{ l('Status', 'অবস্থা') }}</th>
                        <th class="text-end pe-3">{{ l('Action', 'অ্যাকশন') }}</th>
                    </tr>
                </thead>
                <tbody>
                {% for item in ledger %}
                <tr class="supplier-row" data-status="{% if item.due > 0 %}due{% elif item.advance > 0 %}advance{% else %}cleared{% endif %}">
                    <td class="ps-3">
                        <div class="fw-bold text-dark fs-6">{{ item.supplier.name }}</div>
                        <div class="text-muted small">
                            {% if item.supplier.phone %}<i class="bi bi-telephone me-1"></i>{{ item.supplier.phone }}{% endif %}
                            {% if item.supplier.supplier_code %} <span class="badge bg-light text-secondary border ms-1">{{ item.supplier.supplier_code }}</span>{% endif %}
                            {% if item.supplier.address %} · <i class="bi bi-geo-alt me-1"></i>{{ item.supplier.address }}{% endif %}
                        </div>
                    </td>
                    <td class="text-end fw-semibold text-dark">৳ {{ '%.2f'|format(item.purchase) }}</td>
                    <td class="text-end fw-semibold text-success">৳ {{ '%.2f'|format(item.paid) }}</td>
                    <td class="text-end fw-bold {% if item.due > 0 %}text-danger{% else %}text-muted{% endif %}">৳ {{ '%.2f'|format(item.due) }}</td>
                    <td class="text-end fw-bold text-success">
                        {% if item.advance > 0 %}
                            <span class="badge bg-success-subtle text-success border px-2 py-1">৳ {{ '%.2f'|format(item.advance) }}</span>
                        {% else %}
                            <span class="text-muted">৳ 0.00</span>
                        {% endif %}
                    </td>
                    <td class="text-center">
                        {% if item.due > 0 %}
                            <span class="badge bg-danger-subtle text-danger px-2.5 py-1 fw-bold"><i class="bi bi-exclamation-circle me-1"></i>{{ l('Due', 'বাকি') }}</span>
                        {% elif item.advance > 0 %}
                            <span class="badge bg-success-subtle text-success px-2.5 py-1 fw-bold"><i class="bi bi-wallet2 me-1"></i>{{ l('Advance Credit', 'অগ্রিম জমা') }}</span>
                        {% else %}
                            <span class="badge bg-light text-secondary border px-2.5 py-1 fw-bold"><i class="bi bi-check-circle me-1"></i>{{ l('Cleared', 'পরিষ্কার') }}</span>
                        {% endif %}
                    </td>
                    <td class="text-end pe-3">
                        <div class="d-flex justify-content-end gap-1">
                            <a href="{{ url_for('supplier_payment', supplier_id=item.supplier.id) }}" class="btn btn-primary btn-sm px-2.5 fw-semibold">
                                <i class="bi bi-plus-circle me-1"></i>{{ l('Pay / Add Advance', 'পেমেন্ট / অগ্রিম') }}
                            </a>
                            <a href="{{ url_for('supplier_payment', supplier_id=item.supplier.id) }}" class="btn btn-outline-secondary btn-sm px-2.5">
                                <i class="bi bi-clock-history me-1"></i>{{ l('History', 'ইতিহাস') }}
                            </a>
                        </div>
                    </td>
                </tr>
                {% else %}
                <tr>
                    <td colspan="7" class="text-center text-muted py-5">
                        <i class="bi bi-truck fs-1 d-block mb-2 opacity-25"></i>
                        {{ l('No supplier records found.', 'কোনো সাপ্লায়ার রেকর্ড পাওয়া যায়নি।') }}
                    </td>
                </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>

<script>
let currentStatusFilter = 'all';

function filterSupplierLedger() {
    const input = document.getElementById('supplierSearchInput').value.toLowerCase();
    const rows = document.querySelectorAll('#supplierLedgerTable tbody tr.supplier-row');

    rows.forEach(row => {
        const text = row.innerText.toLowerCase();
        const status = row.getAttribute('data-status');

        const matchesSearch = text.includes(input);
        const matchesStatus = (currentStatusFilter === 'all') || (status === currentStatusFilter);

        if (matchesSearch && matchesStatus) {
            row.style.display = '';
        } else {
            row.style.display = 'none';
        }
    });
}

function setLedgerFilter(status) {
    currentStatusFilter = status;
    
    document.getElementById('btn-filter-all').classList.remove('active', 'btn-secondary', 'btn-danger', 'btn-success');
    document.getElementById('btn-filter-due').classList.remove('active', 'btn-secondary', 'btn-danger', 'btn-success');
    document.getElementById('btn-filter-advance').classList.remove('active', 'btn-secondary', 'btn-danger', 'btn-success');

    if (status === 'all') {
        document.getElementById('btn-filter-all').classList.add('active', 'btn-secondary');
        document.getElementById('btn-filter-due').classList.add('btn-outline-danger');
        document.getElementById('btn-filter-advance').classList.add('btn-outline-success');
    } else if (status === 'due') {
        document.getElementById('btn-filter-all').classList.add('btn-outline-secondary');
        document.getElementById('btn-filter-due').classList.add('active', 'btn-danger');
        document.getElementById('btn-filter-advance').classList.add('btn-outline-success');
    } else if (status === 'advance') {
        document.getElementById('btn-filter-all').classList.add('btn-outline-secondary');
        document.getElementById('btn-filter-due').classList.add('btn-outline-danger');
        document.getElementById('btn-filter-advance').classList.add('active', 'btn-success');
    }

    filterSupplierLedger();
}
</script>

{% endblock %}