@extends('layouts.master')

@section('content')
<div class="container">
	<div class="card card-custom gutter-b">
		<div class="card-header flex-wrap py-3">
			<div class="card-title">
				<h3 class="card-label">List of Wallet</h3>
			</div>
			<div class="card-toolbar">
				<!--begin::Button-->
                <div class="form-group row">
                    <button type="button" class="btn btn-success" data-toggle="modal" data-target="#addCredit">
                        <i class="flaticon-plus icon-lg"></i>
                        Add Credit
                    </button>
                    &nbsp;
                    <button type="button" class="btn btn-warning" data-toggle="modal" data-target="#deductCredit">
                        <i class="flaticon-plus icon-lg"></i>
                        Deduct Credit
                    </button>
                </div>
				<!--end::Button-->
			</div>
		</div>
		<div class="card-body">
			<!--begin: Datatable-->
			<table class="table table-bordered" id="wallet-table">
				<thead>
					<tr>
						<th>No.</th>
                        <th>Squad</th>
						<th>Email</th>
                        <th>Balance</th>
                        <th>Total Credit</th>
						<th>Actions</th>
					</tr>
				</thead>
				<tbody>
				</tbody>
			</table>
			<!--end: Datatable-->
		</div>
	</div>
</div>

<!--begin::Modal-->
@include('wallet.walletadd')
@include('wallet.walletdeduct')
@include('wallet.wallethistory')
<!--end::Modal-->

@endsection
@push('script')
<script type="text/javascript">
	var table = $('#wallet-table').DataTable({
        responsive: false,
        scrollX: true,
        lengthMenu: [10, 20, 50, 100],
        columns: [
            {
                "data": null,
                "orderable": false,
                "render": function (data, type, row, meta) {
                    return meta.row + meta.settings._iDisplayStart + 1;
                }
            },
            {
                "data": null,
                "render": function (data, type, row)  {
                    return '<span>'+row.user.name+'</span>';
                }
            },
            {
                "data": null,
                "render": function (data, type, row)  {
                    return '<span>'+row.user.email+'</span>';
                }
            },
            {
                "data": null,
                "render": function (data, type, row)  {
                    return '<span>RM '+row.current_amount+'</span>';
                }
            },
            {
                "data": null,
                "render": function (data, type, row)  {
                    return '<span>RM '+row.accumulative_amount+'</span>';
                }
            },
            {
                "data": null,
                "render": function (data, type, row)  {
                    return '<a href="#" title="View" class="btn btn-icon btn-circle btn-light-default btn-sm mr-2 wallet-history" data-id="'+row.user_id+'"><i class="far fa-eye icon-xl"></i></a>';
                }
            },
        ],

        ajax: {
            method : 'get',
            url: "{{ route('wallet.dt') }}",
            dataSrc:"data",
            dataType : "json"
        }
    }).on('click', 'a.wallet-history', function(e) {

        e.preventDefault();

        var id  = $(this).data('id');
        var url = "{{ route('wallet.history.data', ':id') }}";
        url     = url.replace(':id',id);

        $('#history-table').DataTable({
            responsive: false,
            scrollX: true,
            lengthMenu: [10, 20, 50, 100],
            bDestroy: true,
            columns: [
                {
                    "data": null,
                    "orderable": false,
                    "render": function (data, type, row, meta) {
                        return meta.row + meta.settings._iDisplayStart + 1;
                    }
                },
                {
                    "data": null,
                    "render": function (data, type, row)  {
                        return moment(row.created_at).format('DD/MM/YYYY');;
                    }
                },
                {
                    "data": null,
                    "render": function (data, type, row)  {
                        return '<span>'+row.details+'</span>';
                    }
                },
                {
                    "data": null,
                    "render": function (data, type, row)  {
                        return '<span>RM '+row.amount_in+'</span>';
                    }
                },
                {
                    "data": null,
                    "render": function (data, type, row)  {
                        return '<span>RM '+row.amount_out+'</span>';
                    }
                },
                {
                    "data": null,
                    "render": function (data, type, row)  {
                        return '<span>'+row.invoice+'</span>';
                    }
                }
            ],

            ajax: {
                method : 'get',
                url: url,
                dataSrc:"data",
                dataType : "json"
            }
        });

        $('#historyCredit').modal('show');
    });

    $(document).ready(function() {
        $('.add-credit').on('click', function () {
            addCredit();
        });

        $('.deduct-credit').on('click', function () {
            deductCredit();
        });

        $('#addCredit').on('hidden.bs.modal', function() {
            $('#addCredit form')[0].reset();
        });

        $('#username_add, #username_deduct').select2();

        $.ajax({
            url: "{{ route('user.all.list') }}",
            type: 'GET',
            success: function(data) {
                var val = data.data;
                $('#username_add').html('');
                $('#username_deduct').html('');
                html="";
                html+="<option value='' disabled selected>Please select user</option>";
                $.each(val, function(index, value){
                    html+="<option value='"+value.id+"'>"+value.name+"</option>";
                });

                $('#username_add').append(html);
                $('#username_deduct').append(html);
            }
        });  
    });

    function addCredit()
    {
        var username    = $('#username_add').val();
        var desc        = $('#description_add').val();
     	var amount      = $('#amount_add').val();
     	var _token 		= $("input[name='_token']").val();
        var url 		= "{{ route('wallet.add') }}";

        $.ajax({
            url: url,
            type: "POST",
            dataType: "json",
            data: {
                username    : username,
                desc        : desc,
                amount 	    : amount,
                _token      : _token
            },
            success: function(data) {
                if(data.status != 'success'){
                    var errors = data;
                    $.each(errors, function(index, sm){
                        toastr.error(sm, {timeOut: 5000});
                    });
                } else{
                	Swal.fire({
					  	title: "Success!",
					  	text: "Successfully Add Credit!",
					  	icon: "success",
					  	buttonsStyling: false,
					  	showConfirmButton: false,
        				timer: 3000
					 });
                    $('#addCredit').modal('hide');
                    $('#wallet-table').DataTable().ajax.reload(null, false);
                }
            }
        });
    }

    function deductCredit()
    {
        var username    = $('#username_deduct').val();
        var desc        = $('#description_deduct').val();
        var amount      = $('#amount_deduct').val();
        var _token      = $("input[name='_token']").val();
     	var url 		= "{{ route('wallet.deduct') }}";

        $.ajax({
            url: url,
            type: "POST",
            dataType: "json",
            data: {
                username    : username,
                desc        : desc,
                amount      : amount,
                _token      : _token
            },
            success: function(data) {
                if(data.status != 'success'){
                    var errors = data;
                    $.each(errors, function(index, sm){
                        toastr.error(sm, {timeOut: 5000});
                    });
                } else{
                	Swal.fire({
					  	title: "Success!",
					  	text: "Successfully Deduct Credit!",
					  	icon: "success",
					  	buttonsStyling: false,
					  	showConfirmButton: false,
        				timer: 3000
					 });
                    $('#deductCredit').modal('hide');
                    $('#wallet-table').DataTable().ajax.reload(null, false);
                }
            }
        });
    }
</script>
@endpush