@extends('layouts.contentLayoutMaster')
{{-- title --}}
@section('title','Settlement List')

{{-- vendor style --}}
@section('vendor-styles')
<link rel="stylesheet" type="text/css" href="{{asset('vendors/css/tables/datatable/datatables.min.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('vendors/css/charts/apexcharts.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('vendors/css/pickers/daterange/daterangepicker.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('vendors/css/pickers/pickadate/pickadate.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('vendors/css/forms/select/select2.min.css')}}">
@endsection
@section('content')
<section id="multiple-column-form">
  <div class="row match-height">
    <div class="col-12">
      <div class="card">
        <div class="card-header">
          <h4 class="card-title">選擇條件</h4>
        </div>
        <div class="card-content">
          <div class="card-body">
            <form class="form" method="GET">
              <div class="form-body">
                <div class="row">
				@if(Auth::guard('admin')->check())
                  <div class="col-md-2 col-12">
				  @elseif(Auth::guard('shareHolder')->check())
                  <div class="col-md-3 col-12">
				  @elseif(Auth::guard('generalAgent')->check())
                  <div class="col-md-4 col-12">
				  @elseif(Auth::guard('agent')->check())
                  <div class="col-md-6 col-12">
				  @endif
                    <div class="form-label-group">
					  <span>日期</span>
					  <fieldset class="form-group position-relative has-icon-left">
						<input type="text" id="select_daterange" class="form-control openRight" name="date">
						<div class="form-control-position">
							<i class='bx bx-calendar-check'></i>
						</div>
					  </fieldset>
                    </div>
                  </div>
				  @if(Auth::guard('admin')->check())
				  <div class="col-md-2 col-12">
					<div class="form-group">
					  <span>股東</span>
					  <select class="select2 form-control" id="shareHolder" name="shareholder">
					  </select>
					</div>
				  </div>
				  <div class="col-md-2 col-12">
					<div class="form-group">
					  <span>總代理</span>
					  <select class="select2 form-control" id="generalAgent" name="generalagent">
					  </select>
					</div>
				  </div>
				  <div class="col-md-2 col-12">
					<div class="form-group">
					  <span>代理</span>
					  <select class="select2 form-control" id="agent" name="agent">
					  </select>
					</div>
				  </div>
				  @elseif(Auth::guard('shareHolder')->check())
				  <div class="col-md-2 col-12">
					<div class="form-group">
					  <span>股東</span>
					  <select class="select2 form-control" id="shareHolder" name="shareholder">
					  </select>
					</div>
				  </div>
				  <div class="col-md-2 col-12">
					<div class="form-group">
					  <span>總代理</span>
					  <select class="select2 form-control" id="generalAgent" name="generalagent">
					  </select>
					</div>
				  </div>
				  <div class="col-md-2 col-12">
					<div class="form-group">
					  <span>代理</span>
					  <select class="select2 form-control" id="agent" name="agent">
					  </select>
					</div>
				  </div>
				  @elseif(Auth::guard('generalAgent')->check())
				  <div class="col-md-4 col-12">
					<div class="form-group">
					  <span>代理</span>
					  <select class="select2 form-control" id="agent" name="agent">
					  </select>
					</div>
				  </div>
				  @elseif(Auth::guard('agent')->check())
				  @endif
                  <div class="col-3 d-flex justify-content-end">
                    <button id="btnSubmit" type="button" class="btn btn-primary mr-1 mb-1">查詢</button>
                  </div>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<section id="dashboard-ecommerce">
    <div class="row">
	  <div class="col-xl-12 col-12 dashboard-users">
        <div class="row  ">
          <!-- Statistics Cards Starts -->
          <div class="col-12">
            <div class="row">
              <div class="col-sm-3 col-12 dashboard-users-success">
                <div class="card text-center">
                  <div class="card-content">
                    <div class="card-body py-1">
                      <div class="badge-circle badge-circle-lg badge-circle-light-success mx-auto mb-50">
                        <i class="bx bxs-cart font-medium-5"></i>
                      </div>
                      <div class="text-muted line-ellipsis">有效押注</div>
                      <h3 class="mb-0" id="contribute">N/A</h3>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-sm-3 col-12 dashboard-users-danger">
                <div class="card text-center">
                  <div class="card-content">
                    <div class="card-body py-1">
                      <div class="badge-circle badge-circle-lg badge-circle-light-info mx-auto mb-50">
                        <i class="bx bx-add-to-queue font-medium-5"></i>
                      </div>
                      <div class="text-muted line-ellipsis">流水分潤</div>
                      <h3 class="mb-0" id="flow">N/A</h3>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-sm-3 col-12 dashboard-users-danger">
                <div class="card text-center">
                  <div class="card-content">
                    <div class="card-body py-1">
                      <div class="badge-circle badge-circle-lg badge-circle-light-danger mx-auto mb-50">
                        <i class="bx bxs-minus-circle font-medium-5"></i>
                      </div>
                      <div class="text-muted line-ellipsis">下層結算</div>
                      <h3 class="mb-0" id="lower_settlement">N/A</h3>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-sm-3 col-12 dashboard-users-danger">
                <div class="card text-center">
                  <div class="card-content">
                    <div class="card-body py-1">
                      <div class="badge-circle badge-circle-lg badge-circle-light-danger mx-auto mb-50">
                        <i class="bx bxs-minus-circle font-medium-5"></i>
                      </div>
                      <div class="text-muted line-ellipsis">上層結算</div>
                      <h3 class="mb-0" id="upper_settlement">N/A</h3>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- Revenue Growth Chart Starts -->
        </div>
      </div>
    </div>
 </section>
