<!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>
		#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: #005568;
			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;
			border: 1px solid rgba(255, 255, 255, 0.18);
			width: 500px;
			position: relative;
			color: #fff;
		}

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

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

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

		.modal-close {
			position: absolute;
			right: 10px;
			top: 5px;
			font-size: 25px;
			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;
		}
	</style>
	<script>
		function goPage(pageNo) {
			var form = document.searchVO;
			form.page.value = pageNo;
			form.action = "/user/betlist";
			form.submit();
		}

		function goSearch() {

			var form = document.searchVO;
			form.page.value = 1;
			form.action = "/user/betlist";
			form.submit();
		}

		function excelDown() {

			var form = document.searchVO;
			form.page.value = 1;
			form.action = "/user/betlist/excelDown";
			form.submit();
		}
		
		const modal = document.getElementById("modal")
		
		function betDetail() {
			const modal = document.getElementById("modal")
			modal.style.display = "flex"
			document.body.classList.add('s_no-scroll');
		}
		
		function betDetailoff() {
			const modal = document.getElementById("modal")
			modal.style.display = "none"
			document.body.classList.remove('s_no-scroll');
		}
		
		modal.addEventListener("click", e => {
		    const evTarget = e.target
		    if(evTarget.classList.contains("modal")) {
		        modal.style.display = "none"
		    }
		});
		
		function ViewLayer(vidx, betId) {
			if (document.getElementById("modal").style.display == "none") {


				$.ajax({
					type: "post",
					url: "/user/betInfo",
					data: {
						betId: betId


					},
					async: false,
					dataType: "json",
					success: function (data) {
						console.log(data.data.detail);


						$('#cId').html("");
						$('#tId').html("");
						$('#sId').html("");
						$('#gId').html("");
						
						$('#bs1').html("");
						$('#ps1').html("");

						$('#bc1').attr("src", "");
						$('#bc2').attr("src", "");
						$('#bc3').attr("src", "");

						$('#pc1').attr("src", "");
						$('#pc2').attr("src", "");
						$('#pc3').attr("src", "");

						$('#betDetail').html('');
						$('#betDetailtr').show();
						var detailList = "";
						$('#jsonDetail').text('');


						$('.cardTr').hide();
						$('.cardTr2').hide();

						//alert("오류발생")
						if (data.data.detail != null) {
							//$('#djSonData').text(JSON.stringify(data.data.detail));



							var detail = data.data.detail.list[0];
							var result = detail.result;
							var bScore = detail.result.banker.score;
							var pScore = detail.result.player.score;
							var vendorCode = data.data.detail.vendorCode;
							
							if (vidx == "1" && vendorCode.indexOf("union_") >= 0) {

								if (vendorCode == "union_evolution_casino") {
									$('.cardTr').show();
									$('#betDetailtr').hide();
									$('#cId').html("에볼루션" + detail.table.name);
									$('#tId').html(detail.table.id);
									$('#sId').html(detail.dealer.uid);
									$('#gId').html(detail.id);
									
									$("#bs1").text(bScore);
									$("#ps1").text(pScore);

		
									var bcards = detail.result.banker.cards;
									var pcards = detail.result.player.cards;



									var bn1 = bcards[0].substring(0, 1); var bn2 = bcards[1].substring(0, 1);
									var pn1 = pcards[0].substring(0, 1); var pn2 = pcards[1].substring(0, 1);

									//	alert(bn1);

									if (bcards[0].substring(0, 1) == "T") {bn1 = "10";}
									if (bcards[0].substring(0, 1) == "J") {bn1 = "11";}
									if (bcards[0].substring(0, 1) == "Q") {bn1 = "12";}
									if (bcards[0].substring(0, 1) == "K") {bn1 = "13";}
									if (bcards[0].substring(0, 1) == "A") {bn1 = "1";}

									if (bcards[1].substring(0, 1) == "T") {bn2 = "10";}
									if (bcards[1].substring(0, 1) == "J") {bn2 = "11";}
									if (bcards[1].substring(0, 1) == "Q") {bn2 = "12";}
									if (bcards[1].substring(0, 1) == "K") {bn2 = "13";}
									if (bcards[1].substring(0, 1) == "A") {bn2 = "1";}

									if (pcards[0].substring(0, 1) == "T") {pn1 = "10";}
									if (pcards[0].substring(0, 1) == "J") {pn1 = "11";}
									if (pcards[0].substring(0, 1) == "Q") {pn1 = "12";}
									if (pcards[0].substring(0, 1) == "K") {pn1 = "13";}
									if (pcards[0].substring(0, 1) == "A") {pn1 = "1";}

									if (pcards[1].substring(0, 1) == "T") {pn2 = "10";}
									if (pcards[1].substring(0, 1) == "J") {pn2 = "11";}
									if (pcards[1].substring(0, 1) == "Q") {pn2 = "12";}
									if (pcards[1].substring(0, 1) == "K") {pn2 = "13";}
									if (pcards[1].substring(0, 1) == "A") {pn2 = "1";}

									$('#bc1').attr("src", "/img/card/" + bcards[0].substring(1, 2).toLowerCase() + "_" + bn1 + ".svg");

									// alert(bcards[0].substring(1,2).toLowerCase() + "_"+bn1);
									$('#bc2').attr("src", "/img/card/" + bcards[1].substring(1, 2).toLowerCase() + "_" + bn2 + ".svg");
									if (bcards.length == 3) {
										var bn3 = bcards[2].substring(0, 1);
										if (bcards[2].substring(0, 1) == "A") {bn3 = "1";}
										if (bcards[2].substring(0, 1) == "T") {bn3 = "10";}
										if (bcards[2].substring(0, 1) == "J") {bn3 = "11";}
										if (bcards[2].substring(0, 1) == "Q") {bn3 = "12";}
										if (bcards[2].substring(0, 1) == "K") {bn3 = "13";}



										$('#bc3').attr("src", "/img/card/" + bcards[2].substring(1, 2).toLowerCase() + "_" + bn3 + ".svg");
									} else {
										$('#bc3').attr("src", "/img/card/none.png");
									}


									$('#pc1').attr("src", "/img/card/" + pcards[0].substring(1, 2).toLowerCase() + "_" + pn1 + ".svg");
									$('#pc2').attr("src", "/img/card/" + pcards[1].substring(1, 2).toLowerCase() + "_" + pn2 + ".svg");
									if (pcards.length == 3) {
										var pn3 = pcards[2].substring(0, 1);

										if (pcards[2].substring(0, 1) == "A") {pn3 = "1";}
										if (pcards[2].substring(0, 1) == "T") {pn3 = "10";}
										if (pcards[2].substring(0, 1) == "J") {pn3 = "11";}
										if (pcards[2].substring(0, 1) == "Q") {pn3 = "12";}
										if (pcards[2].substring(0, 1) == "K") {bpn3 = "13";}

										$('#pc3').attr("src", "/img/card/" + pcards[2].substring(1, 2).toLowerCase() + "_" + pn3 + ".svg");
									} else {

										$('#pc3').attr("src", "/img/card/none.png");
									}

									$('#jsonDetail').text('{ "participants" :' + JSON.stringify(detail.participants) + ', "result":' + JSON.stringify(detail.result) + ' }');
								} else {
									$('#jsonDetail').text('{ ' + JSON.stringify(detail) + ' }');
								}

							} else if (vidx == "1" && vendorCode != "union_evolution_casino") {
								$('.cardTr').show();
								$('#cId').html("에볼루션");
								$('#tId').html(detail.table);
								$('#sId').html(detail.index);
								$('#gId').html(detail.title);

								var bcards = detail.result.details.bankerHand.cards;
								var pcards = detail.result.details.playerHand.cards;

								var bn1 = bcards[0].substring(0, 1); var bn2 = bcards[1].substring(0, 1);
								var pn1 = pcards[0].substring(0, 1); var pn2 = pcards[1].substring(0, 1);

								if (bcards[0].substring(0, 1) == "T") {bn1 = "10";}
								if (bcards[0].substring(0, 1) == "J") {bn1 = "11";}
								if (bcards[0].substring(0, 1) == "Q") {bn1 = "12";}
								if (bcards[0].substring(0, 1) == "K") {bn1 = "13";}
								if (bcards[0].substring(0, 1) == "A") {bn1 = "1";}

								if (bcards[1].substring(0, 1) == "T") {bn2 = "10";}
								if (bcards[1].substring(0, 1) == "J") {bn2 = "11";}
								if (bcards[1].substring(0, 1) == "Q") {bn2 = "12";}
								if (bcards[1].substring(0, 1) == "K") {bn2 = "13";}
								if (bcards[1].substring(0, 1) == "A") {bn2 = "1";}

								if (pcards[0].substring(0, 1) == "T") {pn1 = "10";}
								if (pcards[0].substring(0, 1) == "J") {pn1 = "11";}
								if (pcards[0].substring(0, 1) == "Q") {pn1 = "12";}
								if (pcards[0].substring(0, 1) == "K") {pn1 = "13";}
								if (pcards[0].substring(0, 1) == "A") {pn1 = "1";}

								if (pcards[1].substring(0, 1) == "T") {pn2 = "10";}
								if (pcards[1].substring(0, 1) == "J") {pn2 = "11";}
								if (pcards[1].substring(0, 1) == "Q") {pn2 = "12";}
								if (pcards[1].substring(0, 1) == "K") {pn2 = "13";}
								if (pcards[1].substring(0, 1) == "A") {pn2 = "1";}




								$('#bc1').attr("src", "/img/card/" + bcards[0].substring(1, 2).toLowerCase() + "_" + bn1 + ".svg");
								$('#bc2').attr("src", "/img/card/" + bcards[1].substring(1, 2).toLowerCase() + "_" + bn2 + ".svg");
								if (bcards.length == 3) {
									var bn3 = bcards[2].substring(0, 1);
									if (bcards[2].substring(0, 1) == "A") {bn3 = "1";}
									if (bcards[2].substring(0, 1) == "T") {bn3 = "10";}
									if (bcards[2].substring(0, 1) == "J") {bn3 = "11";}
									if (bcards[2].substring(0, 1) == "Q") {bn3 = "12";}
									if (bcards[2].substring(0, 1) == "K") {bn3 = "13";}

									$('#bc3').attr("src", "/img/card/" + bcards[2].substring(1, 2).toLowerCase() + "_" + bn3 + ".svg");
								} else {
									$('#bc3').attr("src", "/img/card/none.png");
								}

								$('#pc1').attr("src", "/img/card/" + pcards[0].substring(1, 2).toLowerCase() + "_" + pn1 + ".svg");
								$('#pc2').attr("src", "/img/card/" + pcards[1].substring(1, 2).toLowerCase() + "_" + pn2 + ".svg");
								if (pcards.length == 3) {
									var pn3 = pcards[2].substring(0, 1);

									if (pcards[2].substring(0, 1) == "A") {pn3 = "1";}
									if (pcards[2].substring(0, 1) == "T") {pn3 = "10";}
									if (pcards[2].substring(0, 1) == "J") {pn3 = "11";}
									if (pcards[2].substring(0, 1) == "Q") {pn3 = "12";}
									if (pcards[2].substring(0, 1) == "K") {bpn3 = "13";}

									$('#pc3').attr("src", "/img/card/" + pcards[2].substring(1, 2).toLowerCase() + "_" + pn3 + ".svg");
								} else {

									$('#pc3').attr("src", "/img/card/none.png");
								}

								$('#betDetail').html('');
								var detailList = "";

							}
							else if (vidx == "4") {
								$('#cId').html("보타");
								$('#tId').html(detail.c_table_idx);
								$('#sId').html(detail.c_shoe_idx);
								$('#gId').html(detail.c_game_idx);
								$('.cardTr').show();

								$('#bc1').attr("src", "/img/card/" + detail.bc1 + ".svg");
								$('#bc2').attr("src", "/img/card/" + detail.bc2 + ".svg");
								if (detail.bc3 == "0") {
									$('#bc3').attr("src", "/img/card/none.png");
								} else {
									$('#bc3').attr("src", "/img/card/" + detail.bc3 + ".svg");
								}

								$('#pc1').attr("src", "/img/card/" + detail.pc1 + ".svg");
								$('#pc2').attr("src", "/img/card/" + detail.pc2 + ".svg");
								if (detail.bc3 == "0") {
									$('#pc3').attr("src", "/img/card/none.png");
								} else {
									$('#pc3').attr("src", "/img/card/" + detail.pc3 + ".svg");
								}
								$('#betDetail').html('');

								var detailList = "";

								for (var b = 0; b < data.data.detail.list.length; b++) {

									var betRes = parseInt(data.data.detail.list[b].c_bet_type);
									var betResTxt = "";
									if (betRes == 1) betResTxt = "<span class='betType typeB'>B</span>";
									if (betRes == 2) betResTxt = "<span class='betType typeP'>P</span>";
									if (betRes == 3) betResTxt = "<span class='betType typeT'>T</span>";
									if (betRes == 4) betResTxt = "<span class='betType typeB'>B</span><span class='betType notypeP'>P</span>";
									if (betRes == 5) betResTxt = "<span class='betType typeP'>P</span><span class='betType notypeP'>P</span>";

									var resultRes = parseInt(data.data.detail.list[b].c_game_result);
									var resultResTxt = "";

									if (resultRes == 1) resultResTxt = "B";
									if (resultRes == 2) resultResTxt = "P";
									if (resultRes == 3) resultResTxt = "T";


									var resultPair_b = parseInt(data.data.detail.list[b].bp);
									var resultPair_p = parseInt(data.data.detail.list[b].pp);


									var resultPairTxt = "";
									if (resultPair_b == 1) resultPairTxt = " ,  <span class='betType notypeP'>P</span>";
									if (resultPair_p == 1) resultPairTxt = " , <span class='betType notypeP'>P</span>";


									detailList += '<tr>';
									//detailList+='<td><span class="betType type'+betResTxt+'">'+betResTxt+'</span></td>';

									detailList += '<td><span class="">' + betResTxt + '</span></td>';

									detailList += '<td>' + ("" + data.data.detail.list[b].c_bet_money).replace(/\B(?=(\d{3})+(?!\d))/g, ',') + '</td>'; //베팅금액


									var bet = parseInt(data.data.detail.list[b].c_bet_money);
									var award = parseInt(data.data.detail.list[b].c_result_money);

									var winlose = award - bet;
									var betRate = Math.abs(award / bet);

									detailList += '<td>' + betRate.toFixed(2) + '</td>';


									detailList += '<td>' + ("" + award).replace(/\B(?=(\d{3})+(?!\d))/g, ',') + '</td>';


									var winlose = parseInt(data.data.detail.list[b].c_bet_result);
									var winloseTxt = "";
									if (winlose == 1) winloseTxt = "WIN";
									if (winlose == 2) winloseTxt = "LOSE";
									if (winlose == 3) winloseTxt = "TIE";

									//detailList+='<td><span class="betType type'+resultResTxt+'">'+resultResTxt+'</span></td>';
									detailList += '<td><span class=""><span class="betType type' + resultResTxt + '">' + resultResTxt + '</span><span class="paretype">' + resultPairTxt + '</span></span></td>';
									detailList += '<td><font color="red">' + winloseTxt + '</font></td>';
									detailList += '</tr>';

								}


								$('#betDetail').html(detailList);

								// $('#betDetail').remove();

							} else if (vidx == "10") {
								$('.cardTr2').show();
								$('#cId').html("두윈");
								$('#tId').html(detail.tableId);
								$('#sId').html(detail.roundId);
								$('#gId').html("");
								$('#bank').html(result.banker);
								$('#player').html(result.player);

								var betRes = parseInt(detail.playType);
								var betResTxt = "";
								if (betRes == 0) betResTxt = "<span class='betType typeB'>B</span>";
								if (betRes == 1) betResTxt = "<span class='betType typeP'>P</span>";
								if (betRes == 2) betResTxt = "<span class='betType typeT'>T</span>";
								if (betRes == 3) betResTxt = "<span class='betType typeB'>B</span><span class='betType notypeP'>P</span>";
								if (betRes == 4) betResTxt = "<span class='betType typeP'>P</span><span class='betType notypeP'>P</span>";

								var resultRes = parseInt(result.res);
								var resultResTxt = "";
								if (resultRes == 0) resultResTxt = "B";
								if (resultRes == 1) resultResTxt = "P";
								if (resultRes == 2) resultResTxt = "T";


								var resultPair = parseInt(result.pair);
								var resultPairTxt = "";
								if (resultPair == 1) resultPairTxt = " ,  <span class='betType typeB'>B</span><span class='betType notypeP'>P</span>";
								if (resultPair == 2) resultPairTxt = " ,  <span class='betType typeP'>P</span><span class='betType notypeP'>P</span>";
								if (resultPair == 3) resultPairTxt = " ,  <span class='betType typeB'>B</span><span class='betType typeP'>P</span><span class='betType notypeP'>P</span>";
								var detailList = "";
								detailList += '<tr>';
								//detailList+='<td><span class="betType type'+betResTxt+'">'+betResTxt+'</span></td>';
								detailList += '<td><span class="">' + betResTxt + '</span></td>';
								detailList += '<td>' + ("" + detail.bet).replace(/\B(?=(\d{3})+(?!\d))/g, ',') + '</td>'; //베팅금액

								var winlose = parseInt(detail.winlose);
								var award = parseInt(detail.award);
								var bet = parseInt(detail.bet);
								var betRate = Math.abs(award / bet);

								detailList += '<td>' + betRate.toFixed(2) + '</td>';



								detailList += '<td>' + ("" + detail.award).replace(/\B(?=(\d{3})+(?!\d))/g, ',') + '</td>';


								var winloseTxt = "";
								if (winlose > 0) winloseTxt = "WIN";
								if (winlose <= 0) winloseTxt = "LOSE";
								//detailList+='<td><span class="betType type'+resultResTxt+'">'+resultResTxt+'</span></td>';
								detailList += '<td><span class=""><span class="betType type' + resultResTxt + '">' + resultResTxt + '</span><span class="paretype">' + resultPairTxt + '</span></span></td>';
								detailList += '<td><font color="red">' + winloseTxt + '</font></td>';
								detailList += '</tr>';


								$('#betDetail').html('');
								$('#betDetail').html(detailList);
							}

						}
					}
				});

				document.getElementById("modal").style.display = "flex"



			} else {
				document.getElementById("modal").style.display = "none"
			}
		}
		function popUp() {
			const popup = document.getElementById("detailPopPlus");
			const heightP = popup.getBoundingClientRect().top;
			const reset = 0;

			if (heightP < reset) {
				console.log(`현재 창기준 y좌표 : ${rect.y}px`);
			}
		}
		
		function getMyDownSite(depth) {

			$.ajax({
				type: "post",
				url: "/agent/getMyDownSite",
				data: {
					searchDepth: depth


				},
				async: false,
				dataType: "json",
				success: function (data) {

					$("#searchSiteId").empty();
					$("#searchSiteId").append($('<option>', {value: "", text: "=== 선택 ==="}));
					var downSiteList = data.downSiteList;

					//alert(downSiteList.length)
					for (var d = 0; d < downSiteList.length; d++) {

						$("#searchSiteId").append($('<option>', {value: downSiteList[d].siteId, text: downSiteList[d].siteId}));
					}



				}
			});

		}

		$(document).mouseup(function (e) {
			if ($("#detailPopPlus").has(e.target).length === 0) {
				$("#detailPopPlus").css("display", "none");
			}
		});

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

	<div class="container-fluid">
		<div class="page-name">
			<h1>통합 베팅 내역</h1>
		</div>
		<ul class="tabletab">
			<li><a th:class="${searchVO.searchType == 'casino' } ? active : ''"
					href="/user/betlist?searchType=casino">카지노</a></li>
			<li><a th:class="${searchVO.searchType == 'hcasino' } ? active : ''"
					href="/user/betlist?searchType=hcasino">호텔카지노</a></li>
			<li><a th:class="${searchVO.searchType == 'sport' } ? active : ''"
					href="/user/betlist?searchType=sport">스포츠</a></li>
			<li><a th:class="${searchVO.searchType == 'slot' } ? active : ''"
					href="/user/betlist?searchType=slot">슬롯</a></li>
			<li><a th:class="${searchVO.searchType == 'mine' } ? active : ''"
					href="/user/betlist?searchType=mine">폭탄게임</a></li>
			<li><a th:class="${searchVO.searchType == '' } ? active : ''" href="/user/betlist?searchType=">전체</a></li>
		</ul>
		<div class="tableserachwrap">
			<div>
				<form class="searchWrap-form" name="searchVO">
					<input type="hidden" id="page" name="page" th:value="${searchVO.page}" />
					<input type="hidden" id="searchType" name="searchType" th:value="${searchVO.searchType}" />

					<ul class="tableserach">
						<li>
							<div class="input-group">
								<div>
									<label class="input-group-text">단계</label>
								</div>
								<select id="searchDepth" name="searchDepth" onchange="getMyDownSite(this.value)">
									<option value="0" th:selected="${searchVO.searchDepth == 0}">1 Me</option>
									<option value="1" th:selected="${searchVO.searchDepth == 1}">2 layer</option>
									<option value="2" th:selected="${searchVO.searchDepth == 2}">3 layer</option>
									<option value="3" th:selected="${searchVO.searchDepth == 3}">4 layer</option>
									<option value="4" th:selected="${searchVO.searchDepth == 4}">5 layer</option>
									<option value="5" th:selected="${searchVO.searchDepth == 5}">6 layer</option>
									<option value="6" th:selected="${searchVO.searchDepth == 6}">7 layer</option>
									<option value="7" th:selected="${searchVO.searchDepth == 7}">8 layer</option>
									<option value="8" th:selected="${searchVO.searchDepth == 8}">9 layer</option>
									<option value="9" th:selected="${searchVO.searchDepth == 9}">10 layer</option>
								</select>
							</div>
						</li>
						<li>
							<div class="input-group">
								<div>
									<label class="input-group-text">소속 에이전시 아이디</label>
								</div>
								<select id="searchSiteId" name="searchSiteId">
									<option value="">=== 선택 ===</option>
									<th:block th:each="list,seq : ${downSiteList}">
										<option th:value="${list.siteId}" th:text="${list.siteId}"
											th:selected="${searchVO.searchSiteId eq list.siteId}"></option>
									</th:block>




								</select>
							</div>
						</li>
						<li>
							<div class="input-group">
								<div>
									<label class="input-group-text">유저 아이디</label>
								</div>
								<input type="text" name="searchMemId" th:value="${searchVO.searchMemId}">
							</div>
						</li>
						<li>
							<div class="input-group">
								<div>
									<label class="input-group-text">기간</label>
								</div>
								<input type="date" name="startDate" th:value="${searchVO.startDate}" />
								<input type="date" name="endDate" th:value="${searchVO.endDate}" />
							</div>
						</li>
						<li>
							<div class="input-group">
								<div>
									<label class="input-group-text">표시</label>
								</div>
								<select name="count_per_list">
									<option value="30" th:selected="${searchVO.count_per_list == 30}">30</option>
									<option value="50" th:selected="${searchVO.count_per_list == 50}">50</option>
									<option value="100" th:selected="${searchVO.count_per_list == 100}">100</option>
								</select>
							</div>
						</li>
						<!--li>
	                       <div class="input-group">
	                         <div>
	                           <label class="input-group-text">번호</label>
	                         </div>
	                         <input type="text" name="searchValue" th:value="${searchVO.searchValue}">
	                       </div>
	                     </li-->
						<li>
							<a class="btn" href="javascript:goSearch()">
								검색
							</a>
						</li>
					</ul>
				</form>
			</div>
		</div>
		<div id="sumPriceWrap">
			<div>
				<ul class="sumPrice">
					<li>
						<ul class="sumPriceSec">
							<li>베팅금</li>
							<li class="priceArea"
								th:text="|${#numbers.formatInteger(totalSum.get('depositAmtSum'), 0, 'COMMA')}|">
								99,999,999,999</li>
						</ul>
					</li>
					<li>
						<ul class="sumPriceSec">
							<li>당첨금</li>
							<li class="priceArea"
								th:text="|${#numbers.formatInteger(totalSum.get('creditAmtSum'), 0, 'COMMA')}|">300,000
							</li>
						</ul>
					</li>
					<li>
						<ul class="sumPriceSec">
							<li>취소</li>
							<li class="priceArea"
								th:text="|${#numbers.formatInteger(totalSum.get('canAmtSum'), 0, 'COMMA')}|">0</li>
						</ul>
					</li>
					<li>
						<ul class="sumPriceSec">
							<li>손익</li>
							<li class="priceArea"
								th:text="|${#numbers.formatInteger(totalSum.get('beneAllAmt'), 0, 'COMMA')}|">-200,000
							</li>
						</ul>
					</li>
				</ul>
			</div>
			<div class="linePrintWrap">

				<button class="btnExcel" onclick="javascript:excelDown()"><img src="/img/excel.png"></button>
			</div>
		</div>
		<div class="table">
			<!--div class="head"><h6>통합 베팅 내역 목록</h6></div-->
			<div class="body">
				<div class="table-responsive">
					<table class="nonDetail">
						<colgroup>
							<col width="5%">
							<col width="5%">
							<col width="10%">
							<col width="5%">
							<col width="10%">
							<col width="10%">
							<col width="10%">
							<col width="15%">
							<col width="5%">
						</colgroup>
						<thead>
							<tr>
								<th>betID</th>
								<th>상위 벤더회사</th>
								<th>유저</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('refId')}" onclick="javascript:betDetail()" id="modalBtnBet"><a th:if="${list.get('deposit') != list.get('cancelAmt')}"
											th:href="|javascript:ViewLayer('${list.vendorIdx}', '${list.refId}');|">1188879669</a></td>
									<td>
										<div class="tgBox">
											<a class="selectBox bl"><em th:text="${list.get('siteId')}">@no.1</em></a>
											<div class="tgBoxcon">
												<ul>
													<li>에이전시</li>
													<li><a>수정</a></li>
													<li><a href="exchange.html">지급 내역</a></li>
													<li><a href="charge.html">충전 내역</a></li>
													<li><a href="agentqna.html">문의 내역</a></li>
												</ul>
												<ul>
													<li>유저</li>
													<li><a href="user.html">유저 목록</a></li>
													<li><a href="payments.html">지급 내역</a></li>
												</ul>
											</div>
										</div>
									</td>
									<td>
										<div class="tgBox">
											<a class="selectBox"><em th:text="${list.get('memberId')}">@no.1</em></a>
											<div class="tgBoxcon">
												<ul class="b0">
													<li>유저</li>
													<li><a href="userRead.html">수정</a></li>
													<li><a href="transactionList.html">전체 트랜잭션 내역</a></li>
													<li><a href="betlist.html">통합 베팅 내역</a></li>
													<li><a class="modalBtn">머니 지급</a></li>
												</ul>
											</div>
										</div>
									</td>
									<td>
										<div class="mb-1">

											<span class="" th:text="${list.get('vendorName')}">evolution</span><br>
											<span class="" th:text="${list.get('gameIdx')}">baccarat</span>
										</div>
										<!-- 
                            <div class="title">Korean Speed Baccarat A</div>
                            <div class="round">onokyd4wn7uekbjx</div>
                            <div class="round">16ff7e58fb649b1849c6cd80-qgx4ge5istsx7f6d</div>
                            -->
									</td>
									<td>
										<div class="mb-1">
											<span class="primary">bet</span>
										</div>
										<div th:text="${#temporals.format(list.get('betTime'), 'yyyy-MM-dd HH:mm:ss')}">
											2022-07-07</div>

									</td>
									<td th:text="${#temporals.format(list.get('endTime'), 'yyyy-MM-dd HH:mm:ss')}">-
									</td>
									<td th:text="|${#numbers.formatInteger(list.get('deposit'), 0, 'COMMA')}|">56,000 C
									</td>
									<!--<td>
		                    <table class="table bsn m0">
		                      <tbody>
		                        <tr>
		                          <td th:text="|${#numbers.formatInteger(list.get('deposit'), 0, 'COMMA')}C|">56,000 C</td>
		                        </tr>
		                        <tr>
		                          <td th:if="${list.get('isCancel') < 1}">당첨 금액</td>
		                          <td th:if="${list.get('isCancel') >= 1}"><font color="red">취소 금액</font></td>
		                          <td th:text="|${#numbers.formatInteger(list.get('credit'), 0, 'COMMA')}C|" >0 C</td>
		                        </tr>
		                        <tr>
		                          <td>유저 손익 금액</td>
		                          <td th:text="|${#numbers.formatInteger(list.get('credit') - list.get('deposit'), 0, 'COMMA')}C|">-56,000 C</td>
		                        </tr>
		                      </tbody>
		                    </table>
		                  </td>-->
									<td th:text="|${#numbers.formatInteger(list.get('credit'), 0, 'COMMA')}|">0 C</td>
									<td th:text="|${#numbers.formatInteger(list.get('cancelAmt'), 0, 'COMMA')}|">0 C
									</td>
									<td th:text="|${#numbers.formatInteger(list.get('userBenefit'), 0, 'COMMA')}|">
										-56,000 C</td>
									<td class="detailSec">
										<a class="btn detailbtn" th:if="${list.get('deposit') != list.get('cancelAmt')}"
											th:href="|javascript:ViewLayer('${list.vendorIdx}', '${list.refId}');|">상세</a>
										<div id="detailPop" class="detailpopup">
											<h3>게임 상세 내역<a class="close detailClose">X</a></h3>
											<table class="detailTb">
												<tr>
													<td colspan="4">
														<table height="50">
															<colgroup>
																<col width="25%">
																<col width="25%">
																<col width="25%">
																<col width="25%">
															</colgroup>
															<thead>
																<tr>
																	<th>카지노명</th>
																	<th>테이블번호</th>
																	<th>슈번호</th>
																	<th>게임번호</th>
																</tr>
															</thead>
															<tbody>
																<tr>
																	<td id="">카지노명 예시</td>
																	<td id="">77</td>
																	<td id="">123456</td>
																	<td id="">7</td>
																</tr>
															</tbody>
														</table>
													</td>
												</tr>
												<tr>
													<td colspan="2">
														<table height="150">
															<colgroup>
																<col width="50%">
																<col width="50%">
															</colgroup>
															<thead>
																<tr>
																	<th>
																		<font color="blue">뱅커</font>
																	</th>
																	<th>
																		<font color="red">플레이어</font>
																	</th>
																</tr>
															</thead>
															<tbody>
																<tr>
																	<td>
																		<div class="cardWrap cardWrapB" id="">
																			<span class="ro90"><img src=""></span>
																			<span><img src=""></span>
																			<span><img src=""></span>
																		</div>
																	</td>
																	<td>
																		<div class="cardWrap cardWrapP" id="">
																			<span><img src=""></span>
																			<span><img src=""></span>
																			<span class="ro90"><img src=""></span>
																		</div>
																	</td>
																</tr>
															</tbody>
														</table>
													</td>
												</tr>
												<tr>
													<td colspan="6">
														<table height="50">
															<colgroup>
																<col width="16.6%">
																<col width="16.6%">
																<col width="16.7%">
																<col width="16.6%">
																<col width="16.6%">
																<col width="16.6%">
															</colgroup>
															<thead>
																<tr>
																	<th>베팅타입</th>
																	<th>베팅금액</th>
																	<th>배당율</th>
																	<th>예상환급금액</th>
																	<th>게임결과</th>
																	<th>적중유무</th>
																</tr>
															</thead>
															<tbody>
																<tr>
																	<td><span class="betType typeT"></span></td>
																	<td></td>
																	<td></td>
																	<td></td>
																	<td><span class="betType typeP"></span></td>
																	<td></td>
																</tr>
															</tbody>
														</table>
													</td>
												</tr>
											</table>
										</div>
										<div id="detailPopPlus" class="detailpopup">
											<h3>게임 상세 내역<a class="close detailClose">X</a></h3>
											<table class="detailTb">
												<tr>
													<td colspan="4" id="djSonData"> </td>
												</tr>
												<tr>
													<td colspan="4">
														<table height="50">
															<colgroup>
																<col width="25%">
																<col width="25%">
																<col width="25%">
																<col width="25%">
															</colgroup>
															<thead>
																<tr>
																	<th>카지노명</th>
																	<th>테이블번호</th>
																	<th>슈번호</th>
																	<th>게임번호</th>
																</tr>
															</thead>
															<tbody>
																<tr>
																	<td id="cId">카지노명 예시</td>
																	<td id="tId">77</td>
																	<td id="sId">123456</td>
																	<td id="gId">7</td>
																</tr>
															</tbody>
														</table>
													</td>
												</tr>
												<tr>
													<td colspan="2">
														<table height="150">
															<colgroup>
																<col width="50%">
																<col width="50%">
															</colgroup>
															<thead>
																<tr>
																	<th>
																		<font color="blue">뱅커</font>
																	</th>
																	<th>
																		<font color="red">플레이어</font>
																	</th>
																</tr>
															</thead>
															

														</table>
													</td>
												</tr>
												<tr>
													<td colspan="6">
														<textarea id="jsonDetail" style="width:100%;height:200px">
														</textarea>
													</td>
												</tr>
												<tr id="betDetailtr">
													<td colspan="6">
														<table height="50">
															<colgroup>
																<col width="16.6%">
																<col width="16.6%">
																<col width="16.7%">
																<col width="16.6%">
																<col width="16.6%">
																<col width="16.6%">
															</colgroup>
															<thead>
																<tr>
																	<th>베팅타입</th>
																	<th>베팅금액</th>
																	<th>배당율</th>
																	<th>예상환급금액</th>
																	<th>게임결과</th>
																	<th>적중유무</th>
																</tr>
															</thead>
															<tbody id="betDetail">
																<tr>
																	<td><span class="betType typeT">T</span></td>
																	<td>30,000</td>
																	<td>10.00</td>
																	<td>300,000</td>
																	<td><span class="betType typeP">P</span></td>
																	<td>
																		<font color="red">LOSE</font>
																	</td>
																</tr>
																<tr>
																	<td><span class="betType typeB">B</span></td>
																	<td>30,000</td>
																	<td>10.00</td>
																	<td>300,000</td>
																	<td><span class="betType typeP">P</span></td>
																	<td>
																		<font color="red">LOSE</font>
																	</td>
																</tr>
																<tr>
																	<td><span class="betType typeP">P</span></td>
																	<td>50,000</td>
																	<td>12.00</td>
																	<td>600,000</td>
																	<td><span class="betType typeP">P</span></td>
																	<td>WIN</td>
																</tr>
															</tbody>
														</table>
													</td>
												</tr>
											</table>
										</div>
									</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()">X</div>
			<div class="modal-content-bet">
				<div>
					<h4>세부내역</h4>
					<table>
						<tr>
							<td>게임ID</td>
							<td>qqrrwwee1122</td>
						</tr>
						<tr>
							<td>게임이름</td>
							<td>BAC_Player</td>
						</tr>
						<tr>
							<td>베팅금</td>
							<td>1000</td>
						</tr>
						<tr>
							<td>당첨금</td>
							<td>2000</td>
						</tr>
						<tr>
							<td>베팅시각</td>
							<td>2023-04-16 T 17:53:34. 104Z</td>
						</tr>
						<tr>
							<td>베팅위치</td>
							<td>Player</td>
						</tr>
						<tr>
							<td>트랜젝션 아이디</td>
							<td>123456789</td>
						</tr>
					</table>
				</div>
				<div>
					<h4>베팅 및 게임결과</h4>
					<table>
						<tr>
							<td>banker</td>
							<td class="cardTr">
								<div class="cardWrap cardWrapB">
                                    <span class="ro90"><img id="bc3"
                                            src=""></span>
                                    <span><img id="bc2"
                                            src=""></span>
                                    <span><img id="bc1" src=""></span>
                                    <span id="bs1"></span>
                                </div>
							</td>
							<td class="cardTr2">
								<div class="cardWrap cardWrapB" id="bank">
                                </div>
							</td>
						</tr>
						<tr>
							<td>player</td>
							<td class="cardTr">
								<div class="cardWrap cardWrapP">
                                    <span><img id="pc1"
                                            src=""></span>
                                    <span><img id="pc2"
                                            src=""></span>
                                    <span class="ro90"><img id="pc3"
                                            src=""></span>
                        			<span id="ps1"></span>
                                </div>
							</td>
							<td class="cardTr2">
								<div class="cardWrap cardWrapP" id="player">
                                </div>
							</td>
						</tr>
						<tr>
							<td>outcome</td>
							<td>Banker</td>
						</tr>
					</table>
				</div>
			</div>
		</div>
	</div>
