<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c"  uri="http://java.sun.com/jsp/jstl/core" %>
<script src="IDC/js/setToken.js"></script>
<script type="text/javascript">
var ab=1;
var ulSize=0;
var oldTableSize=0;

$(function()
{
	var check=true;
	var span = $("<span>");
	$.get("IdcServerListJSON.jso",function(data)
	{
		var jsonArr = data;
		span.addClass("caret");
		ulSize=jsonArr.length*28;
		
		var li = $("<li>");
		var a = $("<a>")
		a.html("새로 추가");
		a.addClass("btn btn-default btn-outline block")
		a.attr({"value":"", "firarr":jsonArr.length+1});
		li.append(a);
		$("#target1").append(li);
		for(i=0;i<jsonArr.length;i++)
		{
			var li = $("<li>");
			var a = $("<a>")
			a.html(jsonArr[i].id);
			a.addClass("btn btn-default btn-outline block");
			a.attr({"value":jsonArr[i].id, "firarr":(i+1)});
			li.append(a);
			$("#target1").append(li);
		}
		setServerList(data);
		//$("#selValue").val(jsonArr[0].id);
	});
	
	//있는 데이터 수정
	$(document).on("click",".gearModi",function()
	{
		var temp = $(this).parents("tr").find("input");
		var url = "IdcGearModify.main?";
		var num = "num="+$(temp[0]).val();
		var spec = "&spec="+$(temp[1]).val();
		var cpuName="&cpuName="+$(temp[2]).val();
		var price = "&price="+$(temp[3]).val();
		var old = "&old="+$(this).attr("old");
		var process = "&process="+$(this).attr("process");
		var firarr="&firarr="+$(this).attr("firarr");
		var token="&token="+$("#token").val();
		/*
		alert($(temp[0]).val()+"\n"+
				$(temp[1]).val()+"\n"+
				$(temp[2]).val()+"\n"+
				$(temp[3]).val()+"\n"+
				$(this).attr("old")+"\n"+
				$(this).attr("process")+"\n"+
				$(this).attr("firarr")+"\n");
		*/
		window.location=url + num + spec + cpuName + price + old + process+firarr+token;
	});
	
	//있는 데이터 지우기
	$(document).on("click",".gearDel",function()
	{
		var url="IdcGearDelete.main";
		var secarr="?secarr="+$(this).attr("secarr");
		var firarr="&firarr="+$(this).attr("firarr");
		var token = "&token="+$("#token").val();
		//alert(secarr+"\n"+firarr);
		window.location=url+secarr+firarr+token;
	});
	
	//코어 클릭시 목록 띄움.
	$(document).on("click","#selValue",function()
	{
		$(this).parent().css("height",oldTableSize);
		oldTableSize = $(this).parent().css("height");
		var s = oldTableSize.split("px");
		s=s[0].split(",");
		oldTableSzie = s;
		$(this).parent().css("height",(ulSize+parseInt(oldTableSize)));
		$("#target1").show();
	});
	
	//셀렉트 하는 경우
	$(document).on("click","#target1 > li > a",function()
	{
		var my = $(this).attr("value");
		var sel = $("#selValue");
		if(my=="")
			sel.removeAttr("readonly");
		else
			sel.attr("readonly","readOnly");
		
		sel.val(my);
		sel.parent().css("height",oldTableSize);
		$("#target1").hide();
		sel.focus();
		$("#firarr").val($(this).attr("firarr"));
	});
	
	//추가 버튼 누를 경우
	$(document).on("click",".addBtn", function()
	{
		check=false;
		$("#table1").children().append(createTRSet());
		$(this).parent().addClass("prev");
		$(this).remove();
	});
	
	//제거 버튼을 누른 경우
	$(document).on("click",".delBtn", function()
	{
		var b = $("<button>");
		b.attr("type","button").addClass("btn btn-primary btn-outline addBtn").html("추가");
		if($(this).attr("value") == $(".delBtn").last().attr("value"))
		{
			var pr = $(".prev").last();
			pr.append(b);
			pr.removeClass("prev");
		}
		
		$(this).parent().parent().remove();
	});
	$("#formSend").click(function()
	{
		var check=true;
		$(".sendForm").each(function()
		{
			if($(this).val()=="")
			{
				$(this).parent().addClass("has-error");
				check = false;
				alert("장비를 모두 입력하십시오.");
				return false;
			}
		});
		if(check)
			$("#form1").attr("action","IdcNewServerInsert.main").submit();
	});
	$(document).on("input",".sendForm",function()
	{
		$(this).parent().removeClass("has-error");
	});
	
	//위 버튼 누를시
	$(document).on("click",".upBtn",function()
	{
		var url="";
		var old=$(this).attr("old");
		if(old==1)
		{
			alert("최상위입니다.");
			return;
		}
		else
			url="IdcGearArray.main?arr=up";
		var s_old="&old="+old;
		var num ="&num="+(parseInt(old)-1);
		window.location=url+s_old+num;
	});
	//아래 버튼 누를시
	$(document).on("click",".downBtn",function()
	{
		var url="";
		var old=$(this).attr("old");
		if(old==$("#firarr").val())
		{
			alert("최하위입니다.");
			return;
		}
		else
			url="IdcGearArray.main?arr=down";
		
		var s_old="&old="+old;
		var num ="&num="+(parseInt(old)+1);
		window.location=url+s_old+num;
	});
});
var setServerList = function(data)
{
	var json=data;
	var tbody = $("#serverListTBODY");
	for(var i=0;i<json.length;i++)
	{
		for(var j=0;j<json[i].a[0].cpuname.length;j++)
		{
			tbody.append($("<tr>").append($("<td>").html($("<input size='1'>").val(j+1))).
												append($("<td>").html(json[i].a[0].process)).
												append($("<td>").html($("<input size='5'>").val(json[i].a[0].spec[j]))).
												append($("<td>").html($("<input size='5'>").val(json[i].a[0].cpuname[j]))).
												append($("<td>").html($("<input size='2'>").val(parseInt(json[i].a[0].cost[j],10)/10000))).
												append($("<td>").html($("<button class='gearModi'>").html("수정").attr({"old":(j+1), "process":json[i].a[0].process, "firarr":(i+1)}))).
												append($("<td>").html($("<button class='gearDel'>").html("삭제").attr({"secarr":j, "firarr":(i+1)})))
								);
		}
		createTRSet2(json[i].a[0].process,i);
	}
}
var createTRSet2 = function(data, i)
{
	
	var tr = $("<tr>");
	
	var td = $("<td>");
	td.html(data);
	var td2 = $("<td>");
	var btn = $("<button>").addClass("upBtn").html("위").attr({"old":(i+1), "type":"button"});
	var btn2 = $("<button type='button' class='downBtn'>").html("아래").attr("old",i+1);
	td2.append(btn).append($("<br>")).append(btn2);
		
	tr.append(td).append(td2);
	$("#ProcessArrayTable").append(tr);
}

