{% extends "pos/base.html" %}
{% block title %}Stock Adjustment #{{ adjustment.adjustment_no }}{% endblock title %}
{% block heading %}Stock Adjustment #{{ adjustment.adjustment_no }}{% endblock heading %}

{% block stylesheets %}
{{ block.super }}
<style>
.detail-card { margin-bottom: 1rem; }
.detail-label { font-weight: 600; color: #495057; }
.detail-value { color: #212529; }
.table-lines th { background-color: #343a40; color: #fff; }
.badge-plus { background-color: #28a745; }
.badge-minus { background-color: #dc3545; }
.stock-change { font-weight: bold; }
</style>
{% endblock %}

{% block content %}
<div class="row mb-3">
    <div class="col-12 d-flex justify-content-between">
        <div>
            <a href="{% url 'products:stock_adjustment_list' %}" class="btn btn-secondary">
                <i class="fas fa-arrow-left mr-1"></i> Back to List
            </a>
        </div>
        <div>
            <a href="{% url 'products:stock_adjustment_edit' adjustment.id %}" class="btn btn-warning">
                <i class="fas fa-edit mr-1"></i> Edit
            </a>
            <a href="{% url 'products:stock_adjustment_print' adjustment.id %}" class="btn btn-info" target="_blank">
                <i class="fas fa-print mr-1"></i> Print
            </a>
        </div>
    </div>
</div>

<!-- Header Info -->
<div class="card detail-card">
    <div class="card-body">
        <div class="row">
            <div class="col-md-3 mb-2">
                <div class="detail-label">Adjustment #</div>
                <div class="detail-value h5">{{ adjustment.adjustment_no }}</div>
            </div>
            <div class="col-md-3 mb-2">
                <div class="detail-label">Date</div>
                <div class="detail-value">{{ adjustment.adjustment_date|date:"d M Y" }}</div>
            </div>
            <div class="col-md-3 mb-2">
                <div class="detail-label">Total Items</div>
                <div class="detail-value">{{ adjustment.total_items }}</div>
            </div>
            <div class="col-md-3 mb-2">
                <div class="detail-label">Status</div>
                <div class="detail-value">
                    <span class="badge badge-success">{{ adjustment.status|title }}</span>
                </div>
            </div>
        </div>
        <div class="row mt-2">
            <div class="col-md-6 mb-2">
                <div class="detail-label">Remarks</div>
                <div class="detail-value">{{ adjustment.remarks|default:"-" }}</div>
            </div>
            <div class="col-md-3 mb-2">
                <div class="detail-label">Total Qty In</div>
                <div class="detail-value">
                    {% if adjustment.total_qty_in > 0 %}
                    <span class="badge badge-plus">+{{ adjustment.total_qty_in }}</span>
                    {% else %}-{% endif %}
                </div>
            </div>
            <div class="col-md-3 mb-2">
                <div class="detail-label">Total Qty Out</div>
                <div class="detail-value">
                    {% if adjustment.total_qty_out > 0 %}
                    <span class="badge badge-minus">-{{ adjustment.total_qty_out }}</span>
                    {% else %}-{% endif %}
                </div>
            </div>
        </div>
        <div class="row mt-2">
            <div class="col-md-6 mb-2">
                <div class="detail-label">Created By</div>
                <div class="detail-value">{{ adjustment.created_by.name|default:"-" }}</div>
            </div>
            <div class="col-md-6 mb-2">
                <div class="detail-label">Created At</div>
                <div class="detail-value">{{ adjustment.created_at|date:"d M Y H:i" }}</div>
            </div>
        </div>
    </div>
</div>

<!-- Lines Table -->
<div class="card">
    <div class="card-header bg-dark text-white">
        <strong>Line Items</strong>
    </div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-striped table-bordered mb-0">
                <thead class="table-lines">
                    <tr>
                        <th style="width:50px;">#</th>
                        <th style="width:120px;">Code</th>
                        <th>Product Name</th>
                        <th style="width:120px;">Variant</th>
                        <th class="text-center" style="width:100px;">Before</th>
                        <th class="text-center" style="width:100px;">Qty</th>
                        <th class="text-center" style="width:100px;">After</th>
                        <th class="text-right" style="width:100px;">P.Price</th>
                        <th class="text-right" style="width:100px;">S.Price</th>
                        <th>Notes</th>
                    </tr>
                </thead>
                <tbody>
                    {% for line in adjustment.lines.all %}
                    <tr>
                        <td class="text-center">{{ line.line_no }}</td>
                        <td><strong>{{ line.product.product_code }}</strong></td>
                        <td>{{ line.product.name }}</td>
                        <td>
                            {% if line.variant and line.variant.spec_a %}
                                {{ line.variant.spec_a.name }}
                            {% else %}
                                -
                            {% endif %}
                        </td>
                        <td class="text-center">{{ line.stock_before|floatformat:2 }}</td>
                        <td class="text-center stock-change">
                            {% if line.qty >= 0 %}
                            <span class="text-success">+{{ line.qty|floatformat:2 }}</span>
                            {% else %}
                            <span class="text-danger">{{ line.qty|floatformat:2 }}</span>
                            {% endif %}
                        </td>
                        <td class="text-center">{{ line.stock_after|floatformat:2 }}</td>
                        <td class="text-right">{{ line.purchase_price|floatformat:2 }}</td>
                        <td class="text-right">{{ line.sale_price|floatformat:2 }}</td>
                        <td>{{ line.line_remarks|default:"-" }}</td>
                    </tr>
                    {% empty %}
                    <tr>
                        <td colspan="10" class="text-center text-muted py-4">No line items</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>
{% endblock content %}