const fs = require('fs');

let html = fs.readFileSync('index.html', 'utf8');

const regex = /<span id="client-abstract-net-total" style="font-size: 2\.5rem; font-weight: bold; color: var\(--success\);">0<\/span>[\s\S]*?<div class="modal-actions"/;

const replacement = `<span id="client-abstract-net-total" style="font-size: 2.5rem; font-weight: bold; color: var(--success);">0</span>
          <span style="color: #aaa; margin-top: 10px;">ج.م</span>
        </div>
      </div>

      <div id="client-ab-linked-vouchers-container" style="display: none; margin-top: 20px; padding: 20px; background: rgba(0,0,0,0.2); border-radius: 8px; border: 1px solid #444; clear: both; width: 100%; box-sizing: border-box;">
        <div style="display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #555; padding-bottom: 10px; margin-bottom: 15px;">
          <h3 style="margin:0; color: var(--primary);"><i class="fas fa-receipt"></i> الدفعات المحصلة لهذا المستخلص</h3>
          <button class="action-btn" id="btn-pay-client-abstract-inner" style="background:var(--success); color:#fff; padding:5px 15px; font-size:1rem; border:none; display:none;" onclick="payClientAbstractFromModal()">+ سند قبض</button>
        </div>
        <div style="display: flex; gap: 40px; font-weight: bold; font-size: 1.3rem; margin-bottom: 15px;">
          <div style="color: var(--success);">إجمالي المحصل: <span id="client-ab-total-paid">0</span></div>
          <div style="color: var(--danger);">المتبقي من المستخلص: <span id="client-ab-remaining">0</span></div>
        </div>
        <ul id="client-ab-linked-vouchers-list" style="list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 5px;"></ul>
      </div>

      <div class="modal-actions"`;

html = html.replace(regex, replacement);
fs.writeFileSync('index.html', html, 'utf8');
console.log('Added client abstract payments list HTML!');
