@extends('layouts.page')

@section('title', '收款群組')

@section('script')

<script>

var current_data;
var current_page;
var search_text;
var pageLimit=10;

$(document).ready(function() {
	sendInfo();
	/*
	sendFilter(1);
	$("#top_search").change(function(){
		search_text=$(this).val();
		sendFilter(1);
	});
	
	$("#top_search_reset").click(function(){
		search_text=null;
		$("#top_search").val("");
		sendFilter(1);
	});
	*/
} );

function sendInfo(){
	$.ajax({
	  url: '/ajax/storeGroup/',
	  method:'get',
	  dataType: 'json',
	  data: {} 
	}).done(function(result) {

		current_data=result;
		console.log(current_data.dayAmountUsage);
		$("#dayUsage").html(current_data.dayAmountUsage);
		$("#weekUsage").html(current_data.weekAmountUsage);
		$("#monthUsage").html(current_data.monthAmountUsage);
		
		$("#time_created_at").html(current_data.created_at);
		$("#time_updated_at").html(current_data.updated_at);

		$("#text_id").val(current_data.group_id);
		
		$("#text_name").val(current_data.group_name);
		
		$("#time_dayLimitUpdated").html(current_data.dayLimitUpdated);
		$("#time_weekLimitUpdated").html(current_data.weekLimitUpdated);
		$("#time_monthLimitUpdated").html(current_data.monthLimitUpdated);
		
		
		limit=current_data.dayAmountLimit;
		if(limit==0)
			limit="不限";
		$("#text_dayLimit").val(limit);
		limit=current_data.weekAmountLimit;
		if(limit==0)
			limit="不限";
		$("#text_weekLimit").val(limit);
		limit=current_data.monthAmountLimit;
		if(limit==0)
			limit="不限";
		$("#text_monthLimit").val(limit);
		
		$("#text_appkey").val(current_data.appkey);
		
	  
	});
	return false;
}

function dataToTr(obj){
	tr='';
	tr+='<tr>';
	tr+='<td class="mr-1">';
	tr+='<label class="control outlined control-checkbox checkbox-success ml-8  ">';
	tr+='<input type="checkbox" />';
	tr+='<div class="control-indicator"></div>';
	tr+='</label>';
	tr+='</td>';
	tr+='<td class="mr-1"> ';
	tr+='<span><p>'+obj.group_id+'</p></span> ';
	tr+='</td>';
	tr+='<td class="d-none d-md-table-cell">';
	tr+='<p>'+obj.group_name+'</p>';
	tr+='</td>';
	tr+='<td class="d-none d-md-table-cell">';
	limit=obj.dayAmountLimit;
	if(limit==0)
		limit="不限";
	tr+='	  <p><span>'+obj.dayAmountUsage+"/"+limit+'</span></p> ';
	tr+='</td>';
	limit=obj.weekAmountLimit;
	if(limit==0)
		limit="不限";
	tr+='<td class="d-none d-md-table-cell">';
	tr+='	<p> <span>'+obj.weekAmountUsage+"/"+limit+'</span> </p> ';
	tr+='</td>';
	limit=obj.monthAmountLimit;
	if(limit==0)
		limit="不限";
	tr+='<td class="d-none d-md-table-cell">';
	tr+='	<p><span>'+obj.monthAmountUsage+"/"+limit+'</span> </p> ';
	tr+='</td>';
	tr+='<td class="d-none d-md-table-cell">';
	tr+='  <p class="  "><span>'+obj.created_at+'</span> </p>';
	tr+='</td>';
	tr+='<td class="d-none d-md-table-cell">';
	tr+='  <p class="  "><span>'+obj.updated_at+'</span> </p>';
	tr+='</td>';
	tr+='</tr>'; 
	return tr;
}

