38086-vm/core/templates/core/suppliers.html

{% extends 'base.html' %}
{% load i18n %}

{% block title %}{% trans "Suppliers" %} | {{ site_settings.business_name }}{% endblock %}

{% block content %}
<div class="container">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h2 class="fw-bold mb-1">{% trans "Suppliers" %}</h2>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{% url 'index' %}">{% trans "Dashboard" %}</a></li>
                    <li class="breadcrumb-item active" aria-current="page">{% trans "Suppliers" %}</li>
                </ol>
            </nav>
        </div>
        <div class="btn-group">
            <button class="btn btn-primary shadow-sm" data-bs-toggle="modal" data-bs-target="#addSupplierModal">
                <i class="bi bi-person-plus me-2"></i>{% trans "Add Supplier" %}
            </button>
            <a href="{% url 'import_suppliers' %}" class="btn btn-success shadow-sm">
                <i class="bi bi-file-earmark-excel me-2"></i>{% trans "Import" %}
            </a>
        </div>
    </div>

    {% if messages %}
    <div class="mb-4">
        {% for message in messages %}
        <div class="alert alert-{{ message.tags }} alert-dismissible fade show rounded-3" role="alert">
            {{ message }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
        {% endfor %}
    </div>
    {% endif %}

    <div class="card border-0 shadow-sm rounded-4">
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0" id="suppliersTable">
                    <thead class="bg-light">
                        <tr>
                            <th class="ps-4">{% trans "Name" %}</th>
                            <th>{% trans "Contact Person" %}</th>
                            <th>{% trans "Phone" %}</th>
                            <th class="text-end pe-4">{% trans "Actions" %}</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for supplier in suppliers %}
                        <tr>
                            <td class="ps-4 fw-bold text-dark">{{ supplier.name }}</td>
                            <td>{{ supplier.contact_person|default:"-" }}</td>
                            <td>{{ supplier.phone|default:"-" }}</td>
                            <td class="text-end pe-4">
                                <div class="btn-group">
                                    <button class="btn btn-sm btn-light rounded-pill px-2 me-1" data-bs-toggle="modal" data-bs-target="#editSupplierModal{{ supplier.id }}" title="{% trans 'Edit' %}">
                                        <i class="bi bi-pencil text-success"></i>
                                    </button>
                                    <a href="{% url 'delete_supplier' supplier.id %}" class="btn btn-sm btn-light rounded-pill px-2" onclick="return confirm('{% trans 'Are you sure you want to delete this supplier?' %}')" title="{% trans 'Delete' %}">
                                        <i class="bi bi-trash text-danger"></i>
                                    </a>
                                </div>
                            </td>
                        </tr>
                        
                        <!-- Edit Supplier Modal -->
                        <div class="modal fade" id="editSupplierModal{{ supplier.id }}" tabindex="-1" aria-hidden="true">
                            <div class="modal-dialog">
                                <div class="modal-content rounded-4 border-0 shadow">
                                    <div class="modal-header border-0 pb-0">
                                        <h5 class="modal-title fw-bold">{% trans "Edit Supplier" %}</h5>
                                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                    </div>
                                    <form action="{% url 'edit_supplier' supplier.id %}" method="POST">
                                        {% csrf_token %}
                                        <div class="modal-body">
                                            <div class="mb-3">
                                                <label class="form-label small fw-bold">{% trans "Supplier Name" %}</label>
                                                <input type="text" name="name" class="form-control rounded-3" value="{{ supplier.name }}" required>
                                            </div>
                                            <div class="mb-3">
                                                <label class="form-label small fw-bold">{% trans "Contact Person" %}</label>
                                                <input type="text" name="contact_person" class="form-control rounded-3" value="{{ supplier.contact_person }}">
                                            </div>
                                            <div class="mb-3">
                                                <label class="form-label small fw-bold">{% trans "Phone Number" %}</label>
                                                <input type="text" name="phone" class="form-control rounded-3" value="{{ supplier.phone }}">
                                            </div>
                                        </div>
                                        <div class="modal-footer border-0">
                                            <button type="button" class="btn btn-light rounded-3" data-bs-dismiss="modal">{% trans "Cancel" %}</button>
                                            <button type="submit" class="btn btn-primary rounded-3 px-4">{% trans "Save Changes" %}</button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
                {% include "core/pagination.html" with page_obj=suppliers %}
        </div>
    </div>
</div>

<!-- Add Supplier Modal -->
<div class="modal fade" id="addSupplierModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content rounded-4 border-0 shadow">
            <div class="modal-header border-0 pb-0">
                <h5 class="modal-title fw-bold">{% trans "Add New Supplier" %}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <label class="form-label small fw-bold">{% trans "Supplier Name" %}</label>
                    <input type="text" id="addSuppName" class="form-control rounded-3" required>
                </div>
                <div class="mb-3">
                    <label class="form-label small fw-bold">{% trans "Contact Person" %}</label>
                    <input type="text" id="addSuppContact" class="form-control rounded-3">
                </div>
                <div class="mb-3">
                    <label class="form-label small fw-bold">{% trans "Phone Number" %}</label>
                    <input type="text" id="addSuppPhone" class="form-control rounded-3">
                </div>
            </div>
            <div class="modal-footer border-0">
                <button type="button" class="btn btn-light rounded-3" data-bs-dismiss="modal">{% trans "Close" %}</button>
                <button type="button" class="btn btn-outline-primary rounded-3" id="saveAndAddAnotherSupp">{% trans "Save & Add Another" %}</button>
                <button type="button" class="btn btn-primary rounded-3 px-4" id="saveSupp">{% trans "Save" %}</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        async function saveSupplier(stayOpen = false) {
            const name = document.getElementById('addSuppName').value;
            const contact_person = document.getElementById('addSuppContact').value;
            const phone = document.getElementById('addSuppPhone').value;

            if (!name) return alert('Please fill supplier name');

            const response = await fetch('{% url "add_supplier_ajax" %}', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ name, contact_person, phone })
            });
            const data = await response.json();
            if (data.success) {
                if (stayOpen) {
                    document.getElementById('addSuppName').value = '';
                    document.getElementById('addSuppContact').value = '';
                    document.getElementById('addSuppPhone').value = '';
                    alert('{% trans "Supplier added. You can add another one." %}');
                } else {
                    window.location.reload();
                }
            } else {
                alert('Error: ' + data.error);
            }
        }

        document.getElementById('saveSupp').onclick = () => saveSupplier(false);
        document.getElementById('saveAndAddAnotherSupp').onclick = () => saveSupplier(true);
    });
</script>
{% endblock %}