<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
      layout:decorate="~{admin/layout/layout}" th:with="title='',active='home'">
 <th:block layout:fragment="html_head">
		  <style>
		/* betlist modal */
		#modal.modal-overlay {
			width: 100%;
			height: 100%;
			position: fixed;
			left: 0;
			top: 0;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			background: rgba(255, 255, 255, 0.25);
			box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
			backdrop-filter: blur(1.5px);
			-webkit-backdrop-filter: blur(1.5px);
			border-radius: 10px;
			border: 1px solid rgba(255, 255, 255, 0.18);
			display: none;
		}

		#modal .modal-window {
			background: #fff;
			box-shadow: 0 8px 32px 0 rgba(141, 141, 141, 0.7);
			backdrop-filter: blur(13.5px);
			-webkit-backdrop-filter: blur(13.5px);
			border-radius: 5px;
			width: 700px;
			position: relative;
			color: #121212;
		}

		#betDetailFrame::-webkit-scrollbar {width: 5px;}

		.s_no-scroll {
			overflow-y: auto;
		}

		.modal-title {
			padding: 10px;
			border-bottom: 2px solid #03add2;
			text-align: center;
		}

		.modal-title h2 {
			font-size: 20px;
		}

		.modal-close {
			position: absolute;
			right: 15px;
			top: 13px;
			font-size: 17px;
			cursor: pointer;
		}

		.modal-content-bet {
			padding: 15px;
		}

		.modal-content-bet table {
			width: 100%;
		}

		.modal-content-bet h4 {
			margin-bottom: 10px;
			font-size: 18px;
		}

		.modal-content-bet>div:last-child h4 {
			margin-top: 10px;
		}

		.modal-content-bet td {
			border: 1px solid #b8b8b8;
			padding: 10px;
		}
		.difff {
			display: flex; gap: 10px; align-items: center; margin-bottom: 20px;
		}
		.difff ul {
			padding: 10px; border: 1px dashed #b8b8b8; background: #fff;
			position: relative;
		}
		.difff ul li:nth-child(1) {
			padding: 0 5px;
			position: absolute;
			background: linear-gradient(to bottom, #f8fbff 50%, #fff 50%);
			top: -12px; left: 5px;
			font-weight: 600; font-size: 14px;
		}
		.ptBtn {
			font-size: 14px;
		}
	</style>
<script>
	function goPage(pageNo) {
			var form = document.searchVO;
			form.page.value = pageNo;
			form.action = "/parseGame";
			form.submit();
		}

		function goSearch() {

			var form = document.searchVO;
			form.page.value = 1;
			form.action = "/parseGame";
			form.submit();
		}
		
		
	function jsonView(targetId){
		
	  if ($('#'+targetId).css("display") == "none") { 
	        $('#'+targetId).show(); //display :none 일떄
	    } else {
	        $('#'+targetId).hide();  //display :block 일떄
	    }

	
		
	}
</script>
		
		</th:block>
<th:block layout:fragment="content">

            <div class="container-fluid">
              <div class="page-name">
                  <h1>파싱 베팅 목록</h1>
              </div>
              <ul class="tabletab">
              	 <li class="active"><a> 목록</a></li>               	        
              </ul>
              <div class="tableserachwrap">
                <!--div>
                  <ul class="tableserach">
                    <li>
                      <div class="input-group">
                        <div>
                          <label class="input-group-text">표시</label>
                        </div>
                        <select>
                          <option selected="">15</option>
                          <option></option>
                          <option></option>
                        </select>
                      </div>
                    </li>
                  </ul>
                </div-->
            
            	<form class="searchWrap-form" name="searchVO">
				<input type="hidden" id="page" name="page" th:value="${searchVO.page}" />
                <div>
                  <ul class="tableserach">
                  	<li>
                  		<div class="input-group">
                           <div>
                             <label class="input-group-text">기간</label>
                           </div>
                           <input type="datetime-local" name="startDate" th:value="${searchVO.startDate}"/>
                           <input type="datetime-local" name="endDate" th:value="${searchVO.endDate}"/>
                         </div>
                  	</li>
                    <li>
                      <div class="input-group">
                        <div>
                          <label class="input-group-text">소속 에이전시 ID</label>
                        </div>
                        <input type="text" name="searchSiteId" th:value="${searchVO.searchSiteId}" >
                      </div>
                    </li>
                    <li class="mr10">
                      <div class="input-group">
                        <div>
                          <label class="input-group-text">유저 ID</label>
                        </div>
                        <input type="text" name="searchMemId" th:value="${searchVO.searchMemId}" >
                      </div>
                    </li>
                   
                    <li>
                      <a class="btn" href="javascript:goSearch()">
                        검색
                      </a>
                    </li>
                  </ul>
                </div>
              </div>
				</form>
			  <div class="difff">
			  	<ul>
			  		<li><h3>파싱</h3></li>
			  		<li class="ptBtn">
			  			<span>베팅 : <th:block th:text="|${#numbers.formatInteger(parseSum.get('bet1'), 0, 'COMMA')}|"></th:block></span>
			  		</li>
			  		<li class="ptBtn">
			  			<span>당첨 : <th:block th:text="|${#numbers.formatInteger(parseSum.get('win1'), 0, 'COMMA')}|"></th:block></span>
			  		</li>
			  		<li class="ptBtn">
			  			<span>윈루즈 : <th:block th:text="|${#numbers.formatInteger(parseSum.get('winlose1'), 0, 'COMMA')}|"></th:block></span>
			  		</li>
			  	</ul>
			  	<ul>
			  		<li><h3>정품</h3></li>
			  		<li class="ptBtn">
			  			<span>베팅 : <th:block th:text="|${#numbers.formatInteger(parseSum.get('bet2'), 0, 'COMMA')}|"></th:block></span>
			  		</li>
			  		<li class="ptBtn">
			  			<span>당첨 : <th:block th:text="|${#numbers.formatInteger(parseSum.get('win2'), 0, 'COMMA')}|"></th:block></span>
			  		</li>
			  		<li class="ptBtn">
			  			<span>윈루즈 : <th:block th:text="|${#numbers.formatInteger(parseSum.get('winlose2'), 0, 'COMMA')}|"></th:block></span>
			  		</li>
			  	</ul>
			  </div>
              <div class="table">
                <!--div class="head"><h6>유저 지급 내역 목록</h6></div-->
                <div class="body">                  
                  <div class="table-responsive">
                    <table class="center">
                      <thead>
                        <tr>
                          <th>key</th>
                          <th>게임방 ID</th>
                          <th>게임별 ID  </th>
						  <th>베팅 ID  </th>
                            <th>에이전트 ID </th>
                          <th>유저 ID </th>
                          <th>게임 타입 </th>
                          <th>유저 배팅금</th>
                          <th>변환 배팅금</th>
                          <th>유저 획득금</th>
                          <th>변환 획득금</th>
                          <th>상태 </th>
                          <th>상세 </th>
                          <th>등록/수정일</th>
                        </tr>
                      </thead>
                      <tbody>
						  <th:block th:each="list,seq : ${list}">
							  
							  	 <tr>
		                          <td th:text="${list.get('ea_key')}">key</td>
		                          <td th:text="${list.get('table_id')}">게임방 ID</td>
		                          <td th:text="${list.get('game_id')}">게임별 ID  </td>
								  <td th:text="${list.get('round_id')}">게임별 ID  </td>
		                           <td th:text="${list.get('siteId')}"> </td>
		                          <td th:text="${list.get('uid')}">유저 ID </td>
		                          <td th:text="${list.get('type')}">게임 타입 </td>
		                          <td th:text="|${#numbers.formatInteger(list.get('amount1'), 0, 'COMMA')}|">유저 배팅금</td>
		                          <td th:text="|${#numbers.formatInteger(list.get('amount2'), 0, 'COMMA')}|">변환 배팅금</td>
		                          <td th:text="|${#numbers.formatInteger(list.get('payoff1'), 0, 'COMMA')}|">유저 획득금</td>
		                          <td th:text="|${#numbers.formatInteger(list.get('payoff2'), 0, 'COMMA')}|">변환 획득금</td>
		                          <td th:text="${list.get('status')}">상태 </td>
		                          <td><a th:href="|javascript:jsonView('rqrr${list.ea_key}')|">상세보기</a> </td>
		                          <td th:text="${list.get('reg_dt')}">등록일</td>
		                        </tr>
		                        
		                        <tr th:id="|rqrr${list.ea_key}|"  style="display:none;">
									 <td colspan ="13" th:id="|rq${list.ea_key}|" style="white-space: pre;text-align:left !important">
										 
										   <script>
												  var idxrq = "[[${list.ea_key}]]";
												  var jsondate = "[[${list.get('json')}]]";
												  var ddd = jsondate.split("&quot;").join("\"");												
												  var clsJson = JSON.parse( ddd);
												  var strJson = JSON.stringify( clsJson, null, 4 );
														$('#rq'+idxrq).html( strJson );


											  </script>
										 
										  </td>
								</tr>
						   </th:block>
                      </tbody>
                    </table>
                    	<th:block th:utext="${pageInfo}"></th:block>
                  </div>
                </div>
              </div>

            </div><!-- container-fluid -->
	<div id="modal" class="modal-overlay">
		<div class="modal-window">
			<div class="modal-title">
				<h2>베팅 상세 내역</h2>
			</div>
			<div class="modal-close" onclick="javascript:betDetailoff()">닫기</div>
			<div class="modal-content-bet">
				<iframe id="betDetailFrame" src="" style="width:100%;min-height:650px"></iframe>
			</div>
		</div>
	</div>
</th:block>
