<!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">
	<script>
		$( document ).ready(function() {
		  $('.trigger').click(function() {
			  
			  	$('#id').val($(this).data('id'));
			  	$('#vendor').val($(this).data('vendor'));
			  	$('#key').val($(this).data('key'));
			  
		     $('.modal-wrapper').toggleClass('open');
		    $('.page-wrapper').toggleClass('blur');
		     return false;
		  });
		});
		
		
		 function withdraw(vtype){
					 
			$('.modal-wrapper').toggleClass('open');
		    $('.page-wrapper').toggleClass('blur');
							    
			    	 $.ajax({
			 			type : "post",
			 			url : "/user/withdrawAll",
			 			data:{	
							 id:$('#id').val(),
							 vendor:$('#vendor').val(),
							 key:$('#key').val()
							 
						 }	,	 			
			 			async : true,
			 			dataType : "json",
			 			success : function(data) {
			 				if(data.RES=="SUCCESS"){
			 					alert("처리 완료");				 					
			 					
							 				
			 				}else{
								
			 					alert("오류발생");
			 				}
			 			}
			 		});
			 		
			    	 
			     
		    	 
		     }
      
	</script>
	<style>
		.btn{border:0;}
		.blur{
		  -webkit-filter: blur(5px);
		  -moz-filter: blur(5px);
		  -o-filter: blur(5px);
		  -ms-filter: blur(5px);
		  filter: blur(5px);
		}
		.modal-wrapper{
		  width:100%;
		  height:100%;
		  position:fixed;
		  top:0; left:0;
		  background: #46464659;
		  visibility:hidden;
		  opacity:0;
		  -webkit-transition: all 0.25s ease-in-out;
		  -moz-transition: all 0.25s ease-in-out;
		  -o-transition: all 0.25s ease-in-out;
		  transition: all 0.25s ease-in-out;
		}
		.modal-wrapper.open{
		  opacity:1;
		  visibility:visible;
		}
		.modal{
		  width:400px;
		  height:300px;
		  display:block;
		  position:absolute;
		  top:50%; left:50%;
		  background:#fff;
		  opacity:0;
		  -webkit-transition: all 0.5s ease-in-out;
		  -moz-transition: all 0.5s ease-in-out;
		  -o-transition: all 0.5s ease-in-out;
		  transition: all 0.5s ease-in-out;
		}
		.modal-wrapper.open .modal{
		  margin-top:-200px;
		  opacity:1;
		}
		.head{
		  width:90%;
		  height:32px;
		  padding:1.5em 5%;
		  overflow:hidden;
		  background:#01bce5;
		}
		.content{
		  padding:5%;
		  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 30px;
	      height: calc(100% - 80px); box-sizing: border-box;
		}
		.content h2 {
			font-size: 24px; font-weight: bold;
		}
		.btn{
		    cursor: pointer;
		    padding: 6px 22px;
		    font-size: 14px;
		    line-height: 1.5;
		    border-radius: 0.2rem;
		}
		.btnB{
			background-color: #03add2;
		    border-color: #03add2;
		     color: #fff;
		}
		.btnW{
			background: #dbdbdb;
			color: #000;
		}
	</style>
</th:block>
	
<th:block layout:fragment="content">
	<div class="container-fluid">
		<div class="page-name">
            <h1>상위벤더 보유머니 현황</h1>
            <span><br /></span>
        </div>
        
        <div class="table">
            <div class="body">
              <div class="table-responsive">
                <table class="center">
                  <thead>
                    <tr>
                      <th> 계정</th>
                      <th>벤더사명</th>
                      <th>보유머니</th>
                      <th>전체</th>
                    </tr>
                  </thead>
                  <tbody>
					  <th:block th:each="list,seq : ${list}">
                   	 <tr>
                      	<td th:text="${list.get('id')}"> mama</td>
                      	<td th:text="${list.get('vendor')}">유니온</td>
                      	<td  th:text="|${#numbers.formatInteger(list.get('balance'), 0, 'COMMA')}|">0</td>
                      	<td><button class="btn trigger" th:data-id="${list.get('id')}" th:data-vendor="${list.get('vendor')}" th:data-key="${list.get('key')}" >회수</button></td>
                    </tr>
                    </th:block>                   
                  </tbody>
                </table>
              </div>
            </div>
        </div>
	</div>
	<div class="modal-wrapper">
	  <div class="modal">
	  	<div class="head">
	  	</div>
	    <div class="content">
	    	<div>
	    		<h2>전체 회수 하시겠습니까?</h2>
	    	</div>
	    	<div>
	    		<button class="btn btnB" onclick="withdraw()">확인</button>
	    		<button class="btn btnW trigger">취소</button>
	    		<input type="hidden" id="id"/>
	    		<input type="hidden" id="vendor"/>
	    		<input type="hidden" id="key"/>
	    	</div>
	    </div>
	  </div>
	</div>
</th:block>