@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;
  }
</style>
<section class="ticket">
  <div class="multisteps_form  position-relative overflow-hidden">
    <a href="{{ route('/') }}" class="back-button btn btn-primary"><i class="fa fa-arrow-left" aria-hidden="true"></i>Back To Home</a>
    @php
    @$wallet_balance = App\Models\Wallet::where('user_id', Auth::user()->id)->first()->amount;
    @endphp
    <span class="btn btn-info" style="position: absolute;left: 660px;">Wallet Balance : $ {{ isset($wallet_balance) ? $wallet_balance : 0 }}</span>
    <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">
            <div class="col-md-6 mb-3">
              <div class="form-group">
                <span>{{ $gameDetail->game_title }}</span>
              </div>
            </div>
            <div class="col-md-6 mb-3">
              <div class="form-group" style="position: relative;top: 52px;left: -260px;">
                <span class="text-danger">{{ \Carbon\Carbon::parse($gameDetail->game_end_date)->format('jS F Y') }} {{ date('g:i A',
                  strtotime($gameDetail->game_end_time)) }} (CLOSE DATE AND TIME)</span>
                  <br>
                  <span>{{ \Carbon\Carbon::parse($gameDetail->game_draw_date)->format('jS F Y') }} {{ date('g:i A',
                    strtotime($gameDetail->game_draw_time)) }} (DRAW DATE AND TIME)</span>
              </div>
            </div>
            <div class="col-md-6">
              <div class="form-group">
                <button class="button-72 ml-2" style="position: relative;top: 82px;" onclick="showDescription({{$gameDetail->id}})">Description</button>
                <button class="button-72 ml-2" style="top: 41px;position: relative;left: 152px;" onclick="showResult({{$gameDetail->id}})">Draw Prizes</button>
              </div>
            </div>
          </div>
        </div>
        <div class="col-md-2">
          @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">
    <form action="{{ route('user.store.ticket') }}" method="POST" id="checker" class="ticketForm">
      @csrf
      <input type="hidden" name="game_id" value="{{$gameDetail->id}}">
      <p style="padding: 20px 30px; margin: 0 0 -30px; text-align: center;color:white !important">Choose numbers</strong></p>

      <div id="checker-content">
        <div id="checker-lines">
          <div class="line" data-index="0">
            <div class="numbers">
              <input type="hidden" name="ticket_row[]" value="1">
              <ul class="p-0">
                @for ($i = 0; $i < $gameDetail->game_total_allowed_ticket; $i++)
                <li>
                  <input type="tel" min="1" name="ticket_number[0][]" maxlength="2">
                </li>
                @endfor
               

                {{-- <li>
                  <input type="tel" min="1" name="ticket_number[0][]" maxlength="2">
                </li>

                <li>
                  <input type="tel" min="1" name="ticket_number[0][]" maxlength="2">
                </li>

                <li>
                  <input type="tel" min="1" name="ticket_number[0][]" maxlength="2">
                </li>

                <li>
                  <input type="tel" min="1" name="ticket_number[0][]" maxlength="2">
                </li>

                <li>
                  <input type="tel" min="1" name="ticket_number[0][]" maxlength="2">
                </li> --}}

              </ul>

              <div class="btn clean btn-danger" style="margin-left: 20px" data-type="result">×</div>
            </div>

          </div>
        </div>
      </div>
      <div class="d-flex justify-content-center w-100">
        <div class="text-center">
          <button id="checker-add" value="+ Add Line" type="button" style="visibility: visible;">+ Add Line</button>
          <div class="form-group mb-3">
            <label for="" class="text-white main-label">Amount($) <span class="text-danger">*</span></label>
            @php
                @$amount = App\Models\Wallet::where('user_id', Auth::user()->id)->first()->amount;
            @endphp
            <input type="hidden" name="wallet-amount" id="wallet-amount" value="{{@$amount}}">
            <input type="number" class="form-control ticket-price" name="price"
              value="{{$gameDetail->game_ticket_prize != '' ? $gameDetail->game_ticket_prize : '0' }}" id="priceInput" style="color: black;background-color: #afafaf;"  readonly>
          </div>
          <div id="checker-footer">
            <div>
              <input type="button" id="checker-submit" value="Buy Ticket" class="btn btn-success placeTicketBtn">
            </div>
          </div>
        </div>
      </div>
    </form>
  </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>

