<%@ 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("고객명 가져오기 오류")
			}
		});
	});
	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);
		}
	}
	//해당 누르면 가기
	$(document).on("click",".nonContent",function()
	{
		$("#searchContent").val($(this).attr("value"));
		ulClientName.toggle();
	});
});
</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>
			<div class="panel-body">
				<div class="row">
					<form>
						<div class="form-group">
							<div class="col-lg-4">
								<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>
								</div>
							</div>
						</div>
					</form>
				</div>
				<!-- row -->
	   			<div class="table-responsive">
					<table class="table table-bordered table-hover table-striped">
						<thead>
							<tr>
								<td>No</td>
								<td>고객명</td>
								<td>서비스코드</td>
								<td>보낸날짜</td>
							<tr>
						</thead>
						<tbody>
							<c:forEach items="${list }" var="temp">
								<tr>
									<td>${temp.webNum }</td>
									<td><a href="IdcReSendBillPaperForm.dep?num=${temp.num }">${temp.client_name }</a></td>
									<td>${temp.service_code }</td>
									<td>${temp.date }</td>
								<tr>
							</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="IdcReSendMailList.dep?&searchContent=${searchContent}">
								<i class="fa fa-angle-double-left "></i>
							</a>
						</li>
						<li>
						<c:if test="${curPage!=1 }">
							<a class="btn btn-outline_btn-default" href="IdcReSendMailList.dep?curPage=${curPage-1 }&searchContent=${searchContent}">
								<i class="fa fa-angle-left"></i>
							</a>
						</c:if>
						<c:if test="${curPage==1 }">
							<a class="btn btn-outline_btn-default" href="IdcReSendMailList.dep?curPage=1&searchContent=${searchContent}">
								<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="IdcReSendMailList.dep?curPage=${i}&searchContent=${searchContent}">${i}</a>	
							</li>
						</c:forEach>
						<li>
							<c:if test="${curPage!=pageCnt }">
								<a class="btn btn-outline_btn-default" href="IdcReSendMailList.dep?curPage=${curPage+1 }&searchContent=${searchContent}">
									<i class="fa fa-angle-right"></i>
								</a>
							</c:if>
							<c:if test="${curPage==pageCnt }">
								<a class="btn btn-outline_btn-default" href="IdcReSendMailList.dep?curPage=${pageCnt }&searchContent=${searchContent}">
									<i class="fa fa-angle-right"></i>
								</a>
							</c:if>
						</li>
						<li>
							<a class="btn btn-outline btn-default" href="IdcReSendMailList.dep?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>
<!-- row -->
<!-- /#page-wrapper -->