function tableNav(data){
	
	front_page=parseInt(data.page)+1;
	startPage=front_page-front_page%10+1;
	max_page=parseInt(parseInt(data.num)/parseInt(data.limit))+1;
	
	nav='';
	nav+='<ul class="pagination pagination-seperated">';
	nav+='<li class="page-item">';
	nav+='<a class="page-link" href="#" aria-label="Previous">';
	nav+='	<span aria-hidden="true" class="mdi mdi-chevron-left mr-1"></span>First';
	nav+='	<span class="sr-only">Previous</span>';
	nav+='</a>';
	nav+='</li>';
	nav+='<li class="page-item">';
	nav+='<a class="page-link" href="#" aria-label="Previous">';
	nav+='	<span aria-hidden="true" class="mdi mdi-chevron-left mr-1"></span>Prev 10';
	nav+='	<span class="sr-only">Previous</span>';
	nav+='</a>';
	nav+='</li>';
	for(i=0;i<10;i++){
		p=(startPage+i)
		if(p > max_page)
			continue;
		if(p==front_page)
			active='active';
		else
			active='';
		nav+='<li class="page-item '+active+'">';
		nav+='<a class="page-link" href="javascript:sendFilter('+p+') ">'+p+'</a>';
		nav+='</li>';
	}
	
	
	nav+='<li class="page-item">';
	nav+='<a class="page-link" href="#" aria-label="Next">Next 10';
	nav+='<span aria-hidden="true" class="mdi mdi-chevron-right ml-1"></span>';
	nav+='<span class="sr-only">Next</span>';
	nav+='</a>';
	nav+='</li>';
	nav+='<li class="page-item">';
	nav+='<a class="page-link" href="#" aria-label="Next">last';
	nav+='<span aria-hidden="true" class="mdi mdi-chevron-right ml-1"></span>';
	nav+='<span class="sr-only">Next</span>';
	nav+='</a>';
	nav+='</li>';
	nav+='</ul>';	
	return nav;
}

function sendFilter(front_page){
	filterData={};
	filterData.page=front_page-1;
	if(search_text!=null)
		filterData.search=search_text;
	filterData.limit=pageLimit;
	$.ajax({
	  url: '/ajax/storeGroup/list',
	  method:'post',
	  dataType: 'json',
	  data: filterData 
	}).done(function(result) {
		current_data=result.data;
		current_page=result.page+1;
		$("#tableNav").html("");
		nav=tableNav(result);
		$("#tableNav").html(nav);
		$( "#tableBody" ).html( "" );
	  for(var i in result.data){
		tr=dataToTr(result.data[i])
		$( "#tableBody" ).append( tr );
	  }
	});
	return false;
}



function toCSV(type){
	if(type=='all'){
		
	}else if(type=='currentPage'){
		download_csv(current_data);
	}
	
}
 
function download_csv(data) {
    var csv = '群組名稱,商家帳號\n';
    data.forEach(function(row) {
            csv += [row.group_name,row.store_name].join(',');
            csv += "\n";
    });
 
    console.log(csv);
    var hiddenElement = document.createElement('a');
    hiddenElement.href = 'data:text/csv;charset=utf-8,' + encodeURI(csv);
    hiddenElement.target = '_blank';
    hiddenElement.download = 'export.csv';
    hiddenElement.click();
}
</script>

@endsection