document.addEventListener('DOMContentLoaded', function () {
  const buyButton = document.getElementById('checker-submit');
  
  buyButton.addEventListener('click', function (event) {
    event.preventDefault(); // Prevent the default form submission

    // Show the confirmation popup
    Swal.fire({
      title: 'Confirm Purchase',
      text: 'Do you want to buy the ticket , amount will get deducted from your Wallet!',
      icon: 'question',
      showCancelButton: true,
      confirmButtonColor: '#3085d6',
      cancelButtonColor: '#d33',
      confirmButtonText: 'Yes',
      cancelButtonText: 'No'
    }).then((result) => {
      // If the user clicks "Yes", manually submit the form
      if (result.isConfirmed) {
        const form = document.getElementById('checker'); // Change to your form ID
        form.submit(); // Manually submit the form
      }
    });
  });
});

// New Code

$(document).ready(function() {
    $('.placeTicketBtn').click(function() {
      var isValid = true;

      // Iterate over each input field
      $('#checker-content input[type="tel"]').each(function() {
        var value = $(this).val().trim();
        if (value === '') {
          isValid = false;
          return false; // Exit the loop early if any input is empty
        }
      });

       // Check if all inputs are filled
       if (!isValid) {
        Swal.fire({
          icon: 'error',
          title: 'Incomplete Fields',
          text: 'Please fill in all required fields.',
        });
        return;
      }

      // Get ticket amount from input field
      var ticketAmount = parseInt($('#priceInput').val());

      // Check wallet balance
      var walletBalance = parseInt($('#wallet-amount').val()); // Example balance, replace with actual balance retrieval code

      if (walletBalance >= ticketAmount) {
        // Sufficient balance, submit the form
        // $('.ticketForm').submit();
      } else {
        // Insufficient balance, show SweetAlert
        Swal.fire({
          icon: 'error',
          title: 'Insufficient Balance',
          text: 'Your wallet balance is not sufficient.',
        });
      }
    });
  });
$(document).ready(function() {
  var ticketRow = 1;

  // Get the initial ticket price value
  var ticketPrice = parseFloat($(".ticket-price").val());

  // Calculate the initial total price
  var totalPrice = ticketPrice;

  // Function to update the total price
  function updateTotalPrice() {
    var totalRows = $(".line").length;
    totalPrice = ticketPrice * totalRows;
    $("#priceInput").val(totalPrice);
  }

  // Function to update ticket_number attributes
  function updateTicketNumbers() {
    $(".line").each(function(index) {
      var currentRow = index;
      $(this).find("input[name^='ticket_number']").attr("name", "ticket_number[" + currentRow + "][]");
      $(this).find(".delete-row").attr("data-ticket-row", currentRow + 1);
    });
  }

  // Add a click event listener to the "Add Line" button
  $("#checker-add").click(function() {
    // Clone the first line element
    var newLine = $("#checker-lines .line").first().clone();

    // Increment the ticketRow value
    ticketRow++;

    // Set the ticket_row value in the cloned line
    newLine.find("input[name^='ticket_row']").val(ticketRow);

    // Clear the input values in the cloned line
    newLine.find("input[type='tel']").val("");

    // Remove the trash icon from the cloned line
    newLine.find(".delete-row").remove();

    // Append the new line to the lines container
    $("#checker-lines").append(newLine);

    // Show the delete button for the cloned line
    newLine.find(".numbers").prepend('<div class="btn clean btn-danger delete-row" style="margin-right: 20px" data-ticket-row="' + ticketRow + '"><i class="fa fa-trash" aria-hidden="true"></i></div>');

    // Update the ticket_number attributes
    updateTicketNumbers();

    // Update the total price
    updateTotalPrice();
  });

  // Add a click event listener to the "Clear Row" button
  $(document).on("click", ".clear-row", function() {
    // Find the parent line element
    var line = $(this).closest(".line");

    // Clear the input values in the line
    line.find("input[type='tel']").val("");

    // Update the total price after clearing the row
    updateTotalPrice();
  });

  // Add a click event listener to the "Delete Row" button
  $(document).on("click", ".delete-row", function() {
    // Find the parent line element
    var line = $(this).closest(".line");

    // Get the ticket_row value
    var ticketRowValue = line.find("input[name^='ticket_row']").val();

    // Remove the line from the lines container
    line.remove();

    // Decrement the ticketRow value
    ticketRow--;

    // Update the ticket_number attributes
    updateTicketNumbers();

    // Update the total price after deleting the row
    updateTotalPrice();
  });

  // Initial total price display
  updateTotalPrice();

  // Initial ticket_number and delete button ticket_row update
  updateTicketNumbers();
});




