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

{% block content %}

<div class="container-fluid">

    <!-- HEADER -->

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

        <h3>Purchase Order</h3>

    </div>


    <!-- ==================================================
         APPROVED PR - WAITING FOR PO
         ================================================== -->

    <div class="card table-container mb-4">

        <div class="card-body">

            <h5 class="mb-3">
                Approved Purchase Request
            </h5>


            <div class="table-responsive">

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

                    <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>Action</th>
                        </tr>

                    </thead>


                    <tbody>

                        {% for pr in approved_prs %}

                        <tr>

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

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

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

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

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

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

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


                            <!-- ACTION -->

                            <td class="text-center">

                                {% if pr.po_created %}

                                <span class="text-muted">
                                    PO Created
                                </span>

                                {% else %}

                                <a href="{% url 'create_po' pr.id %}" class="btn btn-secondary btn-sm action-btn"
                                    title="Create PO">

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

                                </a>

                                {% endif %}

                            </td>

                        </tr>


                        {% empty %}

                        <tr>

                            <td colspan="8" class="text-center">
                                No approved Purchase Request
                                waiting for PO.
                            </td>

                        </tr>

                        {% endfor %}

                    </tbody>

                </table>

            </div>

        </div>

    </div>


    <!-- ==================================================
         EXISTING PURCHASE ORDER
         ================================================== -->

    <div class="card table-container">

        <div class="card-body">

            <h5 class="mb-3">
                Purchase Order
            </h5>


            <div class="table-responsive">

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

                    <thead>

                        <tr>
                            <th>PO No</th>
                            <th>PO Date</th>
                            <th>Title</th>
                            <th>Vendor</th>
                            <th>Department</th>
                            <th>Delivery Date</th>
                            <th>Currency</th>
                            <th>Action</th>
                        </tr>

                    </thead>


                    <tbody>

                        {% for item in pos %}

                        <tr>

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

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

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

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

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

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

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


                            <!-- ACTION -->

                            <td class="text-center" style="white-space: nowrap;">

                                <!-- PRINT -->

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

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

                                </a> -->

                                <a href="{% url 'po_print' item.id %}" class="btn btn-secondary btn-sm" title="Print PDF"
                                    target="_blank" >
                                    <i class="bi bi-printer"></i>
                                </a>
                                <!-- <a href="{% url 'po_print' item.id %}"
                                   class="btn btn-secondary btn-sm action-btn"
                                   title="Print PDF"
                                   target="_blank">

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

                                </a> -->


                                <!-- EDIT -->

                                <a href="{% url 'po_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 'po_delete' item.id %}" class="d-inline"
                                    onsubmit="return confirm('Are you sure you want to delete PO {{ item.po_no }}?');">

                                    {% csrf_token %}

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

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

                                    </button>

                                </form>

                            </td>

                        </tr>


                        {% empty %}

                        <tr>

                            <td colspan="8" class="text-center">
                                No Purchase Order 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;
    }


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

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


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

    #approvedPrTable thead,
    #poTable thead {
        background-color: #56636f;
    }


    #approvedPrTable thead th,
    #poTable thead th {
        background-color: #56636f;
        color: #ffffff;
        font-weight: 600;

        border: none !important;
    }


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

    #approvedPrTable tbody td,
    #poTable 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 */

    #approvedPrTable tbody td:first-child,
    #poTable tbody td:first-child {
        border-left: none !important;
    }


    /* Last row */

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


    /* Hover */

    #approvedPrTable tbody tr:hover td,
    #poTable 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 %}