<%@ 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");
		
	//해당 누르면 가기
	$(document).on("click",".nonContent",function()
	{
		$("#searchContent").val($(this).attr("value"));
		ulClientName.toggle();
	});
	$("#searchBtn").click(function()
	{
		$("#nonPayForm").attr("action","IdcDetailList.dep").submit();
	});	
	
	//필터
	var ex_filter = $("#selDep").attr("value");
	if(ex_filter != null  &&  ex_filter != undefined && ex_filter != ""){
		$("#serviceSel").val(ex_filter);	
	}else{
		$("#serviceSel").val("client_name");
	}
	
	$("#service_note").change(function(){
		$(".note").val($("#service_note").val());
	});	
	
	$(document).on("click", ".submit_btn", function(){
		
	});
});
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>

<script>
$(document).ready(function(){
	  $('.date').mask('00/00/0000');
	  $('.time').mask('00:00:00');
	  $('.date_time').mask('00/00/0000 00:00:00');
	  $('.cep').mask('00000-000');
	  $('.phone').mask('0000-0000');
	  $('.phone_with_ddd').mask('(00) 0000-0000');
	  $('.phone_us').mask('(000) 000-0000');
	  $('.mixed').mask('AAA 000-S0S');
	  $('.cpf').mask('000.000.000-00', {reverse: true});
	  $('.money_txt').mask('000,000,000,000,000,000', {reverse: true});
	  $('.money1').mask('000,000,000,000,000,000', {reverse: true});
	  $('.money2').mask("#.##0,00", {reverse: true});	  	  
	  $('.ip_address').mask('0ZZ.0ZZ.0ZZ.0ZZ', {
	    translation: {
	      'Z': {
	        pattern: /[0-9]/, optional: true
	      }
	    }
	  });
	  $('.ip_address').mask('099.099.099.099');
	  $('.percent').mask('##0,00%', {reverse: true});
	  $('.clear-if-not-match').mask("00/00/0000", {clearIfNotMatch: true});
	  $('.placeholder').mask("00/00/0000", {placeholder: "__/__/____"});
	  $('.fallback').mask("00r00r0000", {
	      translation: {
	        'r': {
	          pattern: /[\/]/, 
	          fallback: '/'
	        }, 
	        placeholder: "__/__/____"
	      }
	    });
	  $('.selectonfocus').mask("00/00/0000", {selectOnFocus: true});
});
</script>

<style>
.text1{
	text-align:center;
	border:none;
	padding:0;
	font-size:16px; 
	text-align:left;
	color:#67BD0E;				
}

.money{
	text-align:center;
	border:none;
	padding:0;
	font-size:16px; 
	text-align:right;
	color:#DF282B;				
}

.money_normal{
	text-align:center;
	border:none;
	padding:0;
	font-size:10px; 
	text-align:center;
	color:#394149;
}

input[type="text"] {
  display: block;
  margin: 0;
  width: 100%;
  font-family: sans-serif;
  font-size: 16px;
  appearance: none;
  box-shadow: none;
  border-radius: none;
}

</style>

