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

{% block title %}Restock Request {{ request_row.document_code }}{% 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_request.css">
{% endblock %}
{% block content %}
<div class="container">
    <h1 class="brand">Restock Request {{ request_row.document_code }}</h1>
    <div class="toolbar">
        {{ ui.button('Back', '/restock') }}
        <a href="/restock/request/{{ request_row.id }}/download" class="btn">Download CSV</a>
        <a href="/restock/request/{{ request_row.id }}/download?type=txt" class="btn">Download Document</a>
        {{ ui.button('Manage Suppliers', '/restock/suppliers') }}
    </div>

    {% 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">
        <p><strong>Status:</strong> <span class="badge">{{ request_row.status }}</span></p>
        <p><strong>Summary:</strong></p>
        <pre>{{ summary_json }}</pre>
    </div>

    <form method="POST" action="/restock/request/{{ request_row.id }}">
        <div class="panel">
            <h2>Editable Restock List</h2>
            <div class="table-wrap">
            <table>
                <thead>
                    <tr>
                        <th>Product</th>
                        <th>Stock</th>
                        <th>Suggested</th>
                        <th>Approved Qty</th>
                        <th>Supplier</th>
                        <th>Unit Cost</th>
                        <th>AI Score</th>
                        <th>Notes</th>
                    </tr>
                </thead>
                <tbody>
                    {% for item in items %}
                    <tr>
                        <td>
                            <input type="hidden" name="item_id" value="{{ item.id }}">
                            <strong>{{ item.product_name }}</strong><br>
                            <small>ID {{ item.shop_product_id or item.product_id }}</small>
                        </td>
                        <td>{{ item.current_stock }}</td>
                        <td>{{ item.suggested_qty }}</td>
                        <td><input type="number" min="0" name="approved_qty_{{ item.id }}" value="{{ item.approved_qty }}"></td>
                        <td>
                            <select name="supplier_id_{{ item.id }}">
                                <option value="">Select supplier</option>
                                {% for supplier in suppliers %}
                                    <option value="{{ supplier.id }}" {% if supplier.id == item.supplier_id %}selected{% endif %}>{{ supplier.name }}</option>
                                {% endfor %}
                            </select>
                            {% if offers_by_product.get(item.id) %}
                            <small>
                                Offers:
                                {% for offer in offers_by_product.get(item.id) %}
                                    {{ offer.supplier_name }} {{ currency_symbol }}{{ "%.2f"|format(offer.unit_cost or 0) }} Q{{ offer.quality_score }};
                                {% endfor %}
                            </small>
                            {% endif %}
                        </td>
                        <td><input type="number" step="0.01" min="0" name="unit_cost_{{ item.id }}" value="{{ "%.2f"|format(item.unit_cost or 0) }}"></td>
                        <td>{{ item.ai_score or 0 }}</td>
                        <td><textarea name="notes_{{ item.id }}" rows="2">{{ item.notes or '' }}</textarea></td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
            </div>
            <div class="toolbar">
                <button type="submit" name="action" value="save">Save Edits</button>
                <button type="submit" name="action" value="approve">Approve Request</button>
                <button type="submit" name="action" value="send_suppliers">Mark Sent To Suppliers</button>
            </div>
        </div>
    </form>

    <div class="panel">
        <h2>Send To Shop Admins For Approval</h2>
        <form method="POST" action="/restock/request/{{ request_row.id }}/notify-admins">
            <button type="submit">Send Approval Email via SMTP</button>
        </form>
        {% if admin_links %}
            {% for admin in admin_links %}
            <div class="supplier-card">
                <strong>{{ admin.name }}</strong>
                {% if admin.whatsapp_link %}<a href="{{ admin.whatsapp_link }}" class="btn" target="_blank">WhatsApp</a>{% endif %}
                {% if admin.email_link %}<a href="{{ admin.email_link }}" class="btn">Email</a>{% endif %}
            </div>
            {% endfor %}
        {% else %}
            <p>No admin contacts found.</p>
        {% endif %}
    </div>

    <div class="panel">
        <h2>Send To Wholesalers / Industries</h2>
        {% if supplier_messages %}
            {% for supplier in supplier_messages %}
            <div class="supplier-card">
                <h3>{{ supplier.supplier_name }}</h3>
                <p>Send the purchase request using WhatsApp or email. The supplier response link is included in the message.</p>
                {% if supplier.whatsapp_link %}<a href="{{ supplier.whatsapp_link }}" class="btn" target="_blank">Send WhatsApp</a>{% endif %}
                {% if supplier.email_link %}<a href="{{ supplier.email_link }}" class="btn">Send Email</a>{% endif %}
                <a href="/restock/request/{{ request_row.id }}/download?supplier_id={{ supplier.supplier_id }}" class="btn">Download Supplier CSV</a>
                <pre>{{ supplier.body }}</pre>
            </div>
            {% endfor %}
        {% else %}
            <p>Select suppliers and approved quantities first.</p>
        {% endif %}
    </div>
</div>
{% endblock %}