@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;
    }

    .bg-line {
      z-index: 1;
      position: relative;
      display: inline-block;
    }

    .bg-line::before {
      content: '';
      position: absolute;
      height: 0;
      border-top-width: 5px;
      border-top-color: rgba(0, 0, 0, 0.2);
      border-top-style: dotted;
      width: 100%;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      z-index: -1;
    }

    .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 class="text-center py-1 [pt-2] [mb-2] mb-md-4 ms-auto">
              <span href="#deposit-dialog" class="badge badge-primary btn-sm py-sm-1 rounded-2 fs-6"
                title="จำนวนเครดิตของคุณ">
                <i class="fas fa-money-bill-alt d-none d-sm-inline me-sm-2 fa-fw my-auto text-success"></i>
                <span id="current-credit">0.00</span>
                <span class="ms-1 text-white-50">฿</span>
              </span>
            </div>
          </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-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
              @if ($lotteryRound->country === 'YK')
                <div class="col-auto">
                  <a href="{{ route('front.yeekee.guessNumberPage', ['lotteryRoundId' => $lotteryRound->id]) }}"
                    class="btn fw-bold text-nowrap btn-success px-2" title="แทงหวยยี่กี">
                    <i class="fa fa-calculator fa-rotate-90 me-2 fa-fw my-auto"></i>
                    <span>ยิงเลขยี่กีรอบนี้</span>
                  </a>
                </div>
              @endif
            </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">
                  <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>
                  </h4>
                  <div class="card-body px-0 d-flex align-items-stretch">
                    <div class="d-flex flex-column text-center p-0 w-100">
                      <div class="mt-2 m-auto" style="max-width: 400px;">
                        <div class="px-4">
                          <input id="bet-number" class="form-control form-control-lg text-center spinner-hidden mb-3"
                            step="1" name="bet_number" min="1" max="12" type="number" step="1" pattern="\d{1,2}"
                            readonly placeholder="เลือกตัวเลข" inputmode="none" style="font-size:35px!important;">
                          <div class="row g-2">
                            <div class="col-3"><button type="button"
                                class="set-bet-value-btn btn btn-primary fw-bold btn-block btn-lg"
                                value="1"
                                style="font-size: 1.5rem;">1</button></div>
                            <div class="col-3"><button type="button"
                                class="set-bet-value-btn btn btn-primary fw-bold btn-block btn-lg"
                                value="2"
                                style="font-size: 1.5rem;">2</button></div>
                            <div class="col-3"><button type="button"
                                class="set-bet-value-btn btn btn-primary fw-bold btn-block btn-lg"
                                value="3"
                                style="font-size: 1.5rem;">3</button></div>
                            <div class="col-3"><button type="button"
                                class="set-bet-value-btn btn btn-primary fw-bold btn-block btn-lg"
                                value="4"
                                style="font-size: 1.5rem;">4</button></div>
                            <div class="col-3"><button type="button"
                                class="set-bet-value-btn btn btn-primary fw-bold btn-block btn-lg"
                                value="5"
                                style="font-size: 1.5rem;">5</button></div>
                            <div class="col-3"><button type="button"
                                class="set-bet-value-btn btn btn-primary fw-bold btn-block btn-lg"
                                value="6"
                                style="font-size: 1.5rem;">6</button></div>
                            <div class="col-3"><button type="button"
                                class="set-bet-value-btn btn btn-primary fw-bold btn-block btn-lg"
                                value="7"
                                style="font-size: 1.5rem;">7</button></div>
                            <div class="col-3"><button type="button"
                                class="set-bet-value-btn btn btn-primary fw-bold btn-block btn-lg"
                                value="8"
                                style="font-size: 1.5rem;">8</button></div>
                            <div class="col-3"><button type="button"
                                class="set-bet-value-btn btn btn-primary fw-bold btn-block btn-lg"
                                value="9"
                                style="font-size: 1.5rem;">9</button></div>
                            <div class="col-3"><button type="button"
                                class="set-bet-value-btn btn btn-primary fw-bold btn-block btn-lg"
                                value="10"
                                style="font-size: 1.5rem;">10</button></div>
                            <div class="col-3"><button type="button"
                                class="set-bet-value-btn btn btn-primary fw-bold btn-block btn-lg"
                                value="11"
                                style="font-size: 1.5rem;">11</button></div>
                            <div class="col-3"><button type="button"
                                class="set-bet-value-btn btn btn-primary fw-bold btn-block btn-lg"
                                value="12"
                                style="font-size: 1.5rem;">12</button></div>
                          </div>
                        </div>
                        <p class="h3 text-center fw-normal mt-4 mb-3">ระบุจำนวนเงินแทง</p>
                        <div>
                          @foreach ($lotteryType as $key => $lotteryItem)
                            <div class="px-3 bet-type" data-lottery-type="{{ $lotteryItem->type }}">
                              <div class="mb-2 p-2 border rounded-3 shadow-sm bg-white" onclick="focusOnInput(this)">
                                {{-- <span class="badge bg-blue w-100 rounded-pill fw-normal py-2">
                                  <span>{{ $lotteryItem->type }}</span>
                                </span> --}}
                                <div class="text-body">
                                  <span id="remain_{{ $key }}" data-type="{{ $lotteryItem->type }}"
                                    data-bs-toggle="tooltip" data-title="พื้นที่คงเหลือ" class="remain my-2"></span>
                                </div>
                                <input type="number" name="bet_val[]" placeholder="ระบุจำนวนเงิน" min="1" step="0.01"
                                  data-type="price" id="amount_{{ $key }}" title="โปรดกรอกตัวเลข"
                                  inputmode="none" data-tmd-toggle="numpad"
                                  class="amount text-center form-control spinner-hidden rounded-pill"
                                  style="min-width: 40px; margin: 2px 0;" disabled>
                                <input type="hidden" name="bet_type[]" disabled value="{{ $lotteryItem->type }}">
                              </div>
                            </div>
                          @endforeach
                        </div>
                      </div>

                      <div class="text-center fs-5 mt-4 mb-3 bg-line">
                        <span class="bg-white px-3 rounded-pill">หรือ</span>
                      </div>

                      <div
                        class="bg-light border-5 border-white flex-grow-1 mt-3 mx-2 overflow-auto position-relative rounded d-flex"
                        style="min-height: 125px;">
                        @csrf
                        <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 badge-dark w-100 rounded-pill fw-normal py-2">

                                        <span>{{ $item['type'] }}</span>
                                      </span>
                                      <div class="text-body">ชุดเลข <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="โปรดกรอกตัวเลข"
                                        inputmode="none" data-tmd-toggle="numpad"
                                        oninput="clearBetNumber()"
                                        class="custom-type text-center form-control spinner-hidden form-control-sm rounded-pill"
                                        style="min-width: 40px; margin: 2px 0; /* font-size: .775rem */;">
                                    </div>
                                  </td>
                                </tr>
                              @endforeach
                            </tbody>
                          </table>
                        </div>
                      </div>
                      <div class="row mt-3">
                        <div class="col">
                          <div class="d-grid px-3">
                            <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>
                  </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: 45vh;">
                          <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>
                              </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 id="choose-line-btn-group" class="btn-group bg-white rounded-pill overflow-hidden"
                  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">Line A</label>
                  @if ($country != 'LT')
                    <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">Line C</label>
                  @endif
                </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')
  <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')
  <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="number" placeholder="กรอกตัวเลข" inputmode="none"
                  style="font-size:36px!important">
              </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="submit" class="btn btn-warning fs-6 fw-bold btn-sm"
                      onclick="numPadAdd('5', true);">5</button></div>
                  <div class="d-grid"><button type="submit" class="btn btn-warning fs-6 fw-bold btn-sm"
                      onclick="numPadAdd('10', true);">10</button></div>
                  <div class="d-grid"><button type="submit" class="btn btn-warning fs-6 fw-bold btn-sm"
                      onclick="numPadAdd('20', true);">20</button></div>
                  <div class="d-grid"><button type="submit" class="btn btn-warning fs-6 fw-bold btn-sm"
                      onclick="numPadAdd('50', true);">50</button></div>
                  <div class="d-grid"><button type="submit" class="btn btn-warning fs-6 fw-bold btn-sm"
                      onclick="numPadAdd('100', true);">100</button></div>
                </div>
              </div>
              {{-- <div class="col-4">
              <button type="button" onclick="numPadRemove()" class="btn fw-bold btn-danger w-100">ลบทั้งหมด</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-4">
              <button type="button" onclick="numPadAdd('.')"
                class="btn fw-bold btn-outline-primary w-100 btn-lg fs-5">.</button>
            </div> --}}
              <div class="col-4">
                <button type="button" onclick="numPadRemove(1)"
                  class="btn btn-lg fw-bold btn-danger w-100">ลบล่าสุด</button>
              </div>
              <div class="col-4">
                <button type="button" onclick="numPadAdd('0')"
                  class="btn fw-bold btn-primary w-100 btn-lg fs-5">0</button>
              </div>
              <div class="col-4">
                <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>
  <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 currentCreditEl = document.getElementById('current-credit');

    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 addBetBtn = document.getElementById('add-bet');
    const betNumber = document.getElementById('bet-number');

    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 clearBetNumber() {
      betForm.bet_number.value = '';
      betForm.bet_number.oninput();
      if (betForm['bet_val[]'] instanceof RadioNodeList) {
        for (const $el of betForm['bet_val[]']) {
          $el.value = '';
        }
      } else {
        betForm['bet_val[]'].value = '';
      }
    }

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

    async function getCurrentCredit() {
      const result = await fetchJson(`{{ route('member.currentCredit') }}`);
      if (!result) return false;
      currentCreditEl.textContent = numberFormat(result.credit, 2);
    }

    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"> ${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;
        return showBetList(result);
      });
    }

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

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

    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();
    }

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

    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;
    }

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


    document.addEventListener('DOMContentLoaded', () => {
      getCurrentCredit();
      getbetList();

      setInterval(() => getCurrentCredit(), 1000 * 60);

      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 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'));
        });
      }

      async function processBetNumber() {
        const formData = new FormData();
        formData.append('country', `{{ $country }}`);
        formData.append('number', betNumber.value);
        const result = await fetchJson(`{{ route('front.checkNumberLimit') }}`, 'POST', formData);
        if (!result) return false;
        const remainResult = result.data;

        const $betTypes = document.querySelectorAll(`.bet-type`);

        if (betNumber.value.length === 0) {
          for (const $betType of $betTypes) {
            $betType.classList.remove('d-none');
            for (const input of $betType.querySelectorAll('input')) {
              input.disabled = true;
            }
            const remainSpan = $betType.querySelector('.remain');
            if (remainSpan) {
              remainSpan.textContent = '';
            }
          }
          return;
        }

        clearCustomBet();

        for (const $betType of $betTypes) {
          // const typeLength = $betType.dataset.length;
          // if (+typeLength !== +betNumber.value.length) {
          //   $betType.classList.add('d-none');
          //   for (const input of $betType.querySelectorAll('input')) {
          //     input.disabled = true;
          //   }
          // } else {
          $betType.classList.remove('d-none');
          for (const input of $betType.querySelectorAll('input')) {
            input.disabled = false;
          }
          const remainSpan = $betType.querySelector('.remain');
          if (remainSpan) {
            remainSpan.textContent = `รับแทงได้: ${numberFormat(remainResult[remainSpan.dataset.type])} บาท`;
          }
          // }
        }

        return true;
      }

      let betNumberInputTimeout;
      betNumber.oninput = e => tryCatchSwal(
        async () => { // try
          if (betNumber.value) clearCustomBet();
          if (isMobile) {
            processBetNumber();
            return;
          }
          clearTimeout(betNumberInputTimeout);
          betNumberInputTimeout = setTimeout(() => {
            processBetNumber();
          }, 300);
        }
      )

      addBetBtn.onclick = e => tryCatchSwal(async () => {
        e.preventDefault();
        const $customBetValues = betForm.querySelectorAll('[name^="custom_value["]');

        const customValueLength = Array.from($customBetValues).filter($el => $el.value).length
        const betValueLength = betForm['bet_val[]'] instanceof RadioNodeList ? Array.from(betForm['bet_val[]']).filter($el => $el.value).length : +betForm['bet_val[]'].value;
        if (!betValueLength && !customValueLength) {
          await swal('โปรดกรอกตัวเลข', 'โปรดกรอกตัวเลขที่ต้องการแทง\nหรือระบุจำนวนเงินแทงเลขชุด', 'warning');
          if (betNumber.value && !betValueLength) return focusOn(betForm.querySelector('[name="bet_val[]"]'));
          return focusOn(betNumber);
        }

        let allInputIsEmpty;
        if (betForm['bet_val[]'] instanceof RadioNodeList) {
          allInputIsEmpty = Array.from(betForm['bet_val[]']).every(el => !el.value || el.disabled);
        } else {
          allInputIsEmpty = betForm['bet_val[]'] === '' || +betForm['bet_val[]'] <= 0;
        }
        if (allInputIsEmpty) {
          return swal('โปรดเลือกประเภทการแทง', 'โปรดกรอกตัวเลขในช่องจำนวนเงินของประเภทการแทงที่ต้องการแทง',
            'warning');
        }

        const formData = new FormData(betForm);
        formData.append("commission_line", currentLine);
        const url = `{{ route('front.addBet', [$lottery->country, $lotteryRound->id]) }}`;

        if (customValueLength) {
          const betType = betForm['bet_type[]'] instanceof RadioNodeList ? betForm['bet_type[]'][0].value : betForm['bet_type[]'].value;
          let results = [];
          for (const $betValue of $customBetValues) {
            if (!$betValue.value) continue;
            const price = $betValue.value;
            const numbers = JSON.parse($betValue.dataset.numbers);
            for (const i in numbers) {
              formData.set('bet_number', numbers[i]);
              formData.set('bet_val[]', price);
              formData.set('bet_type[]', betType);
              results.push(await fetchJson(url, 'POST', formData));
            }
          }
          clearBetNumber();
          clearCustomBet();
          playList.scrollIntoView({
            behavior: 'smooth',
            block: 'end',
          });
          return showBetList(results[results.length - 1].cart);
        }

        const result = await fetchJson(url, 'POST', formData);

        clearBetNumber();
        clearCustomBet();
        playList.scrollIntoView({
          behavior: 'smooth',
          block: 'end',
        });
        return showBetList(result.cart);
      });

      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[4].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 => {
        const isPriceInput = $el => $el === betForm['bet_val[]']
          || Array.from(betForm['bet_val[]']).includes($el)
          || Array.from(betForm.querySelectorAll('[name^="custom_value"]')).includes($el);
        if (e.code === 'Enter') {
          e.preventDefault();
          if (isPriceInput(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 (isPriceInput(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;
            }
          }
        }
      }

      for (const $el of document.querySelectorAll('.set-bet-value-btn')) {
        $el.onclick = e => {
          betForm.bet_number.value = $el.value;
          processBetNumber().then(() => focusOnInput(document.querySelector('.bet-type')));
        }
      }
    }); // END DOMContentLoaded

    pusherEvent.bind(`update-limit-payment`, function(result) {
      let showNotify = notify('มีการอัพเดทอัตราจ่าย', 'กรุณาตรวจสอบอัตราจ่ายอีกครั้ง..', 'warning').then(function(
        sure) {
        ReProcessCart();
      });
    });

    function ReProcessCart() {
      $.post(`{{ route('front.betList.reProcess') }}`, {
        lotteryRoundId: lotteryRoundId,
        commissionLine: currentLine
      }, function(response) {
        if (response.success) {
          showBetList(response.data[lotteryRoundId]);
        }
      }, 'json');
    }

    $(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);
          }
        });
      }
    });
  </script>
@endsection