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

{{-- 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')}}">
@endsection
@section('content')
<section id="table-chechbox">
  <div class="card">
    <div class="table-responsive">
      <table id="ShareHolderId-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>
@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>
$( document ).ready(function() {
	$('#ShareHolderId-List').DataTable({
		ajax: {
			url: '{{ route('ajax.shList')}}',
			dataSrc: ''
		},
		"searching": false,
		"lengthChange": false,
		"paging": false,
		"bInfo": false,
		columns: [
				{
					title: "ID",
					data: "shareHolderId"
				},
				{
					title: "帳號",
					data: "account"
				},
				{
					title: "姓名",
					data: "name"
				},
				{
					title: "總額度",
					data: "quota"
				},
				{
					title: "剩餘額度",
					data: "remaining"
				}
			],
		'columnDefs': [
		{
			'targets': 5,
			'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('/') }}/shareholder/"+row.shareHolderId+"/edit'><i class='bx bx-edit-alt mr-1'></i> 編輯</a>"+"<a class='dropdown-item shareholder-delete' href='#'><i class='bx bx-trash mr-1'></i> 刪除</a>"+"</div>"+"</div>";}
			}
		]
	});
	var table = $('#ShareHolderId-List').DataTable();
	$('#ShareHolderId-List tbody').on( 'click', 'a.shareholder-delete', function () {
		Swal.fire({
		  title: "確認要刪除?",
		  text: "您將無法復原!",
		  icon: 'warning',
		  showCancelButton: true,
		  confirmButtonColor: '#3085d6',
		  cancelButtonColor: '#d33',
		  cancelButtonText: "取消",
		  confirmButtonText: "刪除!"
		}).then((result) => {
		  if (result.value) {
			var shareholder_data = table.row( $(this).parents('tr') ).data();
			$.ajax({
				method: 'GET',
				url: '{{ route('ajax.shDel')}}',
				dataType: 'json',
				data: {
					id: shareholder_data['shareHolderId']
				}
			}).done(function(msg){
				if(msg.success == true){
					Swal.fire({
					  title: "刪除!",
					  text: "確認刪除此筆資料.",
					  confirmButtonText: "完成",
					  type: "success"
					})
					table.ajax.reload();
				}else if(msg.success == false){
					Swal.fire({
					  icon: 'error',
					  title: '很抱歉...',
					  text: '您沒有權限刪除!'
					})
				}
			});
		  }
		});
    });
});
</script>
@endsection