{% extends "pos/base.html" %}

{% block title %}Sale Approval Preview{% endblock %}
{% block heading %}Sale Approval Preview{% endblock %}

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

    <div class="card mb-3">
        <div class="card-body d-flex justify-content-between align-items-center">
            <div>
                <h3 class="mb-1">Sale Approval Preview</h3>
                <div class="text-muted">
                    This is dry run only. No stock, customer, bank or payment has been updated.
                </div>
            </div>

            <div>
                <form method="post"
                      action="{% url 'pos_api_v2:offline:approvals:sale_approve_preview_pdf' %}"
                      target="_blank"
                      style="display:inline-block; margin-right:10px;">
                    {% csrf_token %}
                    <input type="hidden" name="preview_token" value="{{ preview_token }}">

                    <button type="submit" class="btn btn-danger btn-lg">
                        Save Summary as PDF
                    </button>
                </form>
            <a href="{% url 'pos_api_v2:offline:approvals:sale_approval_list' %}"
               class="btn btn-secondary">
                Back
            </a>
            </div>
        </div>
    </div>

    <div class="row mb-3">
        <div class="col-md-3">
            <div class="card bg-dark text-white">
                <div class="card-body">
                    <small>TOTAL SELECTED</small>
                    <h3>{{ preview.total }}</h3>
                </div>
            </div>
        </div>

        <div class="col-md-3">
            <div class="card bg-dark text-white">
                <div class="card-body">
                    <small>FULL APPROVAL</small>
                    <h3>{{ preview.full_count }}</h3>
                </div>
            </div>
        </div>

        <div class="col-md-3">
            <div class="card bg-dark text-white">
                <div class="card-body">
                    <small>PARTIAL</small>
                    <h3>{{ preview.partial_count }}</h3>
                </div>
            </div>
        </div>

        <div class="col-md-3">
            <div class="card bg-dark text-white">
                <div class="card-body">
                    <small>BLOCKED</small>
                    <h3>{{ preview.blocked_count }}</h3>
                </div>
            </div>
        </div>
    </div>

    {% for inv in preview.invoices %}
        <div class="card mb-3">
            <div class="card-header">
                <strong>Staging Invoice #{{ inv.staging_invoice_no }}</strong>

                {% if inv.ok %}
                    <span class="badge badge-success">OK</span>
                {% else %}
                    <span class="badge badge-danger">Has Issues</span>
                {% endif %}

                <div class="small text-muted">
                    {{ inv.message }}
                </div>
            </div>

            <div class="card-body">
                <table class="table table-bordered table-sm">
                    <thead>
                        <tr>
                            <th>Product</th>
                            <th>Requested</th>
                            <th>Approved</th>
                            <th>Skipped</th>
                            <th>Stock Plan</th>
                            <th>Issues</th>
                        </tr>
                    </thead>

                    <tbody>
                        {% for line in inv.lines %}
                            <tr>
                                <td>
                                    <strong>{{ line.product_name }}</strong><br>
                                    <small>Code: {{ line.product_code }}</small>
                                </td>

                                <td>
                                    Qty: {{ line.requested_qty }}<br>
                                    Bonus: {{ line.requested_bonus }}
                                </td>

                                <td>
                                    Qty: {{ line.approved_qty }}<br>
                                    Bonus: {{ line.approved_bonus }}
                                </td>

                                <td>
                                    Qty: {{ line.short_qty }}<br>
                                    Bonus: {{ line.short_bonus }}
                                </td>

                                <td>
                                    {% if line.allocations %}
                                        <table class="table table-sm mb-0">
                                            <thead>
                                                <tr>
                                                    <th>Source</th>
                                                    <th>Variant</th>
                                                    <th>Stock ID</th>
                                                    <th>Variant ID</th>
                                                    <th>Qty</th>
                                                    <th>Bonus</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                {% for a in line.allocations %}
                                                    <tr>
                                                        <td>
                                                            {% if a.variant_is_default %}
                                                                Default Stock
                                                            {% else %}
                                                                Variant / Batch
                                                            {% endif %}
                                                        </td>
                                                        <td>
                                                             {% if a.variant_is_default %}
                                                                Default Variant
                                                            {% else %}
                                                                {{ a.variant_display }}
                                                            {% endif %}
                                                        </td>
                                                        <td>{{ a.stock_id }}</td>
                                                        <td>{{ a.variant_id }}</td>
                                                        <td>{{ a.qty_take }}</td>
                                                        <td>{{ a.bonus_take }}</td>
                                                    </tr>
                                                {% endfor %}
                                            </tbody>
                                        </table>
                                    {% else %}
                                        <span class="text-muted">No allocation</span>
                                    {% endif %}
                                </td>

                                <td>
                                    {% if line.issues %}
                                        {% for issue in line.issues %}
                                            <div class="text-danger">
                                                {{ issue.message }}
                                            </div>
                                        {% endfor %}
                                    {% else %}
                                        <span class="text-success">No issue</span>
                                    {% endif %}
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    {% endfor %}

    <div class="card">
        <div class="card-body d-flex justify-content-between align-items-center">
            <div>
                <strong>Final Approval</strong>
                <div class="text-muted">
                    Click this button only after checking stock allocation plan.
                </div>
            </div>

            <form method="post"
                  action="{% url 'pos_api_v2:offline:approvals:sale_approve' %}">
                {% csrf_token %}
                <input type="hidden" name="preview_token" value="{{ preview_token }}">

                <button type="submit"
                        class="btn btn-success btn-lg"
                        {% if not preview.ok %}disabled{% endif %}>
                    Final Approve Now
                </button>
            </form>
        </div>
    </div>

</div>
{% endblock %}