@section('content')
            <!-- 麵包屑 Start -->

            <div class="content-wrapper">
                <div class="content">
                 

                    <div class="breadcrumb-wrapper">
                        <nav aria-label="breadcrumb">
                            <ol class="breadcrumb breadcrumb-inverse ">
                                <li class="breadcrumb-item">
                                    <a href="#"> 群組收款功能</a>
                                </li>
                                <li class="breadcrumb-item">
                                    <a href="{{ url('/storeGroup') }}"> 收款群組列表</a>
                                </li>                                                                                                                                
                                <li class="breadcrumb-item active" aria-current="page"><span>收款群組詳細頁</span></li>
                            </ol>
                        </nav>
                    </div>
            <!-- 麵包屑 end -->
  <!-- 內容              -->
   <div class="row  px-4 ">
                      <div class="col-4 bg-primary py-2">
                        <span class="text-white pt-3"><h5>當前日收款</h5></span>
                        <div class="media pt-2 float-right">
                          <span class="text-white mr-2"><h2 id="dayUsage">-</h2></span>
                          <span class="text-white pt-3"><h5>NTD</h5></span>
                       </div>
                      </div>

                      <div class="col-4 bg-warning py-2">
                        <span class="text-white pt-3 "><h5>當前週收款</h5></span>
                        <div class="media pt-2 float-right">
                          <span class="text-white mr-2"><h2 id="weekUsage">-</h2></span>
                          <span class="text-white pt-3"><h5>NTD</h5></span>
                       </div>
                    </div>
                      <div class="col-4 bg-success py-2">
                        <span class="text-white pt-3"><h5>當前月收款</h5></span>
                        <div class="media pt-2 float-right">
                          <span class="text-white me-2"><h2 id="monthUsage">-</h2></span>
                          <span class="text-white pt-3"><h5>NTD</h5></span>
                       </div>
                    </div></div>
 <div class="row pt-4">
        <!-- 左側資料 開始 -->

 <div class="col-4 px-4">
 <div class="bg-white border rounded ">
                <div class="row ">
               <div class="col-lg-12 ">
                  <div class="card-default ">
                    <div class="card-header px-4 justify-content-between">
                      <h2>群組基本資料</h2>
                      <div>
                      <div class="media">
                      <span><h6>建立日期 :</h6></span><span><h6 id="time_created_at"></h6></span>                      
                      </div>
                    </div>
                    </div>
                    <div class="card-body px-4">
                      <form >
                        <div class="form-row">
                          <div class="col-md-6 mb-3">
                            <label  >平台ID</label>
                            <input id="text_id" type="text" class="form-control" placeholder="輸入平台ID" value="" readonly required>
                            <div class="valid-feedback text-success">
                              確認！
                            </div>                            
                          </div>
                          <div class="col-md-6 mb-3">
                            <label >群組名稱</label>
                            <input id="text_name" type="text" class="form-control"  placeholder="輸入群組名稱" value="" readonly required>
                            <div class="valid-feedback text-success">
                              確認！
                            </div>
                          </div>
                          <div class="col-md-4 mb-3">
                            <label  >日限額</label>
                            <input id="text_dayLimit" type="text" class="form-control"  placeholder="輸入金額" value="" readonly required>
                            <div class="media pt-1">
                              <p class="mr-2 small" id="time_dayLimitUpdated"></p><p class="small">設定</p>
                            </div>
                          </div>
                          <div class="col-md-4 mb-3">
                            <label  >週限額</label>
                            <input id="text_weekLimit" type="text" class="form-control"  placeholder="輸入金額" value="" readonly required>
                            <div class="media pt-1">
                              <p class="mr-2 small" id="time_weekLimitUpdated" ></p><p class="small">設定</p>
                            </div>
                          </div>
                          <div class="col-md-4 mb-3">
                            <label  >月限額</label>
                            <input id="text_monthLimit" type="text" class="form-control"  placeholder="輸入金額" value="" readonly required>
                            <div class="media pt-1">
                              <p class="mr-2 small" id="time_monthLimitUpdated"></p><p class="small">設定</p>
                            </div>
                          </div>
                          <div class="col-md-9 mb-3">
                            <label for="validationServer02">APP Key</label>
                            <input id="text_appkey" type="text" class="form-control" placeholder="收款APP Key" value="" readonly required>
                          </div>
                          </form>
                          <hr class="w-100">
                  </div>

                  <div class="justify-content-between media">
                    <div class="media">
                      <span class="small">上次編輯：</span><span class="small" id="time_updated_at">-</span>
                    </div>
                    <div class="">
                  <button class="btn btn-sm btn-primary" >編輯資料</button>
                  <!-- 這邊要JS一下，點擊後變儲存按鈕，上面"readonly“要拿掉 -->
                  <button class="btn btn-sm btn-primary noshow " >儲存</button>
                    </div>
                   </div>
                </div>
                
              </div>
            </div>
        
          </div>
        </div> </div>
  
        <!-- 左側資料 結束 -->

        <!-- 中間資料 開始 -->
        <div class="col-8 px-4 table">
          <!-- Tab頭 開始 -->
          <div class="card-body  pt-0 px-0" >
              <ul class="nav nav-tabs  pl-0 justify-content-between justify-content-xl-start " id="myTab" role="tablist">
                <!--tab_1開始-->
                <li class="nav-item">
                  <a class="nav-link active" id="tab_1-tab" data-toggle="tab" href="#tab_1" role="tab" aria-controls="tab_1" aria-selected="true">群組中的帳戶列表</a>
                </li>
                <!--tab_1結束-->
                <!--tab_2開始-->
                <li class="nav-item">
                  <a class="nav-link" id="tab_2-tab" data-toggle="tab" href="#tab_2" role="tab" aria-controls="tab_2" aria-selected="false">未加入群組的平台帳戶列表</a>
                </li>
                <!--tab_2結束-->
               </ul>
          </div>
