@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;
        }
        tbody.empty-text:empty::after {
            content: 'ไม่มีข้อมูล';
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            padding: 15px 0;
        }
        .bg-gradient {
            background-image: linear-gradient(to bottom, rgba(255,255,255,0.35), rgba(0,0,0,0.05));
        }
    </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">
                    <h3 class="mb-0">รายการ</h3>
                </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>หวยฮานอย</option>
                        <option>หวยฮานอย VIP</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 table-responsive pt-0">
            <table id="summary-per-round-table" class="table table-sm table-hover table-bordered mt-3" style="min-height: 80px;">
                <thead>
                    <tr>
                        <th class="text-center bg-gradient table-dark">รอบวันที่</th>
                        <th class="text-right bg-gradient table-warning">ยอดถูก</th>
                        <th class="text-right bg-gradient table-danger">ยังไม่ขึ้นเงิน</th>
                        <th class="text-right bg-gradient table-success">ขึ้นเงินแล้ว</th>
                    </tr>
                </thead>
                <tbody class="empty-text"></tbody>
            </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">
                        @php
                        $rounds = [];
                        $totalPrized = [];
                        $redeemed = [];
                        $unredeemed = [];
                        $n = 0;
                        @endphp
                        @if ($records->count())
                            @foreach ($records as $key => $item)
                                @php
                                $lotteryRound = $item->lotteryRound;
                                $n++;
                                $billWon = 0;
                                foreach ($item->bet as $bet) {
                                    if (isset($bet['won']) && $bet['won'] !== false) {
                                        $billWon += $bet['won'];
                                    }
                                }
                                if ($billWon) {
                                    $rounds[] = $lotteryRound->display_date;
                                    $totalPrized[$lotteryRound->display_date] = ($totalPrized[$lotteryRound->display_date] ?? 0) + $billWon;
                                    $redeemed[$lotteryRound->display_date] = ($redeemed[$lotteryRound->display_date] ?? 0) + ($item['prize_payment_status'] == 1 ? $billWon : 0);
                                    $unredeemed[$lotteryRound->display_date] = ($unredeemed[$lotteryRound->display_date] ?? 0) + (!$item['prize_payment_status'] ? $billWon : 0);
                                }
                                @endphp
                                <tr data-won="{{ $billWon }}" 
                                    data-lottery-round-id="{{ $item->lottery_round_id}}"
                                    data-display-date="{{ $item->lotteryRound->display_date }}"
                                    data-prize-payment-status="{{ $item['prize_payment_status'] }}">
                                    <td class="align-middle font-weight-bold text-center px-1">
                                        {{ THdatetime($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>
                                        @if ($item->lotteryRound->round_name)
                                            <div class="small mt-1 text-black-50">{{ $item->lotteryRound->round_name }}</div> 
                                        @endif
                                    </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="" class="badge badge-pill badge-{{ redeemStatus($item)['color'] }} text-xs">{{ redeemStatus($item)['text'] }}</span>
                                    </td>
                                    <td class="align-middle text-center font-weight-bold">
                                        {{ number_format($item->amount, 2) }} THB
                                    </td>
                                    <td class="align-middle text-center font-weight-bold text-success">
                                        -{{ number_format($item->discount, 2) }} THB
                                    </td>
                                    <td class="align-middle text-center font-weight-bold text-primary">
                                        {{ number_format($item->payment, 2) }} THB
                                    </td>
                                    <td class="align-middle text-center font-weight-bold text-danger">
                                        {{ number_format($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_encode(billStatus($item), JSON_UNESCAPED_UNICODE) }}">
                                            <i class="fas fa-tasks"></i> จัดการ
                                        </button>
                                    </td>
                                </tr>
                                @if ($n == $records->count())
                                    @php $rounds = array_values(array_unique($rounds)); sort($rounds); @endphp
                                    <script>
                                        window.variable = {
                                            rounds: JSON.parse(`{!! json_encode($rounds) !!}`),
                                            totalPrized: JSON.parse(`{!! json_encode($totalPrized) !!}`),
                                            redeemed: JSON.parse(`{!! json_encode($redeemed) !!}`),
                                            unredeemed: JSON.parse(`{!! json_encode($unredeemed) !!}`),
                                        };
                                        function accumulateAmount(obj) {
                                            return Object.values(obj).reduce((acc, val, n, arr) => {
                                                acc += val;
                                                return acc;
                                            }, 0)
                                        }
                                        function setSummaryTablePerRound(obj) {
                                            const tbody = summaryPerRoundTable.tBodies[0];
                                            tbody.textContent = '';

                                            for (const key in obj.rounds) {
                                                const round = obj.rounds[key];
                                                
                                                const row = tbody.insertRow();
                                                const tdRound = row.insertCell();
                                                const tdBetPrized = row.insertCell();
                                                const tdUnredeemed = row.insertCell();
                                                const tdRedeemed = row.insertCell();

                                                tdRound.textContent = formattedDatetime(round, false);
                                                tdRound.className = 'text-body align-middle text-center';

                                                tdBetPrized.innerHTML = numberFormat(obj.totalPrized[round]) + ' <small>THB</small>';
                                                tdBetPrized.className = 'text-body align-middle text-right font-weight-bold table-warning';

                                                tdUnredeemed.innerHTML = numberFormat(obj.unredeemed[round]) + ' <small>THB</small>';
                                                tdUnredeemed.className = 'text-body align-middle text-right font-weight-bold table-danger';

                                                tdRedeemed.innerHTML = numberFormat(obj.redeemed[round]) + ' <small>THB</small>';
                                                tdRedeemed.className = 'text-body align-middle text-right font-weight-bold table-success';
                                            }

                                        }
                                        window.addEventListener('load', () => {
                                            const totalPrized = accumulateAmount(variable.totalPrized);
                                            const unredeemed = accumulateAmount(variable.unredeemed);
                                            const redeemed = accumulateAmount(variable.redeemed);
                                            document.querySelector('[data-total-prized] span').textContent = numberFormat(totalPrized, 2)
                                            document.querySelector('[data-unredeemed] span').textContent = numberFormat(unredeemed, 2)
                                            document.querySelector('[data-redeemed] span').textContent = numberFormat(redeemed, 2)

                                            setSummaryTablePerRound(variable);
                                        });
                                    </script>
                                @endif
                            @endforeach
                        @else
                            <tr>
                                <td colspan="10" class="text-danger text-center table-danger">ไม่พบข้อมูล</td>
                            </tr>
                        @endif
                    </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>
        const summaryPerRoundTable = document.getElementById('summary-per-round-table');
        let current = {
            id: null,
            billId: null,
        };

        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({rounds, totalPrized, redeemed, unredeemed}) {
            $totalPrized.textContent = numberFormat(accumulateAmount(totalPrized), 2);
            $redeemed.textContent = numberFormat(accumulateAmount(redeemed), 2);
            $unredeemed.textContent = numberFormat(accumulateAmount(unredeemed), 2);
            setSummaryTablePerRound({rounds, totalPrized, redeemed, unredeemed})
        }

        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 = {
                    rounds: [],
                    totalPrized: {},
                    redeemed: {},
                    unredeemed: {},
                };
                for (const el of tbody.querySelectorAll(`td:nth-child(${nthChildOfSearchColumn})`)) {
                    const tr = el.closest('tr');
                    const displayDate = tr.dataset.displayDate;
                    if (!input.value) {
                        tr.classList.remove(`${filterFor}-found`, `${filterFor}-not-found`);
                        if (tr.className.includes('-not-found')) continue;

                        summary.rounds.push(displayDate);
                        const won = JSON.parse(tr.dataset.won);
                        const prizePaymentStatus = JSON.parse(tr.dataset.prizePaymentStatus);
                        summary.totalPrized[displayDate] = (summary.totalPrized[displayDate] || 0) + won;
                        summary.redeemed[displayDate] = (summary.redeemed[displayDate] || 0) + (prizePaymentStatus === 1 ? won : 0);
                        summary.unredeemed[displayDate] = (summary.unredeemed[displayDate] || 0) + (prizePaymentStatus === 0 ? won : 0);
                        continue;
                    }
                    const found = strict ? el.textContent.trim() === input.value : el.textContent.trim().includes(input.value);

                    if (found) {
                        tr.classList.add(`${filterFor}-found`)
                        tr.classList.remove(`${filterFor}-not-found`);
                        if (tr.className.includes('-not-found')) continue;

                        summary.rounds.push(displayDate);
                        const won = JSON.parse(tr.dataset.won);
                        const prizePaymentStatus = JSON.parse(tr.dataset.prizePaymentStatus);
                        summary.totalPrized[displayDate] = (summary.totalPrized[displayDate] || 0) + won;
                        summary.redeemed[displayDate] = (summary.redeemed[displayDate] || 0) + (prizePaymentStatus === 1 ? won : 0);
                        summary.unredeemed[displayDate] = (summary.unredeemed[displayDate] || 0) + (prizePaymentStatus === 0 ? won : 0);
                    } else {
                        tr.classList.add(`${filterFor}-not-found`);
                        tr.classList.remove(`${filterFor}-found`)
                    }
                }
                summary.rounds = [...new Set(summary.rounds)];
                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, true);
        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");
                                load_table();
                            } 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);
            });

            $("#detail_modal").on('hide.bs.modal', function() {
                $("#btn_cancel_bill").hide();
                $("#btn_cash").hide();
                $("#btn_confirm_bill").hide();
                $('.tb_detail').html("");
            });

            $("#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");
                    load_table();
                }, () => {
                    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");
                                load_table();
                            } 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');
            console.log(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 totalPrized = 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(numberFormat(item.amount, 2)),
                        $('<td/>').addClass('align-middle text-center text-success').text(numberFormat(item.discount, 2)),
                        $('<td/>').addClass('align-middle text-center text-danger').text(numberFormat(item.payment, 2)),
                        $('<td/>').addClass('align-middle text-center').text(numberFormat(item.paymentRate ?? 0, 2)),
                        $('<td/>').addClass(`align-middle text-center font-weight-bold ${itemStatus.color}`).text(itemStatus.text),
                    );
                    $('.tb_detail').append(tr);
                    if (item.won) {
                        totalPrized += +item.won;
                    }
                }

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

                $('#detail-bet-amount').text(numberFormat(data.amount), 2);
                $('#detail-bet-discount').text(numberFormat(data.discount), 2);
                $('#detail-bet-summary').text(numberFormat(data.payment), 2);
                $('#detail-bet-rewarded').text(numberFormat(totalPrized), 2);

                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");
                        load_table();
                    } 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");
                    // เพิ่มฟังก์ชันอื่นๆ ตามต้องการ
                }
            }
        }

        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