@extends('layouts.affiliate.index')
@section('title', $label)

@section('content')
<div class="row">
    <div class="col-md-3">
        <div class="card">
            <div class="card-body p-3">
                <div class="mb-2">
                    <h4 class="mb-0">Penarikan Saldo</h4>
                    Minimal Penarikan Rp. {{ number_format($minimum->value1, 0, '', '.') }}
                </div>

                @if (empty($affiliator->bank) or empty($affiliator->account_number) or empty($affiliator->account_name))
                    <div class="alert alert-warning mb-0">
                        <b><i class="mdi mdi-alert-circle"></i> INFO</b><br />
                        Anda belum mengisi pengaturan Akun Rekening Bank Anda<br />
                        <a href="" class="text-warning font-weight-bold"><small>Ubah Pengaturan</small></a>
                    </div>
                @else
                    <x-form.input-group-mask
                        id="amount"
                        mask="nominal"
                        addon="Rp"
                        :old="$affiliator->balance"
                        readonly
                    />

                    <button type="button" id="btn-withdraw" class="btn btn-primary btn-sm mt-2">
                        SUBMIT
                    </button>
                @endif
            </div>
        </div>
    </div>
    <div class="col-md-3 stretch-card grid-margin">
        <div class="card bg-info card-img-holder text-white" style="height: 165px;">
            <div class="card-body p-3">
                <img src="{{ asset('images/circle.svg') }}" class="card-img-absolute" alt="circle-image">
                <h4 class="font-weight-normal mb-3">
                    <i class="mdi mdi-wallet-bifold card-icon float-right"></i>
                    <b>Saldo</b>
                </h4>
                <h2 class="counter-number" data-from="0" data-to="{{ $affiliator->balance }}" data-number="{{ number_format($affiliator->balance, 0, '', '.') }}"></h2>
                <h6 class="mt-0 card-text">
                    Total saldo saat ini
                </h6>
            </div>
        </div>
    </div>
    <div class="col-md-3 stretch-card grid-margin">
        <div class="card bg-success card-img-holder text-white" style="height: 165px;">
            <div class="card-body p-3">
                <img src="{{ asset('images/circle.svg') }}" class="card-img-absolute" alt="circle-image">
                <h4 class="font-weight-normal mb-3">
                    <i class="mdi mdi-check-circle card-icon float-right"></i>
                    <b>Sudah Ditarik</b>
                </h4>
                <h2 class="counter-number" data-from="0" data-to="{{ $success }}" data-number="{{ number_format($success, 0, '', '.') }}"></h2>
                <h6 class="mt-0 card-text">
                    Jumlah saldo berhasil ditarik
                </h6>
            </div>
        </div>
    </div>
    <div class="col-md-3 stretch-card grid-margin">
        <div class="card bg-warning card-img-holder text-white" style="height: 165px;">
            <div class="card-body p-3">
                <img src="{{ asset('images/circle.svg') }}" class="card-img-absolute" alt="circle-image">
                <h4 class="font-weight-normal mb-3">
                    <i class="mdi mdi-sync-circle card-icon float-right"></i>
                    <b>Menunggu Penarikan</b>
                </h4>
                <h2 id="count-waiting" class="counter-number" data-from="0" data-to="{{ $waiting }}" data-number="{{ number_format($waiting, 0, '', '.') }}"></h2>
                <h6 class="mt-0 card-text">
                    Jumlah saldo menunggu penarikan
                </h6>
            </div>
        </div>
    </div>
</div>

<div class="card">
    <div class="card-body">
        <div class="table-responsive">
            <div class="alert alert-info">
                <i class="mdi mdi-information-variant-circle"></i> &nbsp;Penarikan Saldo selain ke Bank Mandiri akan dikenakan biaya transfer sebesar Rp. 6.500
            </div>

            <table class="table" id="table-withdrawal">
                <thead>
                    <tr>
                        <th style="width: 50px;">No</th>
                        <th>No. Penarikan</th>
                        <th>Tgl. Pengajuan</th>
                        <th>Jumlah Penarikan</th>
                        <th>Biaya Transfer</th>
                        <th>Total</th>
                        <th>Status</th>
                        <th>Tgl. Transfer</th>
                        <th style="width: 40px;">#</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
</div>
@endsection

