@extends('layouts.master')

@section('title')
    LT-168 :: ขึ้นเงิน
@endsection

@section('customStyle')
    <style>
        .txt_cash,
        .txt_cash_all {
            background-color: rgba(229, 229, 229, 0.2);
            border-radius: 2px;
            border: solid 2px #000000;
            font-weight: bold;
            color: black !important;
            width: 120px;
            height: 40px;
            font-size: 25px;
            text-align: center;
        }

    </style>
@endsection

@section('sub_title')
ขึ้นเงิน
@endsection

@section('content')
    <style>
        .bill-not-found,
        .phone-not-found,
        .number-not-found,
        .type-not-found,
        .country-not-found,
        .status-not-found {
            display: none !important;
        }

    </style>
    <div class="card">
        <div class="card-header border-0">
            <div class="form-row align-items-center">
                <div class="col-auto">
                    <h3 class="mb-0 pr-4">สาขา</h3>
                </div>
                <div class="col-auto mr-auto text-center">
                    <select name="store_select" class="form-control" id="store_select" onchange="selectStore(this)">
                        <option disabled selected value>กรุณาระบุสาขา</option>
                        @foreach ($stores as $store)
                            <option value="{{ $store->id }}">{{ $store->store_name }}</option>
                        @endforeach
                    </select>
                </div>

                <div class="col-auto text-right">
                    <input id="search_bill" type="text" class="form-control" name="search" placeholder="ค้นหาบิล..." oninput="filterBill(this)">
                </div>
                <div class="col-auto text-right">
                    <input id="search_phone" type="text" class="form-control" name="search" placeholder="ค้นหาเบอรโทร..." oninput="filterPhone(this)">
                </div>
                <div class="col-auto text-right">
                    <select id="search_status" class="form-control" name="status" onchange="filterStatus(this)">
                        <option value="" disabled="" selected="">สถานะ</option>
                        <option value="">ทั้งหมด</option>
                        <option>ขึ้นเงินแล้ว</option>
                        <option>ยังไม่ขึ้นเงิน</option>
                    </select>
                </div>
                <div class="col-auto text-right">
                    <select id="search_status" class="form-control" name="status" onchange="filterCountry(this)">
                        <option value="" disabled="" selected="">ประเภทหวย</option>
                        <option value="">ทั้งหมด</option>
                        <option>หวยไทย</option>
                        <option>ล็อตเตอรี่</option>
                        <option>หวยลาว</option>
                        <option>หวยฮานอย</option>
                        <option>หวยฮานอย VIP</option>
                        <option>หวยฮานอยพิเศษ</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="card-body table-responsive py-3">
            <table class="table table-sm table-hover table-bordered">
                <thead>
                    <tr>
                        <th class="text-body align-middle text-center font-weight-bold table-warning" data-total-prized>ยอดถูก:
                            <span>0.00</span> THB
                        </th>
                        <!-- <th class="text-body align-middle text-center font-weight-bold table-primary" data-sumnetamount>จ่ายสุทธิ: 0.00 THB</th> -->
                        <th class="text-body align-middle text-center font-weight-bold table-danger" data-unredeemed>ยังไม่ขึ้นเงิน:
                            <span>0.00</span> THB
                        </th>
                        <th class="text-body align-middle text-center font-weight-bold table-success" data-redeemed>ขึ้นเงินแล้ว:
                            <span>0.00</span> THB
                        </th>
                        <!-- <th class="text-body align-middle text-center font-weight-bold table-info" >เคลียสุทธิ: 0.00 THB</th> -->
                    </tr>
                </thead>
            </table>
        </div>
        <div class="card-body pt-1">
            <div class="table-responsive shadow-sm">
                <table id="tb_cus_bill" class="table table-sm table-hover table-bordered">
                    <thead class="thead-light">
                        <tr>
                            <th class="text-body align-middle text-center">วันที่</th>
                            <th class="text-body align-middle text-center">หวย</th>
                            <th class="text-body align-middle text-center">เลขตั๋ว</th>
                            <th class="text-body align-middle text-center">เบอร์โทร</th>
                            <th class="text-body align-middle text-center">สถานะ</th>
                            <th class="text-body align-middle text-center">ยอดแทง</th>
                            <th class="text-body align-middle text-center">ส่วนลด</th>
                            <th class="text-body align-middle text-center">สุทธิ</th>
                            <th class="text-body align-middle text-center">ยอดถูก</th>
                            <th class="text-body align-middle text-center">ดำเนินการ</th>
                        </tr>
                    </thead>
                    <tbody class="tb_list"></tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="modal fade" id="detail_modal" tabindex="-1" data-backdrop="static" role="dialog" aria-labelledby="agent_modal" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable align-items-stretch" role="document">
            <form id="edit_ag_data" class="modal-content h-100">
                <div class="pt-3 pb-2">
                    <div class="row">
                        <div class="col-sm-12 text-center">
                            <h3 class="text-danger" id="lbl_bill"></h3>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-6 text-center">
                            <h4 id="lbl_main_date"></h4>
                        </div>
                        <div class="col-sm-6 text-center">
                            <h4 id="lbl_cus"></h4>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-6 text-center">
                            <h4 id="lbl_line"></h4>
                        </div>
                        <div class="col-sm-6 text-center">
                            <h4 id="lbl_bill_date"></h4>
                        </div>
                    </div>
                    <input type="hidden" id="hd_bill_no">
                </div>
                <div class="modal-body p-0">
                    <div class="table-responsive h-100">
                        <table class="table table-sm table-hover">
                            <thead class="thead-light">
                                <tr>
                                    <th class="text-body align-middle text-center">ลำดับ</th>
                                    <th class="text-body align-middle text-center">เลข</th>
                                    <th class="text-body align-middle text-center">ประเภท</th>
                                    <th class="text-body align-middle text-center">แทง</th>
                                    <th class="text-body align-middle text-center">ส่วนลด</th>
                                    <th class="text-body align-middle text-center">จ่าย</th>
                                    <th class="text-body align-middle text-center">จ่ายบาทละ</th>
                                    <th class="text-body align-middle text-center">สถานะ</th>
                                </tr>
                            </thead>
                            <tbody class="tb_detail"></tbody>
                        </table>
                    </div>
                </div>
                <div class="modal-footer p-0">
                    <table class="table mb-0">
                        <tbody class="table_end">
                            <tr>
                                <td class="text-right p-1"><b>ยอดแทง</b></td>
                                <td class="text-center p-1"><b id="detail-bet-amount">0.00</b></td>
                                <td class="text-right p-1"><b>หักส่วนลด</b></td>
                                <td class="text-center p-1"><b id="detail-bet-discount" class="text-green">0.00</b></td>
                                <td class="text-right p-1"><b>ยอดรวม</b></td>
                                <td class="text-center p-1"><b id="detail-bet-summary" class="text-red">0.00</b></td>
                                <td class="text-right p-1"><b>ถูกรางวัล</b></td>
                                <td class="text-center p-1"><b id="detail-bet-rewarded" class="text-green">0.00</b></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="modal-footer">
                    <button type="button" style="display:none;" id="btn_cancel_bill" class="btn btn-danger"><i class="fas fa-times"></i> ยกเลิกบิล</button>
                    <button type="button" style="display:none;" id="btn_cash" class="btn btn-danger"><i class="fas fa-check"></i> ขึ้นเงิน</button>
                    <button type="button" style="display:none;" id="btn_confirm_bill" class="btn btn-danger"><i class="fas fa-check"></i> ยืนยัน</button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">ปิด</button>
                </div>
            </form>
        </div>
    </div>

    <div class="modal fade" id="pin_modal" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="detail_modal"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document" style="width:50%;">
            <form id="confirm_pin_form" class="modal-content shadow">
                <div class="modal-header border-0">
                    <h5 class="modal-title">ยืนยันรหัส PIN</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div>
                        <div class="text-center">
                            <input type="text" id="txt_pin" class="form-control mx-auto clsNumberOnly" name="pin"
                                style="width: 150px; font-size: 25px; text-align:center; color: #525f7f;" value=""
                                minlength="6" maxlength="6" placeholder="รหัส PIN" required>
                        </div>
                    </div>
                </div>
                <div class="modal-footer border-0">
                    <button type="button" class="btn btn-secondary mr-auto" data-dismiss="modal"><i class="fas fa-times"></i> ปิด</button>
                    <button type="submit" id="btn_confirm_pin" class="btn btn-danger"><i class="fas fa-check"></i> ยืนยันการขึ้นเงิน</button>
                </div>
            </form>
        </div>
    </div>

    <div class="modal fade" id="dialog_preview" tabindex="-1" data-backdrop="static">
        <div class="modal-dialog modal-lg modal-dialog-centered" role="document" style="width:50%;">
            <form id="" class="modal-content bg-secondary">
                <div class="card-header border-0">
                    <center>
                        <div class="row">
                            <div class="col-sm-12 text-center">
                                <h1 class="text-danger">สลิป</h1>
                            </div>
                        </div>
                    </center>
                </div>
                <div class="modal-body">
                    <div class="card-body table-responsive py-3">
                        <div class="text-center" style="height:450px;">
                            <iframe id="frame_preview" src="" style="width:700px; height:430px;"></iframe>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-danger" type="button" data-dismiss="modal">ปิด</button>
                </div>
            </form>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        let current = {
            id: null,
            billId: null,
        };

        function redeemStatus({ prize_payment_status })
        {
            switch (prize_payment_status) {
                case 0: return {code: 0, text: "ยังไม่ขึ้นเงิน", color: 'danger'};
                case 1: return {code: 1, text: "ขึ้นเงินแล้ว", color: 'success'};
                default: return {code: null, text: 'มีปัญหา', color: 'dark'};
            }
        }

        const selectStore = selectBox => {
            const storeId = selectBox.value;
            const formData = new FormData();
            formData.append('store_id', storeId);
            tryCatchSwal(async () => {
                const result = await fetchJson(`{{ route('agent.getStoreRedeems') }}`, 'POST', formData);
                if (!result) return false;

                if (result.length === 0) {
                    return document.querySelector('.tb_list').innerHTML =
                        `<tr><td colspan="10" class="text-danger text-center table-danger">ไม่พบข้อมูล</td></tr>`;
                }

                let betReward = 0;
                let redeemed = 0;
                let unredeemed = 0;

                let output = '';
                let n = 0;

                for (const key in result) {
                    const item = result[key];
                    n++;
                    let billWon = 0;
                    for (const i in item.bet) {
                        const bet = item.bet[i];
                        if (bet.won) {
                            billWon += (+bet.won);
                        }
                    }
                    betReward += billWon;
                    if (billWon) {
                        betReward += billWon;
                        redeemed += item.prize_payment_status == 1 ? billWon : 0;
                        unredeemed += !item.prize_payment_status ? billWon : 0;
                    }

                    const status = redeemStatus(item);

                    output = output +
                        `<tr data-won="${ billWon }" data-prize-payment-status="${ item.prize_payment_status }">
                            <td class="align-middle font-weight-bold text-center px-1">
                                ${ formattedDatetime(item.created_at) }<br>
                                <small>IP ADDR: ${ item.ip_address }</small>
                            </td>
                            <td class="align-middle font-weight-bold text-center px-1">
                                <span class="badge badge-default text-sm">${ lotteryName(item.country) }</span>
                            </td>
                            <td class="align-middle text-center text-danger font-weight-bold cls_bill_id">
                                ${ item.bill_id }
                            </td>
                            <td class="align-middle text-center font-weight-bold">${ item.phone }</td>
                            <td class="align-middle text-center font-weight-bold">
                                <span style="width:85px;" class="badge badge-pill badge-${ status['color'] } text-xs">${ status['text'] }</span>
                            </td>
                            <td class="align-middle text-center font-weight-bold">
                                ${ numberFormat(item.amount, 2) } THB
                            </td>
                            <td class="align-middle text-center font-weight-bold text-success">
                                -${ numberFormat(item.discount, 2) } THB
                            </td>
                            <td class="align-middle text-center font-weight-bold text-primary">
                                ${ numberFormat(item.payment, 2) } THB
                            </td>
                            <td class="align-middle text-center font-weight-bold text-danger">
                                ${ numberFormat(billWon, 2) } THB
                            </td>
                            <td class="align-middle text-center font-weight-bold">
                                <button class="btn btn-danger btn-sm cls_btn_detail" data-toggle="modal"
                                    data-target="#detail_modal" data-bill="${ item.bill_id }" data-id="${ item.id }"
                                    data-customer="${ item.phone }" data-line
                                    data-main_date="${ item.created_at }"
                                    data-bill_date="${ item.created_at }"
                                    data-status='${ JSON.stringify(billStatus(item)) }'><i class="fas fa-tasks"></i>
                                    จัดการ</button>
                            </td>
                        </tr>`;
                }

                $('[data-total-prized] span').text(numberFormat(betReward, 2));
                $('[data-redeemed] span').text(numberFormat(redeemed, 2));
                $('[data-unredeemed] span').text(numberFormat(unredeemed, 2));

                document.querySelector('.tb_list').innerHTML = output;
            });
            document.getElementById('search_bill').value = '';
            document.getElementById('search_phone').value = '';
            document.getElementById('search_status').value = '';
        }

        let filterTimer;

        const $totalPrized = document.querySelector('[data-total-prized] span');
        const $redeemed = document.querySelector('[data-redeemed] span');
        const $unredeemed = document.querySelector('[data-unredeemed] span');

        function updateSummary({totalPrized, redeemed, unredeemed}) {
            $totalPrized.textContent = numberFormat(totalPrized, 2);
            $redeemed.textContent = numberFormat(redeemed, 2);
            $unredeemed.textContent = numberFormat(unredeemed, 2);
        }

        const filter = (filterFor, input, nthChildOfSearchColumn, strict = false) => {
            clearTimeout(filterTimer);
            return filterTimer = setTimeout(() => {
                const table = document.getElementById('tb_cus_bill');
                const tbody = table.tBodies[0];
                const summary = {
                    totalPrized: 0,
                    redeemed: 0,
                    unredeemed: 0,
                };
                for (const el of tbody.querySelectorAll(`td:nth-child(${nthChildOfSearchColumn})`)) {
                    const tr = el.closest('tr');
                    if (!input.value) {
                        tr.classList.remove(`${filterFor}-found`, `${filterFor}-not-found`);
                        const won = JSON.parse(tr.dataset.won);
                        const prizePaymentStatus = JSON.parse(tr.dataset.prizePaymentStatus);
                        summary.totalPrized += won;
                        summary.redeemed += prizePaymentStatus === 1 ? won : 0;
                        summary.unredeemed += prizePaymentStatus === 0 ? won : 0;
                        continue;
                    }
                    const found = strict ? el.textContent.trim() === input.value : el.textContent.trim().includes(input.value);

                    if (found) {
                        const won = JSON.parse(tr.dataset.won);
                        const prizePaymentStatus = JSON.parse(tr.dataset.prizePaymentStatus);
                        summary.totalPrized += won;
                        summary.redeemed += prizePaymentStatus === 1 ? won : 0;
                        summary.unredeemed += prizePaymentStatus === 0 ? won : 0;
                        tr.classList.add(`${filterFor}-found`)
                        tr.classList.remove(`${filterFor}-not-found`);
                    } else {
                        tr.classList.add(`${filterFor}-not-found`);
                        tr.classList.remove(`${filterFor}-found`)
                    }
                }
                updateSummary(summary);
            }, input.nodeName === 'INPUT' ? 500 : 0);
        }

        const filterBill = input => filter('bill', input, 3);
        const filterPhone = input => filter('phone', input, 4);
        const filterStatus = select => filter('status', select, 5);
        const filterCountry = select => filter('country', select, 2, true);

        var iCountDown;
        $(document).ready(function() {

            $(".cls_lbl_chk").hide();

            $("#btn_cancel_bill").click(function() {
                swal('ยืนยันการยกเลิกบิล?', ' ', 'warning', {
                    buttons: ['ยกเลิก', 'ยืนยัน']
                }).then((sure) => {
                    if (sure) {
                        let bill = $("#hd_bill_no").val();
                        $.post('main_store.php?cm=cancel_bill', {
                            bill: bill
                        }, function(data) {
                            if (data.success) {
                                swal('ทำรายการเรียบร้อย', ' ', 'success', {
                                    buttons: false,
                                    timer: 1500
                                });
                                $("#detail_modal").modal("hide");
                                selectStore(document.getElementById('store_select'));
                            } else {
                                swal('Error!!', data.code, 'error');
                            }
                        }, 'json')
                    }
                });

            });

            $("#btn_cash").click(function() {
                let bill = $("#hd_bill_no").val();
                let pin = $("#txt_pin").val('');
                $("#pin_modal").modal("show");
            });

            $("#btn_refresh_pin").click(function() {
                clearInterval(iCountDown);
                let bill = $("#hd_bill_no").val();
                //$.post('main_store.php?cm=generatepin', {bill:bill}, function(data){
                $.post('Mailer/send_pin.php', {
                    bill: bill
                }, function(data) {
                    if (data.success) {
                        $("#txt_pin").val("");
                        $("#txt_ref_pin").text("หมายเลขอ้างอิง : " + data.ref);
                        $("#hd_ref_pin").val(data.ref);
                        timeout_pin = 1000 * 60 * 5;
                        //timeout_pin = 10000;
                        iCountDown = setInterval("countDown()", 1000);
                        //$("#pin_modal").modal("show");
                        $("#txt_pin").focus();
                    }
                }, 'json')

            });


            $("#pin_modal").on('hide.bs.modal', function() {
                clearInterval(iCountDown);

                //actions you want to perform after modal is closed.
            });
            $("#detail_modal").on('hide.bs.modal', function() {
                $("#btn_cancel_bill").hide();
                $("#btn_cash").hide();
                $("#btn_confirm_bill").hide();
                $('.tb_detail').html("");
                //actions you want to perform after modal is closed.
            });

            $("#txt_pin").keypress(function(e) {
                if (e.which == 13) {
                    $("#btn_confirm_pin").trigger("click");
                    e.preventDefault();
                }

            });
            $("#confirm_pin_form").on('submit', e => {
                e.preventDefault();
                const form = e.target;
                let pin = $("#txt_pin").val();
                const formData = new FormData(form);
                tryCatchSwal(async () => {
                    switchSubmitBtnState(form);
                    const result = await fetchJson(`{{ route('bill.index') }}/redeem/${current.id}`, 'POST', formData);
                    if (!result) return false;
                    swal('ทำรายการเรียบร้อย', ' ', 'success', {
                        buttons: false,
                        timer: 1500
                    });
                    $("#pin_modal").modal("hide");
                    $("#detail_modal").modal("hide");
                    selectStore(document.getElementById('store_select'));
                }, () => {
                    switchSubmitBtnState(form);
                    form.reset();
                });
            });

            $("#btn_confirm_bill").click(function() {
                swal('ยืนยันการทำรายการ?', ' ', 'warning', {
                    buttons: ['ยกเลิก', 'ยืนยัน']
                }).then((sure) => {
                    if (sure) {
                        let bill = $("#hd_bill_no").val();
                        $.post('main_store.php?cm=confirm_bill', {
                            bill: bill
                        }, function(data) {
                            if (data.success) {
                                swal('ทำรายการเรียบร้อย', ' ', 'success', {
                                    buttons: false,
                                    timer: 1500
                                });
                                $("#detail_modal").modal("hide");
                                selectStore(document.getElementById('store_select'));
                            } else {
                                swal('Error!!', data.code, 'error');
                            }
                        }, 'json')
                    }
                });

            });

        });

        $(document).on('click', ".tb_list .cls_btn_detail", function() {
                let e = $(this);
                var id = $(this).data('id');
                var bill = $(this).data('bill');
                var cus = $(this).data('customer');
                var line = $(this).data('line');
                var bill_date = $(this).data('bill_date');
                var main_date = $(this).data('main_date');
                const status = $(this).data('status');

                $('#detail_modal').find('#lbl_bill').text('เลขตั๋ว :  ' + bill);
                $('#detail_modal').find('#lbl_main_date').text('งวดวันที่ :  ' + formattedDatetime(main_date, false));
                $('#detail_modal').find('#lbl_cus').text('ลูกค้า :  ' + cus);
                $('#detail_modal').find('#lbl_line').text('ไลน์ส่วนลด :  ' + line);
                $('#detail_modal').find('#lbl_bill_date').text(formattedDatetime(bill_date));
                $("#hd_bill_no").val(id);
                current.id = id;
                current.billId = bill;
                load_detail_table(id, bill).then(() => {
                    $('#detail_modal').modal('show');
                });
            });

        function load_detail_table(id, bill_id) {
            return $.getJSON(`{{ route('bill.index') }}/${id}`, function(data) {
                let n = 0;
                let betReward = 0;
                $('.tb_detail').html('');
                for (const item of data.bet) {
                    n++;
                    const itemStatus = {
                        color: item.won ? 'text-success' : 'text-danger',
                        text: item.won ? 'ถูกรางวัล' : 'ไม่ถูกรางวัล',
                    };
                    if (data.status <= 2) {
                        itemStatus['color'] = 'text-muted';
                        itemStatus['text'] = 'รอออกผล';
                    }
                    const tr = $('<tr/>').append(
                        $('<td/>').addClass('align-middle text-center').text(n),
                        $('<td/>').addClass('align-middle text-center text-danger').text(item.number),
                        $('<td/>').addClass('align-middle text-center').text(item.type),
                        $('<td/>').addClass('align-middle text-center').text(Intl.NumberFormat('th-TH').format(item.amount)),
                        $('<td/>').addClass('align-middle text-center text-success').text(Intl.NumberFormat('th-TH').format(item.discount)),
                        $('<td/>').addClass('align-middle text-center text-danger').text(Intl.NumberFormat('th-TH').format(item.payment)),
                        $('<td/>').addClass('align-middle text-center').text(data.commission_line_detail[item.type] ? numberFormat(data.commission_line_detail[item.type]?.payment) : 'ไม่มีข้อมูล'),
                        $('<td/>').addClass(`align-middle text-center font-weight-bold ${itemStatus.color}`).text(itemStatus.text),
                    );
                    $('.tb_detail').append(tr);
                    if (item.won) {
                        betReward += +item.won;
                    }
                }

                $('#lbl_line').text('ไลน์ส่วนลด :  ' + data.commission_line);

                $('#detail-bet-amount').text(Intl.NumberFormat('th-TH').format(data.amount));
                $('#detail-bet-discount').text(Intl.NumberFormat('th-TH').format(data.discount));
                $('#detail-bet-summary').text(Intl.NumberFormat('th-TH').format(data.payment));
                $('#detail-bet-rewarded').text(Intl.NumberFormat('th-TH').format(betReward));

                bill_detail_payment = data.payment;

                $("#btn_cancel_bill").hide();
                $("#btn_cash").hide();
                $("#btn_confirm_bill").hide();
                $('#btn_cash').hide();
                let status = data.status;
                let pin_stat = data.pin_stat;
                if (status === 4 && data.prize_payment_status === 0) {
                    $('#btn_cash').show();
                }
            });
        }

        function autoCheckpin() {
            let bill = $("#hd_bill_no").val();
            let ref = $("#hd_ref_pin").val();
            let pass = $("#txt_pin").val();
            $.post('main_store.php?cm=autoCheckpin', {
                bill: bill,
                ref: ref,
                pass: pass
            }, function(data) {
                if (data.success) {
                    if (data.check) {
                        swal('ทำรายการเรียบร้อย', ' ', 'success', {
                            buttons: false,
                            timer: 1500
                        });
                        clearInterval(iCountDown);
                        $("#pin_modal").modal("hide");
                        $("#detail_modal").modal("hide");
                        selectStore(document.getElementById('store_select'));
                    } else {

                    }
                }

            }, 'json');
        }

        var timeout_pin = 0;

        function countDown() {
            if ((timeout_pin / 1000) % 5 == 0) {
                autoCheckpin();
            }


            timeout_pin -= 1000;
            var timeA = new Date(); // วันเวลาปัจจุบัน
            var timeB = new Date("April 18,2020 17:10:01"); // วันเวลาสิ้นสุด รูปแบบ เดือน/วัน/ปี ชั่วโมง:นาที:วินาที

            var timeDifference = timeout_pin;
            if (timeDifference >= 0) {
                timeDifference = timeDifference / 1000;
                timeDifference = Math.floor(timeDifference);
                var wan = Math.floor(timeDifference / 86400);
                var l_wan = timeDifference % 86400;
                var hour = Math.floor(l_wan / 3600);
                var l_hour = l_wan % 3600;
                var minute = Math.floor(l_hour / 60);
                var second = l_hour % 60;
                var showPart = document.getElementById('showRemain');
                // showPart.innerHTML="เหลือเวลา "+wan+" วัน "+hour+" ชั่วโมง "
                // +minute+" นาที "+second+" วินาที";

                showPart.innerHTML = "รหัส pin จะหมดอายุภายใน " + minute + " นาที " + second + " วินาที";
                if (wan == 0 && hour == 0 && minute == 0 && second == 0) {
                    clearInterval(iCountDown); // ยกเลิกการนับถอยหลังเมื่อครบ
                    $("#pin_modal").modal("hide");
                    // เพิ่มฟังก์ชันอื่นๆ ตามต้องการ
                }
            }
        }

        function waitTable(elm) {
            let col = elm.find("th").length;
            elm.find('tbody').html(
                $('<td colspan="' + col + '"></td>').append(
                    $('<div></div>').addClass('d-flex justify-content-center my-5').append(
                        $('<i></i>').addClass('fas fa-sync fa-spin fa-3x')
                    )
                )
            );
        }

        async function load_table() {
            let element = await load(`{{ route('store.redeemBills') }}`, '.tb_list');
            element = $(element).find('tr');
            $('.tb_list').html(element);
        }
    </script>
    <script src="https://js.pusher.com/7.0/pusher.min.js"></script>
    {{-- <script>
        $(document).ready(function() {

            var pusher = new Pusher('40f8857ae79f8ffda546', {
                cluster: 'ap1'
            });

            var channel = pusher.subscribe(`reportMinitor.` + {{ Auth::user() - > upline - > id }});
            channel.bind('FormSubmit', function(data) {
                load_table();
            });
        });

    </script> --}}
@endsection