@extends('layouts.appUi')

@section('title')
  แทงหวย
@endsection
@section('customStyle')
  <style>
    body {
      min-height: 100vh;
      display: flex;
    }

    #appCapsule {
      width: 100%;
      display: flex;
      flex-direction: column;
    }

    .menu-card .menu-item .icon-wrapper {
      height: 60px !important;
      width: 60px !important;
    }

    .menu-card .menu-item a:hover {
      transform: scale(1.15);
    }

    .menu-card .menu-item a {
      transition: 0.2s;
    }

    .menu-card .menu-item a .icon-wrapper .icon {
      transition: 0.5s;
    }

    .menu-card .menu-item a:hover .icon-wrapper .icon {
      color: #00f2ff;
    }

    .appHeader {
      /* background: unset !important; */
      justify-content: flex-start;
      transition: .3s;
    }

    .appHeader > .pageTitle {
      left: 17.5%;
      position: relative;
    }

    .appHeader .right .headerButton {
      --bs-text-opacity: 1;
      color: rgba(var(--bs-body-color-rgb), var(--bs-text-opacity)) !important;
    }
    .appHeader .right::before {
      content: '';
      background-color: white;
      width: 138px;
      height: 100px;
      left: -30px;
      position: absolute;
      border-bottom-left-radius: 100px;
    }
  
    .wallet-card-section::before {
      content: unset !important;
    }

    .btn-wallet {
      /* background: radial-gradient(circle at bottom, #46f3f8, #078897 ); */
      font-size: 1.65rem !important;
      font-weight: bold !important;
      border: 1px solid white !important;
      background-image: linear-gradient(-180deg, #61f9fd 0%, #07a3b5 100%) !important;
      box-shadow: 0 3px 5px rgb(0 0 0 / 15%), 0 -0.25rem 1.5rem #046e7a inset, 0 0.75rem 0.5rem rgb(255 255 255 / 40%) inset !important;
    }

    #main-section {
      position: relative;
      background-color: white;
      border-top-right-radius: 30px;
      border-top-left-radius: 30px;
      box-shadow: 0 -20px 20px rgb(0 0 0 / 25%);
    }

    .container-sm {
      max-width: 540px;
    }

    form input.form-control::placeholder {
      color: rgb(255 255 255 / 50%);
    }

    form .form-group.boxed .form-control:focus {
      border-color: inherit;
    }

    .form-group .input-wrapper.active .label {
      color: #fff !important;
    }

    .btn-login {
      background-image: linear-gradient(to bottom, white 25%, #bdbdbd);
      border: 0;
      box-shadow: 0 0 20px #0043df !important;
      height: auto;
      padding: 12px 25px;
    }

    .lt-168-header {
      background: url('/assets/images/houy-card.png?v=5646321') !important;
      background-size: cover !important;
    }

    main.main-content {
      display: flex;
    }

    .custom-icon-wrapper {
      background: #064273;
      width: 48px;
      height: 48px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 10px;
      color: #fff;
      font-size: 24px;
      margin-bottom: 14px;
    }

    #main-section .section:not(:first-child) .section-title {
      border-top-left-radius: 30px;
      border-top-right-radius: 30px;
      box-shadow: 0 -10px 10px rgb(0 0 0 / 15%);
      margin-top: 25px;
      padding-top: 15px;
    }
  </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">แทงหวย</div>
  </div>
@endsection --}}

@section('content')
  <script>
    document.getElementById('appCapsule').className = 'bg-primary text-reset'
    const appHeaderEl = document.querySelector('.appHeader');
    appHeaderEl.classList.remove('bg-primary');
    appHeaderEl.classList.add('bg-transparent', 'container-sm', 'border-0');
    appHeaderEl.style.borderRadius = '0 0 0 30px';
    appHeaderEl.querySelector('.pageTitle img').style.filter = 'drop-shadow(0 0 0 black)';
  </script>
  <div class="section wallet-card-section pt-1 mb-2 mb-sm-4">
    <div class="container bg-transparent shadow-none wallet-card mw-100" style="width: 590px;">
      <!-- Balance -->
      <div class="balance">
        <div class="left">
          <span class="title fs-3 text-white">เครดิตคงเหลือ</span>
          <h1 class="total text-white" user-credit>฿ {{ number_format(remainBalance(Auth::User()), 2) }}</h1>
        </div>
        <div class="right">
          <a href="javascript:void(0);" onclick="fetchWallet(true)" class="button text-white">
            <ion-icon name="refresh-outline"></ion-icon>
          </a>
        </div>
      </div>
      <!-- * Balance -->
      <!-- Wallet Footer -->
      @if (!validateDownlineSession())
      <div class="wallet-footer border-0 justify-content-evenly pt-0">
        <div class="item text-nowrap">
          <a href="#" class="btn btn-wallet link-light btn-block h-auto rounded-pill py-1 ps-2 lh-base mx-1 w-auto"
            data-bs-toggle="modal" data-bs-target="#depositActionSheet">
            <span class="bg-white text-body d-inline-block d-inline-flex rounded-circle me-2"
              style="height: 32px; width: 32px;">
              <ion-icon name="add" role="img" class="md hydrated m-auto" aria-label="add outline"></ion-icon>
            </span>
            <span>เติมเงิน</span>
          </a>
        </div>
      </div>
      @endif
      <div class="wallet-footer border-0 justify-content-evenly">
        <div class="item text-nowrap">
          <a href="{{ route('appUi.transaction') }}" class="btn btn-login link-dark btn-block h-auto rounded-pill py-1 ps-2 lh-base mx-1 w-auto d-flex border">
            <span class="bg-white text-body d-inline-block d-inline-flex rounded-circle me-2"
              style="height: 32px; width: 32px;">
              <i class="fas fa-history fs-6 m-auto"></i>
            </span>
            <span class="fs-4 fw-bold">ประวัติ</span>
          </a>
        </div>
        <div class="item text-nowrap">
          <a href="{{ route('profile.betHistory') }}" class="btn btn-login link-dark btn-block h-auto rounded-pill py-1 ps-2 lh-base mx-1 w-auto d-flex border">
            <span class="bg-white text-body d-inline-block d-inline-flex rounded-circle me-2"
              style="height: 32px; width: 32px;">
              <i class="fas fa-list fs-6 m-auto"></i>
            </span>
            <span class="fs-4 fw-bold">รายการแทง</span>
          </a>
        </div>
      </div>
    </div>
  </div>

  @foreach ($errors->all() as $message)
    <div class="d-flex mb-4">
      <div class="m-auto alert alert-danger">{{ $message }}</div>
    </div>
  @endforeach

  <section id="main-section" class="container-sm mt-auto px-0 pt-2">
    @foreach ($lotteryCategories as $lotteryCategoryName => $lotteries)
      <div class="section full mt-{{ array_key_first($lotteryCategories) === $lotteryCategoryName ? 0 : 0 }}">
        {{-- <div class="section-title large text-center">
                <span class="d-inline-block py-2 px-4 rounded-pill bg-gradient shadow bg-theme mb-2">{{ $lotteryCategoryName }}</span>
            </div> --}}
        <h1 class="section-title fs-1 large text-center">
          {{-- <span class="bg-dark d-inline-block d-inline-flex rounded-circle me-1" style="height: 32px; width: 32px;">
            <i class="fa-dice-d20 fas fs-6 m-auto text-warning"></i>
          </span> --}}
          <i class="fas fa-dice"></i>
          <span>{{ $lotteryCategoryName }}</span>
        </h1>
        <div class="wide-block border-0 pt-2 pb-2">
          {{-- <div class="section-title large text-center py-2 px-4 rounded-pill bg-primary mb-2">{{ $lotteryCategoryName }}</div> --}}
          <div class="row no-gutters justify-content-center g-2 g-sm-3">
            @foreach ($lotteries as $lottery)
              <div hidden>
                @dump($lottery)
              </div>
              <lottery-card class="py-2 px-sm-2 {{ $lottery->col_size }}" hide-date="false"
                bet-url="{{ route('front.bet') }}" lottery-code="{{ $lottery->country }}"
                many-rounds="{{ $lottery->many_rounds ? 'true' : 'false' }}"
                data-format="{{ $lottery->counter_format }}"
                force-close="{{ $lottery->status ? 'false' : 'true' }}"
                @if ($lottery->country == 'TH')
                lottery-disabled="true"
                @else
                lottery-disabled="{{ $lottery->lotteryRound->count() && $lottery->memberCommission ? 'false' : 'true' }}"
                @endif
                background-image="{{ lotteryBg($lottery->country) }}"
                many-rounds="{{ $lottery->many_rounds ? 'true' : 'false' }}"
                round-url="{{ route('front.lotteryRound') }}" 
                @if ($lottery->lotteryRound->count())
                  @if ($lottery->country !== 'YK')
                    open-time="{{ $lottery->lotteryRound->first()['open'] }}"
                  @endif
                  close-time="{{ $lottery->lotteryRound->first()['close'] }}"
                  round-id="{{ $lottery->lotteryRound->first()['id'] }}"
                @endif
              ></lottery-card>
            @endforeach
          </div>
        </div>
      </div>
    @endforeach
  </section>
@endsection

@section('footer')
  @if (session('error'))
    <div class="modal fade dialogbox" id="error-dialog" data-bs-backdrop="static" tabindex="-1" role="dialog">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div id="alertDialog-icon" class="modal-icon text-danger">
            <ion-icon name="alert"></ion-icon>
          </div>
          <div class="modal-header">
            <h5 class="modal-title">ขออภัย</h5>
          </div>
          <div class="modal-body">
            {{ session('error') }}
          </div>
          <div class="modal-footer">
            <div class="btn-inline">
              <a href="#" class="btn" data-bs-dismiss="modal">ปิด</a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script>
      document.addEventListener('DOMContentLoaded', () => {
        const errorDialog = document.getElementById('error-dialog');
        const errorModal = new bootstrap.Modal(errorDialog);
        errorModal.show();
      });
    </script>
  @endif
@endsection

@section('script')
  <script src="{{ asset('assets/js/lottery.js?v=0.0.7') }}"></script>
  <script src="{{ asset('assets/js/lottery-card.js?v=2.0.13') }}"></script>
  <script>
    async function fetchWallet(isClick = false) {
      const url = `{{ url()->current() }}`;
      const target = $('[user-credit]');
      if (isClick) target.html(
        `<span class="spinner-border spinner-border-sm me-05" role="status" aria-hidden="true"></span>`);
      await $.get(url, {}, function(el) {
        let newCredit = $(el).find('[user-credit]').text();
        target.text(newCredit);

        let notification = $(el).find('.notification-area').html();
        $('.notification-area').html(notification);
      });
      return;
    }

    function redirectBtn(el) {
      const target = $(el).data('target-url');
      window.location.href = target;
    }
    const appHeader = document.querySelector('.appHeader');
    let prevPosition = 0;
    window.onscroll = e => {
      if (prevPosition === 0) {
        prevPosition = scrollY;
        return;
      }
      
      if (scrollY === 0) {
        if (!appHeader.classList.contains('bg-transparent')) {
          appHeader.classList.add('bg-transparent');
          appHeader.classList.remove('shadow');
          appHeader.querySelector('.left .headerButton').classList.remove('text-body');
        }
        prevPosition = scrollY;
        return;
      }
      
      if (appHeader.classList.contains('bg-transparent')) {
        appHeader.classList.remove('bg-transparent');
        appHeader.classList.add('shadow');
        appHeader.querySelector('.left .headerButton').classList.add('text-body');
      }
      
      prevPosition = scrollY;
    }
  </script>
@endsection