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

{% block content %}

<style>
    /* =========================================================
       MATERIAL TRANSACTION - GREY SCM THEME
       ========================================================= */
    .mt-page {
        background: #f1f3f5;
        padding: 18px;
        border-radius: 10px;
    }

    .mt-page h3 {
        color: #343a40;
        font-weight: 600;
    }

    .mt-page .card {
        border: 1px solid #d5dbe0;
        border-radius: 8px;
        overflow: hidden;
        background: #ffffff;
    }

    .mt-page .card-header {
        background: #5b6875 !important;
        color: #ffffff !important;
        border-bottom: 0;
        font-weight: 600;
    }

    .mt-page .form-control,
    .mt-page .form-select {
        border-color: #cbd1d6;
        background-color: #fff;
    }

    .mt-page .form-control:focus,
    .mt-page .form-select:focus {
        border-color: #7a8793;
        box-shadow: 0 0 0 .15rem rgba(91, 104, 117, .15);
    }

    .mt-page .btn-primary {
        background-color: #5b6875;
        border-color: #5b6875;
    }

    .mt-page .btn-primary:hover {
        background-color: #4f5b66;
        border-color: #4f5b66;
    }

    .mt-page .btn-secondary {
        background-color: #6c757d;
        border-color: #6c757d;
    }

    .mt-page .table {
        margin-bottom: 0;
    }

    .mt-page .table thead th {
        background: #5b6875 !important;
        color: #ffffff !important;
        border-color: #697784;
        font-weight: 600;
        vertical-align: middle;
    }

    .mt-page .table tbody td {
        border-color: #d5dbe0;
    }

    .mt-page .table tbody tr:hover {
        background-color: #f1f3f5;
    }

    .mt-page .text-muted {
        color: #6c757d !important;
    }

    .mt-page .btn-light {
        border-color: #d5dbe0;
    }

    .mt-page .section-note {
        color: #6c757d;
    }
</style>

<div class="mt-page">

<div class="d-flex justify-content-between align-items-center mb-3">
    <div>
        <h3 class="mb-0">New Material Transaction</h3>
        <div class="text-muted small">Warehouse Material Transaction Form</div>
    </div>

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

<form method="post">
{% csrf_token %}

<div class="card shadow-sm mb-3">
    <div class="card-header bg-dark text-white">
        Transaction Information
    </div>

    <div class="card-body">
        <div class="row g-3">

            <div class="col-md-4">
                <label class="form-label fw-semibold">Transaction Type</label>
                <select name="mtf_type"
                        class="form-select"
                        onchange="changeType(this.value)">
                    {% for item in transaction_types %}
                    <option value="{{ item }}"
                        {% if item == mtf_type %}selected{% endif %}>
                        {{ item }}
                    </option>
                    {% endfor %}
                </select>
            </div>

            <div class="col-md-4">
                <label class="form-label fw-semibold">Date</label>
                <input type="date"
                       name="mtf_date"
                       value="{{ mtf_date|date:'Y-m-d' }}"
                       class="form-control"
                       readonly>
            </div>

            <div class="col-md-4">
                <label class="form-label fw-semibold">Document No.</label>
                <input type="text"
                       value="{{ mtf_no }}"
                       class="form-control"
                       readonly>
            </div>

        </div>
    </div>
</div>

<div class="card shadow-sm mb-3">
    <div class="card-header bg-dark text-white">
        Material Entry
    </div>

    <div class="card-body">

        <div class="row g-3">

            <div class="col-md-7">
                <label class="form-label fw-semibold">
                    KIMAP
                </label>

                <select name="kimap"
                        class="form-select"
                        onchange="loadKimap(this)">
                    <option value="">-- Select KIMAP --</option>

                    {% for item in kimap_items %}
                    <option value="{{ item.kimap }}"
                            data-name="{{ item.name|escape }}"
                            data-uom="{{ item.uom|escape }}"
                            data-location="{{ item.location|escape }}"
                            {% if item.kimap|stringformat:"s" == selected_kimap|stringformat:"s" %}selected{% endif %}>
                        {{ item.kimap }} - {{ item.name }}
                    </option>
                    {% endfor %}
                </select>
            </div>

            <div class="col-md-5">
                <label class="form-label fw-semibold">Location</label>
                <input id="location"
                       type="text"
                       class="form-control"
                       value="{{ selected_item.location|default:'' }}"
                       readonly>
            </div>

            <div class="col-md-7">
                <label class="form-label fw-semibold">Description</label>
                <input id="description"
                       type="text"
                       class="form-control"
                       value="{{ selected_item.name|default:'' }}"
                       readonly>
            </div>

            <div class="col-md-2">
                <label class="form-label fw-semibold">Quantity</label>
                <input type="number"
                       name="qty"
                       min="1"
                       step="1"
                       class="form-control"
                       value="1"
                       required>
            </div>

            <div class="col-md-1">
                <label class="form-label fw-semibold">UOM</label>
                <input id="uom"
                       type="text"
                       class="form-control"
                       value="{{ selected_item.uom|default:'' }}"
                       readonly>
            </div>

            <div class="col-md-2">
                <label class="form-label fw-semibold">Part No.</label>
                <input type="text"
                       name="part_no"
                       class="form-control">
            </div>

        </div>

    </div>
</div>