@push('styles')
<link href="{{ asset('vendor/datatables.net/datatables.net-bs4/css/dataTables.bootstrap4.min.css') }}" rel="stylesheet">
@endpush

@push('scripts')
<script src="{{ asset('vendor/datatables.net/datatables.net/js/jquery.dataTables.min.js') }}" type="text/javascript"></script>
<script src="{{ asset('vendor/datatables.net/datatables.net-bs4/js/dataTables.bootstrap4.min.js') }}" type="text/javascript"></script>
<script src="{{ asset('js/jquery-countTo.js') }}"></script>

<script>
$(document).ready(function() {
    setCounter()

    $(".nominal-mask").inputmask({ alias: "nominal" })

    window.LaravelDataTables = window.LaravelDataTables || {}
    window.LaravelDataTables["table-withdrawal"] = $("#table-withdrawal").DataTable({
        dom: 'fltpr',
        language: {
            search: "",
            searchPlaceholder: "Pencarian...",
            lengthMenu: "_MENU_ Data"
        },
        ajax:
        {
            url: "{{ route('affiliate.withdrawal.datatable') }}",
            type: "POST",
            data: {_token: token}
        },
        processing: true,
        serverSide: true,
        deferRender: true,
        ordering: false,
        aLengthMenu: [[10, 25, 50, 100],[10, 25, 50, 100]],
        drawCallback: function() {
            $(".set-tooltip").tooltip({
                container: "body"
            })
        },
        columns: [
            {
                data: null,
                class: "align-top",
                orderable: false,
                searchable: false,
                render: (data, type, row, meta) => meta.row + meta.settings._iDisplayStart + 1
            },
            {
                class: "align-top",
                render: (data, type, row) => row.number
            },
            {
                class: "align-top",
                render: (data, type, row) => dateFormat(row.created_at)
            },
            {
                class: "align-top",
                orderable: false,
                render: (data, type, row) => moneyFormat(row.amount)
            },
            {
                class: "align-top",
                orderable: false,
                render: (data, type, row) => moneyFormat(row.fee)
            },
            {
                class: "align-top",
                orderable: false,
                render: (data, type, row) => moneyFormat(row.total)
            },
            {
                class: "align-top",
                render: (data, type, row) => row.status_badge
            },
            {
                class: "align-top",
                render: (data, type, row) => (row.status == 1) ? dateFormat(row.transfer_date) : "-"
            },
            {
                class: "align-top text-center",
                orderable: false,
                searchable: false,
                render: (data, type, row) => {
                    if (row.status == 0) {
                        let url_destroy = "{{ route('affiliate.withdrawal.destroy', 0) }}"
                        url_destroy = url_destroy.replace("0", row.encrypted_id)

                        return `<button type="button" class="btn btn-danger btn-xs set-tooltip" title="Hapus" onclick="deleteConfirm('${url_destroy}', 'reload')">
                                <i class="mdi mdi-trash-can"></i>
                            </button>`
                    } else
                        return ""
                }
            }
        ]
    })

    $($.fn.dataTable.tables(true)).css('width', '100%')

    $("#btn-withdraw").click(function() {
        swal({
            title: "KONFIRMASI",
            text: "Apakah Anda yakin ingin mengajukan Penarikan Saldo?",
            type: "warning",
            showCancelButton: true,
            confirmButtonColor: '#fe7c96',
            confirmButtonText: "YES",
            cancelButtonText: "CANCEL",
            closeOnConfirm: false,
            closeOnCancel: false,
            showLoaderOnConfirm: true,
        },
        function (confirm) {
            if (confirm) {
                const amount = $("#amount").val()
                const formData = { _token: token, amount }

                $.ajax({
                    type: "POST",
                    url: "{{ route('affiliate.withdrawal.store') }}",
                    data: formData,
                    dataType: "json",
                    success: function (response) {
                        if (response.status) {
                            $("#count-waiting").data("to", response.data.total).data("number", moneyFormat(response.data.total))

                            window.LaravelDataTables["table-withdrawal"].ajax.reload()
                            setNotifsuccess(response.message, false)
                            setCounter()
                        } else
                            setNotifInfo(response.message)
                    },
                    error: function (xhr, ajaxOptions, thrownError) {
                        ajaxError(xhr.status)
                    }
                })
            } else {
                swal.close()
            }
        })
    })
})
</script>
@endpush