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

{% block title %}Procurement Ecosystem{% endblock %}
{% block head_extra %}
<link rel="stylesheet" href="/static/style.css">
<link rel="stylesheet" href="/static/hil-pages/procurement_dashboard.css">
{% endblock %}
{% block content %}
<main class="page">
    <h1 class="brand">Procurement Ecosystem</h1>
    <div class="card">
        <p>Supplier performance, quotation workflows, procurement approvals, and automated restock preparation.</p>
        <button type="button" onclick="requestQuote()">Create Low-Stock Quotation Request</button>
        {{ ui.button('Restock Center', '/restock') }}
        {{ ui.button('Admin', '/admin') }}
    </div>
    <div class="card">
        <h2>Supplier Performance</h2>
        <div class="wrap">
            <table>
                <thead><tr><th>Supplier</th><th>Quotations</th><th>Approved</th><th>Reliability</th><th>Quality</th><th>Lead Time</th></tr></thead>
                <tbody>
                {% for row in performance %}
                    <tr><td>{{ row.name }}</td><td>{{ row.quotations or 0 }}</td><td>{{ row.approved_count or 0 }}</td><td>{{ "%.1f"|format(row.reliability or 0) }}</td><td>{{ "%.1f"|format(row.quality or 0) }}</td><td>{{ "%.1f"|format(row.lead_time or 0) }} days</td></tr>
                {% else %}
                    <tr><td colspan="6">No suppliers registered yet.</td></tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</main>
<script>
async function requestQuote(){
  const token = document.querySelector('meta[name="csrf-token"]')?.content || "";
  const res = await fetch("/api/procurement/quotations", {method:"POST", headers:{"Content-Type":"application/json","X-CSRF-Token":token}, body:"{}"});
  const data = await res.json();
  alert(data.ok ? "Quotation request created: " + data.quotation_id : (data.error || "Failed"));
}
</script>
{% endblock %}