@extends('layouts.appUi')

@section('title')
  แทงหวย
@endsection

@section('customStyle')
  {{-- <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;
    }

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

    #guess-number {
      font-size: 35px !important;
    }

    @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%; */
      }

      #guess-number {
        font-size: 25px !important;
      }
    }

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

  </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>{{ $lotteryRound->lottery->name }}</span>
      <span class="d-md-block text-body my-auto" id="remain"
              data-format="{{ $lotteryRound->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="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-5 h-auto p-1 mb-md-2 fw-light">{{ $lotteryRound->lottery->name }}</span>
              <div class="text-white my-2">{{ $lotteryRound->round_name }}</div>
              <span class="d-md-block text-white my-auto" id="remain"
                data-format="%H:%M:%S">{{ $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.bet', ['country' => $lotteryRound->country, 'roundId' => $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>
          </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 pt-2">
            <div class="row gx-3 gx-xl-4 justify-content-center">
              @if ($canGuess)
                {{-- กรอกเลข --}}
                <div id="choose-list" class="pt-4 col-lg-6 px-1 px-lg-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="input-group px-4 w-100">
                          <input id="guess-number" class="form-control form-control-lg text-center spinner-hidden" step="1"
                            name="number" min="0"
                            max="99999"
                            type="number" step="1"
                            pattern="\d{5}"
                            onkeypress="if (this.value.length >= 5) return false"
                            placeholder="กรอกตัวเลข 5 หลัก" inputmode="none" data-tmd-toggle="numpad">
                          <button type="button" class="btn btn-secondary h-100" onclick="this.previousElementSibling.value = Math.floor(Math.random()*99999);">
                            <i class="fas fa-random fa-2x d-md-none"></i>
                            <span class="fs-5 d-none d-md-block">สุ่มเลข</span>
                          </button>
                        </div>
                        <div class="row mt-3">
                          <div class="col">
                            <div class="d-grid px-3">
                              <button type="submit" id="add-bet" class="btn btn-danger btn-lg fs-5 rounded-pill">
                                <i class="fas fa-paper-plane text-white-50 me-2"></i> ส่งเลขทายผล
                              </button>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                {{-- END กรอกเลข --}}
              @endif

              {{-- รายการเล่นหวย --}}
              <div id="play-list" class="pt-5 pt-lg-4 col-lg-6 px-1 px-lg-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>
                  </h4>
                  <div class="card-body d-flex flex-column justify-content-between px-0 pb-0">
                    <div class="flex-fill d-flex">
                      <div class="text-center m-auto w-100">
                        <span class="bg-primary d-inline-block display-3 rounded-pill h-auto lh-base py-0 px-4 shadow font-monospace" style="letter-spacing: 4px;">{{ $guessNumberSum }}</span>
                        <div class="my-2 text-black-50 text-center">ข้อมูล​ ณ​ วันที่ {{ THdatetime(date('Y-m-d H:i:s')) }}</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              {{-- END รายการเล่นหวย --}}
            </div>

            <div class="card shadow mt-5">
              <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-5"
                style="margin-top: -25px;">
                <span><i class="fas fa-users me-2 text-white-50"></i>รายชื่อผู้ร่วมทายผล</span>
              </h4>
              <div class="card-body">
                @if (!$guessNumbers->count())
                  <div class="text-center py-2">ยังไม่มีผู้ทายเลข</div>
                @endif
                @php $i = 0 @endphp
                @foreach ($guessNumbers as $guess) @php $i++ @endphp
                  <div class="row mb-2 text-body g-2">
                    <div class="col-4 col-lg-3 d-flex">
                      <div class="w-100 card p-2 bg-{{ in_array($i, [1, 16]) ? 'success' : 'secondary' }}">
                        <p class="rounded-pill bg-white text-body text-center">อันดับที่ {{ $i }}</p>
                        <div class="text-center font-monospace fs-5" style="letter-spacing: 3px;">{{ $guess->number }}</div>
                      </div>
                    </div>
                    <div class="col d-flex">
                      <div class="w-100 px-3 py-2 border border-{{ in_array($i, [1, 16]) ? 'success' : 'secondary' }} rounded-3">
                        <div class="{{ in_array($i, [1, 16]) ? 'text-success' : '' }} border-bottom pb-2">
                          <i class="fas fa-user-circle me-1"></i>
                          <span class="d-none fw-bold d-sm-inline-block me-2">ผู้ส่งเลข</span>
                          <span class="text-body">{{ substr($guess->username, 0, 2) . '****' . substr($guess->username, -2, 2) }}</span>
                        </div>
                        <div class="{{ in_array($i, [1, 16]) ? 'text-success' : '' }} pt-2">
                          <i class="fas fa-clock me-1"></i>
                          <span class="d-none fw-bold d-sm-inline-block me-2">เมื่อ</span>
                          <span class="text-body">{{ THdatetime($guess->created_at) }}</span>
                        </div>
                      </div>
                    </div>
                  </div>
                @endforeach
              </div>
            </div>
          </div>

        </section>
      </div>

    </fieldset>
  </form>
@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://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 remain = document.getElementById('remain');

    const betForm = document.forms['bet-form'];
    const betFormFieldset = document.getElementById('bet-form-fieldset');
    const addBetBtn = document.getElementById('add-bet');
    const guessNumber = document.getElementById('guess-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 = `{{ $lotteryRound->lottery->country }}`;
    const lotteryId = `${lotteryCode}-${lotteryRoundId}`;

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

    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 isVisible(e) {
      return !!(e.offsetWidth || e.offsetHeight || e.getClientRects().length);
    }

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

      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;

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

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

        const betTypeTrs = document.querySelectorAll(`tr.bet-type`);

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

      betForm.onsubmit = e => tryCatchSwal(async () => {
        e.preventDefault();

        const confirm = await swal({
          title: 'ยืนยันการยิงเลข',
          text: `คุณยืนยันที่จะยิงเลข "${guessNumber.value.padStart(5, '0')}" หรือไม่`,
          icon: 'info',
          buttons: {
            cancel: 'ยกเลิก',
            confirm: {
              text: 'ยืนยัน',
              closeModal: false,
            }
          }
        });

        if (!confirm) return false;

        if (!guessNumber.value) {
          await swal('โปรดกรอกตัวเลข', 'โปรดกรอกตัวเลขที่ต้องการยิง', 'warning');
          return focusOn(guessNumber);
        }

        const formData = new FormData(betForm);
        const url = `{{ route('front.yeekee.guessNumber') }}`;

        const result = await fetchJson(url, 'POST', formData);
        if (!result) return false;

        return swal({
          title: 'ยิงเลขสำเร็จ',
        }).then(() => location.reload());
      });

    });
  </script>
@endsection