@extends('layouts.page')

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

@section('script')

<script>

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

$(document).ready(function() {
	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 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><a href="{{ url("/storeGroup/") }}/'+obj.group_id+'"><p>'+obj.group_id+'</p></a></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 active" aria-current="page"><span>群組收款列表</span></li>
                            </ol>
                        </nav>
                    </div>
            <!-- 麵包屑 end -->
                    
 

<div class="card card-table-border-none  ">
	<!-- Tool bar Satrt -->
<nav class="navbar navbar-static-top navbar-expand-lg list_tooll_bar zztop" >              
              <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  ">3 筆結果</span>             
                 <div class="dropdown d-inline-block mb-1" >
                        <button class="btn btn-sm btn-outline-info 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  mt-2  "  href="javascript:toCSV('all')">全部</a>
                          <a class="dropdown-item mt-2"  href="javascript:toCSV('select')">選中紀錄</a>
                          <a class="dropdown-item"  href="javascript:toCSV('currentPage')">當前頁面</a>
                          <div class="mb-2"></div>
                          
                        </div>
                      </div>
              </div>
            </nav>
<!-- Tool bar end -->
                                <div class="card  px-4 pt-16 " >
                                    <table class="mb-16 table-responsive table-responsive-largetable-dark w_100"  >
                                    	<!-- 表頭 Start -->
                                        <thead  >
                                            <tr >
                                                <th class="d-none d-md-table-cell"></th>
                                                <th class="d-none d-md-table-cell">平台自訂ID
                                                  <div class="dropdown d-inline-block mb-1"> 
                                                  </div>
                                                 </th>
                                                <th class="d-none d-md-table-cell">收款帳戶名稱</th>
                                                <th class="d-none d-md-table-cell">日限額                                       <div class="dropdown d-inline-block mb-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">周限額 
                                                  <div class="dropdown d-inline-block mb-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">月限額 
                                                  <div class="dropdown d-inline-block mb-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">群組建立日期</th>
                                                <th class="d-none d-md-table-cell">上次更新</th>
                                                
                                                <th></th>
                                            </tr>
                                        </thead>
                                        <!-- 表頭 end -->

                                        <!-- 表格 Start -->
                                        <tbody id="tableBody" class="order_list_line_height">
                                        </tbody>
                                    </table>
                                    <div class="mb-4"></div>

                                </div>

                            </div>
                            <!--Pagienation Start -->
                    <nav id="tableNav" aria-label="Page navigation example" class="pb-48">

                    </nav>
                    <!--Pagienation end -->    
</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