@extends('layouts.contentLayoutMaster')
{{-- title --}}
@section('title','History 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">
                  <div class="col-md-2 col-12">
                    <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>
				  <div class="col-md-2 col-12">
					<div class="form-group">
					  <span>場次</span>
					  <select class="select2 form-control" id="gameId" name="gameId">
					    <option value="">請選擇</option>
						@foreach($hObj as $h)
						<option value="{{ $h->gameId }}">{{ $h->session }}</option>
						@endforeach
					  </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">
					    <option value="">請選擇</option>
						@foreach($aObj as $a)
						<option value="{{ $a->agentId }}">{{ $a->account }}</option>
						@endforeach
					  </select>
					</div>
				  </div>
				  <div class="col-md-2 col-12">
					<div class="form-group">
					  <span>會員</span>
					  <select class="select2 form-control" id="member" name="member">
					    <option value="">請選擇</option>
						@foreach($mObj as $m)
						<option value="{{ $m->memberId }}">{{ $m->account }}</option>
						@endforeach
					  </select>
					</div>
				  </div>
                  <div class="col-4 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="bet">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="win">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="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="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() {
	$("#btnSubmit").click(function(){
        search();
    });
	search();
	
});
	function search(){
		$.ajax({
		  method: "GET",
		  url:"{{ route('ajax.bhList')}}",
		  dataType:"json",
		  data:{
			  mId:$('#member').val(),
			  gameId:$('#gameId').val(),
			  agentId:$('#agent').val(),
			  startDate:$('#select_daterange').val().split("-")[0],
			  endDate:$('#select_daterange').val().split("-")[1]
		  }
		})
		.done(function( msg ) {
			search_data=msg.result;
			$("#win").html(msg.win);
			$("#bet").html(msg.bet);
			$("#flow").html(msg.flow);
			$("#settlement").html(msg.settlement_result);
			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",
			columns: [
					{
						title: "下單編號",
						data: "betId"
					},
					{
						title: "場次",
						data: "session"
					},
					{
						title: "下注時間",
						data: "created_at"
					},
					{
						title: "帳號",
						data: "account"
					},
					{
						title: "姓名",
						data: "name"
					},
					{
						title: "遊戲類型",
						data: "game_type"
					},
					/*
					{
						title: "結果",
						data: "result"
					},*/
					{
						title: "下單對象",
						data: "betOn"
					},
					{
						title: "下注金額",
						data: "bet"
					},
					{
						title: "派彩",
						data: "win"
					},
					{
						title: "流水",
						data: 'flow'
					},
					{
						title: "狀態",
						data: "status"
					}
				],
				"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();
					console.log(customer_data);
					$.ajax({
						method: 'GET',
						url: "{{ route('ajax.hDel')}}",
						dataType: 'json',
						data: {
							id: customer_data['id']
						}
					}).done(function(msg){
						console.log(msg)
						table.ajax.reload();
					});
					Swal.fire({
					  title: "刪除!",
					  text: "確認刪除此筆資料.",
					  confirmButtonText: "完成",
					  type: "success"
					})
				  }
				});
			});
	}
</script>
@endsection