<section id="column-selectors">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">結算列表</h4>
                </div>
                <div class="card-content">
                    <div class="card-body card-dashboard">
                        <div class="table-responsive">
                            <table class="table table-striped dataex-html5-selectors">
                                
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection

{{-- vendor scripts --}}
@section('vendor-scripts')
<script src="{{asset('vendors/js/tables/datatable/datatables.min.js')}}"></script>
<script src="{{asset('vendors/js/tables/datatable/datatables.checkboxes.min.js')}}"></script>
<script src="{{asset('vendors/js/charts/apexcharts.min.js')}}"></script>
<script src="{{asset('vendors/js/pickers/daterange/moment.min.js')}}"></script>
<script src="{{asset('vendors/js/pickers/daterange/daterangepicker.js')}}"></script>
<script src="{{asset('vendors/js/pickers/pickadate/picker.js')}}"></script>
<script src="{{asset('vendors/js/pickers/pickadate/picker.date.js')}}"></script>
<script src="{{asset('vendors/js/pickers/pickadate/picker.time.js')}}"></script>
<script src="{{asset('vendors/js/pickers/pickadate/legacy.js')}}"></script>
<script src="{{asset('vendors/js/forms/select/select2.full.min.js')}}"></script>
@endsection

{{-- page scripts --}}
@section('page-scripts')
{{-- <script src="{{asset('js/scripts/pages/table-extended.js')}}"></script> --}}
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@9.8.2/dist/sweetalert2.all.min.js"></script>
<script src="{{asset('js/scripts/pickers/dateTime/pick-a-datetime.js')}}"></script>  
<script src="{{asset('js/scripts/forms/select/form-select2.js')}}"></script>
<link href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css" rel="stylesheet" type="text/css" />
<link href="https://cdn.datatables.net/buttons/1.6.1/css/buttons.bootstrap4.min.css" rel="stylesheet" type="text/css" />

