@extends('layouts.appUi')

@section('title')
  แทงหวย
@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" />
  {{-- <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css"> --}}
  <style>
    /* 
    #swiper {
        height: 85vh;
    }
    */
    * {
      touch-action: manipulation;
    }

    body {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
    }

    #appCapsule {
      /* max-height: 100vh;
              display: flex;
              flex-grow: 1;
              padding-bottom: 0 !important; */
    }

    #overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.35);
      z-index: 100;
    }

    .btn-default {
      color: black;
    }

    .btn-default:hover,
    .btn-default.active {
      background-color: #04396b;
      color: white;
    }

    .bg-dark-blue {
      background-color: #01395e;
    }

    .swiper-slide {
      overflow: visible !important;
    }

    .swiper-button-next:after,
    .swiper-container-rtl .swiper-button-prev:after {
      content: unset;
    }

    [delete-betcart] {
      cursor: pointer;
    }

    .btn-check {
      display: none;
    }

    #closed-number-container,
    #limited-number-container {
      max-height: 316px;
    }

    #remain::before {
      content: 'เหลือเวลา: ';
      fw: 100;
      color: rgba(255, 255, 255, 0.5);
      display: inline-block;
      margin-right: .3rem;
      font-size: 80%;
    }

    tbody#inc_table:empty::after {
      content: 'ไม่มีรายการ';
      position: absolute;
      top: 40%;
      left: 50%;
      z-index: 1000;
      color: gray;
      transform: translate(-50%);
      text-align: center;
      font-size: 16pt;
    }

    @media only screen and (max-width: 400px) {
      .btn-red {
        font-size: 13px;
        padding-left: 10px;
        padding-right: 10px
      }

      span#remain::before {
        content: ': ';
      }
    }

    .bg-blue {
      color: white;
      background-color: #025b95 !important;
    }

    .bg-dark {
      color: white;
      background-color: #01395e !important;
    }

    #header-info-bg {
      width: 450px;
      background-color: rgb(1 92 149);
      border-radius: 0 0 50px 50px;
      filter: drop-shadow(0px 5px 5px rgba(0, 0, 0, 0.35));
    }

    td:last-child,
    th:last-child {
      padding-right: 15px !important;
    }

    td:first-child,
    th:first-child {
      padding-left: 15px !important;
    }

    main.main-content {
      display: flex;
      flex-direction: column;
    }

    #closed-number,
    #limited-number {
      transition: .3s;
    }

    @media screen and (max-width: 767px) {
      #header-info-container {
        position: fixed;
        width: 100%;
        z-index: 2;
        top: 56px;
      }

      #header-info-bg {
        width: 100%;
        border-radius: 0 !important;
        padding: 5px 15px !important;
        filter: drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.35));
      }

      #header-info-bg h3 {
        font-size: 16px;
      }

      #remain::before {
        /* margin-bottom: 0; */
        content: '';
        /* font-size: 100%; */
      }

    }

    @media screen and (min-width: 768px) {
      /* #swiper {
                    height: 75vh !important;
                  } */

      #remain::before {
        /* display: block; */
        margin-bottom: .3rem;
      }
    }

    @media screen and (min-width: 992px) {
      /* #swiper {
                    height: 85vh !important;
                  } */
    }

    #gototop {
      bottom: 10px;
      right: 10px;
      z-index: 99;
      cursor: pointer;
      color: rgb(0, 0, 0, 0.6);
      background-color: rgb(0, 0, 0, 0.075);
      text-shadow: 0 0 white;
    }

    .btn-new-color {
      background: #009ffd !important;
      border-color: #009ffd !important;
      color: #FFFFFF !important;
    }

    .lity-iframe-container {
      padding-top: calc(100vh - 70px);
      border-radius: 15px;
      margin: 0px 20px;
      width: calc(100% - 40px);
    }
  </style>
@endsection

@section('header')
  <div class="appHeader">
    <div class="left">
      <a href="javascript:;" onclick="goBack()" class="headerButton goBack">
        <ion-icon name="chevron-back-outline"></ion-icon>
      </a>
    </div>
    <div class="pageTitle d-flex">แทงหวย
      {{-- <span>{{ $lottery->name }}</span>
      <span class="d-md-block text-body my-auto" id="remain"
              data-format="{{ $lottery->counter_format }}">{{ $lotteryRound->close }}</span> --}}
    </div>
  </div>
@endsection

