@extends('layouts.master')

@section('title')
  LT-99 :: รายงานสรุปหวยยี่กี
@endsection

@section('sub_title')
  รายงานสรุปหวยยี่กี
@endsection

@section('content')
  <div class="card">
    <div class="card-header">
      <div class="row align-items-center">
        <div class="col-sm mb-3 mb-sm-0">
          <h3 class="mb-0">เลือกงวดหวยยี่กี</h3>
        </div>
        <form id="round-form" class="col-sm-auto d-flex">
          <label class="my-auto mr-2 mr-sm-3 text-nowrap text-sm small">งวดวันที่</label>
          <div class="input-group">
            <input type="date" name="display_date" class="form-control mr-1"
              value="{{ request()->get('display_date', now()->format('Y-m-d')) }}">
            <div class="input-group-btn">
              <button type="submit" class="btn btn-primary px-3 h-100"><i class="fas fa-search"></i></button>
            </div>
          </div>
        </form>
      </div>
    </div>

    <div class="card-body p-0 table-responsive">
      <table class="table table-hover table-sm table-striped">
        <thead class="thead-light">
          <tr>
            <th class="align-middle text-center font-weight-bold text-body" rowspan="2">รอบที่</th>
            <th class="align-middle text-center font-weight-bold text-body" rowspan="2">ช่วงเวลา</th>
            <th class="align-middle text-center font-weight-bold text-body" rowspan="2">สถานะ</th>
            <th class="align-middle text-center font-weight-bold text-body" rowspan="2">ยอดแทง</th>
            <th class="align-middle text-center font-weight-bold text-body" rowspan="2">ยิงเลข</th>
            <th class="align-middle text-center font-weight-bold text-body" colspan="3">ผลรางวัล</th>
            <th class="align-middle text-center font-weight-bold text-body" rowspan="2">ดำเนินการ</th>
          </tr>
          <tr>
            <th class="align-middle text-center font-weight-bold py-2 text-body bg-lighter">ผลรางวัล</th>
            <th class="align-middle text-center font-weight-bold py-2 text-body bg-lighter">3 ตัวบน</th>
            <th class="align-middle text-center font-weight-bold py-2 text-body bg-lighter">2 ตัวล่าง</th>
          </tr>
        </thead>
        <tbody class="displayManualResultTable">
          @foreach ($lotteryRounds as $key => $lotteryRound)
            <tr>
              <td class="align-middle text-center text-sm font-weight-bold">{{ $key + 1 }} </td>
              <td class="align-middle text-center text-sm font-weight-bold">
                {{ (new DateTime($lotteryRound->open))->format('H:i') }} -
                {{ (new DateTime($lotteryRound->close))->format('H:i') }} </td>
              <td class="align-middle text-center">
                <span
                  class="badge text-sm badge-md badge-{{ $lotteryRound->statusColor() }}">{{ $lotteryRound->statusText() }}รับแทง</span>
              </td>
              <td class="align-middle text-center text-sm font-weight-bold">
                @php echo number_format(($amountSum = $lotteryRound->bills()->sum('amount')), 2) @endphp <small>THB</small>
              </td>
              <td class="align-middle text-center text-sm font-weight-bold">
                {{ $lotteryRound->yeekeeGuessNumber->count() }} <small>ครั้ง</small>
              </td>
              @if ($lotteryRound->lotteryResult)
                <td
                  class="table-{{ $lotteryRound->statusColor() }} text-center align-middle text-monospace text-lg text-nowrap"
                  width="1%" style="letter-spacing: 3px;">
                  {{ $lotteryRound->lotteryResult->resultDetail->where('lottery_result_type', 'ผลการออกรางวัล')->first()->value }}
                </td>
                <td
                  class="table-{{ $lotteryRound->statusColor() }} text-center align-middle text-monospace text-lg text-nowrap"
                  width="1%" style="letter-spacing: 3px;">
                  {{ $lotteryRound->lotteryResult->resultDetail->where('lottery_result_type', '3 ตัวบน')->first()->value }}
                </td>
                <td
                  class="table-{{ $lotteryRound->statusColor() }} text-center align-middle text-monospace text-lg text-nowrap"
                  width="1%" style="letter-spacing: 3px;">
                  {{ $lotteryRound->lotteryResult->resultDetail->where('lottery_result_type', '2 ตัวล่าง')->first()->value }}
                </td>
              @else
                <td
                  class="table-{{ $lotteryRound->statusColor() }} text-center align-middle text-monospace text-black-50 font-italic text-lg text-nowrap"
                  width="1%" style="letter-spacing: 3px;">
                  {{ $lotteryRound->currentResult['ผลการออกรางวัล'] ?? '-' }}
                </td>
                <td
                  class="table-{{ $lotteryRound->statusColor() }} text-center align-middle text-monospace text-black-50 font-italic text-lg text-nowrap"
                  width="1%" style="letter-spacing: 3px;">
                  {{ $lotteryRound->currentResult['3 ตัวบน'] ?? '-' }}
                </td>
                <td
                  class="table-{{ $lotteryRound->statusColor() }} text-center align-middle text-monospace text-black-50 font-italic text-lg text-nowrap"
                  width="1%" style="letter-spacing: 3px;">
                  {{ $lotteryRound->currentResult['2 ตัวล่าง'] ?? '-' }}
                </td>
              @endif
              <td class="align-middle font-weight-bold">
                <button type="button" onclick="toggleDetailRow(this)" class="btn btn-info btn-sm"><i
                    class="fas fa-chart-bar text-white-50 mr-1"></i> รายละเอียด</button>
                @if ($lotteryRound->statusEnabled())
                  <a href="#guess-number-dialog" data-toggle="modal" data-lottery-round-id="{{ $lotteryRound->id }}" onclick="guessNumberForm['lottery_round_id'].value = this.dataset.lotteryRoundId" class="btn btn-danger btn-sm"><i class="fas fa-hand-point-left text-white-50 mr-1"></i>
                    ยิงเลข</a>
                @endif
              </td>
            </tr>
            <tr hidden>
              <td colspan="9" class="bg-secondary">
                <p class="text-center h1 mt-2 mb-3">รายละเอียดงวดที่ {{ $key + 1 }}</p>
                <div class="table-responsive">
                  <div class="row justify-content-center">
                    <div class="col-sm-6 col-lg-4 text-nowrap">
                      <div class="card card-stats">
                        <div class="card-body">
                          <div class="row no-gutters">
                            <div class="col">
                              <h5 class="card-title text-uppercase text-muted mb-0">ยอดแทงรวม</h5>
                              <span class="h2 font-weight-bold mb-0">
                                {{ number_format($amountSum, 2) }} <small class="text-muted">THB</small>
                              </span>
                            </div>
                            <div class="col-auto">
                              <div class="icon icon-shape bg-gradient-red text-white rounded-circle shadow">
                                <i class="ni ni-active-40"></i>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>

                    <div class="col-sm-6 col-lg-4 text-nowrap">
                      <div class="card card-stats">
                        <div class="card-body">
                          <div class="row no-gutters">
                            <div class="col">
                              <h5 class="card-title text-uppercase text-muted mb-0">ยอดถูกลูกค้า</h5>
                              <span class="h2 font-weight-bold mb-0">
                                @php echo number_format(($winAmountSum = $lotteryRound->bills()->whereStatus(\App\Bill::STATUS_WON)->get()->map(fn ($bill) => getWonAmount($bill))->sum()), 2) @endphp
                                <small class="text-muted">THB</small>
                              </span>
                            </div>
                            <div class="col-auto">
                              <div class="icon icon-shape bg-gradient-orange text-white rounded-circle shadow">
                                <i class="ni ni-active-40"></i>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>

                    <div class="col-sm-6 col-md text-nowrap">
                      <div class="card card-stats">
                        <div class="card-body">
                          <div class="row">
                            <div class="col">
                              <h5 class="card-title text-uppercase text-muted mb-0">รวมสุทธิ</h5>
                              <span class="h2 font-weight-bold mb-0 text-body">
                                {{ number_format($amountSum - $winAmountSum, 2) }} <small class="text-muted">THB</small>
                              </span>
                            </div>
                            <div class="col-auto">
                              <div class="icon icon-shape bg-gradient-green text-white rounded-circle shadow">
                                <i class="fas fa-money-bill-wave"></i>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>

                  <div class="table-responsive">
                    @php
                      $i = 0;
                      $yeekeeGuessNumbers = $lotteryRound->yeekeeGuessNumber->reverse();
                    @endphp
                    @foreach ($yeekeeGuessNumbers as $yeekeeGuessNumber) @php $i++ @endphp
                      <div class="form-row mb-2 text-body g-2">
                        <div class="col-4 col-lg-3 d-flex">
                          <div class="w-100 card shadow-none p-2 border bg-{{ in_array($i, [1, 16]) ? 'success' : 'white' }} mb-0">
                            <p class="rounded bg-white text-body text-center mb-2">อันดับที่ {{ $i }}</p>
                            <div class="text-center font-monospace text-lg" style="letter-spacing: 3px;">{{ $yeekeeGuessNumber->number }}</div>
                          </div>
                        </div>
                        <div class="col d-flex">
                          <div class="w-100 px-3 py-2 border {{ in_array($i, [1, 16]) ? 'border-success' : '' }} rounded bg-white">
                            <div class="{{ in_array($i, [1, 16]) ? 'text-success' : '' }} border-bottom pb-2 pt-1">
                              <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($yeekeeGuessNumber->username, 0, 2) . '****' . substr($yeekeeGuessNumber->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">{{ $yeekeeGuessNumber->created_at }}</span>
                            </div>
                          </div>
                        </div>
                      </div>
                    @endforeach
    
                    {{-- <table class="table table-bordered table-hover table-sm table-striped table-colors">
                      <thead>
                        <tr>
                          <th class="align-middle text-center font-weight-bold text-body">ยูสเซอร์</th>
                          <th class="align-middle text-center font-weight-bold text-body">เลขบิล</th>
                          <th class="align-middle text-center font-weight-bold text-body">ยอดแทง</th>
                          <th class="align-middle text-center font-weight-bold text-body">ยอดที่ถูกรางวัล</th>
                          <th class="align-middle text-center font-weight-bold text-body">ยอดถูกรวม</th>
                        </tr>
                      </thead>
                      <tbody class="detailTabele">
                        <tr>
                          <td class="align-middle text-center font-weight-bold" colspan="5">
                            ไม่พบรายการถูก
                          </td>
                        </tr>
                      </tbody>
                      <tfoot>
                        <tr>
                          <th class="py-3 text-right align-middle text-body" colspan="2">สรุปยอด</th>
                          <th class="py-3 text-center">
                            <h3><span class="badge badge-primary">ยอดแทงรวมของบิลที่ถูกรางวัล</span></h3>
                            <h3 class="mb-0"><strong class="text-body">0.00</strong> <small
                                class="text-muted">THB</small></h3>
                          </th>
                          <th class="py-3 text-center">
                            <h3><span class="badge badge-warning">ยอดที่ถูกรางวัล</span></h3>
                            <h3 class="mb-0"><strong class="text-warning">0.00</strong> <small
                                class="text-muted">THB</small></h3>
                          </th>
                          <th class="py-3 text-center">
                            <h3><span class="badge badge-danger">ยอดถูกรวม</span></h3>
                            <h3 class="mb-0"><strong class="text-danger">0.00</strong> <small
                                class="text-muted">THB</small></h3>
                          </th>
                        </tr>
                      </tfoot>
                    </table> --}}
                  </div>
                </div>
              </td>
            </tr>
          @endforeach
        </tbody>
      </table>
    </div>
  </div>

  <div class="modal fade" id="guess-number-dialog" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
      <form id="guess-number-form" class="modal-content bg-secondary">
        <fieldset id="guess-number-fieldset" disabled>
          <input type="hidden" name="lottery_round_id">
          <div class="modal-header">
            <h5 class="modal-title">ยิงเลข</h5>
            <button class="close" data-dismiss="modal">&times;</button>
          </div>
          <div class="modal-body border-0">
            <label>Username</label>
            <div class="form-group">
              <input type="text" name="username" class="form-control form-control-alternative" placeholder="ไม่จำเป็น">
              <small class="form-text text-black-50">หากไม่กรอก ระบบจะสุ่ม Username ให้อัตโนมัติ</small>
            </div>
            <label>เลข</label>
            <div class="form-group">
              <input id="guess-number" 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 หลัก" class="form-control form-control-alternative">
              <small class="form-text text-black-50">หากไม่กรอก ระบบจะสุ่มเลข 5 หลักให้อัตโนมัติ</small>
            </div>
          </div>
          <div class="modal-footer border-0">
            <button class="btn btn-success" type="submit">
              <i class="fas fa-save me-2 text-white-50"></i>
              <span>ยิงเลข</span>
            </button>
          </div>
        </fieldset>
      </form>
    </div>
  </div>
@endsection

@section('scripts')
  <script>
    const guessNumberdialog = document.getElementById('guess-number-dialog');
    const guessNumberForm = document.getElementById('guess-number-form');
    const guessNumberFieldset = document.getElementById('guess-number-fieldset');
    const guessNumber = document.getElementById('guess-number');

    function toggleDetailRow(btnEl) {
      const trEl = btnEl.closest('tr').nextElementSibling;
      trEl.hidden = !trEl.hidden;
    }

    $('#guess-number-dialog').on('hide.bs.modal', e => {
      guessNumberForm['lottery_round_id'].value = '';
      guessNumberForm['number'].value = '';
      guessNumberFieldset.disabled = true;
    });

    $('#guess-number-dialog').on('show.bs.modal', e => {
      guessNumberFieldset.disabled = false;
    });

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

      let text = `คุณยืนยันที่จะยิงเลข "${guessNumber.value.padStart(5, '0')}" หรือไม่`;
      if (!guessNumber.value) {
        text = 'คุณยืนยันที่จะยิงเลขสุ่ม 5 หลักหรือไม่';
        // await swal('โปรดกรอกตัวเลข', 'โปรดกรอกตัวเลขที่ต้องการยิง', 'warning');
        // return focusOn(guessNumber);
      }

      const confirm = await swal({
        title: 'ยืนยันการยิงเลข',
        text,
        icon: 'info',
        buttons: {
          cancel: 'ยกเลิก',
          confirm: {
            text: 'ยืนยัน',
            closeModal: false,
          }
        }
      });

      if (!confirm) return false;

      const formData = new FormData(guessNumberForm);
      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