@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">
      รายการแทง
    </div>
    <div class="right">
      <a href="javascript:;" data-bs-toggle="modal" data-bs-target="#FilterDialog" class="headerButton">
          <ion-icon name="search"></ion-icon>
      </a>
      <a href="javascript:;" data-bs-toggle="modal" data-bs-target="#SummaryModal" class="headerButton">
          <ion-icon name="stats-chart"></ion-icon>
      </a>
      <a href="{{ route('profile.betHistoryReport') }}" class="headerButton">
          <ion-icon name="newspaper-outline"></ion-icon>
      </a>
    </div>
  </div>
@endsection

@section('content')
  @if (isset($curDateBet) && $curDateBet->count())
    <div class="section mt-2">
      <div class="section-title">วันนี้</div>
      <div class="card">
        <ul class="listview flush transparent no-line image-listview detailed-list mt-1 mb-1">
          <!-- item -->
          @foreach ($curDateBet as $bill)
            @php
              $billClass = 'secondary';
              if ($bill->status == \App\Bill::STATUS_CANCELLED) {
                  $billClass = 'danger';
              }
              if ($bill->status == \App\Bill::STATUS_WON) {
                  $billClass = 'success';
              }
            @endphp
            <li>
              <a href="javascript:;" onclick="viewBillDetail(this)" data-bet='{{ json_encode($bill->bet) }}'
                data-bill-status='{{ json_encode($bill->billStatus) }}'
                data-allow-cancel="{{ $bill->allowCancel ? 'yes' : 'no' }}" data-bill-index="{{ $bill->id }}"
                data-bill-id="{{ $bill->bill_id }}" data-commission-line="{{ $bill->commission_line }}"
                class="item">
                <div class="icon-box bg-{{ $billClass }}">
                  <ion-icon name="newspaper-outline"></ion-icon>
                </div>
                <div class="in">
                  <div>
                    <strong>{{ $bill->bill_id }}</strong>
                    <div class="text-small text-secondary">{{ lotteryName($bill->country) }} ::
                      {{ $bill->billStatus['text'] }}
                    </div>
                  </div>
                  <div class="text-end">
                    <strong>{{ nf($bill->amount) }} ฿</strong>
                    <div class="text-small">
                      {{ THdatetime($bill->created_at) }}
                    </div>
                  </div>
                </div>
              </a>
            </li>
          @endforeach
          <!-- * item -->
        </ul>
      </div>
    </div>
  @endif

  <div class="section my-2">
    <div class="section-title">{{ ($request->filled('filter_date') ? 'ผลการค้นหา':'30 วันที่ผ่านมา') }}</div>
    <div class="card">
      <ul class="listview flush transparent no-line image-listview detailed-list mt-1 mb-1">
        <!-- item -->
        @if (!$betHistory->count())
          <p class="text-center fw-light my-3 text-black-50">ไม่มีข้อมูล</p>
        @endif
        @foreach ($betHistory as $bill)
          @php
            $billClass = 'secondary';
            if ($bill->status == \App\Bill::STATUS_CANCELLED) {
              $billClass = 'danger';
            }
            if ($bill->status == \App\Bill::STATUS_WON) {
              $billClass = 'success';
            }
          @endphp
          <li>
            <a href="javascript:;" onclick="viewBillDetail(this)" data-bet='{{ json_encode($bill->bet) }}'
              data-bill-status='{{ json_encode($bill->billStatus) }}'
              data-allow-cancel="{{ $bill->allowCancel ? 'yes' : 'no' }}" data-bill-index="{{ $bill->id }}"
              data-bill-id="{{ $bill->bill_id }}" data-commission-line="{{ $bill->commission_line }}"
              class="item">
              <div class="icon-box bg-{{ $billClass }}">
                <ion-icon name="newspaper-outline"></ion-icon>
              </div>
              <div class="in">
                <div>
                  <strong>{{ $bill->bill_id }}</strong>
                  <div class="text-small text-secondary">
                    {{ lotteryName($bill->country) }} :: {{ $bill->billStatus['text'] }}
                  </div>
                </div>
                <div class="text-end">
                  <strong>{{ nf($bill->amount) }} ฿</strong>
                  <div class="text-small">
                    {{ THdatetime($bill->created_at) }}
                  </div>
                </div>
              </div>
            </a>
          </li>
        @endforeach
        <!-- * item -->
      </ul>
    </div>
  </div>

  {{-- <div class="section mt-2">
    <div class="section-title">This Week</div>
    <div class="card">
      <ul class="listview flush transparent no-line image-listview detailed-list mt-1 mb-1">
        <!-- item -->
        <li>
          <a href="#" class="item">
            <div class="icon-box bg-warning">
              <ion-icon name="arrow-down-outline" role="img" class="md hydrated" aria-label="arrow down outline">
              </ion-icon>
            </div>
            <div class="in">
              <div>
                <strong>Etherium</strong>
                <div class="text-small text-secondary">Buy</div>
              </div>
              <div class="text-end">
                <strong>$40,68</strong>
                <div class="text-small">
                  March 8, 2021
                </div>
              </div>
            </div>
          </a>
        </li>
        <!-- * item -->
        <!-- item -->
        <li>
          <a href="#" class="item">
            <div class="icon-box">
              <ion-icon name="arrow-down-outline" role="img" class="md hydrated" aria-label="arrow down outline">
              </ion-icon>
            </div>
            <div class="in">
              <div>
                <strong>Bitcoin</strong>
                <div class="text-small text-secondary">Send</div>
              </div>
              <div class="text-end">
                <strong>$100,00</strong>
                <div class="text-small">
                  March 4, 2021
                </div>
              </div>
            </div>
          </a>
        </li>
        <!-- * item -->
        <!-- item -->
        <li>
          <a href="#" class="item">
            <div class="icon-box bg-secondary">
              <ion-icon name="swap-vertical-outline" role="img" class="md hydrated" aria-label="swap vertical outline">
              </ion-icon>
            </div>
            <div class="in">
              <div>
                <strong>Tether</strong>
                <div class="text-small text-secondary">Trade</div>
              </div>
              <div class="text-end">
                <strong>$2.405,48</strong>
                <div class="text-small">
                  February 24, 2021
                </div>
              </div>
            </div>
          </a>
        </li>
        <!-- * item -->
      </ul>
    </div>
  </div>

  <div class="section mt-2">
    <div class="section-title">This Week</div>
    <div class="card">
      <ul class="listview flush transparent no-line image-listview detailed-list mt-1 mb-1">
        <!-- item -->
        <li>
          <a href="#" class="item">
            <div class="icon-box bg-warning">
              <ion-icon name="arrow-down-outline" role="img" class="md hydrated" aria-label="arrow down outline">
              </ion-icon>
            </div>
            <div class="in">
              <div>
                <strong>Etherium</strong>
                <div class="text-small text-secondary">Buy</div>
              </div>
              <div class="text-end">
                <strong>$40,68</strong>
                <div class="text-small">
                  March 8, 2021
                </div>
              </div>
            </div>
          </a>
        </li>
        <!-- * item -->
        <!-- item -->
        <li>
          <a href="#" class="item">
            <div class="icon-box">
              <ion-icon name="arrow-down-outline" role="img" class="md hydrated" aria-label="arrow down outline">
              </ion-icon>
            </div>
            <div class="in">
              <div>
                <strong>Bitcoin</strong>
                <div class="text-small text-secondary">Send</div>
              </div>
              <div class="text-end">
                <strong>$100,00</strong>
                <div class="text-small">
                  March 4, 2021
                </div>
              </div>
            </div>
          </a>
        </li>
        <!-- * item -->
        <!-- item -->
        <li>
          <a href="#" class="item">
            <div class="icon-box bg-secondary">
              <ion-icon name="swap-vertical-outline" role="img" class="md hydrated" aria-label="swap vertical outline">
              </ion-icon>
            </div>
            <div class="in">
              <div>
                <strong>Tether</strong>
                <div class="text-small text-secondary">Trade</div>
              </div>
              <div class="text-end">
                <strong>$2.405,48</strong>
                <div class="text-small">
                  February 24, 2021
                </div>
              </div>
            </div>
          </a>
        </li>
        <!-- * item -->
      </ul>
    </div>
  </div> --}}

  {{-- <div class="section mt-3 mb-3">
    <a href="#" class="btn btn-lg btn-block btn-primary">Load More</a>
  </div> --}}
