@extends('layouts.contentLayoutMaster')
{{-- title --}}
@section('title','會員 列表')

{{-- vendor style --}}
@section('vendor-styles')
<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" />
@endsection
@section('content')

<!-- Column selectors with Export Options and print table -->
<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>
<!-- Column selectors with Export Options and print table -->

@endsection

{{-- vendor scripts --}}
@section('vendor-scripts')
<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>
@endsection

{{-- page scripts --}}
@section('page-scripts')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@9.8.2/dist/sweetalert2.all.min.js"></script>
<script>
$( document ).ready(function() {
	$('.dataex-html5-selectors').DataTable({
		ajax: {
			url: '{{ route('ajax.mList')}}',
			dataSrc: ''
		},
		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,
		destroy:true,
		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: "ID",
					data: "memberId"
				},
				{
					title: "帳號",
					data: "account"
				},
				{
					title: "姓名",
					data: "name"
				},
				{
					title: "額度",
					data: "quota"
				},
				{
					title: "剩餘額度",
					data: "remaining"
				},
				{
					title: "代理",
					data: "A_name"
				}
			],
		'columnDefs': [
		{
			'targets': 6,
			'title': "操作",
			'render': function (data, type, row, meta) {
			  return "<div class='dropdown'>"+
					"<span class='bx bx-dots-vertical-rounded font-medium-3 dropdown-toggle nav-hide-arrow cursor-pointer' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false' role='menu'></span>"+
					"<div class='dropdown-menu dropdown-menu-right'>"+"<a class='dropdown-item' href='{{ url('/') }}/member/"+row.memberId+"/edit'><i class='bx bx-edit-alt mr-1'></i> 編輯</a>"+"<a class='dropdown-item member-delete' href='#'><i class='bx bx-trash mr-1'></i> 刪除</a>"+"</div>"+"</div>";}
			}
		]
	});
	var table = $('.dataex-html5-selectors').DataTable();
	$('.dataex-html5-selectors tbody').on( 'click', 'a.member-delete', function () {
		Swal.fire({
		  title: "確認要刪除?",
		  text: "您將無法復原!",
		  icon: 'warning',
		  showCancelButton: true,
		  confirmButtonColor: '#3085d6',
		  cancelButtonColor: '#d33',
		  cancelButtonText: "取消",
		  confirmButtonText: "刪除!"
		}).then((result) => {
		  if (result.value) {
			var member_data = table.row( $(this).parents('tr') ).data();
			console.log(member_data);
			$.ajax({
				method: 'GET',
				url: '{{ route('ajax.mDel')}}',
				dataType: 'json',
				data: {
					id: member_data['memberId']
				}
			}).done(function(msg){
				console.log(msg)
				table.ajax.reload();
			});
			Swal.fire({
			  title: "刪除!",
			  text: "確認刪除此筆資料.",
			  confirmButtonText: "完成",
			  type: "success"
			})
		  }
		});
    });
});
</script>
@endsection