Order/Customer: add restaurant name and edit sludge design

public_html/doc/customer_detail.php

@@ -907,6 +907,45 @@ $(document).ready(function(){
 	  float:right;
 	}
 
+  /* Map > Input > Sludge */
+  .number-input {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+  }
+
+  .number-input input {
+    width: 100%;
+    text-align: center;
+  }
+
+  .number-input button {
+    padding: 5px 10px;
+    cursor: pointer;
+  }
+
+  /* 기본 화살표 제거 */
+  .d_sludge::-webkit-inner-spin-button,
+  .d_sludge::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+  .d_sludge {
+    -moz-appearance: textfield;
+  }
+
+  .left, .right {
+    background: none;
+    border: none;
+    color: #77B469;
+    font-weight: bold;
+    cursor: pointer;
+    padding: 0;
+    margin: 0;
+    appearance: none;
+    box-shadow: none;
+    outline: none;
+  }
 </style>
 
 
@@ -1796,6 +1835,11 @@ $(document).ready(function(){
 
           <table class="tb-info-box">
 
+            <tr>
+              <td class="td-title-info">Restaurant Name</td>
+              <td class="td-text-info shortinput-store-name"><?=$c_name?></td>
+            </tr>
+
             <tr>
               <td class="td-title-info">Visited Date</td>
               <td class="td-text-info">
@@ -1825,9 +1869,14 @@ $(document).ready(function(){
             </tr>
 
             <tr>
-              <td class="td-title-info">Sludge</td>
+              <td class="td-title-info">Sludge (%)</td>
               <td class="td-text-info">
-                <input type="text" id="d_sludge" name="d_sludge" value="<?=$d_sludge?>" placeholder="50">
+                <div class="number-input">
+                  <button class="left" type="button">▼</button>
+                    <input type="number" class="d_sludge" id="d_sludge" name="d_sludge" value="<?=$d_sludge?>" min="0" max="100" placeholder="50">
+                  <button class="right" type="button">▲</button>
+                </div>
+                
               </td>
             </tr>
 
@@ -2000,3 +2049,31 @@ $(document).ready(function(){
         $("#signature64").val('');
     });
 </script>
+
+<script>
+document.addEventListener('DOMContentLoaded', () => {
+  document.querySelectorAll('.number-input').forEach(container => {
+    const input = container.querySelector('.d_sludge');
+    const leftBtn = container.querySelector('.left');
+    const rightBtn = container.querySelector('.right');
+    const step = 5;
+
+    leftBtn.addEventListener('click', () => {
+      const min = input.min ? parseInt(input.min) : -Infinity;
+      let value = parseInt(input.value || 0);
+      if (value - step >= min) input.value = value - step;
+    });
+
+    rightBtn.addEventListener('click', () => {
+      const max = input.max ? parseInt(input.max) : Infinity;
+      let value = parseInt(input.value || 0);
+      if (value + step <= max) input.value = value + step;
+    });
+  });
+});
+
+function buildContent(property) {
+    $(".shortinput-store-name").text(property.name);
+}
+
+</script>

public_html/lib/order_lib.php

@@ -135,6 +135,45 @@ while($lt_driver=mysqli_fetch_array($rt_driver, MYSQLI_ASSOC)) {
 	  float:right;
 	}
 
+	/* Map > Input > Sludge */
+	.number-input {
+	display: flex;
+	align-items: center;
+	gap: 5px;
+	}
+
+	.number-input input {
+	width: 100%;
+	text-align: center;
+	}
+
+	.number-input button {
+	padding: 5px 10px;
+	cursor: pointer;
+	}
+
+	/* 기본 화살표 제거 */
+	.d_sludge::-webkit-inner-spin-button,
+	.d_sludge::-webkit-outer-spin-button {
+	-webkit-appearance: none;
+	margin: 0;
+	}
+	.d_sludge {
+	-moz-appearance: textfield;
+	}
+
+	.left, .right {
+	background: none;
+	border: none;
+	color: #77B469;
+	font-weight: bold;
+	cursor: pointer;
+	padding: 0;
+	margin: 0;
+	appearance: none;
+	box-shadow: none;
+	outline: none;
+	}
 </style>
 
 
@@ -343,6 +382,12 @@ $(document).ready(function(){
 
           <table class="tb-info-box">
 			<tr>
+              <td class="td-title-info">Restaurant Name</td>
+              <td class="td-text-info">           	
+                  <?=$d_nameSTR?>
+              </td>
+            </tr>
+            <tr>
               <td class="td-title-info td-name">Account No</td>
               <td class="td-text-info">           	
                   <?=$d_accountnoSTR?>
@@ -376,9 +421,13 @@ $(document).ready(function(){
             </tr>
 
 			<tr>
-              <td class="td-title-info">Sludge</td>
+				<td class="td-title-info">Sludge (%)</td>
 				<td class="td-text-info">
-                <input type="text" id="d_sludge" name="d_sludge" value="<?=$rt_sludge['c_sludge']?>" placeholder="50">
+					<div class="number-input">
+						<button class="left" type="button">▼</button>
+							<input type="number" id="d_sludge" name="d_sludge" class="d_sludge" value="<?=$rt_sludge['c_sludge']?>" min="0" max="100" placeholder="50">
+						<button class="right" type="button">▲</button>
+					</div>
 				</td>
 			</tr>
 
@@ -468,3 +517,27 @@ $(document).ready(function(){
       </div>
   </div>
 </div>
+
+<script>
+document.addEventListener('click', function (e) {
+  const leftBtn  = e.target.closest('.number-input .left');
+  const rightBtn = e.target.closest('.number-input .right');
+  if (!leftBtn && !rightBtn) return;
+
+  const container = e.target.closest('.number-input');
+  const input = container.querySelector('.d_sludge');
+  if (!input) return;
+
+  const step = 5;
+  const min  = input.min !== '' ? parseInt(input.min, 10) : -Infinity;
+  const max  = input.max !== '' ? parseInt(input.max, 10) :  Infinity;
+  let value  = parseInt(input.value || 0, 10);
+
+  if (leftBtn)  value = Math.max(min, value - step);
+  if (rightBtn) value = Math.min(max, value + step);
+
+  input.value = isNaN(value) ? 0 : value;
+
+  input.dispatchEvent(new Event('input', { bubbles: true }));
+});
+</script>