@using MotoVaultPro.Helper
@inject IConfigHelper config
@inject ITranslationHelper translator
@model SupplyRequisitionHistory
@{
    var userConfig = config.GetUserConfig(User);
    var userLanguage = userConfig.UserLanguage;
    var showDelete = Model.RequisitionHistory.All(x => x.Id != default);
    var showPartNumber = Model.RequisitionHistory.Any(x => !string.IsNullOrWhiteSpace(x.PartNumber));
}
<script>
    var supplyUsageHistory = [];
    var deletedSupplyUsageHistory = [];
    function subtractFromCostInput(costToSubtract){
        let costInputId = '@Model.CostInputId';
        let costInput = $(`#${costInputId}`);
        let newCostAmount = globalParseFloat(costInput.val()) - globalParseFloat(costToSubtract);
        if (newCostAmount < 0){
            newCostAmount = 0;
        }
        costInput.val(globalFloatToString(newCostAmount.toFixed(2)));
    }
    function deleteSupplyUsageHistory(supplyId, quantity, cost, supplyRow){
        deletedSupplyUsageHistory.push({
            id: decodeHTMLEntities(supplyId),
            quantity: decodeHTMLEntities(quantity),
            cost: decodeHTMLEntities(cost)
        });
        let supplyIndexToRemove = supplyUsageHistory.findIndex(x=>x.id == decodeHTMLEntities(supplyId) && x.quantity == decodeHTMLEntities(quantity) && x.cost == decodeHTMLEntities(cost));
        if (supplyIndexToRemove > -1){
            supplyUsageHistory.splice(supplyIndexToRemove, 1);
        }
        $(supplyRow).parents(".supply-row").remove();
        //update cost input value
        subtractFromCostInput(decodeHTMLEntities(cost));
    }
</script>
<div id="supplyUsageHistoryModalContainer" class="d-none">
    <div class="modal-header">
        <h5 class="modal-title">@translator.Translate(userLanguage, "Supply Requisition History")</h5>
    </div>
    <div class="modal-body">
        @if (Model.RequisitionHistory.Any())
        {
            <div class="row">
                <div class="col-12" style="max-height:50vh; overflow-y:auto;">
                    <table class="table table-hover">
                        <thead class="sticky-top">
                            <tr class="d-flex">
                                <th scope="col" class="col-2">@translator.Translate(userLanguage, "Date")</th>
                                @if(showPartNumber){
                                    <th scope="col" class="col-2">@translator.Translate(userLanguage, "Part Number")</th>
                                    <th scope="col" class="@(showDelete ? "col-2" : "col-4")">@translator.Translate(userLanguage, "Description")</th>
                                } else
                                {
                                    <th scope="col" class="@(showDelete ? "col-4" : "col-6")">@translator.Translate(userLanguage, "Description")</th>
                                }
                                <th scope="col" class="col-2">@translator.Translate(userLanguage, "Quantity")</th>
                                <th scope="col" class="col-2">@translator.Translate(userLanguage, "Cost")</th>
                                @if (showDelete){
                                    <th scope="col" class="col-2">@translator.Translate(userLanguage, "Delete")</th>
                                }
                            </tr>
                        </thead>
                        <tbody>
                            @foreach (SupplyUsageHistory usageHistory in Model.RequisitionHistory)
                            {
                                <script>
                                    supplyUsageHistory.push({ id: decodeHTMLEntities("@usageHistory.Id"), date: decodeHTMLEntities("@usageHistory.Date.ToShortDateString()"), partNumber: decodeHTMLEntities('@usageHistory.PartNumber'), description: decodeHTMLEntities("@usageHistory.Description"), quantity: decodeHTMLEntities("@usageHistory.Quantity.ToString("F")"), cost: decodeHTMLEntities("@usageHistory.Cost.ToString("F")") })
                                </script>
                                <tr class="d-flex supply-row">
                                    <td class="col-2">@StaticHelper.TruncateStrings(usageHistory.Date.ToShortDateString())</td>
                                    @if (showPartNumber)
                                    {
                                        <td class="col-2 text-truncate">@StaticHelper.TruncateStrings(usageHistory.PartNumber)</td>
                                        <td class="@(showDelete ? "col-2" : "col-4") text-truncate">@StaticHelper.TruncateStrings(usageHistory.Description)</td>
                                    } else
                                    {
                                        <td class="@(showDelete ? "col-4" : "col-6") text-truncate">@StaticHelper.TruncateStrings(usageHistory.Description, 50)</td>
                                    }
                                    <td class="col-2">@usageHistory.Quantity.ToString("F")</td>
                                    <td class="col-2">@usageHistory.Cost.ToString("C2")</td>
                                    @if (showDelete){
                                        <td class="col-2">
                                            <button type="button" class="btn btn-danger" onclick="deleteSupplyUsageHistory('@usageHistory.Id.ToString()', '@usageHistory.Quantity.ToString("F")', '@usageHistory.Cost.ToString("F")', this)"><i class="bi bi-trash"></i></button>
                                        </td>
                                    }
                                </tr>
                            }
                        </tbody>
                    </table>
                </div>
            </div>
        }
        else
        {
            <div class="row">
                <div class="col-12">
                    <div class="text-center">
                        <h4>@translator.Translate(userLanguage, "No supply requisitions in history")</h4>
                    </div>
                </div>
            </div>
        }
    </div>
</div>