@extends('layouts.app')
@section('content')
<style>
  a {
    text-decoration: none;
  }

  span {
    color: white;
  }

  table,
  thead,
  tr,
  td {
    color: white;
  }

  section.ticket {
    display: flex;
    justify-content: center;
  }

  .multisteps_form {
    margin: 0rem 0rem;
    padding: 2rem 15px !important;
  }

  .card {
    background-image: linear-gradient(to right, #0f0c29, #302b63, #24243e);
    box-shadow: rgb(254 254 254 / 22%) 0px 5px 15px !important;
    border-radius: 10px;
    border: 1px solid #ffffff38;
  }

  .span-tittel {
    width: 105px;
    display: inline-block;
  }

  #checker-content {
    padding: 15px 20px 0px;
    text-align: center;
  }

  .line {
    position: relative;
    display: inline-block;
    padding: 20px 0 30px;
    border-bottom: 1px solid #ffffff38;
  }

  .numbers {
    align-items: center;
    display: flex;
  }

  .numbers ul {
    margin-bottom: 0px;
  }

  .numbers ul,
  .numbers li {
    position: relative;
    list-style-type: none;
    display: inline-block;
  }

  .numbers ul:first-child {
    margin-right: 30px;
  }

  .numbers input {
    border: none;
    border-radius: 8px;
    padding: 5px;
    font-size: 30px;
    font-weight: bold;
    text-align: center;
    width: 70px;
    height: 70px;
    margin: 0 2px;
  }

  .clean {
    position: relative;
    font-size: 30px;
    padding-left: 20px;
    cursor: pointer;
  }

  #checker-reset,
  .clean {
    display: inline-block;
  }

  #checker button {
    display: inline-block;
    -webkit-appearance: none;
    background: none;
    border: none;
    color: #0A8901;
    padding: 10px;
    font-size: 20px;
    margin-bottom: 20px;
    cursor: pointer;
    margin-left: auto;
    margin-right: auto;
  }

  .btn.clean.btn-danger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    padding: 0px;
    border-radius: 8px;
  }

  .main-label {
    margin-bottom: 5px;
  }

  .form-control {
    background: transparent;
    color: #fff;
    border: 1px solid #ffffff38;
  }

  .form-control:focus {
    background: transparent;
    color: #fff;
    border: 1px solid #ffffff;
    box-shadow: none;
  }

  .form-control::placeholder {
    color: #fff;
  }

  .checker-results {
    background: #0A8901;
    display: flex;
    width: 100%;
    align-items: center;
    box-shadow: rgba(0, 0, 0, 0.1) 0 3px 5px;
    text-align: center;
    margin-bottom: 0px
  }

  .checker-results .title {
    position: relative;
    color: #FFF;
    padding: 10px 30px;
    font-weight: 700;
    font-size: 18px;
    line-height: 20px;
    text-align: center;
    letter-spacing: 0;
  }

  .checker-results .title:after {
    content: "";
    background: #0A8901;
    position: absolute;
    width: 24px;
    height: 24px;
    top: calc(36%);
    right: -12px;
    transform: rotate(-45deg);
  }

  .checker-results .chosen-numbers {
    background: #F4F4F4;
    padding: 20px 25px;
    flex: 1;
    text-align: center;
  }

  .checker-results .chosen-numbers .padded {
    padding: 5px;
  }

  .ball {
    background: #0a8901;
    border: 6px solid #0a8901;
    color: #fff;
    width: 60px;
    height: 60px;
    display: inline-block;
    border-radius: 50%;
    text-align: center;
    font: 24px/48px Montserrat, sans-serif;
    font-weight: 700;
  }

  .ball.joker {
    border: 6px solid #0a8901;
    background: none;
    color: #0a8901;
  }

  .border-bottom-loop {
    border-bottom: 1px solid #ffffff38;
  }

  .border-bottom-loop:last-child {
    border: none;
  }
