@extends('admin.layouts.app')
@section('content')
<div class="container">
    <style>
        .table th, strong, .table td:first-child{
            color: #000;
            font-size: 16px;
            font-weight: 600;
        }
        .table td img{
            height: 60px;
            width: auto;
        }
        .table th{
            background: #ddd;
            padding-top: 15px;
            padding-bottom: 15px;
            border-top: 1px solid #cbcbcb !important;
        }
        .table td{
            background: #fff;
        }
        .table{
            --bs-table-border-color: #cbcbcb !important;
        }
        table#games-table{
            border-top: 1px solid #cbcbcb !important;
        }
        button.badge{
            border: unset;
        }
        .card{
            border: none;
            box-shadow: 0 1px 20px 0 rgba(69, 90, 100, 2.08);
        }

        .cta-container {
            display: flex;
            justify-content: flex-end;
        }

        .cta-section {
            margin-left: auto;
        }

        #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;
  } 
  .card-title{
            font-weight: 600;
            font-size: 1.1rem;
            margin-bottom: 0px;
            line-height: 1.8;
        }
        .btn-main{
            border-color: #302B63;
            background: #302B63 !important;
            color: #fff;
            padding: 0.55rem 1.5rem;
            font-size: 14px;
            font-weight: 600;
            line-height: 24px;
            letter-spacing: .5px;
        }
        .btn-main:hover{
            border-color: #302B63;
            background: #fff !important;
            color: #302B63;
        }
        .form-control{
            border-radius: 5px;
            background: #fff;
            border-color: #e4e6fc;
            font-size: 16px;
            color: #666;
        }
        .form-control:focus{
            border-color: #302B63;
            color: #666;
        }
        label.card-title {
            white-space: nowrap;
            margin-right: 15px
        }
        .card {
    border: none;
    box-shadow: 0 1px 8px 0 rgba(69, 90, 100, 0.4);
}
    </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="d-flex justify-content-between align-items-center">
            <div class="w-100 text-center">
                <h1 class="mb-3" style="font-weight: 600; font-size: 1.5rem">Create Ticket</h1>
            </div>
            
            {{-- <a href="#" class="btn btn-primary">Add New Game</a> --}}
        </div>
       
        {{-- <div style="margin: 20px 0px;">
            <div style="display: flex; align-items: center;">
              <strong style="margin-left: 10px; margin-right: 10px;">Search By Ticket No :</strong>
              
            </div>
          </div> --}}
          <form action="{{ route('admin.agent-game.store-ticket') }}" method="POST" id="checker" class="ticketForm">
            @csrf
          <div class="card">
            <div class="card-body">
                <div class="row">
                    <div class="col-md-8">
                        <div class="text-section">
                            <h5 class="card-title">Game Title : <span style="font-weight: 500; color: #666;">{{ $gameDetail->game_title }}</span><span></span></h5>
              <h5 class="card-title">Close Date and Time : <span style="font-weight: 500; color: #666;">{{ date('d M Y h:i a', strtotime($gameDetail->game_end_date . ' ' . $gameDetail->game_end_time)) }}</span></h5>
                <h5 class="card-title">Draw Date and Time : <span style="font-weight: 500; color: #666;">{{ date('d M Y h:i a', strtotime($gameDetail->game_draw_date . ' ' . $gameDetail->game_draw_time)) }}</span></h5>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="cta-container text-right"> 
                  <div class="cta-section">
                      {{-- <a href="#" class="btn btn-main">Proceed</a> --}}
                  </div>
              </div>
                    </div>
                </div>
              
            </div>
          </div>

          <div class="card">
            <div class="card-body">
                <div class="row justify-content-center">
                    <div class="col-md-4 mb-3 d-flex">
                        <label class="card-title" class="form-label">Select the User : </label>
                        <select name="user_id" class="form-control">
                        <option value="">Select User</option>
                        @foreach ($users as $user)
                            <option value="{{$user->id}}">{{ $user->name }}</option>
                        @endforeach
                        </select>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-4 d-flex">
                        <label class="card-title" class="form-label">Name : </label>
                        <input type="text" class="form-control" name="user_name" readonly>
                    </div>
                    <div class="col-md-4 d-flex">
                        <label class="card-title" class="form-label">Phone No : </label>
                        <input type="text" class="form-control" name="user_phone" readonly>
                    </div>
                    <div class="col-md-4 d-flex">
                        <label class="card-title" class="form-label">Wallet Balance : </label>
                        <input type="text" class="form-control" id="wallet-amount" name="user_wallet" readonly>
                    </div>
                </div>
              <!-- New Section with 6 input fields and an "Add" button -->
              <div class="text-center">
                <div class="card bg-gray mt-4 p-5" style="box-shadow: unset">
                  
                    <input type="hidden" name="game_id" value="{{$gameDetail->id}}">
                    <p style="padding: 20px 30px; margin: 0 0 -30px; text-align: center;color:#222 !important;">Choose numbers</strong></p>
              
                    <div id="checker-content">
                      <div id="checker-lines" style="color: black;background-color: beige; border-radius: 12px;">
                        <div class="line" data-index="0">
                          <div class="numbers">
                            <input type="hidden" name="ticket_row[]" value="1">
                            <ul class="p-0">
                              <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>
              
                              <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=" main-label">Amount <span class="text-danger">*</span></label>
                          {{-- <label for="amount">Amount</label> --}}
                          <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="Create Ticket" class="btn btn-success placeTicketBtn">
                          </div>
                        </div>
                      </div>
                    </div>
                  </form>
                </div>
            </div>
            </div>
          </div>
       
    </div>
</div>
</div>
@push('scripts')
<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>
  // Wait for the document to be ready
  $(document).ready(function() {
        // Add an event listener to the user select dropdown
        $('select[name="user_id"]').on('change', function() {
            var selectedUserId = $(this).val(); // Get the selected user_id
            if (selectedUserId) {
                // If a user is selected, send an AJAX request
                $.ajax({
                    url: '{{ route("admin.agent-game.fetch-user") }}', // Replace with the actual URL to fetch user data
                    method: 'POST',
                    data: {
                        _token: $('input[name="_token"]').val(), // Add the CSRF token to the request
                        user_id: selectedUserId,
                    },
                    dataType: 'json', // Expect JSON response
                    success: function(response) {
                        // Update the input boxes with the received data
                        $('input[name="user_name"]').val(response.name);
                        $('input[name="user_phone"]').val(response.phone);
                        $('input[name="user_wallet"]').val(response.wallet_balance);
                    },
                    error: function(xhr, status, error) {
                        console.error('Error:', error);
                    }
                });
            } else {
                // If "Select User" is chosen, reset the input boxes
                $('input[name="user_name"]').val('');
                $('input[name="user_phone"]').val('');
                $('input[name="user_wallet"]').val('');
            }
        });
    });


// 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
    }
  });
});


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
      }
    });
  });
});
</script>


@endpush
@endsection