</th:block><!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>
		#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: #005568;
			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;
			border: 1px solid rgba(255, 255, 255, 0.18);
			width: 500px;
			position: relative;
			color: #fff;
		}

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

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

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

		.modal-close {
			position: absolute;
			right: 10px;
			top: 5px;
			font-size: 25px;
			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;
		}
	</style>
	<script>
		function goPage(pageNo) {
			var form = document.searchVO;
			form.page.value = pageNo;
			form.action = "/user/betlist";
			form.submit();
		}

		function goSearch() {

			var form = document.searchVO;
			form.page.value = 1;
			form.action = "/user/betlist";
			form.submit();
		}

		function excelDown() {

			var form = document.searchVO;
			form.page.value = 1;
			form.action = "/user/betlist/excelDown";
			form.submit();
		}
		
		const modal = document.getElementById("modal")
		
		function betDetail() {
			const modal = document.getElementById("modal")
			modal.style.display = "flex"
			document.body.classList.add('s_no-scroll');
		}
		
		function betDetailoff() {
			const modal = document.getElementById("modal")
			modal.style.display = "none"
			document.body.classList.remove('s_no-scroll');
		}
		
		modal.addEventListener("click", e => {
		    const evTarget = e.target
		    if(evTarget.classList.contains("modal")) {
		        modal.style.display = "none"
		    }
		});
		
		function ViewLayer(vidx, betId) {
			if (document.getElementById("modal").style.display == "none") {


				$.ajax({
					type: "post",
					url: "/user/betInfo",
					data: {
						betId: betId


					},
					async: false,
					dataType: "json",
					success: function (data) {
						console.log(data.data.detail);


						$('#cId').html("");
						$('#tId').html("");
						$('#sId').html("");
						$('#gId').html("");
						
						$('#bs1').html("");
						$('#ps1').html("");

						$('#bc1').attr("src", "");
						$('#bc2').attr("src", "");
						$('#bc3').attr("src", "");

						$('#pc1').attr("src", "");
						$('#pc2').attr("src", "");
						$('#pc3').attr("src", "");

						$('#betDetail').html('');
						$('#betDetailtr').show();
						var detailList = "";
						$('#jsonDetail').text('');


						$('.cardTr').hide();
						$('.cardTr2').hide();

						//alert("오류발생")
						if (data.data.detail != null) {
							//$('#djSonData').text(JSON.stringify(data.data.detail));



							var detail = data.data.detail.list[0];
							var result = detail.result;
							var bScore = detail.result.banker.score;
							var pScore = detail.result.player.score;
							var vendorCode = data.data.detail.vendorCode;
							
							if (vidx == "1" && vendorCode.indexOf("union_") >= 0) {

								if (vendorCode == "union_evolution_casino") {
									$('.cardTr').show();
									$('#betDetailtr').hide();
									$('#cId').html("에볼루션" + detail.table.name);
									$('#tId').html(detail.table.id);
									$('#sId').html(detail.dealer.uid);
									$('#gId').html(detail.id);
									
									$("#bs1").text(bScore);
									$("#ps1").text(pScore);

		
									var bcards = detail.result.banker.cards;
									var pcards = detail.result.player.cards;



									var bn1 = bcards[0].substring(0, 1); var bn2 = bcards[1].substring(0, 1);
									var pn1 = pcards[0].substring(0, 1); var pn2 = pcards[1].substring(0, 1);

									//	alert(bn1);

									if (bcards[0].substring(0, 1) == "T") {bn1 = "10";}
									if (bcards[0].substring(0, 1) == "J") {bn1 = "11";}
									if (bcards[0].substring(0, 1) == "Q") {bn1 = "12";}
									if (bcards[0].substring(0, 1) == "K") {bn1 = "13";}
									if (bcards[0].substring(0, 1) == "A") {bn1 = "1";}

									if (bcards[1].substring(0, 1) == "T") {bn2 = "10";}
									if (bcards[1].substring(0, 1) == "J") {bn2 = "11";}
									if (bcards[1].substring(0, 1) == "Q") {bn2 = "12";}
									if (bcards[1].substring(0, 1) == "K") {bn2 = "13";}
									if (bcards[1].substring(0, 1) == "A") {bn2 = "1";}

									if (pcards[0].substring(0, 1) == "T") {pn1 = "10";}
									if (pcards[0].substring(0, 1) == "J") {pn1 = "11";}
									if (pcards[0].substring(0, 1) == "Q") {pn1 = "12";}
									if (pcards[0].substring(0, 1) == "K") {pn1 = "13";}
									if (pcards[0].substring(0, 1) == "A") {pn1 = "1";}

									if (pcards[1].substring(0, 1) == "T") {pn2 = "10";}
									if (pcards[1].substring(0, 1) == "J") {pn2 = "11";}
									if (pcards[1].substring(0, 1) == "Q") {pn2 = "12";}
									if (pcards[1].substring(0, 1) == "K") {pn2 = "13";}
									if (pcards[1].substring(0, 1) == "A") {pn2 = "1";}

									$('#bc1').attr("src", "/img/card/" + bcards[0].substring(1, 2).toLowerCase() + "_" + bn1 + ".svg");

									// alert(bcards[0].substring(1,2).toLowerCase() + "_"+bn1);
									$('#bc2').attr("src", "/img/card/" + bcards[1].substring(1, 2).toLowerCase() + "_" + bn2 + ".svg");
									if (bcards.length == 3) {
										var bn3 = bcards[2].substring(0, 1);
										if (bcards[2].substring(0, 1) == "A") {bn3 = "1";}
										if (bcards[2].substring(0, 1) == "T") {bn3 = "10";}
										if (bcards[2].substring(0, 1) == "J") {bn3 = "11";}
										if (bcards[2].substring(0, 1) == "Q") {bn3 = "12";}
										if (bcards[2].substring(0, 1) == "K") {bn3 = "13";}



										$('#bc3').attr("src", "/img/card/" + bcards[2].substring(1, 2).toLowerCase() + "_" + bn3 + ".svg");
									} else {
										$('#bc3').attr("src", "/img/card/none.png");
									}


									$('#pc1').attr("src", "/img/card/" + pcards[0].substring(1, 2).toLowerCase() + "_" + pn1 + ".svg");
									$('#pc2').attr("src", "/img/card/" + pcards[1].substring(1, 2).toLowerCase() + "_" + pn2 + ".svg");
									if (pcards.length == 3) {
										var pn3 = pcards[2].substring(0, 1);

										if (pcards[2].substring(0, 1) == "A") {pn3 = "1";}
										if (pcards[2].substring(0, 1) == "T") {pn3 = "10";}
										if (pcards[2].substring(0, 1) == "J") {pn3 = "11";}
										if (pcards[2].substring(0, 1) == "Q") {pn3 = "12";}
										if (pcards[2].substring(0, 1) == "K") {bpn3 = "13";}

										$('#pc3').attr("src", "/img/card/" + pcards[2].substring(1, 2).toLowerCase() + "_" + pn3 + ".svg");
									} else {

										$('#pc3').attr("src", "/img/card/none.png");
									}

									$('#jsonDetail').text('{ "participants" :' + JSON.stringify(detail.participants) + ', "result":' + JSON.stringify(detail.result) + ' }');
								} else {
									$('#jsonDetail').text('{ ' + JSON.stringify(detail) + ' }');
								}

							} else if (vidx == "1" && vendorCode != "union_evolution_casino") {
								$('.cardTr').show();
								$('#cId').html("에볼루션");
								$('#tId').html(detail.table);
								$('#sId').html(detail.index);
								$('#gId').html(detail.title);

								var bcards = detail.result.details.bankerHand.cards;
								var pcards = detail.result.details.playerHand.cards;

								var bn1 = bcards[0].substring(0, 1); var bn2 = bcards[1].substring(0, 1);
								var pn1 = pcards[0].substring(0, 1); var pn2 = pcards[1].substring(0, 1);

								if (bcards[0].substring(0, 1) == "T") {bn1 = "10";}
								if (bcards[0].substring(0, 1) == "J") {bn1 = "11";}
								if (bcards[0].substring(0, 1) == "Q") {bn1 = "12";}
								if (bcards[0].substring(0, 1) == "K") {bn1 = "13";}
								if (bcards[0].substring(0, 1) == "A") {bn1 = "1";}

								if (bcards[1].substring(0, 1) == "T") {bn2 = "10";}
								if (bcards[1].substring(0, 1) == "J") {bn2 = "11";}
								if (bcards[1].substring(0, 1) == "Q") {bn2 = "12";}
								if (bcards[1].substring(0, 1) == "K") {bn2 = "13";}
								if (bcards[1].substring(0, 1) == "A") {bn2 = "1";}

								if (pcards[0].substring(0, 1) == "T") {pn1 = "10";}
								if (pcards[0].substring(0, 1) == "J") {pn1 = "11";}
								if (pcards[0].substring(0, 1) == "Q") {pn1 = "12";}
								if (pcards[0].substring(0, 1) == "K") {pn1 = "13";}
								if (pcards[0].substring(0, 1) == "A") {pn1 = "1";}

								if (pcards[1].substring(0, 1) == "T") {pn2 = "10";}
								if (pcards[1].substring(0, 1) == "J") {pn2 = "11";}
								if (pcards[1].substring(0, 1) == "Q") {pn2 = "12";}
								if (pcards[1].substring(0, 1) == "K") {pn2 = "13";}
								if (pcards[1].substring(0, 1) == "A") {pn2 = "1";}




								$('#bc1').attr("src", "/img/card/" + bcards[0].substring(1, 2).toLowerCase() + "_" + bn1 + ".svg");
								$('#bc2').attr("src", "/img/card/" + bcards[1].substring(1, 2).toLowerCase() + "_" + bn2 + ".svg");
								if (bcards.length == 3) {
									var bn3 = bcards[2].substring(0, 1);
									if (bcards[2].substring(0, 1) == "A") {bn3 = "1";}
									if (bcards[2].substring(0, 1) == "T") {bn3 = "10";}
									if (bcards[2].substring(0, 1) == "J") {bn3 = "11";}
									if (bcards[2].substring(0, 1) == "Q") {bn3 = "12";}
									if (bcards[2].substring(0, 1) == "K") {bn3 = "13";}

									$('#bc3').attr("src", "/img/card/" + bcards[2].substring(1, 2).toLowerCase() + "_" + bn3 + ".svg");
								} else {
									$('#bc3').attr("src", "/img/card/none.png");
								}

								$('#pc1').attr("src", "/img/card/" + pcards[0].substring(1, 2).toLowerCase() + "_" + pn1 + ".svg");
								$('#pc2').attr("src", "/img/card/" + pcards[1].substring(1, 2).toLowerCase() + "_" + pn2 + ".svg");
								if (pcards.length == 3) {
									var pn3 = pcards[2].substring(0, 1);

									if (pcards[2].substring(0, 1) == "A") {pn3 = "1";}
									if (pcards[2].substring(0, 1) == "T") {pn3 = "10";}
									if (pcards[2].substring(0, 1) == "J") {pn3 = "11";}
									if (pcards[2].substring(0, 1) == "Q") {pn3 = "12";}
									if (pcards[2].substring(0, 1) == "K") {bpn3 = "13";}

									$('#pc3').attr("src", "/img/card/" + pcards[2].substring(1, 2).toLowerCase() + "_" + pn3 + ".svg");
								} else {

									$('#pc3').attr("src", "/img/card/none.png");
								}

								$('#betDetail').html('');
								var detailList = "";

							}
							else if (vidx == "4") {
								$('#cId').html("보타");
								$('#tId').html(detail.c_table_idx);
								$('#sId').html(detail.c_shoe_idx);
								$('#gId').html(detail.c_game_idx);
								$('.cardTr').show();

								$('#bc1').attr("src", "/img/card/" + detail.bc1 + ".svg");
								$('#bc2').attr("src", "/img/card/" + detail.bc2 + ".svg");
								if (detail.bc3 == "0") {
									$('#bc3').attr("src", "/img/card/none.png");
								} else {
									$('#bc3').attr("src", "/img/card/" + detail.bc3 + ".svg");
								}

								$('#pc1').attr("src", "/img/card/" + detail.pc1 + ".svg");
								$('#pc2').attr("src", "/img/card/" + detail.pc2 + ".svg");
								if (detail.bc3 == "0") {
									$('#pc3').attr("src", "/img/card/none.png");
								} else {
									$('#pc3').attr("src", "/img/card/" + detail.pc3 + ".svg");
								}
								$('#betDetail').html('');

								var detailList = "";

								for (var b = 0; b < data.data.detail.list.length; b++) {

									var betRes = parseInt(data.data.detail.list[b].c_bet_type);
									var betResTxt = "";
									if (betRes == 1) betResTxt = "<span class='betType typeB'>B</span>";
									if (betRes == 2) betResTxt = "<span class='betType typeP'>P</span>";
									if (betRes == 3) betResTxt = "<span class='betType typeT'>T</span>";
									if (betRes == 4) betResTxt = "<span class='betType typeB'>B</span><span class='betType notypeP'>P</span>";
									if (betRes == 5) betResTxt = "<span class='betType typeP'>P</span><span class='betType notypeP'>P</span>";

									var resultRes = parseInt(data.data.detail.list[b].c_game_result);
									var resultResTxt = "";

									if (resultRes == 1) resultResTxt = "B";
									if (resultRes == 2) resultResTxt = "P";
									if (resultRes == 3) resultResTxt = "T";


									var resultPair_b = parseInt(data.data.detail.list[b].bp);
									var resultPair_p = parseInt(data.data.detail.list[b].pp);


									var resultPairTxt = "";
									if (resultPair_b == 1) resultPairTxt = " ,  <span class='betType notypeP'>P</span>";
									if (resultPair_p == 1) resultPairTxt = " , <span class='betType notypeP'>P</span>";


									detailList += '<tr>';
									//detailList+='<td><span class="betType type'+betResTxt+'">'+betResTxt+'</span></td>';

									detailList += '<td><span class="">' + betResTxt + '</span></td>';

									detailList += '<td>' + ("" + data.data.detail.list[b].c_bet_money).replace(/\B(?=(\d{3})+(?!\d))/g, ',') + '</td>'; //베팅금액


									var bet = parseInt(data.data.detail.list[b].c_bet_money);
									var award = parseInt(data.data.detail.list[b].c_result_money);

									var winlose = award - bet;
									var betRate = Math.abs(award / bet);

									detailList += '<td>' + betRate.toFixed(2) + '</td>';


									detailList += '<td>' + ("" + award).replace(/\B(?=(\d{3})+(?!\d))/g, ',') + '</td>';


									var winlose = parseInt(data.data.detail.list[b].c_bet_result);
									var winloseTxt = "";
									if (winlose == 1) winloseTxt = "WIN";
									if (winlose == 2) winloseTxt = "LOSE";
									if (winlose == 3) winloseTxt = "TIE";

									//detailList+='<td><span class="betType type'+resultResTxt+'">'+resultResTxt+'</span></td>';
									detailList += '<td><span class=""><span class="betType type' + resultResTxt + '">' + resultResTxt + '</span><span class="paretype">' + resultPairTxt + '</span></span></td>';
									detailList += '<td><font color="red">' + winloseTxt + '</font></td>';
									detailList += '</tr>';

								}


								$('#betDetail').html(detailList);

								// $('#betDetail').remove();

							} else if (vidx == "10") {
								$('.cardTr2').show();
								$('#cId').html("두윈");
								$('#tId').html(detail.tableId);
								$('#sId').html(detail.roundId);
								$('#gId').html("");
								$('#bank').html(result.banker);
								$('#player').html(result.player);

								var betRes = parseInt(detail.playType);
								var betResTxt = "";
								if (betRes == 0) betResTxt = "<span class='betType typeB'>B</span>";
								if (betRes == 1) betResTxt = "<span class='betType typeP'>P</span>";
								if (betRes == 2) betResTxt = "<span class='betType typeT'>T</span>";
								if (betRes == 3) betResTxt = "<span class='betType typeB'>B</span><span class='betType notypeP'>P</span>";
								if (betRes == 4) betResTxt = "<span class='betType typeP'>P</span><span class='betType notypeP'>P</span>";

								var resultRes = parseInt(result.res);
								var resultResTxt = "";
								if (resultRes == 0) resultResTxt = "B";
								if (resultRes == 1) resultResTxt = "P";
								if (resultRes == 2) resultResTxt = "T";


								var resultPair = parseInt(result.pair);
								var resultPairTxt = "";
								if (resultPair == 1) resultPairTxt = " ,  <span class='betType typeB'>B</span><span class='betType notypeP'>P</span>";
								if (resultPair == 2) resultPairTxt = " ,  <span class='betType typeP'>P</span><span class='betType notypeP'>P</span>";
								if (resultPair == 3) resultPairTxt = " ,  <span class='betType typeB'>B</span><span class='betType typeP'>P</span><span class='betType notypeP'>P</span>";
								var detailList = "";
								detailList += '<tr>';
								//detailList+='<td><span class="betType type'+betResTxt+'">'+betResTxt+'</span></td>';
								detailList += '<td><span class="">' + betResTxt + '</span></td>';
								detailList += '<td>' + ("" + detail.bet).replace(/\B(?=(\d{3})+(?!\d))/g, ',') + '</td>'; //베팅금액

								var winlose = parseInt(detail.winlose);
								var award = parseInt(detail.award);
								var bet = parseInt(detail.bet);
								var betRate = Math.abs(award / bet);

								detailList += '<td>' + betRate.toFixed(2) + '</td>';



								detailList += '<td>' + ("" + detail.award).replace(/\B(?=(\d{3})+(?!\d))/g, ',') + '</td>';


								var winloseTxt = "";
								if (winlose > 0) winloseTxt = "WIN";
								if (winlose <= 0) winloseTxt = "LOSE";
								//detailList+='<td><span class="betType type'+resultResTxt+'">'+resultResTxt+'</span></td>';
								detailList += '<td><span class=""><span class="betType type' + resultResTxt + '">' + resultResTxt + '</span><span class="paretype">' + resultPairTxt + '</span></span></td>';
								detailList += '<td><font color="red">' + winloseTxt + '</font></td>';
								detailList += '</tr>';


								$('#betDetail').html('');
								$('#betDetail').html(detailList);
							}

						}
					}
				});

				document.getElementById("modal").style.display = "flex"



			} else {
				document.getElementById("modal").style.display = "none"
			}
		}
		function popUp() {
			const popup = document.getElementById("detailPopPlus");
			const heightP = popup.getBoundingClientRect().top;
			const reset = 0;

			if (heightP < reset) {
				console.log(`현재 창기준 y좌표 : ${rect.y}px`);
			}
		}
		
		function getMyDownSite(depth) {

			$.ajax({
				type: "post",
				url: "/agent/getMyDownSite",
				data: {
					searchDepth: depth


				},
				async: false,
				dataType: "json",
				success: function (data) {

					$("#searchSiteId").empty();
					$("#searchSiteId").append($('<option>', {value: "", text: "=== 선택 ==="}));
					var downSiteList = data.downSiteList;

					//alert(downSiteList.length)
					for (var d = 0; d < downSiteList.length; d++) {

						$("#searchSiteId").append($('<option>', {value: downSiteList[d].siteId, text: downSiteList[d].siteId}));
					}



				}
			});

		}

		$(document).mouseup(function (e) {
			if ($("#detailPopPlus").has(e.target).length === 0) {
				$("#detailPopPlus").css("display", "none");
			}
		});

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

	<div class="container-fluid">
		<div class="page-name">
			<h1>통합 베팅 내역</h1>
		</div>
		<ul class="tabletab">
			<li><a th:class="${searchVO.searchType == 'casino' } ? active : ''"
					href="/user/betlist?searchType=casino">카지노</a></li>
			<li><a th:class="${searchVO.searchType == 'hcasino' } ? active : ''"
					href="/user/betlist?searchType=hcasino">호텔카지노</a></li>
			<li><a th:class="${searchVO.searchType == 'sport' } ? active : ''"
					href="/user/betlist?searchType=sport">스포츠</a></li>
			<li><a th:class="${searchVO.searchType == 'slot' } ? active : ''"
					href="/user/betlist?searchType=slot">슬롯</a></li>
			<li><a th:class="${searchVO.searchType == 'mine' } ? active : ''"
					href="/user/betlist?searchType=mine">폭탄게임</a></li>
			<li><a th:class="${searchVO.searchType == '' } ? active : ''" href="/user/betlist?searchType=">전체</a></li>
		</ul>
		<div class="tableserachwrap">
			<div>
				<form class="searchWrap-form" name="searchVO">
					<input type="hidden" id="page" name="page" th:value="${searchVO.page}" />
					<input type="hidden" id="searchType" name="searchType" th:value="${searchVO.searchType}" />

					<ul class="tableserach">
						<li>
							<div class="input-group">
								<div>
									<label class="input-group-text">단계</label>
								</div>
								<select id="searchDepth" name="searchDepth" onchange="getMyDownSite(this.value)">
									<option value="0" th:selected="${searchVO.searchDepth == 0}">1 Me</option>
									<option value="1" th:selected="${searchVO.searchDepth == 1}">2 layer</option>
									<option value="2" th:selected="${searchVO.searchDepth == 2}">3 layer</option>
									<option value="3" th:selected="${searchVO.searchDepth == 3}">4 layer</option>
									<option value="4" th:selected="${searchVO.searchDepth == 4}">5 layer</option>
									<option value="5" th:selected="${searchVO.searchDepth == 5}">6 layer</option>
									<option value="6" th:selected="${searchVO.searchDepth == 6}">7 layer</option>
									<option value="7" th:selected="${searchVO.searchDepth == 7}">8 layer</option>
									<option value="8" th:selected="${searchVO.searchDepth == 8}">9 layer</option>
									<option value="9" th:selected="${searchVO.searchDepth == 9}">10 layer</option>
								</select>
							</div>
						</li>
						<li>
							<div class="input-group">
								<div>
									<label class="input-group-text">소속 에이전시 아이디</label>
								</div>
								<select id="searchSiteId" name="searchSiteId">
									<option value="">=== 선택 ===</option>
									<th:block th:each="list,seq : ${downSiteList}">
										<option th:value="${list.siteId}" th:text="${list.siteId}"
											th:selected="${searchVO.searchSiteId eq list.siteId}"></option>
									</th:block>




								</select>
							</div>
						</li>
						<li>
							<div class="input-group">
								<div>
									<label class="input-group-text">유저 아이디</label>
								</div>
								<input type="text" name="searchMemId" th:value="${searchVO.searchMemId}">
							</div>
						</li>
						<li>
							<div class="input-group">
								<div>
									<label class="input-group-text">기간</label>
								</div>
								<input type="date" name="startDate" th:value="${searchVO.startDate}" />
								<input type="date" name="endDate" th:value="${searchVO.endDate}" />
							</div>
						</li>
						<li>
							<div class="input-group">
								<div>
									<label class="input-group-text">표시</label>
								</div>
								<select name="count_per_list">
									<option value="30" th:selected="${searchVO.count_per_list == 30}">30</option>
									<option value="50" th:selected="${searchVO.count_per_list == 50}">50</option>
									<option value="100" th:selected="${searchVO.count_per_list == 100}">100</option>
								</select>
							</div>
						</li>
						<!--li>
	                       <div class="input-group">
	                         <div>
	                           <label class="input-group-text">번호</label>
	                         </div>
	                         <input type="text" name="searchValue" th:value="${searchVO.searchValue}">
	                       </div>
	                     </li-->
						<li>
							<a class="btn" href="javascript:goSearch()">
								검색
							</a>
						</li>
					</ul>
				</form>
			</div>
		</div>
		<div id="sumPriceWrap">
			
			<div class="linePrintWrap">

				<button class="btnExcel" onclick="javascript:excelDown()"><img src="/img/excel.png"></button>
			</div>
		</div>
		<div class="table">
			<!--div class="head"><h6>통합 베팅 내역 목록</h6></div-->
			<div class="body">
				<div class="table-responsive">
					<table class="nonDetail">
						<colgroup>
							<col width="5%">
							<col width="5%">
							<col width="10%">
							<col width="5%">
							<col width="10%">
							<col width="10%">
							<col width="10%">
							<col width="15%">
							<col width="5%">
						</colgroup>
						<thead>
							<tr>
								<th>betID</th>
								<th>상위 벤더회사</th>
								<th>유저</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('refId')}" onclick="javascript:betDetail()" id="modalBtnBet"><a th:if="${list.get('deposit') != list.get('cancelAmt')}"
											th:href="|javascript:ViewLayer('${list.vendorIdx}', '${list.refId}');|">1188879669</a></td>
									<td>
										<div class="tgBox">
											<a class="selectBox bl"><em th:text="${list.get('siteId')}">@no.1</em></a>
											<div class="tgBoxcon">
												<ul>
													<li>에이전시</li>
													<li><a>수정</a></li>
													<li><a href="exchange.html">지급 내역</a></li>
													<li><a href="charge.html">충전 내역</a></li>
													<li><a href="agentqna.html">문의 내역</a></li>
												</ul>
												<ul>
													<li>유저</li>
													<li><a href="user.html">유저 목록</a></li>
													<li><a href="payments.html">지급 내역</a></li>
												</ul>
											</div>
										</div>
									</td>
									<td>
										<div class="tgBox">
											<a class="selectBox"><em th:text="${list.get('memberId')}">@no.1</em></a>
											<div class="tgBoxcon">
												<ul class="b0">
													<li>유저</li>
													<li><a href="userRead.html">수정</a></li>
													<li><a href="transactionList.html">전체 트랜잭션 내역</a></li>
													<li><a href="betlist.html">통합 베팅 내역</a></li>
													<li><a class="modalBtn">머니 지급</a></li>
												</ul>
											</div>
										</div>
									</td>
									<td>
										<div class="mb-1">

											<span class="" th:text="${list.get('vendorName')}">evolution</span><br>
											<span class="" th:text="${list.get('gameIdx')}">baccarat</span>
										</div>
										<!-- 
                            <div class="title">Korean Speed Baccarat A</div>
                            <div class="round">onokyd4wn7uekbjx</div>
                            <div class="round">16ff7e58fb649b1849c6cd80-qgx4ge5istsx7f6d</div>
                            -->
									</td>
									<td>
										<div class="mb-1">
											<span class="primary">bet</span>
										</div>
										<div th:text="${#temporals.format(list.get('betTime'), 'yyyy-MM-dd HH:mm:ss')}">
											2022-07-07</div>

									</td>
									<td th:text="${#temporals.format(list.get('endTime'), 'yyyy-MM-dd HH:mm:ss')}">-
									</td>
									<td th:text="|${#numbers.formatInteger(list.get('deposit'), 0, 'COMMA')}|">56,000 C
									</td>
									<!--<td>
		                    <table class="table bsn m0">
		                      <tbody>
		                        <tr>
		                          <td th:text="|${#numbers.formatInteger(list.get('deposit'), 0, 'COMMA')}C|">56,000 C</td>
		                        </tr>
		                        <tr>
		                          <td th:if="${list.get('isCancel') < 1}">당첨 금액</td>
		                          <td th:if="${list.get('isCancel') >= 1}"><font color="red">취소 금액</font></td>
		                          <td th:text="|${#numbers.formatInteger(list.get('credit'), 0, 'COMMA')}C|" >0 C</td>
		                        </tr>
		                        <tr>
		                          <td>유저 손익 금액</td>
		                          <td th:text="|${#numbers.formatInteger(list.get('credit') - list.get('deposit'), 0, 'COMMA')}C|">-56,000 C</td>
		                        </tr>
		                      </tbody>
		                    </table>
		                  </td>-->
									<td th:text="|${#numbers.formatInteger(list.get('credit'), 0, 'COMMA')}|">0 C</td>
									<td th:text="|${#numbers.formatInteger(list.get('cancelAmt'), 0, 'COMMA')}|">0 C
									</td>
									<td th:text="|${#numbers.formatInteger(list.get('userBenefit'), 0, 'COMMA')}|">
										-56,000 C</td>
									<td class="detailSec">
										<a class="btn detailbtn" th:if="${list.get('deposit') != list.get('cancelAmt')}"
											th:href="|javascript:ViewLayer('${list.vendorIdx}', '${list.refId}');|">상세</a>
										<div id="detailPop" class="detailpopup">
											<h3>게임 상세 내역<a class="close detailClose">X</a></h3>
											<table class="detailTb">
												<tr>
													<td colspan="4">
														<table height="50">
															<colgroup>
																<col width="25%">
																<col width="25%">
																<col width="25%">
																<col width="25%">
															</colgroup>
															<thead>
																<tr>
																	<th>카지노명</th>
																	<th>테이블번호</th>
																	<th>슈번호</th>
																	<th>게임번호</th>
																</tr>
															</thead>
															<tbody>
																<tr>
																	<td id="">카지노명 예시</td>
																	<td id="">77</td>
																	<td id="">123456</td>
																	<td id="">7</td>
																</tr>
															</tbody>
														</table>
													</td>
												</tr>
												<tr>
													<td colspan="2">
														<table height="150">
															<colgroup>
																<col width="50%">
																<col width="50%">
															</colgroup>
															<thead>
																<tr>
																	<th>
																		<font color="blue">뱅커</font>
																	</th>
																	<th>
																		<font color="red">플레이어</font>
																	</th>
																</tr>
															</thead>
															<tbody>
																<tr>
																	<td>
																		<div class="cardWrap cardWrapB" id="">
																			<span class="ro90"><img src=""></span>
																			<span><img src=""></span>
																			<span><img src=""></span>
																		</div>
																	</td>
																	<td>
																		<div class="cardWrap cardWrapP" id="">
																			<span><img src=""></span>
																			<span><img src=""></span>
																			<span class="ro90"><img src=""></span>
																		</div>
																	</td>
																</tr>
															</tbody>
														</table>
													</td>
												</tr>
												<tr>
													<td colspan="6">
														<table height="50">
															<colgroup>
																<col width="16.6%">
																<col width="16.6%">
																<col width="16.7%">
																<col width="16.6%">
																<col width="16.6%">
																<col width="16.6%">
															</colgroup>
															<thead>
																<tr>
																	<th>베팅타입</th>
																	<th>베팅금액</th>
																	<th>배당율</th>
																	<th>예상환급금액</th>
																	<th>게임결과</th>
																	<th>적중유무</th>
																</tr>
															</thead>
															<tbody>
																<tr>
																	<td><span class="betType typeT"></span></td>
																	<td></td>
																	<td></td>
																	<td></td>
																	<td><span class="betType typeP"></span></td>
																	<td></td>
																</tr>
															</tbody>
														</table>
													</td>
												</tr>
											</table>
										</div>
										<div id="detailPopPlus" class="detailpopup">
											<h3>게임 상세 내역<a class="close detailClose">X</a></h3>
											<table class="detailTb">
												<tr>
													<td colspan="4" id="djSonData"> </td>
												</tr>
												<tr>
													<td colspan="4">
														<table height="50">
															<colgroup>
																<col width="25%">
																<col width="25%">
																<col width="25%">
																<col width="25%">
															</colgroup>
															<thead>
																<tr>
																	<th>카지노명</th>
																	<th>테이블번호</th>
																	<th>슈번호</th>
																	<th>게임번호</th>
																</tr>
															</thead>
															<tbody>
																<tr>
																	<td id="cId">카지노명 예시</td>
																	<td id="tId">77</td>
																	<td id="sId">123456</td>
																	<td id="gId">7</td>
																</tr>
															</tbody>
														</table>
													</td>
												</tr>
												<tr>
													<td colspan="2">
														<table height="150">
															<colgroup>
																<col width="50%">
																<col width="50%">
															</colgroup>
															<thead>
																<tr>
																	<th>
																		<font color="blue">뱅커</font>
																	</th>
																	<th>
																		<font color="red">플레이어</font>
																	</th>
																</tr>
															</thead>
															

														</table>
													</td>
												</tr>
												<tr>
													<td colspan="6">
														<textarea id="jsonDetail" style="width:100%;height:200px">
														</textarea>
													</td>
												</tr>
												<tr id="betDetailtr">
													<td colspan="6">
														<table height="50">
															<colgroup>
																<col width="16.6%">
																<col width="16.6%">
																<col width="16.7%">
																<col width="16.6%">
																<col width="16.6%">
																<col width="16.6%">
															</colgroup>
															<thead>
																<tr>
																	<th>베팅타입</th>
																	<th>베팅금액</th>
																	<th>배당율</th>
																	<th>예상환급금액</th>
																	<th>게임결과</th>
																	<th>적중유무</th>
																</tr>
															</thead>
															<tbody id="betDetail">
																<tr>
																	<td><span class="betType typeT">T</span></td>
																	<td>30,000</td>
																	<td>10.00</td>
																	<td>300,000</td>
																	<td><span class="betType typeP">P</span></td>
																	<td>
																		<font color="red">LOSE</font>
																	</td>
																</tr>
																<tr>
																	<td><span class="betType typeB">B</span></td>
																	<td>30,000</td>
																	<td>10.00</td>
																	<td>300,000</td>
																	<td><span class="betType typeP">P</span></td>
																	<td>
																		<font color="red">LOSE</font>
																	</td>
																</tr>
																<tr>
																	<td><span class="betType typeP">P</span></td>
																	<td>50,000</td>
																	<td>12.00</td>
																	<td>600,000</td>
																	<td><span class="betType typeP">P</span></td>
																	<td>WIN</td>
																</tr>
															</tbody>
														</table>
													</td>
												</tr>
											</table>
										</div>
									</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()">X</div>
			<div class="modal-content-bet">
				<div>
					<h4>세부내역</h4>
					<table>
						<tr>
							<td>게임ID</td>
							<td>qqrrwwee1122</td>
						</tr>
						<tr>
							<td>게임이름</td>
							<td>BAC_Player</td>
						</tr>
						<tr>
							<td>베팅금</td>
							<td>1000</td>
						</tr>
						<tr>
							<td>당첨금</td>
							<td>2000</td>
						</tr>
						<tr>
							<td>베팅시각</td>
							<td>2023-04-16 T 17:53:34. 104Z</td>
						</tr>
						<tr>
							<td>베팅위치</td>
							<td>Player</td>
						</tr>
						<tr>
							<td>트랜젝션 아이디</td>
							<td>123456789</td>
						</tr>
					</table>
				</div>
				<div>
					<h4>베팅 및 게임결과</h4>
					<table>
						<tr>
							<td>banker</td>
							<td class="cardTr">
								<div class="cardWrap cardWrapB">
                                    <span class="ro90"><img id="bc3"
                                            src=""></span>
                                    <span><img id="bc2"
                                            src=""></span>
                                    <span><img id="bc1" src=""></span>
                                    <span id="bs1"></span>
                                </div>
							</td>
							<td class="cardTr2">
								<div class="cardWrap cardWrapB" id="bank">
                                </div>
							</td>
						</tr>
						<tr>
							<td>player</td>
							<td class="cardTr">
								<div class="cardWrap cardWrapP">
                                    <span><img id="pc1"
                                            src=""></span>
                                    <span><img id="pc2"
                                            src=""></span>
                                    <span class="ro90"><img id="pc3"
                                            src=""></span>
                        			<span id="ps1"></span>
                                </div>
							</td>
							<td class="cardTr2">
								<div class="cardWrap cardWrapP" id="player">
                                </div>
							</td>
						</tr>
						<tr>
							<td>outcome</td>
							<td>Banker</td>
						</tr>
					</table>
				</div>
			</div>
		</div>
	</div>
</th:block>