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

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

@endsection
@push('script')
<script type="text/javascript">
    var table = $('#payment-table').DataTable({
        processing: true,
        serverSide: true,
        responsive: false,
        scrollX   : true,
        lengthMenu: [10, 20, 50, 100],
        order     : [[5, "desc" ]],
        columns: [
            {
                "data": null,
                "orderable": false,
                "render": function (data, type, row, meta) {
                    return meta.row + meta.settings._iDisplayStart + 1;
                }
            },
            {
                "data": '',
                "orderable": false,
                "render": function (data, type, row)  {
                    return '<span><b>'+row.squad.name+'</b></span><br><span>'+row.squad.email+'</span>';
                }
            },
            {
                "data": 'total_amount_order',
                "render": function (data, type, row)  {
                    return '<span>RM '+row.total_amount_order.toFixed(2)+'</span>';
                }
            },
            {
                "data": 'total_commission',
                "render": function (data, type, row)  {
                    return '<span>RM '+row.total_commission.toFixed(2)+'</span>';
                }
            },
            {
                "data": 'total_payment',
                "render": function (data, type, row)  {
                    return '<span>RM '+row.total_payment.toFixed(2)+'</span>';
                }
            },
            {
                "data": 'payment_status',
                "render": function (data, type, row)  {
                    if(row.payment_status == 1)
                        return "<h5><span class='badge badge-success'>{{ __('Paid') }}</span></h5>";
                    else
                        return "<h5><span class='badge badge-danger'>{{ __('Unpaid') }}</span></h5>";
                }
            },
            {
                "data": null,
                "orderable": false,
                "render": function (data, type, row)  {
                    if(row.payment_status != 1)
                        return '<a href="#" title="Pay" class="btn btn-icon btn-circle btn-light-success btn-sm mr-2 edit-payment" data-id="'+row.order_id+'"><i class="fas fa-file-invoice-dollar icon-xl"></i></a>';
                    else
                        return '';
                }
            },
        ],

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

        e.preventDefault();

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

        Swal.fire({
            title: "Are you sure?",
            text: "You won't be able to revert this!",
            icon: "warning",
            showCancelButton: true,
            confirmButtonText: "Yes, confirm payment!"
        }).then(function(result) {
            if (result.value) {
                $.ajax({
                    url: url,
                    type: "POST",
                    dataType: "json",
                    data: {
                        id     : id,
                        _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(
                                "Paid!",
                                "Payment is confirmed",
                                "success"
                            )
                            $('#payment-table').DataTable().ajax.reload(null, false);
                        }
                    }
                });
            }
        });
    });
</script>
@endpush