@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-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="table-chechbox">
  <div class="card">
    <div class="table-responsive">
      <table id="History-List" class="table table-transparent">
      </table>
    </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>
<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(){
	$('#History-List').DataTable({
		data: search_data,
		"searching": false,
		"lengthChange": false,
		"paging": false,
		"bInfo": false,
		destroy:true,
		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 = $('#History-List').DataTable();
		$('#History-List 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