{% extends "core/base.html" %}
{% load currency_filters %}
{% block title %}Reverse Order - {{ order.order_number }}{% endblock %}
{% block topbar_title %}Reverse / Refund Order{% endblock %}

{% block content %}
<div class="container-fluid py-4" style="max-width:760px;">

    <div class="card border-0 shadow-sm">
        <div class="card-header bg-danger text-white py-3">
            <div class="d-flex align-items-center gap-2">
                <i class="fas fa-undo-alt fa-lg"></i>
                <div>
                    <h5 class="mb-0 fw-bold">Reverse Order #{{ order.order_number }}</h5>
                    <small class="opacity-75">This action cannot be undone</small>
                </div>
            </div>
        </div>

        <div class="card-body">
            <!-- Warning -->
            <div class="alert alert-warning d-flex align-items-start gap-2">
                <i class="fas fa-exclamation-triangle mt-1"></i>
                <div>
                    <strong>Are you sure you want to reverse this order?</strong>
                    <ul class="mb-0 mt-1 small">
                        <li>Order status will be changed to <strong>Cancelled</strong></li>
                        <li>All product stock will be <strong>restored</strong></li>
                        <li>If customer had a credit balance on this order, it will be <strong>cleared</strong></li>
                        <li>A refund record will be created for audit purposes</li>
                    </ul>
                </div>
            </div>

            <!-- Order Summary -->
            <div class="row g-3 mb-4">
                <div class="col-sm-6">
                    <div class="p-3 bg-light rounded">
                        <div class="small text-muted mb-1">Order Number</div>
                        <div class="fw-bold">{{ order.order_number }}</div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="p-3 bg-light rounded">
                        <div class="small text-muted mb-1">Original Amount</div>
                        <div class="fw-bold text-danger">{% money order.final_amount %}</div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="p-3 bg-light rounded">
                        <div class="small text-muted mb-1">Customer</div>
                        <div class="fw-bold">{{ order.customer_name|default:"Walk-in" }}</div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="p-3 bg-light rounded">
                        <div class="small text-muted mb-1">Date</div>
                        <div class="fw-bold">{{ order.created_at|date:"M d, Y H:i" }}</div>
                    </div>
                </div>
            </div>

            <!-- Items to be reversed -->
            <h6 class="fw-bold mb-3">Items to be Reversed & Stock Restored</h6>
            <div class="table-responsive mb-4">
                <table class="table table-sm table-hover align-middle">
                    <thead class="table-light">
                        <tr>
                            <th>Product</th>
                            <th class="text-center">Qty</th>
                            <th class="text-end">Unit Price</th>
                            <th class="text-end">Total</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for item in order_items %}
                        <tr>
                            <td>{{ item.product_name|default:item.product.name|default:"Unknown" }}</td>
                            <td class="text-center">{{ item.quantity }}</td>
                            <td class="text-end">{% money item.unit_price %}</td>
                            <td class="text-end fw-semibold">{% money item.total_price %}</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                    <tfoot class="table-light">
                        <tr>
                            <td colspan="3" class="text-end fw-bold">Total to Refund:</td>
                            <td class="text-end fw-bold text-danger">{% money order.final_amount %}</td>
                        </tr>
                    </tfoot>
                </table>
            </div>

            <!-- Reason Form -->
            <form method="post" id="reverseForm">
                {% csrf_token %}
                <div class="mb-4">
                    <label for="reason" class="form-label fw-semibold">
                        Reason for Reversal <span class="text-muted small">(optional)</span>
                    </label>
                    <textarea id="reason" name="reason" class="form-control" rows="3"
                              placeholder="e.g. Customer returned items, Wrong order, Pricing error..."></textarea>
                </div>

                <div class="d-flex gap-2 justify-content-end">
                    <a href="{% url 'sales:transaction_history' %}" class="btn btn-outline-secondary">
                        <i class="fas fa-times me-1"></i> Cancel
                    </a>
                    <button type="submit" class="btn btn-danger" id="confirmReverseBtn">
                        <i class="fas fa-undo-alt me-1"></i> Confirm Reversal
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
document.getElementById('reverseForm').addEventListener('submit', function(e) {
    const btn = document.getElementById('confirmReverseBtn');
    btn.disabled = true;
    btn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span> Processing...';
});
</script>
{% endblock %}