@extends('layouts.app')

@section('content')

<style>

  .content-edit-mode {

    display: none;

  }



  .small-popup {

    max-width: 400px;

    margin: auto;

  }



        .dropzone {

            background: #e3e6ff;

            border-radius: 13px;

            max-width: 550px;

            margin-left: auto;

            margin-right: auto;

            border: 2px dotted #1833FF;

            margin-top: 50px;

        }

        .my-account #pills-home .card{

            max-width: 680px;

        }

        .my-account .card{

            width: unset;

            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;

            padding: 30px

        }

        /* #pills-profile  .card{

            max-width: 500px;

        } */

        button.btn.btn-primary{

                background: #FFFFFF;

                border: 1px solid #FFFFFF;

                color: #0f0c29;

                

            }

        button.btn.btn-primary:hover{

                background: transparent;

                border: 1px solid #FFFFFF;

                color: #fff;

            }

            button.btn.btn-primary:focus{

                box-shadow: none;

            }

            .form-control, form#file-upload{

                background: transparent;

                color: #fff;

                border: 1px solid #ffffff38;

            }

            .form-control:focus, form#file-upload:focus{

                background: transparent;

                color: #fff;

                border: 1px solid #FFFFFF;

                box-shadow: none;

            }

            .form-control::placeholder, form#file-upload::placeholder{

                color: #fff;

            }

            form#file-upload{

                margin-top: 0px;

            }

            span.input-group-text{

                width: 100px;

                background: transparent;

                border: 1px solid #ffffff38;

                color: #fff;

                cursor: pointer;

            }

            span.input-group-text:focus{

                border: 1px solid #FFFFFF !important;

            }

            .main-label{

                margin-bottom: 5px;

            }

            .form-control{

                text-align: start !important;

            }

            .tab-content>.tab-pane {

                display: none !important;

            }

            .tab-content>.active {

                display: block !important;

            }

            .nav-pills .nav-link{

                padding: 10px 15px !important;

                height: 45px;

                font-weight: 600 !important;

                font-size: 16px !important;

            }

            .nav-pills .nav-link.active, .nav-pills .show>.nav-link, .nav-pills .nav-link:hover {

                color: #0f0c29 !important;

                background: #FFFFFF !important;

                box-shadow: none !important;

            }

            .profile-img{

                max-width: 200px;

                max-height: 200px;

                display: flex;

                justify-content: center;

                align-items: center;

                overflow: hidden;

                border-radius: 8px; 

            }

            .profile-img img{

                max-width: 100%;

                max-height: 100%;

                object-fit: contain;

                border-radius: 8px; 

}



            .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;

}

.category {

    font-size: 20px;

    width: 300px;

    position: relative;

    left: 500px;

    background-color: #20103a !important;

    color: white;

    text-align: center;

}

.category {

    padding: 12px 15px;

    border-radius: 8px;

}

#ticket_table_previous, #ticket_table_next, .paginate_button.current  {
    font-size: 10px;
}

</style>

<link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.2/dropzone.min.css" rel="stylesheet">

<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.2/min/dropzone.min.js"></script>

