NonInventPurchasingSystem/CPRNIMS.WebApps/Views/Components/POMgmt/CustomPO/ImportElem.cshtml

<div class="row">
    <div class="col-6">
        <div class="row">
        <div class="col-6">
         <div class="form-group">
                <label for="deliveryDate">Est. Delivery Date</label>
                <input type="date" id="deliveryDate" class="form-control">
         </div>
        </div>
        <div class="col-3">
            <div class="form-group">
                <label for="piDate">Prof. Inv. Date</label>
                <input type="date" class="form-control" style="margin-bottom:5px;" id="piDate">
            </div>
        </div>
        <div class="col-3">
            <div class="form-group">
                <label for="piNo">Prof. Inv. No</label>
                <input type="text" class="form-control" style="margin-bottom:5px;" id="piNo">
            </div>
        </div>
        </div>
    </div>
    <div class="col-6">
        <div class="row">
            <div class="col-3">
                <div class="form-group">
                    <label for="currency">Currency</label>
                    <input disabled id="currency" value="USD" class="form-control" />
                </div>
            </div>
            <div class="col-3">
                  <div class="form-group">
                  <label for="currencyCER">CER</label>
                    <input type="number" id="currencyCER" name="currencyCER" value="59.00" class="form-control" />
                  </div>
            </div>

            <div class="col-3">
                <div class="form-group">
                    <label for="grossAmountUSD">Gross (USD) Amount</label>
                    <input readonly name="grossAmountUSD" id="grossAmountUSD" class="form-control" style="margin-bottom:5px;">
                </div>
            </div>
            <div class="col-3">
                <div class="form-group">
                    <label for="finalAmountUSD">Final (USD) Amount</label>
                    <input readonly name="finalAmountUSD" id="finalAmountUSD" class="form-control" style="margin-bottom:5px;">
                </div>
            </div>
        </div>
    </div>
    <div class="col-6">
        <div class="row">
        <div class="col-3">
            <div class="form-group">
                <label for="podId">Port Of Discharge</label>
                <select class="form-control" name="podId" id="podId"
                        style="margin-bottom:5px;">
                        <option disabled>-Select Discharge Port-</option>
                        <option value="1">MANILA PORT</option>
                        <option value="2">NORTH SEA PORT</option>
                        <option value="3">SOUTH SEA PORT</option>
                        <option value="4">MANILA PORT PHILS</option>
                        <option value="5">OTHERS</option>
                        <option value="6">MANILA PHILIPPINES</option>
                        <option value="7">N/A</option>
                </select>
            </div>
        </div>
        <div class="col-3">
                <div class="form-group">
                    <label for="C-paymentTerms">Payment Terms</label>
                    <input type="search" name="C-paymentTerms" id="C-paymentTerms" class="form-control" style="margin-bottom:5px;">
                    <input type="hidden" id="C-paymentTermsId" name="C-paymentTermsId" />
                </div>
        </div>
        <div class="col-3">
        <div class="form-group">
                    <label for="docRequiredId">Incoterms</label>
                    <i class="bx bxs-message-rounded-add" style="color: green; font-size: 1rem; cursor: pointer;"
                       onclick="viewIncoterms()"></i>

                    <input type="search" name="incotermsName" id="incotermsName" class="form-control" style="margin-bottom:5px;">
                    <input type="hidden" id="incoTermsId" name="incoTermsId" />
        </div>
        </div>
            <div class="col-md-3">
                <div class="form-group">
                    <label for="shippingInstructionId">Shipping Instrctn.</label>
                    <select class="form-control" name="shippingInstructionId" id="shippingInstructionId"
                            style="margin-bottom:5px;">
                        <option disabled>-Select Shipping Instruction-</option>
                        <option value="1">AIR</option>
                        <option value="2">COURIER</option>
                        <option value="3">SEA FCL</option>
                        <option value="4">SEA LCL</option>
                        <option value="5">N/A</option>
                        <option value="4">OTHERS</option>
                    </select>
                </div>
            </div>
        </div>
    </div>

    <div class="col-6">
        <div class="row">
            <div class="col-6">
        <div class="form-group" style="display: flex; align-items: center; gap: 10px;">
            <label for="discount">Discount</label>
            <div style="flex: 1; display: flex; align-items: center;">
                <input id="discountAmount" type="number" class="form-control" style="flex: 1; margin-right: 10px;">
                <i class="bx bxs-plus-circle" style="color: green; font-size: 1.5rem; cursor: pointer;"
                   onclick="AddDiscount()"></i>
            </div>
        </div>
        <textarea id="discount" readonly disabled
                  style="width: 100%; height: 45px; margin-top: 10px;"></textarea>
        </div>
        <div class="col-3">
            <div class="form-group">
                    <label for="grossAmountPHP">Gross (PHP) Amount</label>
                    <input readonly name="grossAmountPHP" id="grossAmountPHP" class="form-control" style="margin-bottom:5px;">
            </div>
        </div>
        <div class="col-3">
            <div class="form-group">
                    <label for="finalAmountPHP">Final (PHP) Amount</label>
                    <input readonly name="finalAmountPHP" id="finalAmountPHP" class="form-control" style="margin-bottom:5px;">
            </div>
        </div>
        </div>
    </div>
    <div class="col-6" style="margin-top:-15px;">
    <div class="form-group">
        <div class="row">
            <div class="col-6">
                <label for="docRequiredId">Docs Required</label>
                <i class="bx bxs-message-rounded-add" style="color: green; font-size: 1rem; cursor: pointer;"
                   onclick="viewDocRequired()"></i>
                <textarea readonly id="docRequiredId" class="form-control"
                          style="width: 100%; height: 150px;margin-bottom:10px;"></textarea>
            </div>
            <div class="col-6">
                <label for="remarks">Remarks</label>
                <textarea id="remarks" class="form-control"
                              style="width: 100%; height: 150px;margin-bottom:10px;"></textarea>
            </div>
        </div>
    </div>
    </div>
    @await Html.PartialAsync("PagesView/PO/_OtherCharges")
