<div class="container">
    <h2>Part List</h2>
    <div class="card">
        <div class="card-body">
            <div class="row">
                <div class="col-12 d-flex justify-content-between">
                    <div class="mb-1">
                        <strong>SA Name:</strong>
                        <%= saData.Sub_Assembly %>
                    </div>
                    <div class="mb-1">
                        <strong>SA Number:</strong>
                        <%= saData.SA_Number %>
                    </div>
                    <div class="mb-1">
                        <strong>PL ID:</strong>
                        <%= plDetails.PL_ID %>
                    </div>
                    <input type="hidden" id="plId" value="<%= plDetails.PL_ID %>">
                    <!-- Add this button somewhere in your HTML (e.g., below your tables) -->
                    
                </div>
            </div>
        </div>
    </div>


    <h3>DRG Data</h3>
    <div class="row">
        <!-- Left Table (Source Table) -->
        <div class="col-md-12">
            <button id="addRowBtn" class="btn btn-warning mb-3" 
  <% if (plDetails && plDetails.matched == 1) { %> disabled <% } %>
>
  Add Row
</button>
            <table class="table table-bordered" id="sourceTable" style="font-size: smaller;">
                <thead>
                    <tr>
                        <th>Dr_Id</th>
                        <th>Drg Number</th>
                        <th>Part Name</th>
                        <th>Qty</th>
                        <th>Weight</th>
                        <th>Category</th>
                        <th>ToCost</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody id="partlist-body">
                    <% if (savedDrgData && savedDrgData.length> 0) { %>
                        <% savedDrgData.forEach(drg=> { %>
                            <tr>

                                <td>
                                    <%= drg.Dr_Id %>
                                </td>
                                <td>
                                    <%= drg.DrgNumber %>
                                     <!-- <input type="text" class="form-control" value="<%= drg.DrgNumber %>"> -->
                                </td>
                                <td>
                                    <%= drg.PartName %>
                                </td>
                                <td>
                                    <% if (plDetails && plDetails.matched == 0) { %> 
                                      <input type="number" class="form-control Qty" value="<%= drg.Qty %>">
                                    <% } else { %>
                                      <%= drg.Qty %>
                                    <% } %>
                                </td>
                                <td>
                                    <% if (plDetails && plDetails.matched == 0) { %> 
                                      <input type="number"
                                        class="form-control Weight" value="<%= drg.Weight %>" readonly
                                        data-base-weight="<%= drg.Weight %>"
                                        data-base-qty="<%= drg.Qty %>">
                                    <% } else { %>
                                      <%= drg.Weight %>
                                    <% } %>
                                <td>
                                    <%= drg.Category %>
                                </td>
                                <td>
                                    <%= drg.ToCost %>
                                </td>
                            </tr>
                            <% }) %>
                                <% } else { %>
                                    <tr>
                                        <td colspan="6">No transferred items yet.</td>
                                    </tr>
                                    <% } %>
                </tbody>
            </table>

            
        </div>
        <div class="col-md-12" style="text-align: center;">
        <!-- <button id="saveChanges" class="btn btn-primary mb-3">Save Changes</button> -->
       <button id="saveChanges" class="btn btn-primary mb-3"
  <% if (plDetails && plDetails.matched == 1) { %> disabled <% } %>
>
  Save Changes
</button>
        <!-- <a class="btn btn-secondary mb-3" onclick="goBack()">Back</a> -->
          <a href="/sapage/<%=sid %>" onclick="sessionStorage.setItem('backFromTransferPage', 'true');" class="btn btn-secondary mb-3">
                        Back
                    </a>
    </div>
    </div>
    
</div>


