588 lines
30 KiB
PHP
588 lines
30 KiB
PHP
@extends('admin.layouts.app')
|
||
|
||
@section('page-title', 'Account Dashboard')
|
||
|
||
@section('content')
|
||
<style>
|
||
body { font-family: 'Segoe UI', Arial, sans-serif; background: linear-gradient(135deg, #eef2f7, #f9fbff); margin:0; padding:0;}
|
||
.account-container { padding: 30px 40px; }
|
||
.account-header { margin-bottom: 25px; background: linear-gradient(90deg, #1a2951, #243a72); padding: 20px 25px; border-radius: 12px; box-shadow: 0 4px 10px rgba(0,0,0,0.15); color: #fff;}
|
||
.account-header h2 { font-size: 28px; font-weight: 700; margin: 0 0 5px 0;}
|
||
.account-header p { font-size: 15px; opacity: 0.9; margin: 2px 0;}
|
||
.search-row { display: flex; align-items: center; justify-content: space-between; margin-bottom:25px; flex-wrap:wrap; gap:10px;}
|
||
.search-row input { width:360px; padding:10px 14px; border-radius:8px; border:1px solid #d1d9e6; background: #fff; font-size:15px; box-shadow:0 1px 3px rgba(0,0,0,0.05);}
|
||
.search-row input:focus { border-color:#1a2951; box-shadow:0 0 4px rgba(26,41,81,0.2);}
|
||
.search-btn { background: linear-gradient(90deg, #1a2951, #243a72); color:white; border:none; border-radius:8px; padding:10px 22px; font-size:15px; cursor:pointer; font-weight:500; transition: all 0.2s;}
|
||
.search-btn:hover { background: linear-gradient(90deg, #243a72, #1a2951); transform: translateY(-2px); }
|
||
.account-panels { display:flex; justify-content:space-between; align-items:stretch; gap:25px; width:100%; flex-wrap:wrap; }
|
||
.panel-card { background: linear-gradient(180deg, #ffffff, #f5f7fb); border-radius:12px; box-shadow:0 4px 8px rgba(0,0,0,0.08); flex: 1; min-width:48%; padding:18px; box-sizing:border-box; overflow-x:auto; transition:0.3s;}
|
||
.panel-card:hover { box-shadow: 0 6px 14px rgba(0,0,0,0.15); transform: translateY(-2px);}
|
||
.panel-title { font-weight:600; font-size:17px; color:#1a2951; margin-bottom:12px; border-bottom:2px solid #e4e8f0; padding-bottom:6px; }
|
||
table { width:100%; border-collapse:collapse; min-width:700px; }
|
||
th, td { padding:10px 12px; text-align:left; font-size:15px; border-bottom: 1px solid #e5e9f2; white-space:nowrap;}
|
||
th { background: linear-gradient(90deg,#f3f6fb,#f9fbff); color:#4a5570; font-weight:600;}
|
||
tr:hover td { background-color:#f9fafc;}
|
||
.status-badge { display:inline-block; padding:6px 14px; border-radius:20px; color:#fff; font-size:13px; font-weight:500;}
|
||
.status-unpaid { background-color:#ef4f4f; }
|
||
.status-paid { background-color:#34c86c; }
|
||
.status-loading { background-color:#509cf8; }
|
||
.status-dispatched { background-color:#20c5c7; }
|
||
.pending-badge-red { background-color:#ef4f4f; }
|
||
.pending-badge-green { background-color:#34c86c; }
|
||
.entry-link { color:#3769d7; text-decoration:underline; font-weight:600;}
|
||
.toggle-switch-btn {
|
||
appearance: none; -webkit-appearance: none;
|
||
width: 48px; height: 22px;
|
||
background: #fa6464; border: 2px solid #fa6464;
|
||
border-radius: 999px;
|
||
position: relative; outline: none;
|
||
transition: background .25s, border .25s;
|
||
cursor: pointer; vertical-align: middle; display: inline-block;
|
||
}
|
||
.toggle-switch-btn::before { content: ""; display: block; width: 20px; height: 18px; left: 2px; top: 1px; background: #fff; border-radius: 50%; position: absolute; transition: .24s; box-shadow: 0 0 2px #999;}
|
||
.toggle-switch-btn:checked { background: #43d05c; border-color: #43d05c;}
|
||
.toggle-switch-btn:checked::before { transform: translateX(26px);}
|
||
.plus-btn { display: inline-block; width: 32px; height: 32px; border-radius: 12px; background: #fff; color: #1a2951; border: 1.8px solid #e5eaf2; font-size: 1.35rem; font-weight: 600; text-align: center; line-height: 28px; cursor: pointer; transition: background 0.19s, border 0.19s; vertical-align: middle; outline: none;}
|
||
.plus-btn:hover { background: #f4f6fa; border-color: #92a0c2; color: #204080;}
|
||
/* Modal */
|
||
.modal-fade1 { position:fixed; top:0; left:0; width:100vw; height:100vh; background:rgba(38,38,38,0.12); display:none; justify-content:center; align-items:center; z-index:999; }
|
||
.modal-fade1.modal-open { display:flex; }
|
||
.modal-fade {position:fixed; top:0; left:0; width:100vw; height:100vh; background:rgba(38,38,38,0.12); display:none; justify-content:center; align-items:center; z-index:999; }
|
||
.modal-fade.modal-open { display:flex; }
|
||
.modal-box1 { background:#fff; border-radius:16px; box-shadow:0 8px 44px #33487129; padding:0 34px 30px 34px; min-width:590px; max: width 100%;;}
|
||
.modal-box { background:#fff; border-radius:16px; box-shadow:0 8px 44px #33487129; padding:0 34px 30px 34px; min-width:590px; max: width 100%;;}
|
||
.modal-head, .modal-title-main { font-size: 25px; font-weight:700; margin-bottom:5px;}
|
||
.modal-desc, .modal-sub { font-size:16px; color:#6a7a8c; margin-bottom:13px;}
|
||
.modal-fade1{
|
||
position:fixed;
|
||
top:0; left:0;
|
||
width:100vw; height:100vh;
|
||
background:rgba(38,38,38,0.12);
|
||
display:none;
|
||
justify-content:center;
|
||
align-items:center;
|
||
z-index:999;
|
||
/* keep default */
|
||
}
|
||
|
||
.modal-fade1.modal-open {
|
||
display:flex;
|
||
}
|
||
|
||
.modal-box1 {
|
||
max-width: 550px;
|
||
min-width: 370px;
|
||
max-height: 90vh;
|
||
overflow-y: auto;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
/* Create Order Modal */
|
||
.create-order-form-main { display: flex; flex-direction: column; gap: 11px; margin-bottom:18px;}
|
||
.create-order-row { display:flex; gap:15px;}
|
||
.create-order-group { flex:1; display:flex; flex-direction:column;}
|
||
.create-order-group label { font-size:15px; font-weight:600; margin-bottom:3.5px; color:#222b44;}
|
||
.create-order-group input, .create-order-group select { font-size:16px; border-radius:7px; border:1.7px solid #d3d8ec; padding:8px 10px; background:#f8fafc; }
|
||
.create-order-group input:focus, .create-order-group select:focus { outline:none; border-color:#2672ca;}
|
||
/* Consolidated section */
|
||
.consolidate-tabs-main { display:flex; align-items:center; margin-bottom:0;}
|
||
.consolidate-tab-btn { border:none; outline:none; background:#edf0f8; font-weight:600; color:#1a2951; font-size:17px; padding:8px 20px 7px 18px; border-radius:11px 11px 0 0; margin-right:1px; transition: background 0.14s; cursor:pointer;}
|
||
.consolidate-tab-btn.active, .consolidate-tab-btn:focus { background:#f7c97d; color:#0d1736; }
|
||
#consolidateOrdersTable { width:100%; border-collapse:collapse; font-size:15px; background:#fffbe9; border-radius:7px; box-shadow:0 1px 8px #eeeae5;}
|
||
#consolidateOrdersTable th { background: #ffe0a7; font-weight:600; font-size:14.3px; border-bottom:2px solid #ffeabb;}
|
||
#consolidateOrdersTable td { background: #fffbe9; border:none; border-bottom:1px solid #f2e6ce;}
|
||
#consolidateOrdersTable tr:last-child td { border-bottom:none;}
|
||
#consolidateOrdersTable .order-link { color:#307fde; font-weight:600; text-decoration:underline; }
|
||
.modal-actions-row { display:flex; gap:26px; justify-content:flex-end; margin-top:18px;}
|
||
.modal-btn { padding:10px 38px; font-size:18px; border-radius:9px; font-weight:600; border:none; cursor:pointer; background:#1a2951; color:#fff; transition:0.18s;}
|
||
.modal-btn:hover { background:#243a72;}
|
||
.modal-btn.cancel { background:#e7eaf1; color:#243a72;}
|
||
.modal-btn.cancel:hover { background:#ccd2e2;}
|
||
|
||
/* Installment Modal */
|
||
.inst-detail-group { display:flex; flex-direction:column; align-items:flex-start; min-width:150px;}
|
||
.inst-detail-heading { color:#8a96b2; font-size:13.6px; font-weight:600; margin-bottom:2.5px; }
|
||
.inst-detail-val { font-weight:600; font-size:15px; color:#24376a; background: #f9fbff; display:inline-block; border-radius:8px; padding:7px 22px 7px 13px; min-width:80px;}
|
||
.inst-detail-pending { color:#e14a4a!important; background:#fff1f1;}
|
||
.inst-badge { font-weight:600; border-radius:9px; padding:4px 13px; font-size:15px; display:inline-block;}
|
||
.inst-badge-dispatched { background:#20c5c7; color:#fff;}
|
||
.inst-badge-pending { background:#ffb84c; color:#24376a;}
|
||
.inst-red { color:#d33; }
|
||
.inst-green { color:#20c872; }
|
||
.inst-blue { color:#509cf8; }
|
||
.inst-purple { color:#7d57d2; }
|
||
|
||
<!-- Add to your CSS section: -->
|
||
|
||
/* Modern Installment card style */
|
||
.installment-card { background: #fff; border-radius: 10px; margin-bottom: 11px; padding: 10px 16px 10px 10px; display: flex; align-items: center; box-shadow: 0 2.5px 7px 0 rgba(60,90,170,0.09);}
|
||
.installment-card:not(:first-child) { border-left: 3px solid #669cff; background: #f7faff; }
|
||
.installment-label { color: #2770ea; font-weight:700; text-decoration:underline; font-size:15px; min-width:105px;}
|
||
.installment-desc { color: #333; font-size: 14px; opacity: 0.89; margin-left:6px; flex:2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
|
||
.installment-date { color: #9ea7c1; font-size: 13px; margin-right:14px;}
|
||
.installment-amt { color: #20455a; font-weight:600; font-size:15px; background: #f8f5f5; border-radius:7px; padding:6px 16px; margin:0 10px;}
|
||
.installment-badge { padding:4px 15px; font-size:13.2px; border-radius:15px; font-weight:600; margin-left:4px; background:#22aebc; color:#fff;}
|
||
/* Totals row */
|
||
.installment-summary-row { margin-top: 18px; display: flex; gap:17px; justify-content:space-around; text-align:center; }
|
||
.isum-block { flex:1; }
|
||
.isum-num { font-weight:700; font-size:20px; display: block; }
|
||
.isum-blue { color:#367af6; }
|
||
.isum-green { color:#27ca58; }
|
||
.isum-red { color:#e58211; }
|
||
.isum-purple { color:#9856e6; }
|
||
|
||
.installment-block-card {
|
||
background: #fff;
|
||
border-radius: 15px;
|
||
border: 1.8px solid #eee;
|
||
padding: 18px 20px 18px 19px;
|
||
box-shadow: 0 3px 13px 0 rgba(30,44,68,0.08);
|
||
max-width: 700px;
|
||
margin:auto;
|
||
}
|
||
.installment-title { font-weight:600; font-size:15.8px; margin-bottom:11px; color:#102a44;}
|
||
.installment-list { margin-bottom:15px; }
|
||
.installment-card {
|
||
background: #fafdff;
|
||
border-radius: 10px;
|
||
margin-bottom: 11px;
|
||
padding: 12px 18px;
|
||
display: flex;
|
||
align-items: center;
|
||
box-shadow: 0 2.5px 7px 0 rgba(60,90,170,0.09);
|
||
border-left: 3px solid #a7cef7;
|
||
}
|
||
.installment-card.original {
|
||
border-left: 3px solid #2268c0;
|
||
background: #f6f8fd;
|
||
}
|
||
.installment-label {
|
||
color: #2268c0;
|
||
font-weight:700;
|
||
text-decoration:underline;
|
||
font-size:15.5px;
|
||
min-width:105px;
|
||
}
|
||
.installment-desc {
|
||
color: #314050;
|
||
font-size: 13.7px;
|
||
opacity: 0.89;
|
||
margin-left:8px;
|
||
flex:2;
|
||
white-space:nowrap;
|
||
overflow:hidden;
|
||
text-overflow:ellipsis;
|
||
}
|
||
.installment-date {
|
||
color: #7c8db2;
|
||
font-size: 13px;
|
||
margin-right:14px;
|
||
margin-left:10px;
|
||
}
|
||
.installment-amt {
|
||
color: #20455a;
|
||
font-weight:600;
|
||
font-size:15px;
|
||
background: #f8f5f5;
|
||
border-radius:7px;
|
||
padding:7px 15px;
|
||
margin:0 11px;
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
.installment-badge {
|
||
padding:5px 17px;
|
||
font-size:13px;
|
||
border-radius:15px;
|
||
font-weight:600;
|
||
margin-left:7px;
|
||
background:#2ec3ce;
|
||
color:#fff;
|
||
box-shadow:0 2px 8px rgba(40,120,150,0.10);
|
||
}
|
||
/* Summary Row */
|
||
.installment-summary-row {
|
||
margin-top: 2px;
|
||
padding-top:9px;
|
||
background:#f7f8fd;
|
||
border-radius:11px;
|
||
display: flex; gap:18px; justify-content:space-around; text-align:center;
|
||
}
|
||
.isum-block { flex:1; }
|
||
.isum-num { font-weight:700; font-size:18.5px; display: block; }
|
||
.isum-label { font-size:12.7px; color:#314050; }
|
||
.isum-blue { color:#276dea; }
|
||
.isum-green { color:#27ca58; }
|
||
.isum-red { color:#e58211; }
|
||
.isum-purple { color:#9856e6; }
|
||
|
||
|
||
|
||
|
||
@media(max-width:1024px){.modal-box{max-width:97vw;min-width:80vw;}}
|
||
@media(max-width:800px){.modal-box{min-width:99vw; max-width:99vw; padding:4px 1.5vw;} .create-order-row{flex-direction:column; gap:7px;}}
|
||
</style>
|
||
|
||
<div class="account-container">
|
||
<!-- Header -->
|
||
<div class="account-header">
|
||
<h2>Account Dashboard</h2>
|
||
<p>Viewing: China Region Orders</p>
|
||
<p>Workflow: Manage payments and dispatch process effectively</p>
|
||
</div>
|
||
<!-- Search -->
|
||
<div class="search-row">
|
||
<div>
|
||
<input type="text" id="main-search" placeholder="Search by Entry No or Description">
|
||
<button class="search-btn">Search</button>
|
||
</div>
|
||
<button class="search-btn" id="openOrderModal">+ Create New Order</button>
|
||
</div>
|
||
<div class="account-panels" id="account-panels">
|
||
<div class="panel-card">
|
||
<div class="panel-title">Payment Sent to China</div>
|
||
<table id="main-payment-table">
|
||
<thead>
|
||
<tr>
|
||
<th>Entry No</th><th>Date</th><th>Description</th>
|
||
<th>Order Quantity</th><th>Region</th><th>Toggle</th><th>Amount</th><th>Status</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>PAY-2023-042</td><td>2024-07-19</td>
|
||
<td>Electronic Cams</td><td>3</td><td>China</td>
|
||
<td><input type="checkbox" class="toggle-switch-btn" checked></td>
|
||
<td>₹3,000</td>
|
||
<td><span class="status-badge status-unpaid">Unpaid</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td>PAY-2023-041</td><td>2024-07-19</td>
|
||
<td>Electronic Cams</td><td>2</td><td>China</td>
|
||
<td><input type="checkbox" class="toggle-switch-btn"></td>
|
||
<td>₹2,000</td>
|
||
<td><span class="status-badge status-paid">Paid</span></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<div class="panel-card">
|
||
<div class="panel-title">Order Dispatch Status</div>
|
||
<table id="main-order-table">
|
||
<thead>
|
||
<tr>
|
||
<th>Entry No</th><th>Date</th><th>Description</th>
|
||
<th>Region</th><th>Amount</th><th>Status</th>
|
||
<th>Pending</th><th></th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td><a href="#" class="entry-link">PAY-2023-042</a></td>
|
||
<td>2024-07-19</td>
|
||
<td>Electronic Cams</td>
|
||
<td>China</td>
|
||
<td>₹3,000</td>
|
||
<td><span class="status-badge status-loading">Loading</span></td>
|
||
<td><span class="status-badge pending-badge-green">Completed</span></td>
|
||
<td><button class="plus-btn" title="Add" onclick="openInstallmentModal('PAY-2023-042', 'Electronic Cams', 'China', 8000)"><span style="font-size:21px;">+</span></button></td>
|
||
</tr>
|
||
<tr>
|
||
<td><a href="#" class="entry-link">PAY-2023-041</a></td>
|
||
<td>2024-07-19</td>
|
||
<td>Electronic Cams</td>
|
||
<td>China</td>
|
||
<td>₹2,000</td>
|
||
<td><span class="status-badge status-dispatched">Dispatched</span></td>
|
||
<td><span class="status-badge pending-badge-red">₹1,000</span></td>
|
||
<td><button class="plus-btn" title="Add" onclick="openInstallmentModal('PAY-2023-041', 'Electronic Cams', 'China', 1000)"><span style="font-size:21px;">+</span></button></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- CREATE NEW ORDER MODAL (matches your images, all layout/fields horizontal) -->
|
||
<div class="modal-fade" id="orderModal">
|
||
<div class="modal-box">
|
||
<div class="modal-head" style="margin-top:18px;">Create New Order Entry</div>
|
||
<div class="modal-desc">Create a new order entry and consolidate orders for processing.</div>
|
||
<form id="createOrderForm" autocomplete="off">
|
||
<div class="create-order-form-main">
|
||
<div class="create-order-row">
|
||
<div class="create-order-group">
|
||
<label>Description *</label>
|
||
<input type="text" name="desc" required>
|
||
</div>
|
||
<div class="create-order-group">
|
||
<label>Region *</label>
|
||
<select name="region" required>
|
||
<option value="China">China</option>
|
||
<option value="Europe">Europe</option>
|
||
<option value="US">US</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="create-order-row">
|
||
<div class="create-order-group">
|
||
<label>Total Amount (₹) *</label>
|
||
<input type="number" name="amount" min="0" required>
|
||
</div>
|
||
<div class="create-order-group">
|
||
<label>Entry Date *</label>
|
||
<input type="date" name="entrydate" required>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div class="consolidate-tabs-main">
|
||
<button type="button" class="consolidate-tab-btn active" id="toggleConsolidatedBtn"><span id="toggleConsolidatedText">Hide Orders</span></button>
|
||
<span style="font-weight:600; font-size:16px; color:#1e2d4e; margin-left:10px;">Consolidated Orders</span>
|
||
</div>
|
||
<div class="consol-orders-section" id="consolidateOrdersList" style="margin-bottom:4px;">
|
||
<table id="consolidateOrdersTable">
|
||
<thead>
|
||
<tr>
|
||
<th></th>
|
||
<th>Order ID</th>
|
||
<th>Item No</th>
|
||
<th>Description</th>
|
||
<th>CTN</th>
|
||
<th>QTY</th>
|
||
<th>TTL/QTY</th>
|
||
<th>Unit</th>
|
||
<th>Price (₹)</th>
|
||
<th>Amount (₹)</th>
|
||
<th>CBM</th>
|
||
<th>TTL CBM</th>
|
||
<th>KG</th>
|
||
<th>TTL KG</th>
|
||
<th>Shop No</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td><input type="checkbox" checked></td>
|
||
<td><a href="#" class="order-link">KNT-2024-003</a></td>
|
||
<td>ITEM03</td>
|
||
<td>Electronic Components...</td>
|
||
<td>1</td><td>6</td><td>6</td>
|
||
<td>SET</td><td>₹800.00</td><td>₹4800.00</td>
|
||
<td>6.00</td><td>6.00</td><td>45.00</td><td>45.00</td><td>SH003</td>
|
||
</tr>
|
||
<tr>
|
||
<td><input type="checkbox"></td>
|
||
<td><a href="#" class="order-link">KNT-2024-003</a></td>
|
||
<td>ITEM03</td>
|
||
<td>Electronic Components...</td>
|
||
<td>1</td><td>6</td><td>6</td>
|
||
<td>SET</td><td>₹800.00</td><td>₹4800.00</td>
|
||
<td>6.00</td><td>6.00</td><td>45.00</td><td>45.00</td><td>SH003</td>
|
||
</tr>
|
||
<tr>
|
||
<td><input type="checkbox"></td>
|
||
<td><a href="#" class="order-link">KNT-2024-003</a></td>
|
||
<td>ITEM03</td>
|
||
<td>Electronic Components...</td>
|
||
<td>1</td><td>6</td><td>6</td>
|
||
<td>SET</td><td>₹800.00</td><td>₹4800.00</td>
|
||
<td>6.00</td><td>6.00</td><td>45.00</td><td>45.00</td><td>SH003</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
<div class="modal-actions-row">
|
||
<button type="button" class="modal-btn cancel" id="cancelOrderModal">Cancel</button>
|
||
<button type="submit" class="modal-btn">Create</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
<!-- Add Installment Modal (Wide Card Style) -->
|
||
<div class="modal-fade1" id="installmentModal">
|
||
<div class="modal-box1" style="max: width 90%;; min-width:500px;">
|
||
<div style="display:flex; align-items:center; margin-bottom:12px;">
|
||
<span style="font-size:1.22rem; font-weight:700; margin-top:50px;">+ Add New Installment</span>
|
||
<button style="margin-left:auto; background:none; border:none; font-size:1.33rem; color:#aaa; cursor:pointer; font-weight:600;" onclick="closeInstallmentModal()">×</button>
|
||
</div>
|
||
<div style="font-size:16px; color:#7687a3; margin-bottom:18px;">Create a new processing entry for the remaining pending amount</div>
|
||
<div id="instDetailsRow" style="display:flex; gap:22px; margin-bottom:17px;"></div>
|
||
<form id="installmentForm" autocomplete="off">
|
||
<div style="display:flex; gap:15px; margin-bottom:9px;">
|
||
<div style="flex:1; display:flex; flex-direction:column;">
|
||
<label style="font-weight:600; color:#253c57; font-size:15px; margin-bottom:2px;">Processing Date *</label>
|
||
<input type="date" name="proc_date" required style="font-size:15px; border-radius:7px; border:1.5px solid #d3d8ec; background:#f8fafc; padding:8px;">
|
||
</div>
|
||
<div style="flex:1; display:flex; flex-direction:column;">
|
||
<label style="font-weight:600; color:#253c57; font-size:15px; margin-bottom:2px;">Processing Amount *</label>
|
||
<input type="number" min="1" name="proc_amount" required style="font-size:15px; border-radius:7px; border:1.5px solid #d3d8ec; background:#f8fafc; padding:8px;" placeholder="Enter amount">
|
||
<span style="font-size:12px; color:#8e97ba; margin-top:3px;">Maximum: <span id="maxPending"></span></span>
|
||
</div>
|
||
<div style="flex:1; display:flex; flex-direction:column;">
|
||
<label style="font-weight:600; color:#253c57; font-size:15px; margin-bottom:2px;">Status</label>
|
||
<select name="status" required style="font-size:15px; border-radius:7px; border:1.5px solid #d3d8ec; background:#f8fafc; padding:8px;">
|
||
<option value="Pending">Pending</option>
|
||
<option value="Loading">Loading</option>
|
||
<option value="Packed">Packed</option>
|
||
<option value="Dispatched">Dispatched</option>
|
||
<option value="Delivered">Delivered</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div style="font-weight:600; font-size:16px; color:#253c57; margin:12px 0 7px 0;">Processing History</div>
|
||
|
||
<div style="padding:16px;">
|
||
<div class="installment-block-card">
|
||
<div class="installment-title">Current Installments (2)</div>
|
||
<!-- Card List START -->
|
||
<div class="installment-list">
|
||
<div class="installment-card original">
|
||
<span class="installment-label">Original Entry</span>
|
||
<span class="installment-desc">Electronics ...</span>
|
||
<span class="installment-date">2024-01-15</span>
|
||
<span class="installment-amt">₹2,000</span>
|
||
<span class="installment-badge">Dispatched</span>
|
||
</div>
|
||
<div class="installment-card">
|
||
<span class="installment-label">Installment 2</span>
|
||
<span class="installment-desc">Electronics ...</span>
|
||
<span class="installment-date">2024-01-20</span>
|
||
<span class="installment-amt">₹2,000</span>
|
||
<span class="installment-badge">Dispatched</span>
|
||
</div>
|
||
</div>
|
||
<!-- Card List END -->
|
||
|
||
<!-- SUMMARY ROW START -->
|
||
<div class="installment-summary-row">
|
||
<div class="isum-block">
|
||
<span class="isum-num isum-blue">2</span>
|
||
<span class="isum-label">Total Installments</span>
|
||
</div>
|
||
<div class="isum-block">
|
||
<span class="isum-num isum-green">₹2,000</span>
|
||
<span class="isum-label">Total Processed</span>
|
||
</div>
|
||
<div class="isum-block">
|
||
<span class="isum-num isum-red">₹8,000</span>
|
||
<span class="isum-label">Remaining Balance</span>
|
||
</div>
|
||
<div class="isum-block">
|
||
<span class="isum-num isum-purple">₹10,000</span>
|
||
<span class="isum-label">Original Amount</span>
|
||
</div>
|
||
</div>
|
||
<!-- SUMMARY ROW END -->
|
||
</div>
|
||
</div>
|
||
|
||
<div style="display:flex; justify-content: flex-end; gap:16px; margin-top:8px;">
|
||
<button type="button" class="modal-btn cancel" onclick="closeInstallmentModal()">Cancel</button>
|
||
<button type="submit" class="modal-btn">Create Installment</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
const installmentHistory = [
|
||
{ ref: 'PAY-2023-042', desc: 'Electronic Cams', date: '2024-07-19', amt: 2000, status: 'Dispatched' },
|
||
{ ref: 'PAY-2023-042', desc: 'Electronic Cams', date: '2024-08-01', amt: 2000, status: 'Dispatched' }
|
||
];
|
||
// Installment Modal
|
||
function openInstallmentModal(ref, desc, region, pending) {
|
||
document.getElementById('installmentModal').classList.add('modal-open');
|
||
document.getElementById('instDetailsRow').innerHTML = `
|
||
<div class="inst-detail-group"><div class="inst-detail-heading">Entry No</div><div class="inst-detail-val">${ref}</div></div>
|
||
<div class="inst-detail-group"><div class="inst-detail-heading">Description</div><div class="inst-detail-val">${desc}</div></div>
|
||
<div class="inst-detail-group"><div class="inst-detail-heading">Region</div><div class="inst-detail-val">${region}</div></div>
|
||
<div class="inst-detail-group"><div class="inst-detail-heading">Pending Balance</div><div class="inst-detail-val inst-detail-pending">₹${pending.toLocaleString()}</div></div>
|
||
`;
|
||
document.getElementById('maxPending').innerText = `₹${pending.toLocaleString()}`;
|
||
let instHtml = `<div class="modal-hist-box"><div style="margin-bottom:3px;"><b>Current Installments (${installmentHistory.length})</b></div>`;
|
||
installmentHistory.forEach((inst, idx) => {
|
||
instHtml += `<div>
|
||
<span style="color:#2268c0;text-decoration:underline;font-weight:600;">
|
||
${idx ? 'Installment ' + (idx+1) : 'Original Entry'}
|
||
</span>
|
||
<span style="margin-left:10px;">${inst.date}</span>
|
||
<span style="margin-left:10px;">${inst.desc}</span>
|
||
<span style="margin-left:12px;" class="inst-badge inst-badge-dispatched">${inst.status}</span>
|
||
<span style="margin-left:13px;" class="inst-green"><b>₹${inst.amt.toLocaleString()}</b></span>
|
||
</div>`;
|
||
});
|
||
instHtml += `<div style="margin-top:9px;">
|
||
<span class="inst-num">${installmentHistory.length}</span> <span>Total Installments</span>
|
||
<span class="inst-green inst-num">₹2,000</span> <span>Total Processed</span>
|
||
<span class="inst-blue inst-num">₹8,000</span> <span>Remaining Balance</span>
|
||
<span class="inst-purple inst-num">₹10,000</span> <span>Original Amount</span>
|
||
</div>
|
||
</div>`;
|
||
document.getElementById('installmentHistory').innerHTML = instHtml;
|
||
}
|
||
function closeInstallmentModal() {
|
||
document.getElementById('installmentModal').classList.remove('modal-open');
|
||
}
|
||
document.getElementById('openOrderModal').onclick = function(){
|
||
document.getElementById('orderModal').classList.add('modal-open');
|
||
};
|
||
// Tab-style Consolidated Orders: only one (for appearance - can extend for more tabs if needed)
|
||
const toggleBtn = document.getElementById('toggleConsolidatedBtn');
|
||
const consolOrdersList = document.getElementById('consolidateOrdersList');
|
||
const toggleText = document.getElementById('toggleConsolidatedText');
|
||
toggleBtn.onclick = function(){
|
||
if(consolOrdersList.style.display === "none"){
|
||
consolOrdersList.style.display="block"; toggleText.textContent="Hide Orders"; toggleBtn.classList.add('active');
|
||
} else {
|
||
consolOrdersList.style.display="none"; toggleText.textContent="Show Orders"; toggleBtn.classList.remove('active');
|
||
}
|
||
};
|
||
document.getElementById('cancelOrderModal').onclick = function(){
|
||
document.getElementById('orderModal').classList.remove('modal-open');
|
||
};
|
||
document.getElementById('orderModal').onclick = function(e){
|
||
if(e.target === this) this.classList.remove('modal-open');
|
||
};
|
||
// Create Order logic
|
||
document.getElementById('createOrderForm').addEventListener('submit', function(e) {
|
||
e.preventDefault();
|
||
const desc = this.desc.value || 'Electronic Cams';
|
||
const region = this.region.value || 'China';
|
||
const amount = this.amount.value || '0';
|
||
const date = this.entrydate.value || '2024-07-19';
|
||
const entryNo = 'PAY-2024-' + Math.floor(100 + Math.random() * 900);
|
||
document.querySelector('#main-payment-table tbody').insertAdjacentHTML('beforeend', `
|
||
<tr>
|
||
<td>${entryNo}</td>
|
||
<td>${date}</td>
|
||
<td>${desc}</td>
|
||
<td>1</td>
|
||
<td>${region}</td>
|
||
<td><input type="checkbox" class="toggle-switch-btn"></td>
|
||
<td>₹${amount}</td>
|
||
<td><span class="status-badge status-unpaid">Unpaid</span></td>
|
||
</tr>
|
||
`);
|
||
document.querySelector('#main-order-table tbody').insertAdjacentHTML('beforeend', `
|
||
<tr>
|
||
<td><a href="#" class="entry-link">${entryNo}</a></td>
|
||
<td>${date}</td>
|
||
<td>${desc}</td>
|
||
<td>${region}</td>
|
||
<td>₹${amount}</td>
|
||
<td><span class="status-badge status-loading">Loading</span></td>
|
||
<td><span class="status-badge pending-badge-green">Completed</span></td>
|
||
<td>
|
||
<button class="plus-btn" title="Add" onclick="openInstallmentModal('${entryNo}', '${desc}', '${region}', 0)">
|
||
<span style="font-size:21px;">+</span>
|
||
</button>
|
||
</td>
|
||
</tr>
|
||
`);
|
||
document.getElementById('orderModal').classList.remove('modal-open');
|
||
this.reset();
|
||
});
|
||
</script>
|
||
@endsection
|