<section class="my-account mt-4">

  <meta name="csrf-token" content="{{ csrf_token() }}">

  <div class="position-relative overflow-hidde">

    <ul class="nav nav-pills d-flex justify-content-center mb-3" id="pills-tab" role="tablist">

        <li class="nav-item" role="presentation">
            <a href="{{ route('user.my-account.profile') }}" class="nav-link button-72 {{ request()->routeIs('user.my-account.profile') ? 'active' : '' }}"
                id="pills-home-tab">
                PERSONAL
            </a>
        </li>


        <li class="nav-item" role="presentation">
            <a href="{{ route('user.my-account.ticket') }}" class="nav-link button-72 {{ request()->routeIs('user.my-account.ticket') ? 'active' : '' }}"
                id="pills-home-tab">
                TICKETS
            </a>
        </li>

        <li class="nav-item" role="presentation">
            <a href="{{ route('user.my-account.balance') }}" class="nav-link button-72 {{ request()->routeIs('user.my-account.balance') ? 'active' : '' }}"
                id="pills-home-tab">
                WALLET
            </a>
        </li>

    </ul>

    <div class="tab-content" id="pills-tabContent">

        <div class="tab-pane fade {{ request()->routeIs('user.my-account.profile') ? 'show active' : '' }}" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab" tabindex="0">

        <div class="card">

          <div class="card-body">

            <div class="content-view-mode">

                <div class="row align-items-center mb-4">

                    <div class="col-md-5">

                        <div class="profile-img">

                            <img src="{{ asset('front/images/photo.jpeg') }}" class="" alt="profile">

                        </div>

                        

                    </div>

                    <div class="col-md-7">

                        <div class="text-start">

                            <p class="d-flex align-items-center"><span style="margin-right: 6px; width: 20px;" class="d-flex justify-content-center"><i class="fa fa-user-o" aria-hidden="true"></i></span> {{ Auth::user()->name }}</p>

                            <p class="d-flex align-items-center"><span style="margin-right: 6px; width: 20px;" class="d-flex justify-content-center"><i class="fa fa-mobile" aria-hidden="true"></i></span> {{ Auth::user()->country_code }} {{ Auth::user()->phone }}</p>

                            <p class="d-flex align-items-center"><span style="margin-right: 6px; width: 20px;" class="d-flex justify-content-center"><i class="fa fa-envelope-o" aria-hidden="true"></i></span> {{ Auth::user()->email }}</p>

                        </div>

                    </div>

                </div>

                <div class="row">

                    <div class="col-md-4 text-start">

                        <p style="font-size: 15px;"><b style="margin-right:6px; font-weight: 600;">Total Tickets Placed:</b>{{ @$total_ticket ? $total_ticket : 0 }}</p>

                    </div>

                    <div class="col-md-4 text-start">

                        <p style="font-size: 15px;"><b style="margin-right:6px; font-weight: 600;">Total Tickets Won:</b> {{ @$wonTicketsCount ? $wonTicketsCount : 0 }}</p>

                    </div>

                    <div class="col-md-4 text-start">

                        <p style="font-size: 15px;"><b style="margin-right:6px; font-weight: 600;">No Match:</b>{{ @$lostTicketsCount ? $lostTicketsCount : 0 }} </p>

                    </div>

                </div>

              {{-- @if(Auth::user()->profile_image) --}}

            

                {{-- <img src="{{ asset('front/images/photo.jpeg') }}" width="200" height="200" class="img-round mb-3" alt="profile"> --}}

              {{-- @else

              <img src="{{ asset('storage/profile_images/' . Auth::user()->profile_image) }}" width="200" height="200"

              class="img-round" alt="profile">

                <img src="{{ asset('front/images/photo.jpeg') }}" width="200" height="200" class="img-round" alt="profile">

              @endif --}}

                {{-- <h4 class="mb-3">{{ Auth::user()->name }}</h4> --}}

              {{-- <p><strong>Name:</strong> {{ Auth::user()->name }}</p> --}}

              {{-- <div class="">

                <p><span style="margin-right: 6px;"><i class="fa fa-envelope-o" aria-hidden="true"></i></span> {{ Auth::user()->email }}</p>

                <p><span style="margin-right: 6px;"><i class="fa fa-mobile" aria-hidden="true"></i></span> {{ Auth::user()->country_code }} {{ Auth::user()->phone }}</p>

              </div> --}}

              <button class="btn btn-primary" style="padding: 10px 18px;font-size: 14px; font-weight: 600;" id="edit_btn_profile">Edit</button>

            </div>

            <div class="content-edit-mode" style="display: none;">

              <div id="dropzone">

        <form action="{{ route('user.dropzoneFileUpload') }}" class="dropzone mb-3" id="file-upload" enctype="multipart/form-data">

            @csrf

            <div class="dz-message">

                Drag and Drop Single/Multiple Files Here<br>

            </div>

        </form>

    </div>

              <div class="profile-image">

                {{-- <img src="{{ asset('front/images/photo.jpeg')}}" width="200" height="200" class="img-round"

                  alt="profile">

                <input type="file" class="form-control-file" id="image-input"> --}}

              </div>

              <div class="form-group text-start mb-3">

                <label class="main-label" for="name-input">Name</label>

                <input type="text" class="form-control text-center" id="name-input" value="{{ Auth::user()->name }}">

              </div>

              <div class="form-group text-start mb-3">

                <label class="main-label" for="email-input">Email</label>

                <input type="email" class="form-control text-center" id="email-input" value="{{ Auth::user()->email }}">

              </div>

              <div class="form-group text-start mb-3">

                <label class="main-label" for="phone-input">Phone No</label>

                <div class="input-group">

                  <div class="input-group-prepend">

                    <span class="input-group-text">{{ Auth::user()->country_code }}</span>

                  </div>

                  <input type="text" class="form-control text-center" id="phone-input"

                    value="{{ Auth::user()->phone }}">

                </div>

              </div>

              <div class="form-group mt-5">

                <button class="btn btn-primary save-btn">Save</button>

              </div>

            </div>

          </div>

        </div>

      </div>
      <div class="tab-pane fade d-flex justify-content-center flex-column ticket-card {{ request()->routeIs('user.my-account.ticket') ? 'show active' : '' }} id="pills-profile"

        role="tabpanel" aria-labelledby="pills-profile-tab" tabindex="0">

        <div class="row">

          <div class="col-md-12 mb-4 mt-4 d-flex justify-content-between">

            <div class="">


            </div>

            <div class="">
                <div class="card" style="position: relative;right: 260px;">
                    <div class="card-header" style="position: relative;padding:15px;">
                        TICKET HISTORY
                        <a class="btn btn-primary" href="javascript:void(0);" id="winTicketsButton" style="position: absolute; right: 0; top:6px; width: auto; padding: 10px 18px;font-size: 14px; font-weight: 600;">WIN TICKETS</a>
                    </div>
                   
                        <label class="card-title form-label">Select Game : </label>
                        <select name="game_id" id="game-selector" class="form-control" style="width: 150px;background: #2f2a5f;margin: 10px auto;">
                        <option value="">Select Game</option>
                        @foreach($games as $game)
                          <option value="{{$game->id}}">{{ $game->game_title }}</option>
                        @endforeach
                        </select>
                        <button id="reset-button" class="btn btn-secondary ml-2" style="width: 101px; margin: 10px auto;">Reset</button>


                    <div class="card-body">
                        <div class="table-responsive" style="padding-top: 20px;">
                            <table class="table" id="ticket_table">
                                <thead>
                                    <tr class="text-white">
                                        <th>SL NO</th>
                                        <th class="text-center">Ticket No</th>
                                        <th class="text-center">Ticket Date</th>
                                        <th class="text-center">Draw Date</th>
                                        <th class="text-center">Result</th>
                                        <th class="text-center">Claim Amount</th>
                                        <th class="text-center">Claim Status</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @isset($tickets)
                                    @php
                                    @$ticket_count = count(@$tickets);
                                    @endphp
                                    @if ($ticket_count > 0)
                                        @foreach ($tickets as $ticket)
                                            @php     
                                                $ticket_sequences = App\Models\TicketSequence::where('ticket_detail_id', $ticket->id)->get();
                                                $result_publish = App\Models\ResultPublish::where('game_id', $ticket->game_id)->first();
                                                $result_numbers = App\Models\ResultPublishDetail::where('result_publish_id', $result_publish->id)->get();
                                                
                                                $totalMatchingNumbersCount = 0;
                                
                                                foreach ($ticket_sequences as $sequence) {
                                                    $winningNumbers = explode(',', $sequence->winning_sequence);
                                                    $matchingNumbersCount = 0;
                                
                                                    foreach ($winningNumbers as $winningNumber) {
                                                        $matchingNumber = App\Models\WinningNumber::where('number', $winningNumber)->first();
                                                        if ($matchingNumber) {
                                                            $matchingNumbersCount++;
                                                        }
                                                    }
                                
                                                    $totalMatchingNumbersCount += $matchingNumbersCount;
                                                }
                                
                                                $description = [];
                                                $amount = [];
                                                foreach($result_numbers as $number){
                                                    if($number->number_range == $totalMatchingNumbersCount) {
                                                        $description[] = $number->description;
                                                        $amount[] = $number->amount;
                                                    }
                                                }
                                
                                            @endphp
                                            
                                            <tr class="text-white" data-game="{{ $ticket->game_id }}">
                                                <td>{{ ++$loop->index }}</td>
                                                <td>{{ $ticket->ticket_code }}</td>
                                                <td>{{ $ticket->created_at->format('Y-m-d') }}</td>
                                                <td>{{ getGameDetailById($ticket->game_id, 'game_draw_date')}}</td>
                                                <td>
                                                    @php
                                                        $game = getGameDetailById($ticket->game_id, 'result_publish');
                                                    @endphp
                                                    @if ($game == 1)
                                                        Published
                                                    @else
                                                        Waiting
                                                    @endif
                                                </td>
                                                <td class="claim-amount">
                                                        @if (count($amount) > 0 && $game == 1)
                                                            @foreach ($amount as $amnt)
                                                                $ {{ $amnt }}<br>
                                                            @endforeach
                                                        @elseif (count($amount) == 0 && $game == 1)
                                                            No Amount Available
                                                        @else
                                                            $ 0
                                                        @endif
                                                </td>
                                                <td>
                                                    @if ($ticket->is_claimed == 1)
                                                        Claimed
                                                    @elseif($ticket->is_claimed == 2)
                                                        Pending
                                                    @else
                                                        Not Applicable
                                                    @endif
                                                </td>
                                                <td>
                                                @if ($game == 1)
                                                    @foreach ($amount as $amnt)
                                                        @if($amnt > 0)
                                                            @if($ticket->is_claimed == 1)
                                                                <a href="#" title="" class="btn btn-info" readonly style="font-size: 12px;">Claimed</a>
                                                            @elseif($ticket->is_claimed == 2)
                                                                <a href="#" title="" class="btn btn-info" readonly style="font-size: 12px;">Claim Requested</a>
                                                            @else
                                                                <a href="{{ route('user.claim-ticket-amount', $ticket->id) }}" title="" class="btn btn-info" style="font-size: 12px;">Click To Claim</a>
                                                            @endif
                                                        @endif
                                                    @endforeach
                                                @endif
                                                </td>
                                            </tr>
                                        @endforeach
                                    @else
                                        <tr>
                                            <td colspan="8" class="text-center">No records found</td>
                                        </tr>
                                    @endif
                                @endisset
                                
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

          </div>

        </div>

      </div>
      

      <div class="tab-pane fade d-flex justify-content-center flex-column ticket-card {{ request()->routeIs('user.my-account.balance') ? 'show active' : '' }}" id="pills-balance"

        role="tabpanel" aria-labelledby="pills-profile-tab" tabindex="0">

        <div class="row">

          <div class="col-md-12 mb-4 mt-4 d-flex justify-content-between">

            <div class="">


            </div>

            <div class="">
                <div class="card" style="position: relative;right: 260px;">
                    <div class="card-header">
                        <span class="btn btn-secondary">Total Credits Available : $ {{ @$wallet->amount }}</span>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive" style="padding-top: 20px;">
                            <table class="table">
                                <thead>
                                    <tr class="text-white">
                                        <th>SL NO</th>
                                        <th class="text-center">Amount</th>
                                        <th class="text-center">Type(Credit/Debit)</th>
                                        <th class="text-center">Date</th>
                                        <th class="text-center">Ticket No</th>
                                        <th class="text-center">Claim Status</th>
                                    </tr>
                                </thead>
                                <tbody>
                                @if(isset($wallet_transactions))
                                @if(@$wallet_transactions->count() > 0)
                                @php
                                    $count = 1;
                                @endphp
                                @foreach ($wallet_transactions as $transaction)
                                    <tr class="text-white">
                                        <td class="text-center">{{ $count++ }}</td>
                                        <td class="text-center">$ {{ @$transaction->amount }}</td>
                                        <td class="text-center">
                                            @if (@$transaction->type == 1)
                                                <span style="color: green;">Credit</span>
                                            @elseif (@$transaction->type == 2)
                                                <span style="color: red;">Debit</span>
                                            @else
                                                N/A
                                            @endif
                                        </td>
                                        <td class="text-center">{{ @$transaction->created_at->format('Y-m-d') }}</td>
                                        <td class="text-center">{{ @$transaction->ticket_id }}</td>
                                        <td>    
                                           @if ($transaction->status == 1)
                                               Claimed
                                            @else
                                                --
                                           @endif
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                            </table>
                            {!! $wallet_transactions->links() !!}
                            @else
                                <p>No records found.</p>
                            </table>
                        @endif
                        </div>
                        @endif
                    </div>
                </div>
            </div>
          </div>

        </div>

      </div>

     

    </div>

  </div>

  </div>

