@extends('admin.layouts.app')
@section('content')
<div class="container">
    <style>
        .line {
            position: relative;
            display: inline-block;
            padding: 20px 0 30px;
            border-bottom: none;
        }

        .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: 0px;
        }

        .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;
        }
    </style>
  <div class="card mt-4">
      <div class="card-body">
          @if(session('success'))
          <div class="alert alert-success">
              {{ session('success') }}
          </div>
          @endif
          @if(session('error'))
          <div class="alert alert-danger">
              {{ session('error') }}
          </div>
          @endif

          <div class="row">
            <div class="sm-title text-center position-relative mb-3 mt-3">
              <h6 class="mb-0">TICKET PREVIEW</h6>
              <div class="back-button position-absolute" style="top: -12px;left:10px;">
                <a href="{{ route('admin.agent-ticket-lists') }}" class="btn btn-main">Back</a>
              </div>
            </div>
            <div class="col-md-8 mx-auto mb-3 mt-3">
              <div class="row">
                <div class="col-md-6">
                  <div class="ticket-code">
                    <span>Code : {{ $ticket->id }}</span>
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="text-start">
                    <p class="card-title">Draw Date and Time : <span>{{ $game->game_draw_date }}</span> </p>
                    <p class="card-title">Customer Name : <span> {{ getUserNameById($ticket->user_id) }}</span></p>
                    <p class="card-title">Customer Phone No : <span> {{ getUserPhoneNumberById($ticket->user_id) }}</span></p>
                  </div>
                </div>
              </div>
            </div>

            <div class="col-md-12 text-center">
              <style>
                .numbers input, .numbers input:focus{
                    border: 1px solid var(--pg) !important;
                    outline: none !important;
                }
              </style>
              @for ($i = 0; $i < count($ticket_sequence); $i += 6)
              <div class="ticket-number-wrap d-flex align-items-center justify-content-between">
                <span class="card-title" style="display: inline-block; color: var(--primary);">TICKET NO : </span>
                <div class="ticket-number-box">
                  <div class="line" data-index="0">
                    <div class="numbers">
                      <ul class="p-0">
                        @for ($j = $i; $j < min($i + 6, count($ticket_sequence)); $j++)
                        <li>
                            <input type="tel" min="1" value="{{ $ticket_sequence[$j]->winning_sequence }}" readonly>
                        </li>
                        @endfor
        
                      </ul>
        
                    </div>
        
                  </div>
                  
                </div>
                <div class="">
                  {!! QrCode::size(150)->generate(route('print-qr.ticket', $ticket->id)) !!}
                </div>
              <div>
            </div>
            </div>
            @endfor
            </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" 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>
          <div class="mt-4 mb-4 text-center">
            <span class="card-title mb-3" style="display: inline-block; color: var(--primary);">RESULTS</span>
            
            </div>
          </div>
          @if($game->result_publish != 1)
          <div class="text-center">
            <a href="#" class="btn btn-main">Yet To Publish</a>
          </div>
          @else
          <div class="text-center">
            <a href="{{ route('admin.result-agent-ticket', $ticket->id) }}" class="btn btn-main">Check Result</a>
          </div>
          @endif
</div>
</div>
@push('scripts')
@endpush
@endsection