var createTRSet = function()
{
	var tr = $("<tr>");

	var td = $("<td>");
	var td2 = $("<td>");
	var td3 = $("<td>");
	var td4 = $("<td>");
	var td5 = $("<td>");
	var input = $("<input>");
	input.attr(
			{
				type : "text",
				name : "selValue2",
				value : ""
			}).addClass("form-control sendForm");
	
	var input2 = $("<input>");
	input2.attr(
			{
				type : "text",
				name : "spec",
				value : ""
			}).addClass("form-control sendForm");
	
	var input3 = $("<input>");
	input3.attr(
					{
						type : "text",
						name : "cpuName",
						value : ""
					}).addClass("form-control sendForm");
	var input4 = $("<input>");
	input4.attr(
					{
						type : "text",
						name : "price",
						value : ""
					}).addClass("form-control sendForm");
	
	var button = $("<button>");
	var button2 = $("<button>");
	button.attr("type","button").addClass("btn btn-primary btn-outline addBtn").html("추가");
	button2.attr(
	{
					  type : "button",
					  value : ab++
	}).addClass("btn btn-danger btn-outline delBtn").html("제거");
	
	td.append(input);
	td2.append(input2);
	td3.append(input3);
	td4.append(input4);
	td5.append(button).append(button2);
	
	tr.append($("<td>")).append(td).append(td2).append(td3).append(td4).append(td5);
	return tr;
}
</script>

