{% extends "base.html" %}
{% import 'components/macros.html' as ui %}

{% block title %}Wholesalers & Suppliers{% endblock %}
{% block body_class %}restock-page{% endblock %}
{% block head_extra %}
<link rel="stylesheet" href="/static/style.css">
<link rel="stylesheet" href="/static/hil-pages/restock_suppliers.css">
{% endblock %}
{% block content %}
<div class="container">
    <h1 class="brand">Wholesalers & Suppliers</h1>
    <p><a href="/restock">Back to Restock Planning</a> | <a href="/admin">Admin</a></p>

    {% with messages = get_flashed_messages(with_categories=true) %}
        {% if messages %}
            {% for category, message in messages %}
                <div class="{{ category }}">{{ message }}</div>
            {% endfor %}
        {% endif %}
    {% endwith %}

    <div class="panel">
        <h2>Add Wholesaler / Industry</h2>
        <form method="POST" action="/restock/suppliers">
            <input type="hidden" name="action" value="supplier">
            <div class="grid">
                <label>Name<input name="name" required></label>
                <label>Contact Person<input name="contact_person"></label>
                <label>Phone<input name="phone"></label>
                <label>WhatsApp<input name="whatsapp" placeholder="2547..."></label>
                <label>Email<input name="email" type="email"></label>
                <label>Location<input name="location"></label>
            </div>
            <label>Notes<textarea name="notes" rows="3"></textarea></label>
            <button type="submit">Save Supplier</button>
        </form>
    </div>

    <div class="panel">
        <h2>Link Supplier To Product</h2>
        <form method="POST" action="/restock/suppliers">
            <input type="hidden" name="action" value="offer">
            <div class="grid">
                <label>Supplier
                    <select name="supplier_id" required>
                        <option value="">Select supplier</option>
                        {% for supplier in suppliers %}
                        <option value="{{ supplier.id }}">{{ supplier.name }}</option>
                        {% endfor %}
                    </select>
                </label>
                <label>Product
                    <select name="product_id" required>
                        <option value="">Select product</option>
                        {% for product in products %}
                        <option value="{{ product.id }}">{{ product.name }} (stock {{ product.stock }})</option>
                        {% endfor %}
                    </select>
                </label>
                <label>Unit Cost<input name="unit_cost" type="number" min="0" step="0.01" required></label>
                <label>Quality Score (1-5)<input name="quality_score" type="number" min="1" max="5" step="0.1" value="3"></label>
                <label>Reliability Score (1-5)<input name="reliability_score" type="number" min="1" max="5" step="0.1" value="3"></label>
                <label>Lead Time Days<input name="lead_time_days" type="number" min="0" value="7"></label>
                <label>Minimum Order Qty<input name="min_order_qty" type="number" min="1" value="1"></label>
            </div>
            <label>Notes<textarea name="notes" rows="2"></textarea></label>
            <button type="submit">Save Product Offer</button>
        </form>
    </div>

    <div class="panel">
        <h2>Saved Product Offers</h2>
        {% if offers %}
        <div class="table-wrap">
        <table>
            <thead><tr><th>Supplier</th><th>Product</th><th>Unit Cost</th><th>Quality</th><th>Reliability</th><th>Lead Time</th></tr></thead>
            <tbody>
            {% for offer in offers %}
                <tr>
                    <td>{{ offer.supplier_name }}</td>
                    <td>{{ offer.product_name }}</td>
                    <td>{{ currency_symbol }}{{ "%.2f"|format(offer.unit_cost or 0) }}</td>
                    <td>{{ offer.quality_score }}</td>
                    <td>{{ offer.reliability_score }}</td>
                    <td>{{ offer.lead_time_days }} day(s)</td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
        </div>
        {% else %}
        <p>No supplier product offers saved yet.</p>
        {% endif %}
    </div>
</div>
{% endblock %}