<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c"  uri="http://java.sun.com/jsp/jstl/core" %>
<% pageContext.setAttribute("phpurl",request.getScheme()+"://"+request.getServerName()); %>

<style>
.myDiv
{
	background-color:#efefef;
	
	border-style: solid;
	border-color: black;
	padding-left:10px;
}
.mySpan
{
	color:red
}
</style>


<script>
$(function()
{
	//메일보내기 위한 준비작업
	$(".sendInput").bind("input",function()
	{
		$(this).attr("value",$(this).val());
	});
	$("#sendmail").click(function()
	{
		$("#content").val($("#sendDiv").html());
		$("#mForm").submit();
	});
});
</script>

<script type="text/javascript">
	function is_NumericKey(evt,obj){
		var charCode = (evt.which) ? evt.which : event.keyCode;
		switch(charCode){
			case 48://0
			case 49://1
			case 50://2
			case 51://3
			case 52://4
			case 53://5
			case 54://6
			case 55://7
			case 56://8
			case 57://9
			case 96://KeyPad:0
			case 97://KeyPad:1
			case 98://KeyPad:2
			case 99://KeyPad:3
			case 100://KeyPad:4
			case 101://KeyPad:5
			case 102://KeyPad:6
			case 103://KeyPad:7
			case 104://KeyPad:8
			case 105://KeyPad:9
				break;
			default:
				alert('숫자만 가능합니다['+charCode+']');
				obj.value = obj.value.substring(0,obj.value.length-1);
				break;
		}
	}
	function change_TagFormat(){
		var changeTags = document.getElementsByClassName("changeTag");
		for(i=0; i<changeTags.length; i+2){
			changeTags[i].parentElement.innerHTML=changeTags[i].value.replace(/\n/g, "<BR>");
		}
	}
	function change_CurrencyFormat(){
		var totalCurrency = document.getElementById("totalCurrency");				
		var currencies = document.getElementsByClassName("currency");
		var total = 0;
		for(i=0; i<currencies.length; i+2){
			if(!currencies[i].value.match(/^[0-9]+$/)){//값이 숫자형식인지 판단
				alert('숫자가 아닌값['+currencies[i].value+']이 있습니다');
				currencies[i].focus();
				return false;
			}				
			total += parseInt(currencies[i].value);
			currencies[i].parentElement.innerHTML=currencies[i].value.replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,")+'원';
		}
		totalCurrency.innerHTML=total.toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,")+'원';
		
		change_TagFormat();
	}
</script> 
<!-- 여기가 본 페이지이다 -->
<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><br>&nbsp;&nbsp;&nbsp;&nbsp;<input type="button" id="sendmail" value="메일 보내기"></div>
			<div class="panel-body" id="sendDiv">
				<div class="row">
				<div class="table-responsive">
                    <table class="table table-bordered table-hover table-striped" border="1">
                        <thead>
                        </thead>
                        <tbody> 
                            <tr>
                                <td>고객코드</td>
                                <td>${ClientDto.client_code }</td>
                                <td>고객명</td>
                                <td>${ClientDto.client_name }</td>
                            </tr>
                            <tr>
                                <td>메일주소</td>
                                <td>${ClientDto.client_email1 }</td>
                                <td>발행일</td>
                                <td>${ClientDto.client_receive_date }</td>
                            </tr>
                            <tr>
                                <td>발신자</td>
                                <td><span id="SiteSupport"></span></td>
                                <td>메일 제목</td>
                                <td><span id="SiteSupportTitle"></span>서비스 요금 청구서</td>
                            </tr>
                        </tbody>
                        <tfoot>
                        </tfoot>
                    </table>
                    <!-- Second Table -->
                    <table class="table table-bordered table-hover table-striped" border="1">
                        <thead>
                            <tr>
                                <td align="center">서비스 코드</td>
                                <td align="center">서비스 종류</td>
                                <td align="center">메인 ip 정보</td>
                                <td align="center">결제 금액</td>
                                <td align="center">납부 기한</td>
                            </tr>
                        </thead>
                        <tbody>
                            <c:forEach items="${IdcBillPaperList }" var="temp">
                                <tr>
                                    <td align="center">${temp.service_code }</td>
                                    <td align="center">${temp.service_case }</td>
                                    <td align="center"><input type="text" value="${temp.service_mainip }" class="changeTag"></td>
                                    <td align="right" style="padding-right:30px;"><input type="text" value="${temp.service_amount }" class="currency">원</td>
                                    <td align="center"><input type="text" value="${temp.payment_date }" class="changeTag"></td>
                                </tr>
                            </c:forEach>
                        </tbody>
                        <tfoot>
                            <tr>
                                <td>&nbsp;</td>
                                <td>&nbsp;</td>
                                <td align="center"  style="font-weight:bold;">합  계</td>
                                <td align="right" style="font-weight:bold; padding-right: 30px;" id="totalCurrency">${TotalAmount }원</td>
                                <td>&nbsp;</td>
                            </tr>
                            <tr>
                                <td>비 고</td>
                                <td colspan="4"><textarea cols="80" rows="7" class="changeTag">${StrOut }</textarea></td>
                            </tr>
                            <tr><td colspan="5" align="center"><span onClick="change_CurrencyFormat();" style="font_size:24px;">작업완료</span></td></tr>                           
                        </tfoot>
                    </table>
                </div>
				<c:import url="${phpurl}/depositbillpaper.php?client_code=${ClientDto.client_code}" />
				</div>
			</div>
			<!-- panel-body -->
		</div>
		<!-- panel panel-default -->
	</div>
	<!-- col-lg-12 -->
</div>
<!-- row -->
<!-- /#page-wrapper -->
