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

{% block content %}

<div class="container-fluid">

    <!-- HEADER -->

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

        <h3>Material Transaction</h3>

        <a href="{% url 'material_transaction_new' %}"
           class="btn btn-secondary">

            <i class="bi bi-plus-lg"></i>
            New Transaction

        </a>

    </div>


    <!-- TABLE CONTAINER -->

    <div class="card table-container">

        <div class="card-body">

            <div class="table-responsive">

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

                    <thead>

                        <tr>
                            <th>Date</th>
                            <th>Transaction No</th>
                            <th>Transaction Type</th>
                            <th>KIMAP</th>
                            <th>Description</th>
                            <th>Quantity</th>
                            <th>UOM</th>
                            <th>Location</th>
                            <th>Reference</th>
                            <th>Status</th>
                        </tr>

                    </thead>


                    <tbody>

                        {% for row in documents %}
                        <tr>
                            <td>{{ row.mtf_date|date:"d-m-Y" }}</td>
                            <td>{{ row.mtf_no }}</td>
                            <td>{{ row.mtf_type }}</td>
                            <td>{{ row.kimap }}</td>
                            <td>{{ row.description }}</td>
                            <td>{{ row.quantity }}</td>
                            <td>{{ row.uom }}</td>
                            <td>{{ row.location }}</td>
                            <td>{{ row.reference|default:"-" }}</td>
                            <td>{{ row.status }}</td>
                        </tr>
                        {% empty %}
                        <tr>
                            <td colspan="10" class="text-center">
                                No Material Transaction found.
                            </td>
                        </tr>
                        {% endfor %}

                    </tbody>

                </table>

            </div>

        </div>

    </div>

</div>


<style>

/* =========================================
   PETROGL TABLE CONTAINER
   ========================================= */

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


/* =========================================
   MATERIAL TRANSACTION TABLE
   ========================================= */

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


/* =========================================
   HEADER
   ========================================= */

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


#materialTransactionTable thead th {
    background-color: #56636f;
    color: #ffffff;
    font-weight: 600;

    border: none !important;
}


/* =========================================
   BODY
   ========================================= */

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


/* First column */

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


/* Last row */

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


/* Hover */

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

</style>

{% endblock %}