675 lines
20 KiB
Plaintext
675 lines
20 KiB
Plaintext
<style>
|
||
*, *::before, *::after {
|
||
box-sizing: border-box;
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
body {
|
||
font-family: 'Inter',sans-serif;
|
||
font-size: var(--fs);
|
||
line-height: var(--lh);
|
||
color: var(--text);
|
||
background: #e8eeee;
|
||
}
|
||
|
||
/* Header */
|
||
.po-header {
|
||
background: linear-gradient(135deg,#01696f 0%,#0a9ea6 100%);
|
||
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
|
||
padding: 10px 16px;
|
||
text-align: center;
|
||
color: #fff;
|
||
}
|
||
|
||
.po-header h5 {
|
||
font-size: 15px;
|
||
font-weight: 700;
|
||
letter-spacing: .01em;
|
||
margin: 0;
|
||
}
|
||
|
||
/* Card */
|
||
.po-card {
|
||
background: var(--surface);
|
||
border: 1px solid var(--teal-border);
|
||
border-top: none;
|
||
border-radius: 0 0 var(--radius-lg) var(--radius-lg);
|
||
box-shadow: var(--shadow);
|
||
padding: 10px 14px 8px;
|
||
}
|
||
|
||
/* Meta row */
|
||
.meta-row {
|
||
display: flex;
|
||
gap: 8px;
|
||
flex-wrap: wrap;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.meta-field {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 2px;
|
||
}
|
||
|
||
.meta-field.po-no {
|
||
flex: 0 0 120px;
|
||
}
|
||
|
||
.meta-field.final-po {
|
||
flex: 0 0 120px;
|
||
}
|
||
|
||
.meta-field.po-type {
|
||
flex: 0 0 150px;
|
||
}
|
||
|
||
.meta-field.supplier {
|
||
flex: 1 1 200px;
|
||
}
|
||
|
||
/* Import zone */
|
||
.import-zone {
|
||
background: var(--surface-2);
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius-lg);
|
||
padding: 8px 10px 6px;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.import-grid {
|
||
display: grid;
|
||
gap: 6px 8px;
|
||
}
|
||
|
||
.g-row-1 {
|
||
grid-template-columns: repeat(6,1fr);
|
||
}
|
||
|
||
.g-row-2 {
|
||
display: flex;
|
||
gap: 8px;
|
||
margin-top: 4px;
|
||
}
|
||
|
||
/* Left col */
|
||
.terms-col {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 5px;
|
||
flex: 1 1 0;
|
||
}
|
||
|
||
.terms-row {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 6px;
|
||
}
|
||
|
||
/* Right panel */
|
||
.right-panel {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 6px;
|
||
flex: 0 0 660px;
|
||
min-width: 0;
|
||
}
|
||
|
||
.amounts-row {
|
||
display: grid;
|
||
grid-template-columns: repeat(4,1fr);
|
||
gap: 5px;
|
||
}
|
||
|
||
/* Labels */
|
||
label.lbl {
|
||
font-size: 10px;
|
||
font-weight: 600;
|
||
color: var(--muted);
|
||
letter-spacing: .03em;
|
||
text-transform: uppercase;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 3px;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
margin-bottom: 2px;
|
||
}
|
||
|
||
label.lbl i {
|
||
font-size: .85rem;
|
||
color: var(--teal);
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* Form controls */
|
||
.fc {
|
||
width: 100%;
|
||
height: 30px;
|
||
padding: 0 8px;
|
||
border: 1px solid var(--teal-border);
|
||
border-radius: var(--radius);
|
||
background: var(--surface);
|
||
font-size: var(--fs);
|
||
color: var(--text);
|
||
transition: border-color var(--transition),box-shadow var(--transition);
|
||
}
|
||
|
||
.fc:focus {
|
||
outline: none;
|
||
border-color: var(--teal);
|
||
box-shadow: 0 0 0 2px rgba(1,105,111,0.14);
|
||
}
|
||
|
||
.fc[readonly], .fc:disabled {
|
||
background: var(--surface-2);
|
||
color: var(--muted);
|
||
cursor: default;
|
||
}
|
||
|
||
select.fc {
|
||
appearance: none;
|
||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%235a7476'/%3E%3C/svg%3E");
|
||
background-repeat: no-repeat;
|
||
background-position: right 7px center;
|
||
padding-right: 20px;
|
||
}
|
||
|
||
textarea.fc {
|
||
height: auto;
|
||
resize: vertical;
|
||
padding-top: 4px;
|
||
padding-bottom: 4px;
|
||
line-height: var(--lh);
|
||
}
|
||
|
||
/* Currency pair */
|
||
.cur-pair {
|
||
display: flex;
|
||
height: 28px;
|
||
border: 1px solid var(--teal-border);
|
||
border-radius: var(--radius);
|
||
overflow: hidden;
|
||
background: var(--surface);
|
||
transition: border-color var(--transition),box-shadow var(--transition);
|
||
}
|
||
|
||
.cur-pair:focus-within {
|
||
border-color: var(--teal);
|
||
box-shadow: 0 0 0 2px rgba(1,105,111,0.14);
|
||
}
|
||
|
||
.cur-badge {
|
||
background: rgba(1,105,111,0.10);
|
||
color: var(--teal);
|
||
font-weight: 700;
|
||
font-size: 10px;
|
||
padding: 0 7px;
|
||
display: flex;
|
||
align-items: center;
|
||
border-right: 1px solid var(--teal-border);
|
||
white-space: nowrap;
|
||
letter-spacing: .04em;
|
||
}
|
||
|
||
.cur-pair .fc {
|
||
border: none;
|
||
border-radius: 0;
|
||
background: transparent;
|
||
box-shadow: none;
|
||
flex: 1;
|
||
min-width: 0;
|
||
padding-left: 6px;
|
||
}
|
||
|
||
.cur-pair .fc:focus {
|
||
box-shadow: none;
|
||
}
|
||
|
||
/* Amount boxes */
|
||
.amt-box {
|
||
background: var(--teal-bg);
|
||
border: 1px solid var(--teal-border);
|
||
border-radius: var(--radius);
|
||
padding: 2px 7px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
min-height: 28px;
|
||
}
|
||
|
||
.amt-box.php {
|
||
background: var(--green-bg);
|
||
border-color: rgba(67,122,34,0.22);
|
||
}
|
||
|
||
.amt-box .albl {
|
||
font-size: 9px;
|
||
font-weight: 700;
|
||
text-transform: uppercase;
|
||
letter-spacing: .04em;
|
||
color: var(--muted);
|
||
line-height: 1;
|
||
}
|
||
|
||
.amt-box input {
|
||
border: none;
|
||
background: transparent;
|
||
font-size: 11px;
|
||
font-weight: 700;
|
||
color: var(--teal);
|
||
font-family: inherit;
|
||
outline: none;
|
||
padding: 0;
|
||
width: 100%;
|
||
height: auto;
|
||
}
|
||
|
||
.amt-box.php input {
|
||
color: var(--green);
|
||
}
|
||
|
||
/* ── Discount — simple single input ── */
|
||
#discount {
|
||
width: 100%;
|
||
height: 32px;
|
||
padding: 0 10px;
|
||
border: 1px solid var(--teal-border);
|
||
border-radius: var(--radius);
|
||
background: var(--surface);
|
||
font-size: var(--fs);
|
||
color: var(--text);
|
||
font-family: inherit;
|
||
transition: border-color var(--transition), box-shadow var(--transition);
|
||
display: block; /* override old display:none */
|
||
}
|
||
|
||
#discount:focus {
|
||
outline: none;
|
||
border-color: var(--teal);
|
||
box-shadow: 0 0 0 2px rgba(1,105,111,0.14);
|
||
}
|
||
|
||
/* Charges table */
|
||
.charges-wrap {
|
||
border: 1px solid var(--teal-border);
|
||
border-radius: var(--radius);
|
||
overflow: hidden;
|
||
flex: 1;
|
||
}
|
||
|
||
.charges-header {
|
||
background: linear-gradient(90deg,var(--teal) 0%,#0a9ea6 100%);
|
||
color: #fff;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 3px 8px;
|
||
}
|
||
|
||
.charges-header span {
|
||
font-size: 10.5px;
|
||
font-weight: 700;
|
||
letter-spacing: .04em;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
.charges-header .btn-add-charge {
|
||
background: rgba(255,255,255,0.15);
|
||
border: none;
|
||
cursor: pointer;
|
||
color: #fff;
|
||
border-radius: 4px;
|
||
padding: 1px 5px;
|
||
font-size: .85rem;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 3px;
|
||
transition: background var(--transition);
|
||
}
|
||
|
||
.charges-header .btn-add-charge:hover {
|
||
background: rgba(255,255,255,0.30);
|
||
}
|
||
|
||
.charges-header .btn-add-charge span {
|
||
font-size: 10px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.charges-table-wrap {
|
||
overflow-y: auto;
|
||
max-height: 108px;
|
||
}
|
||
|
||
|
||
/* Icon add */
|
||
.icon-add {
|
||
color: var(--teal);
|
||
font-size: .9rem;
|
||
cursor: pointer;
|
||
transition: color var(--transition),transform var(--transition);
|
||
vertical-align: middle;
|
||
}
|
||
|
||
.icon-add:hover {
|
||
color: var(--teal-hover);
|
||
transform: scale(1.2);
|
||
}
|
||
|
||
/* DataTable */
|
||
.dt-wrapper {
|
||
background: var(--surface);
|
||
/* border: 1px solid var(--teal-border); */
|
||
/* border-radius: var(--radius-lg); */
|
||
box-shadow: var(--shadow);
|
||
/* padding: 8px 12px 10px; */
|
||
}
|
||
/* Reduce row height */
|
||
#DestChargesTable td,
|
||
#DestChargesTable th {
|
||
padding: 2px 6px; /* top/bottom left/right */
|
||
line-height: 1.1;
|
||
font-size: 12px; /* optional */
|
||
vertical-align: middle;
|
||
}
|
||
|
||
/* Optional: make DataTables wrapper compact too */
|
||
#DestChargesTable tbody tr {
|
||
height: 22px;
|
||
}
|
||
|
||
.dt-toolbar {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 6px;
|
||
flex-wrap: wrap;
|
||
gap: 6px;
|
||
}
|
||
|
||
.dt-controls {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
font-size: var(--fs);
|
||
color: var(--muted);
|
||
}
|
||
|
||
.dt-controls select, .dt-controls input {
|
||
height: 24px;
|
||
font-size: 11px;
|
||
padding: 0 6px;
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius);
|
||
color: var(--text);
|
||
}
|
||
|
||
/* table.dt-table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
font-size: var(--fs);
|
||
}
|
||
|
||
table.dt-table thead tr {
|
||
background: linear-gradient(90deg,var(--teal) 0%,#0a9ea6 100%);
|
||
color: #fff;
|
||
}
|
||
|
||
table.dt-table th {
|
||
padding: 5px 8px;
|
||
font-size: 10.5px;
|
||
font-weight: 600;
|
||
letter-spacing: .02em;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
table.dt-table th .sort-arrows {
|
||
display: inline-flex;
|
||
flex-direction: column;
|
||
margin-left: 3px;
|
||
opacity: .7;
|
||
}
|
||
|
||
table.dt-table th .sort-arrows svg {
|
||
width: 7px;
|
||
height: 5px;
|
||
fill: currentColor;
|
||
}
|
||
|
||
table.dt-table td {
|
||
padding: 5px 8px;
|
||
border-bottom: 1px solid rgba(0,0,0,0.05);
|
||
}
|
||
|
||
table.dt-table .no-rec {
|
||
text-align: center;
|
||
color: var(--faint);
|
||
font-style: italic;
|
||
padding: 16px;
|
||
} */
|
||
|
||
.dt-footer {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-top: 6px;
|
||
flex-wrap: wrap;
|
||
gap: 4px;
|
||
}
|
||
|
||
.dt-info {
|
||
font-size: 11px;
|
||
color: var(--muted);
|
||
}
|
||
|
||
.dt-pager {
|
||
display: flex;
|
||
gap: 4px;
|
||
align-items: center;
|
||
}
|
||
|
||
/* .dt-pager button, .btn-cancel {
|
||
background: none;
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius);
|
||
padding: 2px 10px;
|
||
font-size: 11px;
|
||
color: var(--muted);
|
||
cursor: pointer;
|
||
transition: border-color var(--transition),color var(--transition);
|
||
}
|
||
|
||
.dt-pager button:hover, .btn-cancel:hover {
|
||
border-color: var(--teal);
|
||
color: var(--teal);
|
||
}
|
||
*/
|
||
.btn-submit {
|
||
background: var(--teal);
|
||
color: #fff;
|
||
border: none;
|
||
border-radius: var(--radius);
|
||
padding: 4px 14px;
|
||
font-size: var(--fs);
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
transition: background var(--transition);
|
||
}
|
||
|
||
.btn-submit:hover {
|
||
background: var(--teal-hover);
|
||
}
|
||
</style>
|
||
<!-- Import Dynamic Component -->
|
||
<div class="import-zone">
|
||
|
||
<!-- Row 1: Dates + PI + Currency + Country -->
|
||
<div class="import-grid g-row-1" style="margin-bottom:5px;">
|
||
<div>
|
||
<label class="lbl">Est. Delivery Date</label>
|
||
<input type="date" id="deliveryDate" class="fc">
|
||
</div>
|
||
<div>
|
||
<label class="lbl">Prof. Inv. Date</label>
|
||
<input type="date" id="piDate" class="fc">
|
||
</div>
|
||
<div>
|
||
<label class="lbl">Prof. Inv. No.</label>
|
||
<input type="text" id="piNo" class="fc" placeholder="PI-XXXX">
|
||
</div>
|
||
<div>
|
||
<label class="lbl">Country of Origin</label>
|
||
<input id="countryOrigin" name="countryOrigin" class="fc" placeholder="INDIA">
|
||
</div>
|
||
<div>
|
||
<label class="lbl">Currency / CER</label>
|
||
<div class="cur-pair">
|
||
<span class="cur-badge">USD</span>
|
||
<input type="hidden" id="currency" value="USD" />
|
||
<input type="number" id="currencyCER" name="currencyCER" value="59.00" class="fc" step="0.01">
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<label class="lbl">Discount</label>
|
||
<input type="number" id="discount" name="discount"
|
||
class="fc" placeholder="0.00" step="0.01" min="0">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Row 2: Left terms | Right charges+amounts -->
|
||
<div class="g-row-2">
|
||
|
||
<!-- Left column -->
|
||
<div class="terms-col">
|
||
|
||
<!-- Payment Terms + Incoterms -->
|
||
<div class="terms-row">
|
||
<div>
|
||
<label class="lbl">Payment Terms</label>
|
||
<input type="search" name="C-paymentTerms" id="C-paymentTerms" class="fc" placeholder="Search...">
|
||
<input type="hidden" id="C-paymentTermsId" name="C-paymentTermsId" />
|
||
</div>
|
||
<div>
|
||
<label class="lbl">Incoterms <i class="bx bxs-message-rounded-add icon-add" onclick="viewIncoterms()" title="Add"></i></label>
|
||
<input type="search" name="incotermsName" id="incotermsName" class="fc" placeholder="Search...">
|
||
<input type="hidden" id="incoTermsId" name="incoTermsId" />
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Port + Shipping -->
|
||
<div class="terms-row">
|
||
<div>
|
||
<label class="lbl">Port of Discharge</label>
|
||
<select class="fc" name="podId" id="podId">
|
||
<option disabled selected>— Select —</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>
|
||
<label class="lbl">Shipping Instruction</label>
|
||
<select class="fc" name="shippingInstructionId" id="shippingInstructionId">
|
||
<option disabled selected>— Select —</option>
|
||
<option value="1">General AIR</option>
|
||
<option value="2">General COURIER</option>
|
||
<option value="3">General SEA FCL</option>
|
||
<option value="4">General SEA LCL</option>
|
||
<option value="5">RawMat AIR</option>
|
||
<option value="6">RawMat COURIER</option>
|
||
<option value="7">RawMat SEA FCL</option>
|
||
<option value="8">RawMat SEA LCL</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Docs + Remarks -->
|
||
<div class="terms-row" style="flex:1;">
|
||
<div style="display:flex;flex-direction:column;">
|
||
<label class="lbl">Docs Required <i class="bx bxs-message-rounded-add icon-add" onclick="viewDocRequired()" title="Add"></i></label>
|
||
<textarea readonly id="docRequiredId" class="fc" placeholder="Docs will appear here..." style="flex:1;resize:none;height:80px;"></textarea>
|
||
</div>
|
||
<div style="display:flex;flex-direction:column;">
|
||
<label class="lbl">Remarks</label>
|
||
<textarea id="remarks" class="fc" placeholder="Special instructions…" style="flex:1;resize:none;height:80px;"></textarea>
|
||
</div>
|
||
</div>
|
||
|
||
</div><!-- /terms-col -->
|
||
<!-- Right column -->
|
||
<div class="right-panel">
|
||
|
||
<!-- List of Charges -->
|
||
<div style="display:flex;flex-direction:column;flex:1;">
|
||
<div class="charges-wrap" style="display:flex;flex-direction:column;flex:1;">
|
||
<div class="charges-header">
|
||
<span>List of Charges</span>
|
||
<button class="btn-add-charge" onclick="viewCharges()">
|
||
<i class="bx bxs-message-rounded-add"></i>
|
||
<span>Add</span>
|
||
</button>
|
||
</div>
|
||
<div class="charges-table-wrap" style="flex:1;">
|
||
<table id="DestChargesTable" class="tbl-charges">
|
||
<thead>
|
||
<tr>
|
||
<th style="display:none;">otherChargesId</th>
|
||
<th style="width:78%;">Charge Name</th>
|
||
<th style="width:14%;">Amount</th>
|
||
<th style="width:8%;">Action</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Amounts 2×2 -->
|
||
<div class="amounts-row">
|
||
<div>
|
||
<label class="lbl">Gross (USD)</label>
|
||
<div class="amt-box">
|
||
<span class="albl">USD Gross</span>
|
||
<input readonly name="grossAmountUSD" id="grossAmountUSD" placeholder="—">
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<label class="lbl">Final (USD)</label>
|
||
<div class="amt-box">
|
||
<span class="albl">USD Final</span>
|
||
<input readonly name="finalAmountUSD" id="finalAmountUSD" placeholder="—">
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<label class="lbl">Gross (PHP)</label>
|
||
<div class="amt-box php">
|
||
<span class="albl">PHP Gross</span>
|
||
<input readonly name="grossAmountPHP" id="grossAmountPHP" placeholder="—">
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<label class="lbl">Final (PHP)</label>
|
||
<div class="amt-box php">
|
||
<span class="albl">PHP Final</span>
|
||
<input readonly name="finalAmountPHP" id="finalAmountPHP" placeholder="—">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div><!-- /right-panel -->
|
||
</div><!-- /g-row-2 -->
|
||
|
||
</div><!-- /import-zone -->
|
||
<!-- Hidden inputs -->
|
||
<input hidden id="dr-ImportPoNo" />
|
||
<input hidden id="si-ImportPoNo" />
|
||
@await Html.PartialAsync("PagesView/PO/_DocRequired") |