</div>
<!-- Modal Incoterms-->
<div class="modal fade custom-modal-backdrop" id="viewIncoterms"
     tabindex="-1" aria-labelledby="IncotermsLabel" data-bs-backdrop="static">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h3 id="IncotermsLabel" class="modal-title">
                    Incoterms List
                </h3>
            </div>
            <div class="modal-body">
                <button type="button" class="btn btn-success"
                        id="chooseItem" onclick="viewIncotermsModal(0,{})">
                    Add new
                </button>
                <br />
                <br />
                <table id="IncotermsTable" class="row-border" style="width: 100%;">
                    <colgroup>
                        <col style="width:90%" />
                        <col style="width:10%" />
                    </colgroup>
                    <thead>
                        <tr>
                            <th>Incoterms</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Back</button>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Modal viewIncotermsModal-->
<div class="modal fade custom-modal-backdrop" id="viewIncotermsModal" tabindex="-1"
     aria-labelledby="incotermsLabel"
     data-bs-backdrop="static">
    <div class="modal-dialog" role="document" data-bs-backdrop="static">
        <div class="modal-content">
            <div class="modal-header">
                <h5 id="incotermsHeader" class="modal-title">
                </h5>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label for="update-incotermsName">Incoterms Name</label>
                    <input id="update-incotermsName" class="form-control" style="margin-top:10px" placeholder="input here..." />
                </div>
            </div>
            <input hidden id="update-incotermsId" />
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Back</button>
                <button type="button" id="btnPostPutIncoterms" onclick="postPutIncoterms()" class="btn btn-success">Submit</button>
            </div>
        </div>
    </div>
</div>
@await Html.PartialAsync("PagesView/PO/_DocRequired")
<input hidden id="dr-ImportPoNo" />
<input hidden id="si-ImportPoNo" />