@extends('layouts.master')

@section('title')
  LT-168 :: หน้าแทงสำหรับพนักงาน
@endsection

@section('sub_title')
  หน้าแทงสำหรับพนักงาน
@endsection

@section('title_right_side')
  <button type="button"
    data-href="{{ route('front.lotteryResult') }}"
    hidden
    id="lottery-result-btn"
    data-country=""
    onclick="showLotteryResultLity(this)"
    class="btn py-1 text-dark font-weight-900 text-nowrap btn-success px-2"
    title="ผลรางวัล">
    <i class="fa fa-award mr-1 my-auto"></i>
    <span>ผลรางวัล</span>
  </button>
@endsection

@section('customStyle')
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lity/2.4.1/lity.min.css" integrity="sha512-UiVP2uTd2EwFRqPM4IzVXuSFAzw+Vo84jxICHVbOA1VZFUyr4a6giD9O3uvGPFIuB2p3iTnfDVLnkdY7D/SJJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  <style>
    .lity-iframe-container {
      padding-top: calc(100vh - 70px);
      border-radius: 15px;
      margin: 0px 20px;
      width: calc(100% - 40px);
    }
</style>
@endsection

@if (!$openingRounds->count())
  @section('content')
    <div class="row">
      <div class="col-auto mx-auto">
        <div class="card bg-danger text-white radio radio-">
          <div class="card-body p-sm-5">
            <div class="text-center"><i class="fas fa-times fa-6x"></i></div>
            <p class="lead text-center mb-0">ไม่มีหวยที่เปิดงวดอยู่ในขณะนี้</p>
          </div>
        </div>
      </div>
    </div>
  @endsection