<div class="row">
	<div class="col-lg-12">
		<div class="panel panel-default">
			<div class="panel-heading">
				<h4><i class="fa fa-desktop fa-fw"></i> 서버 장비</h4>
			</div>
			<form id="form1" method="get">
				<input type="hidden" id="token" class="token" name="token">
				<div class="panel-body">
					<div >
						<div >
							<table class="table table-bordered table-hover" id="table1" style="margin-bottom:0px;">
								<tr>
									<td>
										<label>코어</label>
									</td>
									<td>
										<label>순서</label>
									</td>
									<td>
										<label>장비 사양</label>
									</td>
									<td>
										<label>cpu 명칭</label>
									</td>
									<td>
										<label>가격</label>
									</td>
									<td>
										<label>추가</label>
									</td>
								</tr>
								<tr>
									<td>
										<input id="selValue" class="form-control selValue" name="selValue" type="text" readOnly="readOnly" placeholder="선택하세요">
										<div class="input-group-btn">
											<ul id="target1" class="dropdown-menu" role="menu">
											</ul>
										</div>
									</td>
									<td>
										<input type="text" class="form-control" id="selValue2" name="selValue2">
									</td>
									<td>
										<input type="text" name="spec" class="form-control sendForm">
									</td>
									<td>
										<input type="text" name="cpuName" class="form-control sendForm">
									</td>
									<td>
										<input type="number" name="price" class="form-control sendForm">
									</td>
									<td>
										<button type="button" class="btn btn-primary btn-outline addBtn">추가</button>
									</td>
								</tr>
							</table>
							<!-- table -->
						</div>
						<!-- table responsive -->
					</div>
					<div class="input-group" >
							<input type="hidden" id="firarr" name="firarr">
						<div class="input-group-btn">
							<button type="button" class="btn btn-primary btn-outline" id="formSend" value="df">저장</button>
						</div>
					</div>
				</div>
				<!-- panel-body -->
			</form>
		</div>
		<!-- panel panel-default -->
	</div>
	<!-- Right div -->
</div>
<!-- row -->
<div class="row">
	<div class="col-lg-12">
		<div class="panel panel-default">
			<div class="panel-heading">
				<h4><i class="fa fa-desktop fa-fw"></i> 서버 장비 순서 변경</h4>
			</div>
			<div class="panel-body">
				<div class="table-responsive">
					<table class="table table-bordered" id="ProcessArrayTable">
						<tr>
							<td width="80%">구분</td>
							<td>설정</td>
						</tr>
					</table>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- 여기가 본 페이지이다 -->
<div class="row">
	<div style="" class="col-lg-12">
		<div class="panel panel-default">
			<div class="panel-heading">
				<h4><i class="fa fa-desktop fa-fw"></i> 서버 장비 추가</h4>
			</div>
			<div class="panel-body">
				<div class="table-responsive">
					<table class="table table-bordered table-hover" style="margin-bottom:0px;">
						<thead>
							<tr>
								<td>순서</td>
								<td>구분</td>
								<td>장비사양</td>
								<td>CPU모델명</td>
								<td>가격</td>
								<td>수정</td>
								<td>삭제</td>
							</tr>
						</thead>
						<tbody id="serverListTBODY">
						</tbody>
						<tfoot>
						</tfoot>
					</table>
				</div>
			</div>
		</div>
	</div>
	<!-- Left div -->
</div>
<!-- /#page-wrapper -->