@section('content')
  <form id="bet-form" class="flex-fill d-flex flex-column overflow-auto">
    <fieldset id="bet-form-fieldset">
      <input type="hidden" name="country" value="{{ $lottery->country }}">
      <input type="hidden" name="lottery_round_id" value="{{ $lotteryRound->id }}">
      <div class="bg-dark-blue flex-fill [d-flex d-md-block]">
        <section id="header-info-container" class="pb-2 pb-md-5 overflow-hidden text-white d-flex">
          <div id="header-info-bg" class="text-center d-flex d-md-block mx-auto">
            <h3 class="text-center my-auto d-flex d-sm-block mb-md-3 mt-md-4 py-2">
              <span
                class="badge bg-warning text-body rounded-3 fs-6 h-auto p-1 mb-md-2 fw-light">{{ $lottery->name }}</span>
              <span class="d-md-block text-white my-auto" id="remain"
                data-format="{{ $lottery->counter_format }}">{{ $lotteryRound->close }}</span>
            </h3>
          </div>
        </section>

        <section class="mt-4 pt-5 mt-md-0 pt-md-0">
          <div class="container text-center">
            <div class="row justify-content-center g-3">
              <div class="col-auto">
                <button type="button" id="to-closed-number" class="btn fw-bold btn-danger text-nowrap px-2"
                  onclick="document.getElementById('closed-number').scrollIntoView({behavior: 'smooth'})"><i
                    class="fas fa-search me-1 text-white-50"></i>ปิดรับแทง / จำกัดอัตราจ่าย</button>
              </div>
              <div class="col-auto d-none">
                <button type="button" id="to-limited-number" class="btn fw-bold btn-warning text-nowrap px-2"
                  onclick="document.getElementById('limited-number').scrollIntoView({behavior: 'smooth'})"><i
                    class="fas fa-search me-1 text-white-50"></i>เลขอั้น</button>
              </div>
              <div class="col-auto">
                <a data-href="#deposit-dialog"
                  data-onclick="loadIframe('#deposit-iframe', '/profile/deposit-withdraw?iframe=true')"
                  href="#depositActionSheet" data-bs-toggle="modal" class="btn fw-bold text-nowrap btn-new-color px-2"
                  title="ฝากเงิน">
                  <i class="fas fa-arrow-up me-2 fa-fw my-auto"></i>
                  <span>ฝากเงิน</span>
                </a>
              </div>
              <div class="col-auto">
                <a href="{{ route('profile.betHistory') }}" data-href="#bet-history-dialog"
                  data-onclick="loadIframe('#bet-history-iframe', '')" class="btn fw-bold text-nowrap btn-new-color px-2"
                  title="รายการแทง">
                  <i class="fa fa-exchange-alt fa-rotate-90 me-2 fa-fw my-auto"></i>
                  <span>รายการแทง</span>
                </a>
              </div>
              <div class="col-auto">
                <a href="{{ route('front.lotteryResult', ['hide-menu' => true, 'hide-lottery-nav' => true, 'country' => $lottery->country]) }}" data-lity class="btn fw-bold text-nowrap btn-success px-2"
                  title="ผลรางวัล">
                  <i class="fa fa-award me-2 fa-fw my-auto"></i>
                  <span>ผลรางวัล</span>
                </a>
              </div>
              <div class="col-auto">
                <a class="btn fw-bold text-nowrap btn-secondary px-2 text-decoration-none" href="{{ route('front.changeBetPageType') }}"
                  title="เปลี่ยนไลน์ส่วนลด">
                  <i class="fas fa-keyboard me-2 fa-fw my-auto"></i>
                  <span>{{ session('bet-page-type', 'normal') === 'normal' ? 'หน้าแทงคีย์ลัด' : 'หน้าแทงปกติ' }}</span>
                </a>
              </div>
              <div class="col-auto">
                <a class="btn fw-bold text-nowrap btn-danger px-2 text-decoration-none" href="#commission-line-dialog"
                  data-bs-toggle="modal" title="เปลี่ยนไลน์ส่วนลด">
                  <i class="fas fa-random me-2 fa-fw my-auto"></i>
                  <span>เปลี่ยนไลน์ส่วนลด</span>
                </a>
              </div>
              @if ($similarLotteries)
                <div class="col-12">
                  @foreach ($similarLotteries as $similarLottery)
                    <a href="{{ route('front.bet', ['country' => $similarLottery->country]) }}"
                      class="btn fw-bold text-nowrap btn-secondary px-2">
                      {{-- <i class="fa fa-exchange-alt fa-rotate-90 me-2 fa-fw my-auto"></i> --}}
                      <span>{{ $similarLottery->name }}</span>
                    </a>
                  @endforeach
                </div>
              @endif
            </div>
            <div class="text-center">
              <kbd class="lottery-type-depend TH LA HN HV HP MY BAAC GSB mb-1">* กลับ</kbd>
              <kbd class="lottery-type-depend TH LA HN HV HP MY BAAC GSB mb-1">/ โต๊ด</kbd>
              <kbd class="lottery-type-depend TH HN HV HP LA mb-1">+ 2,3,4 ตัวแรกบน</kbd><br/>
              <kbd class="lottery-type-depend TH HN HV HP LA mb-1">+/ 3,4 ตัวแรกบนโต๊ด</kbd>
              <kbd class="lottery-type-depend TH LA HN HV HP MY BAAC GSB mb-1">- วิ่งสองตัวบน</kbd>
              <kbd class="lottery-type-depend TH MY mb-1">. ตัวหน้า</kbd><br/>
              <kbd class="lottery-type-depend TH HN HV HP MY LA mb-1">= ล่าง</kbd>
              {{-- <kbd class="lottery-type-depend TH HN HV MY mb-1">*. 3 ตัวหน้ากลับทุกประตู</kbd> --}}
              {{-- <kbd class="lottery-type-depend TH HN HV MY mb-1">*= 3 ตัวแรกบนกลับทุกประตู</kbd> --}}
            </div>
        </section>

        <section id="content-section" class="pt-3 pb-1 pt-md-4 pb-md-5 overflow-hidden flex-fill vw-100">
          <div class="container px-1 px-sm-3 pt-2 pt-md-0">
            <div class="d-md-flex gy-5 gx-3 gx-xl-4">
              {{-- กรอกเลข --}}
              <div id="choose-list" class="pt-4 col-md-6 px-1 px-md-3">
                <div class="card [h-100] shadow bg-transparent">
                  <h4
                    class="card-header py-2 py-lg-3 rounded-3 mx-4 bg-dark-red text-white text-center rounded-pill d-flex justify-content-center align-items-center fs-4 border-0"
                    style="margin-top: -25px;">
                    <span>ทายผลตัวเลข</span>
                  </h4>

                  {{-- <div class="card-body py-3">
                    <div class="row g-2 g-md-3">
                      <div class="col-6">
                        <div class="table-responsive rounded-0" title="โปรดเลือกหวย และไลน์ส่วนลด">
                          <table class="table table-sm table-borderless">
                            <tbody class="table_first">
                              <tr class="no_remove">
                                <td class="text-end align-middle pe-2">เลข</td>
                                <td class="p-0 align-middle text-center fw-bold border" style="padding: 0 !important;">
                                  <input id="bet-number-1" pattern="\d{1,4}" oninput="this.value=this.value.replace(/[^\d]/g, '')" minlength="1" maxlength="4" class="form-control shadow-none border-0 text-center rounded-0 fc_nx" name="number"
                                    placeholder="หมายเลข" onblur="showNumberLimitRemain(this)" data-direction="up">
                                </td>
                              </tr>
                              <tr class="no_remove">
                                <td class="text-end align-middle pe-2">จำนวน</td>
                                <td class="p-0 align-middle text-center fw-bold border" style="padding: 0 !important;">
                                  <input id="amount-input-1" class="form-control shadow-none border-0 text-center rounded-0 fc_nx end_inp" data-bet-number-id="#bet-number-1"
                                    name="amount" placeholder="จำนวนเงิน">
                                </td>
                              </tr>
                            </tbody>
                          </table>
                        </div>
                      </div>
                      <div class="col-6">
                        
                      </div>
                    </div>
                  </div> --}}
                  {{-- <div class="card-footer border-0">
                    <div class="addAfter"></div>
                  </div> --}}
                </div>

                <fieldset id="bet-filter" class="row g-2 g-lg-3 mt-0">
                  <div class="col-12 d-flex">
                    <ul class="listview image-listview text inset mx-0 w-100">
                      <li>
                        <div class="item">
                          <div class="table-responsive rounded-0 w-100" title="โปรดเลือกหวย และไลน์ส่วนลด">
                            <table class="table table-sm table-borderless">
                              <tbody class="table_first">
                                <tr class="no_remove">
                                  <td class="text-end align-middle pe-2" style="padding-left: 0 !important;">เลข</td>
                                  <td class="p-0 align-middle text-center fw-bold border" style="padding: 0 !important;">
                                    <input id="bet-number-1" pattern="\d{1,4}" 
                                    {{-- oninput="this.value=this.value.replace(/[^\d]/g, '')"  --}}
                                    minlength="1" class="form-control shadow-none border-0 text-center rounded-0 fc_nx" name="number"
                                      placeholder="หมายเลข" onblur="showNumberLimitRemain(this)" data-direction="up" data-tmd-toggle="numpad">
                                  </td>
                                </tr>
                                <tr class="no_remove">
                                  <td class="text-end align-middle pe-2" style="padding-left: 0 !important;">จำนวนเงิน</td>
                                  <td class="p-0 align-middle text-center fw-bold border" style="padding: 0 !important;">
                                    <input id="amount-input-1" class="form-control shadow-none border-0 text-center rounded-0 fc_nx end_inp" data-bet-number-id="#bet-number-1"
                                      name="amount" placeholder="จำนวนเงิน" data-tmd-toggle="numpad" data-type="price">
                                  </td>
                                </tr>
                                {{-- <tr class="no_remove">
                                  <td class="text-end align-middle pe-2" style="padding-left: 0 !important;">ประเภทล่าง</td>
                                  <td class="p-0 align-middle text-center fw-bold border" style="padding: 0 !important;">
                                    <input id="amount-input-2" class="form-control shadow-none border-0 text-center rounded-0 fc_nx end_inp" data-bet-number-id="#bet-number-1"
                                      name="amount" placeholder="ประเภทล่าง">
                                  </td>
                                </tr> --}}
                              </tbody>
                            </table>
                          </div>
                        </div>
                      </li>
                      {{-- <li>
                        <div class="item">
                          <div class="in justify-content-start">
                            <div class="form-check form-switch me-2">
                              <input type="checkbox" role="switch" name="symbol_up" onchange="toggleBetFilter(this, '#bet-number-1')" id="symbol_up_*" class="form-check-input ottery-type-depend TH LA HN HV MY" value="*" data-direction="up" data-min-length="2" data-max-length="4" data-allowed-symbols='["+", ".", "_"]' />
                              <label for="symbol_up_*" class="form-check-label text-nowrap"><span class="ms-5 ps-3">กลับ</span></label>
                            </div>
                          </div>
                        </div>
                      </li>
                      <li>
                        <div class="item">
                          <div class="in justify-content-start">
                            <div class="form-check form-switch me-2">
                              <input type="checkbox" role="switch" name="symbol_up" onchange="toggleBetFilter(this, '#bet-number-1')" id="symbol_up_/" class="form-check-input ottery-type-depend TH LA HN HV MY" value="/" data-direction="up" data-min-length="3" data-max-length="4" data-allowed-symbols='["+", ".", "_"]' />
                              <label for="symbol_up_/" class="form-check-label text-nowrap"><span class="ms-5 ps-3">โต๊ด</span></label>
                            </div>
                          </div>
                        </div>
                      </li>
                      <li>
                        <div class="item">
                          <div class="in justify-content-start">
                            <div class="form-check form-switch me-2">
                              <input type="checkbox" role="switch" name="symbol_up" onchange="toggleBetFilter(this, '#bet-number-1')" id="symbol_up__" class="form-check-input ottery-type-depend TH LA HN HV MY" value="_" data-direction="up" data-min-length="2" data-max-length="4" data-allowed-symbols='["*", "/"]' />
                              <label for="symbol_up__" class="form-check-label text-nowrap"><span class="ms-5 ps-3">3 ตัวบน</span></label>
                            </div>
                          </div>
                        </div>
                      </li>
                      <li>
                        <div class="item">
                          <div class="in justify-content-start">
                            <div class="form-check form-switch me-2">
                              <input type="checkbox" role="switch" name="symbol_up" onchange="toggleBetFilter(this, '#bet-number-1')" id="symbol_up_+" class="form-check-input ottery-type-depend TH LA" value="+" data-direction="up" data-min-length="3" data-max-length="3" data-allowed-symbols='["*", "/"]' />
                              <label for="symbol_up_+" class="form-check-label text-nowrap"><span class="ms-5 ps-3">3 ตัวแรกบน</span></label>
                            </div>
                          </div>
                        </div>
                      </li>
                      <li>
                        <div class="item">
                          <div class="in justify-content-start">
                            <div class="form-check form-switch me-2">
                              <input type="checkbox" role="switch" name="symbol_up" onchange="toggleBetFilter(this, '#bet-number-1')" id="symbol_up_." class="form-check-input ottery-type-depend TH HN HV MY" value="." data-direction="up" data-min-length="3" data-max-length="3" data-allowed-symbols='["*"]' />
                              <label for="symbol_up_." class="form-check-label text-nowrap"><span class="ms-5 ps-3">3 ตัวหน้า</span></label>
                            </div>
                          </div>
                        </div>
                      </li>
                      <li>
                        <div class="item">
                          <div class="in justify-content-start">
                            <div class="form-check form-switch me-2">
                              <input type="checkbox" role="switch" name="symbol_up" onchange="toggleBetFilter(this, '#bet-number-1')" id="symbol_up_-" class="form-check-input ottery-type-depend TH LA HN HV MY" value="-" data-direction="up" data-min-length="1" data-max-length="1" data-allowed-symbols='[]' />
                              <label for="symbol_up_-" class="form-check-label text-nowrap"><span class="ms-5 ps-3">วิ่ง 2 ตัวบน</span></label>
                            </div>
                          </div>
                        </div>
                      </li> --}}
                    </ul>
                  </div>
                  {{-- <div class="col-6 d-flex">
                    <ul class="listview image-listview text inset mx-0 w-100">
                      <li>
                        <div class="item">
                          <div class="table-responsive rounded-0 w-100" title="โปรดเลือกหวย และไลน์ส่วนลด">
                            <table class="table table-sm table-borderless">
                              <tbody class="table_first">
                                <tr class="no_remove">
                                  <td class="text-end align-middle pe-2" style="padding-left: 0 !important;">เลข</td>
                                  <td class="p-0 align-middle text-center fw-bold border" style="padding: 0 !important;">
                                    <input id="bet-number-2" pattern="\d{1,4}" oninput="this.value=this.value.replace(/[^\d]/g, '')" minlength="1" maxlength="4" class="form-control shadow-none border-0 text-center rounded-0 fc_nx" name="number"
                                      placeholder="หมายเลข" onblur="showNumberLimitRemain(this)" data-direction="down">
                                  </td>
                                </tr>
                                <tr class="no_remove">
                                  <td class="text-end align-middle pe-2" style="padding-left: 0 !important;">จำนวน</td>
                                  <td class="p-0 align-middle text-center fw-bold border" style="padding: 0 !important;">
                                    <input id="amount-input-2" class="form-control shadow-none border-0 text-center rounded-0 fc_nx end_inp" data-bet-number-id="#bet-number-2"
                                      name="amount2" placeholder="จำนวนเงิน">
                                  </td>
                                </tr>
                              </tbody>
                            </table>
                          </div>
                        </div>
                      </li>
                      <li>
                        <div class="item">
                          <div class="in justify-content-start">
                            <div class="form-check form-switch me-2">
                              <input type="checkbox" role="switch" name="symbol_down" onchange="toggleBetFilter(this, '#bet-number-2')" id="symbol_down_*" class="form-check-input align-middle lottery-type-depend TH LA HN HV MY mb-1" value="*" data-direction="down" data-min-length="2" data-max-length="4" data-allowed-symbols='["_"]' />
                              <label for="symbol_down_*" class="form-check-label text-nowrap"><span class="ms-5 ps-3">กลับ</span></label>
                            </div>
                          </div>
                        </div>
                      </li>
                      <li>
                        <div class="item">
                          <div class="in justify-content-start">
                            <div class="form-check form-switch me-2">
                              <input type="checkbox" role="switch" name="symbol_down" onchange="toggleBetFilter(this, '#bet-number-2')" id="symbol_down__" class="form-check-input align-middle lottery-type-depend TH LA HN HV MY mb-1" value="_" data-direction="down" data-min-length="2" data-max-length="2" data-allowed-symbols='["*"]' />
                              <label for="symbol_down__" class="form-check-label text-nowrap"><span class="ms-5 ps-3">2 ตัวล่าง</span></label>
                            </div>
                          </div>
                        </div>
                      </li>
                      <li>
                        <div class="item">
                          <div class="in justify-content-start">
                            <div class="form-check form-switch me-2">
                              <input type="checkbox" role="switch" name="symbol_down" onchange="toggleBetFilter(this, '#bet-number-2')" id="symbol_down_-" class="form-check-input align-middle lottery-type-depend TH LA HN HV MY mb-1" value="-" data-direction="down" data-min-length="1" data-max-length="1" data-allowed-symbols='[]' />
                              <label for="symbol_down_-" class="form-check-label text-nowrap"><span class="ms-5 ps-3">วิ่ง 2 ตัวล่าง</span></label>
                            </div>
                          </div>
                        </div>
                      </li>
                    </ul>
                  </div> --}}
                </fieldset>

                <div class="card mt-2 mt-md-3">
                  <div class="card-body">
                    <div class="d-grid">
                      <button type="button" id="add-bet" class="btn btn-danger bet_form_btn rounded-pill fs-6">
                        <i class="fas fa-plus text-white-50 me-1"></i> เพิ่มรายการ
                      </button>
                    </div>
                  </div>
                </div>

                <div id="show-number-limit-remain" class="mt-3 card card-body border-0" style="display: none;">
                  <div class="table-responsive rounded-0">
                    <table class="table align-items-center table-bordered table-sm [table-striped] table-hover">
                      <thead class="thead-light">
                        <tr>
                          <th class="text-center table-info align-middle text-xs fw-bold">ประเภท</th>
                          <th class="text-center table-info align-middle text-xs fw-bold">รับแทงได้</th>
                        </tr>
                      </thead>
                      <tbody></tbody>
                    </table>
                  </div>
                </div>
              </div>
              {{-- END กรอกเลข --}}

              {{-- รายการเล่นหวย --}}
              <div id="play-list" class="pt-5 pt-md-4 col-md-6 px-1 px-md-3 h-auto">
                <div class="card h-100 shadow">
                  <h4
                    class="card-header py-2 py-lg-3 rounded-3 mx-4 bg-dark-red text-white text-center rounded-pill d-flex justify-content-center align-items-center fs-4"
                    style="margin-top: -25px;">
                    <span>รายการเล่นหวย</span>
                    </button>
                  </h4>
                  <div class="card-body d-flex flex-column justify-content-between h-100 px-0 pb-0">
                    <div class="h-100 flex-fill">
                      <div class="mx-0 h-100 justify-content-between position-relative g-0 d-flex flex-column">
                        <div class="table-responsive flex-grow-1 border-bottom"
                          style="min-height: 50vh; /* max-height: 60vh; */">
                          <table id="cart-table" class="table mb-0 small table-sm table-hover">
                            <thead>
                              <tr class="border-bottom">
                                <th class="text-center p-1">เลข</th>
                                <th class="text-center p-1">ประเภท</th>
                                <th class="text-center p-1">แทง</th>
                                <th class="text-center p-1">ส่วนลด</th>
                                <th class="text-center p-1">อัตราจ่าย</th>
                                <th class="text-center p-1">จ่าย</th>
                                <th class="text-center p-1">#</th>
                              </tr>
                            </thead>
                            <tbody id="inc_table" class="text-body"></tbody>
                          </table>
                        </div>
                        <div class="table-responsive flex-grow-0 px-4 py-3">
                          <table class="table mb-0">
                            <tbody id="table_end">
                              <tr>
                                <td colspan="3" class="text-center p-1 border text-body fs-6">
                                  <div>รวมยอด</div>
                                  <div>รายการเล่น</div>
                                </td>
                                <td colspan="3" class="text-center p-1 border text-body">
                                  <div>
                                    <span id="total-amount">0.00</span> -
                                    <span id="total-discount">0.00</span>
                                  </div>
                                  <div class="fs-6">= <span id="total-payment">0.00</span> THB</div>
                                </td>
                              </tr>
                            </tbody>
                          </table>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="card-footer rounded-pill text-center border-0 bg-white pt-0">
                    <div class="row g-2 row-cols-2">
                      <div class="d-grid">
                        <button class="btn btn-success rounded-pill" id="confirm-bet" type="submit">
                          <i class="fas fa-check me-1 text-white-50"></i>ยืนยันรายการ</button>
                      </div>
                      <div class="d-grid">
                        <button class="btn btn-danger rounded-pill" id="cancel-list" type="reset"
                          onclick="removeBet('all')">
                          <i class="fas fa-times me-1 text-white-50"></i>ยกเลิกรายการ</button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              {{-- END รายการเล่นหวย --}}
            </div> {{-- .swiper-wrapper --}}
          </div> {{-- #swiper --}}

          <div class="container">
            <div class="row pb-4 pb-lg-0">
              <div id="closed-number" class="col-auto mx-auto mt-5 pt-4 d-flex justify-content-center">
                <div class="card h-100 shadow position-relative" style="min-width: 300px;">
                  {{-- <button type="button" class="btn btn-danger btn-lg d-md-none position-absolute px-2 shadow"
                    onclick="toggleDialog(this.closest('#closed-number'))" title="เลขปิดรับแทง"
                    style="top: 25%;transform: translateY(-50%);right: -39px;border-radius: 0 50px 50px 0;">
                    <i class="fa-exclamation-triangle fas fa-fw"></i>
                  </button> --}}
                  <h4
                    class="card-header rounded-3 mx-4 bg-danger text-white text-center rounded-pill d-flex justify-content-center align-items-center"
                    style="margin-top: -25px;"><i class="fas fa-times mx-3 text-white-50"></i>ปิดรับแทง<i
                      class="fas fa-times mx-3 text-white-50"></i></h4>
                  <div id="closed-number-container" class="mt-md-3 overflow-auto mb-2">
                    {{-- <p class="text-center mb-0 pt-3 pb-4">ไม่มีรายการเลขปิด</p> --}}
                    <table class="table table-sm mb-0 position-relative" style="width: 100%;">
                      <thead>
                        <tr class="table-danger py-1">
                          <th class="align-middle text-center">ประเภทหวย</th>
                          <th class="align-middle text-center">หมายเลข</th>
                        </tr>
                      </thead>
                      <tbody>
                        @if (!$numberLimit->count())
                          <tr>
                            <td class="align-middle text-center py-3" colspan="2">
                              ไม่มีรายการเลขปิด
                            </td>
                          </tr>
                        @endif
                        @foreach ($numberLimit as $key => $item)
                          <tr class="py-1">
                            <td class="align-middle text-center">{{ $item->lottery_type }}</td>
                            <td class="align-middle text-center text-danger fw-bold">
                              {{ $item->limit_number }}</td>
                          </tr>
                        @endforeach
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
              <div id="limited-payment" class="col-auto mx-auto mt-5 pt-4 d-flex justify-content-center">
                <div class="card h-100 shadow position-relative" style="min-width: 300px;">
                  {{-- <button type="button" class="btn btn-danger btn-lg d-md-none position-absolute px-2 shadow"
                    onclick="toggleDialog(this.closest('#limited-payment'))" title="เลขปิดรับแทง"
                    style="top: 25%;transform: translateY(-50%);right: -39px;border-radius: 0 50px 50px 0;">
                    <i class="fa-exclamation-triangle fas fa-fw"></i>
                  </button> --}}
                  <h4
                    class="card-header rounded-3 mx-4 bg-danger text-white text-center rounded-pill d-flex justify-content-center align-items-center"
                    style="margin-top: -25px;"><i class="fas fa-times mx-3 text-white-50"></i>จำกัดอัตราจ่าย<i
                      class="fas fa-times mx-3 text-white-50"></i></h4>
                  <div id="limited-payment-container" class="mt-md-3 overflow-auto mb-2">
                    {{-- <p class="text-center mb-0 pt-3 pb-4">ไม่มีรายการเลขปิด</p> --}}
                    <table class="table table-sm mb-0 position-relative" style="width: 100%;">
                      <thead>
                        <tr class="table-danger py-1">
                          <th class="align-middle text-center">ประเภทหวย</th>
                          <th class="align-middle text-center">หมายเลข</th>
                          <th class="align-middle text-center">บาทละ</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <td class="align-middle text-center py-3" colspan="3">
                            ไม่มีรายการจำกัดอัตราจ่าย
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>

              <div id="limited-number" class="col-auto mx-auto mt-5 pt-4 d-none justify-content-center">
                <div class="card h-100 shadow position-relative" style="width: 400px; max-width: 90vw;">
                  <h4
                    class="card-header rounded-3 mx-4 bg-warning text-center rounded-pill d-flex justify-content-center align-items-center text-body"
                    style="margin-top: -25px;"><i class="fas fa-exclamation mx-3 text-black-50"></i>เลขอั้น<i
                      class="fas fa-exclamation mx-3 text-black-50"></i></h4>
                  <div id="limited-number-container" class="mt-md-3 overflow-auto mb-2">
                    {{-- <p class="text-center mb-0 pt-3 pb-4">ไม่มีรายการเลขปิด</p> --}}
                    <table class="table table-sm mb-0 position-relative" style="width: 100%;">
                      <thead>
                        <tr class="table-warning">
                          <th class="align-middle text-center">ประเภทหวย</th>
                          <th class="align-middle text-center">หมายเลข</th>
                          <th class="align-middle text-center"></th>
                        </tr>
                      </thead>
                      <tbody>
                        @if (!$numberLimit->count())
                          <tr>
                            <td class="align-middle text-center py-3" colspan="2">
                              ไม่มีรายการเลขปิด
                            </td>
                          </tr>
                        @endif
                        @foreach ($numberLimit as $key => $item)
                          <tr class="py-1">
                            <td class="align-middle text-center">{{ $item->lottery_type }}</td>
                            <td class="align-middle text-center text-warning fw-bold">
                              {{ $item->limit_number }}</td>
                          </tr>
                        @endforeach
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>
      </div>

      <div id="commission-line-dialog" class="modal fade" tabindex="-1" data-bs-keyboard="false"
        data-bs-backdrop="static">
        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
          <div class="modal-content bg-transparent border-0">
            <div class="modal-header border-0">
              <div class="text-center mx-auto">
                <p class="mb-1 text-center text-white">
                  <span class="badge badge-pill badge-primary fs-6 p-2">โปรดเลือก Line ส่วนลด</span>
                </p>
                <div class="btn-group bg-white rounded-pill" data-toggle="buttons">
                  <input type="radio" class="btn-check" name="commission_line" value="A" id="option1">
                  <label for="option1" data-for="tab-commission-line-A"
                    class="btn btn-lg fw-6 fw-bold btn-outline-success" style="border-radius: 50px 0 0 50px;">Line
                    A</label>

                  <input type="radio" class="btn-check" name="commission_line" value="B" id="option2">
                  <label for="option2" data-for="tab-commission-line-B"
                    class="btn btn-lg fw-6 fw-bold btn-outline-success">Line B</label>

                  <input type="radio" class="btn-check" name="commission_line" value="C" id="option3">
                  <label for="option3" data-for="tab-commission-line-C"
                    class="btn btn-lg fw-6 fw-bold btn-outline-success" style="border-radius: 0 50px 50px 0;">Line
                    C</label>
                </div>
                <div class="d-none nav" role="tablist">
                  <button id="tab-commission-line-A" data-bs-toggle="tab" data-bs-target="#commission-line-A"
                    aria-controls="commission-line-A" role="tab" aria-selected="false">A</button>
                  <button id="tab-commission-line-B" data-bs-toggle="tab" data-bs-target="#commission-line-B"
                    aria-controls="commission-line-B" role="tab" aria-selected="false">B</button>
                  <button id="tab-commission-line-C" data-bs-toggle="tab" data-bs-target="#commission-line-C"
                    aria-controls="commission-line-C" role="tab" aria-selected="false">C</button>
                </div>
              </div>
            </div>
            <div class="modal-body p-0 rounded-3">
              <div id="commission-line-info" class="collapse">
                <div class="tab-content p-0">
                  @foreach ($commission->commission as $line => $item)
                    <div class="tab-pane fade {{ $line === 'a' ? 'show active' : '' }}"
                      id="commission-line-{{ strtoupper($line) }}" role="tabpanel">
                      <table class="table table-sm table-hover small table-light table-striped mb-0"
                        data-line="{{ strtoupper($line) }}">
                        <thead class="thead-dark">
                          <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>
                          </tr>
                        </thead>
                        <tbody>
                          @foreach ($commission->commission[$line] as $type => $arr)
                            @php
                                $comtinueArr = ['3 ตัวท้าย รางวัลที่ 1', '3 ตัวท้าย โต๊ด รางวัลที่ 1', '2 ตัวท้าย รางวัลที่ 1']; /** ปิดแสดงเฉพาะล็อตเตอรี่ (ใช้งานชั่วคราว) : 2021-11-14 13.45 น. **/
                                if (in_array($type, $comtinueArr)) continue;
                            @endphp
                            <tr>
                              <td class="align-middle text-center text-body p-0">
                                <p id="text_t" class="mb-0">{{ $type }}</p>
                              </td>
                              <td class="text-center text-body">{{ $arr['discount'] ?? 0 }} <small
                                  class="text-black-50">%</small></td>
                              <td class="text-center text-body">{{ number_format($arr['payment'] ?? $arr, 2) }} <small
                                  class="text-black-50">THB</small></td>
                            </tr>
                          @endforeach
                        </tbody>
                      </table>
                    </div>
                  @endforeach
                </div>
              </div>
            </div>
            <div class="modal-footer border-0 p-0" style="display: none;">
              <button class="btn btn-success btn-block rounded-pill my-3" type="button" name="confirm-commission-line"><i
                  class="fas fa-check me-2 text-white-50"></i>ยืนยันเลือกส่วนลด</button>
            </div>
          </div>
        </div>
      </div>
    </fieldset>
  </form>

  {{-- <div id="deposit-dialog" class="modal fade" tabindex="-1">
    <div class="modal-dialog modal-xl my-0 py-4 h-100">
      <div class="modal-content h-100">
        <div class="modal-header">
          <h5 class="modal-title icons-nav shadow-none m-0 p-0 d-flex align-items-center w-100"><i
              class="fas fa-money-bill text-center me-2"></i>ฝากเงิน</h5>
          <button class="btn-close" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body p-0 d-flex align-items-stretch">
          <iframe id="deposit-iframe" src="" frameborder="0" class="w-100"></iframe>
        </div>
      </div>
    </div>
  </div>
  <div id="bet-history-dialog" class="modal fade" tabindex="-1">
    <div class="modal-dialog modal-xl my-0 py-4 h-100">
      <div class="modal-content h-100">
        <div class="modal-header">
          <h5 class="modal-title icons-nav shadow-none m-0 p-0 d-flex align-items-center w-100"><i
              class="fas fa-history text-center me-2"></i>รายการแทง</h5>
          <button class="btn-close" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body p-0 d-flex align-items-stretch">
          <iframe id="bet-history-iframe" src="" frameborder="0" class="w-100"></iframe>
        </div>
      </div>
    </div>
  </div> --}}
@endsection

@section('footer')
  <form id="num-pad-form-dialog" class="modal fade action-sheet inset" tabindex="-1" data-tmd-target>
    <div class="modal-dialog">
      <div class="modal-content mx-auto" style="max-width: 400px;">
        <div class="modal-body">
          <div class="action-sheet-content">
            <div class="row g-2 justify-content-center">
              <div class="col-12">
                <input id="num-pad-value" class="form-control form-control-lg text-center spinner-hidden"
                  name="num_pad_value" type="text" placeholder="กรอกตัวเลข" inputmode="none">
              </div>
              <div class="col-12">
                <div id="price-shortcut" class="row row-cols-5 g-2 justify-content-center">
                  <div class="d-grid"><button type="button" class="btn btn-warning fs-6 fw-bold btn-sm"
                      onclick="numPadAdd('*');">*</button></div>
                  <div class="d-grid"><button type="button" class="btn btn-warning fs-6 fw-bold btn-sm"
                      onclick="numPadAdd('/');">/</button></div>
                  <div class="d-grid"><button type="button" class="btn btn-warning fs-6 fw-bold btn-sm"
                      onclick="numPadAdd('.');">.</button></div>
                  <div class="d-grid"><button type="button" class="btn btn-warning fs-6 fw-bold btn-sm"
                      onclick="numPadAdd('+');">+</button></div>
                  <div class="d-grid"><button type="button" class="btn btn-warning fs-6 fw-bold btn-sm"
                      onclick="numPadAdd('-');">-</button></div>
                  <div class="d-grid"><button type="button" class="btn btn-warning fs-6 fw-bold btn-sm"
                        onclick="numPadAdd('+/');">+/</button></div>
                  <div class="d-grid"><button type="button" class="btn btn-warning fs-6 fw-bold btn-sm"
                      onclick="numPadAdd('=');">=</button></div>
                </div>
              </div>
              {{-- <div class="col-4">
                <button type="button" onclick="numPadRemove()" class="btn fw-bold btn-danger w-100"><i
                    class="fas fa-backspace me-1"></i>ทั้งหมด</button>
              </div>
              <div class="col-4">
                <button type="button" onclick="numPadRemove(1)" class="btn fw-bold btn-danger w-100"><i
                    class="fas fa-backspace me-1"></i>ล่าสุด</button>
              </div>
              <div class="col-4">
                <button type="button" onclick="numPadRemove()" data-bs-dismiss="modal"
                  class="btn fw-bold btn-outline-danger w-100"><i class="fa fa-times me-1"></i>ปิด</button>
              </div> --}}

              <div class="col-4">
                <button type="button" onclick="numPadAdd('1')"
                  class="btn fw-bold btn-primary w-100 btn-lg fs-5">1</button>
              </div>
              <div class="col-4">
                <button type="button" onclick="numPadAdd('2')"
                  class="btn fw-bold btn-primary w-100 btn-lg fs-5">2</button>
              </div>
              <div class="col-4">
                <button type="button" onclick="numPadAdd('3')"
                  class="btn fw-bold btn-primary w-100 btn-lg fs-5">3</button>
              </div>

              <div class="col-4">
                <button type="button" onclick="numPadAdd('4')"
                  class="btn fw-bold btn-primary w-100 btn-lg fs-5">4</button>
              </div>
              <div class="col-4">
                <button type="button" onclick="numPadAdd('5')"
                  class="btn fw-bold btn-primary w-100 btn-lg fs-5">5</button>
              </div>
              <div class="col-4">
                <button type="button" onclick="numPadAdd('6')"
                  class="btn fw-bold btn-primary w-100 btn-lg fs-5">6</button>
              </div>

              <div class="col-4">
                <button type="button" onclick="numPadAdd('7')"
                  class="btn fw-bold btn-primary w-100 btn-lg fs-5">7</button>
              </div>
              <div class="col-4">
                <button type="button" onclick="numPadAdd('8')"
                  class="btn fw-bold btn-primary w-100 btn-lg fs-5">8</button>
              </div>
              <div class="col-4">
                <button type="button" onclick="numPadAdd('9')"
                  class="btn fw-bold btn-primary w-100 btn-lg fs-5">9</button>
              </div>
              
              <div class="col-3">
                <button type="button" onclick="numPadAdd('0')"
                  class="btn fw-bold btn-primary w-100 btn-lg fs-5">0</button>
              </div>
              <div class="col-3">
                <button type="button" onclick="numPadAdd(',')"
                  class="btn fw-bold btn-primary w-100 btn-lg fs-5">,</button>
              </div>
              <div class="col-3">
                {{-- <button type="button" onclick="numPadAdd('.')" class="btn fw-bold btn-outline-primary w-100 btn-lg fs-5">.</button> --}}
                <button type="button" onclick="numPadRemove(1)" class="btn fw-bold btn-danger w-100 btn-lg fs-5">ลบ</button>
              </div>
              <div class="col-3">
                <button type="submit" class="btn fw-bold btn-outline-primary w-100 btn-lg fs-5"><i
                    class="fas fa-check me-1"></i>ตกลง</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>

  <button id="gototop" class="btn gototop py-1 px-2 h-auto position-fixed d-block" title="Go to top">
    <i class="d-block fas fa-arrow-up"></i>
    <small>บน</small>
  </button>

@endsection

@section('script')
  <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://unpkg.com/swiper/swiper-bundle.min.js"></script>
  <script>
    'use strict';

    const numPadFormDialog = document.getElementById('num-pad-form-dialog');
    const numPadFormModal = new bootstrap.Modal(numPadFormDialog);

    const priceShortcutEl = document.getElementById('price-shortcut');

    const cartTable = document.getElementById('cart-table');

    const closedNumberDiv = document.getElementById('closed-number');
    const limitedPaymentDiv = document.getElementById('limited-payment');
    const limitedNumberDiv = document.getElementById('limited-number');

    const closedNumberContainer = document.getElementById('closed-number-container');
    const limitedPaymentContainer = document.getElementById('limited-payment-container');
    const limitedNumberContainer = document.getElementById('limited-number-container');

    const commissionLineDialog = document.getElementById('commission-line-dialog');
    const commissionLineInfo = document.getElementById('commission-line-info');
    const remain = document.getElementById('remain');

    const betForm = document.forms['bet-form'];
    const betFormFieldset = document.getElementById('bet-form-fieldset');
    const betFilterFieldset = document.getElementById('bet-filter');
    const addBetBtn = document.getElementById('add-bet');
    const betNumber1 = document.getElementById('bet-number-1');
    const betNumber2 = document.getElementById('bet-number-2');
    const amount1 = document.getElementById('amount-input-1');
    const amount2 = document.getElementById('amount-input-2');

    const playList = document.getElementById('play-list');
    const chooseList = document.getElementById('choose-list');

    const isMobile = ['android', 'iphone'].some(v => window.navigator.userAgent.toLowerCase().includes(v));

    const lotteryRoundId = `{{ $lotteryRound->id }}`;
    const lotteryCode = `{{ $lottery->country }}`;
    const lotteryId = `${lotteryCode}-${lotteryRoundId}`;
    let currentLine;
    try {
      currentLine = JSON.parse(sessionStorage.getItem('bet_detail'))[lotteryId];
    } catch (e) {
      currentLine = undefined;
    }

    function closeDialog(el) {
      el.classList.remove('show');
      fadeOut(overlay)
      return;
    }

    function openDialog(el) {
      el.classList.add('show');
      fadeIn(overlay);
      return;
    }

    function toggleDialog(el) {
      el.classList.toggle('show');
      el.classList.contains('show') ? fadeIn(overlay) : fadeOut(overlay);
      return;
    }

    async function getbetList() {
      const formData = new FormData();
      formData.append('lottery_round_id', lotteryRoundId);
      const fetchResult = await fetchJson(`{{ route('front.betList') }}`, 'POST', formData);
      showBetList(fetchResult);
      // $.getJSON(`{{ route('front.betList') }}`, {}, (res) => showBetList(res));
    }

    function showBetList(res) {
      const placeTable = document.getElementById('inc_table');
      const totalAmount = document.getElementById('total-amount');
      const totalDiscount = document.getElementById('total-discount');
      const totalPayment = document.getElementById('total-payment');

      let tr = ``;
      let sumAmount = 0,
        sumDiscount = 0,
        sumPayment = 0;
      for (const k in res) {
        const data = res[k];

        sumAmount += +data.amount;
        sumDiscount += +data.inc_discount;
        sumPayment += +data.payment;

        tr +=
          `<tr>
            <td class="text-center align-middle"> ${data.number} </td>
            <td class="text-center align-middle"> ${data.type} </td>
            <td class="text-center align-middle"> ${numberFormat(data.amount, 2)} </td>
            <td class="text-center align-middle"> ${numberFormat(data.inc_discount, 2)} </td>
            <td class="text-center align-middle ${data.isLimitPayment ? 'text-danger' : ''}"> ${numberFormat(data.paymentRate, 2)} </td>
            <td class="text-center align-middle"> ${numberFormat(data.payment, 2)} </td>
            <td class="text-center align-middle"> <button type="button" class="btn-danger [btn-block] rounded-pill" onclick="removeBet(${k})"><i class="fas fa-times"></i></button> </td>
          </tr>`;
      }
      placeTable.innerHTML = tr;
      totalAmount.textContent = numberFormat(sumAmount, 2);
      totalDiscount.textContent = numberFormat(sumDiscount, 2);
      totalPayment.textContent = numberFormat(sumPayment, 2);
    }

    function removeBet(id, removeAll = false) {
      return tryCatchSwal(async () => {
        const formData = new FormData();
        formData.append('removeAll', removeAll);
        const result = await fetchJson(
          `{{ route('front.removeBet', ['lotteryRoundId' => $lotteryRound->id]) }}/${id}`, 'DELETE', formData);
        if (!result) return false;
        showBetList(result);
        return window.location.reload();
      });
    }

    function loadIframe(target, url) {
      const iframe = document.querySelector(target);
      iframe.src = url;
    }

    function isVisible(e) {
      return !!(e.offsetWidth || e.offsetHeight || e.getClientRects().length);
    }

    function fetchLimits() {
      return tryCatchSwal(async () => {
        const formData = new FormData();
        formData.append('round_id', lotteryId);
        formData.append('commission_line', currentLine);
        const result = await fetchJson(`{{ route('member.checkLimitPayment') }}`, 'POST', formData);
        if (!result) return false;

        if (!result.data) return;

        let trString = ``;
        for (const key in result.data) {
          const item = result.data[key];
          trString +=
            `<tr class="py-1 flex-wrap">
              <td class="align-middle text-center fw-bold">${item.type}</td>
              <td class="align-middle text-center fw-bold">${item.number}</td>
              <td class="align-middle">
                <div class="align-middle text-center fw-bold text-primary"> ${numberFormat(item.payment)} THB</div>
              </td>
            </tr>`;
        }
        limitedPaymentContainer.querySelector('tbody').innerHTML = trString;
      });
    }

    function getDomPath(el) {
      let nodeName = el.nodeName.toLowerCase();
      if (el === document.body) return 'body';
      if (el.id) nodeName += '#' + el.id;
      else if (el.classList.length)
        nodeName += '.' + [...el.classList].join('.');
      return getDomPath(el.parentNode) + ' ' + nodeName;
    };

    function numPadRemove(removeAmount = false) {
      if (removeAmount === false) {
        numPadFormDialog['num-pad-value'].value = '';
        return;
      }
      numPadFormDialog['num-pad-value'].value = numPadFormDialog['num-pad-value'].value.substr(0, numPadFormDialog[
        'num-pad-value'].value.length - 1);
      return;
    }

    function numPadAdd(value, forceSet = false) {
      if (forceSet) {
        numPadFormDialog['num-pad-value'].value = '';
      }
      // if (numPadFormDialog['num-pad-value'].max) {
      //   if (
      //     +numPadFormDialog['num-pad-value'].value > +numPadFormDialog['num-pad-value'].max ||
      //     +(numPadFormDialog['num-pad-value'].value + value) > +numPadFormDialog['num-pad-value'].max
      //   ) {
      //     return numPadFormDialog['num-pad-value'].form.reportValidity();
      //   }
      // }

      // if (numPadFormDialog['num-pad-value'].min) {
      //   if (
      //     // +numPadFormDialog['num-pad-value'].value < +numPadFormDialog['num-pad-value'].min
      //     +(numPadFormDialog['num-pad-value'].value + value) < +numPadFormDialog['num-pad-value'].min
      //   )
      //     return numPadFormDialog['num-pad-value'].form.reportValidity();
      // }

      numPadFormDialog['num-pad-value'].value = numPadFormDialog['num-pad-value'].value + value;
      return;
    }

    function showNumberLimitRemain(el) {
      const number = $(el).val();
      const country = betForm['country'].value;

      if (!number) return;

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

      $.post(`{{ route('front.numberlimit.remain') }}`, { number, country }, function(res) {
        if (!res.success) return false;

        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">
                  <h5 class="mb-0 text-primary">฿ ${$.number(data, 2)}</h5>
                </td>
              </tr>`;
        }
        targetElement.find('tbody').html(htmlVal);
        if (res.data.length === 0) {
          targetElement.hide();
        } else {
          targetElement.show();
        }
      }, 'json');
    }

    let numberInputMinLength = {0:1};
    let numberInputMaxLength = {0:4};
    const checkedBetFilter = [];
    function toggleBetFilter(checkboxEl, betNumberId) {
      const betNumberEl = document.querySelector(betNumberId);
      const direction = checkboxEl.dataset.direction;
      const checkedSymbolEls = betFilterFieldset.querySelectorAll(`input[type="checkbox"][data-direction="${direction}"]:checked`);
      const allSymbolCheckboxEls = betFilterFieldset.querySelectorAll(`input[type="checkbox"][data-direction="${direction}"]`);
      if (!checkboxEl.checked && checkedSymbolEls.length === 0) {
        for (const inputEl of allSymbolCheckboxEls) {
          inputEl.disabled = false;
        }
        numberInputMinLength = {0:1};
        numberInputMaxLength = {0:4};
      }

      if (!checkboxEl.checked) {
        delete numberInputMinLength[checkboxEl.value];
        delete numberInputMaxLength[checkboxEl.value];
        checkedBetFilter.splice(checkedBetFilter.findIndex(val => val === checkboxEl.value), 1);
        let allowedSymbols = [];
        for (const inputEl of checkedSymbolEls) {
          allowedSymbols = [...allowedSymbols, ...JSON.parse(inputEl.dataset.allowedSymbols)];
        }
        allowedSymbols = [... new Set(allowedSymbols)];
        for (const currentCheckboxEl of allSymbolCheckboxEls) {
          if (allowedSymbols.includes(currentCheckboxEl.value)) {
            currentCheckboxEl.disabled = false;
          }
        }
        return updateBetNumberMinMaxLength(betNumberEl);
      }

      const minLength = JSON.parse(checkboxEl.dataset.minLength);
      const maxLength = JSON.parse(checkboxEl.dataset.maxLength);
      const allowedSymbols = JSON.parse(checkboxEl.dataset.allowedSymbols);
      numberInputMinLength = {[checkboxEl.value]: minLength};
      numberInputMaxLength = {[checkboxEl.value]: maxLength};
      checkedBetFilter.push(checkboxEl.value);
      for (const currentCheckboxEl of allSymbolCheckboxEls) {
        if (currentCheckboxEl === checkboxEl) continue;

        let passCondition = true;

        if (!allowedSymbols.includes(currentCheckboxEl.value)) {
          passCondition = false;
          currentCheckboxEl.disabled = true;
          currentCheckboxEl.checked = false;
        }

        if (passCondition && currentCheckboxEl.checked) {
          const currentMinLength = JSON.parse(currentCheckboxEl.dataset.minLength);
          const currentMaxLength = JSON.parse(currentCheckboxEl.dataset.maxLength);
          numberInputMinLength[currentCheckboxEl.value] = currentMinLength;
          numberInputMaxLength[currentCheckboxEl.value] = currentMaxLength;
        }
      }
      return updateBetNumberMinMaxLength(betNumberEl);
    }

    function updateBetNumberMinMaxLength (element) {
      // console.log('checkedBetFilter', checkedBetFilter);
      // console.log('numberInputMinLength', numberInputMinLength);
      // console.log('numberInputMaxLength', numberInputMaxLength);
      element.minLength = Math.max(...Object.values(numberInputMinLength));
      element.maxLength = Math.min(...Object.values(numberInputMaxLength));
      element.value = element.value.substr(0, element.maxLength);
      element.onblur();
    }

    betForm.addEventListener('keypress', e => {
      if (e.code === 'Enter') {
        e.preventDefault();
        return false;
      }
    });
    betForm['confirm-commission-line'].onclick = async e => {
      if (currentLine && currentLine !== betForm['commission_line'].value) {
        const confirm = await swal({
          title: 'โปรดทราบ',
          text: 'คุณกำลังทำการเลือกไลน์ส่วนลดสายใหม่ หากต้องการดำเนินการ ระบบจะทำการล้างรายการหวยที่คุณได้เลือกไว้',
          icon: 'warning',
          buttons: ['ยกเลิก', 'ยืนยัน']
        });
        if (!confirm) return;
        removeBet('all');
      }
      currentLine = betForm['commission_line'].value;
      const betDetail = {
        [lotteryId]: currentLine
      };
      sessionStorage.setItem('bet_detail', JSON.stringify(betDetail));
      $(e.target.closest('.modal')).modal('hide');

      fetchLimits();
    }

    document.getElementById('gototop').addEventListener('click', e => {
      e.preventDefault();
      betFormFieldset.scrollIntoView({
        behavior: 'smooth'
      });
    });

    var pressCount = 0;

    function addBet(betNumberEl, amountEl) {
      return new Promise(async (resolve, reject) => {
        try {
          // focusOn(betNumberEl);
          if (betNumberEl.value.length < betNumberEl.minLength) {
            const length = betNumberEl.minLength === betNumberEl.maxLength ? ` ${betNumberEl.minLength} ` : `ระหว่าง ${betNumberEl.minLength} ถึง ${betNumberEl.maxLength} `;
            await swal(`ขออภัย`, `คุณกรอกตัวเลขไม่ถูกต้อง โปรดกรอกตัวเลขความยาว${length}ตัวอักษร`, 'error');
            return reject(betNumberEl);
          }
          const direction = betNumberEl.dataset.direction;
          // const symbols = Array.from(betForm[`symbol_${direction}`]).filter(el => el.checked).reduce((acc, val, index) => [...acc, val.value], []).join('').replace('_', '');
          const formData = new FormData();
          formData.append('amount1', '');
          formData.append('amount2', '');
          // formData.set(`amount${direction === 'up' ? 1 : 2}`, symbols + amountEl.value);
          formData.set(`amount${direction === 'up' ? 1 : 2}`, amountEl.value);
          formData.append('country', betForm['country'].value);
          formData.append('lottery_round_id', betForm['lottery_round_id'].value);
          formData.append('number', betNumberEl.value)
          formData.append('discount_line', betForm['commission_line'].value);
          const data = await fetchJson(`{{ route('front.addBetSymbol') }}`, 'POST', formData);
          if (!data.success) {
            return reject(data);
          }

          betNumberEl.value = amountEl.value = '';
          // for (const inputEl of betForm[`symbol_${direction}`]) {
          //   inputEl.checked = false;
          //   inputEl.disabled = false;
          //   inputEl.onchange();
          // }

          showBetList(data.cart);
          if (data.log) {
            $.each(data.log, function(k, v) {
              swal('แจ้งเตือน', v, 'warning');
            });
            // load_store_credit();
            // checkBanedNumber();
          }
          let rowpos = $('.place_data').find('tr:last').position();
          if (rowpos !== '' && rowpos !== undefined) {
            $('.scroll_table').scrollTop(rowpos.top);
          }

          // betNumberEl.value = amount1El.value = amount2El.value = '';
          $('.table_first > tr:not(.no_remove)').remove();

          pressCount = 0;
          return resolve(true);
        } catch (err) {
          getbetList();
          betNumberEl.value = amountEl.value = '';
          return errorSwal(err);
        }
      });
    }

    /**
     * DOM Content Loaded event
     */
    document.addEventListener('DOMContentLoaded', () => {
      getbetList();

      if (currentLine == undefined) {
        $('#commission-line-dialog').modal('show');
      } else {
        fetchLimits();
      }

      numPadFormDialog.onsubmit = e => {
        e.preventDefault();
        const targetEl = document.querySelector(numPadFormDialog.dataset.tmdTarget);
        const value = numPadFormDialog['num-pad-value'].value;
        targetEl.value = value;
        if (typeof targetEl.oninput === 'function') targetEl.oninput();
        if (typeof targetEl.onchange === 'function') targetEl.onchange();
        numPadFormModal.hide();
        const addBetBtn = document.getElementById('add-bet');
        addBetBtn.click();
      }

      const toggleNumPadEls = document.querySelectorAll('[data-tmd-toggle="numpad"]');
      for (const element of toggleNumPadEls) {
        element.addEventListener('focus', e => {
          if (!isMobile) return;

          if (window.screen.width < 768) {
            element.scrollIntoView({
              behavior: 'smooth',
              block: 'end'
            });
          } else {
            element.scrollIntoView({
              behavior: 'smooth',
              block: 'start'
            });
          }
          numPadFormDialog.dataset.tmdTarget = element.id ? `#${element.id}` : getDomPath(element);
          numPadFormDialog['num-pad-value'].value = element.value;
          // numPadFormDialog['num-pad-value'].step = element.step;
          // numPadFormDialog['num-pad-value'].min = element.min;
          // numPadFormDialog['num-pad-value'].max = element.max;
          // numPadFormDialog['num-pad-value'].pattern = element.pattern;
          numPadFormDialog['num-pad-value'].placeholder = element.placeholder;

          priceShortcutEl.classList.add('d-none');
          if (element.dataset.type === 'price') {
            priceShortcutEl.classList.remove('d-none');
          }
          numPadFormModal.show();
        });
      }

      countDown(
        remain.textContent,
        remain,
        async () => {
          await swal('หมดเวลารับแทง', ' ', 'info', {
            buttons: false,
            timer: 1500
          });
          location.replace(`{{ route('front.lottery') }}`);
        }
      )
      let commissionLineClicked = false;
      for (const label of commissionLineDialog.querySelectorAll('label')) {
        label.addEventListener('click', e => {
          const a = document.getElementById(label.dataset.for);
          for (const child of a.parentElement.children) {
            child.classList.remove('active');
          }
          a.click();

          if (commissionLineClicked) return;
          commissionLineClicked = true;
          $(commissionLineInfo).collapse('show');
          fadeIn(commissionLineDialog.querySelector('.modal-footer'));
        });
      }

      // const amount1El = document.getElementById('amount1-input');
      // const amount2El = document.getElementById('amount2-input');

      

      let pressTimeout;
      $(document).on('keypress', '.end_inp', function(e) {
        // e.preventDefault();
        const $amountEl = $(this);
        const betNumberEl = document.querySelector(this.dataset.betNumberId);
        const key = e.key;
        const keyCode = e.keyCode;
        if (key == "Enter" || key == 'Backspace' || key === 'Delete') {
          pressCount++;
          clearTimeout(pressTimeout);
          pressTimeout = setTimeout(() => {
            if (pressCount < 2) {
              pressCount = 0;
              return;
            }

            if (key === 'Enter') {
              try {
                addBet(betNumberEl, this);
              } catch(err) {
                return errorSwal(err);
              }
            }

            if (keyCode === 'Backspace' || keyCode === 'Delete') {
              $amountEl.closest('tr:not(.no_remove)').remove();
              pressCount = 0;
            }

          }, 300);
        }
        // console.log(pressCount)
      });

      addBetBtn.addEventListener('click', async e => {
        try {
          if (betNumber1.value && amount1.value) {
            await addBet(betNumber1, amount1);
          }
          // if (betNumber2.value && amount2.value) {
          //   await addBet(betNumber2, amount2);
          // }
        } catch(err) {
          betNumberEl.value = amountEl.value = '';
          return errorSwal(err);
        }
      });

      betForm.onsubmit = e => tryCatchSwal(async () => {
        e.preventDefault();
        let sum = 0;
        let count = 0;
        for (const tr of cartTable.tBodies[0].rows) {
          count++;
          sum += +tr.cells[5].textContent.trim().replaceAll(',', '');
        }
        if (!count) {
          return;
        }
        const result = await tryCatchSwal(async () => {
          const cartTable = document.getElementById('cart-table')
          const confirm = await swal({
            title: 'ยืนยันการแทง',
            text: `รายการแทงทั้งหมด ${count} รายการ\nรวมเป็นเงิน ${numberFormat(sum, 2)} บาท\n\nกดยืนยันการแทงเพื่อส่งโพย`,
            icon: 'warning',
            dangerMode: true,
            buttons: {
              cancel: 'ยกเลิก',
              confirm: {
                text: 'ยืนยันแทง',
                closeModal: false,
              },
            },
          });
          if (!confirm) return;

          const formData = new FormData(betForm);
          const result = await fetchJson(`{{ route('front.confirmCart') }}`, 'POST', formData);
          if (!result) return false;

          // localStorage.removeItem('bet_detail');
          await swal('สำเร็จ', 'บันทึกรายการแทงเรียบร้อย', 'success');
          return location.reload();
        });

        if (result && result.errorLog) {
          getbetList();
          for (const item of closedNumberDiv.querySelectorAll('tr')) {
            // console.log(tr);
          }
          let errorTr = ``;
          for (const key in result.errorLog) {
            const item = result.errorLog[key];
            errorTr +=
              `<tr class="py-1 flex-wrap">
                <td class="align-middle text-center fw-bold">${item.type}</td>
                <td class="align-middle text-center fw-bold">${item.number}</td>
                <td class="align-middle">
                  <div class="align-middle text-center fw-bold text-danger"><small>แทงได้อีก</small> ${numberFormat(item.remain)} THB</div>
                  <div class="align-middle text-center fw-bold text-primary"><small>คุณแทง</small> ${numberFormat(item.betAmount)} THB</div>
                </td>
              </tr>`;
          }
          limitedNumberDiv.querySelector('tbody').innerHTML = errorTr;
          limitedNumberDiv.classList.remove('d-none');
          limitedNumberDiv.classList.add('d-flex');
          const scrollBtn = document.getElementById('to-limited-number').parentElement;
          scrollBtn.classList.remove('d-none');
          limitedNumberDiv.scrollIntoView({
            behavior: 'smooth'
          });
          // openDialog(limitedNumberDiv);
        }
      });

      // document.body.onkeydown = e => {
      //   // console.log(e)
      //   if (e.code === 'Enter') {
      //     e.preventDefault();
      //     if (e.target === betForm['bet_val[]'] || Array.from(betForm['bet_val[]']).includes(e.target)) {
      //       return addBetBtn.click();
      //     } else if (Array.from(betForm['commission_line']).includes(e.target)) {
      //       return betForm['confirm-commission-line'].click();
      //     }
      //   } else if (['ArrowUp', 'ArrowDown'].includes(e.code)) {
      //     e.preventDefault();
      //     const isUp = e.code === 'ArrowUp';
      //     const isDown = e.code === 'ArrowDown';
      //     const el = document.activeElement;
      //     if (el === betForm['bet_val[]'] || Array.from(betForm['bet_val[]']).includes(el)) {
      //       let element = isUp ? el.closest('tr').previousElementSibling : el.closest('tr').nextElementSibling;
      //       while (element) {
      //         if (isVisible(element)) {
      //           return focusOn(element.querySelector('input'));
      //         }
      //         element = isUp ? element.previousElementSibling : element.nextElementSibling;
      //       }
      //     }
      //   }
      // }
    }); // END DOM Content Loaded event

    function errorSwal (data = {}) {
        console.trace(data);
        swal({
            title: data.title || 'ขออภัย',
            text: data.text || 'พบข้อบกพร่องทางเทคนิค โปรดลองอีกครั้งหรือติดต่อทีมงานเพื่อขอความช่วยเหลือ',
            icon: data.icon || 'error',
        })
        return data;
    }

    $(function() {
      let samp = $('input[name="commission_line"]:checked').val();
      if (!samp || samp == undefined) {
        const betDetail = JSON.parse(sessionStorage.getItem('bet_detail'));
        let fixLine = betDetail ? betDetail[lotteryId] : undefined;
        $('input[name="commission_line"]').each(function(i, n) {
          if ($(n).val() == fixLine) {
            $(n).prop('checked', true);
          } else {
            $(n).prop('checked', false);
          }
        });
      }

      let lotteryTypeDependCountry = `{{ $lotteryRound->country }}`;
      $('.lottery-type-depend').each(function (i, n) {
        let hasClass = $(n).hasClass(lotteryTypeDependCountry);
        if (!hasClass) $(n).hide();
      });
    });
  </script>
@endsection