{% extends 'base.html' %}

{% block title %}Goods Receipt GRN-{{ goodsreceipt.grn_number }}{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="d-sm-flex align-items-center justify-content-between mb-4">
        <h1 class="h3 mb-0 text-gray-800">
            Goods Receipt: GRN-{{ goodsreceipt.grn_number }}
        </h1>
        <div class="btn-group">
            <a href="{% url 'purchases:purchase_detail' goodsreceipt.purchase_order.pk %}" class="btn btn-secondary">
                <i class="fas fa-arrow-left"></i> Back to PO-{{ goodsreceipt.purchase_order.po_number }}
            </a>
            <a href="{% url 'purchases:goods_receipt_print' goodsreceipt.pk %}" target="_blank" class="btn btn-info">
                <i class="fas fa-print"></i> Print
            </a>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-8">
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">Receipt Details</h6>
                </div>
                <div class="card-body">
                    <div class="row mb-4">
                        <div class="col-md-6">
                            <h6>Purchase Order</h6>
                            <p class="mb-1"><strong>PO Number:</strong> PO-{{ goodsreceipt.purchase_order.po_number }}</p>
                            <p class="mb-1"><strong>Supplier:</strong> {{ goodsreceipt.purchase_order.supplier.name }}</p>
                            <p class="mb-1"><strong>Order Date:</strong> {{ goodsreceipt.purchase_order.order_date|date:"M d, Y" }}</p>
                        </div>
                        <div class="col-md-6 text-md-right">
                            <h6>Receipt Information</h6>
                            <p class="mb-1"><strong>GRN Number:</strong> GRN-{{ goodsreceipt.grn_number }}</p>
                            <p class="mb-1"><strong>Received Date:</strong> {{ goodsreceipt.received_date|date:"M d, Y" }}</p>
                            <p class="mb-1"><strong>Received By:</strong> {{ goodsreceipt.received_by.get_full_name|default:goodsreceipt.received_by.username }}</p>
                        </div>
                    </div>

                    <div class="table-responsive">
                        <table class="table table-bordered">
                            <thead class="thead-light">
                                <tr>
                                    <th>#</th>
                                    <th>Product</th>
                                    <th class="text-right">Received Qty</th>
                                    <th>Batch/Lot</th>
                                    <th>Expiry Date</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for item in goodsreceipt.items.all %}
                                <tr>
                                    <td>{{ forloop.counter }}</td>
                                    <td>{{ item.purchase_order_item.product.name }}</td>
                                    <td class="text-right">
                                        {{ item.quantity_received }} 
                                        <small class="text-muted">
                                            (of {{ item.purchase_order_item.quantity }} {{ item.purchase_order_item.product.unit|default:"" }})
                                        </small>
                                    </td>
                                    <td>{{ item.batch_number|default:"-" }}</td>
                                    <td>{{ item.expiry_date|date:"M d, Y"|default:"-" }}</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>

                    {% if goodsreceipt.notes %}
                    <div class="mt-4">
                        <h6>Notes</h6>
                        <p class="text-muted">{{ goodsreceipt.notes|linebreaksbr }}</p>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>

        <div class="col-lg-4">
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">Purchase Order Summary</h6>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <h6>Order Status</h6>
                        <div class="progress">
                            {% with total=goodsreceipt.purchase_order.items.count %}
                            {% with received=goodsreceipt.purchase_order.fully_received_items.count %}
                            {% widthratio received total 100 as progress %}
                            <div class="progress-bar bg-success" role="progressbar" style="width: {{ progress }}%" 
                                 aria-valuenow="{{ progress }}" aria-valuemin="0" aria-valuemax="100">
                                {{ progress }}%
                            </div>
                            {% endwith %}
                            {% endwith %}
                        </div>
                        <small class="text-muted">
                            {{ goodsreceipt.purchase_order.fully_received_items.count }} of {{ goodsreceipt.purchase_order.items.count }} items fully received
                        </small>
                    </div>
                    
                    <div class="mt-4">
                        <h6>Order Totals</h6>
                        <table class="table table-sm">
                            <tr>
                                <td>Ordered Total:</td>
                                <td class="text-right">${{ goodsreceipt.purchase_order.total_price|floatformat:2 }}</td>
                            </tr>
                            <tr>
                                <td>Received to Date:</td>
                                <td class="text-right">${{ goodsreceipt.purchase_order.received_value|floatformat:2 }}</td>
                            </tr>
                            <tr>
                                <td>Remaining:</td>
                                <td class="text-right">${{ goodsreceipt.purchase_order.remaining_value|floatformat:2 }}</td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>

            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">Activity Log</h6>
                </div>
                <div class="card-body">
                    <ul class="list-unstyled">
                        <li class="mb-3">
                            <div class="d-flex justify-content-between">
                                <strong>Created</strong>
                                <span class="text-muted">{{ goodsreceipt.created_at|timesince }} ago</span>
                            </div>
                            <div>By {{ goodsreceipt.received_by.get_full_name|default:goodsreceipt.received_by.username }}</div>
                        </li>
                        {% if goodsreceipt.updated_at %}
                        <li class="mb-3">
                            <div class="d-flex justify-content-between">
                                <strong>Last Updated</strong>
                                <span class="text-muted">{{ goodsreceipt.updated_at|timesince }} ago</span>
                            </div>
                        </li>
                        {% endif %}
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}