{% extends "base.html" %}

{% block content %}

<div class="page-hero">
    <div>
        <h2><i class="bi bi-person-badge text-primary"></i> {{ l('Suppliers', 'সরবরাহকারী (সাপ্লায়ার)') }}</h2>
        <p class="page-subtitle">{{ l('Manage supplier information, purchases and opening dues', 'সাপ্লায়ারদের তথ্য ও হিসাব পরিচালনা করুন') }}</p>
    </div>
    <div class="page-hero-actions">
        <a href="/export/suppliers/csv" class="btn btn-outline-success btn-sm fw-semibold"><i class="bi bi-filetype-csv me-1"></i> CSV</a>
        <a href="/export/suppliers/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/suppliers/pdf" class="btn btn-outline-success btn-sm fw-semibold"><i class="bi bi-file-earmark-pdf me-1"></i> PDF</a>
    </div>
</div>

<!-- SUPPLIER STATS -->
<div class="stat-grid" style="margin-bottom:20px;">
    <div class="stat-card" style="background:linear-gradient(135deg,#eef2ff,#e0e7ff);border:1px solid #c7d2fe;">
        <div class="stat-icon" style="background:#4f46e5;color:#fff;"><i class="bi bi-person-badge-fill"></i></div>
        <div class="stat-label">{{ l('Total Suppliers', 'মোট সরবরাহকারী') }}</div>
        <div class="stat-value" style="color:#1e1b4b;">{{ total_suppliers if total_suppliers is defined else suppliers|length }}</div>
    </div>
    <div class="stat-card" style="background:linear-gradient(135deg,#f0fdf4,#dcfce7);border:1px solid #bbf7d0;">
        <div class="stat-icon" style="background:#16a34a;color:#fff;"><i class="bi bi-check-circle-fill"></i></div>
        <div class="stat-label">{{ l('Active Suppliers', 'সক্রিয়') }}</div>
        <div class="stat-value" style="color:#14532d;">{{ suppliers|selectattr('active')|list|length }}</div>
    </div>
    <div class="stat-card" style="background:linear-gradient(135deg,#fff7ed,#ffedd5);border:1px solid #fed7aa;">
        <div class="stat-icon" style="background:#ea580c;color:#fff;"><i class="bi bi-exclamation-circle-fill"></i></div>
        <div class="stat-label">{{ l('Total Due to Suppliers', 'মোট বকেয়া') }}</div>
        <div class="stat-value" style="color:#7c2d12;">৳ {{ '%.2f'|format(suppliers|map(attribute='opening_due')|select|sum) }}</div>
    </div>
</div>

<!-- ADD NEW SUPPLIER 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-plus-circle text-primary me-2"></i>{{ l('Add Supplier', 'নতুন সরবরাহকারী যোগ করুন') }}</h5>
    </div>
    <div class="card-body p-4">
        <form method="POST" action="{{ url_for('add_supplier') }}">
        <input type="hidden" name="_csrf_token" value="{{ csrf_token }}">

        <div class="row g-4">
            <!-- LEFT COLUMN: Contact & Company Info -->
            <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-building me-2 fs-5"></i>
                    <span>{{ l('1. Supplier & Company Info', '১. সরবরাহকারীর পরিচয় ও কোম্পানি') }}</span>
                </div>

                <div class="mb-3">
                    <label class="form-label fw-semibold text-dark small">{{ l('Supplier Name', 'সরবরাহকারীর নাম') }} <span class="text-danger">*</span></label>
                    <input type="text" name="name" class="form-control form-control-lg fs-6" placeholder="{{ l('e.g. Rahim Ahmed, Akram', 'যেমন: রহিম আহমেদ') }}" required>
                </div>

                <div class="mb-3">
                    <label class="form-label fw-semibold text-dark small">{{ l('Company Name', 'কোম্পানির নাম') }}</label>
                    <input type="text" name="company" class="form-control form-control-lg fs-6" placeholder="{{ l('e.g. Pran, Square, Akij Group', 'যেমন: প্রাণ, স্কয়ার, আকিজ গ্রুপ') }}">
                </div>

                <div class="row g-2 mb-3">
                    <div class="col-6">
                        <label class="form-label fw-semibold text-dark small">{{ l('Phone Number', 'ফোন নম্বর') }}</label>
                        <input type="text" name="phone" class="form-control" placeholder="017xxxxxxxx">
                    </div>
                    <div class="col-6">
                        <label class="form-label fw-semibold text-dark small">{{ l('Email Address', 'ইমেইল') }}</label>
                        <input type="email" name="email" class="form-control" placeholder="supplier@company.com">
                    </div>
                </div>
            </div>

            <!-- RIGHT COLUMN: Dues & Address -->
            <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-wallet2 me-2 fs-5"></i>
                    <span>{{ l('2. Accounts & Address', '২. হিসাব ও ঠিকানা') }}</span>
                </div>

                <div class="mb-3">
                    <label class="form-label fw-semibold text-dark small">{{ l('Opening Due (৳)', 'আগের বকেয়া (৳)') }}</label>
                    <input type="number" step="0.01" name="opening_due" class="form-control form-control-lg fs-6" value="0" placeholder="0.00">
                </div>

                <div class="mb-3">
                    <label class="form-label fw-semibold text-dark small">{{ l('Address / City', 'ঠিকানা বা শহর') }}</label>
                    <textarea name="address" class="form-control form-control-lg fs-6" rows="2" placeholder="{{ l('City or detailed office 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-check-circle me-1"></i> {{ l('Add Supplier', 'সরবরাহকারী সেভ করুন') }}
            </button>
        </div>

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

