@extends('layouts.appUi')

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

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

    .appHeader .left ion-icon {
      --bs-text-opacity: 1;
      color: rgba(var(--bs-body-color-rgb), var(--bs-text-opacity)) !important;
    }

    .appHeader .right::before {
      content: '';
      background-image: linear-gradient(to right, #282e74, #218cd3);
      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); */
      background-image: linear-gradient(180deg, rgba(204,153,51,1) 0%, rgba(255,255,153,1) 100%, rgba(255,255,255,1) 100%);
      border: 0;
      box-shadow: 0 0 20px #0043df !important;
      height: auto;
      padding: 12px 25px;
    }

  </style>
@endsection

@section('header')
@endsection

@section('content')
  <script>document.getElementById('appCapsule').className = 'bg-primary'</script>

  <div class="section wallet-card-section">
    <div class="container wallet-card mw-100 border-0 bg-transparent shadow-none" style="width: 400px;">
      @if (validateDownlineSession())
      {{-- <img src="{{ asset('app_ui/img/por_por/lt888-782x226-px.png') }}" alt="logo" class="d-block img-fluid mb-4 mx-auto px-3"> --}}
      <h1 class="login-custom-font text-white text-center mb-5 d-none">LT-99.COM</h1>
      @else
      <img src="{{ asset('assets/lt99/782x226logo.png') }}" alt="logo" class="d-block img-fluid mb-4 mx-auto px-3 d-none">
      @endif
      <form id="login-main-index" onsubmit="loginFormHandler(event, this)">
        <div class="form-group mb-1 boxed" style="margin-top: 10rem">
          <div class="input-wrapper">
            <label class="label ms-2 fs-5 text-white" for="username-input">ชื่อผู้ใช้</label>
            <input type="text" class="form-control form-control-lg text-white bg-transparent" name="username" id="username-input" placeholder="กรุณากรอกชื่อผู้ใช้"
              autocomplete="off" />
            <i class="clear-input">
              <ion-icon name="close-circle" role="img" class="md hydrated" aria-label="close circle"></ion-icon>
            </i>
          </div>
        </div>

        <div class="form-group mb-3 boxed">
          <div class="input-wrapper">
            <label class="label ms-2 fs-5 text-white" for="password-input">รหัสผ่าน</label>
            <input type="password" class="form-control form-control-lg text-white bg-transparent" name="password" id="password-input"
              placeholder="กรุณากรอกรหัสผ่าน" autocomplete="off" />
            <i class="clear-input">
              <ion-icon name="close-circle" role="img" class="md hydrated" aria-label="close circle"></ion-icon>
            </i>
          </div>
        </div>
        <div class="text-center mb-5">
          {{-- <button type="submit" class="btn btn-login fs-4 btn-lg mt-3 mb-2 rounded-pill">
            <ion-icon name="log-in-outline"></ion-icon> เข้าสู่ระบบ
          </button> --}}
          <a href="javascript:;" onclick="$('#login-main-index').submit();">
            <img src="{{ asset('assets/lt99/เข้าสู่ระบบ 180x50.png') }}">
          </a>
          @if (Request::filled('ref'))
            <a href="{{ route('appUi.registerOtp') }}">
              <img src="{{ asset('assets/images/newLogin/สมัครสมาชิก.png') }}" alt="">
            </a>
          @endif
        </div>
      </form>
    </div>
  </div>

  <section id="main-section" class="container-sm mt-auto pt-2">
    <div class="section py-4">
      @if (Request::filled('ref'))
      <div class="container wallet-card bg-transparent shadow-none menu-card mw-100 p-0" style="width: 600px;">
        <!-- Wallet Footer -->
        <div class="wallet-footer border-top-0 pt-0">
          <div class="item menu-item">
            <a href="{{ route('front.article') }}" class="px-1">
              {{-- <div class="icon-wrapper bg-primary">
                <i class="icon fas fa-dollar-sign lg-2x text-theme"></i>
              </div>
              <div class="text-body [lead] lh-sm">
                <span class="d-inline-block">วิธีเล่น</span>
                <br>
                <span class="d-inline-block">อัตราจ่าย</span>
              </div> --}}
              <img style="max-width: 100%;" src="{{ asset('assets/images/newLogin/อัตราจ่าย.png') }}" >
            </a>
          </div>
          <div class="item menu-item">
            {{-- <a href="#" onclick="Dialog.alert({title: 'ระบบแนะนำเพื่อน', text: 'พบกันเร็วๆ นี้', type: 'info'})">
              <div class="icon-wrapper bg-primary">
                <i class="icon fas fa-users fa-lg text-theme"></i>
              </div>
              <div class="text-body [lead] lh-sm">แนะนำเพื่อน</div>
            </a> --}}
            <a href="https://lin.ee/dzDh2MO" target="_blank" class="px-1">
              {{-- <div class="icon-wrapper bg-primary">
                <i class="icon fas fa-headset fa-lg text-theme"></i>
              </div>
              <div class="text-body [lead] lh-sm">ติดต่อ<br>แอดมิน</div> --}}
              <img style="max-width: 100%;" src="{{ asset('assets/images/newLogin/ติดต่อแอดมิน.png') }}" >
            </a>
          </div>
          <div class="item menu-item">
            <a href="{{ route('front.lotteryResult') }}" class="button px-1">
              {{-- <div class="icon-wrapper bg-primary">
                <i class="icon fas fa-trophy fa-lg text-theme"></i>
              </div>
              <div class="text-body [lead] lh-sm">ผลรางวัล</div> --}}
              <img style="max-width: 100%;" src="{{ asset('assets/images/newLogin/ผลรางวัล.png') }}" >
            </a>
          </div>
        </div>
        <!-- * Wallet Footer -->
      </div>
    @endif
    </div>
    {{-- <div class="section full my-4">
      <div class="section-heading padding text-center">
        <h2 class="title">อัตราจ่าย</h2>
      </div>
      <div class="accordion bg-transparent border-0" id="results-accordion">
        @if ($lotteryRounds->count())
          <div>
            <ul class="nav nav-tabs lined flex-nowrap overflow-auto" role="tablist">
              @foreach ($lotteryRounds as $lotteryRoundKey => $lotteryRound)
                <li class="align-items-stretch border-end-0 flex-column nav-item text-nowrap">
                  <a id="heading-lottery-result-card-{{ $lotteryRound->id }}"
                    class="nav-link flex-column h-100"
                    data-bs-toggle="collapse"
                    href="#lottery-result-card-{{ $lotteryRound->id }}"
                    aria-expanded="true"
                    aria-controls="lottery-result-card-{{ $lotteryRound->id }}"
                    onclick="this.closest('ul').querySelectorAll('a.nav-link').forEach(item => item.classList.remove('active')); this.ariaExpanded === 'true' ? this.classList.add('active') : this.classList.remove('active');"
                  >
                    <div class="flex-grow-1 d-flex mb-2">
                      <img src="{{ lotteryFlag($lotteryRound->country) }}" alt="img" class="image-block imaged w32 my-auto">
                    </div>
                    <div>{{ $lotteryRound->lottery_name }}</div>
                  </a>
                </li>
              @endforeach
            </ul>
          </div>
          @foreach ($lotteryRounds as $lotteryRoundKey => $lotteryRound)
            <div class="collapse" id="lottery-result-card-{{ $lotteryRound->id }}" aria-labelledby="heading-lottery-result-card-{{ $lotteryRound->id }}" data-bs-parent="#results-accordion">
              <p class="text-center text-body lead">งวดวันที่ {{ THdatetime($lotteryRound->display_date, 'date') }}</p>
              @php $currentLotteryResultFormats = $lotteryResultFormats->where('lottery_id', $lotteryRound->lottery_id) @endphp
              @if ($currentLotteryResultFormats->filter(function($item){ return $item->row; })->count())
                <div class="d-flex">
                  <div class="table-responsive mx-auto px-3 py-2 bg-primary position-relative">
                    @php $lotteryResult = \App\LotteryResult::whereLotteryRoundId($lotteryRound->id)->first() @endphp
                    @if ($lotteryResult->result_image)
                      <div class="position-absolute top-0 end-0 mt-2 me-2">
                        <a href="{{ asset("storage/{$lotteryResult->result_image}") }}" data-lity
                          class="btn btn-outline-light btn-sm border-0 rounded-circle px-2 black-outline">
                          <i class="fas fa-search"></i>
                        </a>
                      </div>
                    @endif
                    <table class="table table-borderless text-white w-auto text-nowrap lh-1">
                      <tbody>
                        @php $row = 0; $col = 0; @endphp
                        @foreach ($currentLotteryResultFormats as $lotteryResultFormatKey => $lotteryResultFormat)
                          @php $currentLotteryResultDetails = $lotteryRound->lotteryResultDetail->where('lottery_result_type', $lotteryResultFormat->result_type) @endphp
                          @foreach ($currentLotteryResultDetails as $lotteryResultDetailKey => $lotteryResultDetail)
                            @if ($row < $lotteryResultFormat->row) 
                              @if ($row > 0) </tr> @endif
                              @php $row++; $col = 0; @endphp
                              <tr>
                            @endif
                            @if ($col < $lotteryResultFormat->col) 
                              @if ($col > 0) </div></td> @endif
                              @php $col++ @endphp
                              <td class="text-center align-middle px-3"
                                rowspan="{{ $lotteryResultFormat->rowspan }}" 
                                colspan="{{ $lotteryResultFormat->colspan }}">
                                <p class="mb-1 mb-md-2 black-outline">{{ $lotteryResultDetail->lottery_result_type }}</p>
                                <div class="row row-cols-{{ $lotteryResultFormat->items_per_line ?? 1 }}">
                            @endif
                            <div class="col d-flex mx-auto">
                              <div class="mx-auto fs-{{ $lotteryResultFormat->font_size ?? 4 }} mb-2 black-outline"
                                @if ($lotteryResultFormat->letter_spacing)
                                  style="letter-spacing: {{ $lotteryResultFormat->letter_spacing }}pt;"
                                @endif
                              >{{ $lotteryResultDetail->value }}</div>
                            </div>
                            @if ($currentLotteryResultDetails->keys()->last() === $lotteryResultDetailKey) </div></td> @endif
                            @if (
                              $currentLotteryResultFormats->keys()->last() === $lotteryResultFormatKey
                              && $currentLotteryResultDetails->keys()->last() === $lotteryResultDetailKey
                            ) </tr> @endif
                          @endforeach
                        @endforeach
                      </tbody>
                    </table>
                  </div>
                </div>
              @else
                <div class="transactions row g-2 overflow-auto" style="max-height: 75vh;">
                  @foreach ($lotteryRound->lotteryResultDetail as $lotteryResultDetailKey => $lotteryResultDetail)
                    <div class="col-sm d-flex">
                      <div class="item text-nowrap flex-wrap flex-sm-nowrap w-100">
                        <div class="detail">
                            <img src="{{ lotteryFlag($lotteryRound->country) }}" alt="img" class="image-block imaged w48">
                            <div>
                              <strong class="lead">{{ $lotteryResultDetail->lottery_result_type }}</strong>
                              <p>{{ $lotteryRound->lottery_name }}</p>
                            </div>
                        </div>
                        <div class="right ms-auto">
                          <div class="price font-monospace fs-4 ms-3">{{ $lotteryResultDetail->value }}</div>
                        </div>
                      </div>
                    </div>
                  @endforeach
                </div>
              @endif
            </div>
          @endforeach
        @else
          <p class="text-center fw-light text-muted">ไม่มีข้อมูลการออกผลรางวัล</p>
        @endif
      </div>
    </div> --}}

    {{-- <div class="section full mt-4 mb-3">
      <div class="section-heading padding">
        <h2 class="title">อัตราจ่าย</h2>
      </div>

      @if (!$imagePayment->count())
        <p class="text-center fw-light text-muted">ไม่มีข้อมูลอัตราจ่าย</p>
      @endif

      <!-- carousel single -->
      <div class="carousel-single splide">
        <div class="splide__track">
          <ul class="splide__list">
            @foreach ($imagePayment as $item)
              <li class="splide__slide">
                <a href="{{ route('front.show.article', $item->id) }}">
                  <div class="card">
                    <img src="{{ asset("storage/{$item->picture}") }}" class="card-img-top" alt="image">
                    <div class="card-body">
                      <h5 class="card-title text-center">{{ lotteryName($item->title) }}</h5>
                    </div>
                  </div>
                </a>
              </li>
            @endforeach
          </ul>
        </div>
      </div>
    </div>

    <!-- News -->
    <div class="section full mt-4 mb-3">
      <div class="section-heading padding">
        <h2 class="title">บทความ</h2>
        <!-- <a href="javascript:void(0)" class="link">View All</a> -->
      </div>

      @if (!$adminArticle->count())
        <p class="text-center fw-light text-muted">ไม่มีบทความ</p>
      @endif

      <div class="carousel-single splide">
        <div class="splide__track">
          <ul class="splide__list">
            @foreach ($adminArticle as $article)
              <li class="splide__slide">
                <a href="{{ route('front.show.article', $article->id) }}">
                  <div class="blog-card">
                    <img src="{{ asset("storage/{$article->picture}") }}" alt="image" class="imaged w-100">
                    <div class="text">
                      <h4 class="title" style="height: 25px;">{{ $article->title }}</h4>
                      <small class="text-muted">{{ $article->sub_title }}</small>
                    </div>
                  </div>
                </a>
              </li>
            @endforeach
          </ul>
        </div>
      </div>
    </div>

    <div class="section full mt-4 mb-3">
      <div class="section-heading padding">
        <h2 class="title">ข่าวสาร</h2>
        <!-- <a href="javascript:void(0)" class="link">View All</a> -->
      </div>

      @if (!$articles->count())
        <p class="text-center fw-light text-muted">ไม่มีข่าวสาร</p>
      @endif

      <div class="carousel-single splide">
        <div class="splide__track">
          <ul class="splide__list">
            @foreach ($articles as $article)
              <li class="splide__slide">
                <a href="{{ route('front.show.article', $article->id) }}">
                  <div class="blog-card">
                    <img src="{{ asset("storage/{$article->picture}") }}" alt="image" class="imaged w-100">
                    <div class="text">
                      <h4 class="title" style="height: 25px;">{{ $article->title }}</h4>
                      <small class="text-muted">{{ $article->sub_title }}</small>
                    </div>
                  </div>
                </a>
              </li>
            @endforeach
          </ul>
        </div>
      </div>
    </div> --}}
  </section>