</style>
<section class="ticket">
  <div class="multisteps_form  position-relative overflow-hidden">
    <div class="card bg-gray mt-5 p-5">
      <div class="row justify-content-between align-items-center">
        <div class="col-md-8">
          <div class="row align-items-center">
            <div class="col-md-6 mb-3">
              <div class="form-group" style="line-height: 1.5;">
                {{-- <span class="span-tittel">Title:</span> --}}
                <span>{{ @$gameDetail->game_title }}</span>
              </div>
              <div class="form-group" style="line-height: 1.5;">
                {{-- <span class="span-tittel">Draw Date:</span> --}}
                <span class="text-success">{{ @$gameDetail->game_end_date }} {{ date('h:i A',
                  strtotime($gameDetail->game_end_time)) }}</span>
              </div>
              <div class="form-group" style="line-height: 1.5;">
                <span class="text-danger">{{ @$gameDetail->game_draw_date }} {{ date('h:i A',
                  strtotime($gameDetail->game_draw_date)) }}</span>
                {{-- <span class="span-tittel">Ticket Price:</span> <span>$ {{ $gameDetail->game_ticket_prize }}</span>
                --}}
              </div>
              <div class="form-group" style="line-height: 1.5;">
                {{-- <span class="span-tittel">Time:</span> --}}

              </div>
              <div class="mt-3" style="height: 42px;">
                <button class="button-72" onclick="showDescription({{ $gameDetail->id }})">Description</button>
                <button class="button-72" onclick="showResult({{ $gameDetail->id }})"
                  style="position: relative;left: 156px;top: -42px;">Draw Prizes</button>
              </div>
            </div>
            {{-- <div class="col-md-6">
              <div class="form-group">
                <div class="col-md-12">
                  <div class="form-group">
                    <span style="position: relative;top: 28px;right: 130px;">
                      @if($gameDetail->result_publish == 1)
                      Result Published
                      @else
                      Wait For Result
                      @endif
                    </span>
                    <button class="button-72" onclick="showDescription({{ $gameDetail->id }})">Description</button>
                    <button class="button-72" onclick="showResult({{ $gameDetail->id }})"
                      style="position: relative;left: 156px;top: -42px;">Draw Prizes</button>
                  </div>
                </div>
              </div>
            </div> --}}
          </div>
        </div>
        <div class="col-md-3 text-center">
          @if(@ $gameDetail->featured_image)
          <img src="{{ asset('game_images/'.@$gameDetail->featured_image) }}" class="rounded d-block img-fluid" alt=""
            style="height: auto;width: 100px;float: right;width:100% !important;">
          @else
          <img src="{{ asset('logo.png') }}" class="rounded d-block img-fluid" alt=""
            style="height: auto;width: 100px;float: right;width:100% !important;">
          @endif

        </div>

      </div>
    </div>
   
        <div class="card bg-gray mt-5 p-5">
            <div class="row">
                <div class="col-md-12 text-center">
                  <style>
                    .numbers input, .numbers input:focus{
                        border: 1px solid var(--pg) !important;
                        outline: none !important;
                    }
                  </style>
                    @foreach($tickets as $ticket)

                    @for ($i = 0; $i < count($ticketDetails); $i++)
                    @if($ticketDetails[$i]->ticket_id === $ticket->id)
                    <div class="border-bottom-loop">
                        <div class="ticket-number-wrap d-flex align-items-center justify-content-between mb-4 mt-3">
                            <span class="card-title text-white">TICKET NO : 
                              <br>
                              {{ $ticketDetails[$i]->ticket_code }}
                            </span>

                            <div class="ticket-number-box">
                                <div class="line p-0 border-0" data-index="0">
                                    <div class="numbers">
                                        <ul class="p-0">
                                            @foreach ($ticket_sequence[$i] as $sequence)
                                            <li>
                                                <input type="tel" min="1" value="{{ $sequence->winning_sequence }}"
                                                    readonly>
                                            </li>
                                            
                                            @endforeach
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div>
                                {!! QrCode::size(150)->generate(route('print-qr.ticket', $ticketDetails[$i]->ticket_code))
                                !!}
                            </div>

                        </div>
                    </div>
                    
                    @endif
                    
                    @endfor
        @endforeach    

                </div>
            </div>
            <div class="mt-4 mb-4">
              <div class="row">
                  <div class="col-md-8 mx-auto text-center">
                      <span class="card-title mb-3 text-white" style="display: inline-block; color: var(--primary);">DRAW PRIZES</span>
                      <div class="table-responsive">
                          <table class="table">
                              <thead>
                                <tr>
                                  <th scope="col">Number</th>
                                  <th scope="col">Amount</th>
                                  <th scope="col">Description</th>
                                </tr>
                              </thead>
                              <tbody class="table-group-divider">
                                @if(!empty($result_check))
                                @foreach ($result_check as $result)
                                  <tr>
                                    <td>{{ $result->number_range }}</td>
                                    <td>{{ $result->amount }}</td>
                                    <td>{{ $result->description }}</td>
                                  </tr>
                                @endforeach
                                @else
                                    No Result Found
                                @endif
                              </tbody>
                            </table>
                      </div>
                  </div>
              </div>
              <div class="mt-4 mb-4 text-center">
                <span class="card-title mb-3 text-white" style="display: inline-block; color: var(--primary);">RESULTS</span>
              </div>
                <div class="line border-0" data-index="0" style="left: 256px;">
                  <span>Winning Numbers</span>
                  <div class="numbers">
                    <ul class="p-0">
                      @foreach ($winning_numbers as $win)
                          <li>
                            <input type="tel" min="1" value="{{ $win->number }}" readonly="">
                          </li>
                      @endforeach
                    </ul>
                  </div>
                @php
                $matchedAmounts = [];
                @endphp
            
            <table class="table">
              <thead>
                  <tr>
                      <th>Ticket Code</th>
                      <th>Result</th>
                      <th>Claim</th>
                  </tr>
              </thead>
              <tbody>
                  @foreach($ticketDetails as $ticketDetail)
                      @php
                      $countStatusOne = 0; // Initialize the count variable for each ticket detail
                      $matchedAmounts = []; // Initialize matchedAmounts for each ticket detail
                      @endphp
          
                      <tr>
                          <td>{{ $ticketDetail->ticket_code }}</td>
                          <td>
                              @foreach ($ticket_sequence[$loop->index] as $sequence)
                                  @if($sequence->status == 1)
                                      @php
                                      $countStatusOne++;
                                      @endphp
                                  @endif
                              @endforeach
          
                              @if($countStatusOne > 0)
                                  @foreach ($result_check as $result)
                                      @if ($result->number_range == $countStatusOne)
                                          {{ $result->description }}
                                          @php
                                            $matchedAmounts[] = $result->amount;
                                          @endphp
                                      @endif
                                  @endforeach
                              @else
                                  Loss
                              @endif
                          </td>
                          <td>
                            @php
                              $totalAmounts = array_sum($matchedAmounts);
                            @endphp
                              @if($totalAmounts > 0)
                                @if($ticketDetail->is_claimed == 2)
                                  <a href="#" class="btn btn-primary text-white" readonly>Already Claimed</a>
                                @elseif($ticketDetail->is_claimed != 1)
                                  <a href="{{ route('user.claim-ticket-amount', $ticketDetail->id) }}" class="btn btn-primary text-white">Claim Amount</a>
                                @endif
                              @endif
                          </td>
                      </tr>
                  @endforeach
              </tbody>
          </table>
          
          
                <div class="d-flex align-items-center justify-content-between">
                  {{-- <span class="card-title" style="display: inline-block; color: var(--primary);">"JACK POT - You Win."</span> --}}

                </div>
            </div>
            
          
        </div>
        
