{% extends 'scm/base.html' %}

{% block content %}

<div class="container-fluid">

    <div class="d-flex justify-content-between align-items-center mb-3">
        <h3>Goods Receipt</h3>
    </div>


    {% if messages %}
        {% for message in messages %}
            <div class="alert alert-{{ message.tags }}">{{ message }}</div>
        {% endfor %}
    {% endif %}

    <!-- GOODS RECEIPT WAITING FOR SCM APPROVAL -->
    {% if can_approve_gr %}
    <div class="card table-container mb-4">
        <div class="card-header gr-section-header">Goods Receipt - Pending SCM Approval</div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table align-middle" id="pendingGrTable">
                    <thead>
                        <tr>
                            <th>GR No</th>
                            <th>GR Date</th>
                            <th>PO No</th>
                            <th>Warehouse</th>
                            <th>Received By</th>
                            <th>Status</th>
                            <th class="text-center">Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for gr_item in pending_grs %}
                        <tr>
                            <td>{{ gr_item.gr_no }}</td>
                            <td>{{ gr_item.gr_date|date:"d-m-Y" }}</td>
                            <td>{{ gr_item.po.po_no }}</td>
                            <td>{{ gr_item.warehouse }}</td>
                            <td>{{ gr_item.received_by }}</td>
                            <td><span class="badge bg-warning text-dark">{{ gr_item.status }}</span></td>
                            <td class="text-center">
                                {% if can_approve_gr %}
                                <form method="POST" action="{% url 'approve_gr' gr_item.id %}" class="d-inline" onsubmit="return confirm('Approve this GR and create its journal?');">
                                    {% csrf_token %}
                                    <button type="submit" class="btn btn-success btn-sm">
                                        <i class="bi bi-check-circle"></i> Approve & Create Journal
                                    </button>
                                </form>
                                {% else %}
                                <span class="text-muted">SCM approval required</span>
                                {% endif %}
                            </td>
                        </tr>
                        {% empty %}
                        <tr><td colspan="7" class="text-center">No Goods Receipt submitted for SCM approval.</td></tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    {% endif %}

    {% if not can_approve_gr %}
    <div class="card table-container mb-4">
        <div class="card-header gr-section-header">Goods Receipt - Draft</div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table align-middle">
                    <thead><tr><th>GR No</th><th>GR Date</th><th>PO No</th><th>Warehouse</th><th>Status</th><th class="text-center">Action</th></tr></thead>
                    <tbody>
                    {% for draft in draft_grs %}
                    <tr><td>{{ draft.gr_no }}</td><td>{{ draft.gr_date|date:"d-m-Y" }}</td><td>{{ draft.po.po_no }}</td><td>{{ draft.warehouse }}</td><td>{{ draft.status }}</td><td class="text-center"><a class="btn btn-primary btn-sm" href="{% url 'create_gr' %}?gr_id={{ draft.id }}"><i class="bi bi-pencil"></i> Edit / Submit</a></td></tr>
                    {% empty %}<tr><td colspan="6" class="text-center">No draft Goods Receipt.</td></tr>{% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h5 class="mb-0">Purchase Orders Available for Receiving</h5>
    </div>

    <div class="card table-container">
        <div class="card-body">

            <div class="table-responsive">

                <table class="table align-middle" id="grTable">

                    <thead>
                        <tr>
                            <th>PO No</th>
                            <th>PO Date</th>
                            <th>Title</th>
                            <th>Vendor</th>
                            <th>Delivery Date</th>
                            <th>Status</th>
                            <th class="text-center">Action</th>
                        </tr>
                    </thead>

                    <tbody>

                        {% for item in pending_pos %}

                        <tr>
                            <td>{{ item.po.po_no }}</td>
                            <td>{{ item.po.po_date|date:"d-m-Y" }}</td>
                            <td>{{ item.po.po_title }}</td>
                            <td>{{ item.po.vendor }}</td>
                            <td>{{ item.po.delivery_date|date:"d-m-Y" }}</td>
                            <td>{{ item.receipt_status }}</td>

                            <td class="text-center">
                                <a href="{% url 'create_gr' %}?po_id={{ item.po.id }}"
                                   class="btn btn-secondary btn-sm"
                                   title="Receive">
                                    <i class="bi bi-box-arrow-in-down"></i>
                                    Receive
                                </a>
                            </td>
                        </tr>

                        {% empty %}

                        <tr>
                            <td colspan="7" class="text-center">
                                No Outstanding Purchase Order.
                            </td>
                        </tr>

                        {% endfor %}

                    </tbody>

                </table>

            </div>

        </div>
    </div>
    {% endif %}

</div>

<style>
.table-container {
    background-color: #dee2e6;
    border: none !important;
    box-shadow: none !important;
    padding: 10px;
}

#grTable {
    background-color: #ffffff;
    border: none !important;
    border-collapse: collapse !important;
    margin-bottom: 0;
}

#grTable thead {
    background-color: #56636f;
}

#grTable thead th {
    background-color: #56636f;
    color: #ffffff;
    font-weight: 600;
    border: none !important;
}

#grTable tbody td {
    background-color: #ffffff;
    border-top: none !important;
    border-right: none !important;
    border-bottom: 1px solid #eef0f2 !important;
    border-left: 1px solid #eef0f2 !important;
    vertical-align: middle;
}

#grTable tbody td:first-child {
    border-left: none !important;
}

#grTable tbody tr:last-child td {
    border-bottom: none !important;
}

#grTable tbody tr:hover td {
    background-color: #f8f9fa;
}

.gr-section-header {
    background-color: #56636f !important;
    color: #fff !important;
    border: none !important;
    font-weight: 600;
}
#pendingGrTable thead th {
    background-color: #56636f;
    color: #fff;
    border: none !important;
}
#pendingGrTable tbody td {
    background-color: #fff;
    border-bottom: 1px solid #eef0f2 !important;
    vertical-align: middle;
}

</style>

{% endblock %}