@else
  @section('content')
    <style>
      tbody.place_data:empty::after {
        content: 'ไม่มีรายการแทง';
        position: absolute;
        transform: translate(-50%, -50%);
        top: 47%;
        left: 50%;
        color: rgba(0, 0, 0, 0.45);
        font-weight: 100;
      }

      tbody.place_data:empty {
        height: 60px;
        display: flex;
      }

      .empty-round-text:empty::after {
        content: 'ไม่มีรอบเปิด';
      }
    </style>
    <div class="card">
      <div class="card-body border-0">
        <div class="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-body">
        <div class="row justify-content-center btn-group-toggle no-gutters mt-n2 mx-n1" data-toggle="buttons">
          <input type="radio" name="country" data-no-key value checked hidden>
          @foreach ($lotteries as $key => $lottery)
            @php
              $lotteryRoundAvailable = $lottery
                  ->lotteryRound()
                  ->whereStatus(\App\LotteryRound::STATUS_ENABLED)
                  ->where('close', '>=', date('Y-m-d H:i:s'))
                  ->first();
              $lotterySettingExists = $store
                  ->storeCommission()
                  ->whereCountry($lottery->country)
                  ->first();
              $enable = $lotteryRoundAvailable && $lotterySettingExists;
              if ($lottery->type && !$store->lotteryCommission->first()) {
                  $enable = false;
              }
              $encodedNumberLimit = $enable
                  ? $lotteryRoundAvailable->numberLimit
                      ->where('user_id', 1) // Admin
                      ->where('limit_type', '!=', \App\NumberLimit::LIMIT_PAYMENT)
                      ->toJson()
                  : null;
            @endphp
            <div class="px-1 col mt-2" data-key="{{ ++$key }}">
              <label
                class="btn font-weight-900 w-100 border mb-0 shadow-sm {{ !$enable ? 'btn-outline-light disabled' : 'btn-outline-primary' }}">
                <input type="radio" data-key="{{ $key }}"
                  data-many-rounds="{{ $lottery->many_rounds ? 'true' : 'false' }}" name="country"
                  {{ !$enable ? 'disabled' : '' }} value="{{ $lottery->country }}"
                  id="lottery-{{ $lottery->country }}" data-number-limit="{{ $encodedNumberLimit }}">
                {{ $lottery->name }}
              </label>
              <div class="text-center lottery-key-description" style="display: none;">
                <small class="mt-2 mb-0">กด {{ $key }}</small>
                @if (!$enable)
                  <div class="small text-danger text-center">หวยปิดงวด</div>
                @endif
              </div>
            </div>
          @endforeach
        </div>
      </div>
    </div>

    <form id="main_form">
      <fieldset class="row justify-content-center" disabled>
        <div class="col-lg-6">
          <div class="card">
            <div class="card-header border-0">
              <div class="row align-items-center">
                <div class="col">
                  <h3 class="mb-0 placeDiscl"></h3>
                </div>
                <div class="col">
                  <input type="text" class="form-control" name="cus_phone" value="{{ Request::get('phone') }}"
                    placeholder="หมายเลขโทรศัพท์ลูกค้า">
                </div>
              </div>
            </div>
            <div class="card-body py-3">
              <div class="table-responsive" title="โปรดเลือกหวย และไลน์ส่วนลด">
                <input type="hidden" name="discount_line" value="">
                <input type="hidden" name="lottery_round_id" value="">
                <table class="table table-sm table-bordered table-hover">
                  <thead class="thead-light">
                    <tr>
                      <th class="text-body align-middle text-center font-weight-bold">เลข</th>
                      <th class="text-body align-middle text-center font-weight-bold" data-toggle="tooltip"
                        disabled-data-placement="top" disabled-title="* กลับ / โต๊ด" width="20%">
                        <span class="lottery-type-depend TH LA HN HV HP MY BAAC GSB">บน/โต๊ด</span>
                        <span class="lottery-type-depend LT">จำนวนเงิน</span>
                      </th>
                      <th
                        class="text-body align-middle text-center font-weight-bold lottery-type-depend TH LA JN HN HV HP MY BAAC GSB"
                        width="20%">ล่าง</th>
                    </tr>
                  </thead>
                  <tbody class="table_first">
                    <tr class="no_remove">
                      <td class="p-0 align-middle text-center font-weight-bold">
                        <input class="form-control border-0 text-center rounded-0 fc_nx" name="number"
                          placeholder="หมายเลข" onblur="showNumberLimitRemain(this)">
                      </td>
                      <td class="p-0 align-middle text-center font-weight-bold">
                        <input class="form-control border-0 text-center rounded-0 fc_nx end_inp" name="amount1"
                          placeholder="จำนวนเงิน">
                      </td>
                      <td
                        class="p-0 align-middle text-center font-weight-bold lottery-type-depend TH LA JN HN HV HP MY  BAAC GSB">
                        <input
                          class="form-control border-0 text-center rounded-0 end_inp lottery-type-depend TH LA HN HV HP MY BAAC GSB"
                          name="amount2" placeholder="จำนวนเงิน">
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
            <div class="card-footer">
              <div class="text-center">
                <kbd class="lottery-type-depend TH LA HN HV MY BAAC GSB mb-1">* กลับ</kbd>
                <kbd class="lottery-type-depend TH LA HN HV MY BAAC GSB mb-1">/ โต๊ด</kbd>
                <kbd class="lottery-type-depend TH LA mb-1">+ สามตัวแรกบน</kbd>
                <kbd class="lottery-type-depend TH LA mb-1">+/ สามตัวแรกบนโต๊ด</kbd>
                <kbd class="lottery-type-depend TH LA HN HV MY BAAC GSB mb-1">- วิ่งสองตัวบน</kbd>
                <kbd class="lottery-type-depend TH HN HV MY mb-1">. ตัวหน้า</kbd>
              </div>
              <div class="addAfter"></div>
            </div>
            <div class="lottery-type-depend LN" style="display: none;">
              <div
                class="bg-light border-5 border-white flex-grow-1 mb-3 mx-2 overflow-auto position-relative rounded d-flex"
                style="min-height: 125px;">
                <div class="table-responsive bg-dark-blue rounded-0 w-100">
                  <table class="table table-sm table-borderless my-2">
                    <tbody class="row g-0 justify-content-center mx-1">
                      @php
                        $custom = [
                          [
                            'type' => 'แดง',
                            'color' => 'danger',
                            'numbers' => [1, 2, 3, 4, 5, 6],
                            'length' => 2,
                          ],
                          [
                            'type' => 'ดำ',
                            'color' => 'dark',
                            'numbers' => [7, 8, 9, 10, 11, 12],
                            'length' => 2,
                          ],
                          [
                            'type' => 'คู่',
                            'color' => 'primary',
                            'numbers' => [2, 4, 6, 8, 10, 12],
                            'length' => 2,
                          ],
                          [
                            'type' => 'คี่',
                            'color' => 'info',
                            'numbers' => [1, 3, 5, 7, 9, 11],
                            'length' => 2,
                          ],
                        ];
                      @endphp
                      <tr class="col-12"></tr>
                      @foreach ($custom as $key => $item)
                        <tr class="col-6 d-flex" data-lottery-type="{{ $item['type'] }}">
                          <td class="w-100" style="padding: 0 !important;">
                            <div class="m-2 p-2 border rounded-3 shadow-sm bg-white" onclick="focusOnInput(this)">
                              <span
                                class="badge h-100 w-100 rounded-pill text-white text-sm bg-{{ $item['color'] }} py-2"><span>{{ $item['type'] }}</span></span>
                              <div class="text-body text-center">ชุดเลข <span
                                  class="d-inline-block my-2">{{ implode(', ', $item['numbers']) }}</span></div>
                              <input type="number" name="custom_value[]"
                                data-custom-type="" placeholder="ระบุจำนวนเงิน" min="1" step="0.01"
                                data-type="price" data-numbers="[]"
                                id="amount_{{ str_replace(' ', '_', $item['type']) }}" title="โปรดกรอกตัวเลข"
                                class="custom-type text-center form-control spinner-hidden form-control-sm rounded-pill end_inp"
                                style="min-width: 40px; margin: 2px 0; /* font-size: .775rem */;">
                            </div>
                          </td>
                        </tr>
                      @endforeach
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
            <div id="show-number-limit-remain" class="card-footer" style="display: none;">
              <div class="table-responsive">
                <table class="table align-items-center table-bordered table-sm">
                  <thead class="thead-light">
                    <tr>
                      <th class="text-center align-middle text-xs">ประเภท</th>
                      <th class="text-center align-middle text-xs">รับแทงได้</th>
                    </tr>
                  </thead>
                  <tbody></tbody>
                </table>
              </div>
            </div>
          </div>

          <!-- START Error Log Table -->
          <div class="table-responsive">
            <div id="limited-number" style="display: none; max-height: 430px; overflow: auto;">
              <table id="limited-number-table" class="table table-sm table-hover table-bordered mb-0">
                <caption style="caption-side: top;" class="h2 mb-0">เลขเต็ม</caption>
                <tbody></tbody>
              </table>
            </div>
            <div id="closed-number" style="display: none; max-height: 430px; overflow: auto;">
              <div class="table-responsive">
                <table id="closed-number-table" class="table table-danger table-sm table-bordered table-striped mb-0">
                  <caption style="caption-side: top;" class="h2 mb-0">ปิดรับ</caption>
                  <tbody></tbody>
                </table>
              </div>
            </div>

          </div>

          <div class="card">
            <div class="card-header border-0">
              <div class="row align-items-center">
                <div class="col-auto">
                  <h3 class="mb-0 text-danger">เลขอั้นจำกัดอัตราจ่าย</h3>
                </div>
              </div>
            </div>
            <div class="card-body table-responsive py-3">
              <div class="scroll_table">
                <table id="payment-limit-table" class="table table-sm table-hover table-bordered w-100">
                  <thead class="thead-light">
                    <tr>
                      <th class="text-body align-middle text-center font-weight-bold" rowspan="2">หมายเลข</th>
                      <th class="text-body align-middle text-center font-weight-bold" rowspan="2">ประเภท</th>
                      <th id="limit-th-colspan" class="text-body align-middle text-center font-weight-bold" colspan="3">
                        อัตราจ่าย</th>
                    </tr>
                    <tr id="commission-line-list">
                      <th class="text-body align-middle text-center font-weight-bold">A</th>
                      <th class="text-body align-middle text-center font-weight-bold">B</th>
                      <th class="text-body align-middle text-center font-weight-bold">C</th>
                    </tr>
                  </thead>
                  <tbody>
                    @foreach ($numberLimitByPayment as $item)
                      <tr data-lottery-code="{{ $item->country }}"
                        data-lottery-round-id="{{ $item->lottery_round_id }}">
                        <td class="align-middle text-center font-weight-bold">{{ $item->limit_number }}</td>
                        <td class="align-middle text-center font-weight-bold">{{ $item->lottery_type }}</td>
                        <td class="align-middle text-center font-weight-bold text-teal commission-line-a">
                          {{ nf($item->limit_remain['a'], true) }}</td>
                        <td class="align-middle text-center font-weight-bold text-warning commission-line-b">
                          {{ nf($item->limit_remain['b'], true) }}</td>
                        <td class="align-middle text-center font-weight-bold text-indigo commission-line-c">
                          {{ nf($item->limit_remain['c'], true) }}</td>
                      </tr>
                    @endforeach
                  </tbody>
                </table>
              </div>
            </div>
          </div>

        </div>

        <div class="col-lg-6">
          <div class="card">
            <div class="card-header border-0">
              <div class="row align-items-center">
                <div class="col-auto">
                  <h3 class="mb-0">รายการแทง</h3>
                </div>
                <div class="col text-right">
                  <button type="button" class="btn btn-sm btn-warning change_discount_line" style="border-radius: 25px;">
                    <i class="fas fa-wrench"></i> แก้ไขรายส่วนลด
                  </button>
                  <button type="button" class="btn btn-sm btn-danger resetCart" style="border-radius: 25px;">
                    <i class="fas fa-times"></i> ล้างข้อมูล
                  </button>
                </div>
              </div>
            </div>
            <div class="card-body table-responsive py-3">
              <div class="table-responsive" style="max-height: 720px;">
                <table class="table table-sm table-hover table-bordered">
                  <thead class="thead-light">
                    <tr>
                      <th class="text-body align-middle text-center font-weight-bold">เลข</th>
                      <th class="text-body align-middle text-center font-weight-bold">ประเภท</th>
                      <th class="text-body align-middle text-center font-weight-bold">แทง</th>
                      <th class="text-body align-middle text-center font-weight-bold">ส่วนลด</th>
                      <th class="text-body align-middle text-center font-weight-bold">สุทธิ</th>
                      <th class="text-body align-middle text-center font-weight-bold">บาทละ</th>
                      <th class="text-body align-middle text-center font-weight-bold">#</th>
                    </tr>
                  </thead>
                  <tbody class="place_data"></tbody>
                </table>
              </div>
              <div class="table-responsive">
                <table class="table table-sm table-hover table-bordered">
                  <thead class="thead-light">
                    <tr class="display_sum">
                      <th class="text-body px-1 align-middle text-center font-weight-bold" cospan="2">ยอดแทง: </th>
                      <th class="text-body px-1 align-middle text-center font-weight-bold text-success" cospan="2">
                        ส่วนลด:</th>
                      <th class="text-body px-1 align-middle text-center font-weight-bold text-primary" cospan="2">จ่าย:
                      </th>
                    </tr>
                  </thead>
                </table>
              </div>
              <div class="text-center mt-2 DisplayMeWhenHaveBill">
                <div class="form-check">
                  <input class="form-check-input" type="checkbox" value="1" name="is_paynow" id="payment_isnow">
                  <label class="form-check-label" for="payment_isnow">
                    ชำระเงินทันที
                  </label>
                </div>

                <div class="form-inline justify-content-center my-2 pm_now" style="display: none;">
                  <label>ยอดชำระ: </label>
                  <input type="text" class="form-control ml-1 payment_amount" name="cus_pay" data-havetopay=""
                    placeholder="ยอดชำระ">

                  <label class="ml-4">เงินทอน: </label>
                  <input type="text" class="form-control ml-1" placeholder="เงินทอน" name="cus_change" readonly>
                </div>

                <button id="checkBaned" type="button" class="btn btn-warning btn-lg mt-2 d-none" style="border-radius: 25px;">
                  <i class="fas fa-exclamation"></i> ตรวจสอบเลขอั้น
                </button>
                <button id="confirmCart" type="button" class="btn btn-danger btn-lg confirm_bet mt-2"
                  style="border-radius: 25px;"
                  data-loading-text="<i class='fa fa-spinner fa-spin '></i> กำลังตรวจสอบเลขอั้น..."><i
                    class="fas fa-check"></i> บันทึกรายการ
                </button>
              </div>
            </div>
          </div>

          <!-- START Error Log Table -->
          <div class="card">
            <div class="card-header border-0">
              <div class="row align-items-center">
                <div class="col-auto">
                  <h3 class="mb-0 text-danger">รายการที่ไม่สามารถแทงได้</h3>
                </div>
              </div>
            </div>
            <div class="card-body table-responsive py-3">
              <div class="scroll_table" style="max-height: 720px; overflow: auto;">
                <table class="table table-sm table-hover table-bordered">
                  <thead class="thead-light">
                    <tr>
                      <th class="text-body align-middle text-center font-weight-bold">เลข</th>
                      <th class="text-body align-middle text-center font-weight-bold">ประเภท</th>
                      <th class="text-body align-middle text-center font-weight-bold">แทง</th>
                      <th class="text-body align-middle text-center font-weight-bold">แทงได้อีก</th>
                    </tr>
                  </thead>
                  <tbody class="place_data_non"></tbody>
                </table>
              </div>
            </div>
          </div>
          <!-- END Error Log Table -->

        </div>

        <div class="col-12">
          <div class="d-flex my-5">
            <div class="m-auto">
              <h3 class="text-center">วิธีเลือกหวย</h3>
              <ol class="m-auto">
                <li class="mb-1">กดปุ่ม <kbd class="mx-1">ESC</kbd> เพื่อเปลี่ยนหวย</li>
                <li class="mb-1">กดหมายเลขหวยที่ต้องการ</li>
                <li>กดปุ่ม <kbd>Enter</kbd></li>
              </ol>
            </div>
          </div>
        </div>
      </fieldset>
    </form>

    <div class="modal fade" id="discLineModal" tabindex="-1" role="dialog" aria-labelledby="discLineModal"
      aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h3 class='col-12 modal-title text-center'>
              กรุณาระบุไลน์ส่วนลด
            </h3>
          </div>
          <div class="modal-body">
            <div class="row justify-content-center">
              {{-- <div class="col-4 text-center">
                <button class="btn btn-lg btn-secondary selectLine" data-line="A">LINE A</button>
                <br /><small>กด 1</small>
              </div>
              <div class="col-4 text-center">
                <button class="btn btn-lg btn-secondary selectLine" data-line="B">LINE B</button>
                <br /><small>กด 2</small>
              </div> --}}
              <div class="col-4 text-center">
                <button class="btn btn-lg btn-default selectLine" data-line="C">
                  <i class="fas fa-check-circle"></i> LINE C</button>
                <br /><small>กด 3</small>
              </div>
            </div>
            <div class="text-center">
              <span class="text-danger pressEnter" style="display:none;"></span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="modal fade" id="choose-lottery-dialog" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
          <h1 class="modal-header justify-content-center">กรุณาเลือกหวย</h1>
          <div class="modal-body d-flex py-4">
            <ol class="m-auto my-3">
              <li class="mb-2 text-lg">กดปุ่ม <kbd class="mx-1">ESC</kbd> เพื่อเลือกหวย</li>
              <li class="mb-2 text-lg">กดหมายเลขหวยที่ต้องการ</li>
              <li class="mb-3 text-lg">กดปุ่ม <kbd>Enter</kbd></li>
            </ol>
          </div>
        </div>
      </div>
    </div>

    <div class="modal fade" id="choose-lottery-round-dialog" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content">
          <h1 class="modal-header justify-content-center">เลือกรอบ</h1>
          <div class="modal-body row justify-content-center empty-round-text"></div>
        </div>
      </div>
    </div>

    <div id="pressed-number-dialog" class="display-1 fixed-bottom mb-5 text-center" style="display: none; z-index: 1072">
      <div class="d-flex">
        <div class="bg-inline-block bg-translucent-danger border lh-100 m-auto p-3 shadow-sm text-white font-weight-900">
          <div class="badge badge-secondary d-block font-weight-light text-center text-sm">หมายเลข</div>
          <span id="pressed-number"></span>
        </div>
      </div>
    </div>
  @endsection
  @section('scripts')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lity/2.4.1/lity.min.js" integrity="sha512-UU0D/t+4/SgJpOeBYkY+lG16MaNF8aqmermRIz8dlmQhOlBnw6iQrnt4Ijty513WB3w+q4JO75IX03lDj6qQNA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.js"
        integrity="sha256-yE5LLp5HSQ/z+hJeCqkz9hdjNkk1jaiGG0tDCraumnA=" crossorigin="anonymous"></script>
    <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 loadStoreBalance = () => {
        $.getJSON(`{{ route('store.storeBalance', $store->id) }}`, {}, (response) => {
          $('[user-credit]').text(response);
        });
      }

      let cartExists = false;

      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!
          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) {
          console.log('JSPM Connected.');
          return true;
        } else if (JSPM.JSPrintManager.websocket_status == JSPM.WSStatus.Closed) {
          console.log('JSPM Unable to Connected.');
          swal('ไม่พบโปรแกรม JSPM ในเครื่อง', 'กรุณาเปิดโปรแกรม JSPM ก่อนดำเนินการ', 'error', {
            buttons: false
          });
          return false;
        } else if (JSPM.JSPrintManager.websocket_status == JSPM.WSStatus.BlackListed) {
          alert('JSPM has blacklisted this website!');
          return false;
        }
      }

      function isVirtualPrinter(clientPrinter) {
        let printerPort = clientPrinter.port.toLowerCase();
        //For Windows
        if (printerPort != "nul" && clientPrinter.BIDIEnabled) return false;
        //For Unix
        if (printerPort.indexOf("usb") >= 0 && printerPort.indexOf("?serial=") >= 0) return false;

        return true;
      }

      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;
              console.log(printerNameSet);
              // 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 }}`;

            let selectedPapersId = `{{ $selectedPaperId }}`;
            for (const paperKey in clientPrinters[idx].papers) {
              let paperName = clientPrinters[idx].papers[paperKey];
              if (paperName.indexOf('80 x 297') >= 0) {
                selectedPapersId = paperKey;
                break;
              }
            }

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

            options = '';
            options += '<option>' + clientPrinters[idx].papers[selectedPapersId] + '</option>';
            $('#lstPrinterPapers').html(options);
          });
        }
      };

      function showLotteryResultLity(btn) {
        const href = btn.dataset.href;
        const country = btn.dataset.country;
        const params = new URLSearchParams({
          'hide-menu': true,
          'hide-lottery-nav': true,
          country,
        });
        return lity(`${href}?${params}`);
      }

      function focusOnInput($el) {
        const inputEl = $el.querySelector('input');
        if (inputEl.disabled) {
          return Dialog.alert({
            title: 'โปรดกรอกตัวเลขที่ต้องการแทง',
            type: 'warning',
          }).then(() => focusOn(betNumber));
        }
        inputEl.focus();
      }

      function load_table(cartData = null) {
        new Promise(function(resolve, reject) {
          if (cartData == null || cartData == undefined) {
            $.getJSON('{{ route('cart.index') }}', {}, function(data) {
              if (data.length <= 0 || data.length == undefined) {
                $('.place_data').html('');
                resolve(undefined);
              } else {
                resolve(data);
              }
            });
          } else {
            resolve(cartData);
          }
        }).then((cartData) => {
          var ds = $('.display_sum');
          var td = '';
          var sumAmount = 0;
          var sumDiscount = 0;
          var sumPayment = 0;
          if (cartData != undefined) {
            cartExists = true;
            $(cartData).each(function(i, v) {
              sumAmount += +v.amount;
              sumDiscount += +v.inc_discount;
              sumPayment += +v.payment;
              let tbClass = '';
              if (v.isLimitPayment) tbClass = 'table-danger';
              td += (
                `<tr>
                  <td class="align-middle text-center font-weight-bold">` + v.number + `</td>
                  <td class="align-middle text-center font-weight-bold">` + v.type + `</td>
                  <td class="align-middle text-center font-weight-bold">` + $.number(v.amount) + `</td>
                  <td class="align-middle text-center font-weight-bold">` + $.number(v.inc_discount) + `</td>
                  <td class="align-middle text-center font-weight-bold">` + $.number(v.payment) + `</td>
                  <td class="align-middle text-center font-weight-bold ${tbClass}">` + $.number(v.paymentRate) +
                `</td>
                  <td class="align-middle text-center font-weight-bold">
                    <button type="button" class="btn btn-danger btn-sm removeFromCart" style="border-radius: 25px;" data-item_id="` + i + `">ลบ</button>
                  </td>
                </tr>`
              );
            });
          }
          $('.place_data').html(td);
          ds.find('th:eq(0)').text('ยอดแทง: ' + $.number(sumAmount, 2) + ' THB'); // ----- ส่วนแสดงยอดเงิน
          ds.find('th:eq(1)').text('ส่วนลด: ' + $.number(sumDiscount, 2) + ' THB');
          ds.find('th:eq(2)').text('จ่าย: ' + $.number(sumPayment, 2) + ' THB');
          $('.payment_amount').attr('data-havetopay', sumPayment); // ----- input รับเงิน, ทอนเงิน
          $('.payment_amount').val('');
          $('.payment_amount').nextAll('input').first().val('');
        });
      }

      function toggleDisabled(element) {
        element.disabled = element.disabled ? false : true;
        return true;
      }

      document.addEventListener('DOMContentLoaded', () => {
        const mainForm = document.forms['main_form'];

        let selectLotteryMode = false;
        let selectLotteryRoundMode = false;
        const lotteries = document.querySelectorAll('input[name="country"][data-key]');
        const lotteryKeyDesc = document.querySelectorAll('.lottery-key-description');

        const pressedNumberDialog = document.getElementById('pressed-number-dialog');
        const pressedNumber = document.getElementById('pressed-number');

        const discountLineDialog = document.getElementById('discLineModal');
        const discountLine = mainForm.discount_line;
        const $lotteryRoundIdInput = mainForm.lottery_round_id;
        let lineVariable = 'C';

        const customerPhone = mainForm.cus_phone;

        const paymentLimitTable = document.getElementById('payment-limit-table');
        const $chooseLotteryRoundDialog = document.getElementById('choose-lottery-round-dialog');

        const $lotteryResultBtn = document.getElementById('lottery-result-btn');

        let firstTime = true;
        let numberPressed = '';

        const checkedLottery = () => Array.from(lotteries).find(el => el.checked)

        document.body.onkeyup = async e => {
          /**
           * ถ้าอยู่ในโหมดเลือกหวย
           */
          if (selectLotteryMode) {
            const key = +e.key;

            // backspace
            if (e.keyCode == 8) {
              if (numberPressed.length) {
                numberPressed = numberPressed.slice(0, numberPressed.length - 1);
              }
            }

            if (Number.isInteger(key)) {
              numberPressed += `${key}`;
            }

            for (const input of lotteries) {
              if (input.dataset.key === numberPressed) {
                input.closest('label').classList.add('active');
              } else {
                input.closest('label').classList.remove('active');
              }
            }

            if (numberPressed.length) {
              pressedNumberDialog.style.display = 'block';
              pressedNumber.textContent = numberPressed;
            } else {
              pressedNumberDialog.style.display = 'none';
            }

            // enter
            if (e.keyCode == 13) {
              if (numberPressed.length) {
                for (const input of lotteries) {
                  if (input.dataset.key !== numberPressed) continue;
                  if (input.disabled) {
                    nf('หวยปิดงวด', 'danger text-center', 'fas fa-times');
                    break;
                  }
                  input.closest('label').click();
                  break;
                }
                numberPressed = '';
              }
              selectLotteryMode = false;
              for (const el of lotteryKeyDesc) {
                el.style.display = selectLotteryMode ? 'block' : 'none';
              }
              pressedNumberDialog.style.display = 'none';
              for (const input of lotteries) {
                if (input.checked) {
                  input.closest('label').classList.add('active');
                } else {
                  input.closest('label').classList.remove('active');
                }
              }
            } // END enter
            toggleLimitPaymentCommissionLine(lineVariable);
          } else if (selectLotteryRoundMode) {
            const lotteryRoundEls = $chooseLotteryRoundDialog.querySelectorAll('input[name=lottery_round_id]');
            const key = +e.key;

            // backspace
            if (e.keyCode == 8) {
              if (numberPressed.length) {
                numberPressed = numberPressed.slice(0, numberPressed.length - 1);
              }
            }

            if (Number.isInteger(key)) {
              numberPressed += `${key}`;
            }

            for (const input of lotteryRoundEls) {
              if (input.dataset.key === numberPressed) {
                input.closest('label').classList.add('active');
              } else {
                input.closest('label').classList.remove('active');
              }
            }

            if (numberPressed.length) {
              pressedNumberDialog.style.display = 'block';
              pressedNumber.textContent = numberPressed;
            } else {
              pressedNumberDialog.style.display = 'none';
            }

            // enter
            if (e.keyCode == 13) {
              if (numberPressed.length) {
                for (const input of lotteryRoundEls) {
                  if (input.dataset.key !== numberPressed) continue;
                  if (input.disabled) {
                    nf('หมดเวลาแทง', 'danger text-center', 'fas fa-times');
                    break;
                  }
                  input.closest('label').click();
                  break;
                }
                numberPressed = '';
              }
              pressedNumberDialog.style.display = 'none';
              for (const input of lotteryRoundEls) {
                if (input.checked) {
                  input.closest('label').classList.add('active');
                } else {
                  input.closest('label').classList.remove('active');
                }
              }
            } // END enter
          } else { // if (!selectedLotteryMode)
            if (discountLineDialog.className.includes('show') && !discountLine.value) {
              if ([49, 50, 51, 189, 191].includes(e.keyCode)) {
                // if (e.keyCode == 49) {
                //     lineVariable = 'A';
                // } else if (e.keyCode == 50 || e.keyCode == 191) {
                //     lineVariable = 'B';
                // } else if (e.keyCode == 51 || e.keyCode == 189) {
                lineVariable = 'C';
                // }
                const oldBtn = document.querySelector('button.selectLine.btn-default');
                oldBtn.classList.remove('btn-default');
                oldBtn.classList.add('btn-secondary');
                oldBtn.textContent = 'LINE ' + oldBtn.dataset.line;
                document.querySelector(`button[data-line="${ lineVariable }"]`).classList.remove('btn-secondary');
                document.querySelector(`button[data-line="${ lineVariable }"]`).classList.add('btn-default');
                document.querySelector(`button[data-line="${ lineVariable }"]`).innerHTML =
                  '<i class="fas fa-check-circle"></i> LINE ' + lineVariable;
                const enterDesc = document.querySelector('.pressEnter');
                enterDesc.innerHTML = '<br/>*** กรุณากด ENTER เพื่อยืนยัน ***';
                fadeIn(enterDesc);
              } else if (e.keyCode == 13) { // enter
                $('#discLineModal').modal('hide');
                document.querySelector('.placeDiscl').textContent = 'LINE: ' + lineVariable;
                discountLine.value = lineVariable;
                mainForm.querySelector('fieldset').disabled = false;
                customerPhone.focus();
              }
            }
          } // END selectedLotteryMode ELSE

          // F1
          if (e.keyCode === 112 || e.which === 112) {
            if ($lotteryResultBtn.hidden) return;
            $lotteryResultBtn.click();
          }

          // esc
          if (e.keyCode == 27 || e.which == 27) {
            if (selectLotteryRoundMode) {
              for (const $lotteryInput of lotteries) {
                $lotteryInput.checked = false;
                $lotteryInput.closest('label').classList.remove('active');
              }
              $('#choose-lottery-round-dialog').modal('hide');
              return;
            }
            selectLotteryMode = !selectLotteryMode;

            // blur away from input
            focusOn(document.body);

            if (selectLotteryMode) {
              nf('กรุณาเลือกหวย', 'primary text-center', 'fas fa-hand-pointer', 1000);
            } else {
              if (!document.querySelector('[name="country"][data-key]:checked')) {
                for (const input of lotteries) {
                  input.closest('label').classList.remove('active');
                }
              }
              focusOn(customerPhone);
            }
            numberPressed = '';
            pressedNumberDialog.style.display = 'none';
            for (const el of lotteryKeyDesc) {
              el.style.display = selectLotteryMode ? 'block' : 'none';
            }
            for (const input of lotteries) {
              if (input.checked) {
                input.closest('label').classList.add('active');
              } else {
                input.closest('label').classList.remove('active');
              }
            }
          } // END esc
        } // END onkeyup

        for (const input of lotteries) {
          input.onchange = async e => {
            const currentLottery = checkedLottery();
            if (!currentLottery) $lotteryResultBtn.hidden = true;
            else {
              $lotteryResultBtn.dataset.country = currentLottery.value;
              $lotteryResultBtn.hidden = false;
            }

            const numberLimit = JSON.parse(input.dataset.numberLimit || null);
            const manyRounds = JSON.parse(input.dataset.manyRounds)
            firstTime = false;
            selectLotteryMode = false;

            for (const el of lotteryKeyDesc) {
              el.style.display = selectLotteryMode ? 'block' : 'none';
            }

            if (manyRounds) {
              toggleChooseLotteryRoundDialog(input.value);
            } else {
              if (
                !$('#discLineModal').hasClass('show') &&
                !$('input[name="discount_line"]').val()
              ) {
                $('#discLineModal').modal({
                  backdrop: 'static',
                  keyboard: false
                }, 'show');
              }
            }

            for (const element of document.querySelectorAll(`.lottery-type-depend`)) {
              element.style.display = element.className.includes(input.value) ? '' : 'none';
            }
            focusOn(customerPhone);

            showNumberLimit(numberLimit)

            for (const row of paymentLimitTable.tBodies[0].rows) {
              const lotteryCode = input.value;
              row.style.display = row.dataset.lotteryCode !== lotteryCode ? 'none' : '';
            }
          }

          input.closest('label').onclick = async e => {
            const choosedLottery = document.querySelector('[name="country"][data-key]:checked');
            const selectSelf = input.value === (choosedLottery ? choosedLottery.value : null);
            if (input.disabled && !selectSelf) {
              e.preventDefault();
              e.stopPropagation();
            }
            if ((firstTime === false && !input.disabled && !selectSelf) || cartExists) {
              e.preventDefault();
              e.stopPropagation();
              const confirm = await swal('ยันยัน?', 'หากดำเนินการเปลี่ยนหวย ระบบจะล้างค่ารายการแทงปัจจุบัน',
                'warning', {
                  buttons: ['ยกเลิก', 'ยืนยัน'],
                });
              if (!confirm) {
                for (const input of lotteries) {
                  if (input.checked) {
                    input.closest('label').classList.add('active');
                  } else {
                    input.closest('label').classList.remove('active');
                  }
                }
                focusOn(customerPhone);
                return;
              }
              $lotteryRoundIdInput.value = '';
              cartExists = false;
              fetchJson('{{ route('cart.reset') }}', 'DELETE')
                .then(() => {
                  load_table();
                  nf('ล้างข้อมูลการแทงเรียบร้อย', 'success');
                });

              firstTime = true;
              e.target.click();
              focusOn(customerPhone);
            }
            if (selectSelf) {
              if (JSON.parse(input.dataset.manyRounds) === false) return;
              toggleChooseLotteryRoundDialog(input.value);
            }
          } // END input -> label.onclick
        }

        $($chooseLotteryRoundDialog).on('show.bs.modal', e => {
          selectLotteryRoundMode = true;
        });
        $($chooseLotteryRoundDialog).on('hide.bs.modal', e => {
          selectLotteryRoundMode = false;
        });

        async function toggleChooseLotteryRoundDialog(country) {
          try {
            const result = await fetchJson(`{{ route('store.getLotteryRounds') }}?country=${country}`);
            if (!result.success) throw result;

            const $modalBody = $chooseLotteryRoundDialog.querySelector('.modal-body');
            $modalBody.textContent = '';

            for (const i in result.data) {
              const lotteryRound = result.data[i];
              const div = document.createElement('div');
              const openDateTime = DateTime.fromFormat(lotteryRound.open, 'yyyy-MM-dd HH:mm:ss');
              const closeDateTime = DateTime.fromFormat(lotteryRound.close, 'yyyy-MM-dd HH:mm:ss');
              const now = DateTime.local();
              const canBet = now.diff(openDateTime, 'seconds').values.seconds > 0 && closeDateTime.diff(now, 'seconds').values.seconds > 0;
              div.className = 'col-sm-6 col-lg-4';
              div.innerHTML = (
                `<label
                  class="btn btn-outline-primary mb-2 mx-0 w-100 ${canBet ? '' : 'disabled'}"
                  ${canBet ? '' : 'tabindex="-1"'}
                  style="${canBet ? '' : 'filter: grayscale(1); opacity: 0.75;'}"
                >
                  <p class="font-weight-bold mb-1 text-xl">${lotteryRound.lottery.name}</p>
                  <p>${lotteryRound.round_name}</p>
                  <div>
                    <p class="small mb-1">เปิด ${openDateTime.setLocale('th-TH').toLocaleString(DateTime.DATETIME_MED)} น.</p>
                    <p class="small">ปิด ${closeDateTime.setLocale('th-TH').toLocaleString(DateTime.DATETIME_MED)} น.</p>
                    <h3 class="badge badge-danger mb-0 text-lg" id="countdown-${lotteryRound.id}" data-format="${lotteryRound.lottery.counter_format}"></h3>
                  </div>
                  <input type="radio"
                    id="lottery-round-id-${lotteryRound.id}"
                    class="mt-3" data-key="${+i + 1}"
                    name="lottery_round_id"
                    value="${lotteryRound.id}"
                    ${canBet ? '' : 'disabled'}
                    data-number-limit='${JSON.stringify(lotteryRound.number_limit)}'
                  >
                </label>
                ${canBet ? `<p class="text-center text-danger text-lg font-weight-bold">กด ${+i + 1}</p>` : ''}`
              );
              $modalBody.appendChild(div);

              $lotteryRoundId = document.getElementById(`lottery-round-id-${lotteryRound.id}`);
              $countdown = document.getElementById(`countdown-${lotteryRound.id}`);
              countDown(lotteryRound.close, $countdown, () => {
                $countdown.textContent = 'หมดเวลา';
                $lotteryRoundId.disabled = true;
              });

              $lotteryRoundId.onchange = async e => {
                const numberLimit = JSON.parse($lotteryRoundId.dataset.numberLimit || null);

                mainForm.lottery_round_id.value = e.target.value;

                showNumberLimit(numberLimit);
                $($chooseLotteryRoundDialog).modal('hide');

                if (!$('#discLineModal').hasClass('show') && !$('input[name="discount_line"]').val()) {
                  $('#discLineModal').modal({
                    backdrop: 'static',
                    keyboard: false
                  }, 'show');
                }
              }

            }

            $($chooseLotteryRoundDialog).modal({
              backdrop: 'static',
              keyboard: false
            });
          } catch (e) {
            console.error(e);
            let text = e.text || 'พบข้อบกพร่อง';
            if (e.data) {
              text += `\n\n${Object.values(e.data).join(`\n`)}`;
            }
            return swal({
              title: e.title || 'ขออภัย',
              text: text,
              icon: 'error',
            });
          }
        }

        function showNumberLimit(numberLimit) {
          if (numberLimit) return;

          const closedNumDiv = document.getElementById('closed-number');
          const closedNumTable = document.getElementById('closed-number-table');
          const closedNumTBody = closedNumTable.tBodies[0];
          const closedNumExists = !!closedNumTBody.rows.length;

          const limitedNumDiv = document.getElementById('limited-number');
          const limitedNumTable = document.getElementById('limited-number-table');
          const limitedNumTBody = limitedNumTable.tBodies[0];
          const limitedNumExists = !!limitedNumTBody.rows.length;

          closedNumTBody.innerHTML = ''
          limitedNumTBody.innerHTML = ''

          const nums = {};
          for (const [id, item] of Object.entries(numberLimit)) {
            if (!nums[item.lottery_type]) {
              nums[item.lottery_type] = [];
            }
            nums[item.lottery_type].push(item);
          }
          for (const [type, arr] of Object.entries(nums)) {
            const closedNumTr = closedNumTBody.insertRow();
            const limitedNumTr = limitedNumTBody.insertRow();
            const closedNumTypeCell = closedNumTr.insertCell();
            const limitedNumTypeCell = limitedNumTr.insertCell();
            closedNumTypeCell.textContent = type;
            limitedNumTypeCell.textContent = type;
            closedNumTypeCell.className = 'text-danger';
            limitedNumTypeCell.className = 'text-danger';
            closedNumTypeCell.style.width = '1%';
            limitedNumTypeCell.style.width = '1%';
            for (const key in arr) {
              const item = arr[key];
              const limitType = item.limit_type === 0 ? 'type' : 'number';
              if (limitType === 'type') { // อั้นตามประเภท
                if (item.limit_amount === 0) { // ปิดรับแทง
                  if (closedNumExists) continue;
                  const tdNum = closedNumTr.insertCell();

                  tdNum.textContent = 'ทุกเลข';
                  tdNum.className = 'bg-white align-middle text-darker text-center';
                } else { // อั้น (เต็ม)
                  if (limitedNumExists) continue;
                  // console.log(item.limit_remain);
                  for (const [number, remain] of Object.entries(item.limit_remain)) {
                    if (remain > 0) continue;
                    const tdNum = limitedNumTr.insertCell();

                    tdNum.textContent = number;
                    tdNum.className = 'bg-white align-middle text-darker text-center';
                    // console.log(tdNum);
                  }
                }
              } else if (limitType === 'number') { // อั้นตามหมายเลข
                if (item.limit_amount === 0) { // ปิดรับแทง
                  if (closedNumExists) continue;
                  const tdNum = closedNumTr.insertCell();

                  tdNum.textContent = item.limit_number;
                  tdNum.className = 'bg-white align-middle text-darker text-center';
                } else if (item.limit_remain === 0) { // อั้น (เต็ม)
                  if (limitedNumExists) continue;
                  const tdNum = limitedNumTr.insertCell();

                  tdNum.textContent = item.limit_number;
                  tdNum.className = 'bg-white align-middle text-darker text-center';
                }
              }
            }
            if (closedNumTr.cells.length === 1) {
              closedNumTr.remove();
            }
            if (limitedNumTr.cells.length === 1) {
              limitedNumTr.remove();
            }
          }
          closedNumDiv.style.display = closedNumTBody.rows.length ? '' : 'none';
          limitedNumDiv.style.display = limitedNumTBody.rows.length ? '' : 'none';
        }

        const checkBanedBtn = document.getElementById('checkBaned');
        const confirmBtn = document.getElementById('confirmCart');
        // checkBanedBtn.addEventListener('click', e => {
        //   e.preventDefault();
        //   checkBanedBtn.disabled = !checkBanedBtn.disabled;
        //   let count = 3;
        //   let btnCount = setInterval(() => {
        //     checkBanedBtn.innerText = `ตรวจสอบเลขอั้นในอีก.. ${count}`;
        //     if (count > 0) return --count;
        //     checkBanedBtn.classList.add('d-none');
        //     confirmBtn.classList.remove('d-none');
        //     clearInterval(btnCount);
        //   }, 1000);
        // });

        $('#choose-lottery-dialog').modal({
          backdrop: 'static'
        });
      }); // END Document Ready

      function nf(text, classname = 'success', icon = 'ni ni-bell-55', delay = 5000) {
        $.notify({
          icon: icon,
          title: text,
          message: ''
        }, {
          type: classname,
          allow_dismiss: true,
          newest_on_top: false,
          showProgressbar: false,
          placement: {
            from: 'top',
            align: 'center'
          },
          delay: delay,
          timer: 1000,
          mouse_over: null,
          animate: {
            enter: 'animated fadeInDown',
            exit: 'animated fadeOutUp'
          }
        });
      }

      $(function() {

        $('input[name="number"]').on('keydown', function(e) {
          if (e.keyCode == 40) {
            $(this).closest('tr').nextAll('tr').first().find('input[name="number"]').focus();
          } else if (e.keyCode == 38) {
            $(this).closest('tr').prevAll('tr').first().find('input[name="number"]').focus();
          }
        });

        $('.fc_nx').on('keypress', function(e) {
          if (e.keyCode == 13) {
            $(this).closest('td').nextAll().first().find('input').focus();
          }
        });

        $('input[name="cus_phone"]').on("keypress", function(e) {
          if (e.keyCode == 13) {
            $('input[name="number"]').eq(0).focus();
            // console.log();
          }
        });

        $('.payment_amount').on('keyup', function(e) {

          var temp = $('.payment_amount').attr('data-havetopay').replace(/,/g, '');

          var amount = parseFloat(temp);
          var inp_val = parseFloat($(this).val());
          var new_result = inp_val - amount;
          var result;

          result = new_result;
          if (new_result <= 0 || $(this).val() == '' || $(this).val() == undefined) {
            result = 0;
          }
          $(this).nextAll('input').first().val(result.toFixed(2));
        });

        $('#payment_isnow').on('change', function(e) {
          if ($(this).is(':checked')) {
            $('.pm_now').fadeIn();
          } else {
            $('.pm_now').hide();
          }
        });

        $('input[name="cus_phone"]').mask('000-000-0000');

        $('.confirm_bet').on('click', async function() {
          try {
            toggleConfirmBtn();
            let cus_phone = $('input[name="cus_phone"]').val();

            if ($('#payment_isnow').is(':checked')) {
              var is_paynow = 1;
              var cus_pay = $('input[name="cus_pay"]').val();
              var cus_change = $('input[name="cus_change"]').val();
              var temp = $('.payment_amount').attr('data-havetopay').replace(/,/g, '');
            }

            if (+cus_pay < +temp) {
              return swal('จำนวนเงินไม่ถูกต้อง', 'ท่านกรอกจำนวนเงินน้อยกว่ายอดสุทธิ กรุณาทำรายการใหม่อีกครั้ง',
                'warning');
            }

            if (!cus_phone) {
              return swal('กรุณากรอกหมายเลขโทรศัพท์', ' ', 'warning').then(() => $('input[name="cus_phone"]').focus());
            }

            if (cus_phone.length !== 12) {
              return swal('หมายเลขโทรศัพท์ไม่ถูกต้อง', 'โปรดตรวจสอบรูปแบบหมายเลขโทรศัพท์ที่คุณระบุ', 'warning')
                .then(() => $('input[name="cus_phone"]').focus());
            }

            const confirm = await swal('ยืนยันการทำรายการ?', ' ', 'info', {
              buttons: {
                cancel: 'ยกเลิก',
                confirm: {
                  text: 'ยืนยัน',
                  closeModal: false,
                }
              }
            });
            if (!confirm) return;

            const data = new URLSearchParams({
              commission_line: $('input[name="discount_line"]').val(),
              lottery_round_id: document.forms['main_form'].lottery_round_id.value,
              cus_phone: cus_phone,
              is_paynow: is_paynow || '',
              cus_pay: cus_pay || '',
              cus_change: cus_change || '',
              country: document.querySelector('[name=country]:checked').value,
            });

            const result = await fetchJson(`{{ route('cart.confirm') }}`, 'POST', data);

            if ($('#payment_isnow').is(':checked')) {
              var buttons = {
                cancel: 'ปิด',
                viewbill: 'พิมตั๋ว (มีส่วนลด)',
                viewbill2: 'พิมตั๋ว (ไม่มีส่วนลด)'
              };
            } else {
              var buttons = {
                cancel: 'ปิด',
                morebill: 'ออกตั๋วเพิ่ม'
              };
            }
            const viewReceipt = await swal('ทำรายการเรียบร้อย', ' ', 'success', { buttons });
            if (viewReceipt) {
              var link = `{{ route('bill.index') }}/receipt/${result.id}`;
              switch (viewReceipt) {
                case 'viewbill':
                  print(link + '?show_discount=1');
                  $('input[name="cus_phone"]').val('');
                  $('input[name="cus_pay"]').val('');
                  $('#payment_isnow').attr('checked', false);
                  $('#payment_isnow').prop('checked', false);
                  $('.pm_now').hide();
                  break;

                case 'viewbill2':
                  print(link);
                  $('input[name="cus_phone"]').val('');
                  $('input[name="cus_pay"]').val('');
                  $('#payment_isnow').attr('checked', false);
                  $('#payment_isnow').prop('checked', false);
                  $('.pm_now').hide();
                  break;

                case null:
                  $('input[name="cus_phone"]').val('');
                  $('input[name="cus_pay"]').val('');
                  $('#payment_isnow').attr('checked', false);
                  $('#payment_isnow').prop('checked', false);
                  $('.pm_now').hide();
                  break;

              }
            }
            $('.place_response_non').html('');
          } catch (e) {
            console.error(e);
            if (e.errorLog) renderLimitRemain(e.errorLog);
            let text = e.text || 'พบข้อบกพร่อง';
            if (e.data) {
              text += `\n\n${Object.values(e.data).join(`\n`)}`;
            }
            return swal({
              title: e.title || 'ไม่สามารถทำรายการได้',
              text: text,
              icon: 'error',
            });
          } finally {
            load_table();
            loadStoreBalance();
            // toggleConfirmBtn();
            // const checkBanedBtn = document.getElementById('checkBaned');
            // const confirmBtn = document.getElementById('confirmCart');
            // confirmBtn.classList.add('d-none');
            // checkBanedBtn.innerText = 'ตรวจสอบเลขอั้น';
            // checkBanedBtn.classList.remove('d-none');
            // toggleDisabled(checkBanedBtn);
          }
        });

        function renderLimitRemain(limitRemain) {
          var errorTr = ``;
          $(limitRemain).each(function(i, n) {
            errorTr += (
              `<tr>
                <td class="align-middle text-center font-weight-bold">${n.number}</td>
                <td class="align-middle text-center font-weight-bold">${n.type}</td>
                <td class="align-middle text-center font-weight-bold text-primary">${$.number(n.betAmount)} THB</td>
                <td class="align-middle text-center font-weight-bold text-danger">${$.number(n.remain)} THB</td>
              </tr>`
            );
          });
          $('.place_data_non').html(errorTr);
          $('.payment_amount').val('');
          $('.payment_amount').nextAll('input').first().val('');
        }

        $(document).on('click', '.removeFromCart', function() {
          let itemId = $(this).attr('data-item_id');
          $.ajax({
            url: '{{ url('/') }}/store/cart/' + itemId,
            method: 'DELETE',
            dataType: 'json',
            data: {},
            success: function(data) {
              load_table();
            }
          });
        });

        $('.resetCart').on('click', () => {
          swal('ยืนยันการล้างข้อมูล?', ' ', 'info', {
            buttons: ['ยกเลิก', 'ยืนยัน']
          }).then((sure) => {
            if (sure) {
              $.ajax({
                url: '{{ route('cart.reset') }}',
                method: 'DELETE',
                success: function(data) {
                  $('.place_data_non').html('');
                  load_table();
                  nf('ล้างข้อมูลการแทงเรียบร้อย', 'success');
                }
              });
            }
          });
        });

        // load_table();
        // checkBanedNumber();

        var lineVariable = '';
        $('input[name="number"]').eq(0).focus();
        $('.placeDiscl').text('LINE: ' + lineVariable);
        $('input[name="discount_line"]').val(lineVariable);

        $(document).on('click', '.change_discount_line', function() {
          swal('ยันยัน?', 'หากดำเนินการแก้ไขส่วนลด ระบบจะล้างค่ารายการแทงปัจจุบัน', 'warning', {
            buttons: ['ยกเลิก', 'ยืนยัน'],
          }).then((sure) => {
            if (sure) {
              $.ajax({
                url: '{{ route('cart.reset') }}',
                method: 'DELETE',
                success: (data) => {
                  load_table();
                  nf('ล้างข้อมูลการแทงเรียบร้อย', 'success');
                }
              });
              $('input[name="discount_line"]').val('');
              $('#discLineModal').modal({
                backdrop: 'static',
                keyboard: false
              }, 'show');
            }
          });
        });

        function clearCustomBet() {
          for (const $el of document.forms['main_form'].querySelectorAll('[name^="custom_value["]')) {
            $el.value = '';
          }
        }

        var k = 0;
        let keyPressTimeout;
        $(document).on('keypress', '.end_inp', e => {
          let el = $(this);
          let kc = e.keyCode;
          if (kc == 13 || kc == 8) {
            clearTimeout(keyPressTimeout)
            k++;
            console.log(k);
            keyPressTimeout = setTimeout(async () => {
              try {
                if (k < 2) return;

                if (kc == 8) { // Backspace
                  el.closest('tr:not(.no_remove)').remove();
                }

                if (kc == 13) { // Enter
                  console.log('enter!');
                  const $customBets = document.forms['main_form'].querySelectorAll('[name^="custom_value["]');
                  const customValueLength = Array.from($customBets).filter($el => $el.value).length

                  el.closest('tr').find('input[name="number"]').focus();

                  var formData = new FormData(document.forms['main_form']);
                  formData.append('country', document.querySelector('[name=country]:checked').value);

                  var newUrl = "{{ route('cart.store') }}";

                  if (customValueLength) {
                    const results = [];
                    let cart;
                    for (const $betPrice of $customBets) {
                      if (!$betPrice.value) continue;
                      const price = $betPrice.value;
                      const numbers = JSON.parse($betPrice.dataset.numbers);
                      for (const i in numbers) {
                        formData.set('number', numbers[i]);
                        formData.set('amount1', price);
                        const result = await fetchJson(newUrl, 'POST', formData);
                        if (result.log) {
                          $.each(result.log, (k, v) => nf(v, 'warning', 'fas fa-exclamation-circle'));
                        }
                        cart = result.cart;
                        results.push(result);
                      }
                    }
                    load_table(cart);
                    clearCustomBet();
                    return;
                  }

                  const result = await fetchJson(newUrl, 'POST', formData);
                  console.log(result)
                  if (!result.success) {
                    if (result.log) $.each(result.log, (k, v) => nf(v, 'warning',
                      'fas fa-exclamation-circle'));
                    return nf(result.text, 'warning', 'fas fa-exclamation-circle');
                  }

                  load_table(result.cart);
                  clearCustomBet();
                  let rowpos = $('.place_data').find('tr:last').position();
                  if (rowpos !== '' && rowpos !== undefined) $('.scroll_table').scrollTop(rowpos.top);

                  $('[name="number"], [name="amount1"], [name="amount2"]').val('');
                  $('.table_first > tr:not(.no_remove)').remove();
                  return;
                }
              } catch (e) {
                console.error(e);
                let text = e.text || 'พบข้อบกพร่อง';
                if (e.data) {
                  text += `\n\n${Object.values(e.data).join(`\n`)}`;
                }
                return nf(text, 'danger', 'fas fa-exclamation-circle');
              } finally {
                if (k >= 2) focusOn(document.querySelector('[name=number]'))
                k = 0;
              }
            }, 300);
          }
        });

        $('[data-toggle=tooltip]').tooltip();

        load_table();

        let isBtnLoad = false;
        let oldBtnHtlm;

        function toggleConfirmBtn() {
          return;
          if (!isBtnLoad) {
            let cnfbtn = $('#confirmCart');
            oldBtnHtlm = cnfbtn.html();
            let newBtn = cnfbtn.data('loading-text');
            cnfbtn.html(newBtn);
            cnfbtn.prop('disabled', true);
            isBtnLoad = true;
          } else {
            let cnfbtn = $('#confirmCart');
            cnfbtn.html(oldBtnHtlm);
            cnfbtn.prop('disabled', false);
            isBtnLoad = false;
          }
        }

      });

      let paymentLimitTable = $('#payment-limit-table');
      let paymentLimitTableDT;
      const toggleLimitPaymentCommissionLine = function(commissionVariable) {
        if (!commissionVariable) return false;
        if ($.fn.DataTable.isDataTable(paymentLimitTableDT)) paymentLimitTableDT.destroy();
        const targetTh = $('#limit-th-colspan');
        const commissionLineList = $('#commission-line-list').find('th');
        const commissinlineLower = commissionVariable.toLowerCase();
        targetTh.attr('colspan', 1);
        commissionLineList.each((i, n) => {
          const el = $(n);
          const thComLine = el.text();
          if (thComLine != commissionVariable) {
            el.addClass('d-none');
            $(`.commission-line-${thComLine.toLowerCase()}`).addClass('d-none');
          } else {
            el.removeClass('d-none');
            $(`.commission-line-${thComLine.toLowerCase()}`).removeClass('d-none');
          }
        });
        paymentLimitTableDT = paymentLimitTable.DataTable();
      }

      function showNumberLimitRemain(el) {
        const number = $(el).val();
        const country = $('[name=country]:checked').val();
        const lottery_round_id = document.forms['main_form'].lottery_round_id.value;

        if (!number) return;

        const targetElement = $('#show-number-limit-remain');

        $.post(`{{ route('store.numberlimit.remain') }}`, {
          number,
          country,
          lottery_round_id
        }, function(res) {
          if (res.success) {
            let htmlVal = ``;
            for (const i in res.data) {
              let data = res.data[i];
              htmlVal += `<tr>
                                    <td class="text-center align-middle">
                                        <h5 class="mb-0 text-indigo">${i}</h5>

                                    </td>
                                    <td class="text-center align-middle">
                                        <h4 class="mb-0 text-primary">${$.number(data, 2)}&nbsp;&nbsp;&nbsp;THB</h4>
                                    </td>
                                </tr>`;
            }
            targetElement.find('tbody').html(htmlVal);
            if (res.data.length === 0) {
              targetElement.hide();
            } else {
              targetElement.show();
            }
          }
        }, 'json');
      }

      function ReProcessCart() {
        $.post(`{{ route('front.betList.reProcess') }}`, {
          lotteryRoundId: $('[data-lottery-round-id]:eq(0)').val(),
          commissionLine: $('input[name="discount_line"]').val()
        }, function(response) {
          if (response.success) load_table();
        }, 'json');
      }

      const changeLimitInstance = wallet.subscribe(`FrontEnd`);
      changeLimitInstance.bind('update-limit-payment', function(data) {
        nf('อัตราจ่ายมีการเปลี่ยนแปลง', 'warning');
        ReProcessCart();
      });
    </script>
    <script>
      getLocation();

      function getLocation() {
        if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(showPosition);
        }
      }

      function showPosition(position) {
        let storeName = `{{ Auth::user()->username }}`;
        let lat = position.coords.latitude ?? null;
        let long = position.coords.longitude ?? null;
        let formData = {
          lat: lat,
          long: long,
          username: storeName,
        };
        $.post(`{{ route('api.store.locate') }}`, formData, function(res) {

        }, 'json');
      }
    </script>
  @endsection
@endif