<!-- 여기가 본 페이지이다 -->
<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> 15일 간 내역 리스트</h4>
			</div>
			<div class="panel-body">
				
					<div class="form-group">
						<form class="form-inline" method="POST" role="form" id="nonPayForm">
						<div class="input-group">
							<input type="date" name="first_date" value="${first_date}">
							<strong>~</strong>
							<input type="date" name="last_date" value="${last_date}">
							<input class="btn btn-outline btn-default" value="검색" type="submit">							
						</div>
						<div class="input-group">																													
							<input type="hidden" value="${filter}" id="selDep">
							<span class="input-group-btn">
								<select class="btn btn-info" id="serviceSel" name="filter" value="${filter}">
									<option value="client_name">고객명</option>
									<option value="server_code">장비명</option>
									<option value="service_sw">SW</option>
									<option value="service_ip">IP</option>
								</select>
							</span>						
							<input type="text" name="searchContent" id="searchContent" value="${searchContent }" class="form-control">							
							<span class="input-group-btn">
								<button class="btn btn-outline btn-default" type="submit" id="searchBtn">검색</button>
							</span>
							<span class="input-group-btn">								
								<a class="btn btn-outline btn-default"  onclick="tableToExcel('table','name')">엑셀</a>								
							</span>														
						</div>
						<div class="input-group">													
							<input type="text" value="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp서비스 가격 합계" class="text1" readonly="readonly">
							<input type="text" value="${total_service_amount}" class="money money_txt" readonly="readonly">							 
						</div>
						</form>
					</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>									
								</tr>
							</thead>
							<tbody>
								<c:forEach items="${IdcNonPayMentList }" var="temp" varStatus="i">									
									<tr>																				
										<td>${temp.service_num}</td>
										<td>${temp.client_name }</td>
										<td>${temp.temp }</td>
										<td>${temp.server_code}</td>
										<td>${temp.service_ip}</td>
										<td>${temp.service_request_date }</td>
										<td>${temp.service_payment_date }</td>
										<td>${temp.service_amount }</td>
										<td>${temp.client_amount}</td>																																									
										<td>				
											<textarea class="form-control" rows="2" name="service_note">${temp.service_note}</textarea>																																								  																																																									
										</td>																														
									</tr>
									<c:forEach items="${oneList}" var="one">
		                    			<c:if test="${temp.service_code eq one.service_code}">
		                    				<tr>																				
												<td></td>
												<td></td>
												<td>${one.onetime_case}</td>
												<td>${one.onetime_sub}</td>
												<td></td>
												<td>${one.onetime_request_date}</td>
												<td>${one.onetime_payment_date}</td>
												<td>${one.onetime_amount }</td>
												<td>${temp.client_amount}</td>					
												<td>
													<textarea class="form-control" rows="2" name="onetime_note">${one.onetime_note}</textarea>
												</td>
											</tr>
		                    			</c:if>
                    				</c:forEach>																	
								</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="IdcDetailList.dep?&searchContent=${searchContent}&filter=${filter}&first_date=${first_date}&last_date=${last_date}">
									<i class="fa fa-angle-double-left "></i>
								</a>
							</li>
							<li>
							<c:if test="${curPage!=1 }">
								<a class="btn btn-outline_btn-default" href="IdcDetailList.dep?curPage=${curPage-1 }&searchContent=${searchContent}&filter=${filter}&first_date=${first_date}&last_date=${last_date}">
									<i class="fa fa-angle-left"></i>
								</a>
							</c:if>
							<c:if test="${curPage==1 }">
								<a class="btn btn-outline_btn-default" href="IdcDetailList.dep?curPage=1&searchContent=${searchContent}&filter=${filter}&first_date=${first_date}&last_date=${last_date}">
									<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="IdcDetailList.dep?curPage=${i}&searchContent=${searchContent}&filter=${filter}&first_date=${first_date}&last_date=${last_date}">${i}</a>	
								</li>
							</c:forEach>
							<li>
								<c:if test="${curPage!=pageCnt }">
									<a class="btn btn-outline_btn-default" href="IdcDetailList.dep?curPage=${curPage+1 }&searchContent=${searchContent}&filter=${filter}&first_date=${first_date}&last_date=${last_date}">
										<i class="fa fa-angle-right"></i>
									</a>
								</c:if>
								<c:if test="${curPage==pageCnt }">
									<a class="btn btn-outline_btn-default" href="IdcDetailList.dep?curPage=${pageCnt }&searchContent=${searchContent}&filter=${filter}&first_date=${first_date}&last_date=${last_date}">
										<i class="fa fa-angle-right"></i>
									</a>
								</c:if>
							</li>
							<li>
								<a class="btn btn-outline btn-default" href="IdcDetailList.dep?curPage=${pageCnt}&searchContent=${searchContent}&filter=${filter}&first_date=${first_date}&last_date=${last_date}">
									<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 -->