</div>
  </div>
  </div>
</section>
<!--- JS WORK -->
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11.0.19/dist/sweetalert2.min.css">

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.0.19/dist/sweetalert2.min.js"></script>
<script>
  function showDescription(gameId) {
    // Send AJAX request to fetch the game description for the given game ID
    $.ajax({
        url: "{{ route('game.description') }}",
        method: 'GET',
        data: {
            id: gameId
        },
        success: function(response) {
            // Display the game description in a popup
            Swal.fire({
                title: 'Game Description',
                html: response.description, // Use the actual response property containing the description
                showCancelButton: false,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Close'
            });
        },
        error: function(xhr, status, error) {
            console.error(error); // Log any errors that occur during the AJAX request
        }
    });
}
function showResult(gameId) {
    // Send AJAX request to fetch the game result for the given game ID
    $.ajax({
        url: "{{ route('game.result') }}", // Replace with the actual route URL for fetching game result
        method: 'GET',
        data: {
            id: gameId
        },
        success: function(response) {
            if(response.result == 2){
              console.log('hello');
            }
            if (response.result.length > 0) {
                // Generate HTML table for the results
                var table = '<table class="table wide-table">';
                table += '<thead><tr><th>Winning Set</th><th>Amount</th><th>Description</th></tr></thead>';
                table += '<tbody>';
                $.each(response.result, function(index, result) {
                    table += '<tr>';
                    table += '<td class="number-range">' + result.number_range + '</td>';
                    table += '<td class="amount">' + result.amount + '</td>';
                    table += '<td class="description-cell">' + result.description + '</td>';
                    table += '</tr>';
                });
                table += '</tbody></table>';

                // Add CSS styles to handle long descriptions
                $('head').append('<style>.wide-table { width: 100%; }</style>');

                // Display the game result in a popup with the generated table
                Swal.fire({
                    title: 'Draw Prize',
                    html: table,
                    showCancelButton: false,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'OK'
                });
            } else {
                Swal.fire({
                    title: 'No Draw Prize Found',
                    text: 'No Draw Prize are available at the moment. Please wait for some time.',
                    icon: 'info',
                    confirmButtonColor: '#3085d6',
                    confirmButtonText: 'OK'
                });
            }
        },
        error: function(xhr, status, error) {
            console.error(error); // Log any errors that occur during the AJAX request
        }
    });
}
</script>

@endsection