@extends('layouts.appUi')

@section('title')
  ผลการออกรางวัล
@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')
  <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" />

    @if ($errors->any())
      <div class="alert alert-danger">
        <ul>
          @foreach ($errors->all() as $error)
            <li>{{ $error }}</li>
          @endforeach
        </ul>
      </div>
    @endif

  <div class="section inset mt-4">
    {{-- <div class="section-title text-center mb-2">งวดประจำวันที่ {{ THdatetime(request()->query('date', date('Y-m-d')), 'date') }}</div> --}}
    <form class="wide-block pt-2 pb-2">
      @foreach (request()->query->all() as $name => $value)
        <input type="hidden" name="{{ $name }}" value="{{ $value }}">
      @endforeach
      <div class="form-group boxed mb-0">
        <label for="date" class="label">เลือกรอบการออกรางวัล</label>
        <div class="input-group">
          <input type="date" name="date" class="form-control px-3" value="{{ request()->query('date') }}">
          <div class="input-group-btn">
            <button type="submit" class="btn btn-primary h-100 px-3" style="border-top-left-radius: 0; border-bottom-left-radius: 0;"><i class="fas fa-search"></i></button>
          </div>
        </div>
      </div>
    </form>
  </div>
  <div class="section my-4">
    <div class="accordion bg-transparent border-0" id="results-accordion">
      @if ($lotteryRounds->count())
        @unless (request()->query('hide-lottery-nav'))
          <div class="card mb-3">
            <ul class="nav nav-tabs lined flex-nowrap overflow-auto px-3" role="tablist">
              @foreach ($lotteryRounds as $lotteryRoundKey => $lotteryRound)
                <li class="nav-item border-end-0 text-nowrap">
                  <a id="heading-lottery-result-card-{{ $lotteryRound->country }}"
                    class="nav-link {{ request()->query('country') === $lotteryRound->country ? 'active' : '' }}"
                    data-bs-toggle="collapse"
                    href="#lottery-result-card-{{ $lotteryRound->country }}"
                    aria-expanded="{{ request()->query('country') === $lotteryRound->country ? 'true' : 'false'}}"
                    aria-controls="lottery-result-card-{{ $lotteryRound->country }}"
                    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');"
                  >
                    <img src="{{ lotteryFlag($lotteryRound->country) }}" alt="img" class="image-block imaged w16 me-1">
                    <span>{{ $lotteryRound->lottery_name }}</span>
                  </a>
                </li>
              @endforeach
            </ul>
          </div>
        @endunless
        @foreach ($lotteryRounds as $lotteryRoundKey => $item)
          <div class="collapse {{ request()->query('country') === $item->country ? 'show' : '' }}" id="lottery-result-card-{{ $item->country }}" aria-labelledby="heading-lottery-result-card-{{ $item->country }}" data-bs-parent="#results-accordion">
            <p class="text-center text-body lead">งวดวันที่ {{ THdatetime($item->display_date, 'date') }}</p>
            {{--|-------------------------------------
                | ถ้าเป็นหวยรอบเดี่ยว
              --|-------------------------------------}}
            @if ($item->lottery->many_rounds === false)
              @php
                $lotteryRound = $item;
                $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
            @endif

          {{--|-------------------------------------
              | ถ้าเป็นหวยหลายรอบ
            --|-------------------------------------}}
            @if ($item->lottery->many_rounds)
            @php
              $resultTypes = $item->lottery->lotteryResultFormat->sortBy('position')->map(function ($value) {
                return $value->result_type;
              });
            @endphp
            <div class="table-responsive">
              <table class="table table-sm table-hover table-striped text-nowrap text-body w-auto mx-auto text-center bg-primary fs-5">
                <thead>
                  <tr>
                    <th class="px-2 py-3 p-sm-3"></th>
                    @foreach ($resultTypes as $type)
                      <th class="px-2 py-3 p-sm-3 fw-bold black-outline text-white">{{ $type }}</th>
                    @endforeach
                    @if ($item->lottery->country === 'LN')
                      <th class="px-2 py-3 p-sm-3 fw-bold black-outline text-white">{{-- ประเภท --}}</th>
                    @endif
                  </tr>
                </thead>
                <tbody>
                  @foreach ($item->lotteryRounds as $lotteryRound)
                    <tr>
                      <td class="px-2 px-sm-3 py-2 fw-bold black-outline text-white">{{ $lotteryRound->round_name }}</td>
                      @foreach ($resultTypes as $result)
                        <td class="px-2 px-sm-3 py-2 fw-bold black-outline text-white font-monospace">
                          {{ +$lotteryRound->lotteryResult->resultDetail->where('lottery_result_type', $result)->first()->value }}
                        </td>
                        @endforeach
                        @if ($item->lottery->country === 'LN')
                          <td class="px-2 px-sm-3 py-2 fw-bold text-white">
                            @foreach (numberLotteryResultBadge($lotteryRound->lotteryResult->resultDetail->where('lottery_result_type', $result)->first()->value) as $badge)
                              <span class="rounded-3 badge badge-{{ $badge['bg_color']}} text-{{ $badge['text_color'] }}">{{ $badge['label'] }}</span>
                            @endforeach
                          </td>
                        @endif
                    </tr>
                  @endforeach
                </tbody>
              </table>
            </div>
              {{-- <ol class="text-body row">
                @foreach ($item->lotteryRounds as $lotteryRound)
                  <li class="col-auto g-3 ms-5">
                    <div>{{ $lotteryRound->round_name }}</div>
                    <ul>
                      @foreach ($lotteryRound->lotteryResult->resultDetail as $result)
                        <li>{{ $result->lottery_result_type }}: {{ $result->value }}</li>
                      @endforeach
                    </ul>
                  </li>
                @endforeach
              </ol> --}}
            @endif
          </div>
        @endforeach
      @else
        <p class="text-center fw-light text-muted">ไม่มีข้อมูลการออกผลรางวัล</p>
      @endif
    </div>
  </div>
@endsection

@section('script')
  <script src="https://cdnjs.cloudflare.com/ajax/libs/lity/2.4.1/lity.min.js"
    integrity="sha512-UU0D/t+4/SgJpOeBYkY+lG16MaNF8aqmermRIz8dlmQhOlBnw6iQrnt4Ijty513WB3w+q4JO75IX03lDj6qQNA=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  {{-- <script src="{{ asset('assets/js/lottery.js?v=0.0.7') }}"></script> --}}
  <script>
    window.onload = () => {
      $activeNav = document.querySelector('#results-accordion .active');
      if (!$activeNav) return;
      $activeNav.scrollIntoView(false);
    }
  </script>
@endsection