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

{% block content %}

<div class="container-fluid">

    <!-- HEADER -->
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h3 class="mb-0">{% if editing_gr %}Edit Goods Receipt{% else %}Create Goods Receipt{% endif %}</h3>

        <a href="{% url 'goods_received' %}"
           class="btn btn-secondary">
            <i class="bi bi-arrow-left"></i>
            Back
        </a>
    </div>


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


    <!-- SELECT PO -->
    <div class="card mb-3"
         style="border:0; background:#dee2e6;">

        <div class="card-body">

            <form method="GET">

                <div class="row">

                    <div class="col-md-8">

                        <label class="form-label fw-semibold">
                            Purchase Order
                        </label>

                        <select name="po_id"
                                class="form-select"
                                style="border:0; background:#fff;"
                                onchange="this.form.submit()">

                            <option value="">
                                -- Select Purchase Order --
                            </option>

                            {% for po in pos %}

                            <option value="{{ po.id }}"
                                {% if selected_po and selected_po.id == po.id %}
                                    selected
                                {% endif %}>
                                {{ po.po_no }} - {{ po.po_title }}
                            </option>

                            {% endfor %}

                        </select>

                    </div>

                </div>

            </form>

        </div>
    </div>


    {% if selected_po %}

    <form method="POST">

        {% csrf_token %}

        <input type="hidden" name="po_id" value="{{ selected_po.id }}">
        {% if editing_gr %}<input type="hidden" name="gr_id" value="{{ editing_gr.id }}">{% endif %}


        <!-- GR HEADER -->
        <div class="card mb-3"
             style="border:0; background:#dee2e6;">

            <div class="card-body">

                <div class="row g-3">

                    <div class="col-md-3">

                        <label class="form-label fw-semibold">
                            GR No
                        </label>

                        <input type="text"
                               name="gr_no"
                               class="form-control"
                               style="border:0; background:#fff;"
                               value="{{ next_gr_no }}"
                               readonly
                               required>

                    </div>


                    <div class="col-md-3">

                        <label class="form-label fw-semibold">
                            GR Date
                        </label>

                        <input type="date"
                               name="gr_date"
                               class="form-control"
                               style="border:0; background:#fff;"
                               value="{% if editing_gr %}{{ editing_gr.gr_date|date:'Y-m-d' }}{% else %}{% now 'Y-m-d' %}{% endif %}"
                               required>

                    </div>


                    <div class="col-md-3">

                        <label class="form-label fw-semibold">
                            Warehouse
                        </label>

                        <input type="text"
                               name="warehouse"
                               class="form-control"
                               style="border:0; background:#fff;"
                               value="{{ editing_gr.warehouse|default:'' }}"
                               required>

                    </div>


                    <div class="col-md-3">

                        <label class="form-label fw-semibold">
                            Received By
                        </label>

                        <input type="text"
                               class="form-control"
                               style="border:0; background:#fff;"
                               value="{{ request.session.full_name }}"
                               readonly>

                    </div>

                </div>


                <div class="row mt-3">

                    <div class="col-md-12">

                        <label class="form-label fw-semibold">
                            Remarks
                        </label>

                        <textarea name="remarks"
                                  class="form-control"
                                  style="border:0; background:#fff;"
                                  rows="2">{{ editing_gr.remarks|default:'' }}</textarea>

                    </div>

                </div>

            </div>
        </div>


        <!-- PO DETAILS -->
        <div class="card"
             style="border:0; background:#dee2e6;">

            <!-- DARK HEADER -->
            <div class="card-header gr-section-header">
                <i class="bi bi-box-seam me-2"></i>
                PO Details
            </div>

            <div class="card-body">

                <div class="table-responsive">

                    <table class="table align-middle mb-0"
                           id="poDetailTable">

                        <thead>
                            <tr>
                                <th>Line</th>
                                <th>KIMAP</th>
                                <th>Description</th>
                                <th class="text-end">Ordered Qty</th>
                                <th class="text-end">Received</th>
                                <th class="text-end">Remaining</th>
                                <th>Receive Qty</th>
                                <th>UOM</th>
                                <th>Location</th>
                                <th>Remarks</th>
                            </tr>
                        </thead>


                        <tbody>

                            {% for item in po_details %}

                            <tr>

                                <td>
                                    {{ item.line_no }}
                                </td>


                                <td>
                                    {{ item.kimap }}
                                </td>


                                <td>
                                    {{ item.description }}
                                </td>


                                <td class="text-end">
                                    {{ item.quantity }}
                                </td>


                                <td class="text-end">
                                    {{ item.received_total }}
                                </td>


                                <td class="text-end fw-semibold">
                                    {{ item.remaining_qty }}
                                </td>


                                <td style="min-width:130px;">

                                    {% if item.remaining_qty > 0 %}

                                    <input type="number"
                                           name="received_qty_{{ forloop.counter0 }}"
                                           class="form-control receive-qty"
                                           style="border:0; background:#fff;"
                                           min="0"
                                           max="{{ item.remaining_qty }}"
                                           step="0.0001"
                                           value="{{ item.current_gr_qty|default:0 }}">

                                    {% else %}

                                    <span class="text-success fw-semibold">
                                        Fully Received
                                    </span>

                                    {% endif %}

                                    <input type="hidden"
                                           name="po_detail_id_{{ forloop.counter0 }}"
                                           value="{{ item.id }}">

                                </td>


                                <td>
                                    {{ item.uom }}
                                </td>


                                <td>

                                    <input type="text"
                                           name="location_{{ forloop.counter0 }}"
                                           class="form-control"
                                           style="border:0; background:#fff;"
                                           value="{{ item.current_location|default:item.location }}">

                                </td>


                                <td>

                                    <input type="text"
                                           name="item_remarks_{{ forloop.counter0 }}"
                                           class="form-control"
                                           style="border:0; background:#fff;"
                                           value="{{ item.current_remarks|default:'' }}">

                                </td>

                            </tr>


                            {% empty %}

                            <tr>

                                <td colspan="10"
                                    class="text-center py-4">

                                    No PO Detail found.

                                </td>

                            </tr>

                            {% endfor %}

                        </tbody>

                    </table>

                </div>


                <input type="hidden"
                       name="item_count"
                       value="{{ po_details|length }}">


                <!-- ACTION: SAVE DRAFT OR SUBMIT TO SCM -->
                <div class="d-flex justify-content-end gap-2 mt-3">

                    <button type="submit"
                            name="action"
                            value="save"
                            class="btn btn-secondary">
                        <i class="bi bi-save"></i>
                        Save Draft
                    </button>

                    <button type="submit"
                            name="action"
                            value="submit"
                            class="btn btn-success"
                            onclick="return confirm('Submit this Goods Receipt to SCM for approval?');">
                        <i class="bi bi-send"></i>
                        Submit to SCM
                    </button>

                </div>

            </div>
        </div>

    </form>

    {% endif %}

</div>


<style>

/* =========================================================
   PO DETAILS SECTION HEADER
   ========================================================= */

.gr-section-header {
    background-color: #56636f !important;
    color: #ffffff !important;
    border: none !important;
    font-weight: 600;
    font-size: 1.05rem;
    padding: 10px 14px;
}


/* =========================================================
   PO DETAILS TABLE
   ========================================================= */

#poDetailTable {
    background-color: #ffffff;
    border: none !important;
    border-collapse: collapse !important;
}


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


#poDetailTable 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;
}


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


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


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


/* =========================================================
   RECEIVE QTY
   ========================================================= */

.receive-qty {
    min-width: 120px;
}


/* =========================================================
   FORM CONTROLS
   ========================================================= */

.form-control,
.form-select,
textarea {
    border: 0 !important;
    box-shadow: none !important;
}

</style>


{% endblock %}