@php
$configData = Helper::appClasses();
@endphp

@extends('layouts/layoutMaster')

@section('title', 'Game Tickets')

@section('vendor-style')
<link rel="stylesheet" href="{{asset('assets/vendor/libs/datatables-bs5/datatables.bootstrap5.css')}}">
<link rel="stylesheet" href="{{asset('assets/vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.css')}}">
<link rel="stylesheet" href="{{asset('assets/vendor/libs/formvalidation/dist/css/formValidation.min.css')}}" />
<link rel="stylesheet" href="{{asset('assets/vendor/libs/sweetalert2/sweetalert2.css')}}" />
@endsection

@section('vendor-script')
<script src="{{asset('assets/vendor/libs/datatables-bs5/datatables-bootstrap5.js')}}"></script>
<script src="{{asset('assets/vendor/libs/select2/select2.js')}}"></script>
<script src="{{asset('assets/vendor/libs/formvalidation/dist/js/FormValidation.min.js')}}"></script>
<script src="{{asset('assets/vendor/libs/formvalidation/dist/js/plugins/Bootstrap5.min.js')}}"></script>
<script src="{{asset('assets/vendor/libs/formvalidation/dist/js/plugins/AutoFocus.min.js')}}"></script>
<script src="{{asset('assets/vendor/libs/cleavejs/cleave.js')}}"></script>
<script src="{{asset('assets/vendor/libs/cleavejs/cleave-phone.js')}}"></script>
<script src="{{asset('assets/vendor/libs/sweetalert2/sweetalert2.js')}}"></script>
@endsection

@section('page-script')

<script src="{{asset('js/bingo-tickets-index.js')}}"></script>
@endsection

@section('content')
<h4 class="fw-semibold mb-4">Bingo Tickets for game # {{$game->id}} played on {{$game->start_time}}</h4>
<!-- Users List Table -->
<div class="card">
  <div class="card-datatable table-responsive">
    <table class="datatables-tickets table">
      <thead class="border-top">
        <tr>
          <th>Game Type</th>
          <th>Customer Name</th>
          <th>Customer Number</th>
          <th>Start Time</th>
          <th>End Time</th>
          <th>Status</th>
          <th>Actions</th>
        </tr>
      </thead>
    </table>
  </div>
</div>
<!--/ Role cards -->


<!-- Modal for record 1 -->
<div class="modal" id="modal-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Ticket Details</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <!-- Content will be populated dynamically -->
            </div>
        </div>
    </div>
</div>
<script>
function logClick(button) {
  var recordId = $(button).data('record-id');
    var modalId = 'modal-' + 1; // Unique modal ID for each record
    // Use AJAX to fetch data specific to the clicked record
    $.ajax({
        url: '/tickets/' + recordId +'/fetch',
        method: 'GET',
        success: function(response) {
            // Assuming response contains data specific to the record
            var data = response.data;
            var numbersHtml = ''; // Variable to store HTML for numbers
            // Iterate through the numbers array and build HTML
            $.each(data.numbers, function(index, number) {
                numbersHtml += '<p>Number : ' + number.value + '  - ' + number.status + '</p>';
            });
               // Determine the name to display based on customer or admin existence
               var name = (data.user.customer) ? data.user.customer.first_name + ' ' + data.user.customer.last_name :
                       (data.user.admin) ? data.user.admin.first_name + ' ' + data.user.admin.last_name :
                       'Unknown';
          // Populate modal with data
          $('#' + modalId + ' .modal-body').html(
                '<p>Customer Name: ' + name + '</p>' +
                '<p>Phone Number: ' + (data.user.customer ? data.user.customer.phone_number : data.user.admin.phone_number) + '</p>' +
                '<p>Email: ' + (data.user.customer ? data.user.customer.email : data.user.admin.email) + '</p>' +
                '<p>Game Type:' + data.game.game_type.name + '</p>' +
                '<p>Game Id:' + data.game.id + '</p>' +
                '<p>Game Price: ZMW' + data.game.game_price + '</p>' +
                '<p>Game Status:' + data.game.status + '</p>' +
                '<p>Ticket ID: ' + data.id + '</p>' +

                '<p>Ticket Submitted At: ' + new Date(data.created_at).toLocaleString() + '</p>' +
                '<p>Ticket Status: ' + data.status + '</p>' +
                '<p>Ticket Win Status: ' + data.win_status + '</p>' +
                '<p>Ticket Correct Numbers: ' + data.correct_numbers + '</p>' +
                '<div>Submitted Numbers:' + numbersHtml + '</div>'

            );
            // Show the modal
            $('#' + modalId).modal('show');
        },
        error: function(xhr, status, error) {
            console.error('Error fetching record details:', error);
        }
    });
}
</script>
<script>
  var gameId = "{{ $game->id }}";
</script>

@endsection