@endsection

@section('modal')
  <div class="modal fade action-sheet" id="bill-detail-modal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-dialog-scrollable" role="document" style="max-height: 85vh; height: auto;">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title"></h5>
        </div>
        <div class="modal-body">
          <div class="action-sheet-content p-0">
            <div class="table-responsive rounded-0">
              <table class="table">
                <thead class="table-active">
                  <tr>
                    <th class="border-top-0 text-center align-middle">ประเภท</th>
                    <th class="border-top-0 text-center align-middle">หมายเลข</th>
                    <th class="border-top-0 text-center align-middle">สถานะ</th>
                    <th class="border-top-0 text-center align-middle">ไลน์ส่วนลด</th>
                    <th class="border-top-0 text-center align-middle">บาทละ</th>
                    <th class="border-top-0 text-center align-middle">ยอดแทง</th>
                    <th class="border-top-0 text-center align-middle">ส่วนลด</th>
                    <th class="border-top-0 text-center align-middle">สุทธิ</th>
                    <th class="border-top-0 text-center align-middle">ยอดถูก</th>
                  </tr>
                </thead>
                <tbody></tbody>
              </table>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <div id="modalBottom" class="row">
            <div class="col-6">
              <a target="_blank" id="pdfBtn" class="btn btn-info btn-lg btn-block">
                <ion-icon name="document-text-outline"></ion-icon>
                ใบเสร็จ PDF
              </a>
            </div>
            <div class="col-6">
              <button id="cancelBtn" class="btn btn-danger btn-lg btn-block" onclick="cancelBill(this)">
                <ion-icon name="close-outline"></ion-icon>
                ยกเลิกบิล
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="modal fade dialogbox" id="dialog" data-bs-backdrop="static" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-icon text-warning">
          <ion-icon name="hourglass-outline"></ion-icon>
        </div>
        <div class="modal-header">
          <h5 class="modal-title"></h5>
        </div>
        <div class="modal-body">

        </div>
        <div class="modal-footer">
          <div class="btn-inline">
            <a href="#" class="btn" data-bs-dismiss="modal">ปิด</a>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="modal fade dialogbox" id="FilterDialog" data-bs-backdrop="static" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">วันที่</h5>
            </div>
            <form onsubmit="FilterHandler(event, this)">
                <div class="modal-body text-start mb-2">
  
                    <div class="form-group basic">
                        <div class="input-wrapper">
                            <label class="label" for="text1">กรุณาระบุวันที่</label>
                            <input type="date" class="form-control px-0" id="text1" name="filter_date">
                        </div>
                    </div>
  
                </div>
                <div class="modal-footer">
                    <div class="btn-inline">
                        <button type="button" class="btn btn-text-secondary"
                            data-bs-dismiss="modal">ปิด</button>
                        <button type="submit" class="btn btn-text-primary">ค้นหา</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
  </div>
  
  <div class="modal fade panelbox panelbox-right" id="SummaryModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">ยอดรวม{{ ($request->filled('filter_date') ? 'ของวันที่ '.THdatetime($request->filter_date):'') }}</h5>
                <a href="javascript:;" data-bs-dismiss="modal">ปิด</a>
            </div>
            <div class="modal-body">
              <div class="table-responsive">
                <table class="table table-bordered">
                    <thead>
                        <tr>
                            <th class="text-center align-middle" scope="col">#</th>
                            <th class="text-center align-middle" scope="col">ประเภท</th>
                            <th class="text-center align-middle" scope="col">ยอดแทง</th>
                            <th class="text-center align-middle" scope="col">ยอดยกเลิก</th>
                        </tr>
                    </thead>
                    <tbody>
                      @php
                          $sumAmount = $sumCancel = 0;
                      @endphp
                        @foreach ($sumByLottery as $country =>  $item)
                        @php
                            $sumAmount += $item['confirm']['amount'] ?? 0;
                            $sumCancel += $item['cancel']['amount'] ?? 0;
                        @endphp
                        <tr>
                            <td class="text-center align-middle" scope="row">
                              <img src="{{ lotteryFlag($country) }}" alt="img" class="image-block imaged w24">
                            </td>
                            <td class="text-center align-middle text-dark fw-bold"
                            data-bill-confirm='{!! json_encode($item['confirm']['bills'] ?? []) !!}'
                            data-bill-cancel='{!! json_encode($item['cancel']['bills'] ?? []) !!}'
                            >
                              {{ lotteryName($country) }}
                            </td>
                            <td class="text-center align-middle text-info">{{ nf($item['confirm']['amount'] ?? 0, true) }}</td>
                            <td class="text-center align-middle text-danger">{{ nf($item['cancel']['amount'] ?? 0, true) }}</td>
                        </tr>
                        @endforeach
                        <tr>
                          <td class="text-end align-middle" scope="row" colspan="2">
                            รวม: 
                          </td>
                          <td class="text-center align-middle text-info">{{ nf($sumAmount, true) }}</td>
                          <td class="text-center align-middle text-danger">{{ nf($sumCancel, true) }}</td>
                      </tr>
                    </tbody>
                </table>
              </div>
            </div>
        </div>
    </div>
  </div>

  <div class="modal fade dialogbox" id="removeBankAccountDialog" data-bs-backdrop="static" tabindex="-1" role="dialog">
      <div class="modal-dialog" role="document">
          <div class="modal-content">
              <div class="modal-icon text-danger">
                  <ion-icon name="alert"></ion-icon>
              </div>
              <div class="modal-header pt-2">
                  <h5 class="modal-title">ยืนยันการยกเลิกบิล?</h5>
              </div>
              <div class="modal-body">
                  กรุณาตรวจสอบความถูกต้องอีกครั้ง ก่อนยืนยันรายการ
              </div>
              <div class="modal-footer">
                  <div class="btn-inline">
                      <a href="#" class="btn btn-text-secondary" data-bs-dismiss="modal" data-confirm="0">ยกเลิก</a>
                      <a href="javascript:;" class="btn btn-text-danger processRemoveBank" data-bs-dismiss="modal" data-confirm="1">ยืนยัน</a>
                  </div>
              </div>
          </div>
      </div>
  </div>
