<div class="row">
<div class="d-flex align-items-center justify-content-start ">
    <table id="screen_table" class="table " style="border-collapse: collapse;">
        <tbody>
            <tr>			    
                <td rowspan="2" class="text-center align-middle lightgray">일련<br>번호</td>
                <td rowspan="2" class="text-center align-middle yellowblackBold">종류</td>
                <td rowspan="2" class="text-center align-middle yellowblackBold">층 부호</td>
                <td colspan="2" class="text-center align-middle blueBlackBold">오픈(mm)<br>
				 <span class="text-danger" style="font-size:10px;" > "레일 너비 120" <span> </td>
                <td colspan="2" class="text-center align-middle blueBlackBold">제작사이즈(mm)</td>
                <td rowspan="2" class="text-center align-middle greenblackBold" style="font-size:10px;" >가이드레일<br> 유형</td>
                <td rowspan="2" class="text-center align-middle purpleblackBold" style="font-size:10px;">샤프트 <br> (인치)</td>
                <td rowspan="2" class="text-center align-middle purpleblackBold">케이스 <br> (규격)</td>
                <td colspan="2" class="text-center align-middle orangeBlackBold">모터</td>
                <td rowspan="2" class="text-center align-middle lightgray">마감</td>
            </tr>
            <tr>                
                <td class="text-center blueBlackBold">가로</td>
                <td class="text-center blueBlackBold">세로</td>
                <td class="text-center blueBlackBold">가로 <br> <span class="text-danger"  style="font-size:10px;"> (오픈<span class="width_diff_display">@</span>) </span></td>
                <td class="text-center blueBlackBold">세로 <br> <span class="text-danger"  style="font-size:10px;"> (오픈<span class="height_diff_display">@</span>) </span></td>
                <td class="text-center orangeBlackBold" style="font-size:10px;">브라켓트</td>
                <td class="text-center orangeBlackBold" style="font-size:10px;">용량<br>(KG)</td>                
            </tr>        
<?PHP
    $row_count = 0;
	foreach ($eList as $row) {
		echo '<tr>';

		for ($i = 1; $i <= 13; $i++) {
			switch ($i) {
				case 1:
					// col1에만 HTML 태그를 해석하도록 출력
					echo '<td class="text-center ">' . $row['col1'] . '</td>';
					break;
				case 2:					
					echo '<td class="text-center ">' . $row['col5'] . '</td>';
					break;
				case 3:					
					echo '<td class="text-center ">' . $row['col2']  . ' '. $row['col3'] . '</td>';
					break;
				case 4:						
					echo '<td class="text-center  ">' . htmlspecialchars($row['col8']) . '</td>';
					break;
				case 5:					
					echo '<td class="text-center  ">' . htmlspecialchars($row['col9']) . '</td>';
					break;
				case 6:
					$open_width = intval($row['col8']); // 오픈 가로
					$make_width = intval(!empty($row['col10_SW']) ? $row['col10_SW'] : $row['col10']); // 제작 가로
					$width_diff = $make_width - $open_width;
					echo '<td class="text-center   ">' . htmlspecialchars(!empty($row['col10_SW']) ? $row['col10_SW'] : $row['col10']) . '</td>';
					break;				
				case 7:
					$open_height = intval($row['col9']); // 오픈 세로
					$make_height = intval(!empty($row['col11_SH']) ? $row['col11_SH'] : $row['col11']); // 제작 세로
					$height_diff = $make_height - $open_height;
					echo '<td class="text-center   ">' . htmlspecialchars(!empty($row['col11_SH']) ? $row['col11_SH'] : $row['col11']) . '</td>';
					break;				
				case 8:
					// 한글 혼합형만 나오게 하기 숫자제거
					echo '<td class="text-center">' . htmlspecialchars(preg_replace('/\(.+\)/', '', $row['col6'])) . '</td>';
					break;				
				case 9:
					echo '<td class="text-center    ">' . htmlspecialchars($row['col21']) . '</td>';
					break;				
				case 10:
				    if($row['col36'] =='custom')
						$case = $row['col36_custom'];
					else
						$case = $row['col36'];
					echo '<td class="text-center   ">' . htmlspecialchars($case) . '</td>';
					break;				
				case 11:
					// 브라켓크기
					$value = trim($row['col20']); 
					echo '<td class="text-center">'
						. (
							$value !== ''
							? htmlspecialchars($value)
							: '(없음)'
						)
						. '</td>';
					break;				
				case 12:
					echo '<td class="text-center    ">' . htmlspecialchars($row['col19']) . '</td>'; // 중량
					break;				
				case 13:
					echo '<td class="text-center    ">' . htmlspecialchars($row['col7']) . '</td>';
					break;								
			}
		}
	
	echo '</tr>';
	$row_count ++ ;
	}
?>            
        </tbody>
    </table>
</div>
</div>

<script>
function updateSizeDifferences() {
    const table = document.getElementById('screen_table');
    if (!table) return;
    const rows = Array.from(table.querySelectorAll('tbody tr')).filter(row => {
        const cells = row.querySelectorAll('td');
        if (cells.length < 7) return false;
        return !isNaN(parseInt(cells[3].textContent)) && !isNaN(parseInt(cells[4].textContent)) &&
               !isNaN(parseInt(cells[5].textContent)) && !isNaN(parseInt(cells[6].textContent));
    });
    const widthDiffElements = table.querySelectorAll('.width_diff_display');
    const heightDiffElements = table.querySelectorAll('.height_diff_display');
    if (rows.length === 0) {
        widthDiffElements.forEach(e => e.textContent = '@');
        heightDiffElements.forEach(e => e.textContent = '@');
        return;
    }
    const widthDiffs = [];
    const heightDiffs = [];
    rows.forEach(row => {
        const cells = row.querySelectorAll('td');
        const openWidth = parseInt(cells[3].textContent.replace(/[^0-9.-]/g, '')) || 0;
        const openHeight = parseInt(cells[4].textContent.replace(/[^0-9.-]/g, '')) || 0;
        const makeWidth = parseInt(cells[5].textContent.replace(/[^0-9.-]/g, '')) || 0;
        const makeHeight = parseInt(cells[6].textContent.replace(/[^0-9.-]/g, '')) || 0;
        if (openWidth > 0 && makeWidth > 0) widthDiffs.push(makeWidth - openWidth);
        if (openHeight > 0 && makeHeight > 0) heightDiffs.push(makeHeight - openHeight);
    });
    function formatDiff(val) { return (val >= 0 ? '+' : '') + val; }
    widthDiffElements.forEach(element => {
        if (widthDiffs.length === 0) {
            element.textContent = '@';
        } else if (widthDiffs.length === 1) {
            element.textContent = formatDiff(widthDiffs[0]);
        } else {
            const allSame = widthDiffs.every(diff => diff === widthDiffs[0]);
            element.textContent = allSame ? formatDiff(widthDiffs[0]) : '@';
        }
    });
    heightDiffElements.forEach(element => {
        if (heightDiffs.length === 0) {
            element.textContent = '@';
        } else if (heightDiffs.length === 1) {
            element.textContent = formatDiff(heightDiffs[0]);
        } else {
            const allSame = heightDiffs.every(diff => diff === heightDiffs[0]);
            element.textContent = allSame ? formatDiff(heightDiffs[0]) : '@';
        }
    });
}
document.addEventListener('DOMContentLoaded', function() { updateSizeDifferences(); });
</script>