@extends('layouts.master')

@section('title')
    LT-168 :: รายการถอนเงิน
@endsection

@section('sub_title')
    รายการถอนเงิน
@endsection

@section('content')
    <div class="card">
        <div class="card-header border-0">
            <div class="row align-items-center border-0">
                <div class="col">
                    <h3 class="mb-0">รายการถอนเงิน</h3>
                </div>
                <div class="col text-right form-inline justify-content-end">
                    <form onsubmit="filterHandler(event, this)">
                        <select class="form-control mr-2" name="status">
                            <option value="0" {{ $request->status == '0' ? 'selected':'' }}>รอดำเนินการ</option>
                            <option value="1" {{ $request->status == '1' ? 'selected':'' }}>อนุมัติ</option>
                            <option value="2" {{ $request->status == '2' ? 'selected':'' }}>ไม่อนุมัติ</option>
                        </select>
                        <input type="date" class="form-control mr-2" name="filter_date" />
                        <button type="submit" class="btn btn-primary">ค้นหา</button>
                    </form>
                </div>
            </div>
        </div>
        <div class="table-responsive pb-2">
            <table class="table table-sm table-hover" data-order='[[0, "desc"]]'>
                <thead class="thead-light">
                    <tr>
                        <th class="align-middle text-center">#</th>
                        <th class="align-middle text-center">ผู้แจ้งถอน</th>
                        <th class="align-middle text-center" data-orderable="false">จัดการ</th>
                        <th class="align-middle text-center">จำนวนเงิน</th>
                        <th class="align-middle text-center">เวลาที่แจ้ง</th>
                        <th class="align-middle text-center">เวลาที่ดำเนินการ</th>
                        <th class="align-middle text-center">บัญชี</th>
                        <th class="align-middle text-center">สถานะ</th>
                    </tr>
                </thead>
                <thead>
                    <tr class="table-success">
                        <th class="align-middle text-center" colspan="2">ยอดถอนรวม: </th>
                        <th class="align-middle text-center">{{ nf($withdrawRequest->sum('amount'), true) }}</th>
                        <th class="align-middle text-center"></th>
                        <th class="align-middle text-center"></th>
                        <th class="align-middle text-center"></th>
                        <th class="align-middle text-center"></th>
                        <th class="align-middle text-center"></th>
                    </tr>
                </thead>
                <tbody class="table_three">
                    @if ($withdrawRequest->count() === 0)
                        <tr>
                            <td colspan="8" class="text-center py-3">
                                <h3 class="font-weight-light text-muted mb-0">ไม่มีรายการ</h3>
                            </td>
                        </tr>
                    @else
                        @foreach ($withdrawRequest as $key => $item)
                            @php $status = withdrawStatus($item) @endphp
                            <tr>
                                <td class="align-middle text-center">
                                    {{ $key + 1 }}
                                    @if ($item->status === 0)
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" value="" onchange="toggleActionRow(this)" data-id="{{ $item->id }}" {{ ($item->action_status ? 'checked':null) }}>
                                        <label class="form-check-label" for="defaultCheck1">
                                            รอดำเนินการ
                                        </label>
                                    </div>
                                    @endif
                                </td>
                                <td class="align-middle text-center">
                                    <span class="badge badge-primary text-sm mb-1">{{ $item->user->username }}</span><br/>
                                    {{ $item->user->name }}<br/>
                                    Reference: {{ $item->user->reference_name }}
                                </td>
                                <td class="align-middle text-center">
                                    @if ($item->status === 0)
                                        <button class="btn btn-success btn-sm btn-icon-only rounded-circle" data-id="{{ $item->id }}" onclick="proceedRequest(true, this)" title="อนุมัติ">
                                            <i class="fas fa-check"></i>
                                        </button>
                                        <button class="btn btn-danger btn-sm btn-icon-only rounded-circle" data-id="{{ $item->id }}" onclick="proceedRequest(false, this)" title="ไม่อนุมัติ">
                                            <i class="fas fa-times"></i>
                                        </button>
                                    @endif
                                </td>
                                <td class="align-middle text-center text-lg">
                                    {{ number_format($item->amount, 2) }}&nbsp;
                                    <a href="javascript:;"
                                    onclick="showMemberWithdrawSummary(this)"
                                    data-user-id="{{ $item->user->id }}"
                                    data-target-url="{{ route('report.member.withdraw', $item->user->id) }}"><i class="fas fa-search fa-fw"></i></a>
                                </td>
                                <td class="align-middle text-center text-sm">{{ THdatetime($item->created_at) }}</td>
                                <td class="align-middle text-center text-sm">{{ THdatetime($item->created_at !== $item->updated_at ? $item->updated_at : '') }}</td>
                                <td class="align-middle text-center">
                                    @if ($item->bankAccount)
                                    <span class="text-sm badge mb-1 badge-{{ strtolower($item->bankAccount->bank_code ?? '-') }}">{{ bankName($item->bankAccount->bank_code ?? '-') }}</span><br>
                                    <span class="text-sm text-dark">
                                        {{ $item->bankAccount->bank_owner_name }}<br/>
                                        {{ $item->bankAccount->bank_number }}</span><br/>
                                        โทร: {{ $item->user->phone }}
                                    @endif
                                </td>
                                <td class="align-middle text-center">
                                    <span class="text-sm status badge badge-{{ $status['color'] }}">{{ $status['text'] }}</span>
                                    @if ($status['code'] === 2 && !empty($status['note']))
                                        <br/>*หมายเหตุ: {{ $status['note'] }}
                                    @endif
                                    <br/>*ผู้ทำรายการ: {{ $item->action_username }}
                                </td>
                                
                            </tr>
                        @endforeach
                    @endif
                </tbody>
            </table>
        </div>
    </div>

    <div class="modal fade" id="anythingModal" tabindex="-1" role="dialog" aria-labelledby="anythingModalLebel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="anythingModalLebel"></h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body table-responsive">
                    <table id="modal-table" class="table table-hover table-sm py-3" style="padding: 0px; padding-top: 1rem; padding-bottom: 1rem;">
                        <thead class="thead-light">
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>

        const dataTable = $('table').DataTable({
            // ajaxSource: `{{ route('agent.withdraw-request.showAll') }}`,
            // columnDefs: [
            //     {targets: 0, data: 'id', render: (data, type, row, meta) => data},
            //     {targets: 1, data: 'user.name', render: (data, type, row, meta) => data},
            //     {targets: 2, data: 'amount', render: (data, type, row, meta) => data},
            //     {targets: 3, data: 'created_at', render: (data, type, row, meta) => data},
            //     {targets: 4, data: 'updated_at', render: (data, type, row, meta) => data},
            //     {targets: 5, data: 'bank_account.bank_code', render: (data, type, row, meta) => data},
            //     {targets: 6, data: 'status', render: (data, type, row, meta) => data},
            //     {targets: 7, data: null, render: (data, type, row, meta) => data},
            // ],
        });

        function proceedRequest(approve, btn) {
            return tryCatchSwal(async () => {
                const withdrawRequestId = btn.dataset.id;
                const approveText = `${!approve ? 'ไม่' : ''}อนุมัติ`;
                const status = approve ? 1 : 2;
                let swalConfig = {
                    title: approveText,
                    text: `โปรดยืนยันเพื่อดำเนินการ${approveText}รายการแจ้งถอนเงินนี้`,
                    icon: approve ? 'info' : 'warning',
                    dangerMode: !approve,
                    buttons: {
                        cancel: 'ยกเลิก',
                        confirm: {
                            text: 'ยืนยัน',
                            closeModal: false,
                        }
                    }
                }
                if (!approve) swalConfig.content = {element: "input", attributes: { placeholder: "กรุณาระบุหมายเหตุ", type: "text", }};
                const confirm = await swal(swalConfig);
                if (!confirm) return;

                const formData = new FormData();
                formData.append('withdraw_request_id', withdrawRequestId);
                formData.append('status', status);
                formData.append('_method', 'PUT');
                if (!approve) formData.append('note', confirm);
                const result = await fetchJson(`{{ route('agent.withdraw-request.index') }}/${withdrawRequestId}`, 'POST', formData);
                if (!result) return false;

                const now = DateTime.local().setLocale('th');
                const updatedAt = now.toLocaleString(DateTime.DATETIME_MED);
                const tr = btn.closest('tr');
                const statusBadge = tr.querySelector('span.status');
                tr.querySelector('td:nth-child(5)').textContent = updatedAt;
                tr.querySelector('td:nth-child(8)').innerHTML = '';
                statusBadge.className = `badge badge-${approve ? 'success' : 'danger'} text-sm`;
                statusBadge.textContent = approveText;
                if (!approve) location.relaod(); 
                return swal('สำเร็จ', `ดำเนินการ${approveText}รายการถอนเรียบร้อย`, 'success');
            }).then(() => {
                location.reload();
            });
        }
        let transactionInstance;
        const loadTransaction = async function(userId)
        {
            const mdTb = $('#anythingModal');
            const mdHead = mdTb.find('.modal-title');
            const mdTbHead = mdTb.find('thead');
            const mdTbBody = mdTb.find('tbody');
            const url = `{{ route('report.member.fullreport') }}`;
            let fromData = new FormData();
            fromData.append('type', 'bet');
            fromData.append('param', userId);
            if($.fn.DataTable.isDataTable(transactionInstance)) transactionInstance.destroy();
            mdHead.text('รายการเล่น');
            const fetched = await fetchApi(url, 'POST', fromData);
            const result = await fetched.json();
            const th = createTableHead(['วันที่','หมายเลขบิล', 'สถานะ', 'ไลน์ส่วนลด', 'ยอดแทง', 'ส่วนลด', 'สุทธิ', 'ยอดถูก']);
            mdTbHead.html(th);
            let tr = ``;
            for(const i in result){
                let datas = result[i];
                if(datas.status == 4){
                    
                }
                tr += `<tr>
                        <td class="align-middle text-center font-weight-bold">${datas.date}</td>
                        <td class="align-middle text-center font-weight-bold">
                            <a href="javascript:void(0);" data-bet='${datas.betJson}' data-commission-line="${datas.commission_line}" data-date="${datas.date}" onclick="loadTable('bill', ${datas.id}, this)">
                                <span class="badge badge-primary text-xs">${datas.bill_id}</span>
                            </a>
                        </td>
                        <td class="align-middle text-center font-weight-bold text-${datas.statusText.color}">
                                ${datas.statusText.text}
                        </td>
                        <td class="align-middle text-center font-weight-bold">
                                ${datas.commission_line ?? 'A'}
                        </td>
                        <td class="align-middle text-center font-weight-bold">
                            ${$.number(datas.amount, 2)} THB
                        </td>
                        <td class="align-middle text-center font-weight-bold text-success">
                            ${$.number(datas.discount, 2)} THB
                        </td>
                        <td class="align-middle text-center font-weight-bold text-primary">
                            ${$.number(datas.payment, 2)} THB
                        </td>
                        <td class="align-middle text-center font-weight-bold text-info">
                            ${$.number(datas.wonAmont, 2)} THB
                        </td>
                    </tr>`;
            }
            mdTbBody.html(tr);
            transactionInstance = mdTb.find('table').DataTable();
            mdTb.modal('show');
        }
        
        const createTableHead = function(datas)
        {
            let th = '<tr>';
            for(const i in datas){
                let data = datas[i];
                th += `<th class="align-middle text-center font-weight-bold">${data}</th>`;
            }
            th += `</tr>`;
            return th;
        }

        function showMemberWithdrawSummary(el) {
            const self = $(el);
            const url = self.data('target-url');
            const userId = self.data('user-id');

            window.open(url,'popup','width=750,height=600');
            return;
        }

        function filterHandler(e, el)
        {
            e.preventDefault();
            window.location = `{{ url()->current() }}?${$(el).serialize()}`;
        }

        async function toggleActionRow(el)
        {
            const self = $(el);
            self.closest('tr').toggleClass('table-warning');
            const fetched = fetchApi(`{{ route('agent.withdraw-request.index') }}/toggle-action-status/${self.data('id')}`, 'put', {});
        }
    </script>
@endsection