@endsection

@section('footer')

@endsection

@section('script')
  <script>
    $(function () {

    });
    
    function viewBillDetail(el) {
      const self = $(el);
      const billId = self.data('bill-index');
      const bet = self.data('bet');
      const billStatus = self.data('bill-status');
      const allowCancel = self.data('allow-cancel');
      const target = $('#bill-detail-modal');
      const commissionLine = self.data('commission-line');

      let mdBottom = target.find('#modalBottom');
      if (billStatus.code == 2) {
        mdBottom.find('div:eq(0)').attr('class', 'col-12');
        mdBottom.find('div:eq(1)').hide();
      } else {
        mdBottom.find('div:eq(0)').attr('class', 'col-6');
        mdBottom.find('div:eq(1)').show();
      }

      let tr = ``;
      let sum = {
        amount: 0,
        discount: 0,
        payment: 0,
        won: 0,
      };
      for (const k in bet) {
        let data = bet[k];
        let paymentClass = 'text-dark';
        let trClass = '';
        if (data.isLimitPayment) paymentClass = 'text-danger';

        let statusText = billStatus.text;
        let statusColor = billStatus.color;
        if (data.status == 2) {
          trClass = 'table-danger';
          statusText = 'ยกเลิก';
          statusColor = 'danger';
        }
        if (billStatus.code === 4 && !data.won) {
          statusText = 'ไม่ถูกรางวัล';
          statusColor = 'danger';
        }
        if (data.won) sum.won += data.won;
        tr += `<tr class="${trClass}">
                <td class="text-center align-middle text-dark">${data.type}</td>
                <td class="text-center align-middle text-dark">${data.number}</td>
                <td class="text-center align-middle text-dark">
                  <span class="badge badge-${statusColor}">${statusText}</span>  
                </td>
                <td class="text-center align-middle text-dark">${commissionLine}</td>
                <td class="text-center align-middle ${paymentClass}">${$.number(data.paymentRate, 2)}</td>
                <td class="text-center align-middle text-dark">${$.number(data.amount, 2)}</td>
                <td class="text-center align-middle text-dark">${$.number(data.discount, 2)}</td>
                <td class="text-center align-middle text-dark">${$.number(data.payment, 2)}</td>
                <td class="text-center align-middle text-info fw-bold">${$.number(data.won, 2)}</td>
            </tr>`;
        sum.amount += +data.amount;
        sum.discount += +data.discount;
        sum.payment += +data.payment;
      }
      tr += `<tr class="table-danger fw-bold">
              <td class="text-end align-middle text-dark" colspan="5">รวม: </td>
              <td class="text-center align-middle text-dark">${$.number(sum.amount, 2)}</td>
              <td class="text-center align-middle text-dark">${$.number(sum.discount, 2)}</td>
              <td class="text-center align-middle text-dark">${$.number(sum.payment, 2)}</td>
              <td class="text-center align-middle text-info">${$.number(sum.won, 2)}</td>
          </tr>`;

      let cancelBtn = target.find('#cancelBtn');
      cancelBtn.attr('data-bill-id', billId);
      cancelBtn.prop('disabled', allowCancel === 'no');

      let pdfBtn = target.find('#pdfBtn');
      pdfBtn.attr('href', `{{ route('member.bill.receipt') }}/${billId}`)
      target.find('.modal-title').html(`<span class="text-primary">${self.data('bill-id')}</span>`);
      target.find('tbody').html(tr);
      target.modal('show');
    }

    function cancelBill(el) {
      $('#bill-detail-modal').modal('hide');
      let isApprove = false;
      const approve = new Promise(function (resolve) {
        $('#removeBankAccountDialog').modal('show');
        $('[data-confirm]').on('click', function () {
          isApprove = $(this).data('confirm') === 1 ? true:false;
          resolve(true);
        });
      });
      approve.then(function (data) {
        if(!isApprove) return;
        const self = $(el);
        const billId = self.data('bill-id');
        const dialog = $('#dialog');
        let dialogData = dialogConfig('ยกเลิกบิลเรียบร้อย', 'กรุณาตรวจสอบประวัติการแทงอีกครั้ง', 'text-success',
          '<ion-icon name="checkmark-circle"></ion-icon>');

        $.post(`{{ route('appUi.cancelBill') }}`, {
          billId: billId
        }, response => {
          self.closest('.modal').modal('hide');
          if (response.success) {

          } else {
            dialogData = dialogConfig('ยกเลิกรายการไม่สำเร็จ', response.text, 'text-danger',
              '<ion-icon name="close"></ion-icon>');
          }
          setDialog(dialog, dialogData);
          dialog.modal('show');
          dialog.on('hidden.bs.modal', function() {
            location.reload();
          });
        });
      });
    }

    function FilterHandler(e, el)
    {
      e.preventDefault();
      const targetUrl = `{{ url()->current() }}/?${$(el).serialize()}`;
      window.location = targetUrl;
    }
  </script>
@endsection

{{-- @section('bottomNav')

@endsection --}}