// New Code Ends

  
  // $("#checker-submit").click(function() {
    
  // });

// Add line functionality
$(document).ready(function() {

  // Delete line functionality
  $(document).on("click", ".fa-trash", function() {
    $(this).closest(".line").remove();
  });

  // Move to next input when the current input reaches its maxlength
  $(document).on("input", "input[type='tel']", function() {
    if (this.value.length === this.maxLength) {
      $(this).closest("li").next("li").find("input").focus();
    }
  });

  // Allow only numeric input
  $(document).on("keypress", "input[type='tel']", function(e) {
    var keyCode = e.which ? e.which : e.keyCode;
    if (keyCode < 48 || keyCode > 57) {
      e.preventDefault();
    }
  });

  // Clear input values and result div on "clean" button click
  $(document).on("click", ".clean", function() {
    $(this).siblings("ul").find("input").val(""); // Clear input values
    $(this).siblings(".clean[data-type='result']").empty(); // Clear result div
  });
});


// Duplicate number check
$(document).ready(function() {
  $(document).on("blur", "input[type='tel']", function() {
    var $row = $(this).closest(".line");
    var $inputs = $row.find("input[type='tel']").not(this);
    var value = $(this).val();
    var duplicate = false;

    // Check if the input value is not empty
    if (value.trim() !== '') {
      $inputs.each(function() {
        if ($(this).val() === value) {
          duplicate = true;
          return false; // Exit the loop early if duplicate is found
        }
      });

      if (duplicate) {
        $(this).val(""); // Clear the input value if it is a duplicate
        Swal.fire({
          icon: 'error',
          title: 'Duplicate Number',
          text: 'Please enter a unique number within the row.',
          confirmButtonColor: '#3085d6',
          confirmButtonText: 'OK'
        });
      }
    }
  });
});



// Reset input values on clean button click
$(document).ready(function() {
  $(document).on("click", ".clean", function() {
    $(this).siblings("ul").find("input").val(""); // Clear input values
    $(this).siblings(".clean[data-type='result']").empty(); // Clear result div
  });
});


// Input validation for price field
$(document).ready(function() {
  $('#priceInput').on('change', function() {
    var price = $(this).val();
    var min = parseInt($(this).attr('min'));
    var max = parseInt($(this).attr('max'));

    if (price < min || price > max) {
      Swal.fire({
        icon: 'error',
        title: 'Invalid Amount',
        text: 'Please enter an amount between ' + min + ' and ' + max + '.',
      });
      $(this).val(min); // Reset the input to the minimum value
    }
  });
});


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%; } .wide-table td { color: black; }</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