<!-- Tab頭 結束 -->

 <div class="tab-content " >
 	<!-- TAB_1 開始 -->
 	<div class="tab-pane  fade show active" id="tab_1" role="tabpanel" aria-labelledby="tab_1-tab">
 		<nav class="navbar navbar-static-top navbar-expand-lg list_tooll_bar zztop mt_24" >              
              <div class="search-form " >
                   
                   <div class="dropdown d-inline-block  mb-1">
                        
                        <button class="pl-16 btn btn-sm btn-success mt-2" type="button"  >
                        <span><h6>全選</h6></span>
                        </button>
                        
                        <div class="dropdown d-inline-block mb-1 " >
                        <button class="pt-1 btn  dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-display="static">
                          
                        </button>
                        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">

                          
                          <a class="dropdown-item dis mt-2 pb-2 no_click" href="#">移出群組</a>                          
                        </div>

                      </div>
                      </div>

              </div>

              <div>
                 <span class="mr-3  ">234 筆結果</span>             
                
              </div>
            </nav>
            <div class="card  px-2 pt-16 " >
                                    <table class="mb-16 table-responsive table-responsive-largetable-dark w_100 mt_16"  >
                                      <!-- 表頭 Start -->
                                        <thead  >
                                            <tr >
                                                <th class="d-none d-md-table-cell"></th>
                                                <th class="d-none d-md-table-cell media" >平台自訂ID
                                                  <div class="dropdown d-inline-block  pb_1">
                                                     <button class="pt-1 btn  dropdown-toggle" type="button" id="PlatfromId" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-display="static">
                                                     </button>
                                                     <div class="dropdown-menu" aria-labelledby="PlatfromId">
                                                      <a class="dropdown-item mt-2" href="#">順排序</a>
                                                      <a class="dropdown-item mt-2" href="#">逆排序</a>
                                                     </div>
                                                     </div>
                                                 </th>
                                                <th class="d-none d-md-table-cell "><h6 class="text-dark mb-2"> 收款帳戶</h6></th>

                                                <th class="d-none d-md-table-cell">日限額
                                                  <div class="dropdown d-inline-block pb_1">
                                                     <button class="pt-1 btn  dropdown-toggle" type="button" id="DailyPayment" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-display="static">
                                                     </button>
                                                     <div class="dropdown-menu" aria-labelledby="DailyPayment">
                                                      <a class="dropdown-item mt-2" href="#">由高到低</a>
                                                      <a class="dropdown-item mt-2" href="#">由低到高</a>
                                                     </div>
                                                     </div>
                                                </th>
                                                <th class="d-none d-md-table-cell media">週限額
                                                  <div class="dropdown d-inline-block pb_1">
                                                     <button class="pt-1 btn  dropdown-toggle" type="button" id="WeeklyPayment" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-display="static">
                                                     </button>
                                                     <div class="dropdown-menu" aria-labelledby="WeeklyPayment">
                                                      <a class="dropdown-item mt-2" href="#">由高到低</a>
                                                      <a class="dropdown-item mt-2" href="#">由低到高</a>
                                                     </div>
                                                     </div>
                                                </th>
                                                <th class="d-none d-md-table-cell media">月限額
                                                  <div class="dropdown d-inline-block pb_1">
                                                     <button class="pt-1 btn  dropdown-toggle" type="button" id="MonthlyPayment" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-display="static">
                                                     </button>
                                                     <div class="dropdown-menu" aria-labelledby="MonthlyPayment">
                                                      <a class="dropdown-item mt-2" href="#">由高到低</a>
                                                      <a class="dropdown-item mt-2" href="#">由低到高</a>
                                                     </div>
                                                     </div>
                                                </th>
                                             
                                                <th></th>
                                            </tr>
                                        </thead>
                                        <!-- 表頭 end -->
                                        <!-- 表格 Start -->
                                        <tbody class="order_list_line_height">


                                          <tr>
                                                <td class="mr-1">
                                                    <label class="control outlined control-checkbox checkbox-success ml-8  ">
                                                        <input type="checkbox" />
                                                        <div class="control-indicator"></div>
                                                    </label>
                                                </td>

                                                <td  > 
                                                    <span><p> asd-5a324488gg211 </p></span> 
                                                   
                                                </td>

                                                <td class="d-none d-md-table-cell">
                                                      <p>測試帳號</p>

                                                </td>
                                                <td class="d-none d-md-table-cell">
                                                      <p><span>360</span><span>/3,000</span> </p> 
                                                </td>
                                                <td class="d-none d-md-table-cell">
                                                    <p><span>3,600</span><span>/30,000</span> </p> 
                                                </td>

                                                <td class="d-none d-md-table-cell">
                                                    <p><span>-</span><span>/未設定</span> </p> 
                                                </td>
                                         
                                                <td class="text-right ">
                                                    <div class="dropdown show d-inline-block widget-dropdown ml-8">
                                                        <a class="dropdown-toggle icon-burger-mini" href="" role="button" id="dropdown-recent-order1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-display="static"></a>
                                                        <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdown-recent-order1">
                                                            <li class="dropdown-item">
                                                                <a href="#">查看詳細</a>
                                                            </li>
                                                            <li class="dropdown-item">
                                                                <a href="#">編輯資料</a>
                                                            </li>
                                                            <hr>
                                                            <li class="dropdown-item">
                                                                <a href="#">刪除</a>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </td>
                                            </tr> 
                                             

                                             

                                        </tbody>
                                    </table>
                                    <div class="mb-4"></div>

                                </div>
                                <nav aria-label="Page navigation example" class="bottom_48 pt-24">
                                        <ul class="pagination pagination-seperated">
                                          
                                          <li class="page-item">
                                            <a class="page-link" href="#" aria-label="Previous">
                                              <span aria-hidden="true" class="mdi mdi-chevron-left mr-1"></span>Prev 10
                                              <span class="sr-only">Previous</span>
                                            </a>
                                          </li>
                                          <li class="page-item active">
                                            <a class="page-link" href="#">21</a>
                                          </li>
                                          <li class="page-item">
                                            <a class="page-link" href="#">22</a>
                                          </li>
                                          <li class="page-item">
                                            <a class="page-link" href="#">23</a>
                                          </li>
                                          <li class="page-item">
                                            <a class="page-link" href="#">24</a>
                                          </li>
                                                                    
                                          <li class="page-item">
                                            <a class="page-link" href="#" aria-label="Next">
                                              Next 10
                                              <span aria-hidden="true" class="mdi mdi-chevron-right ml-1"></span>
                                              <span class="sr-only">Next</span>
                                            </a>
                                          </li>
                                        </ul>
                                    </nav>
                              </div>
                              
                              <!-- TAB_1 結束 -->
                              <!-- TAB_2 開始 -->
 	<div class="tab-pane  fade  " id="tab_2" role="tabpanel" aria-labelledby="tab_2-tab">
 		<nav class="navbar bg-primary navbar-static-top navbar-expand-lg list_tooll_bar zztop mt_24" >              
              <div class="search-form " >
                   
                   <div class="dropdown d-inline-block  mb-1">
                        
                        <button class="text-white pl-16 btn btn-sm btn-success mt-2" type="button"  >
                        <span><h6>全選</h6></span>
                        </button>
                        
                        <div class="dropdown d-inline-block mb-1 " >
                        <button class="pt-1 btn text-white  dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-display="static">
                          
                        </button>
                        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">

                          
                          <a class="dropdown-item dis mt-2 pb-2 no_click" href="#">加入群組</a>                          
                        </div>

                      </div>
                      </div>

              </div>

              <div>
                 <span class="mr-3 text-white ">234 筆結果</span>             
                
              </div>
            </nav>
            <div class="card   px-2 pt-16 " >
                                    <table class="mb-16 table-responsive table-responsive-largetable-dark w_100 mt_16"  >
                                      <!-- 表頭 Start -->
                                        <thead  >
                                            <tr >
                                                <th class="d-none d-md-table-cell"></th>
                                                <th class="d-none d-md-table-cell media" > 平台自訂ID
                                                  <div class="dropdown d-inline-block  pb_1">
                                                     <button class="pt-1 btn  dropdown-toggle" type="button" id="PlatfromId" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-display="static">
                                                     </button>
                                                     <div class="dropdown-menu" aria-labelledby="PlatfromId">
                                                      <a class="dropdown-item mt-2" href="#">順排序</a>
                                                      <a class="dropdown-item mt-2" href="#">逆排序</a>
                                                     </div>
                                                     </div>
                                                 </th>
                                                <th class="d-none d-md-table-cell "><h6 class="text-dark mb-2"> 收款帳戶</h6></th>

                                                <th class="d-none d-md-table-cell">日限額
                                                  <div class="dropdown d-inline-block pb_1">
                                                     <button class="pt-1 btn  dropdown-toggle" type="button" id="DailyPayment" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-display="static">
                                                     </button>
                                                     <div class="dropdown-menu" aria-labelledby="DailyPayment">
                                                      <a class="dropdown-item mt-2" href="#">由高到低</a>
                                                      <a class="dropdown-item mt-2" href="#">由低到高</a>
                                                     </div>
                                                     </div>
                                                </th>
                                                <th class="d-none d-md-table-cell media">週限額
                                                  <div class="dropdown d-inline-block pb_1">
                                                     <button class="pt-1 btn  dropdown-toggle" type="button" id="WeeklyPayment" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-display="static">
                                                     </button>
                                                     <div class="dropdown-menu" aria-labelledby="WeeklyPayment">
                                                      <a class="dropdown-item mt-2" href="#">由高到低</a>
                                                      <a class="dropdown-item mt-2" href="#">由低到高</a>
                                                     </div>
                                                     </div>
                                                </th>
                                                <th class="d-none d-md-table-cell media">月限額
                                                  <div class="dropdown d-inline-block pb_1">
                                                     <button class="pt-1 btn  dropdown-toggle" type="button" id="MonthlyPayment" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-display="static">
                                                     </button>
                                                     <div class="dropdown-menu" aria-labelledby="MonthlyPayment">
                                                      <a class="dropdown-item mt-2" href="#">由高到低</a>
                                                      <a class="dropdown-item mt-2" href="#">由低到高</a>
                                                     </div>
                                                     </div>
                                                </th>
                                             
                                                <th></th>
                                            </tr>
                                        </thead>
                                        <!-- 表頭 end -->
                                        <!-- 表格 Start -->
                                        <tbody class="order_list_line_height">


                                          <tr>
                                                <td class="mr-1">
                                                    <label class="control outlined control-checkbox checkbox-success ml-8  ">
                                                        <input type="checkbox" />
                                                        <div class="control-indicator"></div>
                                                    </label>
                                                </td>

                                                <td  > 
                                                    <span><p> asd-5a324488gg211 </p></span> 
                                                   
                                                </td>

                                                <td class="d-none d-md-table-cell">
                                                      <p>測試帳號</p>

                                                </td>
                                                <td class="d-none d-md-table-cell">
                                                      <p><span>360</span><span>/3,000</span> </p> 
                                                </td>
                                                <td class="d-none d-md-table-cell">
                                                    <p><span>3,600</span><span>/30,000</span> </p> 
                                                </td>

                                                <td class="d-none d-md-table-cell">
                                                    <p><span>-</span><span>/未設定</span> </p> 
                                                </td>
                                         
                                                <td class="text-right ">
                                                    <div class="dropdown show d-inline-block widget-dropdown ml-8">
                                                        <a class="dropdown-toggle icon-burger-mini" href="" role="button" id="dropdown-recent-order1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-display="static"></a>
                                                        <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdown-recent-order1">
                                                            <li class="dropdown-item">
                                                                <a href="#">查看詳細</a>
                                                            </li>
                                                            <li class="dropdown-item">
                                                                <a href="#">編輯資料</a>
                                                            </li>
                                                            <hr>
                                                            <li class="dropdown-item">
                                                                <a href="#">刪除</a>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </td>
                                            </tr> 
                                             

                                             

                                        </tbody>
                                    </table>
                                    <div class="mb-4"></div>

                                </div>
                                <nav aria-label="Page navigation example" class="bottom_48 pt-24">
                                        <ul class="pagination pagination-seperated">
                                          
                                          <li class="page-item">
                                            <a class="page-link" href="#" aria-label="Previous">
                                              <span aria-hidden="true" class="mdi mdi-chevron-left mr-1"></span>Prev 10
                                              <span class="sr-only">Previous</span>
                                            </a>
                                          </li>
                                          <li class="page-item active">
                                            <a class="page-link" href="#">21</a>
                                          </li>
                                          <li class="page-item">
                                            <a class="page-link" href="#">22</a>
                                          </li>
                                          <li class="page-item">
                                            <a class="page-link" href="#">23</a>
                                          </li>
                                          <li class="page-item">
                                            <a class="page-link" href="#">24</a>
                                          </li>
                                                                    
                                          <li class="page-item">
                                            <a class="page-link" href="#" aria-label="Next">
                                              Next 10
                                              <span aria-hidden="true" class="mdi mdi-chevron-right ml-1"></span>
                                              <span class="sr-only">Next</span>
                                            </a>
                                          </li>
                                        </ul>
                                    </nav>
                              </div>
                              
                              <!-- TAB_2 結束 -->
                          </div> 

                              </div> 
                              </div> 
                            </div>

     
 

                    <!--內容 end-->
                    <!--右側NAV Start -->
      <div class="right-sidebar">
              <div class="btn-right-sidebar-toggler">
                <i class="mdi mdi-chevron-left"></i>
              </div>
              <!-- Nav Right btn Start -->
              <div class="right-nav-container">
                <ul class="nav nav-right-sidebar">
                  <li class="nav-item"  data-placement="left" data-toggle="tooltip" title="重新整理" >
                    <a class="text-primary icon-sm" href="#">
                      <i class="mdi mdi-24px mdi-refresh"></i>                
                    </a>
                  </li>

                  <li class="nav-item"  data-placement="left" data-toggle="tooltip" title="新增群組">
                     <a class=" text-primary icon-sm" href="#">
                      <i class="mdi mdi-24px mdi-home-plus"></i>                     
                    </a>
                  </li>
                  <li class="nav-item" data-placement="left" data-toggle="tooltip" title="新增收款用戶">
                     <a class=" text-primary icon-sm" href="#">
                      <i class="mdi mdi-24px mdi-account-plus"></i>                     
                    </a>
                  </li>
                </ul>
              </div>
              <!-- Nav Right btn end -->

              <!-- Nav Right Sidebar Tab Content -->
             
            </div>
            <!--右側NAV end -->
 <!--右側NAV-->
                        </div>

@endsection