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

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

<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 {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
}

@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;
}
.proceed-btn:hover {
    background-color: #b36b00 !important; /* darker hover */
    border-color: #804d00;
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
}
</style>

<!-- 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"/>

{% endblock %}

{% block content %}

<div data-controller="inventory--purchaseorder" data-inventory--purchaseorder-loader-gif-value="{{ asset('bundles/inventory/images/loader/loader.gif') }}">

    <div class="row">
        <div class="col-md-11 m-auto">
            <div class="card">
                <div class="card-header" style="background: #fff">
                    <div class="card-title">
                        <h2><i class="fa-solid fa-file-invoice"></i> Create Purchase Orders</h2>
                    </div>
                </div>
                <div class="card-body">
                    <div class="row align-items-end">
                        <!-- Order Date -->
                        <div class="col-md-2">
                            <div class="form-group mb-3">
                                <label for="order_date">Order Date</label>
                                <input type="text" 
                                    class="form-control purchase_order_dates" id="order_date" name="order_date" placeholder="Select order date" data-inventory--purchaseorder-target="orderDate">
                            </div>
                        </div>

                        <!-- Expected Date -->
                        <div class="col-md-2">
                            <div class="form-group mb-3">
                                <label for="expected_date">Expected Date</label>
                                <input type="text" 
                                    class="form-control purchase_order_dates" id="expected_date" name="expected_date" placeholder="Select expected date" data-inventory--purchaseorder-target="expectedDate">
                            </div>
                        </div>

                        <!-- Supplier -->
                        <div class="col-md-3">
                            <div class="form-group mb-3">
                                <label for="supplierLookup">Supplier</label>
                                <select id="supplierLookup" name="supplierLookup" class="form-select inventory_items_lookup" data-inventory--purchaseorder-target="supplierId">>
                                    <option value="">Select Item</option>
                                </select>
                            </div>
                        </div>

                        <!-- Create PO Button -->
                        <div class="col-md-2 d-flex justify-content-end mb-3">
                            <button class="button" type="submit" id="createNewPurchaseOrderBtn"
                                data-action="inventory--purchaseorder#createNewPurchaseOrder" data-inventory--purchaseorder-target="createPurchaseOrderBtn">
                                <span class="submit">Create Purchase Order</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 data-inventory--purchaseorder-target="selectedItemsTableDiv" style="display: none">
                        <table class="table table-bordered table-striped" data-inventory--purchaseorder-target="selectedItemsTable" id="selectedItemsTable">
                            <thead class="thead-dark">
                                <tr>
                                    <th>Item</th>
                                    <th>Quantity</th>
                                    <th>Units</th>
                                    <th>Available?</th>
                                    <th>Purchase Price</th>
                                    <th>Selling Price</th>
                                    <th style="display: none">Inventory Item Unit Id</th>
                                    <th style="display: none">Requisition Batch Ids</th>
                                    <th style=""></th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>

                        <div class="card mt-3">
                            <div class="card-body p-2">
                                <div class="d-flex justify-content-between">
                                    <span class="text-muted">Subtotal</span>
                                    <span data-inventory--purchaseorder="subtotalAmountSpan" id="subtotalAmountSpan">$0.00</span>
                                </div>
                            </div>
                        </div>
                    </div>

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

    <div class="row mt-2">
        <div class="col-md-11 m-auto">
            <div class="card shadow-sm rounded-4 p-4">

                <!-- Tabs nav -->
                <ul class="nav nav-tabs" id="myTab" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active" id="unprocessedRequisitionsTab" data-toggle="tab" data-target="#unprocessedRequisitions" type="button" role="tab" aria-controls="unprocessedRequisitions" aria-selected="true">Requisition Batches</button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="processedRequisitionsTab" data-toggle="tab" data-target="#processedRequisitions" type="button" role="tab" aria-controls="processedRequisitions" aria-selected="false">Processed Items</button>
                    </li>
                </ul>

                <div class="tab-content mt-3" id="myTabContent">
                    <div class="tab-pane fade show active" id="unprocessedRequisitions" role="tabpanel" aria-labelledby="unprocessedRequisitionsTab">

                        <div class="d-flex justify-content-end align-items-center mb-3" style="margin: 10px 0;">
                            <div> 
                                <button type="" class="btn btn-primary" data-action="inventory--purchaseorder#addSelectedToPoBtn">Add selected to PO</button>
                            </div>
                        </div>

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

                            <thead>
                                <tr>
                                </tr>
                            </thead>
                        </table>
                    </div>
                    <div class="tab-pane fade" id="processedRequisitions" role="tabpanel" aria-labelledby="processedRequisitionsTab">
                        <table id="approvedProcessedRequisitionBatchItemsView" 
                            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>
        </div>
    </div>

    <div class="modal fade" id="requisitionBatchItemShowModal" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="purchaseOrderLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-centered">
            <div class="modal-content shadow-lg rounded-3">

                <!-- Header -->
                <div class="modal-header border-0 pb-0" id="requisitionBatchItemShowModalHeader">
                    <h5 class="modal-title fw-bold" id="purchaseOrderLabel">
                        <span class="placeholder col-6 placeholder-lg"></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">

                    <!-- Status -->
                    <div class="mb-4" id="requisitionBatchItemShowModalStatus">
                        <div class="d-flex justify-content-between small text-muted mb-2">
                            <span class="placeholder col-4"></span>
                            <span class="placeholder col-3"></span>
                        </div>
                        <div class="progress" style="height: 10px;">
                            <div class="progress-bar bg-light" style="width: 100%;"></div>
                        </div>
                        <p class="mt-2 mb-0 small text-muted">
                            <span class="placeholder col-6"></span>
                        </p>
                    </div>

                    <!-- Products -->
                    <div class="mb-4 p-3 border rounded">
                        <h6 class="fw-bold mb-3">Product</h6>
                        <table class="table table-sm table-bordered align-middle" id="purchaseOrderItemViewReceiveTable">
                            <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-end">Cost (Selected Vendor)</th>
                                    <th class="text-end">Total</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td id="productSpan"><span class="placeholder col-8"></span></td>
                                    <td id="unitSpan" class="text-center"><span class="placeholder col-2"></span></td>
                                    <td id="requestedQuantitySpan" class="text-center"><span class="placeholder col-2"></span></td>
                                    <td id="receivedQuantitySpan" class="text-center"><span class="placeholder col-2"></span></td>
                                    <td id="costSelectedVendorSpan" class="text-center"><span class="placeholder col-2"></span></td>
                                    <td id="totalCostSpan" class="text-end"><span class="placeholder col-4"></span></td>
                                </tr>
                            </tbody>

                        </table>
                    </div>

                    <!-- Vendor Options -->
                    <div class="mb-4 p-3 border rounded">
                        <h6 class="fw-bold mb-3">Historical Supplier Pricing</h6>
                        <table class="table table-sm table-hover align-middle">
                            <thead class="table-light">
                                <tr>
                                    <th>Vendor</th>
                                    <th class="text-end">Unit Price (Ksh)</th>
                                    <th>Contact Details</th>
                                    <th>Notes</th>
                                    <th class="text-center">Select</th>
                                </tr>
                            </thead>
                            <tbody id="requisitionBatchItemShowSupplierPrice">
                                <tr>
                                    <td><span class="placeholder col-6"></span></td>
                                    <td><span class="placeholder col-2"></span></td>
                                    <td><span class="placeholder col-2"></span></td>
                                    <td><span class="placeholder col-5"></span></td>
                                    <td class="text-center"><span class="placeholder col-2"></span></td>
                                </tr>
                                <tr>
                                    <td><span class="placeholder col-6"></span></td>
                                    <td><span class="placeholder col-2"></span></td>
                                    <td><span class="placeholder col-2"></span></td>
                                    <td><span class="placeholder col-5"></span></td>
                                    <td class="text-center"><span class="placeholder col-2"></span></td>
                                </tr>
                                <tr>
                                    <td><span class="placeholder col-6"></span></td>
                                    <td><span class="placeholder col-2"></span></td>
                                    <td><span class="placeholder col-2"></span></td>
                                    <td><span class="placeholder col-5"></span></td>
                                    <td class="text-center"><span class="placeholder col-2"></span></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                <div class="modal-footer border-0">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="button" id="btnAddToPo" class="btn btn-primary" disabled
                        data-action="inventory--purchaseorder#addSelectedToPoBtn">
                        Add to Purchase Order
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="processedRequisitionBatchItemShowModal" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="purchaseOrderLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-centered">
            <div class="modal-content shadow-lg rounded-3">
                <!-- Header -->
                <div class="modal-header border-0 pb-0">
                    <h5 class="modal-title fw-bold" id="purchaseOrderLabel">
                        <span id="itemPurchaseOrderNumber" class="placeholder col-8"></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">
                    <!-- Supplier / Destination -->
                    <div class="row mb-4">
                        <div class="col-md-6">
                            <div class="p-3 border rounded bg-light">
                                <h6 class="fw-bold mb-1">Supplier</h6>
                                <p class="mb-0" id="supplierDetailsLocation">
                                    <span id="supplierName" class="placeholder col-6"></span><br>
                                    <small id="supplierAddress" class="text-muted placeholder col-8"></small>
                                </p>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="p-3 border rounded bg-light">
                                <h6 class="fw-bold mb-1">Supplier Contact Details</h6>
                                <p class="mb-0" id="supplierContactDetails">
                                    <span id="destinationName" class="placeholder col-6"></span><br>
                                    <small id="destinationAddress" class="text-muted placeholder col-8"></small>
                                </p>
                            </div>
                        </div>
                    </div>

                    <!-- Status -->
                    <div class="mb-4">
                        <div class="progress" style="height: 10px;">
                            <div id="purchaseOrderProgress" class="progress-bar bg-light" style="width: 0%;">
                            </div>
                        </div>
                        <p id="purchaseOrderProgressText" class="mt-2 mb-0 small text-muted placeholder col-4"></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-4">
                                <strong>Order Date</strong><br>
                                <span id="itemOrderDate" class="placeholder col-5"></span>
                            </div>
                            <div class="col-md-4">
                                <strong>Estimated Arrival</strong><br>
                                <span id="itemEstimatedArrival" class="placeholder col-5"></span>
                            </div>
                            <div class="col-md-4">
                                <strong>Tracking Number</strong><br>
                                <span id="itemTrackingNumber" class="placeholder col-6"></span>
                            </div>
                        </div>
                    </div>

                    <!-- Products -->
                    <div class="mb-4 p-3 border rounded">
                        <h6 class="fw-bold mb-3">Products</h6>
                        <table class="table table-sm table-bordered align-middle" id="purchaseOrderItemViewReceiveTable">
                            <thead class="table-light">
                                <tr>
                                    <th>Product</th>
                                    <th class="text-center">Unit</th>
                                    <th class="text-center">Ordered</th>
                                    <th class="text-center">Received</th>
                                    <th class="text-end">Cost (Selected Vendor)</th>
                                    <th class="text-end">Total</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td id="itemProductSpan"><span class="placeholder col-8"></span></td>
                                    <td id="itemUnitSpan" class="text-center"><span class="placeholder col-2"></span></td>
                                    <td id="itemOrderedQuantitySpan" class="text-center"><span class="placeholder col-2"></span></td>
                                    <td id="itemReceivedQuantitySpan" class="text-center"><span class="placeholder col-2"></span></td>
                                    <td id="itemCostSelectedVendorSpan" class="text-center"><span class="placeholder col-2"></span></td>
                                    <td id="itemTotalCostSpan" class="text-end"><span class="placeholder col-4"></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>

