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

{% block content %}

<div class="container-fluid">

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

        <div class="d-flex gap-2">
            <a href="{% url 'create_pr' %}" class="btn btn-secondary">
                <i class="bi bi-plus-lg"></i>
                Create PR
            </a>

            <form method="POST"
                action="{% url 'reset_pr' %}"
                class="d-inline"
                onsubmit="return confirm('WARNING: This will delete ALL PR data and PR details. Continue?');">
                {% csrf_token %}
                <button type="submit" class="btn btn-danger">
                    <i class="bi bi-trash"></i>
                    Reset PR
                </button>
            </form>
        </div>
    </div>

    <!-- TABLE CONTAINER -->

    <div class="card table-container">

        <div class="card-body">

            <div class="table-responsive">

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

                    <thead>

                        <tr>
                            <th>PR No</th>
                            <th>PR Date</th>
                            <th>Title</th>
                            <th>Requester</th>
                            <th>Department</th>
                            <th>Required Date</th>
                            <th>Priority</th>
                            <th>Status</th>
                            <th>Action</th>
                        </tr>

                    </thead>


                    <tbody>

                        {% for item in prs %}

                        <tr>

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

                            <td>
                                {{ item.pr_date|date:"d-m-Y" }}
                            </td>

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

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

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

                            <td>
                                {% if item.required_date %}
                                    {{ item.required_date|date:"d-m-Y" }}
                                {% endif %}
                            </td>

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

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


                            <!-- ACTION -->

                            <td class="text-center">

                                <!-- PRINT PDF -->

                                <a href="{% url 'pr_print' item.id %}"
                                   class="btn btn-secondary btn-sm action-btn"
                                   title="Print PDF"
                                   target="_blank">

                                    <i class="bi bi-printer"></i>

                                </a>

                                {% if item.status != 'DRAFT' %}
                                <!-- VIEW: tampil untuk PR yang sudah disubmit -->
                                <a href="{% url 'pr_view' item.id %}"
                                   class="btn btn-secondary btn-sm action-btn"
                                   title="View PR">
                                    <i class="bi bi-eye"></i>
                                </a>
                                {% endif %}

                                {% if item.status == 'DRAFT' %}


                                <!-- EDIT -->

                                <a href="{% url 'pr_edit' item.id %}"
                                   class="btn btn-secondary btn-sm action-btn"
                                   title="Edit">

                                    <i class="bi bi-pencil"></i>

                                </a>


                                <!-- DELETE -->

                                <form method="POST"
                                      action="{% url 'pr_delete' item.id %}"
                                      class="d-inline"
                                      onsubmit="return confirm('Are you sure you want to delete this PR?');">

                                    {% csrf_token %}

                                    <button type="submit"
                                            class="btn btn-danger btn-sm action-btn"
                                            title="Delete">

                                        <i class="bi bi-trash"></i>

                                    </button>

                                </form>


                                <!-- SUBMIT -->

                                <form method="POST"
                                      action="{% url 'submit_pr' item.id %}"
                                      class="d-inline">

                                    {% csrf_token %}

                                    <button type="submit"
                                            class="btn btn-secondary btn-sm action-btn"
                                            title="Submit">

                                        <i class="bi bi-send"></i>

                                    </button>

                                </form>


                                {% endif %}

                            </td>

                        </tr>


                        {% empty %}

                        <tr>

                            <td colspan="9"
                                class="text-center">

                                No Purchase Requisition 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;
}

/* =========================================
   PR TABLE
   ========================================= */

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


/* Header */

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


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

    border: none !important;
}


/* Body */

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


/* Kolom pertama tidak perlu garis kiri */

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


/* Row terakhir tidak perlu garis bawah */

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


/* Optional hover tetap subtle */

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


/* =========================================
   ACTION BUTTON
   ========================================= */

.action-btn {
    width: 38px;
    height: 36px;

    padding: 0;
    margin: 2px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    vertical-align: middle;
}


.action-btn i {
    font-size: 17px;
    line-height: 1;
}

</style>

{% endblock %}