<?php
session_start();
include('script/condb.php'); // DB connection

// Optional: capture project_ref if passed
$PID = $_GET['project_ref'] ?? $_POST['pid'] ?? $_SESSION['pid'] ?? '';
if (!empty($PID)) {
    $_SESSION['pid'] = $PID;
}

/* Pre-build options for JS templates (equipment only) */
$equipmentOptions = '';
$prod_eq = "SELECT construction_equipmentName FROM upline_app_construction_equipment";
$que_eq = mysqli_query($con, $prod_eq);
while ($rec_eq = mysqli_fetch_assoc($que_eq)) {
    $name = htmlspecialchars($rec_eq['construction_equipmentName']);
    $equipmentOptions .= '<option value="'.$name.'">'.$name.'</option>';
}

//----------------------block fromDB----------------------------
$blockOptions = "";
$prod = "SELECT Block_name FROM upline_app_blocksettings";
$que2 = mysqli_query($con, $prod);
while($rec2 = mysqli_fetch_array($que2)){
    $blockOptions .= '<option value="'.$rec2['Block_name'].'">'.$rec2['Block_name'].'</option>';
}

//--------------------------Planks from DB----------------------
$plankOptions = "";
$prod_plank = "SELECT plankothers_name FROM upline_app_plankothers WHERE plankothers_type='plank'";
$que_plank = mysqli_query($con, $prod_plank);
while($rec_plank = mysqli_fetch_array($que_plank)){
    $plankOptions .= '<option value="'.$rec_plank['plankothers_name'].'">'.$rec_plank['plankothers_name'].'</option>';
}

//--------------------------woods from DB----------------------
$woodOptions ="";
$prod_wood = "SELECT plankothers_name FROM upline_app_plankothers WHERE plankothers_type='wood'";
$que_wood = mysqli_query($con, $prod_wood);
while($rec_wood = mysqli_fetch_array($que_wood)){
   $woodOptions .= '<option value="'.$rec_wood['plankothers_name'].'">'.$rec_wood['plankothers_name'].'</option>';
}

//--------------steel from DB----------------------------
$steelOptions ="";
$prod_steel = "SELECT steels_wire_name FROM upline_app_steels_wire WHERE steels_wire_type='steel'";
$que_steel = mysqli_query($con, $prod_steel);
while($rec_steel = mysqli_fetch_array($que_steel)){
   $steelOptions .= '<option value="'.$rec_steel['steels_wire_name'].'">'.$rec_steel['steels_wire_name'].'</option>';
}

