<div id="uselect-system">

<style>

#uselect-system{

  max-width:900px;

  margin:40px auto;

  padding:24px;

  background:#fbf4ea;

  font-family:-apple-system,BlinkMacSystemFont,"Noto Sans TC","Microsoft JhengHei",sans-serif;

  color:#3f352b;

}

#uselect-system *{box-sizing:border-box;}

#uselect-system h1{text-align:center;font-size:30px;margin-bottom:8px;}

#uselect-system .sub{text-align:center;color:#7a6a5a;margin-bottom:24px;}

#uselect-system .card{

  background:#fffaf3;

  border:1px solid #eadac8;

  border-radius:22px;

  padding:20px;

  margin-bottom:18px;

}

#uselect-system label{display:block;margin:12px 0 6px;font-weight:600;}

#uselect-system input,#uselect-system select,#uselect-system textarea{

  width:100%;

  padding:12px;

  border:1px solid #d9c7b4;

  border-radius:12px;

  font-size:15px;

}

#uselect-system textarea{min-height:80px;}

#uselect-system .grid{

  display:grid;

  grid-template-columns:1fr 1fr;

  gap:12px;

}

#uselect-system .item{

  border:1px dashed #d8c4ae;

  border-radius:16px;

  padding:14px;

  margin-bottom:12px;

  background:#fffdf8;

}

#uselect-system button{

  border:0;

  border-radius:999px;

  padding:13px 18px;

  font-weight:700;

  cursor:pointer;

}

#uselect-system .add{width:100%;background:#c9a37f;color:#fff;}

#uselect-system .send{width:100%;background:#6b4b36;color:#fff;font-size:17px;margin-top:16px;}

#uselect-system .delete{background:#ddd;color:#5a4433;margin-top:10px;}

#uselect-system .summary{

  line-height:1.9;

  background:#fff;

  border-radius:16px;

  padding:14px;

  margin-top:12px;

}

@media(max-width:640px){

  #uselect-system{padding:14px;}

  #uselect-system .grid{grid-template-columns:1fr;}

}

</style>

<h1>U Select 訂購需求單</h1>

<div class="sub">此頁為需求登記，小幫手確認後才會成立正式訂單。</div>

<div class="card">

  <div class="grid">

    <div>

      <label>姓名</label>

      <input id="name">

    </div>

    <div>

      <label>LINE 名稱</label>

      <input id="lineName">

    </div>

  </div>

  <label>手機</label>

  <input id="phone">

  <label>收件方式</label>

  <select id="shipping">

    <option>7-11 取貨</option>

    <option>宅配</option>

    <option>現場取貨</option>

  </select>

  <label>付款方式</label>

  <select id="payment">

    <option>LINE Pay</option>

    <option>轉帳</option>

    <option>官網付款</option>

  </select>

  <label>收件資料</label>

  <textarea id="address" placeholder="7-11店名 / 收件地址 / 收件人"></textarea>

</div>

<div class="card">

  <h3>商品需求</h3>

  <div id="items"></div>

  <button class="add" type="button" onclick="addItem()">＋ 新增商品</button>

  <div class="summary" id="summary">

    目前尚未新增商品

  </div>

</div>

<div class="card">

  <label>其他備註</label>

  <textarea id="memo" placeholder="例：可接受替代色、希望一起到貨、缺貨先通知"></textarea>

  <button class="send" type="button" onclick="sendLine()">送出需求單</button>

</div>

<script>

let itemCount = 0;

function addItem(){

  itemCount++;

  let html = `

  <div class="item">

    <div class="grid">

      <div>

        <label>商品分類</label>

        <select class="category" onchange="updateSummary()">

          <option>線材</option>

          <option>皮件</option>

          <option>材料包</option>

          <option>配件</option>

          <option>其他</option>

        </select>

      </div>

      <div>

        <label>數量</label>

        <input class="qty" type="number" value="1" min="1" oninput="updateSummary()">

      </div>

    </div>

    <label>商品名稱</label>

    <input class="product" placeholder="例：韓國紙線 / THE FOUR / 皮件名稱">

    <label>顏色 / 色號</label>

    <input class="color" placeholder="例：101 / 深棕 / 奶油白">

    <label>備註</label>

    <textarea class="note" placeholder="例：可替代色、需搭配皮件"></textarea>

    <button class="delete" type="button" onclick="this.parentElement.remove();updateSummary();">刪除此商品</button>

  </div>`;

  document.getElementById("items").insertAdjacentHTML("beforeend", html);

  updateSummary();

}

function updateSummary(){

  let cats = document.querySelectorAll("#uselect-system .category");

  let qtys = document.querySelectorAll("#uselect-system .qty");

  let total = 0;

  let count = {};

  cats.forEach(function(cat,i){

    let q = Number(qtys[i].value || 0);

    total += q;

    count[cat.value] = (count[cat.value] || 0) + q;

  });

  let text = "";

  for(let key in count){

    text += key + "：" + count[key] + " 件<br>";

  }

  document.getElementById("summary").innerHTML =

    total ? text + "<hr>商品總數：" + total + " 件" : "目前尚未新增商品";

}

function sendLine(){

  let txt = "U Select 訂購需求單\\n\\n";

  txt += "姓名：" + document.getElementById("name").value + "\\n";

  txt += "LINE名稱：" + document.getElementById("lineName").value + "\\n";

  txt += "手機：" + document.getElementById("phone").value + "\\n";

  txt += "取貨方式：" + document.getElementById("shipping").value + "\\n";

  txt += "付款方式：" + document.getElementById("payment").value + "\\n";

  txt += "收件資料：" + document.getElementById("address").value + "\\n\\n";

  let items = document.querySelectorAll("#uselect-system .item");

  items.forEach(function(item,i){

    txt += "【商品 " + (i+1) + "】\\n";

    txt += "分類：" + item.querySelector(".category").value + "\\n";

    txt += "商品：" + item.querySelector(".product").value + "\\n";

    txt += "顏色/色號：" + item.querySelector(".color").value + "\\n";

    txt += "數量：" + item.querySelector(".qty").value + "\\n";

    txt += "備註：" + item.querySelector(".note").value + "\\n\\n";

  });

  txt += "其他備註：" + document.getElementById("memo").value;

  window.open("https://line.me/R/ti/p/@你的LINEID?text=" + encodeURIComponent(txt), "_blank");

}

addItem();

</script>

</div>