{% extends "core/base.html" %}
{% load static %}

{% block title %}Supplier - {{ supplier.name }}{% endblock %}
{% block topbar_title %}Supplier Details{% endblock %}

{% block content %}
<div class="container-fluid px-0">

    <div class="d-flex justify-content-between align-items-center mb-3">
        <h5 class="mb-0">{{ supplier.name }}</h5>

        <div>
            <a href="{% url 'inventory:purchase_order_create' supplier.id %}"
               class="btn btn-primary btn-sm me-1">Add Purchase Order</a>
               <span style="width: 20px !important; height: 20px !important;"></span>

            <a href="{% url 'inventory:supplier_record_payment' supplier.id %}"
               class="btn btn-success btn-sm">Record Payment</a>
        </div>
    </div>

    <div class="card shadow-sm mb-3">
        <div class="card-body">
            <div class="row g-3">
                <div class="col-md-4">
                    <div class="text-muted small">Total Purchases</div>
                    <div class="fw-bold">{{ currency_symbol }}{{ supplier.total_purchased|floatformat:2 }}</div>
                </div>
                <div class="col-md-4">
                    <div class="text-muted small">Total Paid</div>
                    <div class="fw-bold">{{ currency_symbol }}{{ supplier.total_paid|floatformat:2 }}</div>
                </div>
                <div class="col-md-4">
                    <div class="text-muted small">Outstanding Balance</div>
                    <div class="fw-bold text-danger">{{ currency_symbol }}{{ supplier.balance|floatformat:2 }}</div>
                </div>
            </div>
        </div>
    </div>

    <!-- Purchase Orders -->
    <div class="card shadow-sm mb-4">
        <div class="card-header">
            <h6 class="mb-0">Purchase Orders</h6>
        </div>

        <div class="sp-table-container">
            <table class="table table-sm align-middle">
                <thead class="table-light">
                    <tr>
                        <th>#</th>
                        <th>Reference</th>
                        <th>Status</th>
                        <th>Total Cost</th>
                        <th>Date Ordered</th>
                        <th class="text-end">Actions</th>
                    </tr>
                </thead>
                <tbody>
                {% for po in purchase_orders %}
                    <tr>
                        <td>{{ po.id }}</td>
                        <td>{{ po.reference_number|default:"-" }}</td>
                        <td>{{ po.get_status_display }}</td>
                        <td>{{ currency_symbol }}{{ po.total_cost|floatformat:2 }}</td>
                        <td>{{ po.date_ordered|date:"Y-m-d" }}</td>
                        <td class="text-end">
                            <a href="{% url 'inventory:purchase_order_detail' po.id %}"
                               class="btn btn-outline-primary btn-sm">Details</a>
                        </td>
                    </tr>
                {% empty %}
                    <tr><td colspan="6" class="text-center text-muted py-3">No purchase orders found.</td></tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    </div>

    <!-- Payment History -->
    <div class="card shadow-sm">
        <div class="card-header">
            <h6 class="mb-0">Payment History</h6>
        </div>

        <div class="sp-table-container">
            <table class="table table-sm align-middle">
                <thead class="table-light">
                    <tr>
                        <th>Amount</th>
                        <th>Date</th>
                        <th>Notes</th>
                    </tr>
                </thead>
                <tbody>
                {% for p in supplier.payments.all %}
                    <tr>
                        <td>{{ currency_symbol }}{{ p.amount }}</td>
                        <td>{{ p.date|date:"Y-m-d H:i" }}</td>
                        <td>{{ p.notes|default:"-" }}</td>
                    </tr>
                {% empty %}
                    <tr><td colspan="3" class="text-center py-3 text-muted">No payments yet.</td></tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    </div>

</div>
{% endblock %}