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

// 1. Remove the duplicated modals block
let firstAcc = content.indexOf('<!-- Account Modal -->');
let secondAcc = content.indexOf('<!-- Account Modal -->', firstAcc + 1);
if (firstAcc !== -1 && secondAcc !== -1) {
    content = content.substring(0, firstAcc) + content.substring(secondAcc);
    console.log("Removed duplicated modals block.");
} else {
    console.log("Could not find duplicated Account Modals.");
}

// 2. Fix the broken purchases table
let brokenTableStart = content.indexOf('<table class="data-table" style="margin-top: 15px;">\r\n        <thead>\r\n          <tr>\r\n            <th>الصنف</th>\r\n              <th>الكمية</th>\r\n              <th>سعر الوحدة</th>\r\n              <th>الخصم</th>\r\n              <th>الإجمالي</th>\r\n\r\n      <div class="modal-actions" style="margin-top:20px;">');
if(brokenTableStart === -1) {
    brokenTableStart = content.indexOf('<table class="data-table" style="margin-top: 15px;">\n        <thead>\n          <tr>\n            <th>الصنف</th>\n              <th>الكمية</th>\n              <th>سعر الوحدة</th>\n              <th>الخصم</th>\n              <th>الإجمالي</th>\n\n      <div class="modal-actions" style="margin-top:20px;">');
}

if (brokenTableStart !== -1) {
    let beforeTable = content.substring(0, brokenTableStart);
    let afterTable = content.substring(content.indexOf('<div class="modal-actions" style="margin-top:20px;">', brokenTableStart));
    
    let replacement = `<table class="data-table" style="margin-top: 15px;">
        <thead>
          <tr>
            <th>الصنف</th>
            <th>الكمية</th>
            <th>سعر الوحدة</th>
            <th>خصم %</th>
            <th>الإجمالي</th>
            <th>إجراء</th>
          </tr>
        </thead>
        <tbody id="purchases-lines-tbody"></tbody>
      </table>
      
      <div style="display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-top: 15px; font-weight: bold; font-size: 16px; background: rgba(0,0,0,0.05); padding: 15px; border-radius: 8px;">
        <div>الإجمالي: <span id="purchases-subtotal">0</span></div>
        <div>إجمالي الخصم: <span id="purchases-total-discount">0</span></div>
        <div style="color: var(--primary);">الصافي: <span id="purchases-net-total">0</span></div>
        <div style="color: var(--success);">إجمالي المسدد: <span id="purchases-paid-total">0</span></div>
        <div style="color: var(--danger);">المتبقي بعد المسدد: <span id="purchases-remaining">0</span></div>
      </div>
      <div id="purchases-linked-vouchers-container" style="display: none; margin-top: 15px; padding: 15px; background: rgba(0,0,0,0.03); border-radius: 8px;">
        <h5 style="color: var(--primary); margin-bottom: 10px; border-bottom: 1px solid var(--border); padding-bottom: 5px;"><i class="fas fa-receipt"></i> تفاصيل السندات المدفوعة لهذه الفاتورة:</h5>
        <ul id="purchases-linked-vouchers-list" style="list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 5px;"></ul>
      </div>

      `;
    content = beforeTable + replacement + afterTable;
    console.log("Fixed purchases table.");
} else {
    console.log("Could not find broken purchases table.");
}

fs.writeFileSync('index.html', content);
console.log("index.html saved.");
