NonInventPurchasingSystem/CPRNIMS.WebApps/Views/Shared/PagesView/PR/_PRTracking.cshtml

504 lines
28 KiB
Plaintext

<!-- Modal viewPRTracking -->
<div class="modal fade custom-modal-backdrop" id="viewPRTracking"
tabindex="-1" aria-labelledby="ModalLabel" aria-hidden="true" data-bs-backdrop="static">
<div class="modal-dialog custom-modal-tracker">
<div class="row">
<div class="col-12">
<div class="modal-content">
<div class="modal-header" style="display: flex; flex-direction: column; align-items: center;">
<h2 class="modal-title" id="ModalLabel">PR Status</h2>
</div>
<br />
<div class="modal-body">
<div class="row">
<!-- First Column -->
<div class="col-md-4">
<div class="form-group">
<div class="row">
<div class="col-6">
<label for="prNo">PR No</label>
<input readonly type="text" class="form-control" id="prNo">
</div>
<div class="col-6">
<label for="t-dateNeeded">Date Needed</label>
<input readonly type="text" class="form-control" id="t-dateNeeded">
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-6">
<label for="poNumber">PO No</label>
<input readonly type="text" class="form-control" id="poNumber">
</div>
<div class="col-6">
<label for="poTypeName">PO Type</label>
<input readonly type="text" class="form-control" id="poTypeName">
</div>
</div>
</div>
<div class="form-group">
<label id="itemNameLabel" for="t-itemName">ItemName</label>
<textarea readonly id="t-itemName"></textarea>
</div>
</div>
<!-- Second Column -->
<div class="col-md-4">
<div class="form-group">
<div class="row">
<div class="col-6">
<label for="t-itemNo">ItemNo</label>
<input readonly type="text" class="form-control" id="t-itemNo">
</div>
<div class="col-6">
<label for="requestedBy">Requested By</label>
<input readonly type="text" class="form-control" id="requestedBy">
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-6">
<label for="quantity">Quantity</label>
<input readonly type="text" class="form-control" id="quantity">
</div>
<div class="col-6">
<label for="t-uomName">UOM</label>
<input readonly type="text" class="form-control" id="t-uomName">
</div>
</div>
</div>
<div class="form-group">
<div class="form-group">
<label id="itemCategoryNameLabel" for="t-itemCategoryName">itemCategoryName:</label>
<textarea readonly id="t-itemCategoryName"></textarea>
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<img id="t-itemPictureImage" alt="t-itemPictureImage" width="150" class="img-fluid" style="margin-bottom:5px; border-radius:15px; box-shadow:15px;">
<input type="file" id="t-itemPictureImageInput" accept="image/*" style="display: none; margin-bottom:5px; border-radius:15px; box-shadow:15px;">
</div>
<div class="form-group">
<div class="form-group">
<label id="itemDescriptionLabel" for="t-itemDescription">Specification:</label>
<textarea readonly id="t-itemDescription"></textarea>
</div>
</div>
</div>
</div>
<br />
<hr />
<div class="progress-container">
<div class="step" id="step-prCreatedDate">
<div class="icon-container">
<i id="icon-prCreatedDate" class="fa fa-cart-plus"></i>
</div>
<p class="date"><label id="prCreatedDate-Label"></label></p>
<p class="label">PR Created</p>
</div>
<div class="line-container"><div class="line"></div></div>
<div class="step" id="step-prApprover1">
<div class="icon-container">
<i id="icon-prApprover1" class="fa fa-boxes-stacked"></i>
</div>
<p class="date"><label id="prApprover1-Label"></label></p>
<p class="label">Approver1</p>
</div>
<div class="line-container"><div class="line"></div></div>
<div class="step" id="step-prApprover2">
<div class="icon-container">
<i id="icon-prApprover2" class="fa fa-forward-step"></i>
</div>
<p class="date"><label id="prApprover2-Label"></label></p>
<p class="label">Approver2</p>
</div>
<div class="line-container"><div class="line"></div></div>
<div class="step" id="step-canvassSubmitedDate">
<div class="icon-container">
<i id="icon-canvassSubmitedDate" class="fa fa-magnifying-glass-dollar"></i>
</div>
<p class="date"><label id="canvassSubmitedDate-Label"></label></p>
<p class="label">Canvass</p>
</div>
<div class="line-container"><div class="line"></div></div>
<div class="step" id="step-suppBidDate">
<div class="icon-container">
<i id="icon-suppBidDate" class="fa fa-hand-holding-dollar"></i>
</div>
<p class="date"><label id="suppBidDate-Label"></label></p>
<p class="label">Bidding</p>
</div>
<div class="line-container"><div class="line"></div></div>
<div class="step" id="step-canvassApprovedDate">
<div class="icon-container">
<i id="icon-canvassApprovedDate" class="fa fa-handshake-simple"></i>
</div>
<p class="date"><label id="canvassApprovedDate-Label"></label></p>
<p class="label">Offer Approved</p>
</div>
<div class="line-container"><div class="line"></div></div>
<div class="step" id="step-poPreparationDate">
<div class="icon-container">
<i id="icon-poPreparationDate" class="fa fa-forward-step"></i>
</div>
<p class="date"><label id="poPreparationDate-Label"></label></p>
<p class="label">P.O. Prepared</p>
</div>
<div class="line-container"><div class="line"></div></div>
<div class="step" id="step-poApprovedDate">
<div class="icon-container">
<i id="icon-poApprovedDate" class="fa fa-thumbs-up"></i>
</div>
<p class="date"><label id="poApprovedDate-Label"></label></p>
<p class="label">P.O. Approved</p>
</div>
<div class="line-container"><div class="line"></div></div>
<div class="step" id="step-itemArrivedDate">
<div class="icon-container">
<i id="icon-itemArrivedDate" class="fa fa-map-marker"></i>
</div>
<p class="date"><label id="itemArrivedDate-Label"></label></p>
<p class="label">Order Arrived</p>
</div>
<div class="line-container"><div class="line"></div></div>
<div class="step" id="step-receivedDate">
<div class="icon-container">
<i id="icon-receivedDate" class="fa fa-map-marker"></i>
</div>
<p class="date"><label id="receivedDate-Label"></label></p>
<p class="label">Date Received</p>
</div>
<div class="truck-icon" id="icon-truck">
<i class="fa fa-truck-moving"></i>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-bs-dismiss="modal">Back</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Modal viewPRItemDetails -->
<div class="modal fade custom-modal-backdrop" id="viewPRItemDetails"
tabindex="-1" aria-labelledby="ModalLabel" aria-hidden="true" data-bs-backdrop="static">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="ModalLabel">Item Details</h5>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-4">
<div class="row">
<div class="col-md-6">
<div class="form-floating mb-3">
<input hidden style="margin-bottom:5px;" class="form-control" id="itemCodeId">
<input readonly class="form-control" style="margin-bottom:5px;" id="itemNo" placeholder="Item No">
<label for="itemCodeId">Item Code</label>
</div>
</div>
<div class="col-md-6">
<div class="form-floating mb-3">
<select class="form-control" name="packagingTypeId" id="packagingTypeId"
style="margin-bottom:5px;">
<option disabled>-Select package type-</option>
<option value="1">Bundle</option>
<option value="2">Per pc</option>
</select>
<label for="packagingTypeId">Packaging Type</label>
</div>
</div>
</div>
<div class="form-floating mb-3">
<textarea id="itemName" class="form-control" style="width: 100%; height: 100px;"></textarea>
<label for="itemName">Item Name</label>
</div>
<div class="form-floating mb-3">
<textarea id="itemDescription" class="form-control" style="width: 100%; height: 125px;"></textarea>
<label for="itemDescription">Item Specification</label>
</div>
<div class="form-floating mb-3">
<select id="itemCategorySelect" class="form-control">
<option value=""></option>
</select>
<input id="itemCategoryName" name="itemCategoryName" class="form-control" />
<label for="itemCategoryName">Category</label>
<input type="hidden" id="ItemCategory2Id" name="ItemCategory2Id" />
</div>
<input type="hidden" id="itemLocalId" name="itemLocalId" />
</div>
<div class="col-md-4">
<input hidden id="department" placeholder="Department">
<div class="form-floating mb-3">
<select class="form-control" name="requestTypeId" id="requestTypeId"
style="margin-bottom:5px;">
<option disabled>-Select Request Type-</option>
<option value="2">P.R. Request</option>
<option value="1">Internal Request</option>
<option value="3">Assisted Request</option>
</select>
<label for="requestTypeId">Request Type</label>
</div>
<input hidden id="itemClassId" />
<div class="form-floating mb-3">
<select class="form-control" name="prTypeId" id="prTypeId"
style="margin-bottom:5px;">
<option disabled>-Select P.R. type-</option>
<option value="1">Goods</option>
<option value="2">Service</option>
</select>
<label for="prTypeId">P.R. Type</label>
</div>
<div class="form-floating mb-3">
<input type="search" id="itemColorName" class="form-control" style="margin-bottom:5px;" name="itemColorName" />
<label for="itemColorName">Item Color</label>
</div>
<div class="form-floating mb-3">
<select class="form-control" name="isCommon" id="isCommon"
style="margin-bottom:5px;">
<option disabled>-Select Item Type-</option>
<option value="true">Common</option>
<option value="false">Exclusive</option>
</select>
<label for="isCommon">Item Type</label>
</div>
<div class="row">
<div class="form-floating mb-3">
<input type="search" id="itemLocalName" class="form-control" style="margin-bottom:5px;" name="itemLocalName" />
<label for="itemLocalName">Item Locality</label>
</div>
</div>
<div class="row">
<div class="col-6">
<div class="form-floating mb-3">
<input type="search" id="uomName" class="form-control" style="margin-bottom:5px;" name="uomName" />
<label for="uomName">UOM</label>
</div>
</div>
<div class="col-6">
<div class="form-floating mb-3">
<input type="number" id="itemQty" class="form-control" style="margin-bottom:5px;" name="itemQty" />
<label for="itemQty">Item Qty</label>
</div>
</div>
</div>
<input type="hidden" id="uomId" name="uomId" />
<input type="hidden" id="itemColorId" name="itemColorId" />
</div>
<div class="col-md-4 d-flex justify-content-center align-items-center">
<div class="text-center">
<img id="itemPictureImage" alt="itemPictureImage" class="img-fluid">
<!-- Stylish status label -->
<span id="statusName" class="status-badge denied">Denied</span>
<input type="file" id="itemPictureImageInput"
accept="image/png, image/jpeg" style="display: none;">
<input type="hidden" id="itemAttachId" name="itemAttachId" />
</div>
</div>
</div>
<div class="form-floating mb-3">
<textarea id="itemRemarks" class="form-control" style="width: 100%; height: 50px;"></textarea>
<label for="itemRemarks">Remarks</label>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-bs-dismiss="modal">Back</button>
<button type="button" id="btnHold" onclick="showDeniedRemarks();" class="btn btn-danger">Deny</button>
<button type="button" id="btnUpdateItem" onclick="putItemDetails(1);" class="btn btn-warning">Update</button>
<button type="button" id="btnApprove" onclick="confirmPRApproveReject(1,'N/A');" class="btn btn-success">Approve</button>
</div>
</div>
</div>
</div>
<!-- Modal viewPRDetails -->
<div class="modal fade custom-modal-backdrop" id="viewPRDetails"
tabindex="-1" aria-labelledby="ModalLabel" data-bs-backdrop="static">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title" id="ModalLabel">List of Item by PRNo</h2>
</div>
<div id="printableRelatedItem">
<div class="modal-body">
<!-- PR SUMMARY CARD -->
<div class="card border-0 shadow-sm mb-4 pr-info-section">
<div class="card-body">
<div class="row g-3">
<div class="col-md-3">
<div class="text-muted small">P.R. No</div>
<div id="label-pr-prNo" class="fw-bold fs-6"></div>
</div>
<div class="col-md-3">
<div class="text-muted small">Date Needed</div>
<div id="label-pr-dateNeeded" class="fw-semibold text-danger"></div>
</div>
<div class="col-md-3">
<div class="text-muted small">Department</div>
<div id="label-pr-Department" class="fw-semibold"></div>
</div>
<div class="col-md-3">
<div class="text-muted small">Project Code</div>
<div id="label-pr-ProjectCode" class="fw-semibold"></div>
</div>
<div class="col-md-3">
<div class="text-muted small">Requested By</div>
<div id="label-prby" class="fw-semibold"></div>
</div>
<div class="col-md-3">
<div class="text-muted small">Attested By</div>
<div id="label-pr-attestedBy" class="fw-semibold"></div>
</div>
<div class="col-md-3">
<div class="text-muted small">Approved By</div>
<div id="label-pr-approvedBy" class="fw-semibold"></div>
</div>
<div class="col-md-3">
<div class="text-muted small">Remarks</div>
<div id="label-pr-remarks"
class="bg-light rounded p-2 small"></div>
</div>
</div>
</div>
</div>
<!-- SELECTION SUMMARY -->
<div class="d-flex align-items-center mb-3 gap-2">
<div>
<span class="fw-semibold">Selected Items:</span>
<span id="totalSelected" class="badge bg-danger ms-2">0</span>
</div>
<div>
<button id="btnDownloadAttachment"
class="btn btn-sm btn-outline-teal d-none"
onclick="downloadPRAttachment()">
📎Export
</button>
<input hidden id="fileName" />
<input hidden id="origFileName" />
<input hidden id="prId" />
</div>
<!-- File Attachment Section -->
<div class="d-flex align-items-center gap-2 flex-grow-1">
<!-- File Input -->
<div class="file-upload-wrapper position-relative">
<input type="file"
class="form-control"
id="fileAttachment"
name="fileAttachment"
accept=".csv,.xlsx,.xls,.pdf"
style="max-width: 300px;" />
</div>
<!-- File Info Badge (shows when file selected) -->
<div id="fileInfoBadge" class="d-none">
<span class="badge bg-success-subtle text-success border border-success px-3 py-2">
<i class="bi bi-file-earmark-check me-1"></i>
<span id="fileNameDisplay" class="me-2"></span>
<small class="text-muted">(<span id="fileSizeDisplay"></span>)</small>
<button type="button"
class="btn-close btn-close-sm ms-2"
onclick="clearFileAttachment()"
style="font-size: 0.7rem; vertical-align: middle;"
title="Remove file"></button>
</span>
</div>
<!-- Upload/Update Button (shows when file selected) -->
<div id="btnUploadContainer" class="d-none ms-auto">
<button type="button"
class="btn btn-success btn-sm"
onclick="uploadAttachment()">
<i class="bi bi-cloud-upload me-1"></i>
<span id="btnUploadText">Upload Attachment</span>
</button>
</div>
</div>
</div>
<table id="PRdataTable"
class="row-border" style="width: 100%;">
<colgroup>
<col style="width:4%;text-align:left;" />
<col style="width:8%" />
<col style="width:28%" />
<col style="width:32%" />
<col style="width:8%" />
<col style="width:8%" />
<col style="width:12%" />
</colgroup>
<thead>
<tr>
<th style="text-align:left;width:4%;">
All
<input id="selectAllCheckboxItem" type="checkbox"
class="selectAllCheckboxItem" />
</th>
<th>ItemNo</th>
<th>ItemName</th>
<th>Specification</th>
<th>Qty</th>
<th>Status</th>
<th>Action</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<div class="modal-footer pr-modal-footer">
<button type="button"
class="btn btn-outline-secondary"
onclick="resetIsApproval()"
data-bs-dismiss="modal">
Back
</button>
<button type="button"
id="btnPrintPR"
onclick="printPRItem();"
class="btn btn-teal-warning">
🖨 Print
</button>
<button id="btnSubmitItem"
type="button"
class="btn btn-teal-primary"
onclick="approvedSelectedPRItem();">
✔ Approve Selected
</button>
</div>
</div>
</div>
</div>
<input hidden id="roleRights" value="@ViewBag.UserRoles" />