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

{% block title %}{{ action_title }} - Manufacturing App{% endblock %}

{% block content %}
<div class="container-fluid mt-4">
    <div class="row">
        <div class="col-md-6 offset-md-3">
            <div class="card border-{{ action_class }}">
                <div class="card-header bg-{{ action_class }} text-white">
                    <h4 class="mb-0">
                        {% if action == 'approve' %}
                            <i class="fas fa-check-circle"></i> {{ action_title }}
                        {% elif action == 'cancel' %}
                            <i class="fas fa-times-circle"></i> {{ action_title }}
                        {% endif %}
                    </h4>
                </div>
                <div class="card-body">
                    <div class="alert alert-{% if action == 'cancel' %}danger{% else %}info{% endif %}">
                        <strong>Action:</strong> {{ action_message }}
                    </div>

                    <div class="po-details mb-4">
                        <h6>Purchase Order Details:</h6>
                        <table class="table table-sm table-borderless">
                            <tr>
                                <td><strong>PO Number:</strong></td>
                                <td>{{ po.po_number }}</td>
                            </tr>
                            <tr>
                                <td><strong>Supplier:</strong></td>
                                <td>{{ po.supplier.name }}</td>
                            </tr>
                            <tr>
                                <td><strong>Order Date:</strong></td>
                                <td>{{ po.order_date|date:"F d, Y" }}</td>
                            </tr>
                            <tr>
                                <td><strong>Current Status:</strong></td>
                                <td>
                                    {% if po.status == 'ordered' %}
                                        <span class="badge bg-warning">Ordered</span>
                                    {% elif po.status == 'approved' %}
                                        <span class="badge bg-success">Approved</span>
                                    {% elif po.status == 'completed' %}
                                        <span class="badge bg-success">Completed</span>
                                    {% elif po.status == 'cancelled' %}
                                        <span class="badge bg-danger">Cancelled</span>
                                    {% endif %}
                                </td>
                            </tr>
                            <tr>
                                <td><strong>Total Amount:</strong></td>
                                <td><strong>{{ po.total_amount|format_rupiah }}</strong></td>
                            </tr>
                        </table>
                    </div>

                    <div class="d-flex justify-content-between">
                        <a href="{% url 'purchasing:po_detail' po.po_number %}" class="btn btn-secondary">
                            <i class="fas fa-times"></i> Cancel
                        </a>
                        <form method="post" class="d-inline">
                            {% csrf_token %}
                            <button type="submit" class="btn btn-{{ action_class }}">
                                <i class="fas {% if action == 'approve' %}fa-check{% elif action == 'cancel' %}fa-times{% endif %}"></i>
                                {{ action_button }}
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}