$(document).on('input', '.purchasePriceAmount, .itemQuantity', function() {
    let subTotal = 0
    $('#selectedItemsTable').find('tbody .purchasePriceAmount').each(function() {
        let val = parseFloat($(this).val() * $(this).parent('td').parent('tr').find('.itemQuantity').val() || 0)
        subTotal += val
    })

    $('#subtotalAmountSpan').text('KSH. ' + subTotal.toFixed(2));
})

function cacheModal(modal){

    // cache the original modal
    var originalModal = modal.clone()

    // On modal hidden, restore it
    modal.on('hidden.bs.modal', function () {
        modal.remove();
        let newModal = originalModal.clone()
        $('body').append(newModal); 
    });
}

// I am sorry I did not fix this sooner. It was sunday and I got tired of it
// who knows, we might even delete it entirely. 
$('#processedRequisitionsTab').on('click', function() {

    $('#approvedProcessedRequisitionBatchItemsView').datagrid({
        url: '/inventory/approved/processed/requisition_batch_items',
        method: 'GET',
        singleSelect: false,   // allow multiple rows to be selected
        checkOnSelect: true,   // check when selecting a row
        selectOnCheck: true,    // select when checking a row
        pagination: true,
        fitColumns: true,
        collapsible: true,
        showFooter: true,
        idField: 'iiu_id',
        rownumbers: true,
        pageSize: 20,
        loadMsg: 'Loading Organizations',
        onLoadSuccess: function(){
            $('#cardBlurred').removeClass('loader-active')
            $('#approvedProcessedRequisitionBatchItemsView').datagrid('resize');
            $('#approvedProcessedRequisitionBatchItemsView').datagrid('fixRowHeight');
        },
        columns: [[
            {
                field: 'ck', title: '', width: 30, editor:'text', checkbox: true,
                formatter: (v, r) => { },
                styler: (v, r) => {
                    if(r.is_processed){
                        return {class:'dg-nocheck'};
                    }
                }
            },
            {
                field: 'req_item_ids', title: 'Requisition Item Ids', width: 30, editor:'text', 
                formatter: (v, r) => r.req_item_ids
            },
            {
                field: 'iiu_id', title: 'Inventory Item id', width: 30, editor:'text', 
                formatter: (v, r) => r.iiu_id
            },
            {
                field: 'item', title: 'Item', width: 30, editor:'text',
                formatter: (v, r) => r.item
            },
            {           
                field: 'unit', title: 'Unit', width: 30, editor:'text',
                formatter: (v, r) => r.unit
            },
            {           
                field: 'quantity_requested', title: 'Quantity Requested', width: 30, editor:'text',
                formatter: (v, r) => r.quantity_requested
            },
            {
                field:'action',title:'Action',width:20,align:'center',
                formatter:function(value,row,index){
                    var e = '<a href="javascript:void(0)" data-action="inventory--purchaseorder#viewProcessedRequisitionBatchItemDetails">View Details</a> ';
                    return e;
                }
            },
        ]],
    }).datagrid('enableFilter', []);

    $('#approvedProcessedRequisitionBatchItemsView').datagrid('hideColumn', 'iiu_id');
    $('#approvedProcessedRequisitionBatchItemsView').datagrid('hideColumn', 'req_item_ids');
    $('#approvedProcessedRequisitionBatchItemsView').datagrid('resize');
    $('#approvedProcessedRequisitionBatchItemsView').datagrid('fixRowHeight');
})

