448 lines
14 KiB
Plaintext
448 lines
14 KiB
Plaintext
<style>
|
|
:root {
|
|
--brand: #0f6e56;
|
|
--brand-light: #e1f5ee;
|
|
--brand-mid: #1d9e75;
|
|
--surface: #f7f8fa;
|
|
--card-bg: #ffffff;
|
|
--border: #e2e6ea;
|
|
--border-focus: #1d9e75;
|
|
--text-primary: #1a1f2b;
|
|
--text-muted: #6c757d;
|
|
--radius-card: 14px;
|
|
--radius-input: 8px;
|
|
--shadow-card: 0 2px 12px rgba(0,0,0,.07);
|
|
--shadow-modal: 0 8px 40px rgba(0,0,0,.16);
|
|
}
|
|
|
|
#btnAddNewSupplier {
|
|
width: auto !important;
|
|
display: inline-block !important;
|
|
}
|
|
|
|
body {
|
|
background: #dde3ec;
|
|
font-family: 'DM Sans', sans-serif;
|
|
}
|
|
|
|
/* ── Modal shell ── */
|
|
.modal-backdrop-card {
|
|
position: fixed;
|
|
inset: 0;
|
|
background: rgba(15,30,50,.45);
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 1.25rem;
|
|
}
|
|
|
|
.modal-shell {
|
|
background: var(--surface);
|
|
border-radius: 20px;
|
|
box-shadow: var(--shadow-modal);
|
|
width: 100%;
|
|
max-width: 860px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* ── Header ── */
|
|
.modal-hdr {
|
|
background: var(--brand);
|
|
padding: 1.1rem 1.75rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.modal-hdr h5 {
|
|
margin: 0;
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
color: #fff;
|
|
letter-spacing: .3px;
|
|
}
|
|
|
|
.modal-hdr .badge-mode {
|
|
font-size: .7rem;
|
|
font-weight: 500;
|
|
background: rgba(255,255,255,.18);
|
|
color: #fff;
|
|
padding: .25rem .65rem;
|
|
border-radius: 20px;
|
|
}
|
|
|
|
/* ── Body ── */
|
|
.modal-body-wrap {
|
|
padding: 1.5rem 1.75rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
}
|
|
|
|
/* ── Card ── */
|
|
.m-card {
|
|
background: var(--card-bg);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-card);
|
|
padding: 1.25rem 1.4rem;
|
|
box-shadow: var(--shadow-card);
|
|
}
|
|
|
|
.m-card-title {
|
|
font-size: .68rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: .8px;
|
|
color: var(--brand);
|
|
margin-bottom: 1rem;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: .45rem;
|
|
}
|
|
|
|
.m-card-title::before {
|
|
content: '';
|
|
display: block;
|
|
width: 3px;
|
|
height: 14px;
|
|
background: var(--brand);
|
|
border-radius: 2px;
|
|
}
|
|
|
|
/* ── Grid layouts ── */
|
|
.grid-2 {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: .9rem 1.25rem;
|
|
}
|
|
|
|
.grid-3 {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
gap: .9rem 1.25rem;
|
|
}
|
|
|
|
.grid-4 {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 1fr 1fr;
|
|
gap: .9rem 1.25rem;
|
|
}
|
|
|
|
.span-2 {
|
|
grid-column: span 2;
|
|
}
|
|
|
|
.span-full {
|
|
grid-column: 1 / -1;
|
|
}
|
|
|
|
/* ── Form controls ── */
|
|
.f-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: .3rem;
|
|
}
|
|
|
|
.f-label {
|
|
font-size: .78rem;
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.f-control {
|
|
font-family: 'DM Sans', sans-serif;
|
|
font-size: .875rem;
|
|
color: var(--text-primary);
|
|
background: #fff;
|
|
border: 1.5px solid var(--border);
|
|
border-radius: var(--radius-input);
|
|
padding: .45rem .7rem;
|
|
width: 100%;
|
|
outline: none;
|
|
transition: border-color .18s, box-shadow .18s;
|
|
}
|
|
|
|
.f-control:focus {
|
|
border-color: var(--border-focus);
|
|
box-shadow: 0 0 0 3px rgba(29,158,117,.12);
|
|
}
|
|
|
|
textarea.f-control {
|
|
resize: vertical;
|
|
min-height: 72px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
select.f-control {
|
|
cursor: pointer;
|
|
appearance: none;
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236c757d' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
|
|
background-repeat: no-repeat;
|
|
background-position: right .75rem center;
|
|
padding-right: 2rem;
|
|
}
|
|
|
|
/* ── Toggle switch ── */
|
|
.toggle-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: .65rem;
|
|
padding: .55rem 0;
|
|
}
|
|
|
|
.toggle-label {
|
|
font-size: .78rem;
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.toggle-status {
|
|
font-size: .78rem;
|
|
color: var(--text-muted);
|
|
font-weight: 500;
|
|
min-width: 28px;
|
|
}
|
|
|
|
.sw {
|
|
position: relative;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.sw input {
|
|
position: absolute;
|
|
opacity: 0;
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
|
|
.sw-track {
|
|
width: 40px;
|
|
height: 22px;
|
|
background: #d1d5db;
|
|
border-radius: 11px;
|
|
cursor: pointer;
|
|
transition: background .2s;
|
|
position: relative;
|
|
display: block;
|
|
}
|
|
|
|
.sw input:checked + .sw-track {
|
|
background: var(--brand-mid);
|
|
}
|
|
|
|
.sw-thumb {
|
|
position: absolute;
|
|
top: 3px;
|
|
left: 3px;
|
|
width: 16px;
|
|
height: 16px;
|
|
background: #fff;
|
|
border-radius: 50%;
|
|
transition: transform .2s;
|
|
pointer-events: none;
|
|
box-shadow: 0 1px 3px rgba(0,0,0,.2);
|
|
}
|
|
|
|
.sw input:checked ~ .sw-thumb {
|
|
transform: translateX(18px);
|
|
}
|
|
|
|
/* ── Footer ── */
|
|
.modal-ftr {
|
|
border-top: 1px solid var(--border);
|
|
padding: .9rem 1.75rem;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: .6rem;
|
|
background: #fff;
|
|
}
|
|
|
|
.btn-back {
|
|
font-family: 'DM Sans',sans-serif;
|
|
font-size: .85rem;
|
|
font-weight: 600;
|
|
padding: .5rem 1.2rem;
|
|
border-radius: 8px;
|
|
border: 1.5px solid var(--border);
|
|
background: #fff;
|
|
color: var(--text-muted);
|
|
cursor: pointer;
|
|
transition: background .15s;
|
|
}
|
|
|
|
.btn-back:hover {
|
|
background: var(--surface);
|
|
}
|
|
|
|
.btn-save {
|
|
font-family: 'DM Sans',sans-serif;
|
|
font-size: .85rem;
|
|
font-weight: 600;
|
|
padding: .5rem 1.4rem;
|
|
border-radius: 8px;
|
|
border: none;
|
|
background: var(--brand);
|
|
color: #fff;
|
|
cursor: pointer;
|
|
transition: background .15s;
|
|
}
|
|
|
|
.btn-save:hover {
|
|
background: #0d5e48;
|
|
}
|
|
|
|
.btn-update {
|
|
font-family: 'DM Sans',sans-serif;
|
|
font-size: .85rem;
|
|
font-weight: 600;
|
|
padding: .5rem 1.4rem;
|
|
border-radius: 8px;
|
|
border: none;
|
|
background: #e9a820;
|
|
color: #fff;
|
|
cursor: pointer;
|
|
transition: background .15s;
|
|
}
|
|
|
|
.btn-update:hover {
|
|
background: #c98d10;
|
|
}
|
|
/* Kill Bootstrap's appended backdrop globally */
|
|
.modal-backdrop {
|
|
display: none !important;
|
|
}
|
|
|
|
#addNewEditSupplier::before {
|
|
content: '';
|
|
position: fixed;
|
|
inset: 0;
|
|
pointer-events: all;
|
|
z-index: 1060; /* ← add this — confirmation modal at 1080 sits above it */
|
|
}
|
|
|
|
#addNewEditSupplier .modal-dialog {
|
|
pointer-events: all;
|
|
position: relative;
|
|
z-index: 1061; /* ← just above ::before so card is clickable */
|
|
}
|
|
</style>
|
|
<!-- Modal addNewEditSupplier -->
|
|
<div class="modal fade" id="addNewEditSupplier" tabindex="-1" aria-hidden="true" data-bs-backdrop="static">
|
|
<div class="modal-dialog modal-xl modal-dialog-centered" style="max-width:860px;">
|
|
<div class="modal-shell">
|
|
|
|
<!-- Header -->
|
|
<div class="modal-hdr">
|
|
<h5 id="headerNew">Add new supplier</h5>
|
|
<h5 id="headerUpdate" style="display:none;">Update supplier</h5>
|
|
<span class="badge-mode" id="modeBadge">New</span>
|
|
</div>
|
|
|
|
<!-- Body -->
|
|
<div class="modal-body-wrap">
|
|
|
|
<!-- Card 1: Basic Info -->
|
|
<div class="m-card">
|
|
<div class="m-card-title">Basic Information</div>
|
|
<div class="grid-2">
|
|
<div class="f-group span-full">
|
|
<label class="f-label" for="supplierName">Supplier Name</label>
|
|
<input type="text" id="supplierName" name="supplierName" class="f-control" placeholder="Enter supplier name" />
|
|
</div>
|
|
<div class="f-group span-full">
|
|
<label class="f-label" for="address">Address</label>
|
|
<textarea id="address" name="address" class="f-control" placeholder="Enter full address" style="min-height:80px;"></textarea>
|
|
</div>
|
|
<div class="f-group span-full">
|
|
<label class="f-label" for="emailAddress">Email Address</label>
|
|
<input type="email" id="emailAddress" name="emailAddress" class="f-control" placeholder="supplier@example.com" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Card 2: Contact & Financial -->
|
|
<div class="grid-2" style="gap:1rem;">
|
|
|
|
<!-- Contact -->
|
|
<div class="m-card">
|
|
<div class="m-card-title">Contact Details</div>
|
|
<div class="f-group" style="margin-bottom:.85rem;">
|
|
<label class="f-label" for="contactNo">Contact No.</label>
|
|
<input type="text" id="contactNo" name="contactNo" class="f-control" placeholder="63 9XX XXX XXXX" />
|
|
</div>
|
|
<div class="f-group">
|
|
<label class="f-label" for="contactPerson">Contact Person</label>
|
|
<input type="text" id="contactPerson" name="contactPerson" class="f-control" placeholder="e.g. MS. IVY" />
|
|
</div>
|
|
@* <div class="f-group">
|
|
<label class="f-label" for="whatsappNo">WhatsApp No.</label>
|
|
<input type="text" id="whatsappNo" name="whatsappNo" class="f-control" placeholder="63 9XX XXX XXXX" />
|
|
</div> *@
|
|
</div>
|
|
|
|
<!-- Financial -->
|
|
<div class="m-card">
|
|
<div class="m-card-title">Financial Settings</div>
|
|
<div class="grid-2" style="margin-bottom:.85rem;">
|
|
<div class="f-group">
|
|
<label class="f-label" for="currencyCode">Currency</label>
|
|
<select class="form-control" id="currencyId" style="margin-bottom:10px;">
|
|
<option value="" disabled selected>-Select Currency-</option>
|
|
<option value="1">PHP</option>
|
|
<option value="2">USD</option>
|
|
<option value="3">GBP</option>
|
|
<option value="4">YUAN</option>
|
|
<option value="5">POUND STERLING</option>
|
|
<option value="6">YEN</option>
|
|
<option value="7">CHF</option>
|
|
<option value="8">JPY</option>
|
|
<option value="9">EUR</option>
|
|
</select>
|
|
</div>
|
|
<div class="f-group">
|
|
<label class="C-paymentTerms" for="creditTermName">Payment Termsm</label>
|
|
<input type="search" id="C-paymentTerms" name="C-paymentTerms" class="f-control" placeholder="Search term..." />
|
|
<input type="hidden" id="C-paymentTermsId" name="C-paymentTermsId" />
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Toggles -->
|
|
<div style="border-top:1px solid var(--border); padding-top:.85rem; display:flex; flex-direction:column; gap:.1rem;">
|
|
<label class="toggle-label" style="margin-bottom:.35rem; font-size:.72rem; text-transform:uppercase; letter-spacing:.6px; color:var(--text-muted);">Settings</label>
|
|
|
|
<div class="toggle-row">
|
|
<div class="sw">
|
|
<input type="checkbox" id="vatInc" name="vatInc">
|
|
<label for="vatInc" class="sw-track"></label>
|
|
<span class="sw-thumb"></span>
|
|
</div>
|
|
<span class="toggle-label">Vat Inc.</span>
|
|
<span class="toggle-status" id="vatIncText">Yes</span>
|
|
</div>
|
|
|
|
<div class="toggle-row">
|
|
<div class="sw">
|
|
<input type="checkbox" id="isActive" name="isActive">
|
|
<label for="isActive" class="sw-track"></label>
|
|
<span class="sw-thumb"></span>
|
|
</div>
|
|
<span class="toggle-label">Status</span>
|
|
<span class="toggle-status" id="statusText">Active</span>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div><!-- /grid-2 -->
|
|
</div><!-- /modal-body-wrap -->
|
|
<!-- Footer -->
|
|
<div class="modal-ftr">
|
|
<button class="btn-back" type="button" onclick="refreshSupplierTable()" data-bs-dismiss="modal">Back</button>
|
|
<button class="btn-save" type="button" id="btnaddNewSupplier" onclick="postPutMySupplier(1)">Save</button>
|
|
<button class="btn-update" type="button" id="btnUpdateSupplier" onclick="postPutMySupplier(0)" style="display:none;">Update</button>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|