@extends('layouts.page')

@section('title', '付款紀錄')

@section('script')

<script>

var current_data;
var current_page;

$(document).ready(function() {
	sendFilter(1);
	storeSelect();
	storeGroupSelect();
} );

function storeSelect(){
	$.ajax({
	  url: '/ajax/store/list',
	  method:'post',
	  dataType: 'json',
	  data: {} 
	}).done(function(result) {
		$( "#sel_store_id" ).html("<option value=''>--不限--</option>");
		for(var i in result.data){
			sel='<option value="'+result.data[i].id+'">'+result.data[i].name+'</option>';
			$( "#sel_store_id" ).append( sel );
		}
	});
}

function storeGroupSelect(){
	$.ajax({
	  url: '/ajax/storeGroup/list',
	  method:'post',
	  dataType: 'json',
	  data: {} 
	}).done(function(result) {
		$( "#sel_group_id" ).html("<option value=''>--不限--</option>");
		for(var i in result.data){
			sel='<option value="'+result.data[i].id+'">'+result.data[i].name+'</option>';
			$( "#sel_group_id" ).append( sel );
		}
	});
}


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_name+'</p></span> ';
	tr+='</td>';
	tr+='<td class="d-none d-md-table-cell">';
	tr+='<p>'+obj.store_name+'</p>';
	tr+='</td>';
	tr+='<td class="d-none d-md-table-cell">';
	tr+='	  <p><span>'+obj.id+'</span></p> ';
	tr+='</td>';
	tr+='<td class="d-none d-md-table-cell">';
	tr+='	<p> <span>'+obj.amount+'</span> </p> ';
	tr+='</td>';
	tr+='<td class="d-none d-md-table-cell">';
	tr+='	<p><span>'+obj.channel+'</span> </p> ';
	tr+='</td>';
	tr+='<td class="d-none d-md-table-cell">';
	tr+='	<p><span>'+obj.subject+'</span> </p> ';
	tr+='</td>';
	tr+='<td class="d-none d-md-table-cell">';
	tr+='  <p class="  "><span>'+obj.time+'</span> </p>';
	tr+='</td>';
	tr+='<td class="text-right ">';
	tr+='	<div class="dropdown show d-inline-block widget-dropdown ml-8">';
	tr+='		<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>';
	tr+='		<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdown-recent-order1">';
	tr+='			<li class="dropdown-item">';
	tr+='				<a href="#">退款</a>';
	tr+='			</li>';
	tr+='		</ul>';
	tr+='	</div>';
	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;
	filterData.group_id=$("#sel_group_id").val();
	filterData.store_id=$("#sel_store_id").val();
	filterData.limit=$("#pageLimit").val();
	$.ajax({
	  url: '/ajax/payLog/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);
		$( "#payLogTbody" ).html( "" );
	  for(var i in result.data){
		tr=dataToTr(result.data[i])
		$( "#payLogTbody" ).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 " >
									
									<form>
										<div class="row">

											<div class="col-sm-4">
												<div class="form-group">
													<label for="sel_group_id">群組</label>
													<select id="sel_group_id" name="sel_group_id" class="form-control">
			
													</select>
												</div>
											</div>
											<div class="col-sm-4">
												<div class="form-group">
													<label for="sel_store_id">商店</label>
													<select id="sel_store_id" name="sel_store_id" class="form-control">
													
													</select>
												</div>
											</div>
											<div class="col-sm-4">
												<div class="form-group">
													<label for="pageLimit">每頁數目</label>
													<select id="pageLimit" name="pageLimit" class="form-control">
														<option>10</option>
														<option>50</option>
														<option>100</option>
													</select>
												</div>
											</div>
											<div class="col-sm-6">
												<div class="form-group">
													<label for="text_timeStart">起始時間</label>
													<input id="text_timeStart" name="text_timeStart" class="form-control">
													
												</div>
											</div>
											<div class="col-sm-6">
												<div class="form-group">
													<label for="text_timeEnd">結束時間</label>
													<input id="text_timeEnd" name="text_timeEnd" class="form-control">
													
												</div>
											</div>
										</div>
										<div class=" ">
											<button type="submit" class="btn btn-primary btn-default" onClick="return sendFilter(1)">篩選</button>
										</div>
									</form>
								
                                    <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">群組名稱
                                                  <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">金流編號</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 class="d-none d-md-table-cell">交易時間</th>
                                                
                                                <th></th>
                                            </tr>
                                        </thead>
                                        <!-- 表頭 end -->

                                        <!-- 表格 Start -->
                                        <tbody id="payLogTbody" 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