<%@ 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:"get",
			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","IdcDepositNonPaymentList.dep").submit();
	});
	$("#billPaper").click(function()
	{
		if($("#checkContent").val()!="x")
			$("#nonPayForm").attr("action","IdcDepositBillPaper.dep").submit();
		else
			alert("고객검색을 먼저해 주십시오.");
	});
	
	//필터
	//필터 초기화
	$("#selDep").val($("#selDep").attr("value"));
	//필터 선택시
	$("#selDep").change(function()
	{
		window.location="IdcDepositNonPaymentList.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);
	}
}
</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="get" 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">03일전</option>
									<option value="second">02일전</option>
									<option value="first">01일전</option>
									<option value="today">당일</option>
									<option value="over">미납서버</option>
								</select>
								<input class="btn btn-outline btn-default form-control" type="submit" id="billPaper" value="청구서 발행">
								<a class="btn btn-outline btn-default"  href="IdcDepositNonPaymentListExcel.dep">엑셀</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>개통일</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>
										<a href="IdcTotalSearchForm.main?totSearchContent=${temp.dto.client_name}">
										${temp.dto.client_name }</a></td>
										<td>${temp.dto.temp }</td>
										<td>${temp.dto.server_code }</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>
										<input type=hidden value="${temp.dto.service_case }">
										<input type=hidden value="${temp.dto.service_ip }">
										<td>
												<input type="checkbox" id="Bill" name="Bill" value="${i.count-1 }">${i.count-1 }
										</td>
										<td>
											<textarea style="width:100%;height:100%">${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><input type="checkbox" name="nuBill" value="${i.count-1 }-${j.count-1 }">${i.count-1} - ${j.count-1 }</td>
												<td></td>
											</tr>	
										</c:forEach>
									</c:if>
								</c:forEach>
							</tbody>
							<tfoot>
							</tfoot>
						</table>
					</div>
					<!-- table-responsive -->
					<div>
						<ul class="pagination" style="margin:0px;">
							<li>
								<a class="btn btn-outline btn-default" href="IdcDepositNonPaymentList.dep?&searchContent=${searchContent}&filter=${filter}">
									<i class="fa fa-angle-double-left "></i>
								</a>
							</li>
							<li>
							<c:if test="${curPage!=1 }">
								<a class="btn btn-outline_btn-default" href="IdcDepositNonPaymentList.dep?curPage=${curPage-1 }&searchContent=${searchContent}&filter=${filter}">
									<i class="fa fa-angle-left"></i>
								</a>
							</c:if>
							<c:if test="${curPage==1 }">
								<a class="btn btn-outline_btn-default" href="IdcDepositNonPaymentList.dep?curPage=1&searchContent=${searchContent}&filter=${filter}">
									<i class="fa fa-angle-left"></i>
								</a>
							</c:if>
							</li>
							<c:forEach var="i" begin="${firstPage }" end="${endPage }">
								<li>
									<a class="btn btn-outline btn-defualt" href="IdcDepositNonPaymentList.dep?curPage=${i}&searchContent=${searchContent}&filter=${filter}">${i}</a>	
								</li>
							</c:forEach>
							<li>
								<c:if test="${curPage!=pageCnt }">
									<a class="btn btn-outline_btn-default" href="IdcDepositNonPaymentList.dep?curPage=${curPage+1 }&searchContent=${searchContent}&filter=${filter}">
										<i class="fa fa-angle-right"></i>
									</a>
								</c:if>
								<c:if test="${curPage==pageCnt }">
									<a class="btn btn-outline_btn-default" href="IdcDepositNonPaymentList.dep?curPage=${pageCnt }&searchContent=${searchContent}&filter=${filter}">
										<i class="fa fa-angle-right"></i>
									</a>
								</c:if>
							</li>
							<li>
								<a class="btn btn-outline btn-default" href="IdcDepositNonPaymentList.dep?curPage=${pageCnt}&searchContent=${searchContent}&filter=${filter}">
									<i class="fa fa-angle-double-right "></i>
								</a>
							</li>
						</ul>
						<!-- ul -->
					</div>
					<!-- UL DIV -->
				</form>
			</div>
			<!-- panel-body -->
		</div>
		<!-- panel panel-default -->
	</div>
	<!-- col-lg-12 -->
</div>
<!-- row -->
<!-- /#page-wrapper -->