@extends('layouts.frontendProfile')

@section('profile-content')
    <style>
        td:last-child,
        th:last-child {
            padding-right: 15px !important;
        }

        td:first-child,
        th:first-child {
            padding-left: 15px !important;
        }
    </style>
    <p class="bg-white card-header text-dark" style="margin: 0 -15px;"><i class="fas fa-dollar-sign mr-2"></i>รายการแทง</p>
    <div class="table-full-width py-4 mb-n3" data-style="background-color: rgb(250 190 70 / 10%);">
        <div class="table-responsive">
            <table class="table table-borderless table-sm DataTable text-nowrap" data-order="[]">
                <thead hidden>
                    {{-- <th>ลำดับ</th>
                    <th>หมายเลขตั๋ว</th>
                    <th>เวลาทายผล</th>
                    <th>ยอดแทง</th>
                    <th>สถานะ</th> --}}
                    <th><i class="fas fa-cogs"></i></th>
                </thead>
                <tbody class="row no-gutters">
                    @foreach ($betHistory as $key => $item)
                        @php $status = billStatus($item); @endphp
                        <tr class="col-12 col-sm-6 col-md-12 col-lg-6 p-0 d-flex">
                            <td class="py-3 w-100 mx-auto">
                                <div class="card shadow">
                                    <div class="card-header rounded-top bg-transparent text-body lh-1 flex-nowrap text-nowrap" style="line-height: 1;">
                                        <div class="row no-gutters">
                                            <div class="col-auto">
                                                <h5 class="mb-0 font-weight-bold">{{ lotteryName($item->country) }}</h5>
                                                <small>งวดวันที่: {{ THdatetime($item->lotteryRound->display_date) }}</small>
                                            </div>
                                            <div poy-status class="col-auto my-auto p-2 border rounded-pill px-3 ml-auto bg-{{ $status['color'] }} text-white bg-gradient">
                                                {{ $status['text'] }}
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row m-0">
                                        <div class="col-6 py-2 border-right">
                                            <small>เงินเดิมพัน</small>
                                            <h5 class="mb-0 text-danger"><small>฿</small> {{ number_format($item->amount) }}</h5>
                                        </div>
                                        <div class="col-6 py-2">
                                            <small>ถูกรางวัล</small>
                                            <h5 class="mb-0 text-success"><small>฿</small> {{ number_format(getWonAmount($item)) }}</h5>
                                        </div>
                                        <div class="col-12 py-2 border-top d-flex align-items-center">
                                            <div class="d-flex flex-column">
                                                <small class="text-primary">{{ $item->bill_id }}</small>
                                                <small>{{ str_replace(' น.', '', THdatetime($item->created_at, 'datetime', 'short', 'short')) }}</small>
                                                <small>ไลน์ส่วนลด: {{ $item->commission_line ?? 'A' }}</small>
                                            </div>
                                            <div class="ml-auto">
                                                @if ($item->cancellable)
                                                    <button class="p-xl-1 btn btn-danger btn-sm" title="คืนโพย" onclick="cancelPoy(this)" cancel-poy data-id="{{ $item->id }}" data-bill-id="{{ $item->bill_id }}">
                                                        <i class="fas fa-times fa-fw mr-xl-1"></i><span class="d-none d-xl-inline">คืนโพย</span>
                                                    </button>
                                                @endif
                                                <button class="p-xl-1 btn btn-sm btn-outline-dark" title="รายละเอียด" onclick="fetchBill(this)" data-id="{{ $item->id }}" data-bill-id="{{ $item->bill_id }}">
                                                    <i class="fas fa-search fa-fw mr-xl-1"></i><span class="d-none d-xl-inline">รายละเอียด</span>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </td>
                            {{-- <td class="text-center align-middle">{{ $key + 1 }}</td>
                            <td class="text-center align-middle">{{ $item->bill_id }}</td>
                            <td class="text-center align-middle">{{ THdatetime($item->created_at) }}</td>
                            <td class="text-center align-middle">{{ number_format($item->amount, 2) }}</td>
                            <td class="text-center align-middle">
                                <span class="badge badge-{{ $status['color'] }}">{{ $status['text'] }}</span>
                            </td>
                            <td>
                                <button class="btn btn-light btn-sm btn-icon-only rounded-pill"><i class="fas fa-search"></i></button>
                                @if ($item->status < 2)
                                    <button class="btn btn-danger btn-sm btn-icon-only rounded-pill"><i class="fas fa-times"></i></button>
                                @endif
                            </td> --}}
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
    <div class="modal fade" id="bill-dialog" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-fullscreen-lg-down modal-dialog-scrollable modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header justify-content-center font-weight-bold">
                    <h5 class="modal-title ml-auto pl-3 pl-sm-4">ข้อมูลรายการทายผล</h5>
                    <button class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="p-2 text-center">
                    <p id="bill-date"></p>
                    <p><span id="bill-lottery-name"></span> <span id="bill-round"></span></p>
                    <p class="mb-0"><span id="bill-commission"></span></p>
                </div>
                <div class="p-2 border-bottom text-center">
                    <span class="font-weight-bold d-inline-block">รหัสอ้างอิง :</span> <span class="d-inline-block" id="bill-num"></span>
                </div>

                <div class="modal-body table-responsive p-0">
                    <table id="bill-bet-list" class="table table-bordered table-hover table-striped">
                        <thead class="bg-gradient bg-theme text-white">
                            <td class="text-center align-middle">ประเภท</td>
                            <td class="text-center align-middle">ตัวเลข</td>
                            <td class="text-center align-middle">เงินต้น</td>
                            <td class="text-center align-middle">ส่วนลด</td>
                            <td class="text-center align-middle">แทงจริง</td>
                            <td class="text-center align-middle">บาทละ</td>
                            <td class="text-center align-middle">ยอดถูก</td>
                        </thead>
                        <tbody id="bill-data">
                            <tr>
                                <td class="text-center" colspan="5">ยังไม่มีรายการ</td>
                            </tr>
                        </tbody>
                        <tfoot>
                            <tr style="background-color:#922323; color: white;">
                                <td class="text-center align-middle" colspan="2">รวมยอดทายผล</td>
                                <td class="text-center align-middle">0.00</td>
                                <td class="text-center align-middle">0.00</td>
                                <td class="text-center align-middle">0.00</td>
                                <td class="text-center align-middle">-</td>
                                <td class="text-center align-middle">0.00</td>
                            </tr>
                        </tfoot>
                    </table>
                </div>

                <div class="modal-footer">
                    <button onclick="cancelPoy(this)" cancel-poy data-id data-bill-id class="btn btn-danger mr-auto" type="button" style="display: none;"><i class="fas fa-undo mr-1 text-white-50"></i>คืนโพย</button>
                    {{-- <a id="print-receipt-btn" class="btn btn-info" target="_blank"><i class="fas fa-print mr-2 text-white-50"></i>พิมพ์</a> --}}
                    <button type="button" class="btn btn-secondary" data-dismiss="modal"><i class="fas fa-times mr-2 text-white-50"></i>ปิด</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    {{-- <script src="{{ asset('assets/vendor/jquery/dist/jquery.min.js') }}"></script> --}}
    <script src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.23/js/dataTables.bootstrap4.min.js"></script>
    {{-- <script src="{{ asset('assets/js/jquery.number.min.js') }}"></script> --}}
    <script>
        const billNum = document.getElementById('bill-num');
        const billDate = document.getElementById('bill-date');
        const billLotteryName = document.getElementById('bill-lottery-name');
        const billRound = document.getElementById('bill-round');
        const billCommission = document.getElementById('bill-commission');
        const billBetList = document.getElementById('bill-bet-list');
        const betListTbody = billBetList.tBodies[0];

        const billDialog = document.getElementById('bill-dialog');

        async function fetchBill(btn) {
            const id = btn.dataset.id;
            const billId = btn.dataset.billId;
            const result = await tryCatchSwal(async () => {
                const fetched = await fetchJson(`{{ route('member.bill.index') }}/${id}`);
                if (!fetched) return false;
                console.log(fetched);
                billLotteryName.textContent = lotteryName(fetched.bill.country);
                billNum.textContent = fetched.bill.bill_id;
                billDate.textContent = formattedDatetime(fetched.bill.created_at);
                billRound.textContent = `งวดวันที่ ${formattedDatetime(fetched.bill.lottery_round.display_date, false)}`;
                billCommission.textContent = `ไลน์ส่วนลด ${fetched.bill.commission_line}`;

                const cancelBillBtn = billDialog.querySelector('[cancel-poy]');
                cancelBillBtn.style.display = fetched.bill.cancellable ? '' : 'none';
                cancelBillBtn.dataset.id = fetched.bill.cancellable ? id : '';
                cancelBillBtn.dataset.billId = fetched.bill.cancellable ? billId : '';

                betListTbody.innerHTML = '';
                const sum = {
                    amount: 0,
                    discount: 0,
                    payment: 0,
                    won: 0,
                };
                for (const [key, arr] of Object.entries(fetched.bill.bet)) {
                    const tr = betListTbody.insertRow();
                    const tdType = tr.insertCell();
                    const tdNum = tr.insertCell();
                    const tdAmount = tr.insertCell();
                    const tdDiscount = tr.insertCell();
                    const tdPayment = tr.insertCell();
                    const tdPaymentRate = tr.insertCell();
                    let wonAmount = tr.insertCell();
                    let thisBillWon = 0;
                    if(arr.won){
                        tr.className = 'table-success';
                        thisBillWon = +arr.won;
                    }
                    if(arr.status == 2) tr.className = 'table-danger';

                    tdType.textContent = arr.type; tdType.className = 'text-center';
                    tdNum.textContent = arr.number; tdNum.className = 'text-center font-weight-bold';
                    tdAmount.textContent = numberFormat(arr.amount, 2); tdAmount.className = 'text-center text-primary';
                    tdDiscount.textContent = numberFormat(arr.discount, 2); tdDiscount.className = 'text-center text-success';
                    tdPayment.textContent = numberFormat(arr.payment, 2); tdPayment.className = 'text-center text-danger font-weight-bold';
                    tdPaymentRate.textContent = numberFormat(arr.paymentRate ?? 0, 2); tdPaymentRate.className = 'text-center font-weight-bold';
                    wonAmount.textContent = numberFormat(thisBillWon, 2); wonAmount.className = 'text-center font-weight-bold';

                    sum.amount += arr.amount;
                    sum.discount += arr.discount;
                    sum.payment += arr.payment;
                    sum.won += thisBillWon;
                }
                const tfootTd = billBetList.tFoot.rows[0].cells;
                tfootTd[1].textContent = numberFormat(sum.amount, 2);
                tfootTd[2].textContent = numberFormat(sum.discount, 2);
                tfootTd[3].textContent = numberFormat(sum.payment, 2);
                tfootTd[5].textContent = numberFormat(sum.won, 2);
                $('#bill-dialog').modal('show');
            });
        }

        function changeStatus(badgeElement, {badgeColor, textContent, textColor = 'white'}) {
            badgeElement.className = `col-auto my-auto p-2 border rounded-pill px-3 ml-auto bg-${badgeColor} text-${textColor} bg-gradient`
            badgeElement.textContent = textContent;
        }

        function cancelPoy(btn) {
            const id = btn.dataset.id;
            const billId = btn.dataset.billId;
            const card = btn.closest('.card');
            const poyStatusEl = card ? card.querySelector('[poy-status]') : false;
            tryCatchSwal(async () => {
                const confirm = await swal('คืนโพย', `รหัสอ้างอิง: ${billId}\nคุณแน่ใจหรือว่าต้องการยกเลิกและคืนโพยนี้`, 'warning', {
                    buttons: {
                        cancel: 'ยกเลิก',
                        confirm: {
                            text: 'ยืนยัน',
                            closeModal: false,
                        }
                    },
                    dangerMode: true,
                });
                if (!confirm) return;
                const formData = new FormData();
                // formData.append('_method', '_DELETE');
                const result = await fetchJson(`{{ route('member.bill.index') }}/${id}`, 'DELETE');
                if (!result) return false;
                if (card) {
                    changeStatus(poyStatusEl, {badgeColor: 'danger', textContent: 'ยกเลิก'});
                } else {
                    for (const poyStatusEl of document.querySelectorAll('[poy-status]')) {
                        changeStatus(poyStatusEl, {badgeColor: 'danger', textContent: 'ยกเลิก'});
                    }
                }
                btn.remove();
                return await swal('สำเร็จ', `ยกเลิกและคืนโพยสำเร็จ\nรหัสอ้างอิง: ${billId}`, 'success');
            });
        }

        $('.DataTable').DataTable({
            dom: `<'row'<'col-sm-12 px-3 col-md-6'l><'col-sm-12 px-3 col-md-6'f>>
                    <'row'<'col-sm-12 table-responsive'tr>>
                    <'row'<'col-sm-12 text-center'i><'col-sm-12 d-flex justify-content-center px-0 mt-2'p>>`,
            language: {
                paginate: {
                    first:      `<i class="fas fa-chevron-double-left"></i>`,
                    last:       `<i class="fas fa-chevron-double-right"></i>`,
                    next:       `<i class="fas fa-chevron-right"></i>`,
                    previous:   `<i class="fas fa-chevron-left"></i>`,
                },
            }
        });
    </script>
@endsection