@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,
        .lottery-round-not-found,
        .lottery-not-found,
        .number-not-found,
        .type-not-found,
        .status-not-found {
            display: none !important;
        }
    </style>
    <div class="card">
        <div class="card-body border-0">
            <div class="form-row align-items-center">
                <div class="col">
                    <h3 class="mb-0">ตั้งค่าการปริ้นท์</h3>
                </div>
                <div class="col text-right">
                    <select name="lstPrinters" class="form-control" id="lstPrinters" onchange="showSelectedPrinterInfo();">
                        <option disabled selected>ไม่พบเครื่องปริ้นท์</option>
                    </select>
                </div>
                <div class="col text-right">
                    <select name="lstPrinterTrays" class="form-control" id="lstPrinterTrays">
                        <option disabled selected>ไม่พบเครื่องปริ้นท์</option>
                    </select>
                </div>
                <div class="col text-right">
                    <select name="lstPrinterPapers" class="form-control" id="lstPrinterPapers">
                        <option disabled selected>ไม่พบเครื่องปริ้นท์</option>
                    </select>
                </div>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-header border-0">
            <div class="form-row justify-content-end align-items-center">
                <div class="mb-2 col text-right">
                    <input id="search_bill" type="text" class="form-control" name="search" placeholder="ค้นหา..." oninput="filterBill(this)">
                </div>
                <div class="mb-2 col-auto text-right">
                    <select id="country" class="form-control" name="country" onchange="filterLottery(this)">
                        <option selected="" value="">ทุกหวย</option>
                        @foreach ($lotteries as $lottery)
                            <option value="{{ $lottery->country }}">{{ lotteryName($lottery->country) }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="mb-2 col-auto text-right">
                    <select id="lottery-round-filter" class="form-control" name="lottery_round" onchange="filterLotteryRound(this)">
                        <option selected="" value="">ทุกรอบ</option>
                        @foreach ($lotteryRounds->groupBy('country') as $country => $groupedlotteryRounds)
                        <optgroup data-country="{{ $country }}" label="{{ lotteryName($country) }}">
                            @foreach ($groupedlotteryRounds as $lotteryRound)
                                <option value="{{ $lotteryRound->id }}">{{ lotteryName($lotteryRound->country) . ': ' . $lotteryRound->display_date . ($lotteryRound->round_name ? " {$lotteryRound->round_name}" : '') }}</option>
                            @endforeach
                            </optgroup>
                        @endforeach
                    </select>
                </div>
                <div class="mb-2 col-auto text-right">
                    <input id="search_number" name="lotto_number" type="text" class="form-control" placeholder="เลขแทง..." oninput="filterNumber(this)">
                </div>
                <div class="mb-2 col-auto text-right">
                    <select id="search_type" class="form-control" name="lotto_type" onchange="filterLotteryType(this)">
                        <option selected="" value="">ทุกชนิดหวย</option>
                        <option>3 ตัวบน</option>
                        <option>3 ตัวบนโต๊ด</option>
                        <option>3 ตัวหน้า</option>
                        <option>3 ตัวล่าง</option>
                        <option>2 ตัวบน</option>
                        <option>2 ตัวล่าง</option>
                        <option>2 ตัวบนโต๊ด</option>
                        <option>วิ่ง 3 ตัวบน</option>
                        <option>วิ่ง 2 ตัวบน</option>
                        <option>วิ่ง 2 ตัวล่าง</option>
                        <option>3 ตัวแรกบน</option>
                        <option>3 ตัวแรกบนโต๊ด</option>
                        <option>2 ตัวแรกบน</option>
                        <option>4 ตัวบน</option>
                        <option>4 ตัวบนโต๊ด</option>
                        <option>4 ตัวแรกบน</option>
                        <option>4 ตัวแรกบนโต๊ด</option>
                        <option>2 ตัวบนอุดร</option>
                        <option>2 ตัวล่างอุดร</option>
                    </select>
                </div>
                <div class="mb-2 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 value="{{ App\Bill::STATUS_NOT_CONFIRM }}">รอชำระเงิน</option>
                        <option value="{{ App\Bill::STATUS_CONFIRMED }}">รอออกรางวัล</option>
                        <option value="{{ App\Bill::STATUS_WON }}">ถูกรางวัล</option>
                        <option value="{{ App\Bill::STATUS_LOST }}">ไม่ถูกรางวัล</option>
                        <option value="{{ App\Bill::STATUS_CANCELLED }}">ยกเลิก</option>
                        {{-- <option>ขึ้นเงินแล้ว</option>
                        <option>ยังไม่ขึ้นเงิน</option> --}}
                    </select>
                </div>
            </div>
        </div>
        <div class="card-body table-responsive pb-3 pt-0">
            <table class="table table-sm table-hover table-bordered">
                <thead>
                    <tr>
                        <th class="align-middle text-center font-weight-bold table-warning" data-total-bet>ยอดแทง: <span>0.00</span>
                            THB</th>
                        <th class="align-middle text-center font-weight-bold table-primary" data-total-discount>ส่วนลด: <span>0.00</span>
                            THB</th>
                        <th class="align-middle text-center font-weight-bold table-danger" data-summary>สุทธิ: <span>0.00</span>
                            THB</th>
                        <th class="align-middle text-center font-weight-bold table-success" data-total-prized>ยอดถูก:
                            <span>0.00</span> THB</th>
                        <th class="align-middle text-center font-weight-bold table-info" data-prize-summary>
                            ยอดถูกสุทธิ: <span>0.00</span> THB</th>
                    </tr>
                </thead>
            </table>
        </div>
        <div class="card-body pt-1">
            <div class="mb-2">
                <button id="btn_cash_all" type="button" class="btn btn-danger mb-1" style="border-radius: 25px;">
                    <i class="fas fa-hand-holding-usd"></i> ชำระเงินรายการที่เลือก
                </button>
                <button id="btn_print_all" type="button" class="btn btn-primary mb-1" style="border-radius: 25px;">
                    <i class="fas fa-print"></i> พิมพ์รายการที่เลือก
                </button>
            </div>
            <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-center align-middle">
                                <div class="custom-checkbox ml-3">
                                    <input type="checkbox" class="custom-control-input" id="Check_All" onchange="checkAll(this)">
                                    <label class="custom-control-label" for="Check_All"></label>
                                </div>
                            </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>
                            <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="tb_list">
                        @php
                            $betAmount = 0;
                            $betDiscount = 0;
                            $betSummary = 0;
                            $betReward = 0;
                            $betTotal = 0;
                            $n = 0;
                        @endphp
                        @if ($records->count())
                            @foreach ($records as $key => $item)
                                @php
                                    $n++;
                                    if ($item->status !== App\Bill::STATUS_CANCELLED){
                                        $betAmount += $item->amount;
                                        $betDiscount += $item->discount;
                                        $betSummary += $item->payment;
                                    }
                                    foreach ($item->bet as $bet) {
                                        if (isset($bet['won']) && $bet['won'] !== false) {
                                            $betReward += $bet['won'];
                                        }
                                    }
                                @endphp
                                <tr @if ($item->prize_payment_status === App\Bill::PRIZE_PAYMENT_COMPLETED) hidden @endif
                                    data-bill-id="{{ $item->bill_id }}"
                                    data-country="{{ $item->country }}"
                                    data-lottery-round-id="{{ $item->lotteryRound->id }}"
                                    data-status="{{ $item->status }}"
                                    data-bet="{{ json_encode($item->bet, JSON_UNESCAPED_UNICODE) }}"
                                >
                                    <td class="text-center align-middle">
                                        <div class="custom-checkbox ml-3">
                                            <input id="Check_{{ $key }}" type="checkbox" class="cls_checkbox custom-control-input" data-bill-id="{{ $item->bill_id }}" data-id="{{ $item->id }}" data-status='{{ $item->status }}' data-print-status='{{ $item->print_status }}'>
                                            <label class="custom-control-label" for="Check_{{ $key }}"></label>
                                        </div>
                                    </td>
                                    <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 data-country="{{ $item->country }}" 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 text-warning font-weight-bold">
                                        {{ $item->user->username }}
                                    </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-{{ billStatus($item)['color'] }} text-xs">{{ billStatus($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">
                                        <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>
                                        @if ($item->lotteryRound->status)
                                            <a class="btn btn-success btn-sm cls_btn_detail_add text-white"
                                                href="{{ route('store.staffBet') }}?phone={{ $item->phone }}"
                                                data-bill="{{ $item->bill_id }}"
                                                target="_blank"><i class="fas fa-plus"></i> เพิ่มตั๋ว</a>
                                        @endif
                                    </td>
                                </tr>
                                @if ($n == $records->count())
                                    <script>
                                        window.variable = {
                                            betAmount: {{ $betAmount }},
                                            betDiscount: {{ $betDiscount }},
                                            betSummary: {{ $betSummary }},
                                            betReward: {{ $betReward }},
                                            betTotal: {{ $betReward ? $betSummary - $betReward : 0 }},
                                        };
                                    </script>
                                @endif
                            @endforeach
                        @else
                            <tr>
                                <td colspan="10" class="text-danger text-center table-danger">ไม่พบข้อมูล</td>
                            </tr>
                            <script>
                                window.variable = {
                                    betAmount: {{ $betAmount }},
                                    betDiscount: {{ $betDiscount }},
                                    betSummary: {{ $betSummary }},
                                    betReward: {{ $betReward }},
                                    betTotal: {{ $betReward ? $betSummary - $betReward : 0 }},
                                };
                            </script>
                        @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="modal-header d-block p-0">
                    <div class="form-row mt-3">
                        <div class="col-sm-12 text-center"></div>
                    </div>
                    <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 class="col-sm-4 text-center"><h4 id="lbl_line"></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">
                    <!-- <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button> -->
                </div>
                <div class="modal-body p-0">
                    <div class="table-responsive h-100">
                        <table class="table table-sm table-hover mb-0">
                            <thead>
                                <tr>
                                    <th class="align-middle text-center border-top-0">ลำดับ</th>
                                    <th class="align-middle text-center border-top-0">เลข</th>
                                    <th class="align-middle text-center border-top-0">ประเภท</th>
                                    <th class="align-middle text-center border-top-0">แทง</th>
                                    <th class="align-middle text-center border-top-0">ส่วนลด</th>
                                    <th class="align-middle text-center border-top-0">จ่าย</th>
                                    <th class="align-middle text-center border-top-0">จ่ายบาทละ</th>
                                    <th class="align-middle text-center border-top-0">สถานะ</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">
                    <div class="row">
                        <div class="col-12 col-lg d-flex align-items-baseline justify-content-center ml-auto">
                            <h2 class="cls-cash mx-1">รับเงิน</h2>
                            <input type="number" class="cls-cash clsNumberOnly txt_cash" min="0" value maxlength="6">
                            <h2 class="cls-cash mx-1">ทอนเงิน</h2>
                            <input type="number" class="cls-cash clsNumberOnly txt_cash" min="0" value maxlength="6" readonly>
                        </div>
                        <div class="col-12 col-lg-auto text-center">
                            <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-success">
                                <i class="fas fa-check"></i> ชำระเงิน</button>
                            <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="" id="btn_print" class="btn btn-dark"><i class="fas fa-print"></i>
                                พิมพ์</button>
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">ปิด</button>
                        </div>
                    </div>
                </div>
        </div>
        </form>
    </div>

    <div class="modal fade" id="bill_select_modal" tabindex="-1" data-backdrop="static" role="dialog"
        aria-labelledby="agent_modal" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered align-items-stretch" role="document">
            <form id="bill-payments-form" class="modal-content">
                <div class="table_head_select_bill">
                    <div class="form-row mt-3">
                        <div class="col-sm-12 text-center">
                            <h2 class="text-danger">รายการชำระเงิน</h2>
                        </div>
                    </div>
                </div>
                <div class="modal-body p-0">
                    <div class="table-responsive h-100">
                        <table id="table_bill_select_cash" class="table table-sm table-hover pl-2 pr-2">
                            <thead>
                                <tr>
                                    <th class="align-middle text-center">เลขตั๋ว</th>
                                    <th class="align-middle text-center">โทร</th>
                                    <th class="align-middle text-right">ยอดแทง</th>
                                    <th class="align-middle text-right">ส่วนลด</th>
                                    <th class="align-middle text-right">สุทธิ</th>
                                    <th class="align-middle text-center">สถานะ</th>
                                    <th class="align-middle text-center d-none" hidden>Round ID</th>
                                </tr>
                            </thead>
                            <tbody class="tb_select_bill"></tbody>
                        </table>
                    </div>
                </div>
                <div class="modal-footer p-0">
                    <table class="table mb-0">
                        <tbody class="table_end_select_bill">
                            <tr>
                                <td class="text-right p-1"><b>ยอดแแทง</b></td>
                                <td class="text-center p-1"><b id="total-bet-amount">0.00</b></td>
                                <td class="text-right p-1"><b>หักส่วนลด</b></td>
                                <td class="text-center p-1"><b id="total-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="total-bet-summary" class="text-red">0.00</b></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="modal-footer">
                    <h2 class="cls-cash">รับเงิน</h2>
                    <input type="text" class="border-dark cls-cash clsNumberOnly txt_cash_all" value="" maxlength="6" oninput="this.value=this.value.replace(/\D+/g, '')">
                    <h2 class="cls-cash">ทอน</h2>
                    <input id="cash-all-change" type="text" class="border-dark cls-cash clsNumberOnly txt_cash" disabled value="" maxlength="6" oninput="this.value=this.value.replace(/\D+/g, '')">
                    <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="" id="btn_confirm_bill_all" class="btn btn-success">
                        <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="otp_modal" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="otp_modal"
        aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered" role="document" style="width:50%;">
            <form id="detail_form" class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">ยืนยันรหัส OTP</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div style="overflow: scroll; overflow-x: hidden; overflow-y: hidden; height:450px;">
                        <div class="text-center mt-2">
                            <div class="text-center text-danger" id="txt_ref_otp"></div>
                            <input type="hidden" id="hd_ref_otp">
                        </div>
                        <div class="text-center mt-2">
                            <input type="text" id="txt_otp" class="clsNumberOnly" setx=""
                                style="width: 150px; font-size: 25px; text-align:center; color: #525f7f;" value=""
                                maxlength="4">

                            <div class="text-center mt-2">
                                <button type="button" id="btn_refresh_otp" class="btn btn-success">
                                    <i class="fa fa-refresh"></i>ขอรับรหัสผ่านใหม่</button>
                            </div>
                            <div class="text-center mt-5">
                                <div class="text-center text-danger" id="showRemain"></div>
                            </div>

                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" id="btn_confirm_otp" class="btn btn-success"><i class="fas fa-check"></i>
                            ยืนยัน</button>
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">ปิด</button>
                    </div>

                </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">
                    <div class="text-center">
                        <div class="row">
                            <div class="col-sm-12 text-center">
                                <h1 class="text-danger">สลิป</h1>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-body">

                    <div class="card-body table-responsive py-3">
                        <!-- <div class="text-center"><p style="font-size: 1.3rem" class="mt-0">รายการเล่นหวย</p></div><hr class="mb-1"> -->
                        <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" onclick="$('#dialog_preview').modal('hide');">ปิด</button>
                </div>
            </form>
        </div>
    </div>

    <div class="modal fade" id="bill_reason_modal" index="10" tabindex="-1" data-backdrop="static" role="dialog"
        aria-labelledby="agent_modal" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <form id="edit_ag_data3" class="modal-content">
                <div class="table_head_select_bill">
                    <div class="form-row mt-3">
                        <div class="col-sm-12 text-center">
                            <h2 class="text-danger">กรุณาระบุเหตุผล</h2>
                        </div>
                    </div>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <input type="text" id="txt_reason" class="form-control" value="" maxlength="255"
                            placeholder="ระบุเหตุผล">
                    </div>
                    <div class="form-group require_pin">
                        <input type="text" id="txt_pin" class="form-control" value="" maxlength="6"
                            placeholder="กรุณาระบุรหัส PIN">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger text-nowrap" data-dismiss="modal"
                        onclick="$('#detail_modal').modal('show');"><i class="fas fa-times"></i>
                        ยกเลิก</button>
                    <button type="button" id="btn_cancel_ok" class="btn btn-success btn-block ml-1">
                        <i class="fas fa-check"></i> ยืนยัน</button>
                </div>
            </form>
        </div>
    </div>
@endsection

@section('scripts')
    <script src="{{ asset('assets/js/JSPrintManager/scripts/zip.js') }}"></script>
    <script src="{{ asset('assets/js/JSPrintManager/scripts/zip-ext.js') }}"></script>
    <script src="{{ asset('assets/js/JSPrintManager/scripts/deflate.js') }}"></script>
    <script src="{{ asset('assets/js/JSPrintManager/scripts/JSPrintManager.js') }}"></script>
    <script>
        const storeId = {{ Auth::user()->store_id }};
        const $lotteryRoundFilter = document.getElementById('lottery-round-filter')

        let filterBillTimer;
        let filterNumberTimer;

        const $totalBet = document.querySelector('[data-total-bet] span');
        const $totalDiscount = document.querySelector('[data-total-discount] span');
        const $summary = document.querySelector('[data-summary] span');
        const $totalPrized = document.querySelector('[data-total-prized] span');
        const $prizeSummary = document.querySelector('[data-prize-summary] span');

        function updateSummary({totalBet, totalDiscount, summary, totalPrized, prizeSummary}) {
            $totalBet.textContent = numberFormat(totalBet, 2);
            $totalDiscount.textContent = numberFormat(totalDiscount * -1, 2);
            $summary.textContent = numberFormat(summary, 2);
            $totalPrized.textContent = numberFormat(totalPrized, 2);
            $prizeSummary.textContent = numberFormat(prizeSummary, 2);
        }

        function filter (cssPrefix, callback) {
            const table = document.getElementById('tb_cus_bill');
            const tbody = table.tBodies[0];
            const summary = {
                totalBet: 0,
                totalDiscount: 0,
                summary: 0,
                totalPrized: 0,
                prizeSummary: 0,
            };
            for (const tr of tbody.rows) {
                const found = callback(tr);
                if (found) {
                    if (+tr.dataset.status !== 2) {
                        summary.totalBet += +tr.cells[7].textContent.trim().replace(' THB', '').replace(',','');
                        summary.totalDiscount += +tr.cells[8].textContent.trim().replace(' THB', '').replace(',','')
                        summary.summary += +tr.cells[9].textContent.trim().replace(' THB', '').replace(',','')
                        const bets = JSON.parse(tr.dataset.bet);
                        for (const bet of bets) {
                            if (!bet.won) continue;
                            summary.totalPrized += bet.won;
                        }
                    }
                    tr.classList.add('type-found')
                    tr.classList.remove('type-not-found');
                } else {
                    tr.classList.add('type-not-found');
                    tr.classList.remove('type-found')
                }
                summary.prizeSummary = summary.totalPrized ? summary.summary - summary.totalPrized : 0;
                updateSummary(summary);
            }
        }

        const filterBill = input => filter('bill', tr => !input.value ? true : tr.dataset.billId.includes(input.value));
        const filterLotteryRound = select => filter('lottery-round', tr => !select.value ? true : tr.dataset.lotteryRoundId == select.value);
        const filterNumber = input => filter('number', tr => input.value ? tr.dataset.bet.includes(`"number":"${input.value}"`) : true);
        const filterLotteryType = select => filter('type', tr => select.value ? tr.dataset.bet.includes(`"${select.value}"`) : true);
        const filterStatus = select => filter('status', tr => select.value ? tr.dataset.status == select.value : true);
        const filterLottery = select => {
            $lotteryRoundFilter.value = '';
            $lotteryRoundFilter.onchange();
            filter('lottery', tr => !select.value ? true : tr.dataset.country === select.value)
            for ($optGroup of $lotteryRoundFilter.children) {
                if ($optGroup.nodeName !== 'OPTGROUP') continue;
                $optGroup.hidden = !select.value ? false : $optGroup.dataset.country !== select.value;
            }
        };

        const checkAll = async checkbox => {
            for (const el of document.querySelectorAll('.cls_checkbox')) {
                el.checked = checkbox.checked;
            }
        }

        window.addEventListener('load', () => {
            $('[data-total-bet] span').text(numberFormat(variable.betAmount, 2));
            $('[data-total-discount] span').text(numberFormat(variable.betDiscount, 2));
            $('[data-summary] span').text(numberFormat(variable.betSummary, 2));
            $('[data-total-prized] span').text(numberFormat(variable.betReward, 2));
            $('[data-prize-summary] span').text(numberFormat(variable.betTotal, 2));
        });

        let current = {
            id: null,
            billId: null,
        };

        let selectMultipleId = [];

        function print(link) {
            if (jspmWSStatus()) {

            //Create a ClientPrintJob
            var cpj = new JSPM.ClientPrintJob();

            //Set Printer info
            var myPrinter = new JSPM.InstalledPrinter($('#lstPrinters').val());
            myPrinter.paperName = $('#lstPrinterPapers').val();
            myPrinter.trayName = $('#lstPrinterTrays').val();

            cpj.clientPrinter = myPrinter;

            //Set PDF file
            var my_file = new JSPM.PrintFilePDF(link, JSPM.FileSourceType.URL, 'MyFile.pdf', 1);
            // my_file.printRotation = JSPM.PrintRotation[$('#lstPrintRotation').val()];
            // my_file.printRange = $('#txtPagesRange').val();
            // my_file.printAnnotations = $('#chkPrintAnnotations').prop('checked');
            // my_file.printAsGrayscale = $('#chkPrintAsGrayscale').prop('checked');
            // my_file.printInReverseOrder = $('#chkPrintInReverseOrder').prop('checked');

            cpj.files.push(my_file);

            //Send print job to printer!
            return cpj.sendToClient();

            }
        }

        function showSelectedPrinterInfo() {
            // get selected printer index
            var idx = $("#lstPrinters")[0].selectedIndex;
            // get supported trays
            // var options = '<option>Document[Feed,Cut]</option>';
            var options = '';
            for (var i = 0; i < clientPrinters[idx].trays.length; i++) {
            options += '<option>' + clientPrinters[idx].trays[i] + '</option>';
            }
            $('#lstPrinterTrays').html(options);
            // get supported papers
            options = '';
            for (var i = 0; i < clientPrinters[idx].papers.length; i++) {
            options += '<option>' + clientPrinters[idx].papers[i] + '</option>';
            }
            $('#lstPrinterPapers').html(options);
        }

        function jspmWSStatus() {
            if (JSPM.JSPrintManager.websocket_status == JSPM.WSStatus.Open)
            return true;
            else if (JSPM.JSPrintManager.websocket_status == JSPM.WSStatus.Closed) {
            // alert('JSPrintManager (JSPM) is not installed or not running! Download JSPM Client App from https://neodynamic.com/downloads/jspm');
            return false;
            }
            // else if (JSPM.JSPrintManager.websocket_status == JSPM.WSStatus.BlackListed) {
            //     alert('JSPM has blacklisted this website!');
            //     return false;
            // }
        }
        // JSPM.JSPrintManager.license_url = "../jspm";
        JSPM.JSPrintManager.auto_reconnect = true;
        JSPM.JSPrintManager.start();
        JSPM.JSPrintManager.WS.onStatusChanged = function () {
            if (jspmWSStatus()) {
                //get client installed printers
                JSPM.JSPrintManager.getPrintersInfo().then(function(printersList) {
                    clientPrinters = printersList;
                    var options = '';
                    var idx;
                    var selectedPrinterName;
                    
                    for (var i = 0; i < clientPrinters.length; i++) {
                        let printerNameSet = clientPrinters[i].name;
                        // options += '<option>' + clientPrinters[i].name + '</option>';
                        if(printerNameSet.indexOf(`{{ $selectedPrinter }}`) >= 0){
                            idx = i;
                            selectedPrinterName = clientPrinters[i].name;
                            options = '<option>' + clientPrinters[i].name + '</option>';
                            break;
                        }
                    }
                    $('#lstPrinters').html(options);

                    var trayId = {{ $selectedTrayId }};
                    var paperId = {{ $selectedPaperId }};

                    var options = '<option>' + clientPrinters[idx].trays[trayId] + '</option>';
                    $('#lstPrinterTrays').html(options);

                    options = '';
                    options += '<option>' + clientPrinters[idx].papers[paperId] + '</option>';
                    $('#lstPrinterPapers').html(options);
                });
                
                // JSPM.JSPrintManager.getPrintersInfo().then(function(printersList) {
                //     clientPrinters = printersList;
                //     var printerOptions = '';
                //     var trayOptions = '';
                //     var paperOptions = '';
                //     for (var i = 0; i < clientPrinters.length; i++) {
                //         printerOptions += '<option>' + clientPrinters[i].name + '</option>';
                //         for (const trayKey in clientPrinters[i].trays) {
                //             trayOptions += '<option>' + clientPrinters[i].trays[trayKey] + '</option>';
                //         }
                //         for (const paperKey in clientPrinters[i].papers) {
                //             paperOptions += '<option>' + clientPrinters[i].papers[paperKey] + '</option>';
                //         }
                //     }
                //     $('#lstPrinters').html(printerOptions);
                //     $('#lstPrinterTrays').html(trayOptions);
                //     $('#lstPrinterPapers').html(paperOptions);

                // });
            }
        };

        $(document).ready(function() {
            document.querySelector('#btn_print_all').addEventListener('click', async e => {
                e.preventDefault();
                const all = [];
                const printable = [];
                const cancelled = [];
                const printed = [];
                const paymentNeeded = [];
                for (const el of document.querySelectorAll('.cls_checkbox:checked')) {
                    all.push(el.dataset.id);
                    if (+el.dataset.status === 1 && +el.dataset.printStatus === 0) {
                        printable.push(el.dataset.billId);
                    } else if (+el.dataset.status === 0) {
                        paymentNeeded.push(el.dataset.billId);
                    } else if (+el.dataset.status === 2) {
                        cancelled.push(el.dataset.billId)
                    } else if (+el.dataset.printStatus === 1) {
                        printed.push(el.dataset.billId);
                    }
                }
                let text = `คุณเลือกบิลทั้งหมด ${ all.length } บิล\n\n✓ บิลสามารถพิมพ์ได้ ${ printable.length } ใบ\n`;
                for (const i in printable) {
                    text = text + printable[i] + `\n`;
                }
                text = text + `\n✗ บิลพิมพ์ไปแล้ว ${ printed.length } ใบ\n`;
                for (const i in printed) {
                    text = text + printed[i] + `\n`;
                }
                text = text + `\n✗ บิลยกเลิก ${ cancelled.length } ใบ\n`;
                for (const i in cancelled) {
                    text = text + cancelled[i] + `\n`;
                }
                text = text + `\n✗ บิลยังไม่ชำระเงิน ${ paymentNeeded.length } ใบ\n`;
                for (const i in paymentNeeded) {
                    text = text + paymentNeeded[i] + `\n`;
                }
                text = text + `\nคุณยืนยันที่จะพิมพ์หรือไม่`;
                
                const confirm = await swal({
                    title: 'ยืนยันการพิมพ์',
                    text: text,
                    icon: 'warning',
                    dangerMode: printed.length || cancelled.length,
                    buttons: {
                        cancel: 'ยกเลิก',
                        confirm: {
                            text: 'ยืนยัน',
                            closeModal: false,
                        }
                    },
                });

                if (!confirm) return;

                const printWithDiscount = await swal('พิมพ์ตั๋ว', ' ', 'info', {
                    buttons: {
                        cancel: 'ไม่มีส่วนลด',
                        confirm: {
                            text: 'มีส่วนลด',
                            closeModal: false,
                        }
                    }
                });

                const jsonBill = JSON.stringify(all);
                const url = `{{ route('bill.index') }}/receipt/0?ids=${jsonBill}${printWithDiscount ? `&show_discount=1` : ``}`;
                const printResult = await print(url);
                // window.open(url);
                console.log(printResult);

                if (printResult === 'OK') {
                    swal('ดำเนินการสำเร็จ', 'สั่งพิมพ์เรียบร้อย', 'success');
                    for (const el of document.querySelectorAll('input[type=checkbox]')) {
                        el.checked = false;
                    }
                    selectStore(document.querySelector('#store_select'));
                } else {
                    swal('ขออภัย', 'พบปัญหาในขั้นตอนการพิมพ์บิล', 'error');
                }
                
                return true;
            });


            $("#btn_cancel_bill").click(function() {
                $('#bill_reason_modal').modal('show');
                $("#txt_reason").val("");
                $("#txt_reason").focus();
            });

            $("#btn_cancel_ok").click(function() {
                let bill = $("#hd_bill_no").val();
                let reason = $("#txt_reason").val();
                let pin = $("#txt_pin").val();
                if (reason == "") {
                    const target = reason == "" ? 'เหตุผล' : 'รหัส PIN';
                    swal('ขออภัย', `กรุณาระบุ${target}`, 'warning').then((sure) => {
                        $("#txt_reason").focus();
                    });
                    return false;
                }

                $.ajax({
                    url: `{{ route('bill.index') }}/${bill}`,
                    method: 'DELETE',
                    dataType: 'JSON',
                    data: {
                        pin: pin,
                        reason: reason,
                    },
                    success: function(res){
                        if(res.success){
                            swal('ยกเลิกโพยเรียบร้อย', ' ', 'success', { buttons: false, timer: 1500 });
                            $("#detail_modal").modal("hide");
                            $('#bill_reason_modal').modal('hide');
                            load_table();
                        }else{
                            swal('ยกเลิกโพยไม่สำเร็จ', res.text, 'error');
                        }
                    }
                });
            });

            $("#btn_cash").click(function() {
                let bill = $("#hd_bill_no").val();

                $.post('main_store.php?cm=checkBetOTP', {
                    bill: bill
                }, function(d) {

                    if (d.success) {
                        if (d.check) {
                            $("#txt_otp").val("");
                            $("#txt_ref_otp").text("หมายเลขอ้างอิง : " + d.ref);
                            $("#hd_ref_otp").val(d.ref);

                            let difftime = d.time;
                            let time = difftime.split(":");
                            //alert(difftime);
                            let m = time[1];
                            let s = time[2];

                            timeout_otp = (1000 * 60 * 5) - (1000 * 60 * m) + (1000 * s);

                            iCountDown = setInterval("countDown()", 1000);
                            $("#otp_modal").modal("show");
                            $("#txt_otp").focus();
                        } else {
                            let msg = "ยืนยันการทำรายการ?";
                            if (d.send) {
                                msg = "เกินเวลาที่กำหนด ยืนยันการทำรายการอีกครั้ง?";
                            }
                            swal(msg, ' ', 'warning', {
                                buttons: ['ยกเลิก', 'ยืนยัน']
                            }).then((sure) => {
                                if (sure) {
                                    //$.post('main_store.php?cm=generateOTP', {bill:bill}, function(data){
                                    $.post('Mailer/send_otp.php', {
                                        bill: bill
                                    }, function(data) {
                                        if (data.success) {
                                            $("#txt_otp").val("");
                                            $("#txt_ref_otp").text(
                                                "หมายเลขอ้างอิง : " + data.ref);
                                            $("#hd_ref_otp").val(data.ref);
                                            timeout_otp = 1000 * 60 * 5;
                                            //timeout_otp = 10000;
                                            iCountDown = setInterval("countDown()",
                                                1000);
                                            $("#otp_modal").modal("show");
                                            $("#txt_otp").focus();
                                        }
                                    }, 'json');
                                }
                            });
                        }

                    }
                }, 'json');



            });

            $("#btn_refresh_otp").click(function() {
                clearInterval(iCountDown);
                let bill = $("#hd_bill_no").val();
                //$.post('main_store.php?cm=generateOTP', {bill:bill}, function(data){
                $.post('Mailer/send_otp.php', {
                    bill: bill
                }, function(data) {
                    if (data.success) {
                        $("#txt_otp").val("");
                        $("#txt_ref_otp").text("หมายเลขอ้างอิง : " + data.ref);
                        $("#hd_ref_otp").val(data.ref);
                        timeout_otp = 1000 * 60 * 5;
                        //timeout_otp = 10000;
                        iCountDown = setInterval("countDown()", 1000);
                        //$("#otp_modal").modal("show");
                        $("#txt_otp").focus();
                    }
                }, 'json')

            });

            $('.txt_cash:eq(0)').on('keyup', function() {
                if ($(this).val() == '' || $(this).val() == null) {
                    var result = 0;
                } else {
                    var total = parseFloat(bill_detail_payment);
                    var change = parseFloat($(this).val());
                    var result = parseFloat(change - total);

                    if (result <= 0) {
                        result = 0;
                    }
                }
                $('.txt_cash:eq(1)').val(result.toFixed(2));
                // console.log(total, change, result.toFixed(2));
            });

            $(".txt_cash:eq(0)").keypress(function(event) {

                var keycode = (event.keyCode ? event.keyCode : event.which);
                if (keycode == '13') {
                    $("#btn_confirm_bill").trigger("click");
                    event.preventDefault();
                }

            });

            $(".txt_cash_all").keypress(function(event) {
                var keycode = (event.keyCode ? event.keyCode : event.which);

                if (keycode == '13') {
                    $("#btn_confirm_bill_all").trigger("click");
                    event.preventDefault();
                }

            });

            $('.txt_cash_all').on('input', e => {
                const cash = +e.target.value;

                const totalBet = +document.getElementById('total-bet-summary').textContent.trim().replaceAll(',', '');
                const changeInput = document.getElementById('cash-all-change');
                changeInput.value = cash - totalBet;
            });

            $("#detail_modal").on('shown.bs.modal', function() {
                $(".txt_cash:eq(0)").focus();
            });

            $("#bill_select_modal").on('shown.bs.modal', function() {
                $(".txt_cash_all").focus();
            });


            $("#otp_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_otp").keypress(function(e) {
                if (e.which == 13) {

                    $("#btn_confirm_otp").trigger("click");
                    e.preventDefault();
                }

            });

            $("#btn_confirm_otp").click(function() {
                let bill = $("#hd_bill_no").val();
                let ref = $("#hd_ref_otp").val();
                let pass = $("#txt_otp").val();

                $.post('main_store.php?cm=checkOTP', {
                    bill: bill,
                    ref: ref,
                    pass: pass
                }, function(data) {
                    if (data.success) {
                        if (data.check) {
                            swal('ทำรายการเรียบร้อย', ' ', 'success', {
                                buttons: false,
                                timer: 1500
                            });
                            clearInterval(iCountDown);
                            $("#otp_modal").modal("hide");
                            $("#detail_modal").modal("hide");
                            load_table();
                        } else {
                            swal('โปรดตรวจสอบ', 'รหัสไม่ถูกต้อง กรุณาลองใหม่', 'warning').then((
                                sure) => {
                                $("#txt_otp").val("");
                                $("#txt_otp").focus();
                            });
                        }
                    }

                }, 'json');

            });

            $("#btn_confirm_bill").click(function() {
                return tryCatchSwal(async () => {
                    if ($(".txt_cash:eq(0)").val() == "") {
                        return swal('โปรดตรวจสอบ', "กรุณาระบุยอดเงิน", 'warning').then((sure) => {
                            $(".txt_cash:eq(0)").focus();
                        });
                    }
    
                    var total = +$("#detail-bet-summary").text().replaceAll(',', '');
                    var cash = +$(".txt_cash:eq(0)").val();
                    if (isNaN(cash)) {
                        cash = 0;
                    }
                    if (total > cash) {
                        return swal('โปรดตรวจสอบ', 'ยอดรับเงินน้อยกว่ายอดแทง', 'warning').then((sure) => {
                            $(".txt_cash:eq(0)").focus();
                        });
                    }
    
                    const confirm = await swal('ยืนยันการทำรายการ?', ' ', 'warning', {
                        buttons: ['ยกเลิก', 'ยืนยัน']
                    })
                    if (!confirm) return;
    
                    const bill = $("#hd_bill_no").val();
                    const formData = new FormData();
                    formData.append('bill', bill);
                    formData.append('cash', cash);

                    const result = await fetchJson(`{{ route('bill.index') }}/confirm/${bill}`, 'POST', formData);
                    if (!result) return false;

                    load_table();
                    load_detail_table(bill)

                    const printBill = await swal('ทำรายการเรียบร้อย', ' ', 'success', {
                        buttons: ['ปิด', 'พิมพ์ตั๋ว']
                    });
                    if (!printBill) return;

                    const printWithDiscount = await swal('พิมพ์ตั๋ว', ' ', 'info', {
                        buttons: ['ไม่มีส่วนลด', 'มีส่วนลด']
                    });

                    if (jspmWSStatus()) {
                        $("#btn_print").prop('disabled', true);
                        if (printWithDiscount) {
                            print(`{{ route('bill.index') }}/receipt/${bill}?show_discount=1`);
                        } else {
                            print(`{{ route('bill.index') }}/receipt/${bill}`);
                        }
                    } else {
                        swal('ไม่พบเครื่องปริ้น!!', 'กรุณาตั้งค่าเครื่องปริ้นให้ถูกต้อง', 'warning');
                    }
    
                    $("#detail_modal").modal("hide");
                });
            });

            $("#btn_print").click(function() {
                let bill = $("#hd_bill_no").val();
                // console.log(bill);
                swal('พิมพ์ตั๋ว', ' ', 'info', {
                    buttons: ['ไม่มีส่วนลด', 'มีส่วนลด']
                }).then((sure) => {
                    $("#btn_print").prop('disabled', true);
                    // if (sure) {
                    //     window.open(`{{ route('bill.index') }}/receipt/${bill}?show_discount=1`);
                    // } else {
                    //     window.open(`{{ route('bill.index') }}/receipt/${bill}`);
                    // }
                    // return;
                    if (jspmWSStatus()) {
                        $("#btn_print").prop('disabled', true);
                        if (sure) {
                            print(`{{ route('bill.index') }}/receipt/${bill}?show_discount=1`);
                        } else {
                            print(`{{ route('bill.index') }}/receipt/${bill}`);
                        }
                    } else {
                        swal('ไม่พบเครื่องปริ้น!!', 'กรุณาตั้งค่าเครื่องปริ้นให้ถูกต้อง',
                            'warning');
                    }
                    load_table();
                });
            });

            $("#btn_cash_all").click(function() {
                selectMultipleId = [];
                for (const el of document.querySelectorAll('.cls_checkbox:checked')) {
                    selectMultipleId.push(el.dataset.id);
                }

                if (selectMultipleId.length === 0) {
                    swal('โปรดตรวจสอบ', 'กรุณาเลือกรายการที่ต้องการชำระเงิน', 'warning').then((sure) => {});
                    return false;
                }

                $.post(`{{ route('bill.showMultiple') }}`, {
                    bill_ids: JSON.stringify(selectMultipleId)
                }, function(data) {
                    let total_amount = 0;
                    let total_discount = 0;
                    let total_payment = 0;
                    $('.tb_select_bill').html('');
                    for (const item of data) {
                        total_amount = total_amount + (item.status == 0 ? item.amount : 0);
                        total_discount = total_discount + (item.status == 0 ? item.discount : 0);
                        total_payment = total_payment + (item.status == 0 ? item.payment : 0);
                        const itemStatus = billStatus(item);
                        const tr = $('<tr/>').addClass(item.status > 0 ? 'bg-light-danger' : '').append(
                            $('<td/>').addClass('align-middle text-center cls_bill_id').text(item.bill_id),
                            $('<td/>').addClass('align-middle text-center').text(item.phone),
                            $('<td/>').addClass('align-middle text-right').text(numberFormat(item.amount)),
                            $('<td/>').addClass('align-middle text-right text-success').text(numberFormat(item.discount)),
                            $('<td/>').addClass('align-middle text-right text-danger').text(numberFormat(item.payment)),
                            $('<td/>').addClass(`align-middle text-center font-weight-bold text-${itemStatus.color}`).text(itemStatus.text),
                            $('<td/>').addClass(`lottery_round_id`).text(item.lottery_round_id).attr('hidden', true),
                        );
                        $('.tb_select_bill').append(tr);
                    }
                    $('.total-payment').val(total_payment);
                    $('#total-bet-amount').text(numberFormat(total_amount));
                    $('#total-bet-discount').text(numberFormat(total_discount));
                    $('#total-bet-summary').text(numberFormat(total_payment));

                    $('#bill-payments-form .cls-cash').show();
                    $('#btn_confirm_bill_all').show();
                    if (total_payment === 0) {
                        $('#bill-payments-form .cls-cash').hide();
                        $('#btn_confirm_bill_all').hide();
                    }
                    $(".txt_cash_all").val("");
                    $("#bill_select_modal").modal("show");
                }, 'json');

            });

            $("#btn_confirm_bill_all").click(async e =>
                tryCatchSwal(async () => {
                    const confirm = await swal('ยืนยันชำระเงิน', 'ท่านยืนยันที่จำชำระเงินรายการทั้งหมดนี้หรือไม่', 'warning', {
                        buttons: {
                            cancel: 'ยกเลิก',
                            confirm: {
                                text: 'ยืนยันชำระเงิน',
                                closeModal: false,
                            }
                        }
                    });
                    if (!confirm) return;

                    if ($(".txt_cash_all").val() == "") {
                        swal('โปรดตรวจสอบ', "กรุณาระบุยอดเงิน", 'warning').then((sure) => {
                            $(".txt_cash_all").focus();
                        });
    
                        return false;
                    }
                    var total = +$("#total-bet-summary").text().replace(/[^0-9.-]+/g, "");
                    var cash = parseFloat($(".txt_cash_all").val().replace(/[^0-9.-]+/g, ""));
                    if (isNaN(cash)) {
                        cash = 0;
                    }
    
                    if (total > cash) {
                        swal('โปรดตรวจสอบ', 'ยอดรับเงินน้อยกว่ายอดแทง', 'warning').then((sure) => {
                            $(".txt_cash_all").focus();
                        });
                        return false;
                    }
    
                    const formData = new FormData();
                    formData.append('cash', cash);
                    $.each($("#table_bill_select_cash tbody tr"), function(index, value) {
                        let billId = $(value).closest("tr").find(".cls_bill_id").text();
                        let lotteryRoundId = $(value).closest("tr").find(".lottery_round_id").text();
                        formData.append('bills[]', billId);
                        formData.append('lottery_round_ids[]', lotteryRoundId);
                    });
    
                    const result = await fetchJson(`{{ route('bill.confirmMany') }}`, 'POST', formData);
                    if (!result) return false;

                    $('#bill_select_modal').modal('hide');
                    load_table();

                    const printBill = await swal('ทำรายการเรียบร้อย', ' ', 'success', {
                        buttons: {
                            cancel: 'ปิด',
                            confirm: {
                                text: 'พิมพ์ตั๋วทั้งหมด',
                                closeModal: false,
                            },
                        }
                    });
                    if (!printBill) return;

                    const printWithDiscount = await swal('พิมพ์ตั๋วทั้งหมด', ' ', 'info', {
                        buttons: ['ไม่มีส่วนลด', 'มีส่วนลด']
                    });

                    if (jspmWSStatus()) {
                        $("#btn_print").prop('disabled', true);
                        if (printWithDiscount) {
                            print(`{{ route('bill.index') }}/receipt/0?ids=${JSON.stringify(result.bills)}&show_discount=1`);
                        } else {
                            print(`{{ route('bill.index') }}/receipt/0?ids=${JSON.stringify(result.bills)}`);
                        }
                    } else {
                        swal('ไม่พบเครื่องปริ้น!!', 'กรุณาตั้งค่าเครื่องปริ้นให้ถูกต้อง', 'warning');
                    }
                })
            );

            $(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));
                $('#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);
                $(".txt_cash").val("");
                current.id = id;
                current.billId = bill;
                load_detail_table(id)
                    .then(() => {
                        $('#detail_modal').modal('show');
                    });
            });

            setTimeout(() => {
                load_table();
            }, 1500);

        });

        function load_table(){
            new Promise((resolve, reject) => {
                let element = load(`{{ route('store.storeBills') }}`, '.tb_list');
                resolve(element);
            }).then((element) => {
                element = $(element).find('tr');
                $('.tb_list').html(element);
            });
        }

        function load_detail_table(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'] = 'รอออกผล';
                    }
                    let isLimitPaymentCls = item.isLimitPayment ? 'text-danger':'';
                    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)),
                        $('<td/>').addClass('align-middle text-center text-success').text(numberFormat(item.discount)),
                        $('<td/>').addClass('align-middle text-center text-danger').text(numberFormat(item.payment)),
                        $('<td/>').addClass(`align-middle text-center ${isLimitPaymentCls}`).text(item.paymentRate ? numberFormat(item.paymentRate) : 'ไม่มีข้อมูล'),
                        $('<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(numberFormat(data.amount));
                $('#detail-bet-discount').text(numberFormat(data.discount));
                $('#detail-bet-summary').text(numberFormat(data.payment));
                $('#detail-bet-rewarded').text(numberFormat(betReward));
                bill_detail_payment = data.payment;
                $("#btn_cancel_bill").hide();
                $("#btn_cash").hide();
                $("#btn_confirm_bill").hide();
                $(".cls-cash").hide();
                $("#btn_print").hide();
                $('.table_end').html(data.data_sum);

                let status = data.status;
                let otp_stat = data.otp_stat;
                let print = data.print_status;

                if (status) {
                    $("#btn_print").show();
                    $("#btn_cancel_bill").show();
                } else {
                    $(".cls-cash").show();
                    $("#btn_confirm_bill").show();
                }

                if (print) {
                    $("#btn_print").prop('disabled', true);
                } else {
                    $("#btn_print").prop('disabled', false);
                }

                if (status >= 2) {
                    $('#btn_cancel_bill').hide();
                }

                if (status === 2) {
                    $("#btn_print").prop('disabled', true);
                    $("#btn_print").hide();
                }
            });
        }
</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