<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.1/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.1/js/buttons.bootstrap4.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.1/js/buttons.colVis.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.1/js/buttons.print.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.1/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.1/js/buttons.flash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.62/vfs_fonts.js"></script>
<script>
$( document ).ready(function() {
	shareHolder();
    $("#shareHolder").change(function(){
        generalAgent();
    });

    $("#generalAgent").change(function(){
        agent();
    });
	$("#btnSubmit").click(function(){
        search();
    });
	search();
	
});
	function shareHolder(){
		$("#shareHolder").append($("<option></option>").attr("value",0).text("所有"));
		$.ajax({
		  method: "GET",
		  url: "{{ route('ajax.sLists') }}",
		  dataType:"json"
		})
		.done(function( msg ) {
			for(var i in msg){
				$("#shareHolder").append($("<option></option>").attr("value",msg[i].shareHolderId).text(msg[i].account));
			}
		});
		generalAgent();
		agent();
	}

	function generalAgent(){
		$("#generalAgent option").remove();
		$("#generalAgent").append($("<option></option>").attr("value",0).text("所有"));
		var shareholder_id=$("#shareHolder").val();
		$.ajax({
		  method: "GET",
		  url: "{{ route('ajax.gaLists') }}",
		  dataType:"json",
		  data:{
			  id: shareholder_id
		  }
		})
		.done(function( msg ) {
			for(var i in msg){
				$("#generalAgent").append($("<option></option>").attr("value",msg[i].generalAgentId).text(msg[i].account));
			}
		});
	}

	function agent(){
		$("#agent option").remove();
		var generalAgent_id=$("#generalAgent").val();
		$("#agent").append($("<option></option>").attr("value",0).text("所有"));
		$.ajax({
		  method: "GET",
		  url: "{{ route('ajax.aLists') }}",
		  dataType:"json",
		  data:{
			  id: generalAgent_id
		  }
		})
		.done(function( msg ) {
			for(var i in msg){
				$("#agent").append($("<option></option>").attr("value",msg[i].agentId).text(msg[i].account));
			}
		});
	}
	function search(){
		$.ajax({
		  method: "GET",
		  url:"{{ route('ajax.sList')}}",
		  dataType:"json",
		  data:{
			  agentId:$('#agent').val(),
              generalAgentId:$('#generalAgent').val(),
              shareHolderId:$('#shareHolder').val(),
			  startDate:$('#select_daterange').val().split("-")[0],
			  endDate:$('#select_daterange').val().split("-")[1]
		  }
		})
		.done(function( msg ) {
			console.log( msg );
			search_data=msg.dataList;
			
			$("#contribute").html(msg.contribute);
			$("#flow").html(msg.flow);
            $("#upper_settlement").html(msg.upper_settlement);
			$("#lower_settlement").html(msg.lower_settlement);
			DataTableNet();
		});
	}
	function DataTableNet(){
		$.extend( $.fn.dataTable.defaults, {
			destroy: true,
			searching: true,
			ordering:  true
		} );
		$('.dataex-html5-selectors').DataTable({
			data: search_data,
			dom: 'Bfrtip',
		buttons: [
			{
				extend: 'print',
				text: "列印",
				key: 'p',
				exportOptions: {
                    columns: ':visible'
                },
				action: function ( e, dt, node, config ) {
					$.fn.dataTable.ext.buttons.print.action.call(this, e, dt, node, config);
				}
			},
            {
                extend: 'excelHtml5',
				text: '匯出',
				key:{
					key: 'e',
					metakey: true,
					altkey: true
				},
                exportOptions: {
                    columns: ':visible'
                },
				action: function ( e, dt, node, config ) {
					$.fn.dataTable.ext.buttons.excelHtml5.action.call(this, e, dt, node, config);
				}
            },
            {
				extend: 'colvis',
				text: "隱藏欄位"
			},
			'pageLength'
        ],
			lengthMenu: [5, 10, 25, 50],
			pageLength: 10,
			paging: true,
			pagingType: "full_numbers",
			language: {
				search: "搜尋:",
				info: "顯示 _TOTAL_ 的 _START_ 到 _END_ 行 結果",
				buttons: {
					pageLength: {
						_: "顯示 %d 行"
					}
				},
				paginate: {
				first:    '«',
				previous: '‹',
				next:     '›',
				last:     '»'
				},
				aria: {
					paginate: {
						first:    'First',
						previous: 'Previous',
						next:     'Next',
						last:     'Last'
					}
				}
			},
			columns: [
				{
					title: "帳號",
					data: "account"
				},
				{
					title: "名稱",
					data: "name"
				},
                {
					title: "下注總額",
					data: "bet"
				},
				{
					title: "上莊費用",
					data: "fee"
				},
				{
					title: "總流水",
					data: "flow"
				}
                ,
				{
					title: "個別流水",
					data: "to_flow"
				},
				{
					title: "打賞",
					data: "tip"
				}
                ,
				{
					title: "總輸贏",
					data: "win"
				}
                ,
				{
					title: "有效押注",
					data: "contribute"
				},
				{
					title: "結算",
					data: "result"
				}
			
			],
			"order": [[ 0, "desc" ]]
		});
		var table = $('.dataex-html5-selectors').DataTable();
		$('.dataex-html5-selectors tbody').on( 'click', 'a.history-delete', function () {
			Swal.fire({
			  title: "確認要刪除?",
			  text: "您將無法復原!",
			  icon: 'warning',
			  showCancelButton: true,
			  confirmButtonColor: '#3085d6',
			  cancelButtonColor: '#d33',
			  cancelButtonText: "取消",
			  confirmButtonText: "刪除!"
			}).then((result) => {
			  if (result.value) {
				var customer_data = table.row( $(this).parents('tr') ).data();
				$.ajax({
					method: 'GET',
					url: "{{ route('ajax.hDel')}}",
					dataType: 'json',
					data: {
						id: customer_data['id']
					}
				}).done(function(msg){
					table.ajax.reload();
				});
				Swal.fire({
				  title: "刪除!",
				  text: "確認刪除此筆資料.",
				  confirmButtonText: "完成",
				  type: "success"
				})
			  }
			});
		});
	}
</script>
@endsection