<link href="/css/front/virtual_calculator.css" media="screen" rel="stylesheet" type="text/css" />
<script>
	function calculator(order_price) {
		var parts = Array.from(document.getElementsByClassName("vhost_parts"));
		parts.forEach(function(part) { //loop
			//console.log(part);
			order_price += parseInt((part.getAttribute('cost') - part.getAttribute('sale')) * part.options[part.selectedIndex].value);
			document.getElementById('price').value = order_price;
			document.getElementById('order_price').textContent = new Intl.NumberFormat().format(order_price);
		});
		var current = document.getElementById('paymentday');
		if (!current.selectedIndex) {
			alert("결제일을 선택해주세요");
			current.focus();
			return false
		}
	}
</script>
<div id="virtual_calculator">
	<?= form_open(URLS['addCart'], [
		'method' => 'post',
		"onsubmit" => 'return calculator(' . $viewDatas['parts']['virtual']['default']['baserate'] . ')'
	]) ?>
	<input type="hidden" id="category" name="category" value="virtual">
	<input type="hidden" id="price" name="price">
	<table>
		<thead>
			<tr>
				<th scope="col" colspan="3">가상서버 견적 계산기</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<th>기본요금</th>
				<td>
					<strong><?= number_format($viewDatas['parts']['virtual']['default']['baserate']) ?>원</strong>
				</td>
			</tr>
			<?php foreach ($viewDatas['parts']['virtual']['category'] as $category => $attrs) : ?>
				<tr>
					<th><?= $attrs['label'] ?></th>
					<td>
						<strong class="line-through"><?= number_format($attrs['cost']) ?>원</strong>
						<strong class="f-back">할인가 <?= number_format($attrs['cost'] - $attrs['sale']) ?></strong> *
						<?= form_dropdown(
							$category,
							$attrs['options'],
							old($category, 0),
							[
								'id' => $category,
								'class' => 'vhost_parts',
								'cost' => $attrs['cost'],
								'sale' => $attrs['sale'],
								'onChange' => "calculator(" . $viewDatas['parts']['virtual']['default']['baserate'] . ")"
							]
						) ?>
						<?= $attrs['unit'] ?>
					</td>
				</tr>
			<?php endforeach ?>
			<tr>
				<th>결제일</th>
				<td class="column">
					<?php $paymentDayOptions = ['' => "결제일 선택"];
					for ($i = 1; $i <= 28; $i++) {
						$paymentDayOptions[$i] = "매월 {$i}일";
					}
					?>
					<?= form_dropdown('paymentday', $paymentDayOptions, old('paymentday', 25), ['id' => 'paymentday']);
					?>
				</td>
			</tr>
			<tr>
				<th class="none">주문금액</th>
				<td class="none" colspan="3">
					<span id="order_price">0</span>원
					<?= form_submit('', '신청', array("class" => "btn btn-outline btn-primary")); ?>
				</td>
			</tr>
		</tbody>
	</table>
	<?= form_close() ?>
	<script type="text/javascript">
		window.onload = calculator(<?= $viewDatas['parts']['virtual']['default']['baserate'] ?>);
	</script>
	<?= $viewDatas['session']->getFlashdata('return_message') ? alert_CommonHelper($viewDatas['session']->getFlashdata('return_message')) : "" ?>
</div>