//------------------------------Concete from DB-----
$concreteOptions ="";
$prod_con1 = "SELECT Mixed_Ratio_Name FROM upline_app_concretework";
$que_con1 = mysqli_query($con, $prod_con1);
while($rec_con1 = mysqli_fetch_array($que_con1)){
    $concreteOptions .= '<option value="'.$rec_con1['Mixed_Ratio_Name'].'">'.$rec_con1['Mixed_Ratio_Name'].'</option>';
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Foundation Sand Filling</title>
<link rel="stylesheet" href="foundation.css">
</head>
<body class="foundation-body">

<div class="container">
  <div class="section-top-title">
    FOUNDATION SAND FILLING
  </div>

<!-- === After Excavation === -->

 <!-- <div class="section-top-title" style="margin:10px 0 10px 0;">PROPERTIES</div>
 
  <!-- === 6. Woods === -->
 <div class="section">

  <!-- HEADER 
  <div class="section">-->

  <!-- HEADER -->
  <div class="flex-between mb-4">
      <label class="checkbox-label m-0">
          <input type="checkbox">
          <span class="text-red">Option A</span>
      </label>
  </div>


  <!-- LABEL ROW -->
  <div style="
      display:flex;
      gap:12px;
      align-items:flex-start;
      margin-bottom:2px;
  ">
      <span style="font-size:12px; font-weight:bold; color:#103049; width:246px;">
          Description
      </span>

      <span style="font-size:12px; font-weight:bold; color:#103049; width:120px;">
          Area
      </span>

      <span style="font-size:12px; font-weight:bold; color:#103049; width:120px;">
          Height
      </span>
  </div>


  <!-- INPUT ROW (All fields on same straight line) -->
  <div style="display:flex; gap:12px; align-items:center;">

      <!-- DESCRIPTION FIELD -->
      <input type="text" 
             placeholder="Level and compact the bottom of excavation with 75mm thick sharp sand" 
             class="wall-input" 
             style="width:246px;">

      <!-- THICKNESS FIELD -->
      <input type="text" 
             placeholder="1" 
             class="wall-input" 
             style="width:120px;">

      <!-- AREA FIELD -->
      <input type="text" 
             placeholder="60" 
             class="wall-input" 
             style="width:120px;">
  </div>
  <!-- ADD BUTTON -->
  <button type="button"
          onclick="addCubicRow()"
          style="
             margin-top:6px;
             padding:6px 12px;
             background:#103049;
             color:white;
             border:none;
             border-radius:4px;
             cursor:pointer;
             font-size:13px;
          ">
      + Add More
  </button>
  
</div>

   <!-- Back Filling -->
 <div class="section">

  <!-- HEADER -->
  <div class="flex-between mb-4">
      <label class="checkbox-label m-0">
         <input type="checkbox">
         <span class="text-red">Option B</span>
      </label>
  </div>


  <!-- LABEL ROW -->
  <div style="
      display:flex;
      gap:12px;
      align-items:flex-start;
      margin-bottom:2px;
  ">

      <span style="font-size:12px; font-weight:bold; color:#103049; width:246px;">
          Description
      </span>

      <span style="font-size:12px; font-weight:bold; color:#103049; width:120px;">
          Cubic
      </span>
  </div>


  <!-- INPUT ROW -->
  <div style="display:flex; gap:12px; align-items:center;">

      <!-- DESCRIPTION (left field) -->
      <input type="text" 
             placeholder="Filling of excavation (back-filling) average thickness > 0.25m arising from excavation, selected, compacted in 200mm layers." 
             class="wall-input" 
             style="width:246px;">

      <!-- THICKNESS -->
      <input type="text" 
             placeholder="0.25" 
             class="wall-input" 
             style="width:120px;">
             
             
           </div>  
             <!-- ADD BUTTON -->
  <button type="button"
          onclick="addCubicRow()"
          style="
             margin-top:6px;
             padding:6px 12px;
             background:#103049;
             color:white;
             border:none;
             border-radius:4px;
             cursor:pointer;
             font-size:13px;
          ">
      + Add More
  </button>
  

</div>


  <!-- === 3. Partition in Trench 
  <div class="section">
    <div class="flex-row gap-12 mb-6">
        <label class="checkbox-label"><input type="checkbox"><span class="text-red">Partitions in Trench</span></label>
    </div>

    <div class="row" style="align-items:flex-start; margin-bottom:10px;">
      <div class="flex-column">
        <label class="label-strong mb-2">Length</label>
        <input class="partition-input w-120" type="text" placeholder="Length">
      </div>
      <div class="flex-column">
        <label class="label-strong mb-2">Width</label>
        <input class="partition-input w-120" type="text" placeholder="Width">
      </div>
      <div class="flex-column">
        <label class="label-strong mb-2">Depth</label>
        <input class="partition-input w-120" type="text" placeholder="Depth">
      </div>
    </div>
  </div>=== -->

  <!-- === 4. Blocks & Mortar 
  <div class="section">
    <div class="flex-row gap-12 mb-6">
        <label class="checkbox-label"><input type="checkbox"><span class="text-red">Blocks & Mortars</span></label>
    </div>

    <div style="font-size:13px;color:white;font-weight:bold;font-style:italic;margin-bottom:6px;user-select:none;">
        Cement Mortar Ratio
    </div>

    <div class="flex-row gap-6 mb-2">
        <div class="flex-column">
            <label class="label-strong mb-2">Cement</label>
            <input type="text" class="cbase-input w-120" placeholder="Cement">
        </div>
        <div class="flex-column">
            <label class="label-strong mb-2">Sand</label>
            <input type="text" class="cbase-input w-120" placeholder="Sand">
        </div>
    </div>
  </div>=== -->

 
  <!-- === 13. Equipments === -->
  <div class="section">
    <div class="flex-row gap-12 mb-6">
        <label class="checkbox-label"><input type="checkbox"><span class="text-red">Equipments</span></label>
    </div>

    <div class="header-row">
        <div class="w-246">Equipment</div>
        <div class="w-120">Quantity</div>
    </div>

    <div id="equipmentContainer">
      <div class="row equipment-row mb-10 align-center">
          <select class="cbase-select w-246"><?php echo $equipmentOptions; ?></select>
          <input type="text" class="cbase-input w-120" placeholder="Quantity">
      </div>
    </div>

    <button type="button" onclick="addEquipmentRow()" class="btn-add">+ Add More</button>
  </div>

</div><!-- /.container -->

<script>
function removeRow(btn){
  if (btn && btn.parentElement) {
    btn.parentElement.remove();
  }
}

function addImportedBarRow(){
  var container = document.getElementById('importedBarsContainer');
  if (!container) return;
  var row = document.createElement('div');
  row.className = 'row imported-bar-row align-center';
  row.style.cssText = 'gap:6px;margin-bottom:10px;align-items:center;';
  row.innerHTML = ''
    + '<select class="cbase-select w-160">'
    + '  <option value="">Select Steel Size</option>'
    + '  <option>8mm</option>'
    + '  <option>12mm</option>'
    + '  <option>16mm</option>'
    + '  <option>20mm</option>'
    + '  <option>25mm</option>'
    + '</select>'
    + '<input type="text" class="cbase-input w-140" placeholder="Total Length">'
    + '<input type="text" class="cbase-input w-140" placeholder="Bar Quantity">'
    + '<button type="button" onclick="removeRow(this)" class="btn-remove">X</button>';
  container.appendChild(row);
}

function addEquipmentRow(){
  var container = document.getElementById('equipmentContainer');
  if (!container) return;
  var row = document.createElement('div');
  row.className = 'row equipment-row align-center';
  row.style.cssText = 'gap:6px;margin-bottom:10px;align-items:center;';
  row.innerHTML = ''
    + '<select class="cbase-select w-246"><option value="">Select Equipment</option><?php echo $equipmentOptions; ?></select>'
    + '<input type="text" class="cbase-input w-120" placeholder="Quantity">'
    + '<button type="button" onclick="removeRow(this)" class="btn-remove">X</button>';
  container.appendChild(row);
}

function addColumnTypeRow(){
  var container = document.getElementById('columnTypeContainer');
  if (!container) return;
  var row = document.createElement('div');
  row.className = 'row column-type-row';
  row.style.cssText = 'gap:6px;margin-bottom:6px;align-items:flex-start;';
  row.innerHTML = ''
    + '<div class="flex-column"><label class="label-strong">Number</label><input class="starter-input w-65" placeholder="Number"></div>'
    + '<div class="flex-column"><label class="label-strong">Length</label><input class="starter-input w-70" placeholder="Length"></div>'
    + '<div class="flex-column"><label class="label-strong">Width</label><input class="starter-input w-70" placeholder="Width"></div>'
    + '<div class="flex-column"><label class="label-strong">Bar Type</label><select class="starter-select w-100"><?php echo $steelOptions; ?></select></div>'
    + '<div class="flex-column"><label class="label-strong">Bar Num.</label><input class="starter-input w-70" placeholder="Bar Num."></div>'
    + '<div class="flex-column"><label class="label-strong">A Steel to</label><input class="starter-input w-70" placeholder="A Steel to"></div>'
    + '<div class="flex-column"><label class="label-strong">Stirrups</label><input class="starter-input w-70" placeholder="Stirrups"></div>'
    + '<div class="flex-column"><label class="label-strong">Stirrup Type</label><select class="starter-select w-100"><?php echo $steelOptions; ?></select></div>';
  container.appendChild(row);
}

function addColumnBaseRow(){
  var container = document.getElementById('columnBaseContainer');
  if (!container) return;
  var row = document.createElement('div');
  row.className = 'column-base-row row align-center';
  row.style.cssText = 'gap:6px;align-items:center;margin-bottom:6px;';
  row.innerHTML = ''
    + '<input class="cbase-input w-70" placeholder="16">'
    + '<input class="cbase-input w-70" placeholder="1">'
    + '<input class="cbase-input w-70" placeholder="0.15">'
    + '<select class="cbase-select w-100"><?php echo $steelOptions; ?></select>'
    + '<input class="cbase-input w-70" placeholder="14">'
    + '<select class="cbase-select w-120"><option>Single Mat</option><option selected>Double Mat</option></select>'
    + '<input class="cbase-input w-70" value="0.1">';
  container.appendChild(row);
}

<script>
/* ============================================================
   AFTER EXCAVATION ROW — DUPLICATE WITHOUT LABELS
============================================================ */
window.addAfterExcavationRow = function () {

    const container = document.getElementById("afterExcavationContainer");
    if (!container) return;

    const firstRow = container.querySelector(".after-exc-row:last-of-type");
    if (!firstRow) return;

    const clone = firstRow.cloneNode(true);

    // Reset input values
    clone.querySelectorAll("input").forEach(i => i.value = "");

    // REMOVE any existing remove-btn first
    const oldRemove = clone.querySelector(".remove-btn");
    if (oldRemove) oldRemove.remove();

    // Add new remove button
    const removeBtn = document.createElement("button");
    removeBtn.className = "remove-btn";
    removeBtn.innerText = "X";
    removeBtn.style.cssText =
        "margin-left:6px;padding:4px 10px;background:#c0392b;color:white;" +
        "border:none;border-radius:4px;cursor:pointer;height:32px;";
    removeBtn.onclick = () => clone.remove();
    clone.appendChild(removeBtn);

    // ---- Auto-expanding field setup ----
    const span = clone.querySelector(".autoSpan");
    const input = clone.querySelector(".autoInput");

    input.oninput = () => {
        span.textContent = input.value;
        input.style.width = Math.max(246, span.offsetWidth) + "px";
    };

    container.appendChild(clone);
};
</script>

</script>

</body>
</html>
