{% extends '@requisition/layouts/commonmaster.html.twig' %}

{% block stylesheets %}
{{ parent() }}

<!-- Selectize  -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.15.2/css/selectize.default.min.css" integrity="sha512-pTaEn+6gF1IeWv3W1+7X7eM60TFu/agjgoHmYhAfLEU8Phuf6JKiiE8YmsNC0aCgQv4192s4Vai8YZ6VNM6vyQ==" crossorigin="anonymous" referrerpolicy="no-referrer"/>

<style>
.placeholder {
    display: inline-block;
    height: 1em;
    background: #e0e0e0;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
}
.placeholder::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: -150px;
    height: 100%;
    width: 150px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    animation: loading 1.5s infinite;
}
@keyframes loading {
100% {
    left: 100%;
}
}

/* Variations */
.placeholder.col-6 { width: 50%; }
.placeholder.col-8 { width: 70%; }
.placeholder.col-2 { width: 20%; }
.placeholder-lg { height: 1.5em; }
.placeholder-sm { height: 0.75em; }

.dg-nocheck .datagrid-cell-check{
    display: none;
}

@keyframes flash {
0% { background-color: #FFE48D; } /* Start color (e.g., red) */
50% { background-color: #ffffff; } /* End color (e.g., white) */
100% { background-color: #FFE48D; } /* Return to start color */
}

.flash-active {
    animation: flash 1s infinite alternate; /* Apply animation */
}
.proceed-btn {
    background-color: #d48806; /* deeper amber, contrasts with yellow box */
    color: #fff !important;
    font-weight: 600;
    border: 2px solid #b36b00; /* darker outline for visibility */
    border-radius: 8px;
    padding: 6px 16px;
    margin-top: 10px;
    display: block;
    width: fit-content;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    transition: all 0.2s ease-in-out;
}
</style>

{% endblock %}

{% block content %}

<div id="receiveRequisitionBody"> 
    <div class=" col-md-12 m-auto" style="display:block" data-requisition--requisition-target="viewBranchRequisitionsDiv">

        <div id="allBranchRequisitionsTable">
            <div class="card shadow-sm rounded-4 p-4">

                <table id="branchReceivingRequisitionsView"
                    class="table table-responsive"
                    style="width:100%; height:auto; font-weight:normal; text-transform: uppercase;"
                    toolbar="#tb">

                    <thead>
                        <tr>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>

        <div id="viewRequisitionItems" class="easyui-window" title="REQUISITION" data-options="iconCls:'icon-save'" style="width:70%;max-height:91%;height:91%;overflow:auto;padding:10px" closed="true">

            <div class="d-flex justify-content-between align-items-center mb-3 border-bottom pb-2" id="windowRequisition"> </div>

            <!-- we shall revisit to add ways to edit the quantity ordered -->
            <table id="requisitionItems" 
                class="table table-responsive" 
                style="width:100%; height:auto; font-weight:normal; text-transform: uppercase;" 
                toolbar="#tb"> 

                <thead> 
                    <tr> 
                    </tr> 
                </thead> 
            </table> 
        </div>
    </div>

    <div class="modal fade" id="viewPendingRequisitionsForApproval" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header bg-primary text-white">
                    <h5 class="modal-title" id="staticBackdropLabel">Approve Requisition Items</h5>
                    <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>

                <div class="modal-body">

                    <!-- Table -->
                    <div class="table-responsive">
                        <table class="table table-bordered table-hover align-middle">
                            <thead class="thead-dark">
                                <tr>
                                    <th style="display: none">Inventory Item Unit Id</th>
                                    <th>Item</th>
                                    <th>Units</th>
                                    <th style="width: 120px;">Quantity</th>
                                </tr>
                            </thead>
                            <tbody id="requisitionsPendingApprovalTable">

                                <tr class="placeholder-row">
                                    <td><span class="placeholder w-75"></span></td>
                                    <td><span class="placeholder w-50"></span></td>
                                    <td><span class="placeholder w-25"></span></td>
                                </tr>
                                <tr class="placeholder-row">
                                    <td><span class="placeholder w-50"></span></td>
                                    <td><span class="placeholder w-75"></span></td>
                                    <td><span class="placeholder w-25"></span></td>
                                </tr>

                            </tbody>
                        </table>
                    </div>

                </div>

                <div class="modal-footer">
                    <button class="button" type="submit" data-action="requisition--requisition#batchApproveSelectedRequisitionItem"> 
                        <span class="submit">Approve Selected</span>
                        <span class="loading"><i class="fa fa-refresh"></i></span>
                        <span class="check"><i class="fa fa-check"></i></span>
                        <span class="error"><i class="fas fa-times"></i></span> 
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="receiveRequisitionsModal" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="purchaseOrderLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-centered" style="max-width: 90%">
            <div class="modal-content shadow-lg rounded-3">

                <div class="modal-header border-0 pb-0">
                    <h5 class="modal-title fw-bold" id="purchaseOrderLabel">
                        <span class="text-muted">#<span id="requisitionNumber" class="placeholder col-2"></span></span>
                    </h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>

                <!-- Body -->
                <div class="modal-body">

                    <div class="mb-4">
                        <div class="progress" style="height: 10px;">
                            <div id="requisitionProgress" class="progress-bar bg-secondary placeholder" style=""></div>
                        </div>
                        <p id="requisitionProgressText" class="mt-2 mb-0 small text-muted"><span class="placeholder col-5"></span></p>
                    </div>

                    <!-- Shipment Details -->
                    <div class="mb-4 p-3 border rounded">
                        <h6 class="fw-bold mb-3">Shipment Details</h6>
                        <div class="row">
                            <div class="col-md-3"><strong>Order Date</strong><br><span id="orderDateSpan" class="placeholder col-6"></span></div>
                            <div class="col-md-3"><strong>Tracking Number</strong><br><span id="trackingNumberSpan" class="placeholder col-8"></span></div>
                            <div class="col-md-3">
                                <strong>Enter Batch Number</strong>
                                <br><span id="batchNumberSpan" class="placeholder col-6"></span>
                            </div>
                        </div>
                    </div>

                    <!-- Products -->
                    <div class="mb-4 p-3 border rounded">
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <h6 class="fw-bold mb-0">Products</h6>
                            <!-- <button type="button" class="btn btn-primary btn-sm" data-action="inventory--purchaseorder#batchReceivePoItems"> -->
                            <!--     Receive All Items -->
                            <!-- </button> -->
                        </div>
                        <table class="table table-sm table-bordered align-middle" id="">
                            <thead class="table-light">
                                <tr>
                                    <th>Product</th>
                                    <th class="text-center">Unit</th>
                                    <th class="text-center">Requested</th>
                                    <th class="text-center">Received</th>
                                    <th class="text-center">Remaining</th>
                                    <th class="text-center">Cost Price</th>
                                    <th class="text-center">Selling Price</th>
                                    <th class="text-end">Assign Store</th>
                                    <th class="text-end">Status</th>
                                </tr>
                            </thead>
                            <tbody id="requisitiontemViewReceiveTable">
                                <tr>
                                    <td><span class="placeholder col-6"></span></td>
                                    <td class="text-center"><span class="placeholder col-4"></span></td>
                                    <td class="text-end"><span class="placeholder col-3"></span></td>
                                    <td class="text-center"><span class="placeholder col-2"></span></td>
                                    <td class="text-center"><span class="placeholder col-2"></span></td>
                                    <td class="text-end"><span class="placeholder col-3"></span></td>
                                    <td class="text-end"><span class="placeholder col-3"></span></td>
                                    <td class="text-end"><span class="placeholder col-3"></span></td>
                                    <td class="text-end"><span class="placeholder col-3"></span></td>
                                    <td class="text-end"><span class="placeholder col-3"></span></td>
                                </tr>
                                <tr>
                                    <td><span class="placeholder col-6"></span></td>
                                    <td class="text-center"><span class="placeholder col-4"></span></td>
                                    <td class="text-end"><span class="placeholder col-3"></span></td>
                                    <td class="text-center"><span class="placeholder col-2"></span></td>
                                    <td class="text-center"><span class="placeholder col-2"></span></td>
                                    <td class="text-end"><span class="placeholder col-3"></span></td>
                                    <td class="text-end"><span class="placeholder col-3"></span></td>
                                    <td class="text-end"><span class="placeholder col-3"></span></td>
                                    <td class="text-end"><span class="placeholder col-3"></span></td>
                                    <td class="text-end"><span class="placeholder col-3"></span></td>
                                </tr>
                                <tr>
                                <td><span class="placeholder col-6"></span></td>
                                <td class="text-center"><span class="placeholder col-4"></span></td>
                                <td class="text-end"><span class="placeholder col-3"></span></td>
                                <td class="text-center"><span class="placeholder col-2"></span></td>
                                <td class="text-center"><span class="placeholder col-2"></span></td>
                                <td class="text-end"><span class="placeholder col-3"></span></td>
                                <td class="text-end"><span class="placeholder col-3"></span></td>
                                <td class="text-end"><span class="placeholder col-3"></span></td>
                                <td class="text-end"><span class="placeholder col-3"></span></td>
                                <td class="text-end"><span class="placeholder col-3"></span></td>
                            </tr>
                            </tbody>
                        </table>
                    </div>

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

{% endblock %}

{% block javascripts %}
{{ parent() }}

<!-- selectize -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.15.2/js/selectize.min.js" integrity="sha512-IOebNkvA/HZjMM7MxL0NYeLYEalloZ8ckak+NDtOViP7oiYzG5vn6WVXyrJDiJPhl4yRdmNAG49iuLmhkUdVsQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script>

function cacheModal(modal){

    var originalModal = modal.clone()

    modal.on('hidden.bs.modal', function () {
        modal.remove();
        let newModal = originalModal.clone()
        $('#receiveRequisitionBody').append(newModal); 
    });
}

$(document).on('focus', '.perItemSellingPrice', function(){
    let textValue = parseFloat($(this).text().split(' ')[1])
    $(this).text(textValue)
})

$(document).on('blur', '.perItemSellingPrice', function(){
    let textValue = $(this).text()
    $(this).attr('data-selling_price', textValue); 
    $(this).data('selling_price', textValue);   
    $(this).text('Ksh. ' + textValue)
})

$(document).on('input', '.receivedItemsInput', function() {
    let row   = $(this).closest('tr');         
    let received = parseInt(row.find('.receivedItemsInput').text(), 10) || 0;
    let requested = parseInt(row.find('.requestedQuantity').text(), 10) || 0;

    let remaining = requested - received;

    if (remaining < 0) {
        remaining = 0
    }

    row.find('.remainingQuantity').text(remaining);
})

$(document).ready(function(){

    $('#branchReceivingRequisitionsView').datagrid({
        url: '/profile/view/all/branch/requisitions/',
        method: 'GET',
        singleSelect: false,
        pagination: true,
        fitColumns: true,
        collapsible: true,
        showFooter: true,
        rownumbers: true,
        pageSize: 20,
        loadMsg: 'Loading Branch Requisitions',
        onLoadSuccess: function(){
            $('#cardBlurred').removeClass('loader-active')
        },
        columns: [[
            {
                field: 'req_number', title: 'Requisition Number', width: 30, editor:'text',
                formatter: (v, r) => r.req_number
            },
            {           
                field: 'type', title: 'Type', width: 30, editor:'text', align: 'center',
                formatter: (v, r) => {
                    if(r.is_purchase == true){
                        return 'Purchase Requisition'
                    }else if(r.is_local == true){
                        return 'Local Requisition'
                    }
                }
            },
            {           
                field: 'status', title: 'Status', width: 15, editor:'text', align: 'center',
                formatter: (v, r) => {
                    if (r.is_dispatching) {
                        return '<i class="fa fa-truck"></i> Dispatching';
                    } else if (r.is_dispatched_fully) {
                        return '<i class="fa fa-check"></i> Dispatched';
                    } else {
                        return '<i class="fa fa-clock"></i> Not Dispatched';
                    }
                },
                styler: (v, r) => {
                    if (r.is_dispatching) {
                        return 'background-color:#fff3cd; color:#856404;'; // light yellow
                    } else if (r.is_dispatched_fully) {
                        return 'background-color:#d4edda; color:#155724;'; // light green
                    } else {
                        return 'background-color:#f8d7da; color:#721c24;'; // light red
                    }
                }
            },
            {           
                field: 'order_date', title: 'Date Created', width: 30, editor:'text',
                formatter: (v, r) => r.order_date
            },
            {           
                field: 'action', title: 'Action', width: 30,
                formatter: (v, r) => {
                    return '<a href="javascript:void(0)" class="" data-action="requisition--requisition#viewReceivingRequisitionItems">View Details</a> ';
                }
            },
        ]],
    }).datagrid('enableFilter', [ ]);
})

</script>

{% endblock %}