<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c"  uri="http://java.sun.com/jsp/jstl/core" %>

<script type="text/javascript">
$(function()
{
	//기본정보들 숨김
	$("#Detail").hide();
	//클릭시 숨긴정보 펼쳐줌.
	$("#DeleteServiceListTbody > tr > td > a").click(function()
	{
		$("#Detail").show();
		var val ="serviceCode="+ $(this).attr("value");
		$.ajax(
		{
			url:"IdcDeleteServiceDetail.jso",
			data : val,
			dataType:"json",
			type:"POST",
			cache:false,
			success:function(data)
			{
				setDetail1(data.a);
				setDetail2(data.ip,"ip");
				setDetail2(data.cs,"cs");
				setDetail2(data.kcs,"kcs");
				setDetail2(data.vpc,"vpc");
			},
			error:function()
			{
				alert("실패");
			}
		});
	});
});

//숨긴정보중 1번칸에 해당하는 정보 출력
var setDetail1 = function(a)
{
	$("#line2").empty();	$("#ip2").empty();	$("#server_code2").empty();
	var linetd=$("#line"); var iptd=$("#ip"); var s_codetd=$("#server_code"); var s_spectd=$("#server_spec");
	var s_swtd=$("#service_sw"); var p_daytd=$("#service_payment_date"); var c_daytd=$("#service_cancel_date");
	var s_spectd2=$("#server_spec2");var s_swtd2=$("#service_sw2"); var amount=$("#amount");
	var payment=$("#payment");
	
	linetd.html(a.service_line); iptd.html(a.service_ip); s_codetd.html(a.server_code); s_spectd.html(a.server_spec);
	s_swtd.html(a.service_sw); p_daytd.html(a.sservice_payment_date); c_daytd.html(a.sservice_cancel_date);
	s_swtd2.html(a.service_os); amount.html("결제금액 : "+(a.service_amount - a.service_nonpayment)+"<br>"+"금액 : "+a.service_amount); 
	payment.html("미납금액 : "+a.service_nonpayment);
}
//숨긴정보중 2번칸에 해당하는 정보 출력
var setDetail2 = function(a, b)
{
	var line=$("#line2"); var ip=$("#ip2"); var s=$("#server_code2");
	
	var oldLine = line.html();
	
	oldLine += b+" : "+a.length+"<br>";
	line.html(oldLine);
	
	for(var i=0;i<a.length;i++)
	{
		ip.html(ip.html() + a[i].ip+"<br>");
		s.html(s.html() + a[i].adddb_code+"<br>");
	}
}
</script>

<!-- 여기가 본 페이지이다 -->
<!-- row -->

<div class="row" id="Detail">
	<div class="col-lg-10 col-lg">
		<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 table-striped">
						<thead>
							<tr>
								<th style="text-align:center;">고객명</th>
								<th style="text-align:center;">라인</th>
								<th style="text-align:center;">IP</th>
								<th style="text-align:center;">장비명</th>
								<th style="text-align:center;">장비사양</th>
								<th style="text-align:center;">스위치정보</th>
								<th colspan="2" style="text-align:center;">결제정보</th>
								<th style="text-align:center;">해지일</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td rowspan="2"  style="text-align:center;">${searchContent }</td>
								<td id="line" style="text-align:center;"></td>
								<td id="ip" style="text-align:center;"></td>
								<td id="server_code" style="text-align:center;"></td>
								<td id="server_spec" style="text-align:center;"></td>
								<td id="service_sw" style="text-align:center;"></td>
								<td style="text-align:center;">매월 결제일</td>
								<td id="service_payment_date" style="text-align:center;"></td>
								<td id="service_cancel_date" style="text-align:center;"></td>
							</tr>
							<tr>
								<td id="line2" style="text-align:center;"></td>
								<td id="ip2" style="text-align:center;"></td>
								<td id="server_code2" style="text-align:center;"></td>
								<td id="server_spec2" style="text-align:center;"></td>
								<td id="service_sw2" style="text-align:center;"></td>
								<td id="amount" style="text-align:center;"></td>
								<td id="payment" style="text-align:center;"></td>
								<td id="service_cancel_reason" style="text-align:center;"></td>
							</tr>
						</tbody>
						<tfoot>
						</tfoot>
					</table>
				</div>
			</div>
		</div>
		<!-- panel -->
	</div>
</div>


<div class="row">
	<div class="col-lg-8">
		<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="row">
					<form action="IdcDeleteServiceListForm.sev" method="post">
						<div class="col-lg-3 col-md-5 col-sm-6 col-xs-12">
							<div class="input-group">
								<input class="form-control" type="text" name="searchContent" placeholder="고객명" value="${searchContent }">
								<div class="input-group-btn">
									<input type="submit" class="btn btn-info btn-outline" value="검색">
								</div>
							</div>
						</div>
					</form>
				</div>
				<!-- row -->
	   			<div class="table-responsive">
					<table class="table table-bordered table-hover table-striped">
						<thead>
							<tr>
								<td>고객명</td>
								<td>서비스 코드</td>
								<td>장비명</td>
								<td>신청일</td>
								<td>오픈일</td>
								<td>결제일</td>
								<td>해지일</td>
								<td>금액</td>
								<td>미납금</td>
								<td>납부금</td>
							</tr>
						</thead>
						<tbody id="DeleteServiceListTbody">
							<c:forEach items="${DeleteServiceList }" var="temp">
								<tr>
									<td>${temp.client_name }</td>
									<td><a value="${temp.service_code }">${temp.service_code }</a></td>
									<td>${temp.server_code }</td>
									<td>${temp.request_date }</td>
									<td>${temp.open_date }</td>
									<td>${temp.payment_date }</td>
									<td>${temp.cancel_date }</td>
									<td>${temp.amount }</td>
									<td>${temp.nonpayment }</td>
									<td>${temp.payment }</td>
								</tr>							
							</c:forEach>
						</tbody>
						<tfoot>
						</tfoot>
					</table>
				</div>
				<!-- table-responsive -->
				
				<div align=center>
					<ul class="pagination" style="margin:0px;">
						<li>
							<a class="btn btn-outline btn-default" href="IdcDeleteServiceListForm.sev?searchContent=${searchContent }">
								<i class="fa fa-angle-double-left "></i>
							</a>
						</li>
					<c:forEach var="i"  begin="1" end="20">
						<li>
							<a class="btn btn-outline btn-defualt" href="IdcDeleteServiceListForm.sev?curPage=${i}&searchContent=${searchContent }">${i}</a>	
						</li>
					</c:forEach>
						<li>
							<a class="btn btn-outline btn-default" href="IdcDeleteServiceListForm.sev?curPage=${pageCnt}&searchContent=${searchContent }">
								<i class="fa fa-angle-double-right "></i>
							</a>
						</li>
					</ul>
					<!-- ul -->
				</div>
				<!-- UL DIV -->
				
			</div>
			<!-- panel-body -->
		</div>
		<!-- panel panel-default -->
	</div>
	<!-- col-lg-12 -->
</div>

<!-- /#page-wrapper -->