<script>
    document.addEventListener("DOMContentLoaded", () => {
  // Existing Add Row logic...

//   document.getElementById("addRowBtn").addEventListener("click", async function () {
//     const tableBody = document.getElementById("partlist-body");

//     try {
//       const [drgRes, catRes] = await Promise.all([
//         fetch("/drgNumbers"),
//         fetch("/category")
//       ]);

//       const drgData = await drgRes.json();
//       const catData = await catRes.json();

//       const drgOptions = drgData.basicInfo.map(drg =>
//         `<option value="${drg.Drg_Number}">${drg.Drg_Number}</option>`).join('');
//       const catOptions = catData.map(cat =>
//         `<option value="${cat.Catagory}">${cat.Catagory}</option>`).join('');

//       const newRow = document.createElement("tr");
//       newRow.innerHTML = `
//         <td><input type="text" class="Dr_Id form-control" readonly /></td>
//         <td>
//           <select class="DrgNumber form-control">
//             <option value="">Select</option>
//             ${drgOptions}
//           </select>
//         </td>
//         <td><input type="text" class="PartName form-control" /></td>
//         <td><input type="number" class="Qty form-control" /></td>
//         <td><input type="number" step="0.01" class="Weight form-control" /></td>
//         <td>
//           <select class="Category form-control">
//             <option value="">Select</option>
//             ${catOptions}
//           </select>
//         </td>
//         <td><input type="number" step="0.01" class="ToCost form-control" /></td>
//       `;

// // Initialize Select2 safely
//       // $(newRow).find(".DrgNumber").select2({
//       //     placeholder: "Select Drg Number",
//       //     width: "100%"
//       // });
//       // $(newRow).find(".Category").select2({
//       //     placeholder: "Select Category",
//       //     width: "100%"
//       // });
      
//       tableBody.appendChild(newRow);

//       // Add change event for DrgNumber dropdown
//       const drgSelect = newRow.querySelector(".DrgNumber");
//       console.log(drgSelect);
//  drgSelect.addEventListener("change", async (e) => {
// //$("#drgSelect").on("select2:select", async function (e) {
//   const selectedDrg = e.target.value;
//   if (!selectedDrg) return;

//   try {
//     const res = await fetch(`/drg-details/${encodeURIComponent(selectedDrg)}`);
//     const responseData = await res.json();  // renamed to avoid confusion
//     console.log(responseData);

//     if (res.ok && responseData.success) {
//       const data = responseData.data;

//       newRow.querySelector(".Dr_Id").value = data.Dr_Id || '';
//       newRow.querySelector(".PartName").value = data.PartName || '';
//       newRow.querySelector(".Qty").value = data.Qty || 0;
//       newRow.querySelector(".Weight").value = data.Weight || 0;
//       newRow.querySelector(".ToCost").value = data.ToCost || 0;

//       const categorySelect = newRow.querySelector(".Category");
//       if (categorySelect) {
//         categorySelect.value = data.Category || '';
//       }

//     } else {
//       alert("DRG Number not found");
//     }
//   } catch (error) {
//     console.error("Error fetching DRG details:", error);
//     alert("Error fetching DRG details");
//   }
// });

//     } catch (error) {
//       console.error("Error loading dropdowns:", error);
//       alert("Failed to load dropdown options.");
//     }
//   });

// 1) Register ONE delegated handler (works with/without Select2)
$(document).on('select2:select change', '.DrgNumber', async function (e) {
  const $row = $(this).closest('tr');
  const selectedDrg = $(this).val();
  if (!selectedDrg) return;

  try {
    const res = await fetch(`/drg-details/${encodeURIComponent(selectedDrg)}`);
    const responseData = await res.json();
    if (res.ok && responseData.success) {
      const d = responseData.data || {};

      $row.find('.Dr_Id').val(d.Dr_Id || '');
      $row.find('.PartName').val(d.PartName || '');
      $row.find('.Qty').val(d.Qty ?? 0);
      $row.find('.Weight').val(d.Weight ?? 0);
      $row.find('.ToCost').val(d.ToCost ?? 0);

      // Base qty = DRG qty or 1
      const baseQty = parseFloat(d.Qty) || 1;
      const baseWeight = parseFloat(d.Weight) || 0;
      const $qty = $row.find('.Qty');
      const $weight = $row.find('.Weight');
      // Set base values
      $qty.val(baseQty);
      $weight
        .val(baseWeight.toFixed(2))
        .prop('readonly', true)
        .attr('data-base-qty', baseQty)
        .attr('data-base-weight', baseWeight);

      // If Category is Select2, update UI too
      const $cat = $row.find('.Category');
      $cat.val(d.Category || '').trigger('change'); // keeps Select2 in sync
    } else {
      alert('DRG Number not found');
    }
  } catch (err) {
    console.error('Error fetching DRG details:', err);
    alert('Error fetching DRG details');
  }
});

document.getElementById("addRowBtn").addEventListener("click", async function () {
  const tableBody = document.getElementById("partlist-body");

  try {
    const [drgRes, catRes] = await Promise.all([
      fetch("/drgNumbers"),
      fetch("/category")
    ]);

    const drgData = await drgRes.json();
    const catData = await catRes.json();

    const drgOptions = (drgData.basicInfo || []).map(drg =>
      `<option value="${drg.Drg_Number}">${drg.Drg_Number}</option>`).join('');

    const catOptions = (catData || []).map(cat =>
      `<option value="${cat.Catagory}">${cat.Catagory}</option>`).join('');

    const newRow = document.createElement("tr");
    newRow.innerHTML = `
      <td><input type="text" class="Dr_Id form-control" readonly /></td>
      <td>
        <select class="DrgNumber form-control">
          <option value="">Select</option>
          ${drgOptions}
        </select>
      </td>
      <td><input type="text" class="PartName form-control" /></td>
      <td><input type="number" class="Qty form-control" /></td>
      <td><input type="number" step="0.01" class="Weight form-control"  
           data-base-qty="1"
           data-base-weight="0"/></td>
      <td>
        <select class="Category form-control">
          <option value="">Select</option>
          ${catOptions}
        </select>
      </td>
      <td><input type="number" step="0.01" class="ToCost form-control" /></td>
      <td>
        <button type="button" class="btn btn-sm btn-warning clearRow">Clear</button>
      </td>
    `;

    tableBody.appendChild(newRow); // append FIRST

    // 2) Initialize Select2 AFTER append, avoid double init
    const $row = $(newRow);
    $row.find(".DrgNumber, .Category").each(function () {
      const $el = $(this);
      if (!$el.hasClass("select2-hidden-accessible")) {
        $el.select2({
          placeholder: $el.hasClass("DrgNumber") ? "Select Drg Number" : "Select Category",
          width: "100%"
        });
      }
    });

    // Attach clear button functionality
    newRow.querySelector(".clearRow").addEventListener("click", function () {
      newRow.querySelectorAll("input, select").forEach(el => {
        if (el.tagName === "SELECT") {
          el.value = "";
          $(el).val(null).trigger("change"); // reset select2
        } else {
          el.value = "";
        }
      });
    });

    // No per-row addEventListener needed anymore (delegated handler above covers all rows)

  } catch (error) {
    console.error("Error loading dropdowns:", error);
    alert("Failed to load dropdown options.");
  }
});


//   document.getElementById("saveChanges").addEventListener("click", async () => {
//   const rows = document.querySelectorAll("#partlist-body tr");
//   const plId = document.getElementById("plId").value;

//     const newPartItems = [];
//   const drgNumbers = new Set(); // track all drgNumbers (old + new)
//   let hasDuplicate = false;

//   // Step 1: collect already existing DrgNumbers from table (input/hidden values)
//   rows.forEach(row => {
//     const existingDrg = row.querySelector(".DrgNumber");
//     if (existingDrg && existingDrg.tagName !== "SELECT") {
//       const val = existingDrg.value || existingDrg.textContent?.trim();
//       if (val) drgNumbers.add(val);
//     }
//   });

//   // Step 2: check only new rows (<select>)
//   rows.forEach(row => {
//     const drgInput = row.querySelector(".DrgNumber");

//     if (drgInput && drgInput.tagName === "SELECT") {
//       const partItem = {
//         Dr_Id: row.querySelector(".Dr_Id").value,
//         DrgNumber: row.querySelector(".DrgNumber").value,
//         PartName: row.querySelector(".PartName").value,
//         Qty: parseFloat(row.querySelector(".Qty").value) || 0,
//         Weight: parseFloat(row.querySelector(".Weight").value) || 0,
//         Category: row.querySelector(".Category").value,
//         ToCost: parseFloat(row.querySelector(".ToCost").value) || 0,
//         Link: plId
//       };

//       // Check duplicate against all drgNumbers (old + new)
//       if (partItem.DrgNumber) {
//         if (drgNumbers.has(partItem.DrgNumber)) {
//           hasDuplicate = true;
//         } else {
//           drgNumbers.add(partItem.DrgNumber);
//         }
//       }

//       if (partItem.DrgNumber && partItem.PartName) {
//         newPartItems.push(partItem);
//       }
//     }
//   });

//   if (hasDuplicate) {
//     alert("Duplicate Drg Numbers found. Please ensure all Drg Numbers are unique.");
//     return;
//   }


//   if (newPartItems.length === 0) {
//     alert("No new rows to save.");
//     return;
//   }

//   try {
//     const res = await fetch("/savePartList", {
//       method: "POST",
//       headers: {
//         "Content-Type": "application/json"
//       },
//       body: JSON.stringify({ partItems: newPartItems })
//     });

//     const result = await res.json();
//     if (res.ok) {
//       alert(result.message);
//       location.reload(); // Refresh to show newly saved rows
//     } else {
//       alert("Failed to save: " + (result.message || "Unknown error"));
//     }
//   } catch (error) {
//     console.error("Save failed:", error);
//     alert("Error saving part list");
//   }
// });
// });

// OLD For New Record Insert Only
// document.getElementById("saveChanges").addEventListener("click", async () => {
//   const rows = document.querySelectorAll("#partlist-body tr");
//   const plId = document.getElementById("plId").value;

//   const newPartItems = [];
//   const drgNumbers = new Set();
//   let hasDuplicate = false;
 
//   rows.forEach(row => {
//     // 1️⃣ Get DrgNumber value from input/select OR td text
//     const drgInput = row.querySelector(".DrgNumber");
//     let drgVal = "";
//     if (drgInput) {
//       drgVal = drgInput.value?.trim() || "";
//     } else {
//       const td = row.children[1]; // 2nd column is DrgNumber
//       drgVal = td?.textContent?.trim() || "";
//     }
 
//     if (!drgVal) return;
 
//     // 2️⃣ Duplicate check
//     if (drgNumbers.has(drgVal)) {
//       hasDuplicate = true;
//       console.warn("Duplicate DrgNumber found:", drgVal);
//     } else {
//       drgNumbers.add(drgVal);
//     }
 
//     // 3️⃣ Only new rows (SELECT type) are added to newPartItems
//     if (drgInput && drgInput.tagName === "SELECT") {
//       const partItem = {
//         Dr_Id: row.querySelector(".Dr_Id")?.value || row.children[0]?.textContent?.trim(),
//         DrgNumber: drgVal,
//         PartName: row.querySelector(".PartName")?.value || row.children[2]?.textContent?.trim(),
//         Qty: parseFloat(row.querySelector(".Qty")?.value || row.children[3]?.textContent) || 0,
//         Weight: parseFloat(row.querySelector(".Weight")?.value || row.children[4]?.textContent) || 0,
//         Category: row.querySelector(".Category")?.value || row.children[5]?.textContent?.trim(),
//         ToCost: parseFloat(row.querySelector(".ToCost")?.value || row.children[6]?.textContent) || 0,
//         Link: plId
//       };
//       newPartItems.push(partItem);
//     }
//   });
 
//   if (hasDuplicate) {
//     alert("Duplicate Drg Numbers found. Please ensure all Drg Numbers are unique.");
//     return;
//   }

//   if (newPartItems.length === 0) {
//     alert("No new rows to save.");
//     return;
//   }

//   try {
//     const res = await fetch("/savePartList", {
//       method: "POST",
//       headers: { "Content-Type": "application/json" },
//       body: JSON.stringify({ partItems: newPartItems })
//     });

//     const result = await res.json();
//     if (res.ok) {
//       alert(result.message);
//       location.reload();
//     } else {
//       alert("Failed to save: " + (result.message || "Unknown error"));
//     }
//   } catch (error) {
//     console.error("Save failed:", error);
//     alert("Error saving part list");
//   }
// });

document.getElementById("saveChanges").addEventListener("click", async () => {
  const rows = document.querySelectorAll("#partlist-body tr");
  const plId = document.getElementById("plId").value;

  const partItems = [];
  const drgNumbers = new Set();
  let hasDuplicate = false;

  rows.forEach(row => {
    // 1️⃣ Get DrgNumber value from input/select OR td text
    const drgInput = row.querySelector(".DrgNumber");
    let drgVal = "";
    if (drgInput) {
      drgVal = drgInput.value?.trim() || "";
    } else {
      const td = row.children[1]; // 2nd column is DrgNumber
      drgVal = td?.textContent?.trim() || "";
    }
 
    if (!drgVal) return;
 
    // 2️⃣ Duplicate check
    if (drgNumbers.has(drgVal)) {
      hasDuplicate = true;
      console.warn("Duplicate DrgNumber found:", drgVal);
    } else {
      drgNumbers.add(drgVal);
    }

    const item = {
      Dr_Id: parseInt(getValue(row, "Dr_Id", 0)) || 0,
      DrgNumber: getValue(row, "DrgNumber", 1),
      PartName: getValue(row, "PartName", 2),
      Qty: parseFloat(getValue(row, "Qty", 3)) || 0,
      Weight: parseFloat(getValue(row, "Weight", 4)) || 0,
      Category: getValue(row, "Category", 5),
      ToCost: parseFloat(getValue(row, "ToCost", 6)) || 0,
      Link: plId,

      // new row if select exists
      isNew: !!row.querySelector("select.DrgNumber")
    };
    partItems.push(item);
  });

  if (hasDuplicate) {
    alert("Duplicate Drg Numbers found. Please ensure all Drg Numbers are unique.");
    return;
  }

  if (partItems.length === 0) {
    alert("Nothing to save.");
    return;
  }

  const res = await fetch("/savePartList", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ partItems })
  });

  const result = await res.json();
  alert(result.message);
  location.reload();
});

document.addEventListener("input", function (e) {
  if (!e.target.classList.contains("Qty")) return;

  const row = e.target.closest("tr");
  const qty = parseFloat(e.target.value) || 0;

  const weightInput = row.querySelector(".Weight");
  if (!weightInput) return;

  const baseQty = parseFloat(weightInput.dataset.baseQty) || 0;
  const baseWeight = parseFloat(weightInput.dataset.baseWeight) || 0;

  if (baseQty === 0) {
    weightInput.value = 0;
    return;
  }

  // 🔥 proportional calculation
  const newWeight = (qty / baseQty) * baseWeight;

  weightInput.value = newWeight.toFixed(2);
});

function getValue(row, className, index) {
  const el = row.querySelector(`.${className}`);
  if (el) {
    return el.value !== undefined
      ? el.value.trim()
      : el.textContent.trim();
  }
  return row.children[index]?.textContent?.trim() || "";
}


});


function goBack() {
  if (document.referrer) {
    window.history.back();
  } else {
    window.location.href = "/";
  }
}

</script>