<%@ 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">
var ulClientName;
$(function()
{
	ulClientName=$("#ulClientName");
	//검색 ajax가져오기
	$("#searchContent").bind("input",function()
	{
		ulClientName.empty();
		ulClientName.toggle();
		
		$.ajax(
		{
			url:"IdcGetClientName.jso",
			data:"searchContent="+$(this).val(),
			dataType:"json",
			type:"post",
			cache:false,
			success:function(data)
			{
				getClientName(data[0].a);
			},
			error:function()
			{
				alert("고객명 가져오기 오류")
			}
		});
	});
	//해당 누르면 가기
	$(document).on("click",".nonContent",function()
	{
		$("#searchContent").val($(this).attr("value"));
		ulClientName.toggle();
	});
	$("#searchBtn").click(function()
	{
		$("#nonPayForm").attr("action","IdcDepositNonPaymentListExcel.dep").submit();
	});
	
	//필터
	//필터 초기화
	$("#selDep").val($("#selDep").attr("value"));
	//필터 선택시
	$("#selDep").change(function()
	{
		window.location="IdcDepositNonPaymentListExcel.dep?&filter="+$(this).val();
	});
});
var getClientName=function(data)
{
	for(var i=0;i<data.length;i++)
	{
		var li=$("<li>");
		var a=$("<a>");
		a.attr({value:data[i]}).html(data[i]).addClass("btn btn-default nonContent");
		li.append(a);
		ulClientName.append(li);
	}
}

var tableToExcel = (function(){
	var uri = 'data:application/vnd.ms-excel;base64,'
	    , template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--><meta http-equiv="content-type" content="text/plain; charset=UTF-8"/></head><body><table>{table}</table></body></html>'
	    , base64 = function(s) { return window.btoa(unescape(encodeURIComponent(s))) }
	    , format = function(s, c) { return s.replace(/{(\w+)}/g, function(m, p) { return c[p]; }) }
	  return function(table, name) {
	    if (!table.nodeType) table = document.getElementById(table)
	    var ctx = {worksheet: name || 'Worksheet', table: table.innerHTML}
	    window.location.href = uri + base64(format(template, ctx))
	  }
})();

</script>

<!-- 여기가 본 페이지이다 -->
<input type="hidden" id="checkContent" value="${checkContent }">
<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">
				<form class="form-inline" method="POST" role="form" id="nonPayForm">
					<div class="form-group">
						<div class="input-group">
							<input class="form-control" type="text" name="searchContent" id="searchContent" placeholder="고객명" value="${searchContent }">
							<ul class="dropdown-menu" role="menu" id="ulClientName">
							</ul>
							<span class="input-group-btn">
								<button class="btn btn-outline btn-default form-control" type="submit" id="searchBtn">검색</button>
							</span>
							<span class="input-group-btn">
								<select class="btn btn-info" id="selDep" value="${filter }">
									<option value="all">전체</option>
									<option value="third">3일전</option>
									<option value="second">2일전</option>
									<option value="first">1일전</option>
									<option value="today">당일</option>
									<option value="over">미납서버</option>
								</select>								
								<a class="btn btn-outline btn-default"  onclick="tableToExcel('table','name')">엑셀 출력</a>								
							</span>
						</div>
					</div>
					<!-- row -->
		   			<div class="table-responsive" id="table">
						<table class="table table-bordered table-hover table-striped">
							<thead>
								<tr>
									<td>No</td>
									<td>고객명</td>
									<td>종류</td>
									<td>장비명</td>
									<td>IP</td>
									<td>개통일</td>
									<td>결제일</td>
									<td>서비스 가격</td>
									<td>과금상태</td>
									<td>미납과금</td>
									<td>비고</td>
								</tr>
							</thead>
							<tbody>
								<c:forEach items="${IdcNonPayMentList }" var="temp" varStatus="i">
									<tr>
										<td>${i.count }</td>
										<td>${temp.dto.client_name }</td>
										<td>${temp.dto.temp }</td>
										<td>${temp.dto.server_code }</td>
										<td>${temp.dto.service_ip }</td>
										<td>${temp.dto.service_request_date }</td>
										<td>${temp.dto.service_payment_date }</td>
										<td>${temp.dto.service_amount }</td>
										<td>${temp.dto.service_payment_status }</td>
										<td>${temp.dto.service_nonpayment }</td>										
										<td>
											<textarea class="form-control" rows="2" name="service_note">${temp.dto.service_note}</textarea>
										</td>
									</tr>
									<c:if test="${temp.nulist != null }">
									<tr>
										<td colspan="12">사용중 서비스</td>
									</tr>
										<c:forEach items="${temp.nulist }" var="nulist" varStatus="j">
											<tr>
											</tr>
											<tr>
												<td colspan="4"></td>
												<td>${nulist.service_case } (${nulist.service_ip })</td>
												<td>${nulist.service_request_date }</td>
												<td>${nulist.service_payment_date }</td>
												<td>${nulist.service_amount }</td>
												<td>${nulist.service_payment_status }</td>
												<td>${nulist.service_nonpayment }</td>
												<td></td>
											</tr>	
										</c:forEach>
									</c:if>
								</c:forEach>
							</tbody>
							<tfoot>
							</tfoot>
						</table>
					</div>
					<!-- table-responsive -->					
					<!-- UL DIV -->
				</form>
			</div>
			<!-- panel-body -->
		</div>
		<!-- panel panel-default -->
	</div>
	<!-- col-lg-12 -->
</div>
<!-- row -->
<!-- /#page-wrapper -->