</section>

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/v/dt/jqc-1.12.4/dt-1.13.5/b-2.4.1/sl-1.7.0/datatables.min.css"/>
<link rel="stylesheet" href="Editor-2.2.2/css/editor.dataTables.css">

<script src="https://cdn.datatables.net/v/dt/jqc-1.12.4/dt-1.13.5/b-2.4.1/sl-1.7.0/datatables.min.js"></script>
<script src="Editor-2.2.2/js/dataTables.editor.js"></script>

<script>

$('#ticket_table').DataTable();

$(document).ready(function () {
        $("#winTicketsButton").click(function () {
            $(".claim-amount").each(function () {
                var claimAmountText = $(this).text().trim();
                var claimAmount = parseFloat(claimAmountText.replace("$", "").trim());

                if (claimAmount > 0) {
                    $(this).closest("tr").show();
                    $(this).closest("").show();
                } else {
                    $(this).closest("tr").hide();
                }
                
            });
        });
    });

    var allRows = $('#ticket_table tbody tr');

    $('#game-selector').on('change', function() {
        var selectedGameId = $(this).val();

        if (selectedGameId) {
            allRows.hide(); // Hide all rows
            var selectedRows = $('#ticket_table tbody tr[data-game="' + selectedGameId + '"]');
            if (selectedRows.length > 0) {
                selectedRows.show();
            } else {
                $('#no-records-row').show(); // Show "No records found" row
            }
        } else {
            allRows.show(); // Show all rows if no game is selected
            $('#no-records-row').hide();
        }
    });


     // Reset button functionality
     $('#reset-button').on('click', function() {
        $('#game-selector').val(''); // Clear the selection
        allRows.show(); // Show all rows
        $('#no-records-row').hide(); // Hide "No records found" row
    });


  $(document).ready(function() {

    // Edit button click event

    $('#edit_btn_profile').click(function() {

      $('.content-view-mode').hide();

      $('.content-edit-mode').show();

    });



  $('.save-btn').click(function() {

  var name = $('#name-input').val();

  var email = $('#email-input').val();

  var phone = $('#phone-input').val();



  // Get the selected image file

  var imageFile = $('#image-input')[0].files[0];



  // Create a random file name using the current date and a random number

  var currentDate = new Date().toISOString().slice(0, 10);

  var randomNumber = Math.floor(Math.random() * 10000);

  var fileName = 'profile_' + currentDate + '_' + randomNumber;



  // Create a FormData object to send the image file and other form data

  var formData = new FormData();

  // formData.append('image', imageFile, fileName);

  formData.append('name', name);

  formData.append('email', email);

  formData.append('phone', phone);



  // Perform AJAX request to update the user data and upload the image

  $.ajax({

    url: '{{ route("user.my-account.update") }}', // Replace with your update profile endpoint

    method: 'POST',

    data: formData,

    headers: {

      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')

    },

    processData: false,

    contentType: false,

    success: function(response) {

      // Show success popup using SweetAlert

      Swal.fire({

        icon: 'success',

        title: 'Profile Updated',

        text: 'Your profile has been updated successfully.',

        onClose: function() {

          // Reload the page

          location.reload();

        },

        customClass: {

          container: 'small-popup'

        }

      });

    },

    error: function(xhr, status, error) {

      // Show error message

      console.log(error);

      Swal.fire({

        icon: 'error',

        title: 'Error',

        text: 'An error occurred. Please try again.'

      });

    }

  });

});

  });



  

        // var dropzone = new Dropzone('#file-upload', {

        //     previewTemplate: document.querySelector('#preview-template').innerHTML,

        //     parallelUploads: 1,

        //     thumbnailHeight: 150,

        //     thumbnailWidth: 150,

        //     maxFilesize: 1,

        //     filesizeBase: 1500,

        //     thumbnail: function (file, dataUrl) {

        //         if (file.previewElement) {

        //             file.previewElement.classList.remove("dz-file-preview");

        //             var images = file.previewElement.querySelectorAll("[data-dz-thumbnail]");

        //             for (var i = 0; i < images.length; i++) {

        //                 var thumbnailElement = images[i];

        //                 thumbnailElement.alt = file.name;

        //                 thumbnailElement.src = dataUrl;

        //             }

        //             setTimeout(function () {

        //                 file.previewElement.classList.add("dz-image-preview");

        //             }, 1);

        //         }

        //     }

        // });

        

        // var minSteps = 6,

        //     maxSteps = 60,

        //     timeBetweenSteps = 100,

        //     bytesPerStep = 100000;

        // dropzone.uploadFiles = function (files) {

        //     var self = this;

        //     for (var i = 0; i < files.length; i++) {

        //         var file = files[i];

        //         totalSteps = Math.round(Math.min(maxSteps, Math.max(minSteps, file.size / bytesPerStep)));

        //         for (var step = 0; step < totalSteps; step++) {

        //             var duration = timeBetweenSteps * (step + 1);

        //             setTimeout(function (file, totalSteps, step) {

        //                 return function () {

        //                     file.upload = {

        //                         progress: 100 * (step + 1) / totalSteps,

        //                         total: file.size,

        //                         bytesSent: (step + 1) * file.size / totalSteps

        //                     };

        //                     self.emit('uploadprogress', file, file.upload.progress, file.upload

        //                         .bytesSent);

        //                     if (file.upload.progress == 100) {

        //                         file.status = Dropzone.SUCCESS;

        //                         self.emit("success", file, 'success', null);

        //                         self.emit("complete", file);

        //                         self.processQueue();

        //                     }

        //                 };

        //             }(file, totalSteps, step), duration);

        //         }

        //     }

        // }

        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: 'Game Result',
                    html: table,
                    showCancelButton: false,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'OK'
                });
            } else {
                Swal.fire({
                    title: 'No Results Found',
                    text: 'No results 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