@endsection

@section('modal')
  @if (!is_null($promotion) && !$allowCloseSystemModal)
  {{-- <div class="modal fade action-sheet inset" id="promotionModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
              <div class="d-flex justify-content-between">
                <h5 class="modal-title">{{ $promotion->title }}</h5>
                <a href="javascript:;" class="pt-2" data-bs-dismiss="modal"><ion-icon style="font-size: 25px;" name="close-circle"></ion-icon></a>
              </div>
            </div>
            <div class="modal-body">
              <div class="text-center">
                  <img src="{{ asset("storage/{$promotion->picture}") }}" alt="..." class="" style="max-width: 100%;">
              </div>

              <div class="mx-3 mt-2">
                {!! $promotion->description !!}
              </div>

            </div>
        </div>
    </div>
  </div> --}}
  @endif

  @if ($allowCloseSystemModal)
  <div class="modal fade action-sheet inset" id="promotionModal" tabindex="-1" role="dialog" data-bs-backdrop="static" data-bs-keyboard="false">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-body">
              <div class="text-center">
                  <img src="{{ asset("assets/images/วันหยุดปีใหม่.jpg") }}" alt="..." class="" style="max-width: 100%;">
              </div>
            </div>
        </div>
    </div>
  </div>
  @endif
@endsection