<!-- SUPPLIER LIST TABLE -->
<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 flex-wrap gap-2">
        <h5 class="fw-bold text-dark mb-0"><i class="bi bi-person-badge text-primary me-2"></i>{{ l('Suppliers List', 'সরবরাহকারীদের তালিকা') }}</h5>
        <div style="width:280px;">
            <div class="input-group input-group-sm">
                <span class="input-group-text bg-white border-end-0"><i class="bi bi-search text-muted"></i></span>
                <input type="text" id="supplierSearch" class="form-control border-start-0"
                       placeholder="{{ l('Search name, company, phone...', 'নাম, কোম্পানি, ফোন দিয়ে খুঁজুন...') }}">
            </div>
        </div>
    </div>
    <div class="table-responsive">
        <table class="table table-hover align-middle mb-0">
            <thead class="table-light">
                <tr>
                    <th class="ps-4">{{ l('Code', 'কোড') }}</th>
                    <th>{{ l('Supplier Name', 'সরবরাহকারীর নাম') }}</th>
                    <th>{{ l('Company', 'কোম্পানি') }}</th>
                    <th>{{ l('Phone', 'ফোন') }}</th>
                    <th>{{ l('Email', 'ইমেইল') }}</th>
                    <th>{{ l('Opening Due', 'আগের বকেয়া') }}</th>
                    <th>{{ l('Status', 'অবস্থা') }}</th>
                    <th class="pe-4 text-end">{{ l('Action', 'অ্যাকশন') }}</th>
                </tr>
            </thead>
            <tbody>
            {% if suppliers %}
                {% for supplier in suppliers %}
                <tr class="supplier-row" data-search="{{ (supplier.name + ' ' + (supplier.company or '') + ' ' + (supplier.phone or '') + ' ' + (supplier.supplier_code or ''))|lower }}">
                    <td class="ps-4 font-monospace text-muted fw-bold">{{ supplier.supplier_code }}</td>
                    <td class="fw-bold text-dark">{{ supplier.name }}</td>
                    <td>{{ supplier.company or "-" }}</td>
                    <td>{{ supplier.phone or "-" }}</td>
                    <td>{{ supplier.email or "-" }}</td>
                    <td class="fw-bold text-danger">৳ {{ "%.2f"|format(supplier.opening_due or 0) }}</td>
                    <td>
                        {% if supplier.active %}
                            <span class="badge bg-success py-1.5 px-3">{{ l('Active', 'সক্রিয়') }}</span>
                        {% else %}
                            <span class="badge bg-danger py-1.5 px-3">{{ l('Inactive', 'নিষ্ক্রিয়') }}</span>
                        {% endif %}
                    </td>
                    <td class="pe-4 text-end">
                        <div class="btn-group btn-group-sm">
                            <button class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#editSupplier{{ supplier.id }}">
                                <i class="bi bi-pencil me-1"></i>{{ l('Edit', 'এডিট') }}
                            </button>

                            {% if supplier.active %}
                                <a href="{{ url_for('toggle_supplier', id=supplier.id) }}" class="btn btn-outline-warning">{{ l('Disable', 'নিষ্ক্রিয়') }}</a>
                            {% else %}
                                <a href="{{ url_for('toggle_supplier', id=supplier.id) }}" class="btn btn-outline-success">{{ l('Enable', 'সক্রিয়') }}</a>
                            {% endif %}

                            <form method="POST" action="{{ url_for('delete_supplier', id=supplier.id) }}" class="d-inline" onsubmit="return confirm('{{ l('Delete this supplier?', 'আপনি কি এই সরবরাহকারীকে মুছে ফেলতে চান?') }}')">
                                <input type="hidden" name="_csrf_token" value="{{ csrf_token }}">
                                <button type="submit" class="btn btn-outline-danger btn-sm" title="{{ l('Delete Supplier', 'সরবরাহকারী মুছুন') }}">
                                    <i class="bi bi-trash"></i>
                                </button>
                            </form>
                        </div>
                    </td>
                </tr>

                <!-- Edit Modal -->
                <div class="modal fade" id="editSupplier{{ supplier.id }}" tabindex="-1">
                    <div class="modal-dialog modal-lg">
                        <div class="modal-content">
                            <form method="POST" action="{{ url_for('edit_supplier', id=supplier.id) }}">
                                <input type="hidden" name="_csrf_token" value="{{ csrf_token }}">
                                <div class="modal-header">
                                    <h5 class="modal-title fw-bold"><i class="bi bi-pencil-square text-primary me-2"></i>{{ l('Edit Supplier', 'সরবরাহকারী এডিট করুন') }}</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                </div>
                                <div class="modal-body">
                                    <div class="row g-3">
                                        <div class="col-md-6">
                                            <label class="form-label fw-semibold">{{ l('Supplier Name', 'সরবরাহকারীর নাম') }}</label>
                                            <input type="text" name="name" class="form-control" value="{{ supplier.name }}" required>
                                        </div>
                                        <div class="col-md-6">
                                            <label class="form-label fw-semibold">{{ l('Company', 'কোম্পানি') }}</label>
                                            <input type="text" name="company" class="form-control" value="{{ supplier.company or '' }}">
                                        </div>
                                        <div class="col-md-6">
                                            <label class="form-label fw-semibold">{{ l('Phone', 'ফোন') }}</label>
                                            <input type="text" name="phone" class="form-control" value="{{ supplier.phone or '' }}">
                                        </div>
                                        <div class="col-md-6">
                                            <label class="form-label fw-semibold">{{ l('Email', 'ইমেইল') }}</label>
                                            <input type="email" name="email" class="form-control" value="{{ supplier.email or '' }}">
                                        </div>
                                        <div class="col-md-6">
                                            <label class="form-label fw-semibold">{{ l('Opening Due', 'আগের বকেয়া') }}</label>
                                            <input type="number" step="0.01" name="opening_due" class="form-control" value="{{ '%.2f'|format(supplier.opening_due or 0) }}">
                                        </div>
                                        <div class="col-md-6">
                                            <label class="form-label fw-semibold">{{ l('Address', 'ঠিকানা') }}</label>
                                            <input type="text" name="address" class="form-control" value="{{ supplier.address or '' }}">
                                        </div>
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ l('Cancel', 'বাতিল') }}</button>
                                    <button type="submit" class="btn btn-primary fw-bold">{{ l('Update Supplier', 'আপডেট করুন') }}</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                {% endfor %}
            {% else %}
                <tr>
                    <td colspan="8" class="text-center text-muted py-5">
                        <i class="bi bi-inbox fs-1 d-block mb-2 opacity-50"></i>
                        {{ l('No supplier found.', 'কোনো সরবরাহকারী পাওয়া যায়নি।') }}
                    </td>
                </tr>
            {% endif %}
            <tr id="supplierNoResults" style="display:none;">
                <td colspan="8" class="text-center py-5 text-muted">
                    <i class="bi bi-search fs-2 d-block mb-2 opacity-40"></i>
                    {{ l('No suppliers found matching your search.', 'আপনার সার্চের সাথে মিলে এমন কোনো সরবরাহকারী পাওয়া যায়নি।') }}
                </td>
            </tr>
            </tbody>
        </table>
    </div>

    {% if pagination %}
    <div class="p-3 border-top bg-light">
        <nav>
            <ul class="pagination justify-content-center mb-0">
                {% if pagination.has_prev %}
                <li class="page-item">
                    <a class="page-link" href="{{ url_for('suppliers', page=pagination.prev_num, q=keyword) }}">{{ l('Previous', 'আগের পেজ') }}</a>
                </li>
                {% endif %}
                {% for p in pagination.iter_pages() %}
                {% if p %}
                <li class="page-item {% if p==pagination.page %}active{% endif %}">
                    <a class="page-link" href="{{ url_for('suppliers', page=p, q=keyword) }}">{{ p }}</a>
                </li>
                {% endif %}
                {% endfor %}
                {% if pagination.has_next %}
                <li class="page-item">
                    <a class="page-link" href="{{ url_for('suppliers', page=pagination.next_num, q=keyword) }}">{{ l('Next', 'পরের পেজ') }}</a>
                </li>
                {% endif %}
            </ul>
        </nav>
    </div>
    {% endif %}
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const searchInput = document.getElementById('supplierSearch');
    if (!searchInput) return;
    searchInput.addEventListener('input', function() {
        const term = this.value.toLowerCase().trim();
        const rows = document.querySelectorAll('.supplier-row');
        const noResults = document.getElementById('supplierNoResults');
        let visible = 0;
        rows.forEach(r => {
            const text = r.getAttribute('data-search') || '';
            const show = !term || text.includes(term);
            r.style.display = show ? '' : 'none';
            if (show) visible++;
        });
        if (noResults) noResults.style.display = visible === 0 ? '' : 'none';
    });
});
</script>

{% endblock %}