<div class="card shadow-sm mb-3">
    <div class="card-header bg-dark text-white">
        Material Conditions
    </div>

    <div class="card-body">

        <div class="row">
            <div class="col-md-6">
                <div class="form-check mb-2">
                    <input class="form-check-input"
                           type="checkbox"
                           name="complete_qty"
                           id="complete_qty">
                    <label class="form-check-label" for="complete_qty">
                        Complete Quantity
                    </label>
                </div>

                <div class="form-check mb-2">
                    <input class="form-check-input"
                           type="checkbox"
                           name="good_packaging"
                           id="good_packaging">
                    <label class="form-check-label" for="good_packaging">
                        Good Packaging
                    </label>
                </div>
            </div>

            <div class="col-md-6">
                <div class="form-check mb-2">
                    <input class="form-check-input"
                           type="checkbox"
                           name="check_condition"
                           id="check_condition">
                    <label class="form-check-label" for="check_condition">
                        Check Conditions Material by User
                    </label>
                </div>

                <div class="form-check mb-2">
                    <input class="form-check-input"
                           type="checkbox"
                           name="check_part_number"
                           id="check_part_number">
                    <label class="form-check-label" for="check_part_number">
                        Check Part Number / Serial Number / Name Plate by User
                    </label>
                </div>
            </div>
        </div>

        <div class="mt-3">
            <label class="form-label fw-semibold">Note</label>
            <textarea name="note"
                      class="form-control"
                      rows="3"></textarea>
        </div>

    </div>
</div>

<div class="card shadow-sm mb-3">
    <div class="card-header bg-dark text-white">
        Warehouse Transaction Approval
    </div>

    <div class="card-body">
        <div class="row g-3">

            <div class="col-md-4">
                <label class="form-label fw-semibold">
                    (1) Vendor Representative
                </label>
                <input type="text"
                       name="vendor_representative"
                       class="form-control">
            </div>

            <div class="col-md-4">
                <label class="form-label fw-semibold">
                    (2) Warehouse Staff
                </label>
                <input type="text"
                       name="warehouse_staff"
                       class="form-control">
            </div>

            <div class="col-md-4">
                <label class="form-label fw-semibold">
                    (3) Warehouse Team Lead
                </label>
                <input type="text"
                       name="warehouse_lead"
                       class="form-control"
                       value="{{ warehouse_lead }}">
            </div>

        </div>

        <div class="mt-3 small text-muted">
            Vendor Representative menyetujui semua informasi yang tertuang
            dalam Transaction Materials Form ini.
        </div>
    </div>
</div>

<div class="d-flex justify-content-between mb-3">
    <a href="{% url 'material_transaction' %}"
       class="btn btn-secondary">
        Cancel
    </a>

    <button type="submit"
            name="action"
            value="save"
            class="btn btn-primary">
        <i class="bi bi-save"></i>
        Save Material
    </button>
</div>

</form>

<div class="card shadow-sm">
    <div class="card-header bg-dark text-white d-flex justify-content-between">
        <span>Material List - {{ mtf_no }}</span>

        {% if rows %}
        <a href="{% url 'material_transaction_pdf' mtf_no %}"
           target="_blank"
           class="btn btn-sm btn-light">
            <i class="bi bi-printer"></i>
            Print
        </a>
        {% endif %}
    </div>

    <div class="card-body p-0">
        <form method="post">
        {% csrf_token %}

        <input type="hidden" name="action" value="delete">

        <div class="table-responsive">
            <table class="table table-bordered table-hover table-sm mb-0 align-middle">
                <thead class="table-light">
                    <tr>
                        <th width="45" class="text-center">No</th>
                        <th width="55" class="text-center">Select</th>
                        <th>KIMAP</th>
                        <th>Description</th>
                        <th>Location</th>
                        <th>Part No.</th>
                        <th width="80">Qty</th>
                        <th width="70">UOM</th>
                    </tr>
                </thead>

                <tbody>
                    {% for row in rows %}
                    <tr>
                        <td class="text-center">{{ forloop.counter }}</td>

                        <td class="text-center">
                            <input type="checkbox"
                                   name="selected_ids"
                                   value="{{ row.id }}">
                        </td>

                        <td>{{ row.kimap }}</td>
                        <td>{{ row.description }}</td>
                        <td>{{ row.location }}</td>
                        <td>{{ row.part_no }}</td>
                        <td class="text-end">{{ row.qty }}</td>
                        <td>{{ row.uom }}</td>
                    </tr>
                    {% empty %}
                    <tr>
                        <td colspan="8"
                            class="text-center text-muted py-4">
                            No material has been entered.
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>

        {% if rows %}
        <div class="p-2 text-end">
            <button type="submit"
                    class="btn btn-danger btn-sm"
                    onclick="return confirm('Delete selected material?');">
                <i class="bi bi-trash"></i>
                Delete Selected
            </button>
        </div>
        {% endif %}

        </form>
    </div>
</div>

<script>
function loadKimap(select) {
    const option = select.options[select.selectedIndex];

    document.getElementById("description").value =
        option.dataset.name || "";

    document.getElementById("uom").value =
        option.dataset.uom || "";

    document.getElementById("location").value =
        option.dataset.location || "";
}

function changeType(value) {
    window.location.href =
        "{% url 'material_transaction_new' %}?mtf_type=" +
        encodeURIComponent(value);
}

document.addEventListener("DOMContentLoaded", function () {
    const select = document.querySelector('select[name="kimap"]');
    if (select) {
        loadKimap(select);
    }
});
</script>

</div>

{% endblock %}