@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>&nbsp; 
            <span class="inst-green inst-num">₹2,000</span>&nbsp; <span>Total Processed</span>&nbsp; 
            <span class="inst-blue inst-num">₹8,000</span>&nbsp; <span>Remaining Balance</span>&nbsp;
            <span class="inst-purple inst-num">₹10,000</span>&nbsp;<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