$(document).ready(function() {

    $('.purchase_order_dates').flatpickr({
        dateFormat: "Y-m-d",
        altInput: true,
        altFormat: "l J F",
        minDate: "today"
    });

    $('#supplierLookup').selectize({
        maxOptions: 10,
        openOnFocus: true,
        placeholder: "Lookup Supplier",
        preload: true, // <--- important!
        plugins: ["auto_position"],
        valueField: 's_id',
        labelField: 'supplier_name',
        searchField: 'supplier_name',
        create: true,
        load: function(query, callback) {
            fetch('/inventory/lookup?supplier=' + encodeURIComponent(query || ''))
                .then(response => response.json())
                .then(data => callback(data))
                .catch(() => callback());
        },
    });

    $('#inventoryItemLookup').selectize({
        maxOptions: 10,
        openOnFocus: true,
        placeholder: "Lookup Inventory",
        preload: true, // <--- important!
        plugins: ["auto_position"],
        valueField: 'i_id',
        labelField: 'item',
        searchField: 'item',
        create: true,
        load: function(query, callback) {
            fetch('/inventory/lookup?inventoryItem=' + encodeURIComponent(query || ''))
                .then(response => response.json())
                .then(data => callback(data))
                .catch(() => callback());
        },
    });

    $('#approvedRequisitionBatchItemsView').datagrid({
        url: '/inventory/approved_requisition_batch_items',
        method: 'GET',
        singleSelect: false,   // allow multiple rows to be selected
        checkOnSelect: true,   // check when selecting a row
        selectOnCheck: true,    // select when checking a row
        pagination: true,
        fitColumns: true,
        collapsible: true,
        showFooter: true,
        idField: 'iiu_id',
        rownumbers: true,
        pageSize: 20,
        loadMsg: 'Loading Organizations',
        onLoadSuccess: function(){
            $('#cardBlurred').removeClass('loader-active')
        },
        columns: [[
            {
                field: 'ck', title: '', width: 30, editor:'text', checkbox: true,
                formatter: (v, r) => { },
                styler: (v, r) => {
                    if(r.is_processed){
                        return {class:'dg-nocheck'};
                    }
                }
            },
            {
                field: 'req_item_ids', title: 'Requisition Item Ids', width: 30, editor:'text', 
                formatter: (v, r) => r.req_item_ids
            },
            {
                field: 'iiu_id', title: 'Inventory Item Unit id', width: 30, editor:'text', 
                formatter: (v, r) => r.iiu_id
            },
            {
                field: 'item', title: 'Item', width: 30, editor:'text',
                formatter: (v, r) => r.item
            },
            {           
                field: 'unit', title: 'Unit', width: 30, editor:'text',
                formatter: (v, r) => r.unit
            },
            {           
                field: 'quantity_requested', title: 'Quantity Requested', width: 30, editor:'text',
                formatter: (v, r) => r.quantity_requested
            },
            {
                field:'action',title:'Action',width:20,align:'center',
                formatter:function(value,row,index){
                    var e = '<a href="javascript:void(0)" data-action="inventory--purchaseorder#viewRequisitionBatchItemDetails">View Details</a> ';
                    return e;
                }
            },
        ]],
    }).datagrid('enableFilter', []);

    $('#approvedRequisitionBatchItemsView').datagrid('hideColumn', 'req_item_ids');
    $('#approvedRequisitionBatchItemsView').datagrid('hideColumn', 'iiu_id');

})

</script>
{% endblock %}