@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 Withdrawal Payment</h3>
			</div>
			<div class="card-toolbar">
			</div>
		</div>
		<div class="card-body">
			<!--begin: Datatable-->
			<table class="table table-bordered" id="cashout-payment-table">
				<thead>
					<tr>
                        <th></th>
						<th>No.</th>
                        <th>Squad</th>
                        <th>Amount</th>
                        <th>Payment Status</th>
                        <th>Payment Date/Time</th>
                        <th>Actions</th>
					</tr>
				</thead>
				<tbody>
				</tbody>
			</table>
			<!--end: Datatable-->
		</div>
	</div>
</div>

<!--begin::Modal-->
@include('wallet.cashout_payment.show')
<!--end::Modal-->

@endsection
@push('script')
<script type="text/javascript">
	var table = $('#cashout-payment-table').DataTable({
        responsive : false,
        scrollX : true,
        lengthMenu : [10, 20, 50, 100],
        columnDefs : [
            {
                orderable : false,
                className : 'select-checkbox',
                targets : 0
            },
        ],
        select: {
         'style': 'multi'
        },
        dom : '<"bulkupdate"><"exceldownload"><"filterstatus">frtlip',
        columns: [
            {
                "data": null,
                defaultContent: '',
                "orderable": false,

            },
            {
                "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>RM '+parseFloat(row.total_amount).toFixed(2)+'</span>';
                }
            },
            {
                "data": null,
                "render": function (data, type, row)  {
                    if(row.payment_status == 0)
                        return "<h5><span class='badge badge-primary'>{{ __('Waiting') }}</span></h5>";
                    else if(row.payment_status == 1)
                        return "<h5><span class='badge badge-warning'>{{ __('Processed') }}</span></h5>";
                    else
                        return "<h5><span class='badge badge-success'>{{ __('Paid') }}</span></h5>";
                }
            },
            {
                "data": null,
                "render": function (data, type, row)  {
                    if(row.payment_status == 2)
                        return moment(row.updated_at).format('DD/MM/YYYY HH:mm A');
                    else
                        return '-';
                }
            },
            {
                "data": null,
                "render": function (data, type, row)  {
                    if(row.payment_status == 0)
                    {
                        return '<a href="#" title="Process" class="btn btn-icon btn-circle btn-light-warning btn-sm mr-2 cashout-process" data-id="'+row.id+'"><i class="flaticon-refresh icon-xl"></i></a>';
                    }
                    else if(row.payment_status == 1)
                    {
                        return '<a href="#" title="View" class="btn btn-icon btn-circle btn-light-secondary btn-sm mr-2 show-bankdetail" data-userid="'+row.user_id+'" data-amount="'+row.total_amount+'" data-username="'+row.user.name+'"><i class="far fa-eye text-dark icon-xl"></i></a><a href="#" title="Transferred" class="btn btn-icon btn-circle btn-light-success btn-sm mr-2 cashout-paid" data-id="'+row.id+'"><i class="fas fa-dollar-sign icon-xl"></i></a>';
                    }
                    else
                    {
                        return '-';
                    }
                }
            },
        ],

        ajax: {
            method : 'get',
            url: "{{ route('cashout.payment.dt') }}",
            dataSrc:"data",
            dataType : "json",
            data: function(d){
                d.status = $('#status_filter').val();
            }
        }
    }).on('click', 'a.cashout-process', function(e) {

        e.preventDefault();

        var id      = $(this).data('id');
        var _token  = $("input[name='_token']").val();
        var url     = "{{ route('cashout.payment.update') }}";

        Swal.fire({
            title: "Are you sure?",
            text: "You won't be able to revert this!",
            icon: "warning",
            showCancelButton: true,
            confirmButtonText: "Yes, change to process!"
        }).then(function(result) {
            if (result.value) {
                $.ajax({
                    url: url,
                    type: "POST",
                    dataType: "json",
                    data: {
                        id      : id,
                        status  : 1,
                        _token  : _token
                    },
                    success: function(data) {
                        if(data.status != 'success'){
                            Swal.fire({
                                title: "Failed!",
                                text: data.message,
                                icon: "error",
                                buttonsStyling: false,
                                showConfirmButton: false,
                                timer: 3000
                            });
                        }
                        else{
                            Swal.fire({
                                title: "Success!",
                                text: "Payment in process!",
                                icon: "success",
                                buttonsStyling: false,
                                showConfirmButton: false,
                                timer: 3000
                            });
                            $('#cashout-payment-table').DataTable().ajax.reload(null, false);
                        }
                    }
                });
            }
        });
    }).on('click', 'a.cashout-paid', function(e) {

        e.preventDefault();

        var id      = $(this).data('id');
        var _token  = $("input[name='_token']").val();
        var url     = "{{ route('cashout.payment.update') }}";

        Swal.fire({
            title: "Are you sure?",
            text: "You won't be able to revert this!",
            icon: "warning",
            showCancelButton: true,
            confirmButtonText: "Yes!"
        }).then(function(result) {
            if (result.value) {
                $.ajax({
                    url: url,
                    type: "POST",
                    dataType: "json",
                    data: {
                        id      : id,
                        status  : 2,
                        _token  : _token
                    },
                    success: function(data) {
                        if(data.status != 'success'){
                            Swal.fire({
                                title: "Failed!",
                                text: data.message,
                                icon: "error",
                                buttonsStyling: false,
                                showConfirmButton: false,
                                timer: 3000
                            });
                        } 
                        else
                        {
                            Swal.fire({
                                title: "Success!",
                                text: "Payment successfully pay!",
                                icon: "success",
                                buttonsStyling: false,
                                showConfirmButton: false,
                                timer: 3000
                            });
                            $('#cashout-payment-table').DataTable().ajax.reload(null, false);
                        }
                    }
                });
            }
        });
    }).on('click', 'a.show-bankdetail', function(e) {
        e.preventDefault();

        var userid      = $(this).data('userid');
        var amount      = $(this).data('amount');
        var username    = $(this).data('username');
        var url         = "{{ route('cashout.user.bankdetail', ':userid') }}";
        url             = url.replace(':userid',userid);

        $.ajax({
            url: url,
            type: 'GET',
            success: function(data) {
                var val                 = data.data;
                var bank_account_name   = val.bank_account_name;
                var bank_account_num    = val.bank_account_num;
                var bank_name           = val.bank_name;

                document.getElementById('bank_account_name').innerHTML  = bank_account_name;
                document.getElementById('bank_account_num').innerHTML   = bank_account_num;
                document.getElementById('bank_name').innerHTML          = bank_name;
                document.getElementById('username').innerHTML           = username;
                document.getElementById('amount').innerHTML             = 'RM '+amount;
            }
        });

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

    $(document).ready(function() {
        $("div.bulkupdate").html('<a href="" class="btn btn-primary btn-sm" id="bulkupdate" style="float: left; margin-left: 10px;">'
                                    +'<i class="far fa-edit icon-md"></i> Bulk Update'
                                    +'</a>');

        $("div.exceldownload").html('<a href="" class="btn btn-info btn-sm" id="downloadbank" style="float: left; margin-left: 10px; margin-right: 10px;">'
                                    +'<i class="fas fa-file-download icon-md"></i> Download Bank Detail'
                                    +'</a>');

        $("div.filterstatus").html('<select class="" name="status" id="status_filter" style="width: 250px;" multiple="multiple">'
                                    +'<option value="0">Waiting</option>'
                                    +'<option value="1">Processed</option>'
                                    +'<option value="2">Paid</option>'
                                    +'</select>');

        $('#status_filter').select2({
            placeholder: "Search payment status",
            width: 'resolve'
        });

        $('#bulkupdate').on('click', function(e){
            e.preventDefault();

            var select = $('#cashout-payment-table').DataTable().rows({selected: true}).data().toArray();
            
            var selectArray = [];
            var selectStatusArray = [];

            $.each(select, function(index, data){
                selectArray.push(data.id);
                selectStatusArray.push(data.payment_status);
            });

            if(selectStatusArray.length <= 0)
            {
                Swal.fire({
                    title: "Warning!",
                    text: "Please select data!",
                    icon: "warning",
                    buttonsStyling: false,
                    showConfirmButton: false,
                    timer: 3000
                });

                return;
            }

            if(selectStatusArray.includes(2))
            {
                Swal.fire({
                    title: "Warning!",
                    text: "Cannot select payment status paid!",
                    icon: "warning",
                    buttonsStyling: false,
                    showConfirmButton: false,
                    timer: 3000
                });

                return;
            }

            const allEqual = arr => arr.every(v => v === arr[0]);
            if(allEqual(selectStatusArray))
            {
                if(selectStatusArray.includes(0))
                    var status = 1;
                else if(selectStatusArray.includes(1))
                    var status = 2;

                Swal.fire({
                    title: "Are you sure?",
                    text: "You won't be able to revert this!",
                    icon: "warning",
                    showCancelButton: true,
                    confirmButtonText: "Yes, update it!"
                }).then(function(result) {

                    var url     = "{{ route('cashout.payment.bulkupdate') }}";
                    var _token  = $("input[name='_token']").val();

                    if (result.value) {
                        $.ajax({
                            url: url,
                            type: "POST",
                            dataType: "json",
                            data: {
                                ids     : selectArray,
                                status  : status,
                                _token  : _token
                            },
                            success: function(data) {
                                if(data.status != 'success'){
                                    Swal.fire({
                                        title: "Failed!",
                                        text: data.message,
                                        icon: "error",
                                        buttonsStyling: false,
                                        showConfirmButton: false,
                                        timer: 3000
                                    });
                                }
                                else{
                                    Swal.fire({
                                        title: "Success!",
                                        text: "Successfully bulk update!",
                                        icon: "success",
                                        buttonsStyling: false,
                                        showConfirmButton: false,
                                        timer: 3000
                                    });
                                    $('#cashout-payment-table').DataTable().ajax.reload(null, false);
                                }
                            }
                        });
                    }
                });
            }
            else
            {
                Swal.fire({
                    title: "Warning!",
                    text: "Cannot select different payment status!",
                    icon: "warning",
                    buttonsStyling: false,
                    showConfirmButton: false,
                    timer: 3000
                });
                
                return;
            }
        });

        $('#status_filter').on('change', function(e){

            e.preventDefault();

            $('#cashout-payment-table').DataTable().ajax.reload(null, false);
        });

        $('#downloadbank').on('click', function(e){
            e.preventDefault();

            var url     = "{{ route('cashout.payment.downloadbank') }}";
            var _token  = $("input[name='_token']").val();

            var select = $('#cashout-payment-table').DataTable().rows({selected: true}).data().toArray();
            
            var selectArray = [];
            var selectStatusArray = [];

            $.each(select, function(index, data){
                selectArray.push(data.id);
                selectStatusArray.push(data.payment_status);
            });

            if(selectStatusArray.length <= 0)
            {
                Swal.fire({
                    title: "Warning!",
                    text: "Please select data!",
                    icon: "warning",
                    buttonsStyling: false,
                    showConfirmButton: false,
                    timer: 3000
                });

                return;
            }

            if(selectStatusArray.includes(1))
            {
                window.location = url+"?ids="+selectArray+"&_token="+_token;
            }
            else
            {
                Swal.fire({
                    title: "Warning!",
                    text: "Payment status processed only!",
                    icon: "warning",
                    buttonsStyling: false,
                    showConfirmButton: false,
                    timer: 3000
                });

                return;
            }
        });
    });
</script>
@endpush