@section('footer')
  <div class="appFooter">
    <div class="footer-title">
        Copyright © LT-99 2021. All Rights Reserved.
    </div>
  </div>
@endsection

{{-- ิ@if (Request::filled('ref')) --}}
  @section('bottomNav')
  <div class="appBottomMenu">
    <a href="{{ route('appUi.index') }}" class="item">
      <div class="col">
          <div class="action-button large">
              <ion-icon name="home-outline" role="img" class="md hydrated" aria-label="home outline"></ion-icon>
          </div>
      </div>
    </a>
  </div>
  @endsection
{{-- @endif --}}

@section('script')
  <script>
    const loginFormHandler = (e, el) => {
      e.preventDefault();
      const formData = $(el).serialize();
      $.post(`{{ route('front.login') }}`, formData, data => {
        // Dialog.alert({
        //   title: data.success ? 'เข้าสู่ระบบเรียบร้อย' : 'ไม่สามารถเข้าสู่ระบบได้',
        //   text: data.success ? 'ยินดีต้อนรับเข้าสู่เว็บไซต์' : data.message,
        //   type: data.success ? 'success' : 'danger'
        // }).then(res => data.success ? location.reload() : void(0));
        if (data.success) {
          location.reload();
        } else {
          swal('เข้าสู่ระบบไม่สำเร็จ', data.message, 'error', { buttons: false });
        }
      }, 'json');
    }

    $(function () {
      if ($('#promotionModal').length) {
        $('#promotionModal').modal